:root {
        --bg: #0f0f0f;
        --surface: #1a1a1a;
        --surface2: #242424;
        --border: #333;
        --text: #f2f2f2;
        --muted: #888;
        --accent: #d4f53c;
        --sent: #3ddc84;
        --tried: #ff9f43;
        --onsight: #18dcff;
        --flash: #ffd32a;
        --redpoint: #3ddc84;
        --hangdog: #ff9f43;
        --attempted: #ff6b81;
        --fell: #ff4757;
        --lead: #d4f53c;
        --auto: #c47aff;
        --toprope: #18dcff;
      }
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        -webkit-tap-highlight-color: transparent;
      }
      body {
        background: var(--bg);
        color: var(--text);
        font-family: "DM Sans", sans-serif;
        min-height: 100vh;
        overflow-x: hidden;
      }

      /* Desktop layout */
      /* Light mode */
      body.light {
        --bg: #f5f5f0;
        --surface: #ffffff;
        --surface2: #eeeeea;
        --border: #ddddd8;
        --text: #1a1a1a;
        --muted: #888;
        --accent: #5a8a00;
        --sent: #1a9e50;
        --tried: #d4700a;
        --onsight: #0088aa;
        --flash: #b8960a;
        --redpoint: #1a9e50;
        --hangdog: #d4700a;
        --attempted: #cc3344;
        --lead: #5a8a00;
        --auto: #7a40cc;
        --toprope: #0088aa;
        --wild: #7a40cc;
      }

      /* Theme toggle button */
      .theme-btn {
        background: none;
        border: 1px solid var(--border);
        border-radius: 8px;
        color: var(--muted);
        padding: 4px 10px;
        font-size: 14px;
        cursor: pointer;
        line-height: 1;
      }
      .theme-btn:hover {
        border-color: var(--text);
        color: var(--text);
      }

      @media (min-width: 768px) {
        .top-tabs {
          max-width: 780px;
          margin: 0 auto;
        }
        .header {
          max-width: 780px;
          margin: 0 auto;
        }
        .sub-tabs {
          max-width: 780px;
          margin: 0 auto;
        }
        .filters {
          max-width: 780px;
          margin: 0 auto;
        }
        .filter-breakdown {
          max-width: 780px;
          margin: 0 auto;
        }
        .zones {
          max-width: 780px;
          margin: 0 auto;
        }
        .zone-header {
          top: 128px;
        }
        .summary-page {
          max-width: 780px;
          margin: 0 auto;
        }
        .dashboard-page {
          max-width: 780px;
          margin: 0 auto;
          padding: 0 0 100px;
        }
        .calendar-page {
          max-width: 780px;
          margin: 0 auto;
        }

        /* Bigger fonts on desktop */
        .route-name {
          font-size: 17px !important;
        }
        .route-meta {
          font-size: 12px !important;
        }
        .zone-label {
          font-size: 26px !important;
        }
        .logo {
          font-size: 30px !important;
        }
        .status-pill {
          font-size: 11px !important;
          padding: 3px 9px !important;
        }
        .filter-btn {
          font-size: 12px !important;
          padding: 6px 14px !important;
        }
        .top-tab {
          font-size: 13px !important;
          padding: 16px 20px !important;
        }
        .log-btn {
          font-size: 12px !important;
          padding: 11px 8px !important;
        }
        .log-note {
          font-size: 15px !important;
        }
        .dash-card-val {
          font-size: 32px !important;
        }
        .dash-card-label {
          font-size: 12px !important;
        }
        .dash-title {
          font-size: 22px !important;
        }
        .summary-table td {
          padding: 10px 8px !important;
          font-size: 14px !important;
        }
        .summary-table th {
          font-size: 12px !important;
        }
        .log-entry {
          padding: 10px 12px !important;
        }
        .entry-type-label {
          font-size: 12px !important;
        }
        .entry-note {
          font-size: 13px !important;
        }
        .stat-val,
        .stat-label {
          font-size: 13px !important;
        }
        .gym-tag {
          font-size: 13px !important;
          padding: 10px 14px !important;
        }
        .gym-tag-name {
          font-size: 14px !important;
        }
        .gym-tag-label {
          font-size: 10px !important;
        }
      }

      /* TOP TABS */
      .top-tabs {
        display: flex;
        background: var(--bg);
        border-bottom: 1px solid var(--border);
        position: sticky;
        top: 0;
        z-index: 200;
        overflow-x: auto;
        scrollbar-width: none;
      }
      .top-tabs::-webkit-scrollbar {
        display: none;
      }
      .top-tab {
        flex-shrink: 0;
        padding: 13px 14px;
        font-family: "DM Mono", monospace;
        font-size: 11px;
        color: var(--muted);
        cursor: pointer;
        letter-spacing: 0.5px;
        border-bottom: 2px solid transparent;
        transition: all 0.15s;
        white-space: nowrap;
      }
      .top-tab.active {
        color: var(--accent);
        border-bottom-color: var(--accent);
      }

      /* HEADER */
      .header {
        background: var(--bg);
        border-bottom: 1px solid var(--border);
        padding: 10px 20px 10px;
      }
      .header-top {
        display: flex;
        align-items: center;
        gap: 10px;
      }
      .header.has-stats .header-top {
        margin-bottom: 8px;
      }
      .logo {
        font-family: "Bebas Neue", sans-serif;
        font-size: 24px;
        letter-spacing: 2px;
        color: var(--accent);
        line-height: 1;
      }
      .gym-tag {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        cursor: pointer;
        padding: 8px 12px;
        border-radius: 12px;
        border: 1px solid var(--border);
        background: var(--surface);
        color: var(--text);
        font-family: "DM Mono", monospace;
        font-size: 11px;
        letter-spacing: 0.4px;
        transition: all 0.15s;
      }
      .gym-tag:hover {
        border-color: var(--accent);
      }
      .gym-tag:active {
        transform: translateY(1px);
      }
      .gym-tag.switched {
        border-color: var(--accent);
        box-shadow: 0 0 0 2px rgba(212, 245, 60, 0.16);
      }
      .gym-tag-label {
        color: var(--muted);
        font-size: 9px;
        letter-spacing: 1px;
      }
      .gym-tag-name {
        color: var(--accent);
        font-family: "DM Sans", sans-serif;
        font-size: 13px;
        font-weight: 500;
        letter-spacing: 0;
      }
      .gym-tag-caret {
        color: var(--muted);
        font-size: 12px;
        line-height: 1;
      }
      .type-badge {
        font-family: "DM Mono", monospace;
        font-size: 10px;
        padding: 2px 8px;
        border-radius: 10px;
        margin-left: 4px;
      }
      .type-badge.lead {
        background: rgba(232, 255, 71, 0.15);
        color: var(--lead);
      }
      .type-badge.auto {
        background: rgba(196, 122, 255, 0.15);
        color: var(--auto);
      }
      .type-badge.toprope {
        background: rgba(71, 201, 255, 0.15);
        color: var(--toprope);
      }
      .stats-bar {
        display: flex;
        gap: 12px;
        font-family: "DM Mono", monospace;
        font-size: 11px;
        flex-wrap: wrap;
      }
      .stat {
        display: flex;
        align-items: center;
        gap: 4px;
      }
      .stat-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
      }
      .stat-dot.sent {
        background: var(--sent);
      }
      .stat-dot.tried {
        background: var(--tried);
      }
      .stat-dot.open {
        background: var(--border);
        border: 1px solid var(--muted);
      }
      .stat-val {
        color: var(--text);
      }
      .stat-label {
        color: var(--muted);
      }

      /* FILTERS */
      .filters {
        padding: 8px 16px;
        display: flex;
        gap: 6px;
        overflow-x: auto;
        scrollbar-width: none;
        border-bottom: 1px solid var(--border);
        background: var(--bg);
      }
      .filters::-webkit-scrollbar {
        display: none;
      }
      .filter-breakdown {
        padding: 6px 16px 8px;
        display: flex;
        border-bottom: 1px solid var(--border);
        background: var(--bg);
        font-family: "DM Mono", monospace;
        font-size: 10px;
        color: var(--muted);
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
      }
      .filter-breakdown strong {
        color: var(--text);
        font-weight: 500;
      }
      .filter-btn {
        flex-shrink: 0;
        padding: 4px 10px;
        border-radius: 20px;
        border: 1px solid var(--border);
        background: transparent;
        color: var(--muted);
        font-family: "DM Mono", monospace;
        font-size: 10px;
        cursor: pointer;
        transition: all 0.15s;
      }
      .filter-btn.active {
        background: var(--accent);
        border-color: var(--accent);
        color: #000;
      }

      .page {
        display: none;
      }
      .page.active {
        display: block;
      }

      .zones {
        padding: 0 0 100px;
      }
      .zone-header {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 16px 20px 6px;
        position: sticky;
        top: 108px;
        background: var(--bg);
        z-index: 10;
      }
      .zone-label {
        font-family: "Bebas Neue", sans-serif;
        font-size: 20px;
        letter-spacing: 2px;
        color: var(--accent);
      }
      .zone-date {
        font-family: "DM Mono", monospace;
        font-size: 10px;
        color: var(--muted);
      }
      .zone-progress {
        margin-left: auto;
        font-family: "DM Mono", monospace;
        font-size: 11px;
        color: var(--muted);
      }

      .route-card {
        margin: 0 12px 6px;
        border-radius: 12px;
        background: var(--surface);
        border: 1px solid var(--border);
        overflow: hidden;
        transition: border-color 0.2s;
      }
      .route-card.is-onsight {
        border-color: var(--onsight);
      }
      .route-card.is-flash {
        border-color: var(--flash);
      }
      .route-card.is-sent {
        border-color: var(--sent);
      }
      .route-card.is-tried {
        border-color: var(--tried);
      }
      .route-card.is-tbc {
        border-style: dashed;
        opacity: 0.6;
      }
      .route-main {
        display: flex;
        align-items: center;
        padding: 10px 12px;
        gap: 10px;
        cursor: pointer;
      }
      .color-stripe {
        width: 4px;
        height: 38px;
        border-radius: 2px;
        flex-shrink: 0;
      }
      .pie-wrap {
        flex-shrink: 0;
        width: 32px;
        height: 32px;
      }
      .pie-svg {
        width: 32px;
        height: 32px;
        transform: rotate(-90deg);
      }
      .pie-bg {
        fill: none;
        stroke: var(--surface2);
        stroke-width: 3.5;
      }
      .pie-fill {
        fill: none;
        stroke-width: 3.5;
        stroke-linecap: round;
      }
      .pie-special {
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        border: 2px solid;
        border-radius: 50%;
        font-family: "DM Mono", monospace;
      }
      .pie-special.wild {
        border-color: #c47aff;
        color: #c47aff;
      }
      .pie-special.tbc {
        border-color: var(--muted);
        color: var(--muted);
        border-style: dashed;
      }
      .route-info {
        flex: 1;
        min-width: 0;
      }
      .route-name {
        font-size: 14px;
        font-weight: 500;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-bottom: 1px;
      }
      .route-name.tbc {
        color: var(--muted);
        font-weight: 400;
      }
      .route-meta {
        font-family: "DM Mono", monospace;
        font-size: 10px;
        color: var(--muted);
        display: flex;
        gap: 6px;
      }
      .route-badges {
        display: flex;
        gap: 3px;
      }
      .badge {
        font-size: 12px;
      }
      .route-status {
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 2px;
      }
      .status-pill {
        font-family: "DM Mono", monospace;
        font-size: 9px;
        padding: 2px 6px;
        border-radius: 8px;
        white-space: nowrap;
      }
      .status-pill.onsight {
        background: rgba(0, 229, 255, 0.15);
        color: var(--onsight);
      }
      .status-pill.flash {
        background: rgba(255, 229, 0, 0.15);
        color: var(--flash);
      }
      .status-pill.redpoint {
        background: rgba(71, 255, 154, 0.15);
        color: var(--redpoint);
      }
      .status-pill.tried {
        background: rgba(255, 154, 71, 0.15);
        color: var(--tried);
      }
      .status-pill.open {
        background: var(--surface2);
        color: var(--muted);
      }
      .attempt-count {
        font-family: "DM Mono", monospace;
        font-size: 9px;
        color: var(--muted);
      }

      .route-log {
        display: none;
        padding: 0 12px 12px;
        border-top: 1px solid var(--border);
      }
      .route-card.expanded .route-log {
        display: block;
      }
      .log-type-label {
        font-family: "DM Mono", monospace;
        font-size: 10px;
        color: var(--muted);
        margin: 10px 0 5px;
        letter-spacing: 0.5px;
      }
      .log-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 5px;
        margin-bottom: 6px;
      }
      .log-btn {
        padding: 8px 5px;
        border-radius: 8px;
        border: 1px solid var(--border);
        background: transparent;
        color: var(--text);
        font-family: "DM Mono", monospace;
        font-size: 10px;
        cursor: pointer;
        text-align: center;
        line-height: 1.4;
      }
      .log-btn.onsight {
        border-color: var(--onsight);
        color: var(--onsight);
      }
      .log-btn.flash {
        border-color: var(--flash);
        color: var(--flash);
      }
      .log-btn.redpoint {
        border-color: var(--redpoint);
        color: var(--redpoint);
      }
      .log-btn.hangdog {
        border-color: var(--hangdog);
        color: var(--hangdog);
      }
      .log-btn.attempted {
        border-color: var(--attempted);
        color: var(--attempted);
      }
      .log-btn.fell {
        border-color: var(--fell);
        color: var(--fell);
      }
      .log-btn.reset {
        color: var(--muted);
      }
      .log-btn:active {
        opacity: 0.7;
      }
      .tbc-banner {
        font-family: "DM Mono", monospace;
        font-size: 10px;
        color: var(--muted);
        background: var(--surface2);
        border-radius: 6px;
        padding: 5px 8px;
        margin: 8px 0 2px;
      }
      .log-note {
        width: 100%;
        background: var(--surface2);
        border: 1px solid var(--border);
        border-radius: 8px;
        color: var(--text);
        font-family: "DM Sans", sans-serif;
        font-size: 13px;
        padding: 7px 10px;
        resize: none;
        outline: none;
        min-height: 48px;
        margin-bottom: 8px;
      }
      .log-note::placeholder {
        color: var(--muted);
      }
      .log-note:focus {
        border-color: var(--accent);
      }
      .log-date-wrap {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 8px;
      }
      .log-date-label {
        font-family: "DM Mono", monospace;
        font-size: 10px;
        color: var(--muted);
        flex-shrink: 0;
      }
      .log-date {
        background: var(--surface2);
        border: 1px solid var(--border);
        border-radius: 8px;
        color: var(--text);
        font-family: "DM Mono", monospace;
        font-size: 11px;
        padding: 6px 10px;
        outline: none;
        flex: 1;
      }
      .log-date:focus {
        border-color: var(--accent);
      }
      input[type="date"]::-webkit-calendar-picker-indicator {
        filter: invert(0.6);
      }
      .log-history {
        display: flex;
        flex-direction: column;
        gap: 4px;
      }
      .log-entry {
        background: var(--surface2);
        border-radius: 6px;
        padding: 6px 8px;
        display: flex;
        gap: 7px;
        align-items: flex-start;
      }
      .entry-icon {
        font-size: 12px;
        flex-shrink: 0;
        line-height: 1.5;
      }
      .entry-body {
        flex: 1;
        min-width: 0;
      }
      .entry-header {
        display: flex;
        align-items: center;
        gap: 6px;
      }
      .entry-type-label {
        font-family: "DM Mono", monospace;
        font-size: 10px;
        font-weight: 500;
      }
      .entry-date {
        font-family: "DM Mono", monospace;
        font-size: 9px;
        color: var(--muted);
      }
      .entry-note {
        font-size: 12px;
        color: var(--text);
        word-break: break-word;
        margin-top: 2px;
      }
      .entry-del {
        background: none;
        border: none;
        color: var(--muted);
        cursor: pointer;
        font-size: 13px;
        padding: 0 2px;
        flex-shrink: 0;
      }

      /* SUMMARY */
      .summary-page {
        padding: 0 0 100px;
      }
      .summary-header {
        padding: 16px 20px 4px;
      }
      .summary-title {
        font-family: "Bebas Neue", sans-serif;
        font-size: 22px;
        letter-spacing: 2px;
        color: var(--accent);
      }
      .summary-date {
        font-family: "DM Mono", monospace;
        font-size: 11px;
        color: var(--muted);
        margin-top: 2px;
      }
      .summary-empty {
        text-align: center;
        padding: 60px 20px;
        color: var(--muted);
        font-family: "DM Mono", monospace;
        font-size: 12px;
        line-height: 2;
      }
      .summary-totals {
        margin: 10px 12px 0;
        padding: 10px 14px;
        background: var(--surface);
        border-radius: 10px;
        border: 1px solid var(--border);
        display: flex;
        gap: 18px;
        flex-wrap: wrap;
      }
      .tot-item {
        display: flex;
        flex-direction: column;
        gap: 2px;
      }
      .tot-val {
        font-family: "Bebas Neue", sans-serif;
        font-size: 22px;
        color: var(--text);
        line-height: 1;
      }
      .tot-label {
        font-family: "DM Mono", monospace;
        font-size: 10px;
        color: var(--muted);
      }
      .summary-table {
        width: calc(100% - 24px);
        margin: 10px 12px 0;
        border-collapse: collapse;
        font-size: 12px;
      }
      .summary-table th {
        font-family: "DM Mono", monospace;
        font-size: 10px;
        color: var(--muted);
        text-align: left;
        padding: 5px 6px;
        border-bottom: 1px solid var(--border);
      }
      .summary-table td {
        padding: 7px 6px;
        border-bottom: 1px solid var(--border);
        vertical-align: middle;
      }
      .summary-table tr:last-child td {
        border-bottom: none;
      }
      .sum-zone {
        font-family: "DM Mono", monospace;
        font-size: 11px;
        color: var(--accent);
      }
      .sum-color {
        display: inline-block;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        margin-right: 4px;
        vertical-align: middle;
      }
      .sum-name {
        font-size: 13px;
        font-weight: 500;
      }
      .sum-pie {
        font-family: "DM Mono", monospace;
        font-size: 10px;
        color: var(--muted);
      }
      .sum-result {
        font-family: "DM Mono", monospace;
        font-size: 10px;
        padding: 2px 6px;
        border-radius: 7px;
        white-space: nowrap;
      }
      .sum-result.onsight {
        background: rgba(0, 229, 255, 0.15);
        color: var(--onsight);
      }
      .sum-result.flash {
        background: rgba(255, 229, 0, 0.15);
        color: var(--flash);
      }
      .sum-result.redpoint {
        background: rgba(71, 255, 154, 0.15);
        color: var(--redpoint);
      }
      .sum-result.hangdog {
        background: rgba(255, 154, 71, 0.15);
        color: var(--hangdog);
      }
      .sum-result.attempted {
        background: rgba(255, 107, 107, 0.15);
        color: var(--attempted);
      }
      .sum-result.fell {
        background: rgba(255, 51, 51, 0.15);
        color: var(--fell);
      }

      .empty-state {
        text-align: center;
        padding: 60px 20px;
        color: var(--muted);
        font-family: "DM Mono", monospace;
        font-size: 12px;
      }
      .fab {
        position: fixed;
        bottom: 24px;
        right: 16px;
        width: 42px;
        height: 42px;
        border-radius: 50%;
        background: var(--accent);
        color: #000;
        border: none;
        font-size: 18px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 20px rgba(232, 255, 71, 0.3);
        z-index: 300;
      }

      /* CALENDAR */
      .calendar-page {
        padding: 0 0 100px;
      }
      .cal-header {
        padding: 16px 20px 0;
        display: flex;
        align-items: center;
        gap: 12px;
      }
      .cal-title {
        font-family: "Bebas Neue", sans-serif;
        font-size: 22px;
        letter-spacing: 2px;
        color: var(--accent);
        flex: 1;
      }
      .cal-nav {
        background: none;
        border: 1px solid var(--border);
        color: var(--text);
        border-radius: 8px;
        width: 32px;
        height: 32px;
        font-size: 16px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .cal-nav:active {
        background: var(--surface2);
      }
      .cal-grid {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 2px;
        padding: 12px 12px 0;
      }
      .cal-dow {
        font-family: "DM Mono", monospace;
        font-size: 9px;
        color: var(--muted);
        text-align: center;
        padding: 4px 0;
      }
      .cal-day {
        aspect-ratio: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        cursor: pointer;
        position: relative;
        border: 1px solid transparent;
        transition: all 0.1s;
      }
      .cal-day:active {
        background: var(--surface2);
      }
      .cal-day.empty {
        cursor: default;
      }
      .cal-day.today {
        border-color: var(--accent);
      }
      .cal-day.selected {
        background: var(--accent);
      }
      .cal-day.selected .cal-day-num {
        color: #000;
      }
      .cal-day.has-logs .cal-day-num {
        color: var(--text);
      }
      .cal-day-num {
        font-family: "DM Mono", monospace;
        font-size: 12px;
        color: var(--muted);
      }
      .cal-day.has-logs .cal-day-num {
        color: var(--text);
        font-weight: 500;
      }
      .cal-dots {
        display: flex;
        gap: 2px;
        margin-top: 2px;
      }
      .cal-dot {
        width: 4px;
        height: 4px;
        border-radius: 50%;
      }

      .day-detail {
        margin: 12px 12px 0;
      }
      .day-detail-title {
        font-family: "DM Mono", monospace;
        font-size: 11px;
        color: var(--muted);
        margin-bottom: 8px;
        letter-spacing: 0.5px;
      }
      .day-empty {
        font-family: "DM Mono", monospace;
        font-size: 11px;
        color: var(--muted);
        text-align: center;
        padding: 24px 0;
      }

      /* DASHBOARD */
      .dash-filter-row {
        display: flex;
        gap: 6px;
        overflow-x: auto;
        scrollbar-width: none;
      }
      .dash-filter-row::-webkit-scrollbar {
        display: none;
      }
      .dash-filter-btn {
        flex-shrink: 0;
        padding: 4px 12px;
        border-radius: 20px;
        border: 1px solid var(--border);
        background: transparent;
        color: var(--muted);
        font-family: "DM Mono", monospace;
        font-size: 10px;
        cursor: pointer;
        transition: all 0.15s;
        white-space: nowrap;
      }
      .dash-filter-btn.active {
        background: var(--accent);
        border-color: var(--accent);
        color: #000;
      }
      .dash-filter-label {
        font-family: "DM Mono", monospace;
        font-size: 10px;
        color: var(--muted);
        margin: 10px 0 5px;
        letter-spacing: 0.5px;
      }
      .log-flag-row {
        display: flex;
        gap: 6px;
        margin-bottom: 6px;
      }
      .log-flag-btn {
        flex: 1;
        padding: 8px 6px;
        border-radius: 8px;
        border: 1px solid var(--border);
        background: transparent;
        color: var(--muted);
        font-family: "DM Mono", monospace;
        font-size: 10px;
        cursor: pointer;
        text-align: center;
      }
      .log-flag-btn.active-lf {
        border-color: #ff9a47;
        color: #ff9a47;
        background: rgba(255, 154, 71, 0.1);
      }
      .dashboard-page {
        padding: 0 16px 100px;
      }
      .dash-section {
        margin-top: 20px;
      }
      .dash-title {
        font-family: "Bebas Neue", sans-serif;
        font-size: 18px;
        letter-spacing: 2px;
        color: var(--accent);
        margin-bottom: 10px;
      }
      .dash-cards {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-bottom: 4px;
      }
      .dash-card {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 10px;
        padding: 12px 14px;
      }
      .dash-card-val {
        font-family: "DM Mono", monospace;
        font-size: 28px;
        line-height: 1;
      }
      .dash-card-label {
        font-family: "DM Mono", monospace;
        font-size: 10px;
        color: var(--muted);
        margin-top: 2px;
      }

      .gym-compare-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
      }
      .gym-compare-card {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 14px;
      }
      .gym-compare-top {
        display: flex;
        align-items: baseline;
        gap: 8px;
        margin-bottom: 10px;
        flex-wrap: wrap;
      }
      .gym-compare-name {
        font-family: "Bebas Neue", sans-serif;
        font-size: 22px;
        letter-spacing: 1px;
        color: var(--text);
        line-height: 1;
      }
      .gym-compare-sub {
        font-family: "DM Mono", monospace;
        font-size: 10px;
        color: var(--muted);
      }
      .gym-progress-track {
        height: 10px;
        background: var(--surface2);
        border-radius: 999px;
        overflow: hidden;
        display: flex;
        margin-bottom: 10px;
      }
      .gym-progress-seg {
        height: 100%;
      }
      .gym-metrics {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
      }
      .gym-metric {
        background: var(--surface2);
        border-radius: 10px;
        padding: 10px 12px;
      }
      .gym-metric-val {
        font-family: "DM Mono", monospace;
        font-size: 18px;
        color: var(--text);
        line-height: 1.1;
      }
      .gym-metric-label {
        font-family: "DM Mono", monospace;
        font-size: 10px;
        color: var(--muted);
        margin-top: 4px;
      }
      .gym-compare-row {
        display: grid;
        grid-template-columns: 90px 1fr 42px;
        gap: 8px;
        align-items: center;
        margin-bottom: 8px;
      }
      .gym-compare-row:last-child {
        margin-bottom: 0;
      }
      .gym-compare-label {
        font-family: "DM Mono", monospace;
        font-size: 10px;
        color: var(--muted);
      }
      .gym-compare-bar {
        height: 8px;
        background: var(--surface2);
        border-radius: 999px;
        overflow: hidden;
      }
      .gym-compare-fill {
        height: 100%;
        background: var(--accent);
        border-radius: 999px;
      }
      .dash-bar-row {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 6px;
      }
      .dash-bar-label {
        font-family: "DM Mono", monospace;
        font-size: 10px;
        color: var(--muted);
        width: 32px;
        text-align: right;
        flex-shrink: 0;
      }
      .dash-bar-track {
        flex: 1;
        height: 8px;
        background: var(--surface2);
        border-radius: 4px;
        overflow: hidden;
      }
      .dash-bar-fill {
        height: 100%;
        border-radius: 4px;
        transition: width 0.4s;
      }
      .dash-bar-count {
        font-family: "DM Mono", monospace;
        font-size: 10px;
        color: var(--muted);
        width: 20px;
        flex-shrink: 0;
      }
      .dash-type-row {
        display: flex;
        gap: 6px;
        margin-bottom: 6px;
        align-items: center;
      }
      .dash-type-icon {
        font-size: 13px;
        width: 20px;
      }
      .dash-type-label {
        font-family: "DM Mono", monospace;
        font-size: 10px;
        color: var(--muted);
        flex: 1;
      }
      .dash-type-val {
        font-family: "DM Mono", monospace;
        font-size: 11px;
        color: var(--text);
      }
      .dash-streak {
        font-family: "Bebas Neue", sans-serif;
        font-size: 40px;
        color: var(--accent);
      }
      .dash-streak-label {
        font-family: "DM Mono", monospace;
        font-size: 10px;
        color: var(--muted);
      }

      /* RETIRED MODAL */
      .retired-modal-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.7);
        z-index: 500;
        align-items: flex-end;
      }
      .retired-modal-overlay.open {
        display: flex;
      }
      .retired-modal {
        background: var(--surface);
        border-top: 1px solid var(--border);
        border-radius: 16px 16px 0 0;
        width: 100%;
        max-height: 80vh;
        overflow-y: auto;
        padding-bottom: 32px;
      }
      .retired-modal-header {
        padding: 16px 20px 12px;
        display: flex;
        align-items: center;
        gap: 10px;
        border-bottom: 1px solid var(--border);
        position: sticky;
        top: 0;
        background: var(--surface);
      }
      .retired-modal-title {
        font-family: "Bebas Neue", sans-serif;
        font-size: 20px;
        letter-spacing: 2px;
        color: var(--accent);
        flex: 1;
      }
      .retired-modal-close {
        background: none;
        border: 1px solid var(--border);
        color: var(--muted);
        border-radius: 8px;
        padding: 4px 10px;
        font-family: "DM Mono", monospace;
        font-size: 11px;
        cursor: pointer;
      }
      .retired-version {
        padding: 12px 16px 4px;
        font-family: "DM Mono", monospace;
        font-size: 10px;
        color: var(--muted);
        letter-spacing: 0.5px;
        border-bottom: 1px solid var(--border);
      }
      .retired-route {
        padding: 10px 16px;
        border-bottom: 1px solid var(--border);
      }
      .retired-route-header {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 6px;
      }
      .retired-route-name {
        font-size: 14px;
        font-weight: 500;
        color: var(--muted);
      }
      .retired-route-meta {
        font-family: "DM Mono", monospace;
        font-size: 10px;
        color: var(--muted);
        display: flex;
        gap: 8px;
      }
      .retired-no-logs {
        font-family: "DM Mono", monospace;
        font-size: 10px;
        color: var(--muted);
        padding: 4px 0;
        font-style: italic;
      }

      /* SUB TABS */
      .sub-tabs {
        display: flex;
        background: var(--bg);
        border-bottom: 1px solid var(--border);
        overflow-x: auto;
        scrollbar-width: none;
      }
      .sub-tabs::-webkit-scrollbar {
        display: none;
      }
      .sub-tab {
        flex-shrink: 0;
        padding: 10px 16px;
        font-family: "DM Mono", monospace;
        font-size: 11px;
        color: var(--muted);
        cursor: pointer;
        letter-spacing: 0.5px;
        border-bottom: 2px solid transparent;
        transition: all 0.15s;
      }
      .sub-tab.active {
        color: var(--text);
        border-bottom-color: var(--text);
      }

      /* GYM SWITCHER */
      .gym-modal-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.7);
        z-index: 500;
        align-items: flex-end;
      }
      .gym-modal-overlay.open {
        display: flex;
      }
      .gym-modal {
        background: var(--surface);
        border-top: 1px solid var(--border);
        border-radius: 16px 16px 0 0;
        width: 100%;
        padding: 16px 0 32px;
      }
      .gym-modal-title {
        font-family: "DM Mono", monospace;
        font-size: 11px;
        color: var(--muted);
        padding: 0 20px 12px;
        letter-spacing: 0.5px;
      }
      .gym-option {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px 20px;
        cursor: pointer;
        transition: all 0.12s;
        margin: 0 10px;
        border: 1px solid transparent;
        border-radius: 14px;
      }
      .gym-option:active {
        background: var(--surface2);
      }
      .gym-option.active {
        background: rgba(212, 245, 60, 0.08);
        border-color: var(--accent);
      }
      .gym-option-main {
        flex: 1;
        min-width: 0;
      }
      .gym-option-head {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
      }
      .gym-option-name {
        font-size: 15px;
        font-weight: 500;
        flex: 0 1 auto;
      }
      .gym-option-sub {
        font-family: "DM Mono", monospace;
        font-size: 10px;
        color: var(--muted);
        margin-top: 3px;
      }
      .gym-option-badge {
        display: none;
        padding: 2px 7px;
        border-radius: 999px;
        background: rgba(212, 245, 60, 0.16);
        color: var(--accent);
        font-family: "DM Mono", monospace;
        font-size: 9px;
        letter-spacing: 0.6px;
      }
      .gym-option.active .gym-option-badge {
        display: inline-flex;
      }
      .gym-option-check {
        color: var(--accent);
        font-size: 18px;
        font-weight: 700;
      }
      .gym-option.active .gym-option-name {
        color: var(--accent);
      }
      .gym-add {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px 20px;
        color: var(--muted);
        font-family: "DM Mono", monospace;
        font-size: 12px;
        border-top: 1px solid var(--border);
        margin-top: 8px;
        cursor: pointer;
      }
      .gym-add:active {
        background: var(--surface2);
      }
      .gym-data-row {
        display: flex;
        gap: 0;
        border-top: 1px solid var(--border);
      }
      .gym-data-btn {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 14px 16px;
        color: var(--muted);
        font-family: "DM Mono", monospace;
        font-size: 11px;
        cursor: pointer;
        letter-spacing: 0.3px;
      }
      .gym-data-btn:active {
        background: var(--surface2);
      }
      .gym-data-btn:first-child {
        border-right: 1px solid var(--border);
      }

      .modal-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.68);
        display: none;
        align-items: center;
        justify-content: center;
        z-index: 1000;
        padding: 16px;
      }
      .modal-overlay.open {
        display: flex;
      }
      .modal {
        width: min(720px, 100%);
        max-height: 85vh;
        overflow: auto;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 16px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
      }
      .modal-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 16px;
        border-bottom: 1px solid var(--border);
        position: sticky;
        top: 0;
        background: var(--surface);
        z-index: 1;
      }
      .modal-title {
        font-weight: 700;
      }
      .modal-close {
        background: none;
        border: 1px solid var(--border);
        color: var(--text);
        border-radius: 10px;
        padding: 4px 10px;
        cursor: pointer;
      }
      .modal-body {
        padding: 14px 16px;
      }