:root {
      --bg-primary: #0a1020;
      --bg-secondary: #0d1528;
      --bg-card: #111d32;
      --bg-card-hover: #162440;
      --accent-blue: #4da6ff;
      --accent-cyan: #00d4ff;
      --accent-gold: #f0b90b;
      --accent-gradient: linear-gradient(135deg, #4da6ff 0%, #00d4ff 100%);
      --text-primary: #ffffff;
      --text-secondary: #8a8f98;
      --text-dim: #5a5f68;
      --success: #00e676;
      --warning: #ffab00;
      --danger: #ff5252;
      --border: #1e3050;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    /* Keyboard focus: one visible ring everywhere (buttons, links, tabs, table
       controls). Only shows for keyboard/AT focus — mouse clicks don't ring.
       Inputs keep their own :focus border/glow styles (those rules are more
       specific and set outline: none). */
    :focus-visible {
      outline: 2px solid var(--accent-cyan);
      outline-offset: 2px;
    }
    :focus:not(:focus-visible) { outline: none; }

    body {
      font-family: 'Space Grotesk', sans-serif;
      background: radial-gradient(ellipse at center, #0d1a30 0%, #0a1020 50%, #060810 100%);
      color: var(--text-primary);
      min-height: 100vh;
      overflow-x: hidden;
    }

    /* Global scrollbar styling */
    ::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }

    ::-webkit-scrollbar-track {
      background: var(--bg-primary);
    }

    ::-webkit-scrollbar-thumb {
      background: var(--border);
      border-radius: 4px;
    }

    ::-webkit-scrollbar-thumb:hover {
      background: var(--accent-blue);
    }

    .bg-pattern {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 0;
      overflow: hidden;
    }

    .bg-line {
      position: absolute;
      background: var(--accent-gradient);
      opacity: 0.06;
    }

    .bg-line-1 {
      width: 3px;
      height: 150%;
      top: -25%;
      right: 15%;
      transform: rotate(35deg);
    }

    .bg-line-2 {
      width: 3px;
      height: 150%;
      top: -25%;
      right: 12%;
      transform: rotate(35deg);
    }

    .bg-line-3 {
      width: 3px;
      height: 100%;
      bottom: 0;
      right: 20%;
      transform: rotate(-55deg);
      transform-origin: bottom right;
    }

    header {
      position: relative;
      z-index: 10;
      padding: 1.5rem 2rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid var(--border);
    }

    .logo {
      display: flex;
      align-items: center;
      font-size: 1.75rem;
      font-weight: 700;
      text-decoration: none;
      cursor: pointer;
    }

    .logo:hover {
      opacity: 0.9;
    }

    .logo-x1 {
      display: flex;
      font-size: 2.25rem;
      letter-spacing: -1px;
    }

    .logo-x {
      color: var(--text-primary);
    }

    .logo-1 {
      color: var(--accent-blue);
    }

    .logo-subtitle {
      font-size: 1.1rem;
      color: var(--text-secondary);
      font-weight: 500;
      margin-left: 0.875rem;
      padding-left: 0.875rem;
      border-left: 1px solid var(--border);
    }

    .logo-subtitle-validator {
      color: var(--text-primary);
    }

    .logo-subtitle-hq {
      background: linear-gradient(135deg, var(--accent-blue), var(--accent-cyan));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .header-links {
      display: flex;
      gap: 1.5rem;
    }

    .header-links a {
      color: var(--text-secondary);
      text-decoration: none;
      font-size: 0.9rem;
      transition: color 0.2s;
    }

    .header-links a:hover {
      color: var(--accent-blue);
    }

    .header-right {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 0.5rem;
    }

    .xnt-price-pill {
      display: inline-block;
      padding: 1px;
      border-radius: 999px;
      background: linear-gradient(135deg, var(--accent-blue), var(--accent-cyan));
      box-shadow: 0 0 7px rgba(0, 212, 255, 0.22);
    }

    .xnt-price-pill.xnt-hidden {
      display: none;
    }

    .xnt-pill-inner {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      padding: 0.2rem 0.6rem;
      border-radius: 999px;
      background: #0c1526;
    }

    .xnt-pill-logo {
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.01em;
      line-height: 1;
    }

    .xnt-pill-logo .x-char { color: var(--text-primary); }
    .xnt-pill-logo .one-char { color: var(--accent-blue); }

    .xnt-pill-ticker {
      font-size: 0.66rem;
      font-weight: 600;
      color: var(--text-secondary);
      letter-spacing: 0.02em;
    }

    .xnt-pill-price {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.74rem;
      font-weight: 600;
      color: var(--text-primary);
    }

    .xnt-pill-change {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.62rem;
      font-weight: 600;
    }

    .xnt-pill-change.up { color: var(--success); }
    .xnt-pill-change.down { color: var(--danger); }

    .header-pill-slot {
      display: inline-flex;
      align-items: center;
      margin-left: 1.5rem;
      padding-left: 1.5rem;
      border-left: 1px solid var(--border);
    }

    .header-pill-slot.xnt-hidden {
      display: none;
    }

    /* Network Toggle Switch */
    .network-toggle-container {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      margin-left: 1.5rem;
      padding-left: 1.5rem;
      border-left: 1px solid var(--border);
    }

    .network-toggle-label {
      font-size: 0.75rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      display: flex;
      align-items: center;
      gap: 0.35rem;
      transition: all 0.3s;
    }

    .network-toggle-label.x1 {
      color: var(--accent-cyan);
    }

    .network-toggle-label.solana {
      color: #9945FF;
    }

    .network-toggle-label.inactive {
      color: var(--text-dim);
    }

    .network-toggle {
      position: relative;
      width: 44px;
      height: 22px;
      background: linear-gradient(135deg, #00e5ff 0%, #4da6ff 100%);
      border-radius: 11px;
      cursor: pointer;
      transition: all 0.3s;
      border: none;
      padding: 0;
    }

    .network-toggle.solana-active {
      background: linear-gradient(135deg, #9945FF 0%, #14F195 100%);
    }

    .network-toggle-slider {
      position: absolute;
      top: 2px;
      left: 2px;
      width: 18px;
      height: 18px;
      background: white;
      border-radius: 50%;
      transition: all 0.3s;
      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }

    .network-toggle.solana-active .network-toggle-slider {
      left: 24px;
    }

    .solana-logo-small {
      width: 22px;
      height: 22px;
    }

    .solana-logo-small .sol-top,
    .solana-logo-small .sol-middle,
    .solana-logo-small .sol-bottom {
      fill: var(--text-dim);
    }

    .network-toggle-label.solana .solana-logo-small .sol-top {
      fill: #00FFA3;
    }

    .network-toggle-label.solana .solana-logo-small .sol-middle {
      fill: #03E1FF;
    }

    .network-toggle-label.solana .solana-logo-small .sol-bottom {
      fill: #DC1FFF;
    }

    .x1-logo-small {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: #000000;
      border-radius: 50%;
      width: 40px;
      height: 40px;
      font-size: 1.25rem;
      font-weight: 700;
      letter-spacing: -0.5px;
      border: 1px solid var(--border);
    }

    .x1-logo-small .x-char {
      color: #ffffff;
    }

    .x1-logo-small .one-char {
      color: var(--accent-blue);
    }

    /* Screenshot-grade branding logo used in modal headers. Larger than
       .x1-logo-small and surrounded by a subtle cyan halo so it reads
       as a brand mark rather than an icon. */
    .x1-logo-brand {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: radial-gradient(circle at 30% 30%, #0a1628 0%, #000000 70%);
      border-radius: 50%;
      width: 56px;
      height: 56px;
      font-size: 1.7rem;
      font-weight: 700;
      letter-spacing: -0.8px;
      border: 1px solid rgba(0, 212, 255, 0.35);
      box-shadow:
        0 0 0 3px rgba(0, 212, 255, 0.08),
        0 0 24px rgba(0, 212, 255, 0.18),
        inset 0 0 14px rgba(0, 212, 255, 0.10);
      flex-shrink: 0;
    }
    .x1-logo-brand .x-char   { color: #ffffff; }
    .x1-logo-brand .one-char { color: var(--accent-blue); }

    /* Header row that pairs the brand logo with the modal title. Keeps
       the title flush with the logo and gives the header real presence
       — the kind of thing that looks intentional in a screenshot. */
    .modal-brand-head {
      display: flex;
      align-items: center;
      gap: 1rem;
      flex: 1;
    }
    .modal-brand-head .brand-title {
      display: flex;
      flex-direction: column;
      gap: 0.15rem;
    }
    .modal-brand-head .brand-title-main {
      font-size: 1.15rem;
      font-weight: 700;
      color: var(--text-primary);
      letter-spacing: 0.2px;
    }
    .modal-brand-head .brand-title-sub {
      font-size: 0.72rem;
      color: var(--accent-cyan);
      font-weight: 600;
      letter-spacing: 1px;
      text-transform: uppercase;
      font-family: 'JetBrains Mono', monospace;
    }

    /* Disclaimer/Terms Modal */
    .disclaimer-modal-overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.95);
      z-index: 100000;
      justify-content: center;
      align-items: center;
      padding: 1rem;
    }

    .disclaimer-modal-overlay.show {
      display: flex;
    }

    .disclaimer-modal {
      background: var(--bg-secondary);
      border: 1px solid var(--border);
      border-radius: 16px;
      max-width: 650px;
      width: 100%;
      max-height: 90vh;
      display: flex;
      flex-direction: column;
      animation: modalIn 0.3s ease-out;
    }

    .disclaimer-modal-header {
      padding: 1.5rem 1.5rem 1rem;
      border-bottom: 1px solid var(--border);
      text-align: center;
    }

    .disclaimer-modal-header h2 {
      font-size: 1.5rem;
      font-weight: 700;
      color: var(--text-primary);
      margin-bottom: 0.25rem;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
    }

    .disclaimer-modal-header p {
      color: var(--text-secondary);
      font-size: 0.9rem;
    }

    .disclaimer-modal-body {
      padding: 1.5rem;
      overflow-y: auto;
      flex: 1;
    }

    .disclaimer-section {
      margin-bottom: 1.25rem;
    }

    .disclaimer-section:last-child {
      margin-bottom: 0;
    }

    .disclaimer-section h3 {
      font-size: 0.9rem;
      font-weight: 600;
      color: var(--accent-cyan);
      margin-bottom: 0.5rem;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .disclaimer-section p {
      font-size: 0.85rem;
      color: var(--text-secondary);
      line-height: 1.6;
      margin-bottom: 0.5rem;
    }

    .disclaimer-section p:last-child {
      margin-bottom: 0;
    }

    .disclaimer-section ul {
      margin: 0;
      padding-left: 1.25rem;
      font-size: 0.85rem;
      color: var(--text-secondary);
      line-height: 1.6;
    }

    .disclaimer-section ul li {
      margin-bottom: 0.35rem;
    }

    .disclaimer-warning-box {
      background: rgba(255, 152, 0, 0.1);
      border: 1px solid rgba(255, 152, 0, 0.3);
      border-radius: 8px;
      padding: 1rem;
      margin-bottom: 1.25rem;
    }

    .disclaimer-warning-box p {
      color: #ffb74d;
      font-size: 0.85rem;
      margin: 0;
      display: flex;
      align-items: flex-start;
      gap: 0.5rem;
    }

    .disclaimer-warning-box .warning-icon {
      font-size: 1.1rem;
      flex-shrink: 0;
    }

    .disclaimer-modal-footer {
      padding: 1rem 1.5rem 1.5rem;
      border-top: 1px solid var(--border);
    }

    .disclaimer-checkbox-container {
      display: flex;
      align-items: flex-start;
      gap: 0.75rem;
      margin-bottom: 1rem;
      cursor: pointer;
    }

    .disclaimer-checkbox-container input[type="checkbox"] {
      width: 20px;
      height: 20px;
      margin-top: 2px;
      cursor: pointer;
      accent-color: var(--accent-blue);
    }

    .disclaimer-checkbox-container label {
      font-size: 0.9rem;
      color: var(--text-primary);
      cursor: pointer;
      line-height: 1.4;
    }

    .disclaimer-accept-btn {
      width: 100%;
      padding: 1rem;
      background: var(--accent-gradient);
      border: none;
      border-radius: 8px;
      color: #000;
      font-size: 1rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s;
    }

    .disclaimer-accept-btn:hover:not(:disabled) {
      transform: scale(1.02);
      box-shadow: 0 4px 15px rgba(77, 166, 255, 0.3);
    }

    .disclaimer-accept-btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      transform: none;
    }

    .disclaimer-version {
      text-align: center;
      margin-top: 1rem;
      font-size: 0.7rem;
      color: var(--text-dim);
    }

    /* Solana Coming Soon Modal */
    .solana-modal-overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.8);
      z-index: 10000;
      justify-content: center;
      align-items: center;
      backdrop-filter: blur(4px);
    }

    .solana-modal-overlay.show {
      display: flex;
    }

    .solana-modal {
      background: linear-gradient(135deg, rgba(153, 69, 255, 0.1) 0%, rgba(20, 241, 149, 0.1) 100%);
      border: 1px solid rgba(153, 69, 255, 0.3);
      border-radius: 16px;
      padding: 2.5rem;
      max-width: 420px;
      text-align: center;
      position: relative;
      animation: solanaModalIn 0.3s ease-out;
    }

    @keyframes solanaModalIn {
      from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
      }
      to {
        opacity: 1;
        transform: scale(1) translateY(0);
      }
    }

    .solana-modal-logo {
      width: 80px;
      height: 80px;
      margin: 0 auto 1.5rem;
      background: linear-gradient(135deg, #9945FF 0%, #14F195 100%);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 0 30px rgba(153, 69, 255, 0.4);
    }

    .solana-modal-logo svg {
      width: 45px;
      height: 45px;
    }

    .solana-modal-title {
      font-size: 1.5rem;
      font-weight: 700;
      background: linear-gradient(135deg, #9945FF 0%, #14F195 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      margin-bottom: 0.75rem;
    }

    .solana-modal-subtitle {
      color: var(--text-secondary);
      font-size: 1rem;
      margin-bottom: 1.5rem;
      line-height: 1.5;
    }

    .solana-modal-features {
      text-align: left;
      margin-bottom: 1.5rem;
      padding: 1rem;
      background: rgba(0, 0, 0, 0.2);
      border-radius: 8px;
    }

    .solana-modal-feature {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      color: var(--text-secondary);
      font-size: 0.85rem;
      margin-bottom: 0.5rem;
    }

    .solana-modal-feature:last-child {
      margin-bottom: 0;
    }

    .solana-modal-feature-icon {
      color: #14F195;
    }

    .solana-modal-close {
      background: linear-gradient(135deg, #9945FF 0%, #14F195 100%);
      border: none;
      color: #000;
      font-weight: 600;
      padding: 0.75rem 2rem;
      border-radius: 8px;
      cursor: pointer;
      font-size: 0.9rem;
      transition: all 0.2s;
    }

    .solana-modal-close:hover {
      transform: scale(1.05);
      box-shadow: 0 4px 15px rgba(153, 69, 255, 0.4);
    }

    main {
      position: relative;
      z-index: 10;
      max-width: 1200px;
      margin: 0 auto;
      padding: 2rem;
      /* Column flex so the Network Live tab can reshuffle the shared
         stats/epoch/tabs/heading via `order` when that tab is active. */
      display: flex;
      flex-direction: column;
    }

    /* Hide the Network Live heading on every tab except Network Live. */
    #skipmonitorHeader { display: none; }
    body.active-skipmonitor #skipmonitorHeader { display: block; }

    /* When Network Live is active, reorder <main>'s children so the layout is:
       tab buttons → "Network Live" heading → epoch bar → stats bar → rest. */
    body.active-skipmonitor main > .tabs            { order: 1; }
    body.active-skipmonitor main > #skipmonitorHeader { order: 2; }
    body.active-skipmonitor main > .epoch-progress  { order: 3; }
    body.active-skipmonitor main > .network-stats   { order: 4; }
    body.active-skipmonitor main > #skipmonitorTab  { order: 5; }
    /* Other tab-content panels stay at the default order 0 — they're hidden
       anyway since only the active tab-content renders. */

    /* Tighten the vertical rhythm on Network Live only — the default spacing
       suits the info-dense home page, but Network Live feels cramped below the
       stats bar and breathy above the leader card. In this layout the epoch
       bar sits ABOVE the stats bar, so flip the fused-panel border-radius so
       they still read as one continuous card. */
    body.active-skipmonitor main > .epoch-progress {
      margin-bottom: 0;
      border-radius: 12px 12px 0 0;
      border-bottom: none;
    }
    body.active-skipmonitor main > .network-stats {
      margin-bottom: 0.75rem;
      border-radius: 0 0 12px 12px;
      border-top: none;
      border-bottom: 1px solid var(--border);
    }
    body.active-skipmonitor #skipmonitorTab .skipmon-wrap { padding-top: 0.25rem; }
    body.active-skipmonitor .leader-schedule-section { margin-top: 0.5rem; }

    /* Network Stats Bar — fused with the epoch progress bar below into a
       single panel: stats sit on top with rounded top corners, epoch bar
       sits flush below with rounded bottom corners and a 1px divider
       between them. Looks like one continuous card. */
    .network-stats {
      display: flex;
      justify-content: center;
      gap: 0;
      margin-bottom: 0;
      padding: 1rem 1.25rem;
      background: var(--bg-secondary);
      border-radius: 12px 12px 0 0;
      border: 1px solid var(--border);
      border-bottom: none;
      flex-wrap: wrap;
    }

    .network-stat {
      text-align: center;
      padding: 0.25rem 1.5rem;
      border-right: 1px solid var(--border);
    }

    .network-stat:last-child {
      border-right: none;
    }

    .network-stat-value {
      font-size: 1.25rem;
      font-weight: 600;
      font-family: 'JetBrains Mono', monospace;
      color: var(--accent-cyan);
    }

    .network-stat-label {
      font-size: 0.7rem;
      color: var(--text-secondary);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-top: 0.25rem;
    }

    /* Epoch Progress Bar — flush against the network stats box above. */
    .epoch-progress {
      margin-top: 0;
      margin-bottom: 1.5rem;
      padding: 0.75rem 1.25rem;
      background: var(--bg-secondary);
      border-radius: 0 0 12px 12px;
      border: 1px solid var(--border);
      display: flex;
      align-items: center;
      gap: 1rem;
    }

    .epoch-progress-label {
      font-size: 0.75rem;
      color: var(--text-secondary);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      white-space: nowrap;
    }

    .epoch-progress-bar {
      flex: 1;
      height: 6px;
      background: var(--bg-primary);
      border-radius: 3px;
      overflow: hidden;
      min-width: 100px;
    }

    .epoch-progress-fill {
      height: 100%;
      background: var(--accent-gradient);
      border-radius: 3px;
      transition: width 0.5s ease;
    }

    .epoch-progress-percent {
      font-size: 0.85rem;
      color: var(--accent-blue);
      font-weight: 600;
      font-family: 'JetBrains Mono', monospace;
      white-space: nowrap;
    }

    .epoch-progress-time {
      font-size: 0.8rem;
      color: var(--accent-cyan);
      font-family: 'JetBrains Mono', monospace;
      white-space: nowrap;
    }

    /* Tabs */
    .tabs {
      display: flex;
      gap: 0.6rem;
      margin-bottom: 2rem;
      border-bottom: none;
      padding: 0;
    }

    .tab {
      flex: 1 1 0;
      min-width: 0;
      min-height: 72px;
      padding: 0.55rem 0.4rem;
      background: rgba(77, 166, 255, 0.05);
      border: 1.5px solid rgba(77, 166, 255, 0.3);
      color: var(--text-secondary);
      font-size: 0.82rem;
      font-weight: 500;
      cursor: pointer;
      transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
      font-family: 'Space Grotesk', sans-serif;
      border-radius: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0.35rem;
      text-align: center;
      line-height: 1.2;
      overflow-wrap: break-word;
    }

    .tab .tab-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 1.15rem;
      line-height: 1;
      height: 24px;
    }

    .tab .tab-label {
      display: block;
      width: 100%;
      line-height: 1.2;
    }

    .tab:hover {
      color: var(--text-primary);
      background: rgba(77, 166, 255, 0.12);
      border-color: rgba(77, 166, 255, 0.6);
    }

    .tab:active {
      transform: translateY(1px);
    }

    .tab.active {
      color: #000000;
      background: var(--accent-gradient);
      border-color: transparent;
      box-shadow: 0 4px 15px rgba(77, 166, 255, 0.3);
      font-weight: 600;
    }

    .tab-content {
      display: none;
    }

    .tab-content.active {
      display: block;
    }

    .x1-logo-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: #000000;
      border-radius: 50%;
      width: 24px;
      height: 24px;
      font-size: 0.82rem;
      font-weight: 700;
      vertical-align: middle;
      letter-spacing: -0.5px;
      flex-shrink: 0;
    }

    .tab.active .x1-logo-btn {
      box-shadow: 0 0 8px rgba(77, 166, 255, 0.5);
    }

    /* Narrower viewports — shrink the type a touch so 7 tabs still fit cleanly.
       Tabs use a column layout so labels wrap below the icon when needed; all
       buttons match the tallest via flex stretch. */
    @media (max-width: 1180px) {
      .tab { font-size: 0.75rem; padding: 0.5rem 0.3rem; gap: 0.3rem; }
      .tab .tab-icon { font-size: 1.05rem; height: 22px; }
      .x1-logo-btn { width: 22px; height: 22px; font-size: 0.75rem; }
    }

    /* Search section */
    .search-section {
      text-align: center;
      margin-bottom: 2rem;
    }

    .search-section h1 {
      font-size: 2rem;
      font-weight: 700;
      margin-bottom: 0.5rem;
    }

    .search-section h1 span {
      background: var(--accent-gradient);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .text-gradient {
      background: var(--accent-gradient);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .search-section p {
      color: var(--text-secondary);
      margin-bottom: 1.5rem;
      font-size: 0.9rem;
    }

    .search-container {
      display: flex;
      gap: 1rem;
      max-width: 800px;
      margin: 0 auto;
      flex-wrap: wrap;
      justify-content: center;
    }

    .search-input-wrapper {
      flex: 1;
      min-width: 280px;
    }

    .search-input {
      width: 100%;
      padding: 1rem 1.25rem;
      font-size: 0.9rem;
      font-family: 'JetBrains Mono', monospace;
      background: var(--bg-secondary);
      border: 1px solid var(--border);
      border-radius: 12px;
      color: var(--text-primary);
      outline: none;
      transition: border-color 0.2s, box-shadow 0.2s;
    }

    .search-input:focus {
      border-color: var(--accent-blue);
      box-shadow: 0 0 0 3px rgba(77, 166, 255, 0.15);
    }

    .search-input::placeholder {
      color: var(--text-dim);
    }

    .search-btn {
      padding: 1rem 2rem;
      font-size: 1rem;
      font-weight: 600;
      background: var(--accent-gradient);
      border: none;
      border-radius: 12px;
      color: var(--bg-primary);
      cursor: pointer;
      transition: transform 0.2s, box-shadow 0.2s;
      font-family: 'Space Grotesk', sans-serif;
    }

    .search-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(77, 166, 255, 0.3);
    }

    .search-btn:disabled {
      opacity: 0.6;
      cursor: not-allowed;
      transform: none;
    }

    .search-help {
      margin-top: 1rem;
      font-size: 0.8rem;
      color: var(--text-dim);
    }

    .search-help a {
      color: var(--accent-blue);
      cursor: pointer;
      text-decoration: none;
    }

    .search-help a:hover {
      text-decoration: underline;
    }

    /* Loading spinner */
    .loading {
      display: none;
      justify-content: center;
      align-items: center;
      padding: 3rem;
    }

    .spinner {
      width: 48px;
      height: 48px;
      border: 3px solid var(--border);
      border-top-color: var(--accent-blue);
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }

    /* Leaderboard loading panel */
    .leaderboard-loading-panel {
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 3rem 2rem;
      gap: 0.75rem;
    }

    .leaderboard-loading-spinner {
      width: 44px;
      height: 44px;
      border: 3px solid var(--border);
      border-top-color: var(--accent-cyan);
      border-radius: 50%;
      animation: spin 0.9s linear infinite;
      margin-bottom: 0.5rem;
    }

    .leaderboard-loading-title {
      font-size: 1.1rem;
      font-weight: 600;
      color: var(--text-primary);
    }

    .leaderboard-loading-status {
      font-size: 0.85rem;
      color: var(--accent-cyan);
      font-family: 'JetBrains Mono', monospace;
      min-height: 1.2em;
    }

    .leaderboard-loading-steps {
      display: flex;
      flex-direction: column;
      gap: 0.4rem;
      margin-top: 0.75rem;
      width: 100%;
      max-width: 280px;
    }

    .leaderboard-loading-step {
      display: flex;
      align-items: center;
      gap: 0.6rem;
      font-size: 0.8rem;
      color: var(--text-dim);
      transition: color 0.3s;
    }

    .leaderboard-loading-step.done {
      color: var(--success);
    }

    .leaderboard-loading-step.active {
      color: var(--text-primary);
    }

    .lb-step-icon {
      font-size: 0.9rem;
      width: 1.2em;
      text-align: center;
    }

    @keyframes spin {
      to { transform: rotate(360deg); }
    }

    /* Results section */
    .results-section {
      display: none;
    }

    .results-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 1.5rem;
      flex-wrap: wrap;
      gap: 1rem;
    }

    .results-header h2 {
      font-size: 1.1rem;
      color: var(--text-secondary);
    }

    .results-header h2 span {
      color: var(--text-primary);
    }

    .last-updated {
      font-size: 0.8rem;
      color: var(--text-dim);
    }

    /* Portfolio Summary */
    .portfolio-summary-wrapper {
      background: var(--bg-card);
      border-radius: 16px;
      border: 1px solid var(--border);
      margin-bottom: 2rem;
      overflow: hidden;
    }

    .portfolio-summary {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 1rem;
      padding: 1.5rem;
    }
    @media (max-width: 900px) { .portfolio-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
    @media (max-width: 480px) { .portfolio-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

    .portfolio-summary-wrapper .combined-chart-section {
      border-top: 1px solid var(--border);
    }

    .portfolio-action-buttons {
      display: flex;
      gap: 0;
    }

    .portfolio-action-buttons .validator-expand-btn {
      flex: 1;
      border-radius: 0;
      border: none;
      border-right: 1px solid var(--border);
      margin-top: 0;
    }

    .portfolio-action-buttons .validator-expand-btn:last-child {
      border-right: none;
    }

    .portfolio-summary-wrapper .validator-expand-btn {
      border-radius: 0;
      border: none;
      margin-top: 0;
    }

    .portfolio-summary-wrapper .validator-stake-section {
      border-radius: 0;
      margin-top: 0;
      border-top: 1px solid var(--border);
    }
    
    .portfolio-summary-wrapper .validator-chart-section {
      border-radius: 0;
      margin-top: 0;
    }

    .portfolio-stat {
      text-align: center;
      padding: 0.75rem;
    }

    .portfolio-stat-value {
      font-size: 1.4rem;
      font-weight: 700;
      font-family: 'JetBrains Mono', monospace;
    }

    .portfolio-stat-value.highlight {
      background: var(--accent-gradient);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .portfolio-stat-clickable { cursor: pointer; border-radius: 10px; transition: background 0.15s; }
    .portfolio-stat-clickable:hover { background: var(--bg-card-hover); }
    .portfolio-stat-label .warn { color: var(--warning); }
    .portfolio-stat-label {
      font-size: 0.7rem;
      color: var(--text-secondary);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-top: 0.4rem;
    }

    /* Validator card */
    .validator-card {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 1.5rem;
      margin-bottom: 1rem;
      transition: border-color 0.2s, background 0.2s;
      position: relative;
    }

    .validator-card:hover {
      border-color: var(--accent-blue);
      background: var(--bg-card-hover);
    }

    .validator-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 1.25rem;
      flex-wrap: wrap;
      gap: 0.75rem;
    }

    .validator-name {
      font-size: 1.25rem;
      font-weight: 600;
    }

    .validator-info {
      display: flex;
      align-items: center;
      gap: 0.75rem;
    }

    .validator-logo {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: var(--bg-secondary);
      border: 2px solid var(--border);
      object-fit: cover;
      flex-shrink: 0;
    }

    .validator-logo-placeholder {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: var(--accent-gradient);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.25rem;
      font-weight: 700;
      color: var(--bg-primary);
      flex-shrink: 0;
    }

    .validator-meta {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      margin-top: 0.25rem;
    }

    .version-badge {
      font-size: 0.65rem;
      padding: 0.2rem 0.5rem;
      background: var(--bg-secondary);
      border: 1px solid var(--border);
      border-radius: 4px;
      color: var(--text-secondary);
      font-family: 'JetBrains Mono', monospace;
    }

    .version-badge.outdated {
      border-color: rgba(255, 193, 7, 0.5);
      color: #ffc107;
    }

    .version-update-warning {
      font-size: 0.6rem;
      color: #ffc107;
      margin-left: 0.4rem;
      cursor: help;
    }

    /* Performance Score Tooltip */
    .perf-score-wrapper {
      position: relative;
      cursor: pointer;
      transition: all 0.2s;
      border-radius: 8px;
    }
    
    .perf-score-wrapper:hover {
      background: var(--bg-secondary);
    }
    
    .perf-click-hint {
      font-size: 0.65rem;
      color: var(--text-dim);
      margin-top: 0.3rem;
      opacity: 0.7;
    }
    
    .perf-score-wrapper:hover .perf-click-hint {
      opacity: 1;
      color: var(--accent);
    }

    .perf-info-icon {
      cursor: pointer;
      font-size: 0.7rem;
      opacity: 0.8;
      transition: all 0.2s;
      margin-left: 6px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 16px;
      height: 16px;
      background: var(--accent);
      color: var(--bg-primary);
      border-radius: 50%;
      font-weight: bold;
      font-style: normal;
    }
    
    .perf-info-icon:hover {
      opacity: 1;
      transform: scale(1.1);
    }

    .perf-tooltip {
      position: absolute;
      bottom: calc(100% + 10px);
      right: 0;
      background: var(--bg-primary);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 1rem;
      min-width: 280px;
      z-index: 1000;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.2s, visibility 0.2s;
      pointer-events: none;
    }

    .perf-score-wrapper:hover .perf-tooltip {
      opacity: 1;
      visibility: visible;
    }

    .perf-tooltip-title {
      font-weight: 600;
      font-size: 0.9rem;
      color: var(--text-primary);
      margin-bottom: 0.75rem;
      padding-bottom: 0.5rem;
      border-bottom: 1px solid var(--border);
    }

    .perf-tooltip-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 0.5rem;
    }

    .perf-tooltip-label {
      font-size: 0.75rem;
      color: var(--text-secondary);
    }

    .perf-tooltip-value {
      font-size: 0.8rem;
      font-weight: 600;
      font-family: 'JetBrains Mono', monospace;
    }

    .perf-tooltip-detail {
      font-size: 0.65rem;
      color: var(--text-muted);
      margin-left: 0.5rem;
      margin-bottom: 0.25rem;
    }

    .perf-tooltip-total {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 0.75rem;
      padding-top: 0.5rem;
      border-top: 1px solid var(--border);
      font-weight: 600;
      font-size: 0.9rem;
    }

    .score-good { color: var(--success); }
    .score-warning { color: var(--warning); }
    .score-orange { color: #ff9800; }
    .score-bad { color: var(--danger); }

    /* Expandable Chart Section */
    .validator-expand-btn {
      width: 100%;
      padding: 0.75rem;
      margin-top: 1rem;
      background: var(--bg-secondary);
      border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--text-secondary);
      font-size: 0.85rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      transition: all 0.2s;
      font-family: 'Space Grotesk', sans-serif;
    }

    .validator-action-buttons {
      display: flex;
      gap: 0.75rem;
      margin-top: 1rem;
    }

    .validator-action-buttons .validator-expand-btn {
      margin-top: 0;
      flex: 1;
    }

    .validator-expand-btn:hover {
      background: var(--bg-card-hover);
      color: var(--text-primary);
      border-color: var(--accent-blue);
    }

    .validator-expand-btn .arrow {
      transition: transform 0.3s;
    }

    .validator-expand-btn.expanded {
      background: rgba(0, 212, 255, 0.1);
      border-color: rgba(0, 212, 255, 0.3);
      color: var(--accent-cyan);
    }

    .validator-expand-btn.expanded .arrow {
      transform: rotate(180deg);
    }

    .validator-chart-section {
      display: none;
      margin-top: 1rem;
      padding: 1.25rem;
      background: var(--bg-secondary);
      border-radius: 12px;
      border: 1px solid var(--border);
    }

    .validator-chart-section.expanded {
      display: block;
    }

    .validator-stake-section {
      display: none;
      margin-top: 1rem;
      padding: 1.25rem;
      background: var(--bg-secondary);
      border-radius: 12px;
      border: 1px solid var(--border);
    }

    .validator-stake-section.expanded {
      display: block;
    }

    /* ── Credits Breakdown Section ── */
    .validator-credits-section {
      display: none;
      margin-top: 1rem;
      padding: 1.25rem;
      background: var(--bg-secondary);
      border-radius: 12px;
      border: 1px solid var(--border);
    }

    .validator-credits-section.expanded {
      display: block;
    }

    .credits-breakdown-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 1rem;
    }

    .credits-breakdown-title {
      font-size: 0.85rem;
      font-weight: 600;
      color: var(--text-primary);
    }

    .credits-breakdown-subtitle {
      font-size: 0.75rem;
      color: var(--text-secondary);
      margin-top: 0.15rem;
    }

    .credits-breakdown-summary {
      display: flex;
      gap: 1.5rem;
    }

    .credits-summary-stat {
      text-align: right;
    }

    .credits-summary-value {
      font-size: 0.9rem;
      font-weight: 600;
      font-family: 'JetBrains Mono', monospace;
      color: var(--accent-cyan);
    }

    .credits-summary-label {
      font-size: 0.65rem;
      color: var(--text-dim);
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .credits-bar-chart {
      display: flex;
      flex-direction: column;
      gap: 0.55rem;
    }

    .credits-bar-row {
      display: flex;
      align-items: center;
      gap: 0.65rem;
    }

    .credits-bar-epoch {
      font-size: 0.68rem;
      font-family: 'JetBrains Mono', monospace;
      color: var(--text-dim);
      width: 52px;
      flex-shrink: 0;
      text-align: right;
    }

    .credits-bar-track {
      flex: 1;
      height: 11px;
      background: rgba(255,255,255,0.025);
      border-radius: 3px;
      overflow: hidden;
      position: relative;
    }

    .credits-bar-fill {
      height: 100%;
      border-radius: 3px;
      transition: width 0.5s ease;
      position: relative;
    }

    .credits-bar-value {
      font-size: 0.68rem;
      font-family: 'JetBrains Mono', monospace;
      width: 72px;
      flex-shrink: 0;
      text-align: right;
    }

    .credits-bar-delta {
      font-size: 0.65rem;
      font-family: 'JetBrains Mono', monospace;
      width: 48px;
      flex-shrink: 0;
      text-align: right;
    }

    .credits-avg-line-label {
      font-size: 0.65rem;
      color: var(--text-dim);
      text-align: center;
      margin-top: 0.6rem;
      display: flex;
      align-items: center;
      gap: 0.4rem;
      justify-content: center;
    }

    .credits-avg-line-label::before,
    .credits-avg-line-label::after {
      content: '';
      flex: 1;
      height: 1px;
      background: rgba(255,255,255,0.07);
    }

    .credits-breakdown-loading {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.6rem;
      padding: 1.5rem;
      color: var(--text-secondary);
      font-size: 0.85rem;
    }

    .credits-no-data {
      text-align: center;
      padding: 1.5rem;
      color: var(--text-dim);
      font-size: 0.85rem;
    }

    .stake-section-loading {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 2rem;
      gap: 0.75rem;
      color: var(--text-secondary);
      font-size: 0.85rem;
    }

    .stake-inline-content {
      width: 100%;
    }

    .stake-inline-pie-row {
      display: flex;
      align-items: center;
      gap: 1.5rem;
      margin-bottom: 1rem;
    }

    .stake-inline-pie {
      flex-shrink: 0;
    }

    .stake-inline-stats {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
    }

    .stake-inline-stat {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0.5rem 0.75rem;
      background: var(--bg-card);
      border-radius: 8px;
    }

    .stake-inline-stat-label {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.8rem;
      color: var(--text-secondary);
    }

    .stake-inline-stat-value {
      font-size: 0.9rem;
      font-weight: 600;
      color: var(--text-primary);
      font-family: 'JetBrains Mono', monospace;
    }

    .stake-inline-earnings {
      background: rgba(0, 255, 163, 0.1);
      border: 1px solid rgba(0, 255, 163, 0.2);
      border-radius: 10px;
      padding: 1rem;
      margin-top: 1rem;
    }

    .stake-inline-apy-display {
      text-align: center;
      padding: 1rem;
      margin-bottom: 1rem;
      background: linear-gradient(135deg, rgba(0, 212, 255, 0.1), rgba(255, 215, 0, 0.1));
      border: 1px solid rgba(0, 212, 255, 0.3);
      border-radius: 8px;
    }

    .stake-inline-apy-label {
      font-size: 0.75rem;
      color: var(--text-secondary);
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .stake-inline-apy-value {
      font-size: 2rem;
      font-weight: 700;
      background: linear-gradient(135deg, var(--accent-cyan), var(--accent-gold));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      line-height: 1.2;
    }

    .stake-inline-apy-note {
      font-size: 0.7rem;
      color: var(--text-dim);
      margin-top: 0.25rem;
    }

    .stake-inline-apy-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 0.25rem;
    }

    .stake-apy-period-select {
      background: rgba(0, 0, 0, 0.3);
      border: 1px solid var(--border);
      border-radius: 4px;
      color: var(--text-secondary);
      font-size: 0.7rem;
      padding: 0.25rem 0.5rem;
      cursor: pointer;
      outline: none;
    }

    .stake-apy-period-select:hover {
      border-color: var(--accent-cyan);
    }

    .stake-apy-period-select:focus {
      border-color: var(--accent-cyan);
      box-shadow: 0 0 0 2px rgba(0, 212, 255, 0.2);
    }

    .stake-inline-earnings-title {
      font-size: 0.8rem;
      font-weight: 600;
      color: var(--success);
      margin-bottom: 0.75rem;
    }

    .stake-inline-earnings-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.75rem;
    }

    .stake-inline-earning {
      text-align: center;
      padding: 0.5rem;
      background: rgba(0, 0, 0, 0.2);
      border-radius: 6px;
    }

    .stake-inline-earning-value {
      font-size: 1rem;
      font-weight: 600;
      color: var(--text-primary);
    }

    .stake-inline-earning-label {
      font-size: 0.7rem;
      color: var(--text-secondary);
    }

    .stake-inline-total {
      text-align: center;
      margin-top: 0.75rem;
      padding-top: 0.75rem;
      border-top: 1px solid rgba(0, 255, 163, 0.2);
    }

    .stake-inline-delegators {
      margin-top: 1rem;
      padding-top: 1rem;
      border-top: 1px solid var(--border);
    }

    .stake-inline-delegators-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 0.5rem;
    }

    .stake-inline-delegators-title {
      font-size: 0.85rem;
      font-weight: 600;
      color: var(--text-primary);
    }

    .stake-inline-delegators-count {
      font-size: 0.75rem;
      color: var(--text-secondary);
      background: var(--bg-card);
      padding: 0.2rem 0.5rem;
      border-radius: 4px;
    }

    .stake-inline-delegator {
      display: flex;
      justify-content: space-between;
      padding: 0.4rem 0.5rem;
      background: var(--bg-card);
      border-radius: 6px;
      margin-bottom: 0.35rem;
      font-size: 0.8rem;
    }

    .stake-inline-delegator-address {
      font-family: 'JetBrains Mono', monospace;
      color: var(--text-secondary);
    }

    .stake-inline-delegator-amount {
      font-weight: 500;
      color: var(--text-primary);
    }

    .stake-inline-note {
      font-size: 0.7rem;
      color: var(--text-dim);
      font-style: italic;
    }

    .stake-inline-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 1rem;
      padding-top: 0.75rem;
      border-top: 1px solid var(--border);
    }

    .stake-manage-btn {
      background: rgba(0, 212, 255, 0.1);
      border: 1px solid rgba(0, 212, 255, 0.3);
      color: var(--accent-cyan);
      padding: 0.5rem 1rem;
      border-radius: 8px;
      font-size: 0.75rem;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s;
    }

    .stake-manage-btn:hover {
      background: rgba(0, 212, 255, 0.2);
      border-color: rgba(0, 212, 255, 0.5);
      transform: translateY(-1px);
    }

    .stake-inline-warning {
      display: flex;
      gap: 0.5rem;
      align-items: flex-start;
      background: rgba(255, 193, 7, 0.1);
      border: 1px solid rgba(255, 193, 7, 0.3);
      border-radius: 8px;
      padding: 0.75rem;
      margin-bottom: 1rem;
      font-size: 0.75rem;
    }

    .stake-inline-warning-text {
      color: var(--text-secondary);
      line-height: 1.4;
    }

    .stake-inline-warning-text strong {
      color: var(--accent-gold);
    }

    .stake-accounts-toggle {
      cursor: pointer;
      transition: background 0.2s;
    }

    .stake-accounts-toggle:hover {
      background: var(--bg-secondary);
    }

    .stake-accounts-toggle .accounts-arrow {
      font-size: 0.65rem;
      transition: transform 0.2s;
      display: inline-block;
      margin-left: 0.25rem;
    }

    .stake-accounts-toggle.expanded .accounts-arrow {
      transform: rotate(180deg);
    }

    .stake-accounts-list {
      display: none;
      margin-top: 0.75rem;
      margin-bottom: 0.75rem;
      background: var(--bg-card);
      border-radius: 8px;
      border: 1px solid var(--border);
      overflow: hidden;
    }

    .stake-accounts-list.expanded {
      display: block;
    }

    .stake-accounts-list-inner {
      max-height: 200px;
      overflow-y: auto;
      padding: 0.5rem;
    }

    .stake-account-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0.4rem 0.5rem;
      border-radius: 6px;
      margin-bottom: 0.35rem;
      font-size: 0.75rem;
      background: var(--bg-secondary);
    }

    .stake-account-item:last-child {
      margin-bottom: 0;
    }

    .stake-account-item.self {
      border-left: 3px solid var(--accent-cyan);
    }

    .stake-account-item.delegated {
      border-left: 3px solid var(--accent-gold);
    }

    .stake-account-left {
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .stake-account-type-badge {
      font-size: 0.6rem;
      font-weight: 600;
      padding: 0.15rem 0.35rem;
      border-radius: 3px;
      text-transform: uppercase;
    }

    .stake-account-type-badge.self {
      background: rgba(0, 212, 255, 0.2);
      color: var(--accent-cyan);
    }

    .stake-account-type-badge.delegated {
      background: rgba(240, 185, 11, 0.2);
      color: var(--accent-gold);
    }

    .stake-account-address {
      font-family: 'JetBrains Mono', monospace;
      color: var(--text-secondary);
    }

    .stake-account-amount {
      font-weight: 500;
      color: var(--text-primary);
      font-family: 'JetBrains Mono', monospace;
    }

    @media (max-width: 600px) {
      .stake-inline-pie-row {
        flex-direction: column;
      }
    }

    .chart-toggle-container {
      display: flex;
      gap: 0.5rem;
      margin-bottom: 1rem;
    }

    .chart-toggle-btn {
      flex: 1;
      padding: 0.5rem 1rem;
      background: var(--bg-primary);
      border: 1px solid var(--border);
      border-radius: 6px;
      color: var(--text-secondary);
      font-size: 0.75rem;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .chart-toggle-btn:hover {
      border-color: var(--accent-cyan);
      color: var(--text-primary);
    }

    .chart-toggle-btn.active {
      background: var(--accent-gradient);
      border-color: transparent;
      color: white;
    }

    .chart-loading {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      padding: 1rem;
      color: var(--text-secondary);
      font-size: 0.8rem;
    }

    .loading-spinner-small {
      width: 16px;
      height: 16px;
      border: 2px solid var(--border);
      border-top-color: var(--accent-cyan);
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }

    .chart-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 1rem;
    }

    .chart-title {
      font-size: 0.9rem;
      font-weight: 600;
      color: var(--text-primary);
    }

    .chart-subtitle {
      font-size: 0.75rem;
      color: var(--text-secondary);
    }

    .chart-container {
      height: 200px;
      position: relative;
    }

    .chart-stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1rem;
      margin-top: 1rem;
      padding-top: 1rem;
      border-top: 1px solid var(--border);
    }

    .chart-stat {
      text-align: center;
    }

    .chart-stat-value {
      font-size: 1.1rem;
      font-weight: 600;
      font-family: 'JetBrains Mono', monospace;
      color: var(--accent-cyan);
    }

    .chart-stat-label {
      font-size: 0.7rem;
      color: var(--text-secondary);
      text-transform: uppercase;
      margin-top: 0.25rem;
    }

    .chart-legend {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      margin-top: 1rem;
      padding-top: 1rem;
      border-top: 1px solid var(--border);
      justify-content: center;
    }

    .chart-legend-item {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.8rem;
      color: var(--text-secondary);
    }

    .chart-legend-color {
      width: 12px;
      height: 12px;
      border-radius: 2px;
    }

    .combined-chart-section {
      /* No margin when inside wrapper */
    }

    /* X1 Network Styles */
    .map-section {
      margin-bottom: 2rem;
    }

    .map-container {
      display: grid;
      grid-template-columns: 1fr 280px;
      gap: 0;
      background: var(--bg-card);
      border-radius: 16px;
      border: 2px solid var(--border);
      overflow: hidden;
    }

    .map-wrapper {
      position: relative;
      height: 450px;
      border-right: 1px solid var(--border);
      overflow: hidden;
      /* Deep-space backdrop behind the globe: a soft cyan halo in the centre
         fading to the card background, plus a faint dot-grid for texture. */
      background:
        radial-gradient(ellipse 60% 70% at 50% 50%, rgba(77, 166, 255, 0.10) 0%, rgba(77, 166, 255, 0.03) 45%, transparent 70%),
        radial-gradient(circle at 1px 1px, rgba(77, 166, 255, 0.10) 1px, transparent 1.5px) 0 0 / 22px 22px,
        linear-gradient(180deg, #08101f 0%, #0a1525 100%);
      cursor: grab;
    }

    .map-wrapper:active {
      cursor: grabbing;
    }

    #validatorMap {
      height: 100%;
      width: 100%;
    }

    /* globe.gl renders into a canvas inside #validatorMap; make sure it
       fills the wrapper and never adds scrollbars. */
    #validatorMap canvas {
      display: block;
      outline: none;
    }

    .map-hint {
      position: absolute;
      bottom: 0.75rem;
      left: 0.75rem;
      z-index: 10;
      font-size: 0.7rem;
      color: var(--text-dim);
      background: rgba(10, 11, 15, 0.7);
      padding: 0.35rem 0.6rem;
      border-radius: 4px;
      pointer-events: none;
    }

    /* Live summary chip in the top-left corner of the globe */
    .globe-stats {
      position: absolute;
      top: 0.75rem;
      left: 0.75rem;
      right: 3.25rem;           /* leave room for the rotation button */
      z-index: 10;
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      pointer-events: none;     /* don't block globe dragging... */
    }

    .globe-stat[title] {
      pointer-events: auto;     /* ...but let the explanatory tooltip show on hover */
      cursor: help;
    }

    .globe-stat {
      display: flex;
      align-items: baseline;
      gap: 0.35rem;
      padding: 0.35rem 0.65rem;
      border-radius: 6px;
      background: rgba(10, 16, 32, 0.75);
      border: 1px solid var(--border);
      backdrop-filter: blur(4px);
      font-size: 0.7rem;
      color: var(--text-secondary);
      letter-spacing: 0.02em;
    }

    .globe-stat b {
      font-family: 'JetBrains Mono', monospace;
      font-weight: 500;
      font-size: 0.8rem;
      color: var(--accent-cyan);
    }

    /* Rotation toggle in the top-right corner */
    .globe-btn {
      position: absolute;
      top: 0.75rem;
      right: 0.75rem;
      z-index: 10;
      width: 30px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 6px;
      background: rgba(10, 16, 32, 0.75);
      border: 1px solid var(--border);
      color: var(--text-secondary);
      cursor: pointer;
      transition: all 0.2s;
      backdrop-filter: blur(4px);
    }

    .globe-btn:hover {
      border-color: var(--accent-blue);
      color: var(--accent-cyan);
    }

    .globe-btn svg {
      width: 14px;
      height: 14px;
      fill: currentColor;
    }

    .globe-btn svg[hidden] {
      display: none;   /* the hidden attribute is not applied to SVG by default */
    }

    /* Non-WebGL / load-failure fallback */
    .globe-fallback {
      position: absolute;
      inset: 0;
      display: none;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 2rem;
      color: var(--text-secondary);
      font-size: 0.85rem;
      z-index: 5;
    }

    .globe-fallback.show {
      display: flex;
    }

    .map-sidebar {
      padding: 1.25rem;
      background: var(--bg-secondary);
      border-left: 1px solid var(--border);
      overflow-y: auto;
      max-height: 450px;
    }

    /* Custom scrollbar for sidebar */
    .map-sidebar::-webkit-scrollbar {
      width: 6px;
    }

    .map-sidebar::-webkit-scrollbar-track {
      background: var(--bg-primary);
      border-radius: 3px;
    }

    .map-sidebar::-webkit-scrollbar-thumb {
      background: var(--border);
      border-radius: 3px;
    }

    .map-sidebar::-webkit-scrollbar-thumb:hover {
      background: var(--accent-blue);
    }

    .map-sidebar-title {
      font-size: 0.85rem;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 1rem;
      padding-bottom: 0.75rem;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
    }

    .sidebar-x1-logo {
      font-size: 1rem;
      font-weight: 700;
    }

    .country-list {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }

    .country-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0.6rem 0.75rem;
      background: var(--bg-card);
      border-radius: 8px;
      border: 1px solid var(--border);
      transition: all 0.2s;
      cursor: pointer;
      user-select: none;
    }

    .country-item:hover {
      border-color: var(--accent-blue);
      background: var(--bg-card-hover);
    }

    /* Selected country (globe has flown there, its dots are highlighted) */
    .country-item.active {
      border-color: var(--accent-cyan);
      background: rgba(0, 212, 255, 0.08);
      box-shadow: 0 0 0 1px rgba(0, 212, 255, 0.25), 0 0 14px rgba(0, 212, 255, 0.12);
    }

    .country-item.active .country-count {
      color: var(--accent-cyan);
    }

    .country-info {
      display: flex;
      align-items: center;
      gap: 0.6rem;
    }

    .country-flag {
      font-size: 1.25rem;
    }

    .country-name {
      font-size: 0.8rem;
      color: var(--text-primary);
    }

    .country-count {
      font-size: 0.85rem;
      font-weight: 600;
      color: var(--accent-blue);
      font-family: 'JetBrains Mono', monospace;
      background: var(--bg-primary);
      padding: 0.25rem 0.6rem;
      border-radius: 6px;
    }

    /* Leader Schedule Section */
    .leader-schedule-section {
      display: flex;
      gap: 1.5rem;
      margin-top: 1.5rem;
      padding: 1.25rem 1.5rem;
      background: var(--bg-card);
      border-radius: 12px;
      border: 1px solid var(--border);
      align-items: center;
    }

    .leader-current {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      gap: 1rem;
      cursor: pointer;
      border-radius: 10px;
      padding: 0.5rem 0.75rem;
      margin: -0.5rem -0.75rem;
      transition: background 0.2s;
    }

    .leader-current:hover {
      background: rgba(77, 166, 255, 0.08);
    }

    .leader-current:hover .leader-name {
      color: var(--accent-cyan);
    }

    .leader-current-header {
      font-size: 0.7rem;
      color: var(--text-secondary);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 0.25rem;
    }

    .leader-logo {
      width: 52px;
      height: 52px;
      min-width: 52px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--accent-blue), var(--accent-cyan));
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 1.25rem;
      color: var(--bg-primary);
      overflow: hidden;
      box-shadow: 0 0 20px rgba(0, 229, 255, 0.3);
    }

    .leader-logo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .leader-info {
      display: flex;
      flex-direction: column;
      gap: 0.2rem;
    }

    .leader-name {
      font-weight: 600;
      font-size: 1.1rem;
      color: var(--text-primary);
    }

    .leader-vote {
      font-size: 0.7rem;
      color: var(--text-dim);
      font-family: 'JetBrains Mono', monospace;
      cursor: pointer;
    }

    .leader-vote:hover {
      color: var(--accent-cyan);
    }

    .leader-slot-row {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      margin-top: 0.25rem;
    }

    .leader-slot {
      font-size: 0.75rem;
      color: var(--text-secondary);
      font-family: 'JetBrains Mono', monospace;
    }

    .leader-slot span {
      color: var(--accent-cyan);
      font-weight: 600;
    }

    .leader-block {
      font-size: 0.7rem;
      color: var(--bg-primary);
      background: var(--accent-cyan);
      padding: 0.15rem 0.4rem;
      border-radius: 4px;
      font-weight: 600;
    }

    .slot-dots {
      display: flex;
      gap: 5px;
      align-items: center;
    }

    .slot-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: transparent;
      border: 1.5px solid var(--border);
      transition: background 0.25s, border-color 0.25s, box-shadow 0.3s;
    }
    .slot-dot.produced {
      background: var(--success);
      border-color: var(--success);
      box-shadow: 0 0 6px rgba(0, 230, 118, 0.45);
    }
    .slot-dot.skipped {
      background: var(--danger);
      border-color: var(--danger);
      box-shadow: 0 0 6px rgba(255, 82, 82, 0.55);
    }
    .slot-dot.unknown {
      background: var(--text-dim);
      border-color: var(--text-dim);
      opacity: 0.45;
    }
    .slot-dot.current {
      background: var(--accent-cyan);
      border-color: var(--accent-cyan);
      animation: slotPulseCurrent 1.1s ease-in-out infinite;
    }
    .slot-dot.pending {
      background: transparent;
      border-color: var(--border);
    }

    @keyframes slotPulseCurrent {
      0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(0, 229, 255, 0.6);
      }
      50% {
        transform: scale(1.15);
        box-shadow: 0 0 0 6px rgba(0, 229, 255, 0);
      }
    }

    .leader-divider {
      width: 1px;
      height: 50px;
      background: var(--border);
    }

    .leader-next {
      flex: 1;
      min-width: 0;
    }

    .leader-next-header {
      font-size: 0.7rem;
      color: var(--text-secondary);
      margin-bottom: 0.5rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .leader-next-list {
      display: flex;
      gap: 0.4rem;
      overflow-x: auto;
      padding-bottom: 0.25rem;
    }

    .leader-next-list::-webkit-scrollbar {
      height: 4px;
    }

    .leader-next-list::-webkit-scrollbar-track {
      background: var(--bg-secondary);
      border-radius: 2px;
    }

    .leader-next-list::-webkit-scrollbar-thumb {
      background: var(--border);
      border-radius: 2px;
    }

    .leader-next-item {
      display: flex;
      align-items: center;
      gap: 0.35rem;
      background: var(--bg-secondary);
      padding: 0.35rem 0.5rem;
      border-radius: 6px;
      border: 1px solid var(--border);
      white-space: nowrap;
      flex-shrink: 0;
      transition: border-color 0.2s, background 0.2s;
    }

    .leader-next-item.clickable {
      cursor: pointer;
    }

    .leader-next-item.clickable:hover {
      border-color: var(--accent-blue);
      background: rgba(77, 166, 255, 0.08);
    }

    .leader-next-item.clickable:hover .leader-next-name {
      color: var(--accent-cyan);
    }

    .leader-next-logo {
      width: 22px;
      height: 22px;
      min-width: 22px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--accent-blue), var(--accent-cyan));
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 600;
      font-size: 0.65rem;
      color: var(--bg-primary);
      overflow: hidden;
    }

    .leader-next-logo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .leader-next-name {
      font-size: 0.75rem;
      color: var(--text-primary);
      max-width: 120px;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .map-loading {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      z-index: 1000;
    }

    .map-loading-spinner {
      width: 40px;
      height: 40px;
      border: 3px solid var(--border);
      border-top-color: var(--accent-blue);
      border-radius: 50%;
      animation: spin 1s linear infinite;
      margin: 0 auto 1rem;
    }

    .map-loading-text {
      color: var(--text-secondary);
      font-size: 0.85rem;
    }

    /* Globe hover tooltip. globe.gl positions it itself (inline left/top/
       transform), so only the look is styled here. */
    #validatorMap .float-tooltip-kap,
    #validatorMap .scene-tooltip {
      background: var(--bg-card);
      color: var(--text-primary);
      border-radius: 10px;
      border: 1px solid var(--border);
      box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(0, 212, 255, 0.08);
      padding: 0.6rem 0.85rem;
      font: 0.8rem 'Space Grotesk', sans-serif;
      max-width: none;
      white-space: nowrap;
      pointer-events: none;
      z-index: 20;
    }

    .popup-validator-name {
      font-weight: 600;
      font-size: 0.9rem;
      margin-bottom: 0.25rem;
    }

    .popup-validator-location {
      font-size: 0.75rem;
      color: var(--text-secondary);
    }

    .popup-validator-count {
      margin-top: 0.35rem;
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.72rem;
      color: var(--accent-cyan);
    }

    .popup-validator-count span {
      color: var(--text-dim);
      font-family: 'Space Grotesk', sans-serif;
    }

    /* Mobile responsive for map */
    @media (max-width: 900px) {
      .map-container {
        grid-template-columns: 1fr;
      }

      .map-wrapper {
        height: 350px;
      }

      .map-hint-long {
        display: none;
      }

      .map-sidebar {
        border-left: none;
        border-top: 1px solid var(--border);
        max-height: 250px;
      }

      .leader-schedule-section {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        padding: 1rem;
      }

      .leader-divider {
        width: 100%;
        height: 1px;
      }

      .leader-next {
        width: 100%;
      }

      .leader-logo {
        width: 44px;
        height: 44px;
        min-width: 44px;
        font-size: 1rem;
      }

      .leader-name {
        font-size: 1rem;
      }
    }

    .validator-rank {
      font-size: 0.8rem;
      color: var(--text-secondary);
      margin-left: 0.5rem;
    }

    /* ── Header utility chips: live next-leader countdown + Slot Explorer ── */
    .vh-chip-strip {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.5rem;
      margin-top: 0.6rem;
    }
    .vh-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 0.74rem;
      font-weight: 600;
      line-height: 1.2;
      border-radius: 20px;
      padding: 4px 11px;
      white-space: nowrap;
      user-select: none;
    }
    /* Next-leader countdown — default (upcoming) state is amber */
    .vh-next-leader {
      color: var(--warning);
      background: rgba(255, 171, 0, 0.10);
      border: 1px solid rgba(255, 171, 0, 0.30);
      /* Fixed width so the countdown text changing doesn't resize the badge.
         Sized to fit the widest state ("Next slot ~47h 59m" / "No upcoming slots"). */
      min-width: 11rem;
      justify-content: center;
      text-align: center;
    }
    /* This validator is the current leader */
    .vh-next-leader.is-leader {
      color: #0a1322;
      background: var(--success);
      border-color: var(--success);
    }
    /* No more leader slots remaining this epoch */
    .vh-next-leader.is-none {
      color: var(--text-secondary);
      background: rgba(138, 143, 152, 0.08);
      border-color: rgba(138, 143, 152, 0.25);
    }
    /* Slot Explorer entry point */
    .vh-slot-explorer {
      color: var(--accent-cyan);
      background: rgba(0, 212, 255, 0.10);
      border: 1px solid rgba(0, 212, 255, 0.35);
      cursor: pointer;
      transition: background 0.15s, border-color 0.15s;
    }
    .vh-slot-explorer:hover {
      background: rgba(0, 212, 255, 0.18);
      border-color: var(--accent-cyan);
    }

    .tier-badge {
      display: inline-flex;
      align-items: center;
      gap: 0.2rem;
      padding: 0.15rem 0.4rem;
      border-radius: 4px;
      font-size: 0.65rem;
      font-weight: 600;
      margin-left: 0.5rem;
      vertical-align: middle;
    }

    .tier-badge.elite {
      background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 165, 0, 0.2));
      border: 1px solid rgba(255, 215, 0, 0.5);
      color: #ffd700;
    }

    .tier-badge.excellent {
      background: linear-gradient(135deg, rgba(192, 192, 192, 0.2), rgba(169, 169, 169, 0.2));
      border: 1px solid rgba(192, 192, 192, 0.5);
      color: #c0c0c0;
    }

    .tier-badge.great {
      background: linear-gradient(135deg, rgba(205, 127, 50, 0.2), rgba(184, 115, 51, 0.2));
      border: 1px solid rgba(205, 127, 50, 0.5);
      color: #cd7f32;
    }

    .validator-address {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.75rem;
      color: var(--text-dim);
      margin-top: 0.25rem;
      word-break: break-all;
    }

    .copy-address-btn {
      background: rgba(0, 212, 255, 0.1);
      border: 1px solid rgba(0, 212, 255, 0.3);
      color: var(--accent-cyan);
      cursor: pointer;
      padding: 0.2rem 0.35rem;
      margin-left: 0.5rem;
      border-radius: 4px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s;
      vertical-align: middle;
    }

    .copy-address-btn:hover {
      color: var(--text-primary);
      background: rgba(0, 212, 255, 0.2);
      border-color: var(--accent-cyan);
    }

    .copy-address-btn.copied {
      color: var(--success);
      background: rgba(0, 255, 163, 0.1);
      border-color: var(--success);
    }

    .validator-actions {
      display: flex;
      gap: 0.5rem;
      align-items: center;
    }

    .manage-validator-btn-wrapper {
      margin-left: auto;
      margin-right: 1rem;
    }

    .manage-validator-btn {
      padding: 0.5rem 1rem;
      border-radius: 8px;
      font-size: 0.8rem;
      font-weight: 500;
      border: 1px solid var(--accent-blue);
      background: rgba(77, 166, 255, 0.1);
      color: var(--accent-blue);
      cursor: pointer;
      transition: all 0.2s;
      font-family: 'Space Grotesk', sans-serif;
      display: flex;
      align-items: center;
      gap: 0.4rem;
    }

    .manage-validator-btn:hover {
      background: var(--accent-gradient);
      color: #000;
      border-color: transparent;
      box-shadow: 0 4px 15px rgba(77, 166, 255, 0.3);
    }

    .status-badge {
      padding: 0.4rem 0.8rem;
      border-radius: 20px;
      font-size: 0.8rem;
      font-weight: 500;
    }

    .status-active {
      background: rgba(0, 230, 118, 0.15);
      color: var(--success);
    }

    .status-delinquent {
      background: rgba(255, 82, 82, 0.15);
      color: var(--danger);
    }

    .add-btn, .remove-btn, .compare-btn {
      padding: 0.4rem 0.8rem;
      border-radius: 20px;
      font-size: 0.75rem;
      font-weight: 500;
      border: none;
      cursor: pointer;
      transition: all 0.2s;
      font-family: 'Space Grotesk', sans-serif;
    }

    .add-btn {
      background: rgba(77, 166, 255, 0.15);
      color: var(--accent-blue);
    }

    .add-btn:hover {
      background: rgba(77, 166, 255, 0.3);
    }

    .remove-btn {
      background: rgba(255, 82, 82, 0.15);
      color: var(--danger);
    }

    .remove-btn:hover {
      background: rgba(255, 82, 82, 0.3);
    }

    .compare-btn {
      background: rgba(77, 166, 255, 0.15);
      color: var(--accent-blue);
    }

    .compare-btn:hover {
      background: rgba(77, 166, 255, 0.3);
    }

    /* Stats grid */
    .stats-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
      gap: 1rem;
      align-items: stretch;
    }

    .stat-item {
      background: var(--bg-secondary);
      padding: 1rem;
      border-radius: 10px;
      display: flex;
      flex-direction: column;
    }

    /* Unit text and its action sit on one line, so each stat cell has a
       single line under the number and the cards stay shallow + uniform. */
    .stat-sub-row {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 0.4rem;
      margin-top: 0.2rem;
    }
    .stat-sub-row .stat-subtext { margin-top: 0; }

    /* Lookup result placeholder — shown instantly from cached list data, then
       replaced in place by the full validator card once it hydrates. */
    .lookup-slot {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 1rem 1.25rem;
      margin-bottom: 1rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 1rem;
    }
    .lookup-slot-main { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
    .lookup-slot-name { font-weight: 600; }
    .lookup-slot-rank { color: var(--text-secondary); font-size: 0.8rem; font-weight: 400; margin-left: 0.4rem; }
    .lookup-slot-sub { font-size: 0.8rem; color: var(--text-secondary); margin-top: 0.15rem; }
    .lookup-slot-spinner { display: flex; align-items: center; gap: 0.5rem; color: var(--text-secondary); font-size: 0.8rem; flex-shrink: 0; }
    .lookup-slot-selectable { cursor: pointer; transition: border-color 0.12s, background 0.12s, transform 0.06s; }
    .lookup-slot-selectable:hover { border-color: var(--accent-blue); background: var(--bg-hover, #16243d); }
    .lookup-slot-selectable:active { transform: scale(0.995); }
    .lookup-slot-action { display: flex; align-items: center; gap: 0.5rem; color: var(--accent-blue); font-size: 0.85rem; font-weight: 600; flex-shrink: 0; white-space: nowrap; }
    .lookup-slot-selectable:hover .lookup-slot-action { color: var(--accent-cyan); }
    .lookup-results-hint { font-size: 0.82rem; color: var(--text-secondary); margin: 0 0 0.85rem; }
    .lookup-spin {
      width: 16px; height: 16px;
      border: 2px solid var(--border);
      border-top-color: var(--accent-cyan);
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
      display: inline-block;
    }

    /* Credit Pace Badge & Tooltip */
    .cred-tooltip {
      display: none;
      position: fixed;
      width: 230px;
      background: #0d1a2e;
      border: 1px solid var(--accent-blue);
      border-radius: 10px;
      padding: 0.85rem;
      z-index: 1000;
      box-shadow: 0 8px 24px rgba(0,0,0,0.6);
      font-weight: 400;
      cursor: default;
    }

    .cred-tooltip.show {
      display: block;
    }

    .cred-tooltip-title {
      font-size: 0.75rem;
      font-weight: 700;
      color: var(--accent-cyan);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 0.6rem;
    }

    .cred-tooltip-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 0.35rem;
      gap: 0.5rem;
    }

    .cred-tooltip-label {
      font-size: 0.72rem;
      color: var(--text-secondary);
    }

    .cred-tooltip-val {
      font-size: 0.72rem;
      color: var(--text-primary);
      font-family: 'JetBrains Mono', monospace;
      text-align: right;
    }

    .cred-tooltip-divider {
      border-top: 1px solid var(--border);
      margin: 0.5rem 0;
    }

    .cred-tooltip-status {
      text-align: center;
      font-size: 0.8rem;
      font-weight: 700;
      margin: 0.5rem 0 0.4rem;
    }

    .cred-tooltip-note {
      font-size: 0.65rem;
      color: var(--text-dim);
      line-height: 1.4;
      border-top: 1px solid var(--border);
      padding-top: 0.4rem;
      margin-top: 0.4rem;
    }

    .stat-item.clickable-stat {
      cursor: pointer;
      transition: background 0.2s, transform 0.2s;
    }

    .stat-item.clickable-stat:hover {
      background: var(--bg-card);
      transform: translateY(-2px);
    }

    .stat-label {
      font-size: 0.7rem;
      color: var(--text-secondary);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 0.4rem;
      min-height: 2.2em;
      line-height: 1.1;
    }

    .stat-value {
      font-size: 1.25rem;
      font-weight: 600;
      font-family: 'JetBrains Mono', monospace;
    }

    .stat-value.accent {
      color: var(--accent-cyan);
    }

    .stat-value.success {
      color: var(--success);
    }

    .stat-value.warning {
      color: var(--warning);
    }

    .stat-value.orange {
      color: #ff9800;
    }

    .stat-value.danger {
      color: var(--danger);
    }

    .stat-subtext {
      font-size: 0.65rem;
      color: var(--text-dim);
      margin-top: 0.2rem;
    }

    .stat-change {
      font-size: 0.7rem;
      margin-top: 0.25rem;
      font-weight: 500;
    }

    /* Last Epoch Earned: keep the up/down % inline to the right of the
       number so the card stays the same height while we add a Breakdown
       link at the bottom (mirrors the Epoch Credits card layout). */
    .last-epoch-value-row {
      display: flex;
      align-items: baseline;
      gap: 0.45rem;
      flex-wrap: wrap;
    }
    .last-epoch-value-row .stat-change {
      margin-top: 0;
    }
    .power-pill {
      display: inline-flex; align-items: center; gap: 0.35rem;
      font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em;
      padding: 0.3rem 0.65rem; border-radius: 999px;
      color: var(--warning); background: rgba(255, 171, 0, 0.10); border: 1px solid rgba(255, 171, 0, 0.35);
      white-space: nowrap;
    }
    .power-pill[hidden] { display: none; }

    .rb-open-link {
      color: var(--accent-cyan);
      font-size: 0.65rem;
      cursor: pointer;
    }
    .rb-open-link:hover {
      text-decoration: underline;
    }
    a.rb-open-link { text-decoration: none; }

    /* ===== Reward Breakdown modal ===== */
    .rb-loading,
    .rb-error {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0.6rem;
      padding: 2.5rem 1rem;
      color: var(--text-secondary);
      font-size: 0.85rem;
      text-align: center;
    }
    .rb-error span {
      color: var(--text-dim);
      font-size: 0.75rem;
    }
    .rb-error button,
    .rb-loading button {
      margin-top: 0.4rem;
      background: var(--bg-secondary);
      border: 1px solid var(--border);
      color: var(--accent-blue);
      padding: 0.45rem 1rem;
      border-radius: 8px;
      cursor: pointer;
      font-family: inherit;
      font-size: 0.8rem;
    }
    .rb-error button:hover { border-color: var(--accent-blue); }

    .rb-rows { display: flex; flex-direction: column; gap: 0.85rem; padding: 0.35rem 0.4rem 0.2rem; }
    .rb-row { display: flex; flex-direction: column; gap: 0.3rem; }
    .rb-row-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
    .rb-label { display: flex; align-items: center; gap: 0.45rem; font-size: 0.82rem; color: var(--text-primary); font-weight: 500; }
    .rb-dot { width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; }
    .rb-amt { font-family: 'JetBrains Mono', monospace; font-size: 0.82rem; color: var(--text-primary); white-space: nowrap; }
    .rb-unit { color: var(--text-dim); font-size: 0.7rem; }
    .rb-bar { height: 6px; background: var(--bg-primary); border-radius: 3px; overflow: hidden; }
    .rb-bar-fill { height: 100%; border-radius: 3px; transition: width 0.5s ease; min-width: 2px; }
    .rb-row-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
    .rb-sub { font-size: 0.65rem; color: var(--text-dim); }
    .rb-pct { font-size: 0.7rem; color: var(--text-secondary); font-family: 'JetBrains Mono', monospace; }

    .rb-divider { border-top: 1px solid var(--border); margin: 0.9rem 0.4rem 0.6rem; }
    .rb-line { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; padding: 0.28rem 0.4rem; font-size: 0.82rem; }
    .rb-subtotal { color: var(--text-primary); font-weight: 600; }
    .rb-subtle { color: var(--text-secondary); }
    .rb-hint { color: var(--text-dim); font-weight: 400; font-size: 0.68rem; }
    .rb-total {
      color: var(--text-primary);
      font-weight: 700;
      font-size: 0.95rem;
      border-top: 1px solid var(--border);
      margin-top: 0.3rem;
      padding-top: 0.6rem;
    }
    .rb-total .rb-amt { font-size: 0.95rem; color: var(--accent-cyan); }
    .rb-note {
      margin: 0.85rem 0.4rem 0.3rem;
      padding: 0.7rem 0.8rem;
      background: var(--bg-secondary);
      border: 1px solid var(--border);
      border-radius: 8px;
      font-size: 0.68rem;
      line-height: 1.45;
      color: var(--text-secondary);
    }
    /* Nested "commission by source" detail under the Voting Commission bar */
    .rb-children {
      margin: 0.5rem 0 0 0.35rem;
      padding-left: 0.8rem;
      border-left: 2px solid var(--border);
      display: flex;
      flex-direction: column;
      gap: 0.4rem;
    }
    .rb-children-cap {
      font-size: 0.6rem;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      color: var(--text-dim);
    }
    .rb-child { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
    .rb-child-label { display: flex; align-items: center; gap: 0.4rem; font-size: 0.74rem; color: var(--text-secondary); }
    .rb-child .rb-dot { width: 7px; height: 7px; }
    .rb-child-amt { font-family: 'JetBrains Mono', monospace; font-size: 0.74rem; color: var(--text-primary); white-space: nowrap; }
    .rb-child-amt .rb-child-pct { color: var(--text-dim); font-size: 0.64rem; margin-left: 0.35rem; }

    /* Performance score bar */
    .perf-bar-container {
      margin-top: 0.5rem;
    }

    .perf-bar {
      height: 4px;
      background: var(--bg-primary);
      border-radius: 2px;
      overflow: hidden;
    }

    .perf-bar-fill {
      height: 100%;
      background: var(--accent-gradient);
      border-radius: 2px;
      transition: width 0.5s ease;
    }

    /* Error state */
    .error-message {
      display: none;
      background: rgba(255, 82, 82, 0.1);
      border: 1px solid var(--danger);
      border-radius: 12px;
      padding: 1.5rem;
      text-align: center;
      color: var(--danger);
    }

    /* Empty state */
    .empty-state {
      text-align: center;
      padding: 3rem;
      color: var(--text-secondary);
    }

    .empty-state-icon {
      font-size: 3rem;
      margin-bottom: 1rem;
      opacity: 0.5;
    }

    .empty-state h3 {
      margin-bottom: 0.5rem;
      color: var(--text-primary);
    }

    .empty-state p {
      font-size: 0.9rem;
      margin-bottom: 1.5rem;
    }

    .empty-state-btn {
      padding: 0.75rem 1.5rem;
      background: var(--accent-gradient);
      border: none;
      border-radius: 10px;
      color: var(--bg-primary);
      font-weight: 600;
      cursor: pointer;
      font-family: 'Space Grotesk', sans-serif;
    }

    /* Validators list modal */
    .modal-overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.8);
      z-index: 100;
      justify-content: center;
      align-items: center;
      padding: 1rem;
    }

    .modal {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 16px;
      width: 100%;
      max-width: 600px;
      max-height: 85vh;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    .modal-header {
      padding: 1.25rem;
      border-bottom: 1px solid var(--border);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .modal-header h3 {
      font-size: 1.1rem;
    }

    .modal-close {
      background: none;
      border: none;
      color: var(--text-secondary);
      font-size: 1.5rem;
      cursor: pointer;
      padding: 0.5rem;
      line-height: 1;
    }

    .modal-close:hover {
      color: var(--text-primary);
    }

    .modal-search {
      padding: 1rem 1.25rem;
      border-bottom: 1px solid var(--border);
    }

    .modal-search input {
      width: 100%;
      padding: 0.75rem 1rem;
      font-size: 0.9rem;
      background: var(--bg-secondary);
      border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--text-primary);
      outline: none;
      font-family: 'Space Grotesk', sans-serif;
    }

    .modal-search input:focus {
      border-color: var(--accent-blue);
    }

    .modal-body {
      flex: 1;
      overflow-y: auto;
      padding: 0.75rem;
    }

    .validator-list-count {
      padding: 0.5rem 1rem;
      font-size: 0.8rem;
      color: var(--text-secondary);
      border-bottom: 1px solid var(--border);
    }

    .validator-load-more {
      padding: 0.75rem;
      text-align: center;
      border-top: 1px solid var(--border);
    }

    .load-more-btn {
      padding: 0.6rem 2rem;
      background: var(--bg-secondary);
      border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--accent-cyan);
      font-size: 0.9rem;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .load-more-btn:hover {
      background: rgba(0, 229, 255, 0.1);
      border-color: var(--accent-cyan);
    }

    /* Ask Claude Button */
    .ask-claude-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      width: 100%;
      margin-top: 1rem;
      padding: 0.75rem 1rem;
      background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%);
      border: none;
      border-radius: 8px;
      color: #000;
      font-family: 'Space Grotesk', sans-serif;
      font-size: 0.9rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s;
    }
    
    .ask-claude-btn:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
    }
    
    .ask-claude-btn svg {
      width: 18px;
      height: 18px;
    }
    
    .ask-claude-divider {
      display: flex;
      align-items: center;
      gap: 1rem;
      margin: 1.25rem 0 0.75rem 0;
    }
    
    .ask-claude-divider::before,
    .ask-claude-divider::after {
      content: '';
      flex: 1;
      height: 1px;
      background: var(--border);
    }
    
    .ask-claude-divider span {
      color: var(--text-dim);
      font-size: 0.75rem;
      text-transform: uppercase;
      letter-spacing: 1px;
    }

    /* Performance Explainer Modal */
    .perf-explainer-modal {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.85);
      z-index: 2000;
      justify-content: center;
      align-items: center;
      padding: 1rem;
    }
    
    .perf-explainer-content {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 16px;
      width: 100%;
      max-width: 650px;
      max-height: 90vh;
      overflow-y: auto;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    }
    
    .perf-explainer-header {
      padding: 1.25rem 1.5rem;
      border-bottom: 1px solid var(--border);
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: sticky;
      top: 0;
      background: var(--bg-card);
      z-index: 1;
    }
    
    .perf-explainer-header h3 {
      font-size: 1.2rem;
      color: var(--text-primary);
      margin: 0;
    }
    
    .perf-explainer-close {
      background: none;
      border: none;
      color: var(--text-secondary);
      font-size: 1.5rem;
      cursor: pointer;
      padding: 0.25rem 0.5rem;
      line-height: 1;
      border-radius: 4px;
      transition: all 0.2s;
    }
    
    .perf-explainer-close:hover {
      color: var(--text-primary);
      background: var(--bg-secondary);
    }
    
    .perf-explainer-body {
      padding: 1.5rem;
    }
    
    .perf-metric-item {
      margin-bottom: 1.5rem;
      padding-bottom: 1.5rem;
      border-bottom: 1px solid var(--border);
    }
    
    .perf-metric-item:last-child {
      margin-bottom: 0;
      padding-bottom: 0;
      border-bottom: none;
    }
    
    .perf-metric-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 0.5rem;
    }
    
    .perf-metric-name {
      font-weight: 600;
      font-size: 1rem;
      color: var(--text-primary);
    }
    
    .perf-metric-weight {
      background: var(--accent-gradient);
      color: var(--bg-primary);
      padding: 0.25rem 0.6rem;
      border-radius: 12px;
      font-size: 0.75rem;
      font-weight: 600;
    }
    
    .perf-metric-description {
      color: var(--text-secondary);
      font-size: 0.9rem;
      line-height: 1.5;
      margin-bottom: 0.75rem;
    }
    
    .perf-metric-scoring {
      background: var(--bg-secondary);
      border-radius: 8px;
      padding: 0.75rem 1rem;
      font-size: 0.85rem;
    }
    
    .perf-metric-scoring-title {
      color: var(--text-dim);
      font-size: 0.75rem;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 0.4rem;
    }
    
    .perf-metric-scoring-detail {
      color: var(--text-secondary);
    }
    
    /* Validator-specific breakdown */
    /* ── Slot Explorer Modal ── */
    .slot-modal-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.75);
      z-index: 1000;
      align-items: center;
      justify-content: center;
      padding: 1rem;
    }
    .slot-modal-overlay.show {
      display: flex;
    }
    .slot-modal {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 16px;
      width: 100%;
      max-width: 500px;
      max-height: 90vh;
      overflow-y: auto;
      overflow-x: hidden;
      animation: slotModalIn 0.2s ease-out;
      transition: max-width 0.25s ease;
    }
    .slot-modal.wide {
      max-width: 980px;
    }
    @keyframes slotModalIn {
      from { opacity: 0; transform: translateY(-16px) scale(0.97); }
      to   { opacity: 1; transform: translateY(0)     scale(1); }
    }
    .slot-modal-head {
      display: flex;
      align-items: center;
      gap: 0.85rem;
      padding: 1rem 1.25rem;
      background: var(--bg-secondary);
      border-bottom: 1px solid var(--border);
    }
    .slot-modal-logo {
      width: 38px; height: 38px;
      border-radius: 50%; object-fit: cover; flex-shrink: 0;
    }
    .slot-modal-logo-ph {
      width: 38px; height: 38px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--accent-blue), var(--accent-cyan));
      display: flex; align-items: center; justify-content: center;
      font-weight: 700; font-size: 1rem; color: #000; flex-shrink: 0;
    }
    .slot-modal-name { font-weight: 700; font-size: 1rem; }
    .slot-modal-addr {
      font-size: 0.7rem; color: var(--text-dim);
      font-family: 'JetBrains Mono', monospace; margin-top: 0.1rem;
    }
    .slot-modal-close {
      margin-left: auto;
      background: none; border: none;
      color: var(--text-dim); font-size: 1.2rem;
      cursor: pointer; padding: 0.25rem 0.4rem;
      border-radius: 4px; transition: all 0.15s; flex-shrink: 0;
    }
    .slot-modal-close:hover { color: var(--danger); background: rgba(255,82,82,0.1); }

    /* Epoch selector pills */
    .sm-epoch-selector {
      display: flex;
      gap: 0.4rem;
      padding: 0.75rem 1.25rem;
      background: var(--bg-secondary);
      border-bottom: 1px solid var(--border);
    }
    .sm-epoch-pill {
      flex: 1;
      padding: 0.4rem 0.75rem;
      background: transparent;
      border: 1px solid var(--border);
      border-radius: 20px;
      color: var(--text-secondary);
      font-family: inherit;
      font-size: 0.78rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s;
      text-align: center;
    }
    .sm-epoch-pill:hover { border-color: var(--accent-blue); color: var(--accent-blue); }
    .sm-epoch-pill.active {
      background: linear-gradient(135deg, var(--accent-blue), var(--accent-cyan));
      border-color: transparent;
      color: #000;
    }

    /* Both layout — two panels side by side */
    .sm-both-wrap {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0;
    }
    .sm-both-wrap > div + div {
      border-left: 1px solid var(--border);
    }
    .sm-panel-label {
      font-size: 0.7rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.6px;
      color: var(--text-dim);
      padding: 0.6rem 1.25rem 0;
    }

    .slot-modal-body {}
    .slot-modal-loading {
      display: flex; align-items: center; justify-content: center;
      gap: 0.6rem; padding: 2.5rem 1rem;
      color: var(--text-dim); font-size: 0.88rem;
    }
    .slot-modal-error {
      text-align: center; padding: 2rem;
      color: var(--danger); font-size: 0.85rem;
    }

    /* Stat grid inside modal */
    .sm-stats {
      display: grid; grid-template-columns: repeat(4,1fr);
      gap: 0.5rem; margin-bottom: 1rem;
    }
    .sm-stat {
      background: var(--bg-secondary); border-radius: 10px;
      padding: 0.75rem 0.5rem; text-align: center;
    }
    .sm-stat-label {
      font-size: 0.62rem; text-transform: uppercase;
      letter-spacing: 0.5px; color: var(--text-dim); margin-bottom: 0.3rem;
    }
    .sm-stat-value {
      font-size: 1.35rem; font-weight: 700;
      font-family: 'JetBrains Mono', monospace; line-height: 1;
    }
    .sm-stat-sub { font-size: 0.65rem; color: var(--text-dim); margin-top: 0.2rem; }

    .sm-bar-wrap { margin-bottom: 0.9rem; }
    .sm-bar-labels {
      display: flex; justify-content: space-between;
      font-size: 0.72rem; color: var(--text-dim); margin-bottom: 0.35rem;
    }
    .sm-bar-track {
      height: 8px; background: var(--border); border-radius: 4px;
      overflow: hidden; position: relative;
    }
    .sm-bar-produced {
      height: 100%; border-radius: 4px;
      background: linear-gradient(90deg, #4da6ff, #00d4ff);
    }
    .sm-bar-skipped {
      position: absolute; right: 0; top: 0; height: 100%;
      background: var(--danger); opacity: 0.75; border-radius: 0 4px 4px 0;
    }

    .sm-next-box { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
    .sm-next-cell {
      flex: 1; min-width: 0; background: var(--bg-secondary); border-radius: 10px; padding: 0.7rem 0.75rem;
    }
    .sm-next-cell-label {
      font-size: 0.6rem; text-transform: uppercase;
      letter-spacing: 0.5px; color: var(--text-dim); margin-bottom: 0.25rem;
    }
    .sm-next-cell-value {
      font-size: 0.95rem; font-weight: 700; white-space: nowrap;
      font-family: 'JetBrains Mono', monospace; color: var(--accent-cyan);
    }

    .sm-timeline-label {
      font-size: 0.7rem; color: var(--text-dim); margin-bottom: 0.45rem;
      display: flex; gap: 0.75rem; flex-wrap: wrap;
    }
    .sm-legend { display: flex; align-items: center; gap: 0.3rem; }
    .sm-pip-demo { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
    .sm-timeline { display: flex; flex-wrap: wrap; gap: 3px; }
    .slot-tl.collapsed .tl-extra { display: none; }
    .slot-tl-toggle {
      margin-top: 8px; background: transparent; border: none; cursor: pointer;
      color: var(--accent-blue); font-size: 0.72rem; font-family: inherit;
      padding: 2px 0; letter-spacing: 0.01em;
    }
    .slot-tl-toggle:hover { color: var(--accent-cyan); text-decoration: underline; }
    .slot-tl-note { margin-top: 4px; font-size: 0.66rem; color: var(--text-secondary); opacity: 0.85; }
    .sm-pip {
      width: 9px; height: 9px; border-radius: 2px; cursor: default;
      transition: transform 0.1s;
    }
    .sm-pip:hover { transform: scale(1.5); }
    .sm-pip.produced { background: var(--success); }
    .sm-pip.skipped  { background: var(--danger); box-shadow: 0 0 5px rgba(255, 82, 82, 0.7); }
    .sm-pip.upcoming { background: transparent; border: 1px solid var(--accent-blue); }

    .sm-body-inner { padding: 1.1rem 1.25rem; }
    .sm-footer {
      display: flex; justify-content: flex-end; align-items: center;
      padding: 0.6rem 1.25rem 0.85rem; gap: 0.6rem;
      border-top: 1px solid var(--border);
    }
    .sm-refresh-btn {
      background: none; border: 1px solid var(--border);
      color: var(--text-secondary); font-family: inherit; font-size: 0.78rem;
      padding: 0.35rem 0.8rem; border-radius: 6px; cursor: pointer; transition: all 0.2s;
    }
    .sm-refresh-btn:hover { border-color: var(--accent-cyan); color: var(--accent-cyan); }

    .perf-breakdown-section {
      background: var(--bg-secondary);
      border-radius: 12px;
      padding: 1.25rem;
      margin-bottom: 1rem;
    }
    
    .perf-breakdown-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 1rem;
      padding-bottom: 0.75rem;
      border-bottom: 1px solid var(--border);
    }
    
    .perf-breakdown-identity {
      display: flex;
      align-items: center;
      gap: 0.75rem;
    }
    
    .perf-breakdown-logo {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      object-fit: cover;
    }
    
    .perf-breakdown-logo-placeholder {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: var(--accent-gradient);
      color: var(--bg-primary);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 600;
      font-size: 1rem;
    }
    
    .perf-breakdown-header h4 {
      margin: 0;
      color: var(--text-primary);
      font-size: 1.1rem;
    }
    
    .perf-breakdown-total {
      font-size: 1.1rem;
      font-weight: 600;
    }
    
    .perf-breakdown-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 0.75rem;
    }
    
    @media (max-width: 500px) {
      .perf-breakdown-grid {
        grid-template-columns: 1fr;
      }
    }
    
    .perf-breakdown-item {
      display: flex;
      flex-direction: column;
      background: var(--bg-card);
      padding: 0.75rem;
      border-radius: 8px;
    }
    
    .perf-breakdown-label {
      font-size: 0.75rem;
      color: var(--text-dim);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 0.25rem;
    }
    
    .perf-breakdown-score {
      font-size: 1.25rem;
      font-weight: 600;
    }
    
    .perf-breakdown-detail {
      font-size: 0.75rem;
      color: var(--text-secondary);
      margin-top: 0.25rem;
    }
    
    .perf-explainer-divider {
      height: 1px;
      background: var(--border);
      margin: 1.5rem 0;
    }

    .validator-list-item {
      padding: 0.75rem 1rem;
      border-radius: 8px;
      cursor: pointer;
      transition: background 0.2s;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 0.75rem;
    }

    .validator-list-item:hover {
      background: var(--bg-secondary);
    }

    .validator-list-item-logo {
      width: 36px;
      height: 36px;
      min-width: 36px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--accent-blue), var(--accent-cyan));
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 0.9rem;
      color: var(--bg-primary);
      overflow: hidden;
    }

    .validator-list-item-logo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .validator-list-item-info {
      flex: 1;
      min-width: 0;
    }

    .validator-list-item-name {
      font-weight: 500;
      font-size: 0.9rem;
      margin-bottom: 0.2rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .validator-list-item-address {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.7rem;
      color: var(--text-dim);
    }

    .validator-list-item-add {
      padding: 0.4rem 0.8rem;
      background: var(--accent-gradient);
      border: none;
      border-radius: 6px;
      color: var(--bg-primary);
      font-size: 0.75rem;
      font-weight: 600;
      cursor: pointer;
      font-family: 'Space Grotesk', sans-serif;
    }

    .validator-list-item-add.added {
      background: var(--bg-secondary);
      color: var(--text-dim);
    }

    .loading-validators {
      text-align: center;
      padding: 2rem;
      color: var(--text-secondary);
    }

    /* Stake Breakdown Modal */
    .stake-breakdown-modal {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 16px;
      width: 100%;
      max-width: 600px;
      max-height: 90vh;
      overflow-y: auto;
    }

    .stake-breakdown-loading {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 3rem;
      gap: 1rem;
      color: var(--text-secondary);
    }

    .stake-breakdown-header {
      display: flex;
      align-items: center;
      gap: 1rem;
      margin-bottom: 1.5rem;
      padding-bottom: 1rem;
      border-bottom: 1px solid var(--border);
    }

    .stake-breakdown-header-logo {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      object-fit: cover;
    }

    .stake-breakdown-header-placeholder {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: var(--accent-gradient);
      color: var(--bg-primary);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 600;
      font-size: 1.25rem;
    }

    .stake-breakdown-header-info h3 {
      margin: 0 0 0.25rem 0;
      color: var(--text-primary);
      font-size: 1.1rem;
    }

    .stake-breakdown-header-info p {
      margin: 0;
      font-size: 0.8rem;
      color: var(--text-secondary);
    }

    .stake-pie-container {
      display: flex;
      justify-content: center;
      margin-bottom: 1.5rem;
    }

    .stake-pie-chart {
      position: relative;
      width: 240px;
      height: 240px;
    }

    .stake-pie-chart svg {
      transform: rotate(-90deg);
    }

    .stake-pie-center {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
    }

    .stake-pie-center-value {
      font-size: 1.5rem;
      font-weight: 700;
      color: var(--text-primary);
      font-family: 'JetBrains Mono', monospace;
    }

    .stake-pie-center-label {
      font-size: 0.7rem;
      color: var(--text-dim);
      text-transform: uppercase;
    }

    .stake-breakdown-stats {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
      margin-bottom: 1.5rem;
    }

    .stake-stat-card {
      background: var(--bg-secondary);
      border-radius: 12px;
      padding: 1rem;
      text-align: center;
    }

    .stake-stat-card.self-stake {
      border-left: 3px solid var(--accent-cyan);
    }

    .stake-stat-card.delegated {
      border-left: 3px solid var(--accent-gold);
    }

    .stake-stat-icon {
      font-size: 1.5rem;
      margin-bottom: 0.5rem;
    }

    .stake-stat-value {
      font-size: 1.25rem;
      font-weight: 600;
      color: var(--text-primary);
      font-family: 'JetBrains Mono', monospace;
    }

    .stake-stat-label {
      font-size: 0.75rem;
      color: var(--text-dim);
      text-transform: uppercase;
      margin-top: 0.25rem;
    }

    .stake-stat-percent {
      font-size: 0.85rem;
      color: var(--text-secondary);
      margin-top: 0.25rem;
    }

    .stake-delegators-section {
      border-top: 1px solid var(--border);
      padding-top: 1rem;
    }

    .stake-delegators-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 0.75rem;
    }

    .stake-delegators-header h4 {
      margin: 0;
      font-size: 0.9rem;
      color: var(--text-primary);
    }

    .stake-delegators-count {
      font-size: 0.8rem;
      color: var(--text-secondary);
      background: var(--bg-secondary);
      padding: 0.25rem 0.5rem;
      border-radius: 4px;
    }

    .stake-delegators-list {
      max-height: 200px;
      overflow-y: auto;
    }

    .stake-delegator-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0.5rem;
      background: var(--bg-secondary);
      border-radius: 6px;
      margin-bottom: 0.5rem;
      font-size: 0.8rem;
    }

    .stake-delegator-address {
      font-family: 'JetBrains Mono', monospace;
      color: var(--text-secondary);
    }

    .stake-delegator-amount {
      color: var(--text-primary);
      font-weight: 500;
    }

    .stake-apy-section {
      background: rgba(0, 255, 163, 0.1);
      border: 1px solid rgba(0, 255, 163, 0.3);
      border-radius: 12px;
      padding: 1rem;
      margin-top: 1rem;
    }

    .stake-apy-title {
      font-size: 0.85rem;
      font-weight: 600;
      color: var(--success);
      margin-bottom: 0.75rem;
    }

    .stake-apy-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.75rem;
    }

    .stake-apy-item {
      text-align: center;
    }

    .stake-apy-value {
      font-size: 1.1rem;
      font-weight: 600;
      color: var(--text-primary);
    }

    .stake-apy-label {
      font-size: 0.7rem;
      color: var(--text-secondary);
    }

    .stake-cache-note {
      font-size: 0.7rem;
      color: var(--text-dim);
      text-align: center;
      margin-top: 1rem;
      font-style: italic;
    }

    .stake-zero-commission-warning {
      display: flex;
      gap: 0.75rem;
      align-items: flex-start;
      background: rgba(255, 193, 7, 0.1);
      border: 1px solid rgba(255, 193, 7, 0.3);
      border-radius: 10px;
      padding: 1rem;
      margin-bottom: 1.5rem;
    }

    .stake-warning-icon {
      font-size: 1.25rem;
      flex-shrink: 0;
    }

    .stake-warning-text {
      font-size: 0.8rem;
      color: var(--text-secondary);
      line-height: 1.5;
    }

    .stake-warning-text strong {
      color: var(--accent-gold);
      display: block;
      margin-bottom: 0.25rem;
    }

    /* Stake Selection Modal */
    .stake-selection-modal {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 16px;
      width: 100%;
      max-width: 700px;
      max-height: 90vh;
      overflow-y: auto;
    }

    .stake-selection-loading {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 3rem;
      gap: 1rem;
      color: var(--text-secondary);
    }

    .stake-selection-intro {
      background: rgba(0, 212, 255, 0.1);
      border: 1px solid rgba(0, 212, 255, 0.3);
      border-radius: 10px;
      padding: 1rem;
      margin-bottom: 1.5rem;
      font-size: 0.85rem;
      color: var(--text-secondary);
      line-height: 1.5;
    }

    .stake-selection-intro strong {
      color: var(--accent-cyan);
    }

    .stake-selection-summary {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
      margin-bottom: 1.5rem;
    }

    .stake-selection-summary-item {
      background: var(--bg-secondary);
      border-radius: 10px;
      padding: 1rem;
      text-align: center;
    }

    .stake-selection-summary-value {
      font-size: 1.25rem;
      font-weight: 700;
      font-family: 'JetBrains Mono', monospace;
      margin-bottom: 0.25rem;
    }

    .stake-selection-summary-value.self {
      color: var(--accent-cyan);
    }

    .stake-selection-summary-value.delegated {
      color: var(--accent-gold);
    }

    .stake-selection-summary-label {
      font-size: 0.75rem;
      color: var(--text-secondary);
    }

    .stake-selection-list {
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
      margin-bottom: 1.5rem;
    }

    .stake-selection-item {
      display: flex;
      align-items: center;
      gap: 1rem;
      background: var(--bg-secondary);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 1rem;
      cursor: pointer;
      transition: all 0.2s;
    }

    .stake-selection-item:hover {
      border-color: var(--accent-cyan);
    }

    .stake-selection-item.selected {
      border-color: var(--accent-cyan);
      background: rgba(0, 212, 255, 0.1);
    }

    .stake-selection-checkbox {
      width: 20px;
      height: 20px;
      border-radius: 4px;
      border: 2px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: all 0.2s;
    }

    .stake-selection-item.selected .stake-selection-checkbox {
      background: var(--accent-cyan);
      border-color: var(--accent-cyan);
    }

    .stake-selection-checkbox svg {
      width: 12px;
      height: 12px;
      color: var(--bg-primary);
      opacity: 0;
      transition: opacity 0.2s;
    }

    .stake-selection-item.selected .stake-selection-checkbox svg {
      opacity: 1;
    }

    .stake-selection-info {
      flex: 1;
      min-width: 0;
    }

    .stake-selection-address {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.8rem;
      color: var(--text-primary);
      margin-bottom: 0.25rem;
    }

    /* Source badges — surfaced when a stake's withdrawer matches a known
       pool delegator (X1 Labs / Foundation or Ripper Pool). Helps users
       quickly distinguish their own stakes from pool-delegated ones. */
    .stake-source-badge {
      display: inline-block;
      font-family: 'Space Grotesk', sans-serif;
      font-size: 0.62rem;
      font-weight: 700;
      letter-spacing: 0.6px;
      padding: 2px 7px;
      border-radius: 4px;
      text-transform: uppercase;
      margin-left: 0.5rem;
      vertical-align: middle;
      line-height: 1.4;
    }
    .stake-source-badge.foundation {
      background: rgba(0, 212, 255, 0.14);
      color: var(--accent-cyan);
      border: 1px solid rgba(0, 212, 255, 0.45);
    }
    .stake-source-badge.ripper {
      background: rgba(240, 185, 11, 0.14);
      color: var(--accent-gold);
      border: 1px solid rgba(240, 185, 11, 0.45);
    }
    .stake-source-badge.self {
      background: rgba(0, 230, 118, 0.14);
      color: var(--success);
      border: 1px solid rgba(0, 230, 118, 0.45);
    }
    .stake-source-badge.community {
      background: rgba(77, 166, 255, 0.14);
      color: var(--accent-blue);
      border: 1px solid rgba(77, 166, 255, 0.45);
    }

    /* ── Stake classification: category badges + 4-way summary ── */
    .stake-cat-summary {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
      margin: 1rem 0 1.1rem;
    }
    .stake-cat-metric {
      background: var(--bg-secondary);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 0.6rem 0.4rem;
      text-align: center;
    }
    .stake-cat-metric-value {
      font-size: 1.05rem;
      font-weight: 700;
      font-family: 'JetBrains Mono', monospace;
      line-height: 1.1;
    }
    .stake-cat-metric-label {
      font-size: 0.6rem;
      color: var(--text-secondary);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-top: 3px;
    }
    .stake-cat {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-family: 'Space Grotesk', sans-serif;
      font-size: 0.6rem;
      font-weight: 700;
      letter-spacing: 0.6px;
      text-transform: uppercase;
      padding: 3px 9px;
      border-radius: 20px;
      line-height: 1.4;
      vertical-align: middle;
      margin-left: 0.5rem;
    }
    .stake-cat .stake-cat-ico { font-size: 0.85em; opacity: 0.85; }
    .stake-cat.self {
      background: rgba(0, 230, 118, 0.14);
      color: var(--success);
      border: 1px solid rgba(0, 230, 118, 0.5);
      cursor: pointer;
    }
    .stake-cat.community {
      background: rgba(77, 166, 255, 0.14);
      color: var(--accent-blue);
      border: 1px solid rgba(77, 166, 255, 0.5);
      cursor: pointer;
    }
    .stake-cat.self:hover, .stake-cat.community:hover { filter: brightness(1.25); }
    .stake-cat.foundation {
      background: rgba(0, 212, 255, 0.14);
      color: var(--accent-cyan);
      border: 1px solid rgba(0, 212, 255, 0.45);
      cursor: default;
    }
    .stake-cat.ripper {
      background: rgba(240, 185, 11, 0.14);
      color: var(--accent-gold);
      border: 1px solid rgba(240, 185, 11, 0.45);
      cursor: default;
    }

    .stake-selection-details {
      font-size: 0.75rem;
      color: var(--text-secondary);
    }

    .stake-selection-amount {
      font-family: 'JetBrains Mono', monospace;
      font-weight: 600;
      font-size: 1rem;
      color: var(--text-primary);
      flex-shrink: 0;
    }

    .stake-selection-actions {
      display: flex;
      gap: 1rem;
      justify-content: flex-end;
    }

    .stake-selection-btn {
      padding: 0.75rem 1.5rem;
      border-radius: 8px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s;
    }

    .stake-selection-btn.secondary {
      background: var(--bg-secondary);
      border: 1px solid var(--border);
      color: var(--text-primary);
    }

    .stake-selection-btn.secondary:hover {
      background: var(--bg-card);
    }

    .stake-selection-btn.primary {
      background: var(--accent-cyan);
      border: none;
      color: var(--bg-primary);
    }

    .stake-selection-btn.primary:hover {
      opacity: 0.9;
      transform: translateY(-1px);
    }

    /* Manage Validator Modal */
    .manage-modal {
      background: var(--bg-secondary);
      border: 1px solid var(--border);
      border-radius: 16px;
      width: 100%;
      max-width: 900px;
      max-height: 90vh;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    .manage-modal-header {
      padding: 1.25rem 1.5rem;
      background: var(--bg-card);
      border-bottom: 1px solid var(--border);
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 1rem;
    }

    .manage-header-left {
      display: flex;
      align-items: center;
      gap: 1.25rem;
    }

    .manage-back-btn {
      padding: 0.5rem 0.75rem;
      background: transparent;
      border: 1px solid var(--border);
      border-radius: 6px;
      color: var(--text-secondary);
      font-size: 0.8rem;
      cursor: pointer;
      font-family: 'Space Grotesk', sans-serif;
      transition: all 0.2s;
    }

    .manage-back-btn:hover {
      border-color: var(--accent-blue);
      color: var(--accent-blue);
    }

    .manage-validator-identity {
      display: flex;
      align-items: center;
      gap: 0.75rem;
    }

    .manage-validator-logo {
      width: 42px;
      height: 42px;
      border-radius: 10px;
      background: var(--accent-gradient);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 1.1rem;
      color: #000;
    }

    .manage-validator-identity h2 {
      font-size: 1.1rem;
      color: var(--text-primary);
      margin-bottom: 0.15rem;
    }

    .manage-validator-name {
      font-size: 0.8rem;
      color: var(--text-secondary);
      font-family: 'JetBrains Mono', monospace;
    }

    .manage-validator-address-row {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      margin-top: 0.25rem;
    }

    .manage-validator-address {
      font-size: 0.7rem;
      color: var(--accent-cyan);
      font-family: 'JetBrains Mono', monospace;
      word-break: break-all;
    }

    .copy-address-btn {
      padding: 0.25rem;
      background: transparent;
      border: 1px solid var(--border);
      border-radius: 4px;
      color: var(--text-secondary);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s;
      flex-shrink: 0;
    }

    .copy-address-btn:hover {
      border-color: var(--accent-blue);
      color: var(--accent-blue);
      background: rgba(77, 166, 255, 0.1);
    }

    .copy-address-btn.copied {
      border-color: var(--success);
      color: var(--success);
      background: rgba(0, 230, 118, 0.1);
    }

    .manage-header-right {
      display: flex;
      align-items: center;
    }

    .wallet-connection {
      display: flex;
      align-items: center;
      gap: 0.75rem;
    }

    .wallet-status-indicator {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--text-dim);
    }

    .wallet-status-indicator.connected {
      background: var(--success);
    }

    .wallet-status-text {
      font-size: 0.8rem;
      color: var(--text-secondary);
      font-family: 'JetBrains Mono', monospace;
    }

    .wallet-status-text.connected {
      color: var(--success);
    }

    .connect-wallet-btn {
      padding: 0.5rem 1rem;
      background: var(--accent-gradient);
      border: none;
      color: #000;
      border-radius: 6px;
      font-size: 0.8rem;
      font-weight: 600;
      cursor: pointer;
      font-family: 'Space Grotesk', sans-serif;
      transition: all 0.2s;
    }

    .connect-wallet-btn:hover {
      box-shadow: 0 4px 15px rgba(77, 166, 255, 0.3);
    }

    .disconnect-wallet-btn {
      padding: 0.5rem 0.75rem;
      background: transparent;
      border: 1px solid var(--border);
      color: var(--text-secondary);
      border-radius: 6px;
      font-size: 0.75rem;
      cursor: pointer;
      font-family: 'Space Grotesk', sans-serif;
      transition: all 0.2s;
    }

    .disconnect-wallet-btn:hover {
      border-color: var(--danger);
      color: var(--danger);
    }

    .manage-modal-body {
      padding: 1.25rem 1.5rem;
      overflow-y: auto;
      flex: 1;
    }

    .manage-section {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 1.25rem;
      margin-bottom: 1rem;
    }

    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 1rem;
    }

    .section-header h3 {
      font-size: 0.95rem;
      color: var(--text-primary);
    }

    .section-header-actions {
      display: flex;
      gap: 0.5rem;
      align-items: center;
    }

    .refresh-accounts-btn {
      padding: 0.4rem 0.8rem;
      background: rgba(77, 166, 255, 0.15);
      border: 1px solid var(--accent-blue);
      border-radius: 6px;
      color: var(--accent-blue);
      font-size: 0.75rem;
      cursor: pointer;
      font-family: 'Space Grotesk', sans-serif;
      transition: all 0.2s;
    }

    .refresh-accounts-btn:hover {
      background: rgba(77, 166, 255, 0.25);
      border-color: var(--accent-blue);
      color: var(--accent-blue);
    }

    /* Authority Badge */
    .authority-badge {
      display: flex;
      align-items: center;
      gap: 0.4rem;
      padding: 0.35rem 0.75rem;
      border-radius: 6px;
      font-size: 0.7rem;
      font-weight: 500;
      background: rgba(90, 95, 104, 0.2);
      color: var(--text-dim);
    }

    .authority-badge.has-authority {
      background: rgba(0, 230, 118, 0.15);
      color: var(--success);
    }

    .authority-badge.no-authority {
      background: rgba(255, 82, 82, 0.15);
      color: var(--danger);
    }

    .authority-badge.partial-authority {
      background: rgba(255, 171, 0, 0.15);
      color: var(--warning);
    }

    .authority-badge.clickable {
      cursor: pointer;
      transition: all 0.2s;
    }

    .authority-badge.clickable:hover {
      background: rgba(77, 166, 255, 0.2);
      color: var(--accent-blue);
    }

    .authority-badges-container {
      display: flex;
      align-items: center;
    }

    .authority-badge-pair {
      display: flex;
      gap: 0.5rem;
    }

    .authority-badge-icon {
      font-size: 0.8rem;
    }

    .add-stake-btn {
      padding: 0.4rem 0.8rem;
      background: var(--bg-secondary);
      border: 1px solid var(--border);
      border-radius: 6px;
      color: var(--text-dim);
      font-size: 0.75rem;
      cursor: not-allowed;
      font-family: 'Space Grotesk', sans-serif;
      opacity: 0.6;
    }

    /* Accounts List */
    .accounts-list {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      max-height: 200px;
      overflow-y: auto;
    }

    .account-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0.75rem 1rem;
      background: var(--bg-secondary);
      border: 1px solid var(--border);
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.2s;
    }

    .account-row:hover {
      border-color: var(--accent-blue);
    }

    .account-row.selected {
      border-color: var(--accent-blue);
      background: rgba(77, 166, 255, 0.1);
    }

    .account-row-left {
      display: flex;
      align-items: center;
      gap: 0.75rem;
    }

    .account-type-badge {
      padding: 0.25rem 0.5rem;
      border-radius: 4px;
      font-size: 0.65rem;
      font-weight: 700;
      text-transform: uppercase;
    }

    /* VOTE - Purple (validator's special vote account) */
    .account-type-badge.vote {
      background: rgba(156, 39, 176, 0.2);
      color: #ce93d8;
    }

    /* Default STAKE - Green (active, earning) */
    .account-type-badge.stake {
      background: rgba(0, 230, 118, 0.2);
      color: var(--success);
    }

    /* STAKE Active - Green (healthy, earning rewards) */
    .account-type-badge.stake.active {
      background: rgba(0, 230, 118, 0.2);
      color: var(--success);
    }

    /* ACTIVATING - Cyan (coming online, positive progress) */
    .account-type-badge.stake.activating {
      background: rgba(0, 229, 255, 0.2);
      color: var(--accent-cyan);
    }

    /* DEACTIVATING - Orange (going offline, warning) */
    .account-type-badge.stake.deactivating {
      background: rgba(255, 152, 0, 0.2);
      color: #ff9800;
    }

    /* INACTIVE - Gray (dormant, not active) */
    .account-type-badge.stake.inactive {
      background: rgba(90, 95, 104, 0.2);
      color: var(--text-dim);
    }

    /* Authority indicator badges */
    .authority-badges {
      display: flex;
      gap: 0.35rem;
      margin-left: 0.5rem;
    }

    .auth-badge {
      padding: 0.2rem 0.4rem;
      border-radius: 3px;
      font-size: 0.6rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.02em;
    }

    .auth-badge.has-auth {
      background: rgba(0, 230, 118, 0.2);
      color: #00e676;
    }

    .auth-badge.no-auth {
      background: rgba(244, 67, 54, 0.15);
      color: #e57373;
    }

    /* Authority info header */
    .authority-info-header {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      margin-bottom: 0.5rem;
      padding-bottom: 0.5rem;
      border-bottom: 1px solid var(--border);
    }

    .authority-info-btn {
      background: transparent;
      border: none;
      color: var(--text-dim);
      cursor: pointer;
      font-size: 0.85rem;
      padding: 0.2rem;
      display: flex;
      align-items: center;
      transition: color 0.2s;
    }

    .authority-info-btn:hover {
      color: var(--accent-blue);
    }

    .authority-legend {
      display: none;
      background: var(--card-bg);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 0.75rem;
      margin-bottom: 0.75rem;
      font-size: 0.75rem;
    }

    .authority-legend.show {
      display: block;
    }

    .authority-legend-title {
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 0.5rem;
    }

    .authority-legend-item {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      margin-bottom: 0.35rem;
      color: var(--text-secondary);
    }

    .authority-legend-item:last-child {
      margin-bottom: 0;
    }

    /* NEW - Yellow/Gold (action, create new) */
    .account-type-badge.create-stake {
      background: rgba(255, 193, 7, 0.2);
      color: #ffc107;
    }

    .account-address {
      font-size: 0.8rem;
      font-family: 'JetBrains Mono', monospace;
      color: var(--text-primary);
    }

    .account-select-btn {
      padding: 0.35rem 0.75rem;
      background: transparent;
      border: 1px solid var(--border);
      border-radius: 4px;
      color: var(--text-secondary);
      font-size: 0.7rem;
      cursor: pointer;
      font-family: 'Space Grotesk', sans-serif;
      transition: all 0.2s;
    }

    .account-select-btn.selected {
      background: var(--accent-gradient);
      border-color: transparent;
      color: #000;
      font-weight: 600;
    }

    .loading-text {
      text-align: center;
      padding: 1rem;
      color: var(--text-dim);
      font-size: 0.8rem;
    }

    /* Account Details Grid */
    .account-details-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1rem;
    }

    .detail-box {
      background: var(--bg-secondary);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 1rem;
    }

    .detail-label {
      font-size: 0.7rem;
      color: var(--text-dim);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 0.5rem;
    }

    .detail-value {
      font-size: 1.25rem;
      font-weight: 700;
      font-family: 'JetBrains Mono', monospace;
      color: var(--text-primary);
    }

    .detail-value.accent {
      background: var(--accent-gradient);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .detail-value.highlight {
      color: var(--success);
    }

    .detail-unit {
      font-size: 0.7rem;
      color: var(--text-dim);
      margin-top: 0.25rem;
    }

    .detail-address {
      font-size: 0.7rem;
      font-family: 'JetBrains Mono', monospace;
      color: var(--accent-cyan);
      word-break: break-all;
    }

    .detail-address.has-authority {
      color: var(--success);
    }

    .detail-address.no-authority {
      color: var(--text-dim);
    }

    .detail-address-row {
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .authority-indicator {
      font-size: 0.65rem;
      padding: 0.1rem 0.3rem;
      border-radius: 3px;
      font-weight: 600;
    }

    .authority-indicator.yours {
      background: rgba(0, 230, 118, 0.15);
      color: var(--success);
    }

    .authority-indicator.not-yours {
      background: rgba(255, 82, 82, 0.1);
      color: var(--text-dim);
    }

    .authority-status {
      margin-top: 0.5rem;
    }

    .authority-success {
      font-size: 0.7rem;
      color: var(--success);
    }

    /* Manage Actions Grid */
    .manage-actions-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 0.75rem;
    }

    .manage-action-btn {
      padding: 1rem;
      background: var(--bg-secondary);
      border: 1px solid var(--border);
      border-radius: 10px;
      cursor: pointer;
      font-family: 'Space Grotesk', sans-serif;
      display: flex;
      align-items: flex-start;
      gap: 0.75rem;
      transition: all 0.2s;
      text-align: left;
    }

    .manage-action-btn:hover {
      border-color: var(--accent-blue);
      background: rgba(77, 166, 255, 0.08);
    }

    .manage-action-btn.primary {
      background: rgba(77, 166, 255, 0.15);
      border-color: var(--accent-blue);
    }

    .manage-action-btn.primary:hover {
      background: rgba(77, 166, 255, 0.25);
    }

    .manage-action-btn .action-icon {
      font-size: 1.25rem;
      margin-top: 0.1rem;
    }

    .manage-action-btn .action-text {
      display: flex;
      flex-direction: column;
      gap: 0.2rem;
    }

    .manage-action-btn .action-title {
      font-size: 0.9rem;
      font-weight: 600;
      color: var(--text-primary);
    }

    .manage-action-btn .action-desc {
      font-size: 0.7rem;
      color: var(--text-secondary);
    }

    .manage-action-btn.disabled {
      opacity: 0.45;
      cursor: not-allowed;
      background: var(--bg-primary);
      border-color: var(--border);
    }

    .manage-action-btn.disabled:hover {
      background: var(--bg-primary);
      border-color: var(--border);
    }

    .manage-action-btn.disabled .action-title {
      color: var(--text-secondary);
    }

    .manage-action-btn.disabled .action-icon {
      filter: grayscale(80%);
    }

    .manage-action-btn .action-lock {
      font-size: 0.65rem;
      margin-left: 0.35rem;
      opacity: 0.7;
    }

    /* Action Groups (Wallet / Validator / Stake) */
    .action-group {
      margin-bottom: 1.5rem;
    }

    .action-group:last-child {
      margin-bottom: 0;
    }

    /* Colored section rule under each group header */
    .action-group.wallet-group .action-group-header {
      border-bottom-color: rgba(240, 185, 11, 0.35);
    }

    .action-group.validator-group .action-group-header {
      border-bottom-color: rgba(77, 166, 255, 0.35);
    }

    .action-group.stake-group .action-group-header {
      border-bottom-color: rgba(0, 230, 118, 0.3);
    }

    .action-group-header {
      display: flex;
      align-items: center;
      gap: 0.6rem;
      flex-wrap: wrap;
      margin-bottom: 0.6rem;
      padding-bottom: 0.4rem;
      border-bottom: 1px solid var(--border);
    }

    .action-group-title {
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--text-secondary);
    }

    .action-group-title.wallet {
      color: var(--accent-gold);
    }

    .action-group-title.validator {
      color: var(--accent-blue);
    }

    .action-group-title.stake {
      color: var(--success);
    }

    .action-group-context {
      font-size: 0.7rem;
      color: var(--text-dim);
      font-family: 'JetBrains Mono', monospace;
      display: inline-flex;
      align-items: center;
      gap: 0.25rem;
    }

    .action-group-context .action-group-address {
      color: var(--accent-blue);
    }

    .action-group-context.unlock-hint {
      color: var(--accent-blue);
      font-family: 'Space Grotesk', sans-serif;
    }

    /* Pulse highlight for the account list (used by locked-action explainers) */
    @keyframes accountsListPulse {
      0%, 100% { box-shadow: 0 0 0 0 rgba(77, 166, 255, 0); }
      50% { box-shadow: 0 0 0 4px rgba(77, 166, 255, 0.45); }
    }

    .accounts-list.pulse-highlight {
      animation: accountsListPulse 1.2s ease-in-out 2;
      border-radius: 10px;
    }

    /* Address shown next to section titles (e.g. "Vote Account Details") */
    .details-title-address {
      font-size: 0.75rem;
      font-weight: 400;
      color: var(--accent-blue);
      font-family: 'JetBrains Mono', monospace;
      margin-left: 0.5rem;
    }

    /* Action Explainer Modal */
    .explainer-steps {
      margin: 1rem 0;
      padding-left: 0;
      list-style: none;
    }

    .explainer-steps li {
      color: var(--text-secondary);
      margin-bottom: 0.5rem;
      padding-left: 0.5rem;
      line-height: 1.5;
    }

    .explainer-actions {
      display: flex;
      gap: 0.75rem;
      margin-top: 1.5rem;
      justify-content: flex-end;
    }

    .explainer-action-btn {
      background: var(--accent-gradient);
      color: white;
      border: none;
      padding: 0.75rem 1.25rem;
      border-radius: 8px;
      font-family: 'Space Grotesk', sans-serif;
      font-weight: 600;
      cursor: pointer;
      transition: opacity 0.2s;
    }

    .explainer-action-btn:hover {
      opacity: 0.9;
    }

    .explainer-close-btn {
      background: var(--bg-secondary);
      color: var(--text-primary);
      border: 1px solid var(--border);
      padding: 0.75rem 1.25rem;
      border-radius: 8px;
      font-family: 'Space Grotesk', sans-serif;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s;
    }

    .explainer-close-btn:hover {
      border-color: var(--accent-blue);
    }

    /* Send XNT Modal */
    .send-modal {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 16px;
      width: 100%;
      max-width: 450px;
      max-height: 90vh;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    .send-modal-content {
      flex: 1;
      overflow-y: auto;
      padding: 1.5rem;
    }

    .send-modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 1.25rem 1.5rem;
      border-bottom: 1px solid var(--border);
      background: var(--bg-secondary);
    }

    .send-modal-header h2 {
      font-size: 1.1rem;
      color: var(--text-primary);
      margin: 0;
    }

    .send-modal-body {
      padding: 1.5rem;
      overflow-y: auto;
      flex: 1;
    }

    .send-section {
      margin-bottom: 1.25rem;
    }

    .send-label {
      font-size: 0.8rem;
      color: var(--text-secondary);
      margin-bottom: 0.5rem;
    }

    .send-destination {
      background: var(--bg-secondary);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 0.75rem 1rem;
    }

    .destination-name {
      font-size: 0.95rem;
      color: var(--text-primary);
      font-weight: 600;
      margin-bottom: 0.25rem;
    }

    .destination-address {
      font-size: 0.75rem;
      color: var(--accent-cyan);
      font-family: 'JetBrains Mono', monospace;
      word-break: break-all;
    }

    .destination-address-row {
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .send-balance {
      background: var(--bg-secondary);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 0.75rem 1rem;
      display: flex;
      align-items: baseline;
      gap: 0.5rem;
    }

    .balance-amount {
      font-size: 1.5rem;
      font-weight: 700;
      background: linear-gradient(135deg, var(--accent-blue), var(--accent-cyan));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .balance-unit {
      font-size: 0.9rem;
      color: var(--text-secondary);
    }

    .send-input-wrapper {
      display: flex;
      align-items: center;
      background: var(--bg-secondary);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 0.5rem 1rem;
      transition: border-color 0.2s;
    }

    .send-input-wrapper:focus-within {
      border-color: var(--accent-blue);
    }

    .send-amount-input {
      flex: 1;
      background: transparent;
      border: none;
      color: var(--text-primary);
      font-size: 1.25rem;
      font-family: 'JetBrains Mono', monospace;
      outline: none;
      width: 100%;
    }

    .send-amount-input::placeholder {
      color: var(--text-dim);
    }

    .send-input-unit {
      font-size: 0.9rem;
      color: var(--text-secondary);
      margin-left: 0.5rem;
    }

    .send-preset-buttons {
      display: flex;
      gap: 0.5rem;
      margin-top: 0.75rem;
    }

    .preset-btn {
      flex: 1;
      padding: 0.5rem;
      background: var(--bg-secondary);
      border: 1px solid var(--border);
      border-radius: 6px;
      color: var(--text-secondary);
      font-size: 0.8rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s;
      font-family: 'Space Grotesk', sans-serif;
    }

    .preset-btn:hover {
      border-color: var(--accent-blue);
      color: var(--accent-blue);
    }

    .preset-btn.max {
      background: rgba(77, 166, 255, 0.15);
      border-color: var(--accent-blue);
      color: var(--accent-blue);
    }

    .preset-btn.max:hover {
      background: rgba(77, 166, 255, 0.25);
    }

    .send-section.summary {
      background: var(--bg-secondary);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 1rem;
    }

    .summary-row {
      display: flex;
      justify-content: space-between;
      font-size: 0.85rem;
      color: var(--text-secondary);
      margin-bottom: 0.5rem;
    }

    .summary-row:last-child {
      margin-bottom: 0;
    }

    .summary-row.total {
      padding-top: 0.5rem;
      border-top: 1px solid var(--border);
      font-weight: 600;
      color: var(--text-primary);
    }

    .balance-breakdown {
      background: var(--bg-secondary);
      border-radius: 8px;
      padding: 0.75rem 1rem;
    }

    .breakdown-row {
      display: flex;
      justify-content: space-between;
      font-size: 0.85rem;
      color: var(--text-secondary);
      margin-bottom: 0.4rem;
    }

    .breakdown-row:last-child {
      margin-bottom: 0;
    }

    .breakdown-row.available {
      padding-top: 0.4rem;
      border-top: 1px solid var(--border);
      font-weight: 600;
      color: var(--success);
    }

    .status-note {
      font-size: 0.8rem;
      color: var(--text-secondary);
      margin-left: 0.5rem;
    }

    .close-account-option {
      background: rgba(255, 152, 0, 0.1);
      border: 1px solid rgba(255, 152, 0, 0.3);
      border-radius: 8px;
      padding: 0.875rem 1rem;
    }

    .close-account-checkbox {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      cursor: pointer;
      position: relative;
      user-select: none;
    }

    .close-account-checkbox input {
      position: absolute;
      opacity: 0;
      cursor: pointer;
      height: 0;
      width: 0;
    }

    .close-account-checkbox .checkmark {
      height: 20px;
      width: 20px;
      min-width: 20px;
      background: var(--bg-primary);
      border: 2px solid var(--border);
      border-radius: 4px;
      transition: all 0.2s ease;
    }

    .close-account-checkbox:hover .checkmark {
      border-color: var(--accent-cyan);
    }

    .close-account-checkbox input:checked ~ .checkmark {
      background: var(--warning);
      border-color: var(--warning);
    }

    .close-account-checkbox input:checked ~ .checkmark:after {
      content: "✓";
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--bg-primary);
      font-size: 0.85rem;
      font-weight: 700;
      height: 100%;
    }

    .close-account-label {
      font-weight: 500;
      color: var(--warning);
    }

    .close-account-note {
      margin-top: 0.5rem;
      margin-left: 2rem;
      font-size: 0.75rem;
      color: var(--text-secondary);
      line-height: 1.4;
    }

    .undelegate-timeline {
      background: var(--bg-secondary);
      border-radius: 8px;
      padding: 0.75rem 1rem;
    }

    .timeline-step {
      display: flex;
      align-items: flex-start;
      gap: 0.75rem;
      margin-bottom: 0.5rem;
    }

    .timeline-step:last-child {
      margin-bottom: 0;
    }

    .timeline-icon {
      font-size: 1rem;
      line-height: 1.4;
    }

    .timeline-text {
      font-size: 0.85rem;
      color: var(--text-secondary);
      line-height: 1.4;
    }

    .timeline-text strong {
      color: var(--text-primary);
    }

    .redelegate-search-container {
      position: relative;
      margin-bottom: 0.75rem;
    }

    .redelegate-search-input {
      width: 100%;
      padding: 0.75rem 1rem;
      background: var(--bg-secondary);
      border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--text-primary);
      font-size: 0.9rem;
      font-family: inherit;
    }

    .redelegate-search-input:focus {
      outline: none;
      border-color: var(--accent-cyan);
    }

    .redelegate-search-results {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 8px;
      margin-top: 0.25rem;
      max-height: 200px;
      overflow-y: auto;
      z-index: 100;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }

    .redelegate-search-item {
      padding: 0.75rem 1rem;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid var(--border);
    }

    .redelegate-search-item:last-child {
      border-bottom: none;
    }

    .redelegate-search-item:hover {
      background: rgba(77, 166, 255, 0.1);
    }

    .redelegate-search-item-name {
      font-weight: 600;
      color: var(--text-primary);
    }

    .redelegate-search-item-address {
      font-size: 0.75rem;
      color: var(--text-secondary);
      font-family: 'JetBrains Mono', monospace;
    }

    .redelegate-search-item-stake {
      font-size: 0.75rem;
      color: var(--accent-cyan);
      text-align: right;
    }

    .redelegate-no-results {
      padding: 1rem;
      text-align: center;
      color: var(--text-secondary);
      font-size: 0.85rem;
    }

    .clear-selection-btn {
      background: rgba(255, 82, 82, 0.2);
      border: none;
      color: var(--danger);
      width: 24px;
      height: 24px;
      border-radius: 50%;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.8rem;
      margin-left: 0.5rem;
    }

    .clear-selection-btn:hover {
      background: rgba(255, 82, 82, 0.3);
    }

    .send-message {
      padding: 0.75rem 1rem;
      border-radius: 8px;
      font-size: 0.85rem;
      margin-bottom: 1rem;
    }

    .send-message.error {
      background: rgba(255, 82, 82, 0.15);
      border: 1px solid var(--danger);
      color: var(--danger);
    }

    .send-message.success {
      background: rgba(0, 230, 118, 0.15);
      border: 1px solid var(--success);
      color: var(--success);
    }

    .send-message.info {
      background: rgba(77, 166, 255, 0.15);
      border: 1px solid var(--accent-blue);
      color: var(--accent-blue);
    }

    .tx-explorer-link {
      display: inline-block;
      margin-top: 0.4rem;
      font-size: 0.8rem;
      font-weight: 600;
      color: var(--accent-cyan);
      text-decoration: none;
      opacity: 0.9;
    }

    .tx-explorer-link:hover {
      text-decoration: underline;
      opacity: 1;
    }

    .send-actions {
      display: flex;
      gap: 0.75rem;
      margin-top: 0.5rem;
    }

    .send-cancel-btn {
      flex: 1;
      padding: 0.875rem;
      background: transparent;
      border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--text-secondary);
      font-size: 0.9rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s;
      font-family: 'Space Grotesk', sans-serif;
    }

    .send-cancel-btn:hover {
      border-color: var(--text-secondary);
      color: var(--text-primary);
    }

    .send-confirm-btn {
      flex: 2;
      padding: 0.875rem;
      background: linear-gradient(135deg, var(--accent-blue), var(--accent-cyan));
      border: none;
      border-radius: 8px;
      color: #000;
      font-size: 0.9rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s;
      font-family: 'Space Grotesk', sans-serif;
    }

    .send-confirm-btn:hover {
      box-shadow: 0 4px 15px rgba(77, 166, 255, 0.3);
    }

    .send-confirm-btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      box-shadow: none;
    }

    .authority-warning {
      display: flex;
      gap: 1rem;
      padding: 1rem;
      background: rgba(255, 82, 82, 0.1);
      border: 1px solid var(--danger);
      border-radius: 8px;
      margin-bottom: 1.25rem;
    }

    .warning-icon {
      font-size: 1.5rem;
      flex-shrink: 0;
    }

    .warning-text strong {
      color: var(--danger);
      font-size: 0.9rem;
    }

    .warning-text p {
      color: var(--text-secondary);
      font-size: 0.8rem;
      margin: 0.25rem 0 0 0;
      line-height: 1.4;
    }

    .send-address-input {
      flex: 1;
      background: transparent;
      border: none;
      color: var(--text-primary);
      font-size: 0.85rem;
      font-family: 'JetBrains Mono', monospace;
      outline: none;
      width: 100%;
    }

    .send-address-input::placeholder {
      color: var(--text-dim);
    }

    .balance-note,
    .address-note {
      font-size: 0.7rem;
      color: var(--text-dim);
      margin-top: 0.5rem;
    }

    .authority-type-selector {
      display: flex;
      gap: 0.75rem;
    }

    .authority-type-btn {
      flex: 1;
      display: flex;
      align-items: center;
      gap: 0.75rem;
      padding: 0.875rem 1rem;
      background: var(--bg-secondary);
      border: 2px solid var(--border);
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.2s ease;
      text-align: left;
    }

    .authority-type-btn:hover {
      border-color: var(--accent-cyan);
      background: rgba(0, 229, 255, 0.05);
    }

    .authority-type-btn.active {
      border-color: var(--accent-cyan);
      background: rgba(0, 229, 255, 0.1);
    }

    .authority-type-icon {
      font-size: 1.5rem;
    }

    .authority-type-text {
      display: flex;
      flex-direction: column;
      gap: 0.1rem;
    }

    .authority-type-title {
      font-weight: 600;
      color: var(--text-primary);
      font-size: 0.85rem;
    }

    .authority-type-desc {
      font-size: 0.7rem;
      color: var(--text-secondary);
    }

    .use-wallet-btn {
      margin-top: 0.5rem;
      padding: 0.4rem 0.75rem;
      background: var(--bg-secondary);
      border: 1px solid var(--border);
      border-radius: 6px;
      color: var(--accent-cyan);
      font-size: 0.75rem;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .use-wallet-btn:hover {
      background: rgba(0, 229, 255, 0.1);
      border-color: var(--accent-cyan);
    }

    .danger-warning-box {
      background: rgba(255, 82, 82, 0.1);
      border: 2px solid var(--danger);
      border-radius: 12px;
      padding: 1.25rem;
      text-align: center;
    }

    .danger-icon {
      font-size: 3rem;
      margin-bottom: 0.5rem;
    }

    .danger-title {
      font-size: 1.1rem;
      font-weight: 700;
      color: var(--danger);
      margin-bottom: 1rem;
      letter-spacing: 0.5px;
    }

    .danger-text {
      font-size: 0.9rem;
      color: var(--text-primary);
      line-height: 1.5;
    }

    .danger-list {
      text-align: left;
      margin: 1rem 0;
      padding-left: 1.5rem;
      color: var(--text-primary);
    }

    .danger-list li {
      margin-bottom: 0.5rem;
      font-size: 0.85rem;
    }

    .danger-list li strong {
      color: var(--danger);
    }

    .danger-btn:disabled {
      background: var(--bg-secondary) !important;
      color: var(--text-dim);
    }

    /* Commission Modal Styles */
    .commission-display {
      background: var(--bg-secondary);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 1rem 1.25rem;
      display: flex;
      align-items: baseline;
      gap: 0.25rem;
    }

    .commission-value {
      font-size: 2rem;
      font-weight: 700;
      background: linear-gradient(135deg, var(--accent-blue), var(--accent-cyan));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .commission-percent {
      font-size: 1.25rem;
      color: var(--text-secondary);
    }

    .commission-input-wrapper {
      display: flex;
      align-items: center;
      background: var(--bg-secondary);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 0.75rem 1rem;
      transition: border-color 0.2s;
    }

    .commission-input-wrapper:focus-within {
      border-color: var(--accent-blue);
    }

    .commission-input {
      flex: 1;
      background: transparent;
      border: none;
      color: var(--text-primary);
      font-size: 1.5rem;
      font-family: 'JetBrains Mono', monospace;
      font-weight: 600;
      outline: none;
      width: 100%;
      text-align: center;
    }

    .commission-input::placeholder {
      color: var(--text-dim);
    }

    .commission-input-unit {
      font-size: 1.25rem;
      color: var(--text-secondary);
      margin-left: 0.25rem;
    }

    .commission-info-box {
      display: flex;
      gap: 0.75rem;
      padding: 0.875rem 1rem;
      background: rgba(77, 166, 255, 0.1);
      border: 1px solid rgba(77, 166, 255, 0.3);
      border-radius: 8px;
      margin-bottom: 1.25rem;
    }

    .commission-info-box .info-icon {
      font-size: 1rem;
      flex-shrink: 0;
    }

    .commission-info-box .info-text {
      font-size: 0.8rem;
      color: var(--text-secondary);
      line-height: 1.4;
    }

    .authorities-info-box {
      background: var(--bg-secondary);
      border-radius: 8px;
      padding: 0.75rem 1rem;
    }

    .authority-info-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 0.85rem;
      margin-bottom: 0.4rem;
    }

    .authority-info-row:last-child {
      margin-bottom: 0;
    }

    .authority-info-label {
      color: var(--text-secondary);
    }

    .authority-info-value {
      color: var(--accent-cyan);
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.8rem;
    }

    /* General Info Box */
    .info-box {
      display: flex;
      gap: 0.75rem;
      padding: 0.875rem 1rem;
      background: rgba(77, 166, 255, 0.1);
      border: 1px solid rgba(77, 166, 255, 0.3);
      border-radius: 8px;
    }

    .info-box .info-icon {
      font-size: 1rem;
      flex-shrink: 0;
    }

    .info-box .info-text {
      font-size: 0.8rem;
      color: var(--text-secondary);
      line-height: 1.5;
    }

    .info-box .info-text p {
      margin: 0.25rem 0;
    }

    .info-box .info-text p:first-child {
      margin-top: 0;
    }

    /* Merge Stakes List */
    .merge-stakes-list {
      max-height: 300px;
      overflow-y: auto;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--bg-primary);
    }

    .merge-stake-item {
      display: flex;
      align-items: center;
      padding: 0.75rem 1rem;
      border-bottom: 1px solid var(--border);
      gap: 0.75rem;
      cursor: pointer;
      transition: background 0.2s ease;
    }

    .merge-stake-item:last-child {
      border-bottom: none;
    }

    .merge-stake-item:hover {
      background: var(--bg-secondary);
    }

    .merge-stake-item.selected {
      background: rgba(77, 166, 255, 0.1);
      border-color: rgba(77, 166, 255, 0.3);
    }

    .merge-stake-item.disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    .merge-stake-item.disabled:hover {
      background: transparent;
    }

    .merge-stake-checkbox {
      width: 18px;
      height: 18px;
      accent-color: var(--accent-cyan);
      cursor: pointer;
    }

    .merge-stake-checkbox:disabled {
      cursor: not-allowed;
    }

    .merge-stake-info {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
    }

    .merge-stake-address {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.85rem;
      color: var(--text-primary);
    }

    .merge-stake-details {
      font-size: 0.75rem;
      color: var(--text-secondary);
      display: flex;
      gap: 1rem;
    }

    .merge-stake-amount {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.85rem;
      color: var(--accent-cyan);
      font-weight: 500;
    }

    .merge-stake-status {
      padding: 0.15rem 0.5rem;
      border-radius: 4px;
      font-size: 0.65rem;
      font-weight: 600;
      text-transform: uppercase;
    }

    .merge-stake-status.eligible {
      background: rgba(0, 230, 118, 0.15);
      color: var(--success);
    }

    .merge-stake-status.ineligible {
      background: rgba(255, 82, 82, 0.15);
      color: var(--danger);
    }

    .commission-epoch-warning {
      display: flex;
      gap: 0.75rem;
      padding: 0.875rem 1rem;
      background: rgba(255, 193, 7, 0.1);
      border: 1px solid rgba(255, 193, 7, 0.4);
      border-radius: 8px;
      margin-bottom: 1.25rem;
    }

    .commission-epoch-warning .warning-icon {
      font-size: 1rem;
      flex-shrink: 0;
    }

    .commission-epoch-warning .warning-text strong {
      color: #ffc107;
      font-size: 0.85rem;
    }

    .commission-epoch-warning .warning-text p {
      color: var(--text-secondary);
      font-size: 0.75rem;
      margin: 0.25rem 0 0 0;
      line-height: 1.4;
    }

    /* Identity Modal Styles */
    .identity-modal {
      max-width: 500px;
    }

    .identity-modal code {
      background: var(--bg-primary);
      padding: 0.2rem 0.4rem;
      border-radius: 4px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.7rem;
      color: var(--accent-cyan);
    }

    .icon-preview-container {
      background: var(--bg-secondary);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 1rem;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .icon-preview-container img {
      max-width: 80px;
      max-height: 80px;
      border-radius: 8px;
    }

    /* Wallet Install Modal */
    .wallet-install-modal {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.85);
      z-index: 200;
      justify-content: center;
      align-items: center;
      padding: 1rem;
    }

    .wallet-install-content {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 2rem;
      max-width: 400px;
      width: 100%;
      text-align: center;
    }

    .wallet-install-content h3 {
      font-size: 1.2rem;
      margin-bottom: 0.75rem;
    }

    .wallet-install-content p {
      color: var(--text-secondary);
      font-size: 0.9rem;
      margin-bottom: 1.5rem;
    }

    .wallet-options {
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
      margin-bottom: 1.5rem;
    }

    .wallet-option {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      padding: 1rem;
      background: var(--bg-secondary);
      border: 1px solid var(--border);
      border-radius: 10px;
      color: var(--text-primary);
      text-decoration: none;
      font-size: 0.95rem;
      cursor: pointer;
      transition: all 0.2s;
      font-family: 'Space Grotesk', sans-serif;
    }

    .wallet-option:hover {
      border-color: var(--accent-blue);
      background: rgba(77, 166, 255, 0.1);
    }

    .wallet-option-icon {
      font-size: 1.5rem;
    }

    .wallet-option-icon.x1-wallet-icon {
      font-size: 0;
    }

    .wallet-option-icon.x1-wallet-icon img {
      width: 28px;
      height: 28px;
      object-fit: contain;
    }

    .wallet-modal-close {
      padding: 0.6rem 1.5rem;
      background: transparent;
      border: 1px solid var(--border);
      color: var(--text-secondary);
      border-radius: 8px;
      font-size: 0.85rem;
      cursor: pointer;
      font-family: 'Space Grotesk', sans-serif;
      transition: all 0.2s;
    }

    .wallet-modal-close:hover {
      border-color: var(--text-secondary);
      color: var(--text-primary);
    }

    /* Responsive */
    @media (max-width: 768px) {
      .manage-modal {
        max-height: 95vh;
        border-radius: 12px;
      }
      
      .manage-modal-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        padding: 1rem;
      }

      .manage-header-right {
        width: 100%;
      }

      .wallet-connection {
        width: 100%;
        justify-content: space-between;
      }
      
      .manage-modal-body {
        padding: 1rem;
      }
      
      .account-details-grid {
        grid-template-columns: repeat(2, 1fr);
      }
      
      .manage-actions-grid {
        grid-template-columns: 1fr;
      }

      .account-address {
        font-size: 0.7rem;
      }
    }

    @media (max-width: 480px) {
      .account-details-grid {
        grid-template-columns: 1fr;
      }

      .manage-header-left {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
      }
    }

    /* Portfolio tab specific */
    .portfolio-actions {
      display: flex;
      gap: 1rem;
      justify-content: center;
      margin-bottom: 1.5rem;
    }

    .portfolio-actions button {
      padding: 0.6rem 1.2rem;
      border-radius: 8px;
      font-size: 0.85rem;
      font-weight: 500;
      cursor: pointer;
      border: 1px solid var(--border);
      background: var(--bg-secondary);
      color: var(--text-secondary);
      transition: all 0.2s;
      font-family: 'Space Grotesk', sans-serif;
    }

    .portfolio-actions button:hover {
      border-color: var(--accent-blue);
      color: var(--accent-blue);
    }

    .portfolio-actions button.primary {
      background: var(--accent-gradient);
      border: none;
      color: var(--bg-primary);
    }

    /* Leaderboard Styles */
    .leaderboard-categories {
      display: flex;
      gap: 0.75rem;
      justify-content: center;
      margin-bottom: 2rem;
      flex-wrap: wrap;
    }

    .leaderboard-cat-btn {
      padding: 0.7rem 1.4rem;
      border-radius: 25px;
      font-size: 0.9rem;
      font-weight: 500;
      cursor: pointer;
      border: 1px solid var(--border);
      background: var(--bg-secondary);
      color: var(--text-secondary);
      transition: all 0.2s;
      font-family: 'Space Grotesk', sans-serif;
    }

    .leaderboard-cat-btn:hover {
      border-color: var(--accent-blue);
      color: var(--accent-blue);
      transform: translateY(-2px);
    }

    .leaderboard-cat-btn.active {
      background: var(--accent-gradient);
      border-color: transparent;
      color: var(--bg-primary);
      font-weight: 600;
    }

    /* ── Delegations leaderboard: source segmented control ─────────── */
    .delegations-segment-wrap {
      max-width: 900px;
      margin: 0 auto 1.5rem;
      display: flex;
      justify-content: center;
    }
    .delegations-segment {
      display: inline-flex;
      background: var(--bg-secondary);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 4px;
      gap: 2px;
    }
    .delegations-segment-btn {
      padding: 0.5rem 1.25rem;
      border: none;
      background: transparent;
      color: var(--text-secondary);
      cursor: pointer;
      font-size: 0.88rem;
      font-weight: 500;
      border-radius: 7px;
      font-family: 'Space Grotesk', sans-serif;
      transition: background 0.15s, color 0.15s;
      white-space: nowrap;
    }
    .delegations-segment-btn:hover:not(.active) {
      color: var(--text-primary);
      background: rgba(255, 255, 255, 0.04);
    }
    .delegations-segment-btn.active {
      background: var(--accent-blue);
      color: var(--bg-primary);
      font-weight: 600;
    }
    @media (max-width: 480px) {
      .delegations-segment-btn { padding: 0.45rem 0.85rem; font-size: 0.82rem; }
    }

    /* Delegations stat labels — lighter grey for readability against the
       dark card background. Default --text-dim was too low-contrast for
       the multi-column "Total / X1 Labs / Ripper" row. Scoped via a data
       attribute on #leaderboardList so other leaderboards keep their
       existing styling. */
    #leaderboardList[data-category="delegations"] .leaderboard-stat-label {
      color: var(--text-secondary);
    }

    /* ── Delegations summary line (lives inside the leaderboard header) ─ */
    .delegations-summary {
      margin-top: 0.5rem;
      padding: 0.75rem 1rem;
      background: rgba(0, 212, 255, 0.06);
      border-left: 3px solid var(--accent-blue);
      border-radius: 6px;
      font-size: 0.9rem;
      color: var(--text-secondary);
      line-height: 1.5;
    }
    .delegations-summary strong { color: var(--text-primary); }
    .delegations-breakdown {
      font-size: 0.78rem;
      color: var(--text-dim);
      margin-top: 0.15rem;
    }

    .leaderboard-container {
      max-width: 900px;
      margin: 0 auto;
    }

    .leaderboard-header {
      text-align: center;
      margin-bottom: 1.5rem;
    }

    .leaderboard-header h2 {
      font-size: 1.5rem;
      margin-bottom: 0.3rem;
    }

    .leaderboard-subtitle {
      color: var(--text-dim);
      font-size: 0.9rem;
    }

    .leaderboard-list {
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
    }

    .leaderboard-item {
      display: flex;
      align-items: center;
      gap: 1rem;
      padding: 1rem 1.25rem;
      background: var(--bg-secondary);
      border: 1px solid var(--border);
      border-radius: 12px;
      transition: all 0.2s;
      cursor: pointer;
    }

    .leaderboard-item.mine {
      border-color: rgba(0, 212, 255, 0.45);
      background: rgba(0, 212, 255, 0.05);
    }
    .lb-mine-tag {
      display: inline-block; vertical-align: middle; margin-left: 0.4rem;
      font-size: 0.58rem; font-weight: 700; letter-spacing: 0.08em;
      padding: 0.1rem 0.4rem; border-radius: 4px;
      background: rgba(0, 212, 255, 0.15); color: var(--accent-cyan);
    }
    /* F15 "Where am I": pinned rows for Data Center validators below the top 50 */
    .lb-mine-divider {
      margin: 1.25rem 0 0.75rem; padding-top: 0.75rem;
      border-top: 1px dashed rgba(0, 212, 255, 0.35);
      font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
      color: var(--accent-cyan);
    }
    .lb-mine-note {
      margin-top: 0.5rem; font-size: 0.78rem; color: var(--text-dim);
    }
    /* Data Center summary values: shrink a little on narrower windows so
       "6,017,816.03" is not clipped in a six-column row. */
    .portfolio-stat-value { font-size: clamp(1rem, 1.5vw, 1.4rem); }

    .leaderboard-item:hover {
      border-color: var(--accent-blue);
      transform: translateX(5px);
    }

    .leaderboard-item.gold {
      border-color: #ffd700;
      background: linear-gradient(135deg, rgba(255,215,0,0.1) 0%, var(--bg-secondary) 100%);
    }

    .leaderboard-item.silver {
      border-color: #c0c0c0;
      background: linear-gradient(135deg, rgba(192,192,192,0.1) 0%, var(--bg-secondary) 100%);
    }

    .leaderboard-item.bronze {
      border-color: #cd7f32;
      background: linear-gradient(135deg, rgba(205,127,50,0.1) 0%, var(--bg-secondary) 100%);
    }

    .leaderboard-rank {
      min-width: 50px;
      font-size: 1.5rem;
      font-weight: 700;
      text-align: center;
    }

    .leaderboard-rank.gold { color: #ffd700; }
    .leaderboard-rank.silver { color: #c0c0c0; }
    .leaderboard-rank.bronze { color: #cd7f32; }
    .leaderboard-rank.normal { color: var(--text-dim); font-size: 1.1rem; }

    .leaderboard-validator {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      flex: 1;
      min-width: 0;
    }

    .leaderboard-logo {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      object-fit: cover;
      border: 2px solid var(--border);
      background: var(--bg-tertiary);
    }

    .leaderboard-logo-placeholder {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: var(--accent-gradient);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 600;
      font-size: 1rem;
      color: var(--bg-primary);
    }

    .leaderboard-name {
      font-weight: 600;
      font-size: 1rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .leaderboard-stats {
      display: flex;
      gap: 1.5rem;
      align-items: center;
    }

    .leaderboard-stat {
      text-align: right;
      min-width: 80px;
    }

    .leaderboard-stat-value {
      font-size: 1.1rem;
      font-weight: 600;
      color: var(--accent-cyan);
    }

    .leaderboard-stat-value.highlight {
      color: var(--success);
    }

    /* Score colors need higher specificity to override default cyan */
    .leaderboard-stat-value.score-good { color: var(--success); }
    .leaderboard-stat-value.score-warning { color: var(--warning); }
    .leaderboard-stat-value.score-orange { color: #ff9800; }
    .leaderboard-stat-value.score-bad { color: var(--danger); }

    .leaderboard-stat-label {
      font-size: 0.7rem;
      color: var(--text-dim);
      text-transform: uppercase;
    }

    /* Newest validators grouped display */
    .newest-group {
      margin-bottom: 1.5rem;
    }

    .newest-group:last-child {
      margin-bottom: 0;
    }

    .newest-group-title {
      font-size: 0.9rem;
      font-weight: 600;
      color: var(--accent-cyan);
      margin-bottom: 0.75rem;
      padding-bottom: 0.5rem;
      border-bottom: 1px solid var(--border);
    }

    .newest-item {
      border-left: 3px solid var(--accent-cyan);
    }

    .newest-badge {
      font-size: 1.2rem;
      min-width: 2rem;
      text-align: center;
    }

    @media (max-width: 768px) {
      .leaderboard-categories {
        gap: 0.5rem;
      }
      
      .leaderboard-cat-btn {
        padding: 0.5rem 1rem;
        font-size: 0.8rem;
      }
      
      .leaderboard-item {
        flex-wrap: wrap;
        gap: 0.75rem;
      }
      
      .leaderboard-stats {
        width: 100%;
        justify-content: space-around;
        gap: 1rem;
      }
      
      .leaderboard-stat {
        text-align: center;
        min-width: auto;
      }
    }

    /* Compare Tool */
    .compare-container {
      max-width: 1200px;
      margin: 0 auto;
    }

    .compare-header {
      text-align: center;
      margin-bottom: 2rem;
    }

    .compare-header h2 {
      font-size: 2rem;
      margin-bottom: 0.5rem;
    }

    .compare-subtitle {
      color: var(--text-secondary);
    }

    .compare-add-section {
      display: flex;
      gap: 1rem;
      margin-bottom: 1.5rem;
      align-items: flex-start;
    }

    .compare-search-box {
      flex: 1;
      position: relative;
    }

    .compare-search-box input {
      width: 100%;
      padding: 0.875rem 1rem;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--text-primary);
      font-size: 1rem;
      font-family: inherit;
    }

    .compare-search-box input:focus {
      outline: none;
      border-color: var(--accent-cyan);
    }

    .compare-search-results {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-top: none;
      border-radius: 0 0 8px 8px;
      max-height: 300px;
      overflow-y: auto;
      z-index: 100;
      display: none;
    }

    .compare-search-results.active {
      display: block;
    }

    .compare-search-result {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      padding: 0.75rem 1rem;
      cursor: pointer;
      transition: background 0.2s;
    }

    .compare-search-result:hover {
      background: var(--bg-card-hover);
    }

    .compare-search-result-logo {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      object-fit: cover;
    }

    .compare-search-result-logo-placeholder {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: var(--accent-gradient);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 600;
      font-size: 0.875rem;
    }

    .compare-search-result-info {
      flex: 1;
      min-width: 0;
    }

    .compare-search-result-name {
      font-weight: 500;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .compare-search-result-address {
      font-size: 0.75rem;
      color: var(--text-dim);
      font-family: 'JetBrains Mono', monospace;
    }

    .compare-browse-btn {
      padding: 0.875rem 1.25rem;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--text-primary);
      cursor: pointer;
      font-family: inherit;
      font-size: 0.9rem;
      white-space: nowrap;
      transition: all 0.2s;
    }

    .compare-browse-btn:hover {
      background: var(--bg-card-hover);
      border-color: var(--accent-cyan);
    }

    .compare-slots {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1rem;
      margin-bottom: 1.5rem;
    }

    .compare-slot {
      background: var(--bg-card);
      border: 2px dashed var(--border);
      border-radius: 12px;
      min-height: 120px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s;
    }

    .compare-slot.empty {
      cursor: pointer;
    }

    .compare-slot.empty:hover {
      border-color: var(--accent-cyan);
      background: var(--bg-card-hover);
    }

    .compare-slot.filled {
      border-style: solid;
      border-color: var(--border);
      padding: 1rem;
      flex-direction: column;
      position: relative;
    }

    .compare-slot-empty {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.5rem;
      color: var(--text-dim);
    }

    .compare-slot-plus {
      font-size: 2rem;
      color: var(--accent-cyan);
    }

    .compare-slot-header {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      width: 100%;
      margin-bottom: 0.5rem;
    }

    .compare-slot-logo {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      object-fit: cover;
    }

    .compare-slot-logo-placeholder {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: var(--accent-gradient);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 600;
    }

    .compare-slot-name {
      flex: 1;
      font-weight: 600;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .compare-slot-remove {
      position: absolute;
      top: 0.5rem;
      right: 0.5rem;
      background: var(--danger);
      border: none;
      color: white;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      cursor: pointer;
      font-size: 1rem;
      line-height: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: opacity 0.2s;
    }

    .compare-slot.filled:hover .compare-slot-remove {
      opacity: 1;
    }

    .compare-slot-score {
      font-size: 1.5rem;
      font-weight: 700;
    }

    .compare-slot-score-label {
      font-size: 0.75rem;
      color: var(--text-dim);
      text-transform: uppercase;
    }

    .compare-table-container {
      background: var(--bg-card);
      border-radius: 12px;
      padding: 1.5rem;
      margin-top: 1rem;
    }

    .compare-clear-btn {
      float: right;
      background: transparent;
      border: 1px solid var(--danger);
      color: var(--danger);
      padding: 0.5rem 1rem;
      border-radius: 6px;
      cursor: pointer;
      font-family: inherit;
      font-size: 0.85rem;
      transition: all 0.2s;
      margin-bottom: 1rem;
    }

    .compare-clear-btn:hover {
      background: var(--danger);
      color: white;
    }

    .compare-table {
      width: 100%;
      clear: both;
    }

    .compare-row {
      display: grid;
      grid-template-columns: 180px repeat(var(--compare-cols, 4), 1fr);
      border-bottom: 1px solid var(--border);
    }

    .compare-row:last-child {
      border-bottom: none;
    }

    .compare-row-header {
      background: var(--bg-secondary);
      font-weight: 600;
    }

    .compare-cell {
      padding: 1rem;
      display: flex;
      align-items: center;
    }

    .compare-cell-label {
      color: var(--text-secondary);
      font-weight: 500;
    }

    .compare-cell-value {
      justify-content: center;
      text-align: center;
      font-weight: 500;
    }

    .compare-cell-best {
      background: rgba(0, 230, 118, 0.1);
      color: var(--success);
    }

    .compare-empty-state {
      text-align: center;
      padding: 4rem 2rem;
      color: var(--text-secondary);
    }

    .compare-empty-icon {
      font-size: 4rem;
      margin-bottom: 1rem;
      opacity: 0.5;
    }

    .compare-empty-state h3 {
      color: var(--text-primary);
      margin-bottom: 0.5rem;
    }

    @media (max-width: 900px) {
      .compare-slots {
        grid-template-columns: repeat(2, 1fr);
      }
      
      .compare-add-section {
        flex-direction: column;
      }
      
      .compare-browse-btn {
        width: 100%;
      }
    }

    @media (max-width: 600px) {
      .compare-slots {
        grid-template-columns: 1fr;
      }
      
      .compare-row {
        grid-template-columns: 120px repeat(var(--compare-cols, 4), 1fr);
      }
      
      .compare-cell {
        padding: 0.75rem 0.5rem;
        font-size: 0.85rem;
      }
    }

    /* Calculators */
    .calculators-nav {
      display: flex;
      gap: 0.75rem;
      margin-bottom: 1.5rem;
      flex-wrap: wrap;
    }

    .calc-nav-btn {
      padding: 0.6rem 1.2rem;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 20px;
      color: var(--text-secondary);
      font-size: 0.85rem;
      cursor: pointer;
      transition: all 0.2s;
      font-family: 'Space Grotesk', sans-serif;
    }

    .calc-nav-btn:hover {
      border-color: var(--accent);
      color: var(--text-primary);
    }

    .calc-nav-btn.active {
      background: var(--accent-gradient);
      color: var(--bg-primary);
      border-color: transparent;
      font-weight: 600;
    }

    .calculator-panel {
      display: none;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 16px;
      overflow: hidden;
    }

    .calculator-panel.active {
      display: block;
    }

    .calc-header {
      padding: 1.5rem;
      border-bottom: 1px solid var(--border);
      background: var(--bg-secondary);
    }

    .calc-header h2 {
      margin: 0 0 0.5rem 0;
      font-size: 1.3rem;
    }

    .calc-subtitle {
      color: var(--text-secondary);
      margin: 0;
      font-size: 0.9rem;
    }

    .calc-body {
      display: grid;
      grid-template-columns: 1fr 1.5fr;
      gap: 2rem;
      padding: 1.5rem;
    }

    @media (max-width: 900px) {
      .calc-body {
        grid-template-columns: 1fr;
      }
    }

    .calc-inputs {
      display: flex;
      flex-direction: column;
      gap: 1.25rem;
    }

    .calc-input-group {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }

    .calc-input-group label {
      font-size: 0.85rem;
      color: var(--text-secondary);
      font-weight: 500;
    }

    .calc-input-group input,
    .calc-input-group select {
      padding: 0.75rem 1rem;
      background: var(--bg-secondary);
      border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--text-primary);
      font-size: 1rem;
      font-family: 'Space Grotesk', sans-serif;
    }

    .calc-input-group input:focus,
    .calc-input-group select:focus {
      outline: none;
      border-color: var(--accent);
    }

    .calc-input-hint {
      font-size: 0.75rem;
      color: var(--text-dim);
    }

    .calc-input-row {
      display: flex;
      gap: 0.5rem;
      align-items: center;
    }

    .calc-input-row input {
      flex: 1;
    }

    .calc-input-row select {
      width: auto;
    }

    .calc-input-unit {
      color: var(--text-dim);
      font-size: 0.9rem;
    }

    .calc-results {
      background: var(--bg-secondary);
      border-radius: 12px;
      padding: 1.5rem;
    }

    .calc-result-header {
      font-weight: 600;
      font-size: 1rem;
      margin-bottom: 1.25rem;
      color: var(--text-primary);
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 0.75rem;
    }

    .calc-toggle {
      display: flex;
      gap: 0.25rem;
      background: var(--bg-card);
      border-radius: 8px;
      padding: 0.25rem;
    }

    .calc-toggle-btn {
      padding: 0.4rem 0.75rem;
      background: transparent;
      border: none;
      border-radius: 6px;
      color: var(--text-secondary);
      font-size: 0.75rem;
      cursor: pointer;
      transition: all 0.2s;
      font-family: 'Space Grotesk', sans-serif;
    }

    .calc-toggle-btn:hover {
      color: var(--text-primary);
    }

    .calc-toggle-btn.active {
      background: var(--accent-gradient);
      color: var(--bg-primary);
      font-weight: 600;
    }

    .calc-header-controls {
      display: flex;
      gap: 0.75rem;
      align-items: center;
      flex-wrap: wrap;
    }

    .calc-currency-toggle {
      display: flex;
      gap: 0.15rem;
      background: var(--bg-card);
      border-radius: 6px;
      padding: 0.2rem;
    }

    .calc-currency-btn {
      padding: 0.3rem 0.6rem;
      background: transparent;
      border: none;
      border-radius: 4px;
      color: var(--text-secondary);
      font-size: 0.7rem;
      cursor: pointer;
      transition: all 0.2s;
      font-family: 'JetBrains Mono', monospace;
      font-weight: 500;
    }

    .calc-currency-btn:hover {
      color: var(--text-primary);
    }

    .calc-currency-btn.active {
      background: var(--accent-cyan);
      color: var(--bg-primary);
      font-weight: 600;
    }

    .calc-stake-type-toggle {
      display: flex;
      gap: 0.75rem;
    }

    .calc-stake-type-btn {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.25rem;
      padding: 0.75rem;
      background: var(--bg-secondary);
      border: 2px solid var(--border);
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.2s;
      font-family: inherit;
    }

    .calc-stake-type-btn:hover {
      border-color: var(--accent-blue);
      background: var(--bg-card);
    }

    .calc-stake-type-btn.active {
      border-color: var(--accent-cyan);
      background: rgba(0, 212, 255, 0.1);
    }

    .stake-type-icon {
      font-size: 1.25rem;
    }

    .stake-type-label {
      font-weight: 600;
      font-size: 0.85rem;
      color: var(--text-primary);
    }

    .stake-type-desc {
      font-size: 0.7rem;
      color: var(--text-dim);
    }

    .calc-stake-type-btn.active .stake-type-label {
      color: var(--accent-cyan);
    }

    .calc-sim-header {
      font-size: 0.9rem;
      font-weight: 600;
      color: var(--accent-cyan);
      margin: 1.5rem 0 1rem 0;
      padding-top: 1rem;
      border-top: 1px solid var(--border);
    }

    .calc-current-breakdown {
      background: var(--bg-secondary);
      border-radius: 12px;
      padding: 1rem;
      margin-bottom: 1rem;
    }

    .calc-breakdown-title {
      font-size: 0.85rem;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 0.75rem;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .calc-breakdown-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.75rem;
    }

    .calc-breakdown-item {
      background: var(--bg-card);
      border-radius: 8px;
      padding: 0.75rem;
      text-align: center;
    }

    .calc-breakdown-item.self {
      border-left: 3px solid var(--accent-cyan);
    }

    .calc-breakdown-item.delegated {
      border-left: 3px solid var(--accent-gold);
    }

    .calc-breakdown-value {
      font-size: 1.1rem;
      font-weight: 600;
      color: var(--text-primary);
      font-family: 'JetBrains Mono', monospace;
    }

    .calc-breakdown-label {
      font-size: 0.7rem;
      color: var(--text-dim);
      text-transform: uppercase;
      margin-top: 0.25rem;
    }

    .calc-earnings-section {
      background: var(--bg-secondary);
      border-radius: 12px;
      padding: 1rem;
      margin-bottom: 1rem;
    }

    .calc-earnings-title {
      font-size: 0.85rem;
      font-weight: 600;
      color: var(--success);
      margin-bottom: 0.75rem;
    }

    .calc-earnings-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0.5rem 0;
      border-bottom: 1px solid var(--border);
    }

    .calc-earnings-row:last-child {
      border-bottom: none;
    }

    .calc-earnings-row.total {
      margin-top: 0.5rem;
      padding-top: 0.75rem;
      border-top: 1px solid var(--accent-cyan);
      border-bottom: none;
    }

    .calc-earnings-label {
      font-size: 0.8rem;
      color: var(--text-secondary);
    }

    .calc-earnings-value {
      font-size: 0.9rem;
      font-weight: 600;
      color: var(--text-primary);
      font-family: 'JetBrains Mono', monospace;
    }

    .calc-earnings-row.total .calc-earnings-value {
      font-size: 1.1rem;
      color: var(--success);
    }

    .calc-projection-section {
      background: rgba(0, 255, 163, 0.05);
      border: 1px solid rgba(0, 255, 163, 0.2);
      border-radius: 12px;
      padding: 1rem;
      margin-bottom: 1rem;
    }

    .calc-projection-title {
      font-size: 0.85rem;
      font-weight: 600;
      color: var(--accent-cyan);
      margin-bottom: 0.75rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.5rem;
    }

    .projection-period-toggle {
      display: flex;
      gap: 0.25rem;
      background: rgba(0, 0, 0, 0.3);
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 0.2rem;
    }

    .period-toggle-btn {
      padding: 0.3rem 0.75rem;
      font-size: 0.7rem;
      font-weight: 600;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      background: transparent;
      color: var(--text-secondary);
      transition: all 0.2s ease;
    }

    .period-toggle-btn:hover {
      color: var(--text-primary);
      background: rgba(255, 255, 255, 0.05);
    }

    .period-toggle-btn.active {
      background: var(--accent-cyan);
      color: var(--bg-dark);
    }

    .calc-projection-comparison {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      gap: 0.5rem;
      align-items: center;
      margin-bottom: 1rem;
    }

    .calc-projection-box {
      text-align: center;
      padding: 0.75rem;
      background: var(--bg-card);
      border-radius: 8px;
    }

    .calc-projection-box.new {
      background: rgba(0, 255, 163, 0.1);
      border: 1px solid rgba(0, 255, 163, 0.3);
    }

    .calc-projection-arrow {
      font-size: 1.25rem;
      color: var(--text-dim);
    }

    .calc-projection-value {
      font-size: 1rem;
      font-weight: 600;
      color: var(--text-primary);
      font-family: 'JetBrains Mono', monospace;
    }

    .calc-projection-box.new .calc-projection-value {
      color: var(--success);
    }

    .calc-projection-label {
      font-size: 0.65rem;
      color: var(--text-dim);
      text-transform: uppercase;
      margin-top: 0.25rem;
    }

    .calc-apy-badge {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      background: rgba(0, 212, 255, 0.15);
      color: var(--accent-cyan);
      padding: 0.35rem 0.65rem;
      border-radius: 20px;
      font-size: 0.75rem;
      font-weight: 600;
    }

    .calc-no-breakdown-note {
      background: rgba(255, 193, 7, 0.1);
      border: 1px solid rgba(255, 193, 7, 0.3);
      border-radius: 8px;
      padding: 0.75rem;
      font-size: 0.8rem;
      color: var(--text-secondary);
      margin-bottom: 1rem;
      display: flex;
      align-items: flex-start;
      gap: 0.5rem;
    }

    .calc-no-breakdown-note span:first-child {
      flex-shrink: 0;
    }

    .calc-result-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1rem;
      margin-bottom: 1.5rem;
    }

    @media (max-width: 500px) {
      .calc-result-grid {
        grid-template-columns: 1fr;
      }
    }

    .calc-result-item {
      background: var(--bg-card);
      border-radius: 8px;
      padding: 1rem;
      text-align: center;
    }

    .calc-result-item.highlight {
      background: linear-gradient(135deg, rgba(0, 255, 163, 0.1), rgba(0, 209, 255, 0.1));
      border: 1px solid rgba(0, 255, 163, 0.3);
    }

    .calc-result-value {
      font-size: 1.4rem;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 0.25rem;
    }

    .calc-result-item.highlight .calc-result-value {
      color: var(--success);
    }

    .calc-result-label {
      font-size: 0.75rem;
      color: var(--text-dim);
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .calc-result-summary {
      border-top: 1px solid var(--border);
      padding-top: 1rem;
    }

    .calc-summary-row {
      display: flex;
      justify-content: space-between;
      padding: 0.5rem 0;
      font-size: 0.9rem;
    }

    .calc-summary-row span:first-child {
      color: var(--text-secondary);
    }

    .calc-summary-row span:last-child {
      color: var(--text-primary);
      font-weight: 500;
    }

    .calc-summary-row.highlight {
      border-top: 1px solid var(--border);
      margin-top: 0.5rem;
      padding-top: 1rem;
    }

    .calc-summary-row.highlight span:last-child {
      color: var(--success);
      font-size: 1.1rem;
    }

    .calc-section-divider {
      height: 1px;
      background: var(--border);
      margin: 1.5rem 0;
    }

    .calc-section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 1rem;
      font-size: 0.9rem;
      font-weight: 600;
      flex-wrap: wrap;
      gap: 0.5rem;
    }

    .calc-section-header.estimated {
      color: var(--text-secondary);
    }

    .calc-section-header.actual {
      color: var(--success);
    }

    .calc-section-badge {
      background: rgba(0, 255, 163, 0.15);
      color: var(--success);
      padding: 0.25rem 0.5rem;
      border-radius: 4px;
      font-size: 0.75rem;
      font-weight: 600;
    }

    .calc-actual-note {
      font-size: 0.75rem;
      color: var(--text-dim);
      margin-top: 0.75rem;
      text-align: center;
      font-style: italic;
    }

    .calc-new-stake-preview {
      margin-top: 1rem;
      padding: 0.75rem 1rem;
      background: rgba(0, 212, 255, 0.1);
      border: 1px solid rgba(0, 212, 255, 0.3);
      border-radius: 8px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 0.85rem;
      color: var(--accent-cyan);
    }

    .calc-view-link {
      background: none;
      border: none;
      color: var(--accent-blue);
      cursor: pointer;
      font-size: 0.8rem;
      font-family: inherit;
      padding: 0.25rem 0.5rem;
      border-radius: 4px;
      transition: all 0.2s;
    }

    .calc-view-link:hover {
      background: rgba(77, 166, 255, 0.2);
    }

    .calc-increase-box {
      background: rgba(0, 230, 118, 0.1);
      border: 1px solid rgba(0, 230, 118, 0.3);
      border-radius: 8px;
      padding: 0.75rem 1rem;
      margin-bottom: 1rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 0.5rem;
    }

    .calc-increase-label {
      font-size: 0.75rem;
      color: var(--text-secondary);
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .calc-increase-value {
      font-size: 1.1rem;
      font-weight: 600;
      color: var(--success);
      font-family: 'JetBrains Mono', monospace;
    }

    .calc-increase-percent {
      background: var(--success);
      color: var(--bg-primary);
      padding: 0.25rem 0.5rem;
      border-radius: 4px;
      font-size: 0.75rem;
      font-weight: 600;
    }

    .calc-comparison-note {
      margin-top: 0.75rem;
      padding: 0.5rem 0.75rem;
      background: var(--bg-card);
      border-radius: 6px;
      font-size: 0.8rem;
      color: var(--text-secondary);
      text-align: center;
    }

    .calc-loading {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 2rem;
      gap: 0.75rem;
      color: var(--text-dim);
    }

    /* Commission comparison */
    .commission-comparison {
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
      margin-bottom: 1.5rem;
    }

    .commission-row {
      display: grid;
      grid-template-columns: 80px 1fr 120px;
      gap: 1rem;
      align-items: center;
      padding: 0.75rem;
      background: var(--bg-card);
      border-radius: 8px;
    }

    .commission-row.highlight {
      background: linear-gradient(135deg, rgba(0, 255, 163, 0.1), rgba(0, 209, 255, 0.1));
      border: 1px solid rgba(0, 255, 163, 0.3);
    }

    .commission-rate {
      font-weight: 600;
      color: var(--text-primary);
    }

    .commission-bar {
      height: 8px;
      background: var(--bg-secondary);
      border-radius: 4px;
      overflow: hidden;
    }

    .commission-bar-fill {
      height: 100%;
      background: var(--accent-gradient);
      border-radius: 4px;
      transition: width 0.3s;
    }

    .commission-earnings {
      text-align: right;
      font-weight: 600;
      color: var(--success);
    }

    .commission-insight {
      background: var(--bg-card);
      border-radius: 8px;
      padding: 1rem;
      font-size: 0.9rem;
      color: var(--text-secondary);
      line-height: 1.5;
    }

    .commission-insight strong {
      color: var(--warning);
    }

    .commission-row.over-limit {
      border-left: 3px solid var(--warning);
    }

    .commission-row.max-allowed {
      border-left: 3px solid var(--success);
    }

    .commission-bar-fill.over-limit {
      background: var(--warning);
      opacity: 0.5;
    }

    .commission-bar-fill.actual {
      background: var(--success);
    }

    .commission-warning {
      display: flex;
      gap: 0.75rem;
      margin-top: 1rem;
      padding: 1rem;
      background: rgba(255, 193, 7, 0.1);
      border: 1px solid rgba(255, 193, 7, 0.3);
      border-radius: 8px;
    }

    .commission-warning-icon {
      font-size: 1.25rem;
      flex-shrink: 0;
    }

    .commission-warning-text {
      font-size: 0.85rem;
      color: var(--text-secondary);
      line-height: 1.5;
    }

    .commission-warning-text strong {
      color: var(--warning);
    }

    .commission-empty-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 2rem;
      text-align: center;
      color: var(--text-dim);
    }

    .commission-empty-icon {
      font-size: 2.5rem;
      margin-bottom: 0.75rem;
      opacity: 0.5;
    }

    .commission-empty-text {
      font-size: 0.9rem;
      max-width: 250px;
      line-height: 1.5;
    }

    .calc-empty-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 2rem;
      text-align: center;
      color: var(--text-dim);
    }

    .calc-empty-icon {
      font-size: 2.5rem;
      margin-bottom: 0.75rem;
      opacity: 0.5;
    }

    .calc-empty-text {
      font-size: 0.9rem;
      max-width: 280px;
      line-height: 1.5;
    }

    /* Compound growth */
    .compound-chart-container {
      height: 200px;
      margin-bottom: 1.5rem;
    }

    .compound-comparison {
      background: var(--bg-card);
      border-radius: 8px;
      padding: 1rem;
    }

    .compound-vs {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }

    .compound-vs-item {
      display: flex;
      justify-content: space-between;
      font-size: 0.9rem;
    }

    .compound-vs-label {
      color: var(--text-secondary);
    }

    .compound-vs-value {
      font-weight: 600;
      color: var(--text-primary);
    }

    .compound-vs-item.highlight {
      border-top: 1px solid var(--border);
      padding-top: 0.75rem;
      margin-top: 0.5rem;
    }

    .compound-vs-item.highlight .compound-vs-value {
      color: var(--success);
    }

    .compound-vs-value.bonus {
      color: var(--success);
      font-size: 1.1rem;
    }

    .calc-validator-apy-box {
      text-align: center;
      padding: 1rem;
      margin: 1rem 0;
      background: linear-gradient(135deg, rgba(0, 212, 255, 0.1), rgba(255, 215, 0, 0.1));
      border: 1px solid rgba(0, 212, 255, 0.3);
      border-radius: 8px;
    }

    .calc-validator-apy-label {
      font-size: 0.75rem;
      color: var(--text-secondary);
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .calc-validator-apy-value {
      font-size: 2rem;
      font-weight: 700;
      background: linear-gradient(135deg, var(--accent-cyan), var(--accent-gold));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      line-height: 1.2;
    }

    .calc-validator-apy-note {
      font-size: 0.7rem;
      color: var(--text-dim);
      margin-top: 0.25rem;
    }

    /* Unstaking timeline */
    .calc-network-status {
      background: var(--bg-card);
      border-radius: 8px;
      padding: 1rem;
      margin-bottom: 0.5rem;
    }

    .calc-status-item {
      display: flex;
      justify-content: space-between;
      padding: 0.4rem 0;
      font-size: 0.9rem;
    }

    .calc-status-label {
      color: var(--text-secondary);
    }

    .calc-status-value {
      color: var(--text-primary);
      font-weight: 500;
    }

    .calc-refresh-btn {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 0.5rem 1rem;
      color: var(--text-secondary);
      font-size: 0.8rem;
      cursor: pointer;
      transition: all 0.2s;
    }

    .calc-refresh-btn:hover {
      border-color: var(--accent);
      color: var(--text-primary);
    }

    .unstaking-timeline {
      display: flex;
      flex-direction: column;
      gap: 0;
      margin-bottom: 1.5rem;
    }

    .timeline-step {
      display: flex;
      gap: 1rem;
      padding: 1rem 0;
      position: relative;
    }

    .timeline-step:not(:last-child)::after {
      content: '';
      position: absolute;
      left: 15px;
      top: 40px;
      bottom: 0;
      width: 2px;
      background: var(--border);
    }

    .timeline-step.active::after {
      background: var(--success);
    }

    .timeline-icon {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: var(--bg-card);
      border: 2px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1rem;
      flex-shrink: 0;
      z-index: 1;
    }

    .timeline-step.active .timeline-icon {
      border-color: var(--success);
      background: rgba(0, 255, 163, 0.1);
    }

    .timeline-step.completed .timeline-icon {
      border-color: var(--success);
      background: var(--success);
      color: var(--bg-primary);
    }

    .timeline-content {
      flex: 1;
    }

    .timeline-title {
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 0.25rem;
    }

    .timeline-subtitle {
      font-size: 0.85rem;
      color: var(--text-secondary);
    }

    .timeline-date {
      font-size: 0.8rem;
      color: var(--text-dim);
      margin-top: 0.25rem;
    }

    .unstaking-summary {
      background: var(--bg-card);
      border-radius: 8px;
      padding: 1rem;
      text-align: center;
    }

    .unstaking-summary-value {
      font-size: 1.5rem;
      font-weight: 600;
      color: var(--success);
      margin-bottom: 0.25rem;
    }

    .unstaking-summary-label {
      font-size: 0.85rem;
      color: var(--text-secondary);
    }

    /* ── Unstaking calculator: cooldown rate slider ─────────────────────── */
    .unstaking-rate-slider-wrap {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }
    .unstaking-rate-row {
      display: flex;
      align-items: center;
      gap: 0.75rem;
    }
    .unstaking-rate-slider {
      flex: 1;
      -webkit-appearance: none;
      appearance: none;
      height: 6px;
      background: var(--bg-secondary);
      border-radius: 3px;
      outline: none;
      cursor: pointer;
    }
    .unstaking-rate-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: var(--accent-cyan);
      cursor: pointer;
      box-shadow: 0 0 8px rgba(0,212,255,0.5);
    }
    .unstaking-rate-slider::-moz-range-thumb {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: var(--accent-cyan);
      cursor: pointer;
      border: none;
      box-shadow: 0 0 8px rgba(0,212,255,0.5);
    }
    .unstaking-rate-value {
      font-family: 'JetBrains Mono', monospace;
      font-size: 1rem;
      font-weight: 600;
      color: var(--accent-cyan);
      min-width: 56px;
      text-align: right;
    }
    .unstaking-rate-presets {
      display: flex;
      gap: 0.4rem;
      flex-wrap: wrap;
    }
    .unstaking-rate-preset {
      padding: 0.3rem 0.6rem;
      background: var(--bg-secondary);
      border: 1px solid var(--border);
      border-radius: 6px;
      color: var(--text-secondary);
      font-size: 0.72rem;
      cursor: pointer;
      transition: all 0.15s;
    }
    .unstaking-rate-preset:hover {
      border-color: var(--accent-cyan);
      color: var(--accent-cyan);
    }
    .unstaking-rate-preset.active {
      background: rgba(0, 212, 255, 0.12);
      border-color: var(--accent-cyan);
      color: var(--accent-cyan);
    }

    /* ── Per-epoch release breakdown table ──────────────────────────────── */
    .unstaking-epoch-table {
      margin: 1rem 0;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 8px;
      overflow: hidden;
    }
    .unstaking-epoch-table-header {
      display: grid;
      grid-template-columns: 0.7fr 1fr 1fr 1.5fr;
      gap: 0.5rem;
      padding: 0.65rem 0.85rem;
      background: var(--bg-secondary);
      border-bottom: 1px solid var(--border);
      font-size: 0.72rem;
      font-weight: 600;
      color: var(--text-secondary);
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    .unstaking-epoch-row {
      display: grid;
      grid-template-columns: 0.7fr 1fr 1fr 1.5fr;
      gap: 0.5rem;
      padding: 0.65rem 0.85rem;
      align-items: center;
      border-bottom: 1px solid var(--border);
      font-size: 0.85rem;
    }
    .unstaking-epoch-row:last-child {
      border-bottom: none;
    }
    .unstaking-epoch-row.complete {
      background: rgba(0, 230, 118, 0.04);
    }
    .unstaking-epoch-num {
      font-family: 'JetBrains Mono', monospace;
      color: var(--text-primary);
      font-weight: 600;
    }
    .unstaking-epoch-released {
      font-family: 'JetBrains Mono', monospace;
      color: var(--success);
    }
    .unstaking-epoch-cumulative {
      font-family: 'JetBrains Mono', monospace;
      color: var(--text-primary);
    }
    .unstaking-epoch-bar {
      position: relative;
      height: 6px;
      background: var(--bg-primary);
      border-radius: 3px;
      overflow: hidden;
    }
    .unstaking-epoch-bar-fill {
      position: absolute;
      top: 0; left: 0;
      height: 100%;
      background: linear-gradient(90deg, var(--success), var(--accent-cyan));
      border-radius: 3px;
    }

    /* ── Educational explainer box ──────────────────────────────────────── */
    .unstaking-info-box {
      margin-top: 1rem;
      padding: 0.9rem 1rem;
      background: rgba(0, 212, 255, 0.06);
      border: 1px solid rgba(0, 212, 255, 0.2);
      border-radius: 8px;
      font-size: 0.82rem;
      line-height: 1.55;
      color: var(--text-secondary);
    }
    .unstaking-info-box strong {
      color: var(--accent-cyan);
      display: block;
      margin-bottom: 0.4rem;
      font-size: 0.85rem;
    }
    .unstaking-info-box p { margin: 0.3rem 0; }
    .unstaking-info-box code {
      font-family: 'JetBrains Mono', monospace;
      background: var(--bg-secondary);
      padding: 0.05rem 0.3rem;
      border-radius: 3px;
      font-size: 0.78rem;
      color: var(--text-primary);
    }

    /* ── Cooldown popover (hover/tap on stake state badge) ───────────────── */
    .cooldown-popover {
      position: fixed;
      z-index: 100000;
      min-width: 320px;
      max-width: 380px;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 10px;
      box-shadow: 0 12px 32px rgba(0,0,0,0.55), 0 0 0 1px rgba(0, 212, 255, 0.08);
      padding: 0.95rem 1rem;
      font-size: 0.82rem;
      color: var(--text-secondary);
      pointer-events: none;
      opacity: 0;
      transform: translateY(-4px);
      transition: opacity 0.12s ease, transform 0.12s ease;
    }
    .cooldown-popover.show {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }
    .cooldown-popover.pinned {
      box-shadow: 0 12px 32px rgba(0,0,0,0.55), 0 0 0 1px var(--accent-cyan);
    }
    .cooldown-popover-arrow {
      position: absolute;
      width: 12px;
      height: 12px;
      background: var(--bg-card);
      border-left: 1px solid var(--border);
      border-top: 1px solid var(--border);
      transform: rotate(45deg);
      top: -7px;
      left: 24px;
    }
    .cooldown-popover.flipped .cooldown-popover-arrow {
      top: auto;
      bottom: -7px;
      transform: rotate(225deg);
    }
    .cooldown-popover-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 0.5rem;
      margin-bottom: 0.7rem;
      padding-bottom: 0.6rem;
      border-bottom: 1px solid var(--border);
    }
    .cooldown-popover-head .cd-state {
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      padding: 0.2rem 0.5rem;
      border-radius: 4px;
    }
    .cooldown-popover-head .cd-state.deactivating {
      background: rgba(255, 171, 0, 0.15);
      color: var(--warning);
    }
    .cooldown-popover-head .cd-state.cooling {
      background: rgba(255, 171, 0, 0.18);
      color: var(--warning);
    }
    .cooldown-popover-head .cd-state.inactive {
      background: rgba(0, 230, 118, 0.18);
      color: var(--success);
    }
    .cooldown-popover-head .cd-state.active {
      background: rgba(0, 212, 255, 0.18);
      color: var(--accent-cyan);
    }
    .cooldown-popover-head .cd-state.activating {
      background: rgba(0, 212, 255, 0.18);
      color: var(--accent-cyan);
    }
    .cooldown-popover-head .cd-addr {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.72rem;
      color: var(--text-dim);
    }
    .cooldown-popover-head .cd-pin-hint {
      font-size: 0.65rem;
      color: var(--text-dim);
      font-style: italic;
    }
    .cooldown-progress-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 0.5rem;
      margin-bottom: 0.4rem;
      font-size: 0.78rem;
    }
    .cooldown-progress-row .cd-amount {
      font-family: 'JetBrains Mono', monospace;
      color: var(--text-primary);
      font-weight: 600;
    }
    .cooldown-progress-row .cd-amount.cooled { color: var(--success); }
    .cooldown-progress-row .cd-amount.cooling { color: var(--warning); }
    .cooldown-progress-bar {
      width: 100%;
      height: 6px;
      background: var(--bg-primary);
      border-radius: 3px;
      overflow: hidden;
      margin: 0.3rem 0 0.7rem;
    }
    .cooldown-progress-bar-fill {
      height: 100%;
      background: linear-gradient(90deg, var(--success), var(--accent-cyan));
      border-radius: 3px;
      transition: width 0.4s ease;
    }
    .cooldown-section-label {
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      color: var(--text-dim);
      margin: 0.7rem 0 0.4rem;
      padding-top: 0.5rem;
      border-top: 1px dashed var(--border);
    }
    .cooldown-meta-row {
      display: flex;
      justify-content: space-between;
      gap: 0.5rem;
      margin-bottom: 0.25rem;
      font-size: 0.76rem;
    }
    .cooldown-meta-row .cd-meta-key { color: var(--text-secondary); }
    .cooldown-meta-row .cd-meta-val {
      font-family: 'JetBrains Mono', monospace;
      color: var(--text-primary);
    }
    .cooldown-mini-table {
      margin-top: 0.4rem;
      border: 1px solid var(--border);
      border-radius: 6px;
      overflow: hidden;
    }
    .cooldown-mini-row {
      display: grid;
      grid-template-columns: 0.75fr 1fr 1fr;
      gap: 0.4rem;
      padding: 0.35rem 0.55rem;
      font-size: 0.74rem;
      border-bottom: 1px solid var(--border);
    }
    .cooldown-mini-row:last-child { border-bottom: none; }
    .cooldown-mini-row.head {
      background: var(--bg-secondary);
      font-weight: 600;
      color: var(--text-secondary);
      font-size: 0.66rem;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    .cooldown-mini-row.past {
      color: var(--text-dim);
    }
    .cooldown-mini-row.complete {
      background: rgba(0, 230, 118, 0.05);
    }
    .cooldown-mini-cell {
      font-family: 'JetBrains Mono', monospace;
    }
    .cooldown-mini-cell.released { color: var(--success); }
    .cooldown-mini-cell.epoch { color: var(--text-primary); font-weight: 600; }
    .cooldown-mini-more {
      padding: 0.35rem 0.55rem;
      font-size: 0.7rem;
      color: var(--text-dim);
      text-align: center;
      background: var(--bg-secondary);
      border-top: 1px solid var(--border);
    }
    .cooldown-popover-foot {
      margin-top: 0.7rem;
      padding-top: 0.55rem;
      border-top: 1px dashed var(--border);
      font-size: 0.7rem;
      color: var(--text-dim);
      line-height: 1.4;
    }
    .cooldown-popover-foot strong {
      color: var(--text-primary);
      font-family: 'JetBrains Mono', monospace;
    }

    /* ── Cooldown progress card (in Stake Account Details panel) ────────── */
    .cooldown-detail-box {
      grid-column: 1 / -1;  /* span full row of the details grid */
      padding: 0.85rem 1rem !important;
      background: linear-gradient(135deg, rgba(255, 171, 0, 0.04), rgba(0, 212, 255, 0.04)) !important;
      border: 1px solid rgba(255, 171, 0, 0.25) !important;
    }
    .cooldown-detail-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 0.5rem;
    }
    .cooldown-detail-head .detail-label {
      margin: 0;
    }
    .cooldown-detail-head .cd-pct {
      font-family: 'JetBrains Mono', monospace;
      font-size: 1rem;
      font-weight: 700;
      color: var(--warning);
    }
    .cooldown-detail-amounts {
      display: flex;
      gap: 1.2rem;
      margin: 0.3rem 0 0.4rem;
      font-size: 0.85rem;
    }
    .cooldown-detail-amounts > div {
      display: flex;
      flex-direction: column;
      gap: 0.1rem;
    }
    .cooldown-detail-amounts .cd-amt-label {
      font-size: 0.68rem;
      color: var(--text-dim);
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    .cooldown-detail-amounts .cd-amt-val {
      font-family: 'JetBrains Mono', monospace;
      font-weight: 600;
    }
    .cooldown-detail-amounts .cd-amt-val.cooled { color: var(--success); }
    .cooldown-detail-amounts .cd-amt-val.cooling { color: var(--warning); }
    .cooldown-detail-summary {
      font-size: 0.75rem;
      color: var(--text-secondary);
      margin-top: 0.4rem;
      line-height: 1.4;
    }
    .cooldown-detail-summary code {
      font-family: 'JetBrains Mono', monospace;
      color: var(--text-primary);
    }

    /* Break-even */
    .breakeven-table {
      margin-top: 1.5rem;
    }

    .breakeven-table-header {
      font-weight: 600;
      font-size: 0.9rem;
      margin-bottom: 0.75rem;
      color: var(--text-primary);
    }

    .breakeven-table-body {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }

    .breakeven-row {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 0.5rem;
      padding: 0.75rem;
      background: var(--bg-card);
      border-radius: 8px;
      font-size: 0.85rem;
    }

    .breakeven-row.header {
      background: transparent;
      color: var(--text-dim);
      font-weight: 500;
      padding: 0.5rem 0.75rem;
      text-transform: uppercase;
      font-size: 0.7rem;
      letter-spacing: 0.5px;
    }

    .breakeven-row.loss {
      border-left: 3px solid var(--danger);
    }

    .breakeven-row.profit {
      border-left: 3px solid var(--success);
    }

    .breakeven-row.breakeven {
      background: linear-gradient(135deg, rgba(0, 255, 163, 0.1), rgba(0, 209, 255, 0.1));
      border: 1px solid rgba(0, 255, 163, 0.3);
    }

    .breakeven-profit {
      font-weight: 600;
    }

    .breakeven-profit.positive {
      color: var(--success);
    }

    .breakeven-profit.negative {
      color: var(--danger);
    }

    .breakeven-status {
      padding: 1rem;
      border-radius: 8px;
      text-align: center;
      margin-bottom: 1.5rem;
      font-size: 0.95rem;
    }

    .breakeven-status.profit-status-positive {
      background: rgba(0, 255, 163, 0.1);
      border: 1px solid rgba(0, 255, 163, 0.3);
      color: var(--success);
    }

    .breakeven-status.profit-status-negative {
      background: rgba(255, 107, 107, 0.1);
      border: 1px solid rgba(255, 107, 107, 0.3);
      color: var(--danger);
    }

    .breakeven-price-box {
      background: linear-gradient(135deg, rgba(0, 209, 255, 0.1), rgba(0, 255, 163, 0.05));
      border: 1px solid rgba(0, 209, 255, 0.3);
      border-radius: 12px;
      padding: 1rem;
      margin: 1rem 0;
    }

    .breakeven-price-header {
      font-size: 0.9rem;
      font-weight: 600;
      color: var(--accent-cyan);
      margin-bottom: 0.75rem;
      padding-bottom: 0.5rem;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .breakeven-price-content {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }

    .breakeven-price-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 0.85rem;
    }

    .breakeven-price-label {
      color: var(--text-secondary);
    }

    .breakeven-price-value {
      font-weight: 600;
      color: var(--text-primary);
      font-family: 'SF Mono', Monaco, monospace;
    }

    .breakeven-price-value.highlight {
      color: var(--accent-cyan);
      font-size: 1rem;
    }

    .breakeven-price-value.positive {
      color: var(--success);
    }

    .breakeven-price-value.negative {
      color: var(--danger);
    }

    .breakeven-price-divider {
      height: 1px;
      background: rgba(255, 255, 255, 0.1);
      margin: 0.25rem 0;
    }

    .breakeven-status strong {
      color: var(--text-primary);
    }

    .breakeven-row.current {
      background: rgba(0, 209, 255, 0.1);
      border-left: 3px solid var(--accent-cyan);
    }

    .breakeven-note {
      margin-top: 1rem;
      font-size: 0.8rem;
      color: var(--text-dim);
      padding: 0.75rem;
      background: var(--bg-card);
      border-radius: 8px;
    }

    @media (max-width: 768px) {
      .calculators-nav {
        gap: 0.5rem;
      }
      
      .calc-nav-btn {
        padding: 0.5rem 0.8rem;
        font-size: 0.75rem;
      }
      
      .calc-header {
        padding: 1rem;
      }
      
      .calc-header h2 {
        font-size: 1.1rem;
      }
      
      .calc-body {
        padding: 1rem;
        gap: 1.5rem;
      }
    }

    /* Footer */
    footer {
      position: relative;
      z-index: 10;
      text-align: center;
      padding: 1.5rem;
      border-top: 1px solid var(--border);
      color: var(--text-dim);
      font-size: 0.8rem;
    }

    footer a {
      color: var(--accent-blue);
      text-decoration: none;
    }

    /* Mobile responsive */
    @media (max-width: 768px) {
      header {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
        padding: 1rem;
      }

      .logo-subtitle {
        display: none;
      }

      .header-links {
        gap: 1rem;
        font-size: 0.85rem;
      }

      .header-right {
        align-items: center;
        gap: 0.85rem;
      }

      main {
        padding: 1rem;
      }

      .network-stats {
        padding: 0.75rem 0.5rem;
        gap: 0;
      }

      .network-stat {
        padding: 0.25rem 0.75rem;
      }

      .network-stat-value {
        font-size: 1rem;
      }

      .tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 0;
      }

      .tab {
        flex: 0 0 auto;
        flex-direction: row;
        min-height: 0;
        padding: 0.6rem 1.1rem;
        font-size: 0.85rem;
        white-space: nowrap;
        gap: 0.4rem;
      }

      .tab .tab-icon { font-size: 1rem; height: auto; }
      .tab .tab-label { display: inline; width: auto; }

      .search-section h1 {
        font-size: 1.5rem;
      }

      .search-input-wrapper {
        min-width: 100%;
      }

      .search-btn {
        width: 100%;
      }

      .portfolio-summary {
        grid-template-columns: repeat(2, 1fr);
        padding: 1rem;
      }

      .portfolio-stat {
        padding: 0.5rem;
      }

      .portfolio-stat-value {
        font-size: 1.1rem;
      }

      .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
      }

      .stat-item {
        padding: 0.75rem;
      }

      .stat-value {
        font-size: 1rem;
      }

      .validator-header {
        flex-direction: column;
      }

      .validator-name {
        font-size: 1.1rem;
      }

      .validator-logo, .validator-logo-placeholder {
        width: 40px;
        height: 40px;
        font-size: 1rem;
      }

      .validator-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
      }

      .validator-address {
        font-size: 0.65rem;
      }

      .chart-stats {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
      }

      .chart-stat-value {
        font-size: 0.9rem;
      }

      .results-header {
        flex-direction: column;
        align-items: flex-start;
      }

      .portfolio-actions {
        flex-wrap: wrap;
      }
    }

    @media (max-width: 480px) {
      .network-stat {
        padding: 0.25rem 0.5rem;
      }

      .network-stat-value {
        font-size: 0.9rem;
      }

      .stats-grid {
        grid-template-columns: 1fr 1fr;
      }

      .portfolio-summary {
        grid-template-columns: 1fr 1fr;
      }
    }

    /* ========================================
       Skip Monitor Tab
       ======================================== */

    .skipmon-wrap { padding: 1.5rem 0; }

    /* Controls row: Live badge + scope toggle. Title itself uses the standard
       `.search-section h1/span` pattern so it matches "My Data <Center>" etc. */
    .skipmon-controls {
      /* Toolbar row — now just holds the scope tabs, centered.
         Extra top margin gives the scope tabs breathing room away from
         the leader-schedule card above them. */
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 2rem;
      margin-bottom: 1.5rem;
    }

    /* Search input — shown only in validator-lookup mode */
    .skipmon-lookup-search {
      display: none;
      position: relative;
      max-width: 620px;
      margin: 0 auto 1.25rem;
    }
    .skipmon-mode-lookup .skipmon-lookup-search { display: block; }
    .skipmon-lookup-search input {
      width: 100%;
      padding: 0.85rem 1rem 0.85rem 2.8rem;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 12px;
      color: var(--text-primary);
      font-family: inherit;
      font-size: 0.95rem;
      transition: border-color 0.2s, box-shadow 0.2s;
    }
    .skipmon-lookup-search input:focus {
      outline: none;
      border-color: var(--accent-cyan);
      box-shadow: 0 0 0 3px rgba(0, 229, 255, 0.12);
    }
    .skipmon-lookup-search-icon {
      position: absolute;
      left: 1rem;
      top: 50%;
      transform: translateY(-50%);
      color: var(--text-dim);
      pointer-events: none;
      font-size: 1rem;
    }
    .skipmon-lookup-results {
      position: absolute;
      top: calc(100% + 4px);
      left: 0;
      right: 0;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 10px;
      max-height: 320px;
      overflow-y: auto;
      z-index: 20;
      box-shadow: 0 8px 24px rgba(0,0,0,0.35);
    }
    .skipmon-lookup-results:empty { display: none; }
    .skipmon-lookup-result {
      display: flex; align-items: center; gap: 0.75rem;
      padding: 0.7rem 0.9rem;
      cursor: pointer;
      border-bottom: 1px solid var(--border);
      transition: background 0.15s;
    }
    .skipmon-lookup-result:last-child { border-bottom: none; }
    .skipmon-lookup-result:hover,
    .skipmon-lookup-result.active {
      background: rgba(77, 166, 255, 0.08);
    }
    .skipmon-lookup-result-logo {
      width: 32px; height: 32px; min-width: 32px;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-weight: 700; font-size: 0.8rem;
      color: #fff;
      position: relative;
      overflow: hidden;
    }
    .skipmon-lookup-result-info { flex: 1; min-width: 0; }
    .skipmon-lookup-result-name {
      font-weight: 600;
      color: var(--text-primary);
      font-size: 0.9rem;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .skipmon-lookup-result-addr {
      font-family: 'JetBrains Mono', monospace;
      color: var(--text-dim);
      font-size: 0.7rem;
    }
    .skipmon-lookup-empty {
      padding: 0.9rem;
      color: var(--text-dim);
      font-size: 0.85rem;
      text-align: center;
    }
    .skipmon-lookup-hint {
      text-align: center;
      color: var(--text-dim);
      padding: 3rem 1rem;
      font-size: 0.95rem;
    }

    /* Pulse / heartbeat row — network rhythm at a glance */
    /* Pulse row — thin status strip, not a full card. Sits between the scope
       tabs and the main stat cards as a subtle "heartbeat" line. */
    .skipmon-pulse {
      display: flex; justify-content: center; align-items: center;
      gap: 1.25rem; margin-bottom: 1rem;
      padding: 0;
      background: transparent;
      border: none;
      border-radius: 0;
      flex-wrap: wrap;
    }
    .skipmon-pulse-item {
      display: flex; align-items: baseline; gap: 0.5rem;
      font-size: 0.8rem;
    }
    .skipmon-pulse-label {
      color: var(--text-dim);
      text-transform: uppercase;
      font-size: 0.62rem; font-weight: 600; letter-spacing: 0.6px;
    }
    .skipmon-pulse-value {
      font-family: 'JetBrains Mono', monospace;
      font-weight: 600;
      color: var(--text-secondary);
      font-size: 0.85rem;
    }
    .skipmon-pulse-value.good { color: var(--success); }
    .skipmon-pulse-value.bad  { color: var(--danger); }
    .skipmon-pulse-value.dim  { color: var(--text-dim); }
    .skipmon-pulse-divider {
      width: 3px; height: 3px; border-radius: 50%;
      background: var(--border);
    }

    /* Inline live indicator that sits in the page subtitle.
       Green LIVE when running, dim IDLE when paused. No pill background. */
    .skipmon-live-inline {
      display: inline-flex; align-items: center; gap: 0.4rem;
      font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
      color: var(--success); letter-spacing: 1px;
      vertical-align: middle;
    }
    .skipmon-live-dot {
      width: 7px; height: 7px; background: var(--success);
      border-radius: 50%; animation: skipmon-pulse 1.5s ease-in-out infinite;
      flex-shrink: 0;
    }
    @keyframes skipmon-pulse {
      0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(0,230,118,0.6); }
      50%      { opacity: 0.55; box-shadow: 0 0 0 6px rgba(0,230,118,0); }
    }
    .skipmon-live-inline.paused { color: var(--text-dim); }
    .skipmon-live-inline.paused .skipmon-live-dot {
      background: var(--text-dim); animation: none;
    }
    .skipmon-subtitle-sep {
      color: var(--text-dim);
      margin: 0 0.4rem;
      opacity: 0.6;
    }
    .skipmon-subtitle-text { color: var(--text-secondary); }

    /* Scope tabs — contained in a subtle pill group so they read as a
       discrete control rather than blending into the page. The active tab
       gets a solid fill against the group's muted background. */
    .skipmon-scope {
      display: inline-flex;
      gap: 2px;
      background: rgba(20, 28, 46, 0.6);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 4px;
      box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset,
                  0 4px 18px rgba(0, 0, 0, 0.25);
    }
    .skipmon-scope-btn {
      background: transparent;
      border: none;
      color: var(--text-secondary);
      padding: 0.55rem 1.1rem;
      border-radius: 7px;
      cursor: pointer;
      font-weight: 600;
      font-size: 0.85rem;
      font-family: inherit;
      white-space: nowrap;
      transition: color 0.18s, background 0.18s;
    }
    .skipmon-scope-btn:hover { color: var(--text-primary); }
    .skipmon-scope-btn.active {
      background: rgba(0, 212, 255, 0.12);
      color: var(--accent-cyan);
      box-shadow: 0 0 0 1px rgba(0, 212, 255, 0.35) inset;
    }

    .skipmon-stats {
      display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
      margin-bottom: 1.5rem;
    }
    .skipmon-stat {
      background: var(--bg-card);
      border: 1px solid rgba(77, 166, 255, 0.35);
      border-radius: 12px;
      padding: 1.1rem 1.25rem;
      position: relative;
      overflow: hidden;
      box-shadow: 0 0 0 1px rgba(0, 212, 255, 0.05), 0 0 18px rgba(0, 212, 255, 0.04);
    }
    /* Thin cyan accent stripe across the top — echoes the epoch progress
       bar's gradient so the stat row and the progress bar feel like a set. */
    .skipmon-stat::before {
      content: '';
      position: absolute;
      left: 0; right: 0; top: 0;
      height: 2px;
      background: var(--accent-gradient);
      opacity: 0.75;
    }
    .skipmon-stat-label {
      font-size: 0.7rem; color: var(--text-secondary);
      text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600;
    }
    .skipmon-stat-value {
      font-size: 1.6rem; font-weight: 700; margin-top: 0.3rem;
      font-family: 'JetBrains Mono', monospace; line-height: 1.1;
    }
    .skipmon-stat-sub {
      font-size: 0.75rem; color: var(--text-dim); margin-top: 0.3rem;
    }
    .skipmon-stat-value.ok   { color: var(--success); }
    .skipmon-stat-value.warn { color: var(--warning); }
    .skipmon-stat-value.bad  { color: var(--danger); }

    .skipmon-main {
      display: grid; grid-template-columns: 1.4fr 1fr; gap: 1rem;
      margin-bottom: 1.5rem;
    }

    .skipmon-panel {
      background: var(--bg-card); border: 1px solid var(--border);
      border-radius: 12px; padding: 1.25rem;
    }
    .skipmon-panel-head {
      display: flex; justify-content: space-between; align-items: center;
      margin-bottom: 1rem; gap: 1rem;
    }
    .skipmon-panel-title {
      font-size: 1rem; font-weight: 700;
    }
    .skipmon-panel-meta {
      font-size: 0.75rem; color: var(--text-secondary);
      font-family: 'JetBrains Mono', monospace;
    }

    .skipmon-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, 14px);
      gap: 3px;
      max-height: 380px; overflow-y: auto;
      padding: 8px; background: var(--bg-primary); border-radius: 8px;
      border: 1px solid var(--border);
    }
    /* Base cell — transparent fill plus a subtle outline. The produced/
       skipped classes layer on top with translucent fills so the grid
       reads as a quieter data surface instead of a saturated game board. */
    .skipmon-cell {
      width: 14px; height: 14px; border-radius: 3px;
      cursor: pointer;
      transition: transform 0.1s, box-shadow 0.15s, background-color 0.15s;
      box-sizing: border-box;
    }
    .skipmon-cell:hover {
      transform: scale(1.5); z-index: 2; position: relative;
      box-shadow: 0 0 0 2px var(--bg-card);
    }
    /* Produced — cyan-teal outline with a translucent wash. Ties
       the grid into the X1 cyan palette used elsewhere in the tab. */
    .skipmon-cell.produced {
      background: rgba(64, 220, 180, 0.28);
      border: 1px solid rgba(64, 220, 180, 0.6);
    }
    /* Skipped — muted coral. Still clearly a skip, just without the
       fire-engine red glow that was dominating the original grid. */
    .skipmon-cell.skipped {
      background: rgba(255, 120, 110, 0.34);
      border: 1px solid rgba(255, 120, 110, 0.75);
      box-shadow: 0 0 4px rgba(255, 120, 110, 0.25);
    }
    .skipmon-cell.ghost {
      background: transparent;
      border: 1px dashed var(--border);
      cursor: default;
      opacity: 0.35;
    }
    .skipmon-cell.ghost:hover { transform: none; box-shadow: none; }

    /* Freshly arrived cells animate in so the grid feels alive even when
       every slot is green. Pop uses cyan for produced to echo the site
       brand color. */
    .skipmon-cell.new { animation: skipmonCellIn 0.55s ease-out both; }
    @keyframes skipmonCellIn {
      0%   { transform: scale(0.2); opacity: 0; box-shadow: 0 0 0 0 rgba(0, 229, 255, 0); }
      45%  { transform: scale(1.35); opacity: 1; box-shadow: 0 0 6px 2px rgba(0, 229, 255, 0.55); }
      100% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 0 rgba(0, 229, 255, 0); }
    }
    .skipmon-cell.skipped.new {
      /* Skip cells get a coral pop instead of cyan so a skip still reads as a skip. */
      animation-name: skipmonCellInSkip;
    }
    @keyframes skipmonCellInSkip {
      0%   { transform: scale(0.2); opacity: 0; box-shadow: 0 0 0 0 rgba(255, 120, 110, 0); }
      45%  { transform: scale(1.5); opacity: 1; box-shadow: 0 0 8px 3px rgba(255, 120, 110, 0.65); }
      100% { transform: scale(1); opacity: 1; box-shadow: 0 0 4px rgba(255, 120, 110, 0.25); }
    }

    /* ──────────────────────────────────────────────────────────
       Mini-scrubber — compact 100-bucket overview of the whole 1500-slot
       history. Each bar's color reflects that bucket's skip rate.
       Clicking a bar scrolls the main grid to that range.
       ────────────────────────────────────────────────────────── */
    .skipmon-scrubber-wrap {
      margin-top: 0.85rem;
    }
    .skipmon-scrubber-caption {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      margin-bottom: 0.35rem;
      gap: 1rem;
    }
    .skipmon-scrubber-caption-label {
      font-size: 0.63rem;
      color: var(--text-secondary);
      text-transform: uppercase;
      letter-spacing: 0.6px;
      font-weight: 600;
    }
    .skipmon-scrubber-caption-hint {
      font-size: 0.68rem;
      color: var(--text-dim);
      font-style: italic;
    }
    .skipmon-scrubber {
      display: flex;
      gap: 0;
      height: 14px;
      border-radius: 4px;
      overflow: hidden;
      background: var(--bg-primary);
      border: 1px solid var(--border);
    }
    .skipmon-scrubber:empty { display: none; }
    .skipmon-scrubber-bar {
      flex: 1;
      border: none;
      padding: 0;
      cursor: pointer;
      min-width: 0;
      transition: filter 0.12s;
    }
    .skipmon-scrubber-bar:hover {
      filter: brightness(1.45);
      outline: 1px solid rgba(255, 255, 255, 0.35);
      outline-offset: -1px;
      z-index: 1;
    }

    /* ──────────────────────────────────────────────────────────
       Epoch timeline strip — last ~6 completed epochs + the current
       partial epoch as vertical bars with gradient fills and a subtle
       glow, colored by network-wide skip rate. Lives directly under
       the leader schedule section.
       ────────────────────────────────────────────────────────── */
    .epoch-timeline {
      margin-top: 1rem;
      padding: 1rem 1.25rem;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 12px;
      display: flex;
      align-items: stretch;
      gap: 1rem;
    }
    .epoch-timeline-label {
      font-size: 0.6rem;
      color: var(--text-dim);
      text-transform: uppercase;
      letter-spacing: 0.8px;
      font-weight: 700;
      flex-shrink: 0;
      max-width: 60px;
      align-self: center;
      line-height: 1.3;
    }
    .epoch-timeline-bars {
      flex: 1;
      display: flex;
      gap: 0.6rem;
      align-items: stretch;
      min-height: 92px;
    }
    .epoch-timeline-empty {
      color: var(--text-dim);
      font-size: 0.8rem;
      text-align: center;
      width: 100%;
      align-self: center;
    }
    .epoch-timeline-bar-wrap {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      min-width: 0;
      gap: 5px;
    }
    .epoch-timeline-rate {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.72rem;
      color: var(--text-primary);
      font-weight: 600;
      line-height: 1;
      white-space: nowrap;
    }
    .epoch-timeline-rate.empty { color: var(--text-dim); }
    .epoch-timeline-col {
      width: 100%;
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      min-height: 50px;
    }
    .epoch-timeline-fill {
      width: 100%;
      border-radius: 4px 4px 0 0;
      min-height: 4px;
      transition: height 0.45s ease, box-shadow 0.3s;
      background: linear-gradient(180deg,
                  var(--bar-top, rgba(0, 212, 255, 0.9)) 0%,
                  var(--bar-bot, rgba(0, 212, 255, 0.45)) 100%);
      box-shadow: 0 -6px 20px var(--bar-glow, rgba(0, 212, 255, 0.22));
    }
    .epoch-timeline-num {
      font-size: 0.72rem;
      color: var(--text-secondary);
      font-family: 'JetBrains Mono', monospace;
      font-weight: 600;
      letter-spacing: 0.3px;
      display: flex;
      align-items: center;
      gap: 0.35rem;
    }
    .epoch-timeline-bar-wrap.is-current .epoch-timeline-num {
      color: var(--accent-cyan);
    }
    .epoch-timeline-partial {
      display: inline-flex;
      align-items: center;
      font-size: 0.54rem;
      font-weight: 700;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: var(--accent-cyan);
      padding: 2px 6px;
      border-radius: 10px;
      background: rgba(0, 212, 255, 0.12);
      box-shadow: inset 0 0 0 1px rgba(0, 212, 255, 0.35);
    }

    /* "Past 6 ↗" link in the Skip Rate · Epoch stat card — opens the
       historical timeline modal. Sits in a header row alongside the
       card label. */
    .skipmon-stat-epoch-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 0.5rem;
    }
    .skipmon-stat-link {
      background: transparent;
      border: none;
      color: var(--accent-cyan);
      font-family: inherit;
      font-size: 0.62rem;
      font-weight: 700;
      letter-spacing: 0.6px;
      text-transform: uppercase;
      cursor: pointer;
      padding: 2px 6px;
      border-radius: 4px;
      display: inline-flex;
      align-items: center;
      gap: 0.25rem;
      transition: background 0.15s, color 0.15s;
    }
    .skipmon-stat-link:hover {
      background: rgba(0, 212, 255, 0.1);
    }
    .skipmon-stat-link-arrow {
      font-size: 0.85rem;
      line-height: 1;
    }

    /* Modal variant of the epoch timeline — taller bars, more breathing
       room, plus a summary row underneath. */
    .epoch-timeline-modal {
      margin: 0;
      padding: 1.5rem;
      background: transparent;
      border: none;
    }
    .epoch-timeline-modal .epoch-timeline-bars {
      min-height: 200px;
      gap: 1rem;
    }
    .epoch-timeline-modal .epoch-timeline-label { display: none; }
    .epoch-timeline-modal .epoch-timeline-rate {
      font-size: 0.85rem;
    }
    .epoch-timeline-modal .epoch-timeline-num {
      font-size: 0.85rem;
    }
    /* Epoch modal summary — 3x2 grid of screenshot-ready stat cards.
       Matches the TPS modal's card system (cyan uppercase labels, thin
       cyan accent bar across the top) so both modals feel like siblings. */
    .epoch-timeline-summary {
      padding: 0.85rem 1.25rem 1.25rem;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0.6rem;
      border-top: 1px solid var(--border);
      margin-top: 0.35rem;
    }
    .epoch-timeline-summary-item {
      background: var(--bg-secondary);
      border: 1px solid var(--border);
      border-radius: 9px;
      padding: 0.65rem 0.85rem;
      display: flex;
      flex-direction: column;
      gap: 0.15rem;
      position: relative;
      overflow: hidden;
    }
    .epoch-timeline-summary-item::before {
      content: '';
      position: absolute;
      left: 0; right: 0; top: 0;
      height: 2px;
      background: linear-gradient(90deg, rgba(0, 212, 255, 0.55), rgba(0, 212, 255, 0.05));
    }
    .epoch-timeline-summary-label {
      font-size: 0.78rem;
      color: var(--accent-cyan);
      text-transform: uppercase;
      letter-spacing: 0.8px;
      font-weight: 700;
    }
    .epoch-timeline-summary-value {
      font-family: 'JetBrains Mono', monospace;
      font-size: 1.55rem;
      font-weight: 700;
      color: var(--text-primary);
      line-height: 1.1;
      margin-top: 0.1rem;
    }
    .epoch-timeline-summary-value.good { color: var(--success); }
    .epoch-timeline-summary-value.warn { color: var(--warning); }
    .epoch-timeline-summary-value.bad  { color: var(--danger); }
    .epoch-timeline-summary-sub {
      font-size: 0.72rem;
      color: var(--text-dim);
      font-family: 'JetBrains Mono', monospace;
      margin-top: 0.05rem;
    }

    /* ──────────────────────────────────────────────────────────
       TPS strip — low-profile horizontal sparkline with a live value
       on the left and avg/peak readouts on the right. Sits above the
       current-leader card.
       ────────────────────────────────────────────────────────── */
    .tps-strip {
      display: flex;
      align-items: center;
      gap: 1.1rem;
      height: 64px;
      padding: 0.5rem 1rem;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 10px;
      margin-top: 0.75rem;
    }
    .ver-strip {
      margin-top: 0.75rem;
      padding: 0.6rem 1rem 0.7rem;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 10px;
    }
    .ver-strip-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
    .ver-strip-label { font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); font-weight: 600; }
    .ver-strip-summary { font-size: 0.8rem; color: var(--text-secondary); }
    .ver-strip-summary b { color: var(--text-primary); font-family: 'JetBrains Mono', monospace; font-weight: 600; }
    .ver-behind { color: var(--warning); }
    .ver-bar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--bg-secondary); gap: 1px; }
    .ver-seg { height: 100%; min-width: 2px; }
    .ver-legend { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; margin-top: 0.5rem; font-size: 0.74rem; color: var(--text-secondary); }
    .ver-leg { display: inline-flex; align-items: center; gap: 0.35rem; font-family: 'JetBrains Mono', monospace; }
    .ver-leg i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
    .ver-leg b { color: var(--success); font-weight: 600; }
    .ver-leg em { color: #a78bfa; font-style: normal; }
    .ver-leg-n { color: var(--text-dim); }
    .tps-strip-head {
      display: flex;
      align-items: center;
      gap: 0.65rem;
      flex-shrink: 0;
      min-width: 180px;
    }
    /* X1 logo inside the strip — reuses the shared .x1-logo-small styling. */
    .tps-strip-logo { flex-shrink: 0; }
    .tps-strip-head-labels {
      display: flex;
      flex-direction: column;
      gap: 2px;
      min-width: 0;
    }
    .tps-strip-label {
      font-size: 0.6rem;
      font-weight: 700;
      letter-spacing: 0.6px;
      text-transform: uppercase;
      color: var(--text-dim);
      white-space: nowrap;
    }
    .tps-strip-value-row {
      display: flex;
      align-items: baseline;
      gap: 0.45rem;
    }
    .tps-strip-value {
      font-family: 'JetBrains Mono', monospace;
      font-size: 1.25rem;
      font-weight: 700;
      color: var(--accent-cyan);
      line-height: 1;
    }
    .tps-strip-trend {
      font-size: 0.7rem;
      font-weight: 600;
      color: var(--text-dim);
      font-family: 'JetBrains Mono', monospace;
      white-space: nowrap;
    }
    .tps-strip-trend.up   { color: var(--success); }
    .tps-strip-trend.down { color: var(--danger); }
    .tps-strip-chart {
      flex: 1;
      height: 100%;
      min-width: 0;
      position: relative;
    }
    .tps-spark-svg {
      width: 100%;
      height: 100%;
      display: block;
    }
    .tps-strip-stats {
      display: flex;
      gap: 0.85rem;
      align-items: center;
      flex-shrink: 0;
    }
    .tps-strip-stat {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 1px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.78rem;
      color: var(--text-secondary);
      font-weight: 600;
    }
    .tps-strip-stat-label {
      font-size: 0.55rem;
      color: var(--text-dim);
      text-transform: uppercase;
      letter-spacing: 0.7px;
      font-weight: 700;
      font-family: 'Space Grotesk', sans-serif;
    }
    .tps-strip-expand {
      background: rgba(77, 166, 255, 0.08);
      border: 1px solid rgba(77, 166, 255, 0.45);
      color: var(--accent-blue);
      border-radius: 6px;
      padding: 0.4rem;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: color 0.15s, border-color 0.15s, background 0.15s, box-shadow 0.15s;
    }
    .tps-strip-expand:hover {
      color: var(--accent-cyan);
      border-color: var(--accent-cyan);
      background: rgba(0, 212, 255, 0.15);
      box-shadow: 0 0 10px rgba(0, 212, 255, 0.25);
    }
    .tps-strip-empty {
      color: var(--text-dim);
      font-size: 0.8rem;
      font-style: italic;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
    }

    /* TPS expanded modal — same chart, much bigger, with axis guide lines
       and sample-granular hover. */
    .tps-modal-chart-wrap {
      padding: 1.5rem;
      position: relative;
    }
    .tps-modal-chart {
      position: relative;
      width: 100%;
      height: 280px;
    }
    .tps-modal-chart .tps-spark-svg {
      height: 100%;
    }
    .tps-modal-grid-line {
      position: absolute;
      left: 0; right: 0;
      border-top: 1px dashed rgba(255, 255, 255, 0.06);
      pointer-events: none;
    }
    .tps-modal-grid-label {
      position: absolute;
      right: 0;
      transform: translateY(-50%);
      font-size: 0.62rem;
      color: var(--text-dim);
      font-family: 'JetBrains Mono', monospace;
      background: var(--bg-card);
      padding: 0 4px;
    }
    .tps-modal-stats-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0.6rem;
      padding: 0.75rem 1.25rem 1.25rem;
      border-top: 1px solid var(--border);
      margin-top: 0.25rem;
    }
    .tps-modal-card {
      background: var(--bg-secondary);
      border: 1px solid var(--border);
      border-radius: 9px;
      padding: 0.65rem 0.85rem;
      display: flex;
      flex-direction: column;
      gap: 0.15rem;
      position: relative;
      overflow: hidden;
    }
    /* Thin accent bar across the top — subtle cyan line so the cards feel
       like proper data tiles rather than empty boxes. */
    .tps-modal-card::before {
      content: '';
      position: absolute;
      left: 0; right: 0; top: 0;
      height: 2px;
      background: linear-gradient(90deg, rgba(0,212,255,0.55), rgba(0,212,255,0.05));
    }
    .tps-modal-card-label {
      font-size: 0.78rem;
      color: var(--accent-cyan);
      text-transform: uppercase;
      letter-spacing: 0.8px;
      font-weight: 700;
    }
    .tps-modal-card-value {
      font-family: 'JetBrains Mono', monospace;
      font-size: 1.55rem;
      font-weight: 700;
      color: var(--text-primary);
      line-height: 1.1;
      margin-top: 0.1rem;
    }
    .tps-modal-card-value.peak { color: var(--success); }
    .tps-modal-card-value.low  { color: var(--warning); }
    .tps-modal-card-sub {
      font-size: 0.72rem;
      color: var(--text-dim);
      font-family: 'JetBrains Mono', monospace;
      margin-top: 0.05rem;
    }
    .tps-modal-card-sub.up   { color: var(--success); }
    .tps-modal-card-sub.down { color: var(--danger); }
    .tps-modal-axis {
      display: flex;
      justify-content: space-between;
      padding: 0.35rem 1.5rem 0;
      font-size: 0.72rem;
      color: var(--text-secondary);
      font-family: 'JetBrains Mono', monospace;
      font-weight: 500;
    }

    /* ──────────────────────────────────────────────────────────── */
    /*  TPS modal — bar hover/click tooltip + tx hash display        */
    /* ──────────────────────────────────────────────────────────── */

    /* Tooltip host — overlays the chart container. Tooltip is positioned
       absolutely inside this host, which sits in the same coordinate
       system as .tps-modal-chart (both children of -chart-wrap, which is
       position:relative). */
    .tps-modal-tooltip-host {
      position: absolute;
      top: 1.5rem;
      left: 1.5rem;
      right: 1.5rem;
      height: 280px;
      pointer-events: none;
      z-index: 5;
    }

    .tps-tooltip {
      position: absolute;
      bottom: calc(100% + 12px);
      transform: translateX(-50%);
      pointer-events: none;
      z-index: 10;
      background: linear-gradient(180deg, rgba(15, 22, 35, 0.98) 0%, rgba(8, 12, 22, 0.99) 100%);
      border: 1px solid rgba(0, 212, 255, 0.25);
      border-radius: 8px;
      padding: 8px 12px;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 212, 255, 0.05) inset;
      white-space: nowrap;
      animation: tps-tip-fade 0.12s ease-out;
    }

    /* Edge clamping — keeps tooltip from spilling off chart bounds */
    .tps-tooltip[data-edge="left"]  { transform: translateX(-12%); }
    .tps-tooltip[data-edge="right"] { transform: translateX(-88%); }

    /* Caret pointing down at bar */
    .tps-tooltip::after {
      content: '';
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
      border: 5px solid transparent;
      border-top-color: rgba(15, 22, 35, 0.98);
      filter: drop-shadow(0 1px 0 rgba(0, 212, 255, 0.25));
    }
    .tps-tooltip[data-edge="left"]::after  { left: 12%; }
    .tps-tooltip[data-edge="right"]::after { left: 88%; }

    /* Flip below — for pinned tooltips (always) and tall bars (clip-prone) */
    .tps-tooltip[data-flip="below"] {
      bottom: auto;
      top: calc(100% + 12px);
      animation-name: tps-tip-fade-below !important;
    }
    .tps-tooltip[data-flip="below"]::after {
      top: auto;
      bottom: 100%;
      border-top-color: transparent;
      border-bottom-color: rgba(15, 22, 35, 0.98);
      filter: drop-shadow(0 -1px 0 rgba(0, 212, 255, 0.25));
    }

    .tps-tooltip-tps {
      font-family: 'Space Grotesk', sans-serif;
      font-size: 15px;
      font-weight: 700;
      color: var(--accent-cyan);
      letter-spacing: 0.01em;
      margin-bottom: 6px;
    }

    .tps-tooltip-time,
    .tps-tooltip-time-local {
      font-family: 'JetBrains Mono', monospace;
      font-size: 13px;
      color: rgba(255, 255, 255, 0.85);
      line-height: 1.5;
      letter-spacing: 0.02em;
    }
    .tps-tooltip-time-local { color: rgba(255, 255, 255, 0.55); }

    .tps-tooltip-tz {
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.45);
      margin-left: 4px;
    }

    .tps-tooltip-hint {
      margin-top: 6px;
      padding-top: 6px;
      border-top: 1px dashed rgba(255, 255, 255, 0.08);
      font-size: 9.5px;
      color: rgba(255, 255, 255, 0.35);
      letter-spacing: 0.04em;
      text-transform: uppercase;
      font-family: 'Space Grotesk', sans-serif;
    }

    @keyframes tps-tip-fade {
      from { opacity: 0; transform: translateX(-50%) translateY(4px); }
      to   { opacity: 1; transform: translateX(-50%) translateY(0); }
    }
    @keyframes tps-tip-fade-below {
      from { opacity: 0; transform: translateX(-50%) translateY(-4px); }
      to   { opacity: 1; transform: translateX(-50%) translateY(0); }
    }

    /* Pinned variant — interactive, taller, brighter border */
    .tps-tooltip-pinned {
      pointer-events: auto;
      min-width: 240px;
      border-color: rgba(0, 212, 255, 0.45);
      box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 212, 255, 0.12) inset;
      padding: 10px 14px 12px;
    }

    .tps-tooltip-close {
      position: absolute;
      top: 4px;
      right: 6px;
      width: 18px;
      height: 18px;
      border: none;
      background: transparent;
      color: rgba(255, 255, 255, 0.5);
      font-size: 16px;
      line-height: 1;
      cursor: pointer;
      padding: 0;
      border-radius: 4px;
      transition: background 0.12s, color 0.12s;
    }
    .tps-tooltip-close:hover {
      color: #fff;
      background: rgba(255, 255, 255, 0.08);
    }

    .tps-tooltip-fetch-btn {
      margin-top: 8px;
      padding: 6px 10px;
      width: 100%;
      border: 1px solid rgba(0, 212, 255, 0.4);
      background: rgba(0, 212, 255, 0.08);
      color: var(--accent-cyan);
      font-family: 'Space Grotesk', sans-serif;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      border-radius: 5px;
      cursor: pointer;
      transition: background 0.15s, border-color 0.15s;
    }
    .tps-tooltip-fetch-btn:hover {
      background: rgba(0, 212, 255, 0.16);
      border-color: rgba(0, 212, 255, 0.6);
    }

    .tps-tooltip-tx-loading,
    .tps-tooltip-tx-error {
      margin-top: 8px;
      padding: 8px 10px;
      font-size: 11px;
      font-family: 'JetBrains Mono', monospace;
      border-radius: 5px;
      text-align: center;
    }
    .tps-tooltip-tx-loading {
      color: rgba(0, 212, 255, 0.85);
      background: rgba(0, 212, 255, 0.06);
      border: 1px solid rgba(0, 212, 255, 0.15);
    }
    .tps-tooltip-tx-error {
      color: rgba(255, 180, 100, 0.9);
      background: rgba(255, 180, 100, 0.05);
      border: 1px solid rgba(255, 180, 100, 0.18);
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .tps-tooltip-retry-btn {
      align-self: center;
      border: 1px solid rgba(255, 180, 100, 0.4);
      background: transparent;
      color: rgba(255, 180, 100, 0.95);
      font-family: 'Space Grotesk', sans-serif;
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      padding: 3px 10px;
      border-radius: 4px;
      cursor: pointer;
    }
    .tps-tooltip-retry-btn:hover {
      background: rgba(255, 180, 100, 0.1);
    }

    .tps-tooltip-tx-block {
      margin-top: 8px;
      padding-top: 8px;
      border-top: 1px solid rgba(255, 255, 255, 0.06);
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .tps-tx-row {
      display: grid;
      grid-template-columns: 38px 1fr 24px;
      align-items: center;
      gap: 8px;
      padding: 3px 0;
      font-family: 'JetBrains Mono', monospace;
    }
    .tps-tx-row-empty .tps-tx-missing {
      font-size: 10px;
      color: rgba(255, 255, 255, 0.4);
      font-style: italic;
    }

    .tps-tx-label {
      font-size: 9.5px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: rgba(255, 255, 255, 0.45);
      font-family: 'Space Grotesk', sans-serif;
    }

    .tps-tx-sig {
      font-size: 11px;
      color: rgba(255, 255, 255, 0.85);
      text-decoration: none;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      transition: color 0.12s;
      border-bottom: 1px dashed transparent;
    }
    .tps-tx-sig:hover {
      color: var(--accent-cyan);
      border-bottom-color: rgba(0, 212, 255, 0.4);
    }

    .tps-tx-copy {
      width: 22px;
      height: 22px;
      border: 1px solid rgba(255, 255, 255, 0.1);
      background: rgba(255, 255, 255, 0.03);
      color: rgba(255, 255, 255, 0.6);
      font-size: 12px;
      line-height: 1;
      padding: 0;
      border-radius: 4px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.12s, color 0.12s, border-color 0.12s;
    }
    .tps-tx-copy:hover {
      background: rgba(0, 212, 255, 0.1);
      border-color: rgba(0, 212, 255, 0.4);
      color: var(--accent-cyan);
    }

    /* Scorecard modal — wide enough to hold the full Last Epoch / Current
       Epoch side-by-side scorecard without shrinking the inner panels. */
    .skipmon-scorecard-modal { max-width: 900px; }
    .skipmon-scorecard-body  { padding: 1.25rem; overflow: auto; }
    /* The scorecard card renders with its own header + border; keep modal
       chrome minimal so the card's own styling leads. */
    .skipmon-scorecard-body > .skipmon-pv-card {
      margin: 0;
    }

    .skipmon-legend {
      display: flex; gap: 1.25rem; flex-wrap: wrap;
      font-size: 0.72rem; color: var(--text-secondary);
      margin-top: 0.85rem; align-items: center;
    }
    .skipmon-legend-item {
      display: flex; align-items: center; gap: 0.4rem;
    }
    .skipmon-legend-pip {
      width: 10px; height: 10px; border-radius: 2px;
    }
    .skipmon-legend-note {
      color: var(--text-dim); font-style: italic;
    }

    .skipmon-feed {
      max-height: 400px; overflow-y: auto;
      display: flex; flex-direction: column; gap: 0.5rem;
    }
    .skipmon-feed-item {
      display: flex; align-items: center; gap: 0.75rem;
      padding: 0.65rem 0.8rem;
      background: rgba(255, 82, 82, 0.04);
      border: 1px solid rgba(255, 82, 82, 0.15);
      border-radius: 8px;
      animation: skipmon-gentle-in 0.2s ease-out;
      cursor: pointer;
      transition: background 0.15s, border-color 0.15s;
    }
    .skipmon-feed-item:hover {
      background: rgba(255, 82, 82, 0.08);
      border-color: rgba(255, 82, 82, 0.3);
    }
    @keyframes skipmon-gentle-in {
      from { opacity: 0; transform: translateY(-3px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .skipmon-feed-logo {
      position: relative;
      width: 32px; height: 32px; border-radius: 50%;
      background: var(--bg-primary); flex-shrink: 0;
      display: inline-flex; align-items: center; justify-content: center;
      font-weight: 700; font-size: 0.8rem; color: var(--accent-blue);
      overflow: hidden;
    }
    .skipmon-feed-logo img {
      width: 100%; height: 100%; object-fit: cover;
    }
    .skipmon-feed-body {
      flex: 1; min-width: 0;
      display: flex; flex-direction: column; gap: 0.15rem;
    }
    .skipmon-feed-top {
      display: flex; align-items: center; gap: 0.5rem; min-width: 0;
    }
    .skipmon-feed-name {
      font-weight: 600; font-size: 0.88rem; color: var(--text-primary);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      flex: 1; min-width: 0;
    }
    .skipmon-feed-badge {
      font-size: 0.6rem; font-weight: 700; letter-spacing: 0.5px;
      padding: 0.12rem 0.45rem; border-radius: 3px;
      background: rgba(255, 82, 82, 0.2); color: var(--danger);
      text-transform: uppercase; flex-shrink: 0;
    }
    .skipmon-feed-meta {
      font-size: 0.72rem; color: var(--text-secondary);
      font-family: 'JetBrains Mono', monospace;
    }
    .skipmon-feed-time-right {
      font-family: 'JetBrains Mono', monospace;
      color: var(--text-dim); font-size: 0.75rem; flex-shrink: 0;
    }

    /* Top skippers expand/collapse control */
    .skipmon-top-expand {
      text-align: center;
      margin-top: 0.85rem;
    }
    .skipmon-top-expand-btn {
      background: transparent;
      border: 1px solid var(--border);
      color: var(--accent-cyan);
      padding: 0.5rem 1rem;
      border-radius: 8px;
      cursor: pointer;
      font-size: 0.8rem;
      font-weight: 600;
      font-family: inherit;
      transition: all 0.2s;
    }
    .skipmon-top-expand-btn:hover {
      background: var(--bg-card-hover);
      color: var(--accent-cyan);
      border-color: var(--accent-cyan);
    }

    .skipmon-empty {
      padding: 2.5rem 1rem; text-align: center;
      color: var(--text-dim); font-size: 0.85rem;
    }

    .skipmon-top-table { width: 100%; border-collapse: collapse; }
    .skipmon-top-table th {
      text-align: left; padding: 0.65rem 0.75rem;
      font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.5px;
      color: var(--text-secondary);
      border-bottom: 1px solid var(--border); font-weight: 600;
    }
    /* Dotted underline + help cursor on any column header that carries a
       native title attribute — makes the tooltips discoverable without
       adding visual weight. */
    .skipmon-top-table th[title] {
      cursor: help;
      border-bottom: 1px solid var(--border);
      text-decoration: underline dotted rgba(255,255,255,0.18);
      text-underline-offset: 3px;
    }
    .skipmon-top-table td {
      padding: 0.75rem 0.75rem;
      border-bottom: 1px solid var(--border);
      font-size: 0.88rem;
    }
    .skipmon-top-table tr:last-child td { border-bottom: none; }
    .skipmon-top-table tbody tr {
      cursor: pointer; transition: background 0.15s;
    }
    .skipmon-top-table tbody tr:hover { background: var(--bg-card-hover); }

    .skipmon-top-rank {
      display: inline-flex; align-items: center; justify-content: center;
      width: 26px; height: 26px; border-radius: 50%;
      background: var(--bg-primary); color: var(--text-secondary);
      font-weight: 700; font-size: 0.75rem;
    }
    .skipmon-top-rank.gold { background: var(--accent-gold); color: var(--bg-primary); }

    .skipmon-top-name {
      display: flex; align-items: center; gap: 0.65rem; font-weight: 600;
    }
    .skipmon-top-logo {
      position: relative;
      width: 26px; height: 26px; border-radius: 50%;
      background: var(--bg-primary);
      display: inline-flex; align-items: center; justify-content: center;
      font-weight: 700; font-size: 0.75rem; color: var(--accent-blue);
      overflow: hidden; flex-shrink: 0;
    }
    .skipmon-top-logo img {
      width: 100%; height: 100%; object-fit: cover;
    }

    .skipmon-bar-track {
      position: relative; height: 6px;
      background: var(--bg-primary); border-radius: 3px;
      overflow: hidden;
    }
    .skipmon-bar-fill {
      height: 100%; background: var(--danger);
      border-radius: 3px; transition: width 0.3s;
    }

    /* ──────────────────────────────────────────────────────────
       Per-row sparkline — the last N leader slots for this validator,
       rendered as 4px colored pips in a row. Sits in the "Recent" column
       of the Top Skippers table.
       ────────────────────────────────────────────────────────── */
    .skipmon-spark {
      display: flex;
      gap: 2px;
      align-items: center;
      flex-wrap: nowrap;
    }
    .skipmon-spark-pip {
      width: 4px;
      height: 10px;
      border-radius: 1px;
      flex-shrink: 0;
    }
    .skipmon-spark-pip.produced { background: var(--success); opacity: 0.85; }
    .skipmon-spark-pip.skipped  { background: var(--danger); }
    .skipmon-spark-empty {
      color: var(--text-dim); font-size: 0.75rem;
    }

    /* Epoch stat card with split (This | Previous) + delta footer */
    .skipmon-stat-epoch-row {
      display: flex;
      align-items: flex-end;
      gap: 0.9rem;
      margin-top: 0.35rem;
    }
    .skipmon-stat-epoch-col {
      flex: 1;
      display: flex;
      flex-direction: column;
      min-width: 0;
    }
    .skipmon-stat-epoch-col-label {
      font-size: 0.62rem;
      color: var(--text-dim);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      font-weight: 600;
      line-height: 1;
      margin-top: 0.3rem;
    }
    .skipmon-stat-epoch-col-value {
      font-family: 'JetBrains Mono', monospace;
      font-size: 1.6rem;
      font-weight: 700;
      line-height: 1.1;
      color: var(--text-primary);
    }
    .skipmon-stat-epoch-col-value.ok   { color: var(--success); }
    .skipmon-stat-epoch-col-value.warn { color: var(--warning); }
    .skipmon-stat-epoch-col-value.bad  { color: var(--danger); }
    .skipmon-stat-epoch-col-prev .skipmon-stat-epoch-col-value {
      color: var(--text-secondary);
      font-size: 1.6rem;
    }

    /* Live horizontal timeline */
    .skipmon-timeline-panel {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 1rem 1.25rem;
      margin-bottom: 1.5rem;
      /* Single source of truth for NOW position on the strip + scale row. */
      --sm-tl-now-pos: 85%;
    }
    .skipmon-timeline-head {
      display: flex;
      align-items: center;
      gap: 1rem;
      margin-bottom: 0.75rem;
      flex-wrap: wrap;
    }
    .skipmon-timeline-title {
      font-size: 0.95rem;
      font-weight: 700;
    }
    .skipmon-timeline-meta {
      font-size: 0.73rem;
      color: var(--text-secondary);
      font-family: 'JetBrains Mono', monospace;
    }
    .skipmon-timeline-legend {
      display: flex;
      gap: 0.9rem;
      margin-left: auto;
      font-size: 0.7rem;
      color: var(--text-secondary);
      flex-wrap: wrap;
    }
    .sm-tl-leg {
      display: inline-flex;
      align-items: center;
      gap: 0.3rem;
    }
    .sm-tl-leg-pip {
      width: 10px;
      height: 10px;
      border-radius: 2px;
    }
    .sm-tl-leg-pip.produced { background: var(--success); opacity: 0.85; }
    .sm-tl-leg-pip.skipped  { background: var(--danger); box-shadow: 0 0 4px rgba(255,82,82,0.6); }
    .sm-tl-leg-pip.current  { background: var(--accent-cyan); box-shadow: 0 0 5px var(--accent-cyan); }
    .sm-tl-leg-pip.upcoming { border: 1px solid var(--accent-blue); background: rgba(77,166,255,0.1); }

    .skipmon-timeline-track {
      position: relative;
      display: flex;
      gap: 2px;
      height: 48px;
      padding: 5px;
      background: var(--bg-primary);
      border-radius: 8px;
      overflow: hidden;
    }
    .skipmon-timeline-track::after {
      /* center "now" marker line — position matches PAST/FUTURE ratio in renderTimeline */
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      left: var(--sm-tl-now-pos);
      width: 2px;
      margin-left: -1px;
      background: var(--accent-cyan);
      opacity: 0.25;
      pointer-events: none;
      z-index: 1;
    }
    .sm-tl-cell {
      flex: 1 1 0;
      min-width: 5px;
      border-radius: 2px;
      cursor: pointer;
      transition: transform 0.15s;
      position: relative;
      z-index: 2;
    }
    .sm-tl-cell:hover {
      transform: scaleY(1.18);
    }
    .sm-tl-cell.produced { background: var(--success); opacity: 0.8; }
    .sm-tl-cell.skipped  { background: var(--danger); box-shadow: 0 0 6px rgba(255,82,82,0.6); }
    .sm-tl-cell.unknown  { background: var(--border); opacity: 0.3; }
    .sm-tl-cell.pending  {
      /* Slots between lastProcessedSlot and current head: assigned, waiting
         for confirmation. Styled to read as "in flight", not dead space. */
      background: rgba(0, 212, 255, 0.22);
      border: 1px solid rgba(0, 212, 255, 0.35);
      animation: skipmon-tl-pending 1.4s ease-in-out infinite;
    }
    @keyframes skipmon-tl-pending {
      0%, 100% { opacity: 0.65; }
      50%      { opacity: 1; }
    }
    .sm-tl-cell.current  {
      background: var(--accent-cyan);
      box-shadow: 0 0 10px var(--accent-cyan);
      animation: skipmon-tl-pulse 1s ease-in-out infinite;
    }
    @keyframes skipmon-tl-pulse {
      0%, 100% { opacity: 1; }
      50%      { opacity: 0.55; }
    }
    .sm-tl-cell.upcoming {
      border: 1px solid rgba(77, 166, 255, 0.35);
      background: rgba(77, 166, 255, 0.08);
    }
    .sm-tl-cell.upcoming-next {
      border-color: var(--accent-blue);
      background: rgba(77, 166, 255, 0.25);
    }
    .sm-tl-cell.portfolio-mine {
      /* In portfolio scope, the user's own upcoming slots glow */
      box-shadow: 0 0 8px var(--accent-gold);
      border-color: var(--accent-gold);
      background: rgba(240, 185, 11, 0.18);
    }

    .skipmon-timeline-scale {
      position: relative;
      display: flex;
      justify-content: space-between;
      margin-top: 0.45rem;
      font-size: 0.65rem;
      color: var(--text-dim);
      font-family: 'JetBrains Mono', monospace;
    }
    .skipmon-timeline-scale .sm-tl-scale-now {
      position: absolute;
      left: var(--sm-tl-now-pos);
      transform: translateX(-50%);
      color: var(--accent-cyan);
    }

    /* Portfolio view: per-validator scorecards (shown only in portfolio scope) */
    .skipmon-portfolio-view { /* visibility controlled by mode classes below */ }

    .skipmon-pv-head-row {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      margin-bottom: 1rem;
      padding: 0 0.25rem;
      gap: 1rem;
    }
    .skipmon-pv-head-title {
      font-size: 1.05rem;
      font-weight: 700;
    }
    .skipmon-pv-head-meta {
      font-size: 0.75rem;
      color: var(--text-secondary);
      font-family: 'JetBrains Mono', monospace;
    }

    .skipmon-portfolio-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1rem;
    }
    .skipmon-pv-card {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 1.15rem;
      transition: border-color 0.15s, box-shadow 0.15s;
    }
    .skipmon-pv-card:hover {
      border-color: var(--accent-blue);
      box-shadow: 0 4px 20px rgba(77, 166, 255, 0.1);
    }
    .skipmon-pv-card.delinquent {
      border-color: rgba(255, 82, 82, 0.35);
    }
    .skipmon-pv-head {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      cursor: pointer;
      padding-bottom: 0.9rem;
      border-bottom: 1px solid var(--border);
    }
    .skipmon-pv-logo {
      position: relative;
      width: 44px; height: 44px;
      border-radius: 50%;
      background: var(--bg-primary);
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 1rem;
      color: #fff;
      overflow: hidden;
    }
    .skipmon-pv-logo img {
      width: 100%; height: 100%; object-fit: cover;
    }
    .skipmon-pv-meta { flex: 1; min-width: 0; }
    .skipmon-pv-name {
      font-weight: 700;
      font-size: 1.05rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      color: var(--text-primary);
    }
    .skipmon-pv-addr {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.72rem;
      color: var(--text-dim);
      margin-top: 0.15rem;
    }
    .skipmon-pv-chevron {
      color: var(--text-dim);
      font-size: 1.5rem;
      line-height: 1;
      transition: color 0.15s, transform 0.15s;
    }
    .skipmon-pv-head:hover .skipmon-pv-chevron {
      color: var(--accent-blue);
      transform: translateX(3px);
    }
    .skipmon-pv-badge-delinquent {
      display: inline-block;
      font-size: 0.6rem;
      font-weight: 700;
      letter-spacing: 0.5px;
      padding: 0.12rem 0.45rem;
      border-radius: 3px;
      background: rgba(255, 82, 82, 0.2);
      color: var(--danger);
      text-transform: uppercase;
      margin-left: 0.5rem;
      vertical-align: middle;
    }

    /* Two epoch panels side-by-side inside each portfolio card */
    .skipmon-pv-epochs {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
      margin-top: 1rem;
    }
    .skipmon-pv-epoch-panel {
      background: var(--bg-primary);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 0.95rem 1rem;
    }
    .skipmon-pv-epoch-panel.current {
      border-color: rgba(77, 166, 255, 0.35);
    }
    .skipmon-pv-epoch-header {
      font-size: 0.7rem;
      color: var(--text-secondary);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 0.85rem;
      display: flex;
      align-items: baseline;
      gap: 0.45rem;
    }
    .skipmon-pv-epoch-header .epoch-num {
      color: var(--accent-cyan);
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.8rem;
      text-transform: none;
      letter-spacing: 0;
    }

    .skipmon-pv-epoch-stats {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0.4rem;
      margin-bottom: 0.9rem;
    }
    .skipmon-pv-stat {
      background: var(--bg-card);
      padding: 0.55rem 0.45rem;
      border-radius: 6px;
      text-align: center;
    }
    .skipmon-pv-stat-label {
      font-size: 0.58rem;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: var(--text-secondary);
      margin-bottom: 0.25rem;
      font-weight: 600;
    }
    .skipmon-pv-stat-value {
      font-family: 'JetBrains Mono', monospace;
      font-size: 1rem;
      font-weight: 700;
      color: var(--text-primary);
      line-height: 1.1;
    }
    .skipmon-pv-stat-value.danger { color: var(--danger); }
    .skipmon-pv-stat-value.ok     { color: var(--success); }
    .skipmon-pv-stat-value.warn   { color: var(--warning); }

    .skipmon-pv-bar-wrap { margin-bottom: 0.9rem; }
    .skipmon-pv-bar-labels {
      display: flex; justify-content: space-between;
      font-size: 0.7rem;
      color: var(--text-secondary);
      margin-bottom: 0.35rem;
    }
    .skipmon-pv-bar-track {
      height: 6px;
      background: var(--bg-card);
      border-radius: 3px;
      overflow: hidden;
      display: flex;
    }
    .skipmon-pv-bar-fill-produced {
      height: 100%;
      background: var(--success);
      transition: width 0.3s;
    }
    .skipmon-pv-bar-fill-skipped {
      height: 100%;
      background: var(--danger);
    }

    .skipmon-pv-info-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0.4rem;
      margin-bottom: 0.9rem;
    }
    .skipmon-pv-info-cell {
      background: var(--bg-card);
      padding: 0.5rem 0.55rem;
      border-radius: 6px;
    }
    .skipmon-pv-info-label {
      font-size: 0.58rem;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: var(--text-secondary);
      font-weight: 600;
      margin-bottom: 0.2rem;
    }
    .skipmon-pv-info-value {
      font-family: 'JetBrains Mono', monospace;
      font-weight: 700;
      color: var(--accent-cyan);
      font-size: 0.85rem;
    }
    .skipmon-pv-info-box {
      background: var(--bg-card);
      padding: 0.7rem 0.8rem;
      border-radius: 6px;
      font-size: 0.75rem;
      color: var(--text-secondary);
      text-align: center;
      margin-bottom: 0.9rem;
    }

    .skipmon-pv-tl-wrap { }
    .skipmon-pv-tl-label {
      font-size: 0.58rem;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: var(--text-secondary);
      margin-bottom: 0.4rem;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 0.6rem;
      flex-wrap: wrap;
    }
    .skipmon-pv-tl-leg {
      display: inline-flex;
      align-items: center;
      gap: 0.25rem;
      text-transform: none;
      letter-spacing: 0;
      font-weight: 500;
    }
    .skipmon-pv-tl-leg .skipmon-pv-pip {
      width: 8px;
      height: 8px;
    }
    .skipmon-pv-tl {
      display: flex;
      gap: 2px;
      flex-wrap: wrap;
    }
    .skipmon-pv-pip {
      width: 11px;
      height: 11px;
      border-radius: 2px;
      flex-shrink: 0;
    }
    .skipmon-pv-pip.produced { background: var(--success); opacity: 0.85; }
    .skipmon-pv-pip.skipped  { background: var(--danger); box-shadow: 0 0 4px rgba(255,82,82,0.5); }
    .skipmon-pv-pip.upcoming { border: 1px dashed rgba(77,166,255,0.6); background: transparent; }

    @media (max-width: 760px) {
      .skipmon-pv-epochs { grid-template-columns: 1fr; }
      .skipmon-pv-epoch-stats { grid-template-columns: repeat(2, 1fr); }
    }

    /* Mode gating — show only the layout that matches the active scope.
       The Validator Lookup mode reuses the portfolio-view wrapper (same wide
       cards) but feeds it a single searched validator instead of the
       user's portfolio. So "lookup" hides the same things as "portfolio"
       and additionally hides the portfolio-specific header row. */
    .skipmon-mode-portfolio .skipmon-main,
    .skipmon-mode-portfolio .skipmon-top-panel,
    .skipmon-mode-lookup    .skipmon-main,
    .skipmon-mode-lookup    .skipmon-top-panel,
    .skipmon-mode-lookup    .skipmon-pulse,
    .skipmon-mode-lookup    .skipmon-stats {
      display: none;
    }
    .skipmon-mode-network  .skipmon-portfolio-view,
    .skipmon-mode-network  .skipmon-lookup-view,
    .skipmon-mode-portfolio .skipmon-lookup-view,
    .skipmon-mode-lookup    .skipmon-portfolio-view {
      display: none;
    }

    @media (max-width: 900px) {
      .skipmon-stats { grid-template-columns: repeat(2, 1fr); }
      /* minmax(0, …): with a plain 1fr the auto-fill slot grid's intrinsic width
         (1,500 cells) set the track's minimum and pushed the panel past the screen */
      .skipmon-main  { grid-template-columns: minmax(0, 1fr); }
      .skipmon-panel { min-width: 0; }
      .skipmon-header { align-items: flex-start; }
    }
    /* Phones (2026-10-13): three things pushed the Network tab wider than the
       screen or clipped inside their tile — the scope pill group (nowrap, 434 px),
       the 8-digit slot number at 1.6rem, and the Top Skippers table whose fixed
       column widths alone add up to 378 px. */
    @media (max-width: 560px) {
      .skipmon-scope { display: flex; width: 100%; box-sizing: border-box; }
      .skipmon-scope-btn {
        flex: 1 1 0; min-width: 0; padding: 0.5rem 0.3rem; font-size: 0.78rem;
        white-space: normal; line-height: 1.2;
      }
      .skipmon-stats { gap: 0.6rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .skipmon-stat { padding: 0.9rem 0.85rem; min-width: 0; }
      .skipmon-stat-value { font-size: clamp(1rem, 5.5vw, 1.6rem); }
      .skipmon-stat-epoch-row { gap: 0.6rem; }
      .skipmon-stat-epoch-col-value,
      .skipmon-stat-epoch-col-prev .skipmon-stat-epoch-col-value { font-size: clamp(0.95rem, 4.6vw, 1.6rem); }
      /* TPS strip: head (min-width 180) + stats (131) + gaps no longer fit in 343 px */
      .tps-strip { gap: 0.6rem; padding: 0.5rem 0.7rem; }
      .tps-strip-head { min-width: 0; }
      .tps-strip-stats { gap: 0.5rem; }
      #skipmonTopWrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
      .skipmon-top-table { table-layout: fixed; }
      .skipmon-top-table th, .skipmon-top-table td { padding: 0.55rem 0.4rem; font-size: 0.8rem; }
      .skipmon-top-table th { font-size: 0.62rem; letter-spacing: 0.3px; }
      .skipmon-top-table th[style] { width: auto !important; }
      .skipmon-top-table th:nth-child(1) { width: 34px !important; }
      .skipmon-top-table th:nth-child(4) { width: 64px !important; }
      .skipmon-top-table th:nth-child(5) { width: 70px !important; }
      /* "Assigned" is implied by Skipped ÷ Skip Rate — dropped on phones */
      .skipmon-top-table th:nth-child(3), .skipmon-top-table td:nth-child(3) { display: none; }
      .skipmon-top-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    }

    /* ═══════════════════════════════════════════════════════
       VALIDATOR TERMINAL — Bloomberg-style overlay
       All classes prefixed .vt- to avoid clobbering site CSS
       ═══════════════════════════════════════════════════════ */

    /* Validator Terminal panel — lives inside a .tab-content wrapper so it
       flows with the page like every other tab. Kept as the offset parent
       for legacy descendants, though the tooltip is now position:fixed and
       doesn't depend on it. */
    .vt-overlay {
      position: relative;
      font-family: 'Space Grotesk', system-ui, sans-serif;
      font-size: 12px;
      line-height: 1.45;
      color: var(--text-primary);
      -webkit-font-smoothing: antialiased;
      --vt-bg: var(--bg-primary);
      --vt-bg-1: var(--bg-secondary);
      --vt-bg-2: var(--bg-card);
      --vt-panel: var(--bg-card);
      --vt-grid: var(--border);
      --vt-grid-2: rgba(77, 166, 255, 0.35);
      --vt-text: var(--text-primary);
      --vt-dim: var(--text-secondary);
      --vt-muted: var(--text-dim);
      --vt-hl: #ffffff;
      --vt-amber: var(--accent-cyan);
      --vt-amber-2: var(--accent-blue);
      --vt-cyan: var(--accent-cyan);
      --vt-green: var(--success);
      --vt-red: var(--danger);
      --vt-orange: var(--warning);
      --vt-purple: #c39bff;
    }
    .vt-overlay ::selection { background: var(--accent-cyan); color: #0a1020; }
    .vt-overlay a { color: var(--vt-cyan); text-decoration: none; }
    .vt-overlay a:hover { text-decoration: underline; }

    /* Loading + error states */
    .vt-loading {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 80vh;
      flex-direction: column;
      gap: 1rem;
      color: var(--vt-dim);
      text-align: center;
    }
    .vt-loading-spinner {
      width: 36px;
      height: 36px;
      border: 2px solid var(--vt-grid-2);
      border-top-color: var(--vt-amber);
      border-radius: 50%;
      animation: vt-spin 0.8s linear infinite;
    }
    @keyframes vt-spin { to { transform: rotate(360deg); } }
    .vt-loading-text {
      font-size: 11px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--vt-amber);
      font-weight: 600;
    }
    .vt-loading-detail { font-size: 10.5px; color: var(--vt-dim); max-width: 480px; }
    .vt-error {
      padding: 3rem 2rem;
      text-align: center;
      color: var(--vt-red);
      font-size: 12px;
      max-width: 520px;
      margin: 0 auto;
    }
    .vt-error-title { font-size: 14px; margin-bottom: 8px; font-weight: 600; }
    .vt-error-detail { color: var(--vt-dim); font-size: 11px; margin-bottom: 1rem; word-break: break-word; }
    .vt-error button {
      background: transparent;
      color: var(--vt-amber);
      border: 1px solid var(--vt-amber);
      padding: 7px 16px;
      font-family: inherit;
      font-size: 10.5px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      cursor: pointer;
      border-radius: 2px;
      font-weight: 600;
    }
    .vt-error button:hover { background: rgba(0, 212, 255, 0.12); }
    .vt-error-hint { color: var(--vt-dim); font-size: 10.5px; margin: -4px auto 1.1rem; max-width: 440px; line-height: 1.5; opacity: 0.85; }
    .vt-stale {
      display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
      margin: 0 0 12px; padding: 8px 12px;
      border: 1px solid var(--vt-amber); border-radius: 3px;
      background: rgba(255, 176, 0, 0.07);
      color: var(--vt-amber); font-size: 11px; line-height: 1.5;
    }
    .vt-stale-icon { font-size: 14px; }
    .vt-stale-why { color: var(--vt-dim); font-size: 10.5px; }
    .vt-stale button {
      margin-left: auto;
      background: transparent; color: var(--vt-amber); border: 1px solid var(--vt-amber);
      padding: 4px 10px; font-family: inherit; font-size: 10px; letter-spacing: 0.12em;
      text-transform: uppercase; cursor: pointer; border-radius: 2px; font-weight: 600;
    }
    .vt-stale button:hover { background: rgba(0, 212, 255, 0.12); }


    /* ═══ Mobile pass (audit M1–M4, 2026-09-10) ═══ */
    /* iOS Safari zooms the page when a focused input is under 16px. */
    @media (pointer: coarse) {
      input[type="text"], input[type="search"], input[type="number"], input:not([type]), select, textarea {
        font-size: 16px !important;
      }
      button, .tab, .leaderboard-cat-btn, .calc-nav-btn { min-height: 44px; }
    }

    /* Validator Terminal: the 24-column table used to force the page's layout
       viewport to ~1,450px on phones (body overflow-x hidden + wrap overflow
       visible), so the whole site rendered zoomed-out. Scroll the table inside
       its own container instead; the first two columns stay pinned. */
    @media (max-width: 1500px) {
      /* The terminal's own rule (.vt-tbl-wrap { overflow: visible }) comes later
         in the cascade, so this one needs higher specificity. */
      .vt-overlay .vt-tbl-wrap, #vtContent .vt-tbl-wrap { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
      /* Inside a scroll container the header row's sticky `top` is measured
         from the wrap, not the page, so it floated 48px down into the rows.
         Pin it to the wrap's top edge instead (it stays in normal flow). */
      .vt-overlay table.vt-data thead th { top: 0; }
      table.vt-data th:nth-child(1), table.vt-data td:nth-child(1) { position: sticky; left: 0; z-index: 2; background-color: var(--bg-card); }
      table.vt-data th:nth-child(2), table.vt-data td:nth-child(2) { position: sticky; left: var(--vt-col1-w, 36px); z-index: 2; background-color: var(--bg-card); box-shadow: 4px 0 8px -4px rgba(0,0,0,0.5); }
      .vt-tip { min-width: min(460px, calc(100vw - 2rem)); max-width: calc(100vw - 2rem); }
    }

    @media (max-width: 768px) {
      /* Nav: 8 tabs as a 4-column grid (2 rows) instead of a horizontal scroller
         that showed 2 of 7 tabs with no affordance. */
      .tabs {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0.45rem;
        overflow: visible;
        margin-bottom: 1.25rem;
      }
      .tab {
        flex-direction: column;
        min-height: 60px;
        padding: 0.45rem 0.25rem;
        font-size: 0.68rem;
        line-height: 1.15;
        white-space: normal;
        gap: 0.25rem;
        overflow-wrap: anywhere;
      }
      .tab .tab-icon { font-size: 1.05rem; height: 20px; }
      .tab .tab-label { display: block; width: 100%; }

      /* Header: single compact row, links become small chips */
      header { padding: 0.75rem 1rem; gap: 0.6rem; }
      .header-links { gap: 0.6rem; font-size: 0.78rem; flex-wrap: wrap; justify-content: center; }

      /* Stats bar: 4 × 2 grid, no ragged wrapping */
      .network-stats {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0.35rem 0;
        padding: 0.6rem 0.4rem;
      }
      .network-stat { border-right: none; padding: 0.2rem 0.15rem; min-width: 0; }
      .network-stat-value { font-size: 0.95rem; }

      /* Globe: scale with the screen, let the page scroll over it */
      #validatorMap, .globe-container { touch-action: pan-y; }
    }
    @media (max-width: 480px) {
      .tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.35rem; }
      .tab { font-size: 0.64rem; min-height: 56px; }
      .network-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
      .network-stat-value { font-size: 0.85rem; }
      .network-stat-label { font-size: 0.58rem; }
    }

    /* ═══ Delegation Program (stat tile + modal + tab) ═══ */
    .deleg-status { display: inline-flex; align-items: center; font-size: 0.72rem; font-weight: 600; padding: 0.2rem 0.6rem; border-radius: 999px; white-space: nowrap; }
    .deleg-status.ok   { background: rgba(0, 230, 118, 0.12); color: var(--success); }
    .deleg-status.warn { background: rgba(255, 171, 0, 0.14); color: var(--warning); }
    .deleg-status.bad  { background: rgba(255, 82, 82, 0.14); color: var(--danger); }
    .deleg-status.na   { background: rgba(138, 143, 152, 0.14); color: var(--text-secondary); }
    /* modal */
    .dm-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.9rem; }
    .dm-amount { font-family: 'JetBrains Mono', monospace; font-size: 1.1rem; color: var(--text-primary); }
    .dm-amount small { color: var(--text-secondary); font-size: 0.72rem; font-family: 'Space Grotesk', sans-serif; margin-left: 0.3rem; }
    .dm-rows { display: flex; flex-direction: column; gap: 0.35rem; }
    .dm-row { display: grid; grid-template-columns: 22px 1fr auto; gap: 0.5rem; align-items: baseline; padding: 0.5rem 0.7rem; border-radius: 8px; background: var(--bg-secondary); font-size: 0.82rem; }
    .dm-row .ic { font-weight: 700; text-align: center; }
    .dm-row.ok .ic { color: var(--success); }
    .dm-row.bad .ic { color: var(--danger); }
    .dm-row.na .ic { color: var(--text-dim); }
    .dm-row .lbl { color: var(--text-primary); }
    .dm-row .val { font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; color: var(--text-secondary); text-align: right; white-space: nowrap; }
    .dm-row.bad .val { color: var(--danger); }
    .dm-row .hint { grid-column: 2 / 4; color: var(--warning); font-size: 0.74rem; }
    .dm-strikes { margin-top: 0.7rem; padding: 0.5rem 0.7rem; border-radius: 8px; background: rgba(255, 171, 0, 0.08); color: var(--warning); font-size: 0.78rem; }
    .dm-foot { margin-top: 0.9rem; font-size: 0.72rem; color: var(--text-dim); line-height: 1.5; }
    .dm-foot a { color: var(--accent-cyan); text-decoration: none; }
    .dm-foot a:hover { text-decoration: underline; }
    .dm-empty { padding: 1rem 0; color: var(--text-secondary); font-size: 0.85rem; line-height: 1.5; }

    /* Tab */
    .deleg-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.6rem; margin: 0 0 1.2rem; }
    .deleg-tile { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 0.8rem 0.9rem; }
    .deleg-tile .v { font-family: 'JetBrains Mono', monospace; font-size: 1.15rem; font-weight: 700; color: var(--accent-cyan); line-height: 1.1; }
    .deleg-tile .k { font-size: 0.72rem; color: var(--text-secondary); margin-top: 0.3rem; letter-spacing: 0.03em; text-transform: uppercase; }
    .deleg-tile.count .v { color: var(--text-primary); }
    .deleg-tile.count.ok .v { color: var(--success); }
    .deleg-tile.count.warn .v { color: var(--warning); }
    .deleg-tile.count.bad .v { color: var(--danger); }
    .deleg-controls { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 0.9rem; }
    .deleg-controls input {
      flex: 1 1 220px; min-width: 0; padding: 0.6rem 0.9rem; font-size: 16px; border-radius: 10px;
      border: 1px solid var(--border); background: var(--bg-secondary); color: var(--text-primary); font-family: inherit;
    }
    .deleg-controls input:focus { outline: 2px solid var(--accent-cyan); outline-offset: 1px; }
    .deleg-seg { display: flex; gap: 0.35rem; flex-wrap: wrap; }
    .deleg-seg button {
      padding: 0.45rem 0.85rem; border-radius: 999px; font-size: 0.8rem; font-weight: 600; cursor: pointer;
      border: 1px solid var(--border); background: var(--bg-secondary); color: var(--text-secondary); font-family: inherit;
    }
    .deleg-seg button[aria-pressed="true"] { background: rgba(0, 212, 255, 0.14); border-color: var(--accent-cyan); color: var(--accent-cyan); }
    .deleg-seg button:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 2px; }
    .deleg-tbl-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-card); }
    .deleg-tbl { width: 100%; border-collapse: collapse; font-size: 0.82rem; min-width: 860px; }
    .deleg-tbl th, .deleg-tbl td { padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap; }
    .deleg-tbl th { font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-secondary); background: var(--bg-secondary); position: sticky; top: 0; cursor: pointer; user-select: none; }
    .deleg-tbl th.sorted { color: var(--accent-cyan); }
    .deleg-tbl td.n { font-family: 'JetBrains Mono', monospace; text-align: right; font-variant-numeric: tabular-nums; }
    .deleg-tbl th.n { text-align: right; }
    .deleg-tbl tr.mine td { background: rgba(0, 212, 255, 0.06); }
    .deleg-tbl tr:hover td { background: var(--bg-card-hover); }
    .deleg-tbl td.name { max-width: 220px; overflow: hidden; text-overflow: ellipsis; cursor: pointer; color: var(--text-primary); }
    .deleg-tbl td.name:hover { color: var(--accent-cyan); text-decoration: underline; }
    .deleg-tbl td.name small { color: var(--text-dim); font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; margin-left: 0.4rem; }
    .deleg-tbl .fc { color: var(--danger); font-size: 0.75rem; }
    .deleg-tbl .fc.none { color: var(--text-dim); }
    .deleg-empty { padding: 2rem; text-align: center; color: var(--text-secondary); }
    .deleg-note { font-size: 0.78rem; color: var(--text-secondary); margin: 0.9rem 0 0; line-height: 1.5; }
    .deleg-note a { color: var(--accent-cyan); }
    @media (max-width: 600px) { .deleg-grid { grid-template-columns: 1fr; } }

    /* Ticker */
    /* Header */
    .vt-head {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      grid-template-rows: auto auto;
      align-items: center;
      column-gap: 1rem;
      row-gap: 0.5rem;
      padding: 2rem 1.25rem 1.25rem;
      border-bottom: 1px solid var(--border);
      background: transparent;
    }
    .vt-head h1 {
      grid-column: 2;
      grid-row: 1;
      justify-self: center;
      font-family: 'Space Grotesk', system-ui, sans-serif;
      font-size: 2rem;
      font-weight: 700;
      margin: 0;
      letter-spacing: -0.01em;
      color: var(--text-primary);
      display: inline-flex;
      align-items: center;
      gap: 14px;
    }
    .vt-head h1 .x1-logo-small {
      width: 44px;
      height: 44px;
      font-size: 1.3rem;
    }
    .vt-head h1 .word-validator { color: #ffffff; }
    .vt-head h1 .word-terminal {
      background: var(--accent-gradient);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .vt-head .meta {
      grid-column: 1 / -1;
      grid-row: 2;
      color: var(--text-secondary);
      font-size: 0.9rem;
      display: flex;
      gap: 1.25rem;
      flex-wrap: wrap;
      justify-content: center;
    }
    .vt-head .meta b { color: var(--text-primary); font-weight: 600; }

    /* Auto-refresh widget — top-right of header, on the same row as the title */
    .vt-refresh-corner {
      grid-column: 3;
      grid-row: 1;
      justify-self: end;
      align-self: center;
      display: flex;
      align-items: center;
      gap: 0.75rem;
    }
    .vt-refresh-corner .info {
      text-align: right;
      line-height: 1.3;
    }
    .vt-refresh-corner .info .lbl {
      color: var(--text-secondary);
      font-size: 0.7rem;
      letter-spacing: 0.3px;
    }
    .vt-refresh-corner .info .upd {
      color: var(--text-primary);
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.7rem;
    }
    .vt-refresh-corner button {
      background: rgba(0, 212, 255, 0.08);
      color: var(--accent-cyan);
      border: 1px solid rgba(0, 212, 255, 0.35);
      padding: 0.4rem 0.85rem;
      border-radius: 8px;
      font-family: inherit;
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.3px;
      text-transform: uppercase;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      transition: all 0.15s;
      white-space: nowrap;
    }
    .vt-refresh-corner button:hover {
      background: rgba(0, 212, 255, 0.18);
      box-shadow: 0 0 0 1px rgba(0, 212, 255, 0.5) inset;
    }
    .vt-refresh-corner button.spinning {
      pointer-events: none;
      opacity: 0.65;
    }
    .vt-refresh-corner button.spinning .vt-refresh-icon {
      animation: vt-spin 0.8s linear infinite;
    }
    @media (max-width: 980px) {
      .vt-head { grid-template-columns: 1fr; }
      .vt-head h1, .vt-head .meta, .vt-refresh-corner {
        grid-column: 1;
        justify-self: center;
      }
      /* One column: give the corner its own row. It kept grid-row 1 from the
         3-column layout and sat on top of the title (2026-09-23). */
      .vt-head .meta { grid-row: 2; }
      .vt-refresh-corner { grid-row: 3; margin-top: 0.25rem; }
    }

    /* Slot between the vt-head divider and the KPI grid where switchTab
       relocates the page-level stats + epoch panel when the Validator
       Terminal tab is active. Side padding matches the KPI grid / vt-head;
       a small top pad gives the panel breathing room below the divider,
       and the epoch bar's default 1.5rem bottom margin is squashed since
       the vt-kpi-grid below already has padding-top: 1.25rem. */
    #vtStatsSlot:not(:empty) {
      padding: 1rem 1.25rem 0;
    }
    #vtStatsSlot .epoch-progress {
      margin-bottom: 0;
    }

    /* KPI grid — 6 cards laid out as 3 columns × 2 rows at desktop,
       collapsing to 2 then 1 column on narrower viewports. Always
       balanced regardless of width (no awkward leftover slots). */
    .vt-kpi-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1rem;
      padding: 1.25rem 1.25rem 0.5rem;
      background: transparent;
      border-top: 1px solid var(--border);
    }
    @media (max-width: 980px) {
      .vt-kpi-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 600px) {
      .vt-kpi-grid { grid-template-columns: 1fr; }
    }
    .vt-kpi {
      background: var(--bg-card);
      border: 1px solid rgba(77, 166, 255, 0.35);
      border-radius: 12px;
      padding: 1rem 1.25rem;
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      gap: 0.35rem;
      box-shadow: 0 0 0 1px rgba(0, 212, 255, 0.05), 0 0 18px rgba(0, 212, 255, 0.04);
    }
    .vt-kpi::before {
      content: '';
      position: absolute;
      left: 0; right: 0; top: 0;
      height: 2px;
      background: var(--accent-gradient);
      opacity: 0.75;
    }
    .vt-kpi .lbl {
      color: var(--text-secondary);
      font-size: 0.7rem;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      font-weight: 600;
    }
    .vt-kpi .v {
      font-size: 1.6rem;
      font-weight: 700;
      color: var(--text-primary);
      font-family: 'JetBrains Mono', monospace;
      font-variant-numeric: tabular-nums;
      line-height: 1.1;
    }
    .vt-kpi .v.amber { color: var(--accent-cyan); }
    .vt-kpi .v.cyan { color: var(--accent-cyan); }
    .vt-kpi .sub { color: var(--text-dim); font-size: 0.75rem; }
    .vt-kpi .sub b { color: var(--text-primary); font-weight: 600; }

    /* Percentile row */
    .vt-pctrow {
      display: grid;
      grid-template-columns: minmax(180px, 1.4fr) repeat(7, 1fr);
      gap: 0;
      background: var(--bg-card);
      border: 1px solid rgba(77, 166, 255, 0.35);
      border-radius: 12px;
      margin: 0.5rem 1.25rem 1.25rem;
      overflow: hidden;
      position: relative;
      box-shadow: 0 0 0 1px rgba(0, 212, 255, 0.05), 0 0 18px rgba(0, 212, 255, 0.04);
    }
    .vt-pctrow::before {
      content: '';
      position: absolute;
      left: 0; right: 0; top: 0;
      height: 2px;
      background: var(--accent-gradient);
      opacity: 0.75;
      z-index: 1;
    }
    .vt-pctrow > div {
      background: transparent;
      padding: 1rem 1rem 1.1rem;
      border-right: 1px solid var(--border);
    }
    .vt-pctrow > div:last-child { border-right: none; }
    @media (max-width: 1380px) {
      .vt-pctrow { grid-template-columns: repeat(4, 1fr); }
      .vt-pctrow .head { grid-column: 1 / -1; border-bottom: 1px solid var(--border); }
      .vt-pctrow > div:nth-child(5) { border-right: none; }
    }
    .vt-pctrow .head {
      background: rgba(0, 212, 255, 0.06);
      color: var(--accent-cyan);
      font-size: 0.7rem;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      font-weight: 700;
      display: flex;
      align-items: center;
    }
    .vt-pctrow .lbl {
      color: var(--text-secondary);
      font-size: 0.7rem;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      font-weight: 600;
      margin-bottom: 0.3rem;
    }
    .vt-pctrow .v {
      color: var(--text-primary);
      font-size: 1.2rem;
      font-weight: 600;
      font-family: 'JetBrains Mono', monospace;
      font-variant-numeric: tabular-nums;
    }
    .vt-pctrow .v.hi { color: var(--accent-cyan); }

    /* Toolbar */
    .vt-tools {
      display: flex;
      align-items: center;
      padding: 0.75rem 1.25rem;
      gap: 0.75rem;
      flex-wrap: wrap;
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
      background: rgba(13, 21, 40, 0.95);
      position: sticky;
      top: 0;
      z-index: 30;
      backdrop-filter: blur(8px);
    }
    .vt-tools .label {
      color: var(--accent-cyan);
      font-weight: 700;
      font-size: 0.72rem;
      letter-spacing: 0.5px;
      text-transform: uppercase;
    }
    .vt-tools .right {
      display: flex;
      gap: 1rem;
      color: var(--text-secondary);
      font-size: 0.72rem;
      align-items: center;
      flex-wrap: wrap;
      margin-left: auto;
    }
    .vt-tools .right b { color: var(--text-primary); }
    .vt-tools input.search {
      background: rgba(20, 28, 46, 0.6);
      color: var(--text-primary);
      border: 1px solid var(--border);
      padding: 0.4rem 0.75rem;
      font-family: inherit;
      font-size: 0.82rem;
      width: 280px;
      outline: none;
      transition: border-color 0.15s, box-shadow 0.15s;
      border-radius: 8px;
    }
    .vt-tools input.search:focus {
      border-color: var(--accent-cyan);
      box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.08);
    }
    .vt-tools .seg {
      display: inline-flex;
      gap: 2px;
      background: rgba(20, 28, 46, 0.6);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 3px;
      overflow: visible;
    }
    .vt-tools .seg button {
      background: transparent;
      color: var(--text-secondary);
      border: none;
      padding: 0.35rem 0.75rem;
      font-family: inherit;
      font-size: 0.72rem;
      cursor: pointer;
      letter-spacing: 0.3px;
      text-transform: uppercase;
      font-weight: 600;
      border-right: none;
      border-radius: 7px;
      transition: color 0.15s, background 0.15s;
    }
    .vt-tools .seg button:hover { color: var(--text-primary); }
    .vt-tools .seg button.on {
      background: rgba(0, 212, 255, 0.12);
      color: var(--accent-cyan);
      box-shadow: 0 0 0 1px rgba(0, 212, 255, 0.35) inset;
    }
    .vt-tools .btn {
      background: transparent;
      color: var(--text-secondary);
      border: 1px solid var(--border);
      padding: 0.4rem 0.85rem;
      font-family: inherit;
      font-size: 0.72rem;
      cursor: pointer;
      text-transform: uppercase;
      letter-spacing: 0.3px;
      font-weight: 600;
      border-radius: 8px;
      transition: color 0.15s, border-color 0.15s, background 0.15s;
    }
    .vt-tools .btn:hover { color: var(--accent-cyan); border-color: var(--accent-cyan); }
    .vt-tools .btn.refresh {
      color: var(--accent-cyan);
      border-color: rgba(0, 212, 255, 0.35);
      background: rgba(0, 212, 255, 0.08);
    }
    .vt-tools .btn.refresh:hover {
      background: rgba(0, 212, 255, 0.18);
      box-shadow: 0 0 0 1px rgba(0, 212, 255, 0.5) inset;
    }
    .vt-tools .btn.refresh.spinning { pointer-events: none; opacity: 0.6; }
    .vt-tools .btn.refresh.spinning .vt-refresh-icon { display: inline-block; animation: vt-spin 0.8s linear infinite; }
    .vt-refresh-icon { display: inline-block; }
    .vt-tools .kbd { color: var(--text-dim); font-size: 0.7rem; }
    .vt-tools .kbd kbd {
      background: rgba(20, 28, 46, 0.6);
      border: 1px solid var(--border);
      padding: 1px 6px;
      border-radius: 4px;
      font-family: inherit;
      color: var(--text-primary);
      font-size: 0.7rem;
    }

    /* Data table */
    .vt-tbl-wrap { overflow: visible; }
    table.vt-data {
      width: 100%;
      border-collapse: collapse;
      font-size: 11px;
      table-layout: auto;
      font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
    }
    table.vt-data thead th {
      position: sticky;
      top: var(--vt-tools-h, 48px);
      background: rgba(13, 21, 40, 0.97);
      color: var(--accent-cyan);
      font-weight: 600;
      font-size: 0.7rem;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      padding: 10px 10px;
      text-align: left;
      border-bottom: 1px solid rgba(77, 166, 255, 0.25);
      z-index: 20;
      white-space: nowrap;
      cursor: pointer;
      user-select: none;
      backdrop-filter: blur(8px);
    }
    table.vt-data thead th.r { text-align: right; }
    table.vt-data thead th.sortable:hover { color: var(--text-primary); }
    table.vt-data thead th .arrow { display: inline-block; margin-left: 4px; opacity: 0.35; font-size: 9px; }
    table.vt-data thead th.sort-desc .arrow,
    table.vt-data thead th.sort-asc .arrow { opacity: 1; color: var(--accent-cyan); }
    table.vt-data thead th.sort-desc .arrow::after { content: '▼'; }
    table.vt-data thead th.sort-asc .arrow::after { content: '▲'; }
    table.vt-data thead th .arrow::after { content: '↕'; }
    table.vt-data tbody td {
      padding: 6px 10px;
      border-bottom: 1px solid rgba(30, 48, 80, 0.4);
      vertical-align: middle;
      white-space: nowrap;
    }
    /* Stripe + hover are painted as an overlay (background-image) rather than
       as the cell's background, so the two pinned columns (≤1500px, sticky
       with an opaque background-color) stay opaque on even/hovered rows —
       otherwise the scrolling columns showed through them. */
    table.vt-data tbody tr:nth-child(even) td { background-image: linear-gradient(rgba(255, 255, 255, 0.015), rgba(255, 255, 255, 0.015)); }
    table.vt-data tbody tr:hover td { background-image: linear-gradient(rgba(0, 212, 255, 0.06), rgba(0, 212, 255, 0.06)); }
    table.vt-data tbody tr.dlq td { color: #d88795; }
    table.vt-data tbody tr.ina td { color: var(--text-dim); }
    table.vt-data td.n,
    table.vt-data td.r { text-align: right; font-variant-numeric: tabular-nums; }
    table.vt-data td.dim { color: var(--text-secondary); }
    table.vt-data td.small { font-size: 10px; }
    table.vt-data td.m { font-size: 10.5px; cursor: pointer; }
    table.vt-data td.m .pk { color: var(--accent-cyan); }
    table.vt-data td.m.id .pk { color: var(--vt-purple); opacity: 0.85; }
    table.vt-data td.m:hover .pk {
      text-decoration: underline;
      text-decoration-color: var(--accent-cyan);
      text-underline-offset: 3px;
    }
    table.vt-data td.name { max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
    table.vt-data td.name .nm { color: var(--vt-text); font-weight: 500; }

    .vt-self-cell { position: relative; }
    .vt-self-cell .bar {
      display: inline-block;
      width: 48px;
      height: 4px;
      background: rgba(0, 212, 255, 0.08);
      border-radius: 2px;
      margin-right: 6px;
      vertical-align: middle;
      overflow: hidden;
    }
    .vt-self-cell .bar-fill {
      display: block;
      height: 100%;
      background: linear-gradient(90deg, var(--accent-blue), var(--accent-cyan));
      box-shadow: 0 0 8px rgba(0, 212, 255, 0.45);
    }
    .vt-self-cell .self-val { color: var(--text-primary); }
    .vt-pct-hi { color: var(--danger); font-weight: 600; }
    .vt-pct-mid { color: var(--warning); }
    .vt-pct-lo { color: var(--success); }
    .vt-pct-zero { color: var(--text-dim); }

    .vt-pill {
      display: inline-block;
      padding: 2px 8px;
      border-radius: 4px;
      font-size: 0.65rem;
      font-weight: 700;
      letter-spacing: 0.3px;
      text-transform: uppercase;
    }
    .vt-pill.st-ok { background: rgba(0, 230, 118, 0.12); color: var(--success); }
    .vt-pill.st-dlq { background: rgba(255, 82, 82, 0.14); color: var(--danger); }
    .vt-pill.st-ina { background: rgba(138, 143, 152, 0.16); color: var(--text-secondary); }
    .vt-tag-x1 {
      display: inline-block;
      background: var(--accent-gradient);
      color: #0a1020;
      padding: 1px 6px;
      border-radius: 4px;
      font-size: 0.6rem;
      font-weight: 800;
      letter-spacing: 0.3px;
      vertical-align: middle;
      margin-left: 6px;
    }

    /* Footer */
    .vt-footer {
      padding: 1rem 1.25rem 2rem;
      color: var(--text-secondary);
      font-size: 0.75rem;
      border-top: 1px solid var(--border);
      background: transparent;
    }
    .vt-footer .row { display: flex; gap: 1.4rem; flex-wrap: wrap; }
    .vt-footer code {
      color: var(--accent-cyan);
      background: rgba(0, 212, 255, 0.06);
      padding: 1px 5px;
      border-radius: 3px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.7rem;
    }

    @media (max-width: 980px) {
      /* minmax(0, …): a plain 1fr track can never shrink below its content, so the
         monospace values pushed the grid wider than the card and the last column
         was clipped by overflow:hidden (phones, 2026-10-13). */
      .vt-pctrow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .vt-pctrow .head { grid-column: 1 / -1; }
      .vt-pctrow > div:nth-child(5) { border-right: 1px solid var(--border); }
      .vt-pctrow > div:nth-child(4),
      .vt-pctrow > div:nth-child(7) { border-right: none; }
      .vt-pctrow .v { font-size: 1.05rem; overflow-wrap: anywhere; }
    }
    @media (max-width: 560px) {
      .vt-pctrow { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-left: 1rem; margin-right: 1rem; }
      .vt-pctrow > div { padding: 0.8rem 0.85rem 0.9rem; }
      .vt-pctrow > div:nth-child(4) { border-right: 1px solid var(--border); }
      .vt-pctrow > div:nth-child(3),
      .vt-pctrow > div:nth-child(5),
      .vt-pctrow > div:nth-child(7) { border-right: none; }
    }

    /* Hover tooltip — per-validator stake breakdown */
    .vt-tip {
      position: fixed;
      z-index: 10002;
      display: none;
      min-width: 460px;
      max-width: 640px;
      max-height: 360px;
      overflow: auto;
      background: var(--bg-card);
      border: 1px solid rgba(77, 166, 255, 0.5);
      box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(0, 212, 255, 0.18), 0 0 24px rgba(0, 212, 255, 0.12);
      color: var(--text-primary);
      font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
      font-size: 11px;
      border-radius: 10px;
    }
    .vt-tip .tip-h {
      padding: 0.65rem 0.85rem 0.55rem;
      border-bottom: 1px solid rgba(77, 166, 255, 0.25);
      background: linear-gradient(180deg, rgba(22, 36, 64, 0.6) 0%, rgba(17, 29, 50, 0.6) 100%);
      position: sticky;
      top: 0;
      z-index: 2;
    }
    .vt-tip .tip-h .vote { color: var(--accent-cyan); font-size: 11px; word-break: break-all; }
    .vt-tip .tip-h .name { color: var(--text-primary); font-weight: 600; font-size: 12.5px; margin-top: 2px; font-family: 'Space Grotesk', sans-serif; }
    .vt-tip .tip-h .totals {
      color: var(--text-secondary);
      font-size: 10.5px;
      margin-top: 5px;
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
    }
    .vt-tip .tip-h .totals b { color: var(--text-primary); }
    .vt-tip .tip-h .totals .amber { color: var(--accent-cyan); }
    .vt-tip .tip-h .totals .cyan { color: var(--accent-cyan); }
    .vt-tip table.tip-tbl { width: 100%; border-collapse: collapse; font-size: 10.5px; table-layout: auto; }
    .vt-tip table.tip-tbl th {
      position: sticky;
      top: 0;
      background: rgba(13, 21, 40, 0.97);
      color: var(--accent-cyan);
      text-align: left;
      font-size: 0.65rem;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      padding: 7px 11px;
      border-bottom: 1px solid rgba(77, 166, 255, 0.25);
      z-index: 1;
    }
    .vt-tip table.tip-tbl th.r { text-align: right; }
    .vt-tip table.tip-tbl td { padding: 5px 11px; border-bottom: 1px solid rgba(30, 48, 80, 0.4); white-space: nowrap; }
    .vt-tip table.tip-tbl td.n { text-align: right; font-variant-numeric: tabular-nums; }
    .vt-tip table.tip-tbl td.pk { color: var(--accent-cyan); font-size: 10px; }
    .vt-tip table.tip-tbl tr:hover td { background: rgba(0, 212, 255, 0.06); }
    .vt-stk-active { color: var(--success); }
    .vt-stk-activating { color: var(--accent-cyan); }
    .vt-stk-deactivating { color: var(--warning); }
    .vt-stk-inactive { color: var(--text-dim); }
    .vt-src-pool {
      display: inline-block;
      padding: 1px 6px;
      border-radius: 3px;
      background: rgba(77, 166, 255, 0.15);
      color: var(--accent-blue);
      font-size: 0.6rem;
      letter-spacing: 0.3px;
      font-weight: 700;
      text-transform: uppercase;
    }
    .vt-src-direct {
      display: inline-block;
      padding: 1px 6px;
      border-radius: 3px;
      background: rgba(0, 212, 255, 0.15);
      color: var(--accent-cyan);
      font-size: 0.6rem;
      letter-spacing: 0.3px;
      font-weight: 700;
      text-transform: uppercase;
    }

    /* ═══════════════════════════════════════════════════════
       VALIDATOR FORENSICS (hidden analysis tool)
       Opened via the faint dot in the Validator Terminal
       footer. All selectors are vp- prefixed to avoid any
       collision with the rest of the site.
       ═══════════════════════════════════════════════════════ */
    .vp-dot {
      display: inline-block;
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--text-dim);
      opacity: 0.25;
      margin-right: 7px;
      vertical-align: middle;
      cursor: pointer;
      transition: opacity 0.2s ease, background 0.2s ease;
    }
    .vp-dot:hover { opacity: 0.8; background: var(--accent-cyan); }

    .vp-overlay {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 100010;
      background: radial-gradient(ellipse at center, #0d1a30 0%, #0a1020 50%, #060810 100%);
      overflow-y: auto;
      padding: 1.5rem;
    }
    .vp-overlay.open { display: block; }
    .vp-wrap { max-width: 1280px; margin: 0 auto; }
    .vp-header { display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.35rem; }
    .vp-header h2 { font-size: 1.35rem; font-weight: 600; color: var(--text-primary); }
    .vp-header h2 .vp-mono { font-family: 'JetBrains Mono', monospace; color: var(--accent-cyan); font-weight: 500; }
    .vp-close {
      margin-left: auto;
      background: var(--bg-secondary); color: var(--text-secondary);
      border: 1px solid var(--border); border-radius: 8px;
      width: 34px; height: 34px; font-size: 1rem; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
    }
    .vp-close:hover { color: var(--danger); border-color: var(--danger); }
    .vp-tagline { color: var(--text-secondary); font-size: 0.85rem; margin-bottom: 1.25rem; max-width: 78ch; }

    .vp-panel {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 1.1rem 1.25rem;
      margin-bottom: 1rem;
    }
    .vp-controls { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; }
    .vp-controls label { font-size: 0.8rem; color: var(--text-secondary); }
    .vp-select {
      background: var(--bg-secondary); color: var(--text-primary);
      border: 1px solid var(--border); border-radius: 8px;
      padding: 0.45rem 0.6rem; font-family: 'JetBrains Mono', monospace; font-size: 0.8rem;
    }
    .vp-btn {
      background: linear-gradient(135deg, #4da6ff 0%, #00d4ff 100%);
      color: #001029; border: none; border-radius: 8px;
      padding: 0.55rem 1.1rem; font-family: 'Space Grotesk', sans-serif;
      font-weight: 600; font-size: 0.85rem; cursor: pointer;
    }
    .vp-btn:hover { filter: brightness(1.1); }
    .vp-btn:disabled { filter: grayscale(0.6); opacity: 0.55; cursor: not-allowed; }
    .vp-btn.vp-secondary { background: var(--bg-secondary); color: var(--accent-cyan); border: 1px solid var(--border); }
    .vp-btn.vp-danger { background: var(--bg-secondary); color: var(--danger); border: 1px solid var(--border); }
    #vpStatus { font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; color: var(--text-secondary); }
    .vp-chk {
      display: inline-flex; align-items: center; gap: 0.4rem;
      font-size: 0.8rem; color: var(--text-secondary); cursor: pointer; user-select: none;
    }
    .vp-chk input { accent-color: var(--accent-cyan); cursor: pointer; }
    #vpStatus.vp-err { color: var(--danger); }
    #vpLagNote { font-size: 0.75rem; color: var(--text-dim); font-family: 'JetBrains Mono', monospace; margin-top: 0.5rem; }

    #vpVerdict { display: none; border-radius: 12px; padding: 1.1rem 1.35rem; margin-bottom: 1rem; border: 1px solid var(--border); }
    #vpVerdict.vp-tvc { border-color: rgba(0,230,118,0.45); background: linear-gradient(135deg, rgba(0,230,118,0.10), rgba(0,212,255,0.06)); }
    #vpVerdict.vp-pretvc { border-color: rgba(255,171,0,0.5); background: linear-gradient(135deg, rgba(255,171,0,0.10), rgba(255,82,82,0.05)); }
    #vpVerdict .vp-v-title { font-size: 1.05rem; font-weight: 700; margin-bottom: 0.3rem; color: var(--text-primary); }
    #vpVerdict .vp-v-body { font-size: 0.85rem; color: var(--text-secondary); max-width: 95ch; }
    #vpVerdict .vp-v-body b { color: var(--text-primary); }

    .vp-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.75rem; }
    .vp-stat { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 10px; padding: 0.7rem 0.85rem; }
    .vp-stat .vp-k { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); margin-bottom: 0.25rem; }
    .vp-stat .vp-v { font-family: 'JetBrains Mono', monospace; font-size: 1.05rem; font-weight: 500; color: var(--accent-cyan); }
    .vp-stat .vp-v.vp-plain { color: var(--text-primary); }

    .vp-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
    @media (max-width: 900px) { .vp-charts { grid-template-columns: 1fr; } }
    .vp-panel h4 { font-size: 0.9rem; font-weight: 600; margin-bottom: 0.6rem; color: var(--text-primary); }
    .vp-panel h4 span { color: var(--text-dim); font-weight: 400; font-size: 0.75rem; }
    .vp-chart-holder { position: relative; height: 260px; }

    .vp-tbl-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
    .vp-filter {
      background: var(--bg-secondary); color: var(--text-primary);
      border: 1px solid var(--border); border-radius: 8px;
      padding: 0.45rem 0.6rem; font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; width: 220px;
    }
    .vp-tbl-scroll { overflow-x: auto; }
    .vp-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
    .vp-table th {
      text-align: right; padding: 0.45rem 0.42rem; color: var(--text-secondary);
      font-weight: 600; border-bottom: 1px solid var(--border);
      white-space: nowrap; cursor: pointer; user-select: none; background: transparent;
    }
    .vp-table th.vp-left, .vp-table td.vp-left { text-align: left; }
    .vp-table th:hover { color: var(--accent-cyan); }
    .vp-table th .vp-arrow { color: var(--accent-cyan); font-size: 0.7rem; }
    .vp-table td {
      padding: 0.36rem 0.42rem; text-align: right; color: var(--text-primary);
      font-family: 'JetBrains Mono', monospace; border-bottom: 1px solid rgba(30,48,80,0.45);
      white-space: nowrap; font-size: 0.75rem;
    }
    .vp-table tr:hover td { background: var(--bg-card-hover); }
    .vp-pk { color: var(--accent-blue); }
    .vp-copy {
      display: inline-block; cursor: pointer; color: var(--text-dim);
      margin-left: 5px; font-size: 0.82rem; line-height: 1;
      transition: color 0.15s ease;
    }
    .vp-copy:hover { color: var(--accent-cyan); }
    .vp-copy.vp-copied { color: var(--success); }
    .vp-eff-good { color: var(--success); }
    .vp-eff-mid { color: var(--warning); }
    .vp-eff-bad { color: var(--danger); }
    .vp-muted { color: var(--text-dim); }
    .vp-badge {
      display: inline-block; padding: 0.05rem 0.4rem; border-radius: 999px;
      font-size: 0.65rem; font-family: 'Space Grotesk', sans-serif; font-weight: 600;
    }
    .vp-badge.vp-delinq { background: rgba(255,82,82,0.15); color: var(--danger); border: 1px solid rgba(255,82,82,0.4); }
    .vp-badge.vp-new { background: rgba(240,185,11,0.12); color: var(--accent-gold); border: 1px solid rgba(240,185,11,0.35); }
    .vp-spark { display: inline-block; vertical-align: middle; }
    .vp-ava, .vp-ava-fb {
      width: 18px; height: 18px; border-radius: 50%;
      vertical-align: middle; margin-right: 6px;
      object-fit: cover; background: var(--bg-secondary);
      border: 1px solid var(--border);
    }
    .vp-ava-fb {
      display: inline-flex; align-items: center; justify-content: center;
      font-family: 'Space Grotesk', sans-serif; font-size: 0.6rem; font-weight: 700;
      color: var(--accent-cyan);
    }
    .vp-name {
      color: var(--text-primary); font-family: 'Space Grotesk', sans-serif; font-size: 0.76rem;
      display: inline-block; max-width: 108px; overflow: hidden;
      text-overflow: ellipsis; white-space: nowrap; vertical-align: middle;
    }
    .vp-name.vp-unnamed { color: var(--text-dim); font-style: italic; }
    .vp-riskpill {
      display: inline-block; min-width: 86px; text-align: center;
      padding: 0.12rem 0.5rem; border-radius: 999px;
      font-size: 0.68rem; font-family: 'JetBrains Mono', monospace; font-weight: 700;
      border: 1px solid transparent; cursor: help;
    }
    .vp-r1 { background: rgba(0,230,118,0.12);  color: var(--success);      border-color: rgba(0,230,118,0.35); }
    .vp-r2 { background: rgba(77,166,255,0.12); color: var(--accent-blue);  border-color: rgba(77,166,255,0.35); }
    .vp-r3 { background: rgba(240,185,11,0.12); color: var(--accent-gold);  border-color: rgba(240,185,11,0.35); }
    .vp-r4 { background: rgba(255,171,0,0.14);  color: var(--warning);      border-color: rgba(255,171,0,0.4); }
    .vp-r5 { background: rgba(255,82,82,0.16);  color: var(--danger);       border-color: rgba(255,82,82,0.45); }
    #vpProgress {
      background: var(--bg-card); border: 1px solid var(--border);
      border-radius: 12px; padding: 1.5rem 1.6rem; margin-bottom: 1rem;
    }
    .vp-prog-label { font-size: 0.95rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.7rem; }
    .vp-prog-track { height: 8px; background: var(--bg-secondary); border-radius: 999px; overflow: hidden; border: 1px solid var(--border); }
    .vp-prog-fill { height: 100%; width: 0%; border-radius: 999px; background: linear-gradient(90deg, #4da6ff, #00d4ff); transition: width 0.4s ease; }
    .vp-prog-sub { font-size: 0.76rem; color: var(--text-dim); margin-top: 0.6rem; }
    .vp-suspects { display: flex; flex-direction: column; gap: 0.3rem; max-height: 300px; overflow-y: auto; padding-right: 2px; }
    .vp-sus-row {
      display: flex; align-items: center; gap: 0.55rem;
      padding: 0.32rem 0.5rem; border-radius: 8px; cursor: pointer;
      background: var(--bg-secondary); border: 1px solid var(--border);
      transition: background 0.15s ease;
    }
    .vp-sus-row:hover { background: var(--bg-card-hover); }
    .vp-sus-rank { font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; color: var(--text-dim); width: 1.3rem; text-align: right; flex-shrink: 0; }
    .vp-sus-name {
      font-size: 0.78rem; color: var(--text-primary); flex: 1; min-width: 0;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .vp-sus-why { font-size: 0.66rem; color: var(--text-dim); font-family: 'JetBrains Mono', monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 38%; flex-shrink: 0; }
    .vp-methodology { font-size: 0.74rem; color: var(--text-dim); margin-top: 0.6rem; max-width: 110ch; line-height: 1.45; }
    .vp-methodology b { color: var(--text-secondary); }
    .vp-foot { color: var(--text-dim); font-size: 0.72rem; margin-top: 1.5rem; font-family: 'JetBrains Mono', monospace; }
    .vp-hidden { display: none; }
    /* ═══════════════════════════════════════════════════════════════════
       VALIDATOR CARD v2 (2026-09-15) — panel, leader band, grouped stats.
       Overrides the older card rules above; keep it after them.
       ═══════════════════════════════════════════════════════════════════ */
    .validator-card {
      background: linear-gradient(180deg, rgba(20, 34, 58, 0.92), rgba(15, 26, 46, 0.92));
      border: 1px solid rgba(77, 166, 255, 0.22);
      border-radius: 22px;
      padding: 1.6rem 1.75rem 1.5rem;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 24px 60px rgba(0, 0, 0, 0.35);
    }
    .validator-card:hover {
      border-color: rgba(77, 166, 255, 0.38);
      background: linear-gradient(180deg, rgba(22, 37, 63, 0.94), rgba(16, 28, 49, 0.94));
    }

    /* Header */
    .validator-card .validator-header { align-items: center; margin-bottom: 1.1rem; gap: 1rem; }
    /* Identity shrinks (chips wrap under the name) before the actions drop below it; the
       300 px floor keeps a long name + meta readable on narrow cards. */
    .validator-card .validator-info { gap: 1rem; min-width: 300px; flex: 1 1 0; }
    .validator-card .validator-logo,
    .validator-card .validator-logo-placeholder { width: 56px; height: 56px; border-radius: 18px; }
    .validator-card .validator-logo { border: 1px solid var(--border); }
    .validator-card .validator-logo-placeholder { font-size: 1.35rem; box-shadow: 0 8px 24px rgba(0, 212, 255, 0.3); }
    .validator-identity { display: flex; flex-direction: column; gap: 0.45rem; min-width: 0; }
    .validator-card .validator-name {
      display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem;
      font-size: 1.35rem; letter-spacing: -0.01em; line-height: 1.2;
    }
    .validator-card .tier-badge {
      margin-left: 0; gap: 0.3rem; height: 24px; padding: 0 10px;
      border-radius: 999px; font-size: 0.7rem; font-weight: 500;
    }
    .validator-card .tier-badge.elite     { background: rgba(240, 185, 11, 0.07); border-color: rgba(240, 185, 11, 0.28); color: var(--accent-gold); }
    .validator-card .tier-badge.excellent { background: rgba(192, 192, 192, 0.07); border-color: rgba(192, 192, 192, 0.3); }
    .validator-card .tier-badge.great     { background: rgba(205, 127, 50, 0.07);  border-color: rgba(205, 127, 50, 0.3); }
    .validator-card .validator-rank {
      display: inline-flex; align-items: center; height: 24px; padding: 0 10px; margin-left: 0;
      border-radius: 999px; font-size: 0.7rem; font-weight: 500;
      color: var(--text-secondary); background: rgba(255, 255, 255, 0.06);
    }
    .validator-card .validator-meta { flex-wrap: wrap; gap: 0.6rem; margin-top: 0; }
    /* Abbreviated vote account (8…6, full address in the title + copy button) so the meta
       line stays short and the action buttons fit beside the identity at narrower widths. */
    .validator-card .validator-address { margin-top: 0; white-space: nowrap; word-break: normal; cursor: help; }
    .validator-card .copy-address-btn { margin-left: 0; padding: 0.15rem; background: transparent; border-color: transparent; color: var(--text-dim); }
    .validator-card .copy-address-btn:hover { color: var(--accent-cyan); background: rgba(0, 212, 255, 0.1); border-color: transparent; }
    .validator-card .version-badge { padding: 0; background: transparent; border: none; color: var(--text-dim); font-size: 0.75rem; }
    .validator-card .version-badge.outdated { color: #ffc107; }
    .vh-status { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; font-weight: 500; color: var(--success); white-space: nowrap; }
    .vh-status-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px rgba(0, 230, 118, 0.18); }
    .vh-status.is-delinquent { color: var(--danger); }
    .vh-status.is-delinquent .vh-status-dot { box-shadow: 0 0 0 3px rgba(255, 82, 82, 0.18); }

    .validator-card .validator-actions { gap: 0.6rem; flex-shrink: 0; flex-wrap: wrap; }
    .share-icon-btn {
      display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
      border-radius: 999px; color: var(--text-secondary); background: rgba(255, 255, 255, 0.06);
      border: 1px solid var(--border); cursor: pointer; transition: all 0.2s;
    }
    .share-icon-btn:hover { color: var(--text-primary); border-color: var(--accent-blue); }
    .share-icon-btn.is-copied { color: var(--success); border-color: var(--success); }
    .validator-card .add-btn,
    .validator-card .remove-btn {
      display: inline-flex; align-items: center; gap: 0.45rem; height: 40px; padding: 0 1rem;
      border-radius: 999px; font-size: 0.82rem; white-space: nowrap;
    }
    .validator-card .add-btn { color: var(--text-primary); background: rgba(255, 255, 255, 0.06); border: 1px solid var(--border); }
    .validator-card .add-btn:hover { border-color: var(--accent-blue); background: rgba(77, 166, 255, 0.12); }
    .validator-card .add-btn.is-added,
    .validator-card .add-btn.is-added:hover { color: var(--success); background: rgba(0, 230, 118, 0.08); border-color: rgba(0, 230, 118, 0.3); cursor: default; opacity: 1; }
    .validator-card .remove-btn { border: 1px solid rgba(255, 82, 82, 0.3); }
    /* Manage Validator — dark fill, luminous border, bold glowing label and a
       sheen that sweeps across every few seconds (paused while the page is
       idle and for reduced-motion users). Colour comes from --mv-c so the
       accent can be swapped (blue by default; cyan 0,212,255; gold 240,185,11). */
    .validator-card .manage-validator-btn {
      --mv-c: 77, 166, 255;   /* --accent-blue */
      position: relative; overflow: hidden; isolation: isolate;
      height: 42px; padding: 0 1.2rem 0 0.8rem; gap: 0.6rem;
      border-radius: 999px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
      color: #bfe0ff;
      background: linear-gradient(180deg, #234d8c 0%, #183868 60%, #1b3f72 100%);
      border: 1px solid rgba(var(--mv-c), 1);
      box-shadow: 0 0 0 1px rgba(var(--mv-c), 0.10), 0 0 18px rgba(var(--mv-c), 0.28),
                  inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 0 22px rgba(var(--mv-c), 0.30);
      text-shadow: 0 0 8px rgba(var(--mv-c), 0.6);
      transition: box-shadow 0.2s, border-color 0.2s, background 0.2s;
    }
    .validator-card .manage-validator-btn:hover {
      color: #ffffff;
      background: linear-gradient(180deg, #2a5aa0 0%, #1d4278 60%, #20497f 100%);
      border-color: rgba(var(--mv-c), 1);
      box-shadow: 0 0 0 1px rgba(var(--mv-c), 0.18), 0 0 26px rgba(var(--mv-c), 0.45),
                  inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 0 22px rgba(var(--mv-c), 0.30);
    }
    .validator-card .manage-validator-btn .mv-icon {
      display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
      border-radius: 50%; background: rgba(var(--mv-c), 0.16); border: 1px solid rgba(var(--mv-c), 0.4);
      color: rgb(var(--mv-c)); flex-shrink: 0;
    }
    .validator-card .manage-validator-btn::after {
      content: ''; position: absolute; z-index: -1; top: -30%; bottom: -30%; left: 0; width: 34%;
      background: linear-gradient(105deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.05) 35%,
                  rgba(200, 228, 255, 0.40) 50%, rgba(255, 255, 255, 0.05) 65%, rgba(255, 255, 255, 0) 100%);
      transform: translateX(-160%) skewX(-20deg);
      animation: mvShine 4.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
      pointer-events: none;
    }
    @keyframes mvShine {
      0%        { transform: translateX(-160%) skewX(-20deg); }
      30%, 100% { transform: translateX(460%)  skewX(-20deg); }
    }
    body.power-idle .validator-card .manage-validator-btn::after { animation-play-state: paused; }
    @media (prefers-reduced-motion: reduce) {
      .validator-card .manage-validator-btn::after { animation: none; }
    }

    /* Leader band — amber while waiting, green while leading, muted with no slots */
    .vh-leader-band {
      display: flex; align-items: center; gap: 0.85rem; min-height: 44px; margin-bottom: 1.1rem;
      padding: 0.3rem 0.4rem 0.3rem 1rem; border-radius: 12px;
      background: linear-gradient(90deg, rgba(255, 171, 0, 0.10), rgba(255, 171, 0, 0.02));
      border: 1px solid rgba(255, 171, 0, 0.22);
    }
    .vh-band-icon {
      display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex-shrink: 0;
      border-radius: 50%; background: rgba(255, 171, 0, 0.15); color: var(--warning);
    }
    .vh-leader-band .vh-next-leader { display: inline; min-width: 0; padding: 0; border: none; background: transparent; border-radius: 0; font-size: 0.85rem; font-weight: 500; line-height: 1.3; color: var(--text-primary); white-space: nowrap; text-align: left; }
    .vh-leader-band .vh-next-leader.is-leader { color: var(--success); background: transparent; }
    .vh-band-note { font-size: 0.75rem; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
    .vh-slot-explorer {
      margin-left: auto; flex-shrink: 0; display: inline-flex; align-items: center; gap: 0.45rem; height: 32px; padding: 0 0.9rem;
      border-radius: 999px; font-size: 0.78rem; font-weight: 500; font-family: inherit;
      color: var(--accent-cyan); background: rgba(0, 212, 255, 0.08); border: 1px solid rgba(0, 212, 255, 0.3);
      cursor: pointer; transition: background 0.15s, border-color 0.15s;
    }
    .vh-slot-explorer:hover { background: rgba(0, 212, 255, 0.18); border-color: var(--accent-cyan); }
    .vh-leader-band.is-leader { background: linear-gradient(90deg, rgba(0, 230, 118, 0.14), rgba(0, 230, 118, 0.03)); border-color: rgba(0, 230, 118, 0.35); }
    .vh-leader-band.is-leader .vh-band-icon { background: var(--success); color: #0a1322; }
    .vh-leader-band.is-none { background: rgba(138, 143, 152, 0.05); border-color: rgba(138, 143, 152, 0.2); }
    .vh-leader-band.is-none .vh-band-icon { background: rgba(138, 143, 152, 0.15); color: var(--text-secondary); }
    .vh-leader-band.is-none .vh-next-leader { color: var(--text-secondary); }

    /* Grouped stats: Earnings & stake (cyan) / Health (blue) */
    .validator-card .stats-grid { display: flex; flex-direction: column; gap: 1.1rem; }
    .stat-group { display: flex; flex-direction: column; gap: 0.6rem; container-type: inline-size; }
    .stat-group-label { display: flex; align-items: center; gap: 0.6rem; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
    .stat-group-label::after { content: ''; flex: 1 1 0; height: 1px; background: currentColor; opacity: 0.18; }
    .stat-group-earn .stat-group-label { color: var(--accent-cyan); }
    .stat-group-health .stat-group-label { color: var(--accent-blue); }
    .stat-group-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; align-items: stretch; }
    .validator-card .stat-item { padding: 1rem 1rem 0.9rem; border-radius: 16px; gap: 0.55rem; min-width: 0; }
    .validator-card .stat-value { overflow-wrap: anywhere; }
    .stat-group-earn .stat-item   { background: linear-gradient(180deg, rgba(0, 212, 255, 0.09), rgba(0, 212, 255, 0.03)); border: 1px solid rgba(0, 212, 255, 0.18); }
    .stat-group-health .stat-item { background: linear-gradient(180deg, rgba(77, 166, 255, 0.09), rgba(77, 166, 255, 0.03)); border: 1px solid rgba(77, 166, 255, 0.20); }
    .validator-card .clickable-stat:hover,
    .validator-card .perf-score-wrapper:hover { background: rgba(255, 255, 255, 0.06); }
    .validator-card .stat-label { font-size: 0.75rem; text-transform: none; letter-spacing: 0; color: var(--text-secondary); min-height: 0; margin-bottom: 0; line-height: 1.2; }
    .validator-card .stat-value { font-size: 1.5rem; font-weight: 500; line-height: 1; }
    .validator-card .stat-value.accent { color: var(--text-primary); }
    .validator-card .stat-subtext { font-size: 0.72rem; margin-top: 0; }
    .validator-card .stat-sub-row { margin-top: 0; }
    .validator-card .stat-change { font-size: 0.7rem; margin-top: 0; padding: 0.1rem 0.4rem; border-radius: 999px; background: rgba(255, 255, 255, 0.06); font-family: 'JetBrains Mono', monospace; }
    .validator-card .rb-open-link { font-size: 0.72rem; }
    .validator-card .perf-bar-container { margin-top: 0.1rem; }

    /* Footer expanders */
    .validator-card .validator-action-buttons { margin-top: 1.1rem; gap: 0.75rem; }
    .validator-card .validator-expand-btn { height: 44px; padding: 0 1rem; border-radius: 14px; background: rgba(13, 21, 40, 0.8); font-size: 0.82rem; font-weight: 500; }
    .validator-card .validator-expand-btn .arrow { display: inline-flex; }

    /* Four tiles per row as long as each keeps ~150px; two per row below that
       (measured on the card itself, so a narrow Data Center column wraps too). */
    @container (max-width: 640px) {
      .stat-group-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @supports not (container-type: inline-size) {
      @media (max-width: 768px) {
        .stat-group-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      }
    }
    @media (max-width: 768px) {
      .validator-card { padding: 1.1rem 1rem 1rem; border-radius: 18px; }
      .validator-card .validator-header { flex-direction: column; align-items: stretch; }
      .validator-card .validator-meta { flex-direction: row; align-items: center; }
      .vh-leader-band { flex-wrap: wrap; padding: 0.5rem 0.6rem 0.5rem 0.9rem; }
      .vh-band-note { display: none; }
      .validator-card .stat-value { font-size: 1.25rem; }
    }
    @media (max-width: 480px) {
      .stat-group-grid { gap: 0.5rem; }
      .validator-card .stat-item { padding: 0.8rem; }
      .vh-slot-explorer { margin-left: 0; }
      .validator-card .validator-actions { gap: 0.5rem; }
    }

    /* ═══════════════ TELEGRAM ALERTS MODAL (js/alerts.js) ═══════════════ */
    .tga-lead { font-size: 0.86rem; color: var(--text-secondary); line-height: 1.55; margin: 0 0 0.9rem; }
    .tga-lead b { color: var(--text-primary); font-weight: 600; }
    .tga-steps { margin: 0; padding-left: 1.25rem; display: flex; flex-direction: column; gap: 0.7rem; font-size: 0.86rem; color: var(--text-primary); line-height: 1.5; }
    .tga-steps a { color: var(--accent-cyan); text-decoration: none; font-weight: 600; }
    .tga-steps a:hover { text-decoration: underline; }
    .tga-steps code { font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; color: var(--accent-cyan); }
    .tga-cmd { display: flex; align-items: stretch; gap: 0.5rem; margin: 0.5rem 0 0.35rem; }
    .tga-cmd code { flex: 1 1 auto; min-width: 0; padding: 0.55rem 0.7rem; border-radius: 8px; background: var(--bg-secondary); border: 1px solid var(--border); color: var(--text-primary); font-size: 0.74rem; line-height: 1.45; word-break: break-all; }
    .tga-copy { flex: 0 0 auto; padding: 0 0.9rem; border-radius: 8px; border: 1px solid var(--accent-blue); background: transparent; color: var(--accent-blue); font-family: 'Space Grotesk', sans-serif; font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: all 0.2s; }
    .tga-copy:hover { background: rgba(0, 212, 255, 0.1); color: var(--accent-cyan); border-color: var(--accent-cyan); }
    .tga-copy.is-copied { color: var(--success); border-color: var(--success); }
    .tga-note { font-size: 0.74rem; color: var(--text-dim); }
    @media (max-width: 480px) {
      .tga-cmd { flex-direction: column; }
      .tga-copy { padding: 0.5rem 0.9rem; }
    }

    /* ═══════════════ FLEET HEALTH — My Data Center (js/fleet.js, F4, 2026-10-13) ═══════════════ */
    /* The bar (v2, 2026-10-13): artwork left (img/fleet-art.jpg, X1 letters removed) with a
       crisp vector X1 on top, title + status, ring gauge, Offline / Issues / Epoch, Details.
       The whole border, the HEALTH word, the dot and the ring carry the state colour. */
    .fleet-bar {
      margin: 1.25rem 0 1.5rem; min-height: 86px;
      display: flex; align-items: center;
      background: linear-gradient(90deg, #06101f 0%, #0b1730 40%, #0a1428 100%);
      border: 1px solid; border-radius: 14px;
      position: relative; overflow: hidden;
    }
    /* State colour: green = all healthy, amber = something to watch, red = critical */
    .fleet-bar, .fleet-board { border-color: rgba(0, 230, 118, 0.45); box-shadow: 0 0 0 1px rgba(0, 230, 118, 0.05), 0 0 22px rgba(0, 230, 118, 0.08); }
    .fleet-bar.has-warn, .fleet-board.has-warn { border-color: rgba(255, 171, 0, 0.5); box-shadow: 0 0 0 1px rgba(255, 171, 0, 0.05), 0 0 22px rgba(255, 171, 0, 0.09); }
    .fleet-bar.has-crit, .fleet-board.has-crit { border-color: rgba(255, 82, 82, 0.6); box-shadow: 0 0 0 1px rgba(255, 82, 82, 0.06), 0 0 26px rgba(255, 82, 82, 0.16); }
    .fleet-bar.open { border-bottom-left-radius: 0; border-bottom-right-radius: 0; margin-bottom: 0; }
    .fleet-bar { --fleet-state: var(--success); }
    .fleet-bar.has-warn { --fleet-state: var(--warning); }
    .fleet-bar.has-crit { --fleet-state: var(--danger); }

    .fleet-art {
      flex: 0 0 360px; align-self: stretch; position: relative; overflow: hidden;
      background: url('../img/fleet-art.jpg') center / cover no-repeat;
      -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 60%, transparent 100%);
              mask-image: linear-gradient(90deg, #000 0%, #000 60%, transparent 100%);
    }
    .fleet-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6, 16, 31, 0.05), rgba(11, 23, 48, 0.25) 70%, rgba(11, 23, 48, 0.8)); }
    .fleet-x1 {
      position: absolute; left: 52%; top: calc(50% + 2px); width: 50px; height: auto; z-index: 1;
      transform: translate(-50%, -50%); overflow: visible;
      filter: drop-shadow(0 0 1.5px rgba(190, 240, 255, 0.95)) drop-shadow(0 0 6px rgba(0, 190, 255, 0.85)) drop-shadow(0 0 16px rgba(0, 120, 255, 0.7));
    }
    .fleet-x1 .tube { fill: none; stroke: #2fb8ff; stroke-width: 14; stroke-linecap: butt; stroke-linejoin: bevel; }
    .fleet-x1 .core { fill: none; stroke: #ffffff; stroke-width: 6.5; stroke-linecap: butt; stroke-linejoin: bevel; }

    .fleet-main { flex: 1 1 auto; min-width: 0; margin-left: -2.2rem; padding: 0.7rem 1rem 0.7rem 0; display: flex; flex-direction: column; gap: 0.15rem; position: relative; z-index: 1; }
    .fleet-title { font-weight: 800; font-size: 1.35rem; letter-spacing: 0.02em; line-height: 1.1; color: #fff; }
    .fleet-title em { font-style: normal; color: var(--fleet-state); text-shadow: 0 0 14px color-mix(in srgb, var(--fleet-state) 45%, transparent); }
    .fleet-status { display: flex; align-items: center; gap: 0.45rem; font-size: 0.92rem; font-weight: 600; color: #fff; min-width: 0; }
    .fleet-status::before { content: ''; width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; background: var(--fleet-state); box-shadow: 0 0 10px var(--fleet-state); }
    .fleet-status .t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .fleet-status .c { color: var(--danger); }
    .fleet-status .w { color: var(--warning); }
    .fleet-subline { font-size: 0.8rem; color: #6ea8ff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .fleet-subline b { color: #9cc4ff; font-weight: 600; }

    .fleet-stats { display: flex; align-items: center; flex-shrink: 0; padding-right: 0.5rem; }
    .fleet-ring { position: relative; width: 66px; height: 66px; margin-right: 0.9rem; flex-shrink: 0; }
    .fleet-ring svg { width: 66px; height: 66px; transform: rotate(-90deg); }
    .fleet-ring circle { fill: none; stroke-width: 5; }
    .fleet-ring .track { stroke: rgba(255, 255, 255, 0.08); }
    .fleet-ring .val { stroke: var(--fleet-state); stroke-linecap: round; filter: drop-shadow(0 0 5px var(--fleet-state)); }
    .fleet-ring .txt { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
    .fleet-ring .txt b { font-size: 1.1rem; font-weight: 800; color: #fff; }
    .fleet-ring .txt small { font-size: 0.5rem; letter-spacing: 0.1em; font-weight: 700; color: var(--fleet-state); margin-top: 3px; }
    .fleet-stat {
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      padding: 0 1.1rem; min-width: 78px; line-height: 1;
      border: none; border-left: 1px solid rgba(120, 160, 220, 0.18); background: none; font-family: inherit;
    }
    button.fleet-stat { cursor: pointer; border-radius: 0; transition: background 0.15s; }
    button.fleet-stat:hover { background: rgba(255, 255, 255, 0.04); }
    button.fleet-stat.active { background: rgba(0, 212, 255, 0.1); box-shadow: inset 0 -2px 0 var(--accent-cyan); }
    .fleet-stat b { font-size: 1.5rem; font-weight: 800; }
    .fleet-stat small { font-size: 0.58rem; letter-spacing: 0.1em; font-weight: 700; margin-top: 5px; text-transform: uppercase; }
    .fleet-stat.offline b, .fleet-stat.offline small { color: var(--danger); }
    .fleet-stat.issues b, .fleet-stat.issues small { color: var(--warning); }
    .fleet-stat.ep { align-items: flex-start; }
    .fleet-stat.ep small { order: -1; margin: 0 0 5px; color: #7fb3ff; }
    .fleet-stat.ep b { color: var(--accent-cyan); font-size: 1.4rem; }
    .fleet-bar-btn {
      margin: 0 1rem 0 0.75rem; flex-shrink: 0;
      display: inline-flex; align-items: center; gap: 0.5rem;
      background: rgba(0, 212, 255, 0.06); border: 1px solid rgba(0, 212, 255, 0.55); color: var(--accent-cyan);
      font-weight: 700; font-size: 0.9rem; padding: 0.6rem 1.3rem; border-radius: 9px;
      font-family: inherit; white-space: nowrap; cursor: pointer;
      box-shadow: 0 0 12px rgba(0, 212, 255, 0.15); transition: background 0.15s, box-shadow 0.15s;
    }
    .fleet-bar-btn:hover { background: rgba(0, 212, 255, 0.15); box-shadow: 0 0 16px rgba(0, 212, 255, 0.3); }
    .fleet-bar-btn .chev { font-size: 0.75rem; }
    @media (max-width: 1100px) {
      .fleet-art { flex-basis: 220px; }
      .fleet-stat { padding: 0 0.8rem; min-width: 64px; }
    }

    /* The table (opens under the bar) */
    .fleet-board {
      margin: 0 0 1.5rem;
      background: var(--bg-card);
      border: 1px solid; border-top: none;
      border-radius: 0 0 14px 14px;
      overflow: hidden;
    }
    .fleet-board[hidden] { display: none; }
    .fleet-tbl-wrap { overflow-x: auto; }
    table.fleet-tbl { width: 100%; border-collapse: collapse; font-size: 0.82rem; table-layout: fixed; }
    .fleet-tbl col.c-name { width: 200px; } .fleet-tbl col.c-score { width: 64px; } .fleet-tbl col.c-skip { width: 92px; }
    .fleet-tbl col.c-ver { width: 86px; } .fleet-tbl col.c-deleg { width: 160px; } .fleet-tbl col.c-self { width: 112px; } .fleet-tbl col.c-earn { width: 100px; }
    .fleet-tbl th {
      text-align: left; padding: 0.6rem 0.7rem;
      font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700;
      color: var(--text-secondary); border-bottom: 1px solid var(--border); white-space: nowrap;
      background: rgba(0, 212, 255, 0.04);
    }
    .fleet-tbl th.r, .fleet-tbl td.r { text-align: right; }
    .fleet-tbl td {
      padding: 0.65rem 0.7rem; border-bottom: 1px solid var(--border); vertical-align: middle;
      font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums;
      color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .fleet-tbl tr:last-child td { border-bottom: none; }
    .fleet-tbl tbody tr { cursor: pointer; transition: background 0.15s; }
    .fleet-tbl tbody tr:hover, .fleet-tbl tbody tr:focus-visible { background: var(--bg-card-hover); }
    .fleet-tbl tr.sev-crit { background: rgba(255, 82, 82, 0.06); }
    .fleet-tbl tr.sev-warn { background: rgba(255, 171, 0, 0.05); }
    .fleet-tbl tr.sev-crit:hover { background: rgba(255, 82, 82, 0.1); }
    .fleet-tbl tr.sev-warn:hover { background: rgba(255, 171, 0, 0.09); }
    .fleet-name { font-family: 'Space Grotesk', sans-serif; font-weight: 600; display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
    .fleet-name-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .fleet-name small { display: block; font-weight: 400; font-size: 0.68rem; color: var(--text-dim); font-family: 'JetBrains Mono', monospace; white-space: normal; line-height: 1.5; }
    .fleet-logo {
      width: 26px; height: 26px; border-radius: 50%; background: var(--bg-primary);
      display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
      font-size: 0.72rem; font-weight: 700; color: var(--accent-blue); flex-shrink: 0; border: 1px solid var(--border);
    }
    .fleet-logo img { width: 100%; height: 100%; object-fit: cover; }
    .fleet-issues { font-family: 'Space Grotesk', sans-serif; display: flex; flex-direction: column; gap: 0.25rem; white-space: normal; }
    .fleet-issue { display: block; position: relative; padding-left: 0.95rem; font-size: 0.8rem; line-height: 1.3; color: var(--text-secondary); }
    .fleet-issue::before { content: ''; position: absolute; left: 0; top: 0.42em; width: 7px; height: 7px; border-radius: 50%; background: var(--success); }
    .fleet-issue.crit { color: #ff8a8a; } .fleet-issue.crit::before { background: var(--danger); box-shadow: 0 0 6px var(--danger); }
    .fleet-issue.warn { color: #ffc453; } .fleet-issue.warn::before { background: var(--warning); }
    .fleet-issue b { color: var(--text-primary); font-weight: 600; }
    .fleet-pill { display: inline-block; padding: 0.15rem 0.5rem; border-radius: 999px; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.03em; font-family: 'Space Grotesk', sans-serif; vertical-align: middle; }
    .fleet-pill.ok { background: rgba(0, 230, 118, 0.12); color: var(--success); }
    .fleet-pill.bad { background: rgba(255, 82, 82, 0.14); color: var(--danger); }
    .fleet-pill.warn { background: rgba(255, 171, 0, 0.14); color: var(--warning); }
    .fleet-pill.dim { background: rgba(138, 143, 152, 0.16); color: var(--text-secondary); }
    .fleet-sub { display: block; font-size: 0.66rem; color: var(--text-dim); margin-top: 2px; }
    .fleet-dim { color: var(--text-dim); } .fleet-good { color: var(--success); } .fleet-bad { color: var(--danger); } .fleet-warnc { color: var(--warning); }
    .fleet-empty { padding: 1.5rem 1rem; text-align: center; color: var(--text-dim); font-size: 0.85rem; font-family: 'Space Grotesk', sans-serif; }
    .fleet-foot { padding: 0.6rem 1.25rem; font-size: 0.72rem; color: var(--text-dim); border-top: 1px solid var(--border); display: flex; gap: 1.2rem; flex-wrap: wrap; }
    .fleet-foot code { color: var(--accent-cyan); font-family: 'JetBrains Mono', monospace; }

    /* Phones: the bar wraps, the table becomes stacked cards */
    .fleet-cards { display: none; }
    @media (max-width: 760px) {
      .fleet-bar { flex-wrap: wrap; min-height: 0; }
      .fleet-art { flex: 0 0 100%; height: 84px; background-position: center 59%;
        -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 58%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 58%, transparent 100%); }
      .fleet-x1 { width: 46px; top: 38%; }
      .fleet-main { margin: -0.7rem 0 0; padding: 0 1rem 0.7rem; flex: 1 1 100%; }
      .fleet-title { font-size: 1.25rem; }
      .fleet-status .t, .fleet-subline { white-space: normal; }
      .fleet-stats { flex: 1 1 100%; padding: 0 1rem 0.75rem; }
      .fleet-ring { width: 60px; height: 60px; margin-right: 0.4rem; }
      .fleet-ring svg { width: 60px; height: 60px; }
      .fleet-ring .txt b { font-size: 1rem; }
      .fleet-ring .txt small { font-size: 0.42rem; letter-spacing: 0.06em; }
      .fleet-stat { padding: 0 0.7rem; min-width: 0; flex: 1 1 0; }
      .fleet-stat b { font-size: 1.2rem; }
      .fleet-stat small { font-size: 0.52rem; }
      .fleet-bar-btn { flex: 1 1 100%; justify-content: center; margin: 0 1rem 0.9rem; padding: 0.5rem 1rem; }
      .fleet-tbl-wrap { display: none; }
      .fleet-cards { display: flex; flex-direction: column; }
      .fleet-card { padding: 0.85rem 1rem 0.9rem 0.95rem; border-bottom: 1px solid var(--border); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.35rem 0.75rem; cursor: pointer; }
      .fleet-card:last-child { border-bottom: none; }
      .fleet-card.sev-crit { background: rgba(255, 82, 82, 0.06); }
      .fleet-card.sev-warn { background: rgba(255, 171, 0, 0.05); }
      .fleet-card .fleet-name { font-size: 0.95rem; }
      .fleet-card .fleet-issues { grid-column: 1 / -1; }
      .fleet-card .fleet-kv { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; margin-top: 0.3rem; }
      .fleet-kv div { font-family: 'JetBrains Mono', monospace; font-size: 0.85rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
      .fleet-kv label { display: block; font-family: 'Space Grotesk', sans-serif; font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-dim); margin-bottom: 1px; }
      .fleet-foot { padding: 0.6rem 0.9rem; gap: 0.5rem 1rem; }
    }

    /* ═══════════════ DELEGATOR APR — card tile + modal (js/apr.js, F11, 2026-10-13) ═══════════════ */
    .apr-section .stat-value small { font-size: 0.8rem; color: var(--text-secondary); font-weight: 500; margin-left: 2px; }
    .apr-section .apr-trend.up { color: var(--success); }
    .apr-section .apr-trend.down { color: var(--warning); }
    .apm-hero { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin-bottom: 1rem; }
    .apm-hero > div { background: rgba(0, 212, 255, 0.06); border: 1px solid rgba(0, 212, 255, 0.18); border-radius: 12px; padding: 0.75rem 0.85rem; min-width: 0; }
    .apm-hero label { display: block; font-size: 0.7rem; color: var(--text-secondary); margin-bottom: 0.3rem; }
    .apm-hero b { font-family: 'JetBrains Mono', monospace; font-size: 1.35rem; font-weight: 600; color: var(--success); overflow-wrap: anywhere; }
    .apm-hero b.dim { color: var(--text-primary); }
    .apm-hero span { display: block; font-size: 0.68rem; color: var(--text-dim); margin-top: 0.2rem; }
    .apm-bars { margin: 0.25rem 0 1rem; }
    .apm-bars label { font-size: 0.7rem; color: var(--text-secondary); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; display: block; margin-bottom: 0.5rem; }
    .apm-bar { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr) 3.8rem; align-items: center; gap: 0.6rem; font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; color: var(--text-dim); margin-bottom: 0.3rem; }
    .apm-bar i { display: block; height: 8px; border-radius: 4px; background: rgba(0, 230, 118, 0.75); }
    .apm-bar i.net { background: rgba(0, 212, 255, 0.6); }
    .apm-bar em { font-style: normal; color: var(--text-primary); text-align: right; }
    .apm-rows { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 0.75rem; }
    .apm-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.5rem 0.7rem; border-radius: 8px; background: var(--bg-secondary); font-size: 0.82rem; color: var(--text-secondary); }
    .apm-row b { font-family: 'JetBrains Mono', monospace; color: var(--text-primary); font-weight: 500; text-align: right; }
    .apm-row b small { color: var(--text-dim); font-size: 0.68rem; }
    @media (max-width: 560px) {
      .apm-hero { grid-template-columns: 1fr; }
      .apm-row { flex-direction: column; gap: 0.15rem; }
      .apm-row b { text-align: left; }
    }