:root {
      --bg: #0d1014;
      --panel: #151b22;
      --panel-2: #1c242d;
      --line: rgba(255,255,255,0.08);
      --text: #eef4f7;
      --muted: #8ca0ad;
      --red: #ff6b57;
      --teal: #57dbc6;
      --amber: #ffbf69;
    }

    * { box-sizing: border-box; }
    body {
      margin: 0;
      font-family: "Segoe UI", system-ui, sans-serif;
      background:
        radial-gradient(circle at top left, rgba(255,107,87,0.18), transparent 28%),
        radial-gradient(circle at top right, rgba(87,219,198,0.14), transparent 26%),
        linear-gradient(180deg, #10151b 0%, #0d1014 100%);
      color: var(--text);
      min-height: 100vh;
    }

    nav {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 14px 24px;
      border-bottom: 1px solid var(--line);
      background: rgba(13,16,20,0.9);
      backdrop-filter: blur(8px);
      position: sticky;
      top: 0;
      z-index: 30;
    }
    nav a { color: #a5b4be; text-decoration: none; }
    nav a:hover { color: #fff; }
    .sep { color: #4d5a63; }
    .current { color: #fff; }
    .spacer { flex: 1; }
    #nav-auth { position: relative; }
    #nav-auth-btn {
      background: none;
      border: 1px solid var(--line);
      border-radius: 999px;
      color: #b7c5ce;
      font-size: 0.78rem;
      padding: 6px 12px;
      cursor: pointer;
      text-decoration: none;
    }
    #nav-auth-btn.authed { color: var(--teal); border-color: rgba(87,219,198,0.28); }
    #nav-auth-dropdown {
      display: none;
      position: absolute;
      right: 0;
      top: calc(100% + 8px);
      background: #12171d;
      border: 1px solid var(--line);
      border-radius: 10px;
      min-width: 160px;
      overflow: hidden;
    }
    #nav-auth-dropdown.open { display: block; }
    .nav-dd-item {
      width: 100%;
      display: block;
      background: none;
      border: none;
      color: #b7c5ce;
      text-decoration: none;
      text-align: left;
      padding: 10px 14px;
      font: inherit;
      cursor: pointer;
    }
    .nav-dd-item:hover { background: rgba(255,255,255,0.04); color: #fff; }

    .shell {
      max-width: 1680px;
      margin: 0 auto;
      padding: 18px 18px 40px;
    }

    .hero {
      display: grid;
      grid-template-columns: 1.1fr 0.9fr;
      gap: 28px;
      align-items: stretch;
      margin-bottom: 16px;
    }
    .hero-main, .hero-side, .gym-card {
      background: linear-gradient(180deg, rgba(28,36,45,0.88), rgba(18,24,31,0.96));
      border: 1px solid var(--line);
      border-radius: 24px;
      box-shadow: 0 24px 80px rgba(0,0,0,0.28);
    }
    .hero-main {
      padding: 20px;
      position: relative;
      overflow: hidden;
    }
    .hero-main::after {
      content: "";
      position: absolute;
      inset: auto -10% -35% auto;
      width: 240px;
      height: 240px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255,191,105,0.18), transparent 70%);
      pointer-events: none;
    }
    .kicker {
      color: var(--amber);
      font-size: 0.66rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      margin-bottom: 8px;
    }
    h1 {
      margin: 0 0 8px;
      font-size: clamp(1.6rem, 3vw, 2.6rem);
      line-height: 0.95;
      letter-spacing: -0.04em;
    }
    .hero-copy {
      max-width: 720px;
      color: #c6d3db;
      font-size: 0.88rem;
      line-height: 1.5;
    }
    .pill-row {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: 12px;
    }
    .pill {
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 999px;
      padding: 6px 10px;
      font-size: 0.68rem;
      color: #d8e1e6;
      background: rgba(255,255,255,0.03);
    }

    .hero-side {
      padding: 16px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 12px;
    }
    .meta-block h2 {
      margin: 0 0 6px;
      font-size: 0.92rem;
      color: #fff;
    }
    .meta-copy {
      margin: 0;
      color: var(--muted);
      line-height: 1.45;
      font-size: 0.82rem;
    }
    .sync-status {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
      font-size: 0.76rem;
      color: #d5dee4;
      padding-top: 10px;
      border-top: 1px solid var(--line);
    }

    #admin-tools {
      display: none;
      margin-bottom: 12px;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
    }
    #sync-btn {
      background: linear-gradient(135deg, var(--red), #ff8a59);
      border: none;
      border-radius: 999px;
      color: #fff;
      padding: 8px 14px;
      font: inherit;
      cursor: pointer;
      font-weight: 700;
    }
    #sync-btn:disabled { opacity: 0.7; cursor: wait; }
    #sync-note {
      color: var(--muted);
      font-size: 0.76rem;
    }

    .board {
      background: linear-gradient(180deg, rgba(28,36,45,0.88), rgba(18,24,31,0.96));
      border: 1px solid var(--line);
      border-radius: 24px;
      box-shadow: 0 24px 80px rgba(0,0,0,0.28);
      padding: 14px;
      margin-bottom: 14px;
    }
    .source-strip {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin: 0 0 10px;
    }
    .board-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
      flex-wrap: wrap;
      margin-bottom: 10px;
    }
    .board-title {
      margin: 0 0 6px;
      font-size: 1rem;
    }
    .board-sub {
      margin: 0;
      color: var(--muted);
      font-size: 0.78rem;
      line-height: 1.4;
    }
    .week-tabs {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }
    .week-tab {
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 999px;
      padding: 6px 10px;
      background: rgba(255,255,255,0.03);
      color: #d7e0e5;
      cursor: pointer;
      font: inherit;
      font-size: 0.72rem;
    }
    .week-tab.active {
      background: rgba(87,219,198,0.12);
      border-color: rgba(87,219,198,0.22);
      color: var(--teal);
    }
    .filter-row {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      flex-wrap: wrap;
      margin-bottom: 10px;
      align-items: flex-start;
    }
    .legend {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
    }
    .legend-item {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 0.72rem;
      color: #d9e2e7;
      padding: 6px 8px;
      border-radius: 999px;
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.08);
    }
    .legend-swatch {
      width: 12px;
      height: 12px;
      border-radius: 999px;
    }
    .activity-filters {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      max-width: 100%;
    }
    .filter-chip {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      border-radius: 999px;
      padding: 6px 8px;
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.08);
      color: #d7e1e7;
      font-size: 0.7rem;
      cursor: pointer;
      user-select: none;
    }
    .filter-chip input {
      margin: 0;
      accent-color: var(--teal);
    }
    .board-scroll {
      overflow-x: auto;
      overflow-y: hidden;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,0.06);
      background: rgba(255,255,255,0.02);
    }
    .day-board {
      display: none;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,0.06);
      background: rgba(255,255,255,0.02);
      overflow: hidden;
    }
    .day-board-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 10px 12px;
      border-bottom: 1px solid rgba(255,255,255,0.06);
      background: rgba(255,255,255,0.03);
    }
    .day-board-title {
      font-size: 0.8rem;
      color: #fff;
      font-weight: 700;
    }
    .day-nav {
      display: flex;
      gap: 6px;
    }
    .day-nav button {
      border: 1px solid rgba(255,255,255,0.1);
      background: rgba(255,255,255,0.03);
      color: #d7e0e5;
      border-radius: 999px;
      padding: 5px 10px;
      font: inherit;
      font-size: 0.7rem;
      cursor: pointer;
    }
    .day-list {
      padding: 8px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .day-slot {
      display: grid;
      grid-template-columns: 52px 1fr;
      gap: 8px;
      align-items: start;
      padding: 6px 0;
      border-bottom: 1px solid rgba(255,255,255,0.05);
    }
    .day-slot:last-child {
      border-bottom: none;
    }
    .day-time {
      font-size: 0.68rem;
      font-weight: 700;
      color: #dce4e9;
      padding-top: 6px;
    }
    .day-slot-classes {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .week-calendar {
      --hour-height: 74px;
      --calendar-height: 740px;
      width: 100%;
      min-width: 840px;
      display: grid;
      grid-template-columns: 56px repeat(7, minmax(0, 1fr));
      grid-template-rows: auto 1fr;
    }
    .wc-corner,
    .wc-day-head {
      padding: 8px 6px 10px;
      border-bottom: 1px solid rgba(255,255,255,0.06);
      background: rgba(255,255,255,0.03);
      position: sticky;
      top: 0;
      z-index: 3;
    }
    .wc-corner {
      color: #7d909c;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      font-size: 0.58rem;
      border-right: 1px solid rgba(255,255,255,0.05);
    }
    .wc-time-head {
      color: #7d909c;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      font-size: 0.58rem;
    }
    .wc-day-head {
      border-right: 1px solid rgba(255,255,255,0.05);
    }
    .wc-day-head.current-day {
      background: rgba(255,107,87,0.05);
    }
    .wc-day-head:last-child {
      border-right: none;
    }
    .wc-day-name {
      font-size: 0.66rem;
      color: #8ea1ad;
      margin-bottom: 2px;
    }
    .wc-day-date {
      font-size: 0.78rem;
      color: #fff;
      font-weight: 700;
    }
    .wc-time-axis {
      grid-column: 1;
      grid-row: 2;
      position: relative;
      height: var(--calendar-height);
      border-right: 1px solid rgba(255,255,255,0.05);
      background:
        repeating-linear-gradient(
          to bottom,
          rgba(255,255,255,0.04) 0,
          rgba(255,255,255,0.04) 1px,
          transparent 1px,
          transparent var(--hour-height)
        );
    }
    .wc-time-label {
      position: absolute;
      left: 0;
      right: 8px;
      transform: translateY(-50%);
      color: #dce4e9;
      font-size: 0.7rem;
      font-weight: 700;
      text-align: right;
    }
    .wc-days {
      grid-column: 2 / span 7;
      grid-row: 2;
      display: grid;
      grid-template-columns: repeat(7, minmax(0, 1fr));
      height: var(--calendar-height);
    }
    .wc-day-column {
      position: relative;
      border-right: 1px solid rgba(255,255,255,0.05);
      background:
        repeating-linear-gradient(
          to bottom,
          rgba(255,255,255,0.05) 0,
          rgba(255,255,255,0.05) 1px,
          transparent 1px,
          transparent var(--hour-height)
        );
    }
    .wc-day-column:last-child {
      border-right: none;
    }
    .wc-day-column.current-day {
      background:
        linear-gradient(rgba(255,107,87,0.045), rgba(255,107,87,0.045)),
        repeating-linear-gradient(
          to bottom,
          rgba(255,255,255,0.05) 0,
          rgba(255,255,255,0.05) 1px,
          transparent 1px,
          transparent var(--hour-height)
        );
    }
    .wc-empty {
      position: absolute;
      top: 14px;
      left: 10px;
      font-size: 0.64rem;
      color: #5d6e78;
    }
    .class-pill {
      border-radius: 9px;
      padding: 4px 5px;
      color: #f8fbfc;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
      position: relative;
      z-index: 2;
      overflow: hidden;
    }
    .class-card {
      cursor: pointer;
      transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
    }
    .class-card:hover {
      border-color: rgba(255,255,255,0.22);
      transform: translateY(-1px);
    }
    .class-card.active {
      border-color: rgba(255,255,255,0.28);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.06),
        0 0 0 1px rgba(255,255,255,0.08);
    }
    .class-card:focus-visible {
      outline: 2px solid rgba(255,255,255,0.45);
      outline-offset: 1px;
    }
    .wc-event {
      position: absolute;
      min-height: 26px;
    }
    .wc-event-shell {
      position: absolute;
      z-index: 2;
    }
    .calendar-card {
      position: absolute;
      inset: 0;
    }
    .calendar-card.compact .class-gym {
      margin-bottom: 1px;
    }
    .calendar-card.compact .class-name {
      font-size: 0.56rem;
      margin-bottom: 1px;
    }
    .calendar-card.compact .class-meta {
      font-size: 0.48rem;
      line-height: 1.08;
    }
    .tt-time {
      color: #dce4e9;
      font-size: 0.72rem;
      font-weight: 700;
    }
    .class-pill.gym-bodyfit-eveleigh {
      background: linear-gradient(135deg, rgba(255,95,87,0.28), rgba(255,95,87,0.12));
      border: 1px solid rgba(255,95,87,0.24);
    }
    .class-pill.gym-activatefit-uts {
      background: linear-gradient(135deg, rgba(96,165,250,0.26), rgba(96,165,250,0.1));
      border: 1px solid rgba(96,165,250,0.22);
    }
    .class-pill.highlight-bodypump {
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.08),
        0 0 0 1px rgba(255,107,87,0.32),
        0 0 16px rgba(255,107,87,0.35);
    }
    .class-pill.highlight-bodytone {
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.08),
        0 0 0 1px rgba(255,191,105,0.34),
        0 0 16px rgba(255,191,105,0.34);
    }
    .class-pill.highlight-yoga {
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.08),
        0 0 0 1px rgba(87,219,198,0.36),
        0 0 16px rgba(87,219,198,0.34);
    }
    .class-pill.highlight-pilates {
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.08),
        0 0 0 1px rgba(118,161,255,0.36),
        0 0 16px rgba(118,161,255,0.34);
    }
    .class-gym {
      font-size: 0.5rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: rgba(255,255,255,0.7);
      margin-bottom: 1px;
    }
    .class-name {
      font-size: 0.6rem;
      line-height: 1.12;
      font-weight: 700;
      margin-bottom: 2px;
    }
    .class-meta {
      font-size: 0.52rem;
      color: rgba(255,255,255,0.76);
      line-height: 1.14;
    }
    .class-detail-description {
      margin-top: 6px;
      font-size: 0.58rem;
      line-height: 1.28;
      color: rgba(255,255,255,0.85);
      display: -webkit-box;
      -webkit-line-clamp: 4;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .class-detail-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      margin-top: 6px;
    }
    .class-detail-chip {
      font-size: 0.5rem;
      line-height: 1;
      padding: 4px 5px;
      border-radius: 999px;
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.12);
      color: rgba(255,255,255,0.9);
    }
    .class-detail-extra {
      margin-top: 6px;
      font-size: 0.48rem;
      line-height: 1.2;
      color: rgba(255,255,255,0.62);
    }
    .class-popover {
      position: fixed;
      width: min(360px, calc(100vw - 24px));
      max-height: min(420px, calc(100vh - 24px));
      overflow: auto;
      padding: 12px;
      border-radius: 16px;
      background: linear-gradient(180deg, rgba(28,36,45,0.98), rgba(18,24,31,0.98));
      border: 1px solid rgba(255,255,255,0.12);
      box-shadow: 0 28px 80px rgba(0,0,0,0.45);
      z-index: 60;
    }
    .class-popover[hidden] {
      display: none;
    }
    .class-popover-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 8px;
    }
    .class-popover-title {
      margin: 0;
      font-size: 0.96rem;
      line-height: 1.1;
      color: #fff;
    }
    .class-popover-close {
      border: 1px solid rgba(255,255,255,0.12);
      background: rgba(255,255,255,0.04);
      color: #dbe6eb;
      border-radius: 999px;
      width: 28px;
      height: 28px;
      font: inherit;
      cursor: pointer;
      flex: 0 0 auto;
    }
    .class-popover-topline {
      margin-top: 2px;
      font-size: 0.68rem;
      color: #aab8c2;
    }
    .class-popover-meta {
      margin-top: 8px;
      font-size: 0.72rem;
      line-height: 1.45;
      color: #dbe6eb;
    }
    .class-popover-meta strong {
      color: #fff;
    }
    .class-popover .class-detail-description {
      margin-top: 10px;
      font-size: 0.72rem;
      line-height: 1.45;
      -webkit-line-clamp: unset;
      display: block;
    }
    .class-popover .class-detail-chip {
      font-size: 0.58rem;
    }
    .class-popover .class-detail-extra {
      font-size: 0.56rem;
    }
    .now-line {
      position: absolute;
      left: 4px;
      right: 4px;
      height: 2px;
      background: #ff5f57;
      border-radius: 999px;
      box-shadow: 0 0 10px rgba(255,95,87,0.45);
      pointer-events: none;
      z-index: 4;
    }
    .now-dot {
      position: absolute;
      left: -2px;
      top: 50%;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #ff5f57;
      transform: translateY(-50%);
    }

    .gym-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
    }
    .gym-card {
      padding: 14px;
    }
    .gym-head {
      display: flex;
      justify-content: space-between;
      gap: 14px;
      align-items: flex-start;
      margin-bottom: 12px;
    }
    .gym-title {
      margin: 0;
      font-size: 1rem;
    }
    .gym-subtitle {
      margin: 4px 0 0;
      color: var(--muted);
      font-size: 0.8rem;
      line-height: 1.35;
    }
    .status-chip {
      padding: 5px 8px;
      border-radius: 999px;
      font-size: 0.62rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      border: 1px solid rgba(255,255,255,0.08);
      white-space: nowrap;
    }
    .status-chip.ok {
      color: var(--teal);
      background: rgba(87,219,198,0.08);
      border-color: rgba(87,219,198,0.18);
    }
    .status-chip.error {
      color: #ff9f8f;
      background: rgba(255,107,87,0.08);
      border-color: rgba(255,107,87,0.18);
    }
    .meta-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      margin-bottom: 12px;
    }
    .meta-card {
      padding: 10px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,0.06);
      background: rgba(255,255,255,0.03);
    }
    .meta-label {
      color: #7f949f;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      font-size: 0.56rem;
      margin-bottom: 4px;
    }
    .meta-value {
      color: #f4f8fb;
      font-size: 0.78rem;
      line-height: 1.4;
      word-break: break-word;
    }
    .link-row {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-bottom: 10px;
    }
    .source-link {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      text-decoration: none;
      color: #fff;
      border: 1px solid rgba(255,255,255,0.09);
      border-radius: 999px;
      padding: 6px 10px;
      font-size: 0.7rem;
      background: rgba(255,255,255,0.03);
    }
    .source-link:hover { border-color: rgba(255,255,255,0.2); }
    .error-box {
      margin-top: 12px;
      padding: 12px 14px;
      border-radius: 14px;
      color: #ffc8bf;
      background: rgba(255,107,87,0.08);
      border: 1px solid rgba(255,107,87,0.16);
      font-size: 0.74rem;
      line-height: 1.5;
    }
    .loading {
      padding: 60px 24px;
      text-align: center;
      color: var(--muted);
    }

    @media (max-width: 980px) {
      .hero, .gym-grid { grid-template-columns: 1fr; }
    }
    @media (max-width: 720px) {
      nav, .shell { padding-left: 16px; padding-right: 16px; }
      .hero-main, .hero-side, .gym-card { border-radius: 18px; }
      .hero-main { padding: 18px; }
      .meta-grid { grid-template-columns: 1fr; }
      .board, .gym-card { padding: 14px; }
      .board-scroll { display: none; }
      .day-board { display: block; }
      #week-tabs { display: none; }
      .filter-row {
        flex-direction: column;
        align-items: stretch;
      }
    }

/* Phase 4 – extracted inline styles */
._p4-6564e5 {
  background: #60a5fa;
}

._p4-8b6aad {
  background: #ff5f57;
}

/* Phase 4b – gymrat description and day-empty classes */
.class-detail-expanded { -webkit-line-clamp: unset; display: block; }
.day-empty             { padding: 20px; text-align: center; }