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

    /* Ensure the HTML `hidden` attribute always wins over any display: rule */
    [hidden] { display: none !important; }

    /* Screen-reader only — visually hidden but accessible */
    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
      border: 0;
    }

    :root {
      --bg: #0d0d14;
      --surface: #13131e;
      --surface2: #1a1a28;
      --border: #222235;
      --border-active: #4040a0;
      --accent: #6c63ff;
      --accent-dark: #4a42cc;
      --text-primary: #e4e4f4;
      --text-secondary: #6a6a90;
      --text-dim: #3a3a58;
      --red: #ff5555;
      --orange: #ff9944;
      --green: #3ecf8e;
      --coral: #ff6b6b;
      --amber: #f59e0b;
      --teal: #2dd4bf;
      --red-bg: #2a0f0f;
      --orange-bg: #2a1a0a;
      --green-bg: #0a2018;
    }

    html {
      background: var(--bg);
    }

    body {
      background: var(--bg);
      color: var(--text-primary);
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
      min-height: 100vh;
      min-height: 100dvh;
      padding: env(safe-area-inset-top, 0) 0 0;
      -webkit-font-smoothing: antialiased;
    }

    #splash-screen {
      position: fixed;
      inset: 0;
      z-index: 360;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: calc(env(safe-area-inset-top, 0px) + 24px) 24px
               calc(env(safe-area-inset-bottom, 0px) + 24px);
      background: var(--bg);
      opacity: 1;
      transition: opacity 0.2s ease;
    }

    #splash-screen.is-exiting {
      opacity: 0;
      pointer-events: none;
    }

    .splash-screen-inner {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 18px;
      min-height: 220px;
    }

    .splash-icon-stack {
      position: relative;
      width: 56px;
      height: 56px;
    }

    .splash-icon {
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      opacity: 0;
      animation: splash-icon-cycle 3s ease-in-out infinite;
    }

    .splash-icon--1 { animation-delay: 0s; }
    .splash-icon--2 { animation-delay: 0.6s; }
    .splash-icon--3 { animation-delay: 1.2s; }
    .splash-icon--4 { animation-delay: 1.8s; }
    .splash-icon--5 { animation-delay: 2.4s; }

    .splash-icon i,
    .splash-icon svg {
      width: 48px;
      height: 48px;
      color: var(--accent);
    }

    .splash-app-name {
      font-size: 1.1rem;
      font-weight: 600;
      color: var(--text-secondary);
      letter-spacing: 0.04em;
    }

    @keyframes splash-icon-cycle {
      0%, 100% { opacity: 0; }
      10%, 30% { opacity: 1; }
      40% { opacity: 0; }
    }

    .container {
      max-width: 500px;
      margin: 0 auto;
      /* Extra bottom padding so content scrolls above the fixed bottom nav */
      padding: 24px 16px calc(80px + env(safe-area-inset-bottom, 0px));
    }

    /* Header */
    header {
      text-align: center;
      margin-bottom: 28px;
    }

    header h1 {
      font-size: 1.1rem;
      font-weight: 600;
      color: var(--text-secondary);
      letter-spacing: 0.04em;
    }

    /* Today's date */
    .date-label {
      font-size: 0.72rem;
      color: var(--text-secondary);
      margin-top: 4px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    /* Suggestion card */
    .suggestion-card {
      background: var(--surface2);
      border: 1px solid var(--border-active);
      border-radius: 22px;
      padding: 32px 24px 28px;
      margin-bottom: 16px;
      text-align: center;
      position: relative;
      overflow: hidden;
    }

    .suggestion-card::before {
      content: '';
      position: absolute;
      top: -40px;
      left: 50%;
      transform: translateX(-50%);
      width: 200px;
      height: 200px;
      background: radial-gradient(circle, rgba(108, 99, 255, 0.12) 0%, transparent 70%);
      pointer-events: none;
    }

    .suggestion-card--loading::before {
      display: none;
    }

    .shimmer-block {
      position: relative;
      overflow: hidden;
      background: rgba(255, 255, 255, 0.05);
    }

    .shimmer-block::after {
      content: '';
      position: absolute;
      inset: 0;
      transform: translateX(-100%);
      background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.08) 50%, transparent 100%);
      animation: dark-shimmer 1.2s ease-in-out infinite;
    }

    @keyframes dark-shimmer {
      100% { transform: translateX(100%); }
    }

    .loading-chip {
      width: 122px;
      height: 12px;
      border-radius: 999px;
      margin: 0 auto 16px;
    }

    .loading-icon {
      width: 52px;
      height: 52px;
      border-radius: 18px;
      margin: 0 auto 16px;
      background: rgba(108, 99, 255, 0.14);
    }

    .loading-line {
      border-radius: 999px;
      margin-left: auto;
      margin-right: auto;
    }

    .loading-line--title {
      width: min(220px, 78%);
      height: 20px;
      margin-bottom: 12px;
    }

    .loading-line--body {
      width: min(160px, 58%);
      height: 12px;
      margin-bottom: 24px;
    }

    .loading-line--section {
      width: 112px;
      height: 12px;
      margin-bottom: 14px;
    }

    .loading-line--stat {
      width: 72px;
      height: 28px;
      margin-bottom: 10px;
    }

    .loading-line--meta {
      width: 120px;
      height: 12px;
    }

    .loading-button {
      width: min(190px, 72%);
      height: 54px;
      border-radius: 16px;
      margin: 0 auto;
      background: rgba(108, 99, 255, 0.16);
    }

    .loading-button--secondary {
      width: min(172px, 66%);
      height: 44px;
      margin-top: 10px;
      background: rgba(255, 255, 255, 0.05);
    }

    .loading-bar {
      width: 100%;
      height: 12px;
      border-radius: 999px;
    }

    .loading-bar + .loading-bar {
      margin-top: 12px;
    }

    .suggestion-eyebrow {
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 12px;
    }

    /* Hero icon — on its own line, centered, above the workout name */
    .hero-icon-wrap {
      display: flex;
      justify-content: center;
      margin-bottom: 14px;
    }

    .hero-icon-wrap i,
    .hero-icon-wrap svg {
      width: 48px;
      height: 48px;
      color: var(--accent);
    }

    /* Rest-day moon shown in amber */
    .hero-icon-wrap.is-rest i,
    .hero-icon-wrap.is-rest svg {
      color: var(--amber);
    }

    /* Other-activity zap shown in teal */
    .hero-icon-wrap.is-other i,
    .hero-icon-wrap.is-other svg {
      color: var(--teal);
    }

    .suggestion-name {
      font-size: 1.5rem;
      font-weight: 800;
      color: var(--text-primary);
      line-height: 1.2;
      margin-bottom: 8px;
      letter-spacing: -0.02em;
    }

    .last-done-pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      min-height: 28px;
      padding: 6px 10px;
      border-radius: 999px;
      font-size: 0.82rem;
      font-weight: 700;
      line-height: 1;
      white-space: nowrap;
      border: 1px solid transparent;
    }

    .last-done-pill-icon {
      width: 14px;
      height: 14px;
      flex-shrink: 0;
    }

    .last-done-pill.is-green {
      background: var(--green-bg);
      color: var(--green);
      border-color: rgba(62, 207, 142, 0.22);
    }

    .last-done-pill.is-yellow {
      background: rgba(245, 158, 11, 0.12);
      color: var(--amber);
      border-color: rgba(245, 158, 11, 0.22);
    }

    .last-done-pill.is-red {
      background: var(--red-bg);
      color: var(--red);
      border-color: rgba(255, 85, 85, 0.24);
    }

    .suggestion-last-done {
      margin: -2px 0 10px;
    }

    .suggestion-subtitle {
      font-size: 0.85rem;
      color: var(--text-secondary);
      margin-bottom: 28px;
    }

    .done-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      background: var(--accent);
      color: #fff;
      border: none;
      border-radius: 16px;
      padding: 18px 48px;
      font-size: 1.05rem;
      font-weight: 700;
      cursor: pointer;
      transition: background 0.15s, transform 0.1s, opacity 0.15s;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
      min-width: 180px;
    }

    .done-btn:active {
      background: var(--accent-dark);
      transform: scale(0.96);
    }

    .done-btn:disabled {
      background: var(--surface);
      color: var(--text-secondary);
      cursor: default;
      border: 1px solid var(--border);
    }

    .done-btn:disabled:active {
      transform: none;
    }

    .card-actions {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
    }

    .skip-btn {
      background: transparent;
      color: var(--text-secondary);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 11px 28px;
      font-size: 0.85rem;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.15s, color 0.15s;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
      min-width: 180px;
    }

    .skip-btn:active {
      background: var(--surface);
    }

    .skip-btn:disabled {
      opacity: 0.35;
      cursor: default;
    }

    .skip-btn:disabled:active {
      background: transparent;
    }

    /* Undo button — ghost style, comfortable tap target */
    .undo-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      background: transparent;
      border: 1px solid var(--border);
      color: var(--text-secondary);
      font-size: 0.85rem;
      font-weight: 600;
      cursor: pointer;
      padding: 12px 24px;
      min-height: 44px;
      min-width: 180px;
      border-radius: 12px;
      transition: color 0.15s, background 0.15s, border-color 0.15s;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
    }

    .undo-btn i,
    .undo-btn svg {
      width: 15px;
      height: 15px;
    }

    .undo-btn:active {
      background: var(--surface);
      color: var(--text-primary);
      border-color: var(--text-dim);
    }

    /* Workout list */
    .list-header {
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--text-dim);
      margin-bottom: 10px;
      padding: 0 4px;
    }

    .workout-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .workout-row {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 16px 16px 16px 18px;
      display: flex;
      align-items: center;
      gap: 12px;
      transition: border-color 0.2s, opacity 0.2s;
    }

    .workout-row.is-suggested {
      border-color: rgba(108, 99, 255, 0.4);
    }

    .workout-row.done-today {
      opacity: 0.45;
    }

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

    .workout-name {
      font-size: 0.95rem;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 3px;
      display: flex;
      align-items: center;
      gap: 7px;
    }

    .workout-name span {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* Workout type icons */
    .row-icon {
      flex-shrink: 0;
      width: 15px;
      height: 15px;
      color: var(--text-secondary);
    }

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

    /* Days pill */
    .days-pill {
      font-size: 0.78rem;
      font-weight: 700;
      padding: 5px 11px;
      border-radius: 20px;
      white-space: nowrap;
      flex-shrink: 0;
    }

    .days-pill.urgent   { background: var(--red-bg);    color: var(--red);    }
    .days-pill.warning  { background: var(--orange-bg); color: var(--orange); }
    .days-pill.ok       { background: var(--green-bg);  color: var(--green);  }
    .days-pill.today    { background: var(--green-bg);  color: var(--green);  }

    /* Row done button */
    .row-done-btn {
      background: transparent;
      color: var(--text-secondary);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 9px 14px;
      font-size: 0.8rem;
      font-weight: 600;
      cursor: pointer;
      white-space: nowrap;
      flex-shrink: 0;
      transition: background 0.15s, border-color 0.15s, color 0.15s;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
      min-width: 56px;
    }

    .row-done-btn:active {
      background: var(--surface2);
    }

    .row-done-btn:disabled {
      opacity: 0.4;
      cursor: default;
    }

    /* Tomorrow preview */
    .first-use-prompt {
      text-align: center;
      color: var(--text-dim);
      font-size: 0.85rem;
      padding: 4px 0 16px;
    }

    #welcome-screen {
      position: fixed;
      inset: 0;
      z-index: 320;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      padding: calc(env(safe-area-inset-top, 0px) + 12px) 16px
               calc(env(safe-area-inset-bottom, 0px) + 20px);
      background:
        radial-gradient(circle at top, rgba(108, 99, 255, 0.22), transparent 38%),
        rgba(13, 13, 20, 0.92);
      backdrop-filter: blur(10px);
      overflow-y: auto;
    }

    .welcome-card {
      width: min(100%, 460px);
      background: linear-gradient(180deg, rgba(26, 26, 40, 0.98), rgba(19, 19, 30, 0.98));
      border: 1px solid rgba(108, 99, 255, 0.2);
      border-radius: 28px;
      padding: 24px 20px;
      box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
      display: flex;
      flex-direction: column;
      gap: 18px;
      margin: 0 auto;
    }

    .onboarding-card {
      gap: 16px;
    }

    .onboarding-progress-row {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
    }

    .onboarding-progress {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 8px;
    }

    .onboarding-progress-text {
      color: var(--text-secondary);
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    .onboarding-dots {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .onboarding-dot {
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.14);
      transition: transform 0.15s, background 0.15s;
    }

    .onboarding-dot.is-active {
      background: var(--accent);
      transform: scale(1.15);
    }

    .welcome-step {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .welcome-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      align-self: flex-start;
      border-radius: 999px;
      background: rgba(108, 99, 255, 0.14);
      color: #c8c4ff;
      padding: 8px 12px;
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    .welcome-title {
      font-size: 1.8rem;
      line-height: 1.05;
      letter-spacing: -0.03em;
      color: var(--text-primary);
    }

    .welcome-section {
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding-bottom: 16px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    .welcome-section:last-of-type {
      padding-bottom: 0;
      border-bottom: none;
    }

    .welcome-section-head {
      display: flex;
      align-items: center;
      gap: 10px;
      color: var(--text-primary);
      font-size: 1rem;
      font-weight: 700;
    }

    .welcome-section-head i,
    .welcome-section-head svg,
    .welcome-badge i,
    .welcome-badge svg,
    .welcome-cta i,
    .welcome-cta svg {
      flex-shrink: 0;
    }

    .welcome-copy {
      color: var(--text-secondary);
      font-size: 0.95rem;
      line-height: 1.6;
    }

    .welcome-actions {
      margin-top: 4px;
    }

    .welcome-actions--split {
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .welcome-actions--split .modal-cancel-btn,
    .welcome-actions--split .welcome-cta {
      width: 100%;
    }

    .welcome-cta {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      width: 100%;
      min-height: 54px;
      border: none;
      border-radius: 16px;
      background: var(--accent);
      color: #fff;
      font-size: 1rem;
      font-weight: 700;
      font-family: inherit;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
      transition: background 0.15s, transform 0.15s;
    }

    .welcome-cta:active {
      background: var(--accent-dark);
      transform: translateY(1px);
    }

    .program-picker-screen-card {
      gap: 16px;
    }

    .program-picker-list {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .program-picker-card {
      width: 100%;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 20px;
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 14px;
      text-align: left;
      color: inherit;
      font-family: inherit;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
      transition: border-color 0.15s, background 0.15s, transform 0.15s;
    }

    .program-picker-card.is-selected {
      border-color: var(--border-active);
      background: var(--surface2);
      box-shadow: inset 0 0 0 1px rgba(108, 99, 255, 0.12);
    }

    .program-picker-card:active {
      transform: translateY(1px);
    }

    .program-picker-card-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
    }

    .program-picker-card-copy {
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .program-picker-card-name {
      font-size: 1rem;
      font-weight: 700;
      color: var(--text-primary);
    }

    .program-picker-card-description,
    .program-picker-sheet-copy,
    .program-picker-confirm-copy {
      font-size: 0.95rem;
      color: var(--text-secondary);
      line-height: 1.6;
    }

    .program-picker-card-count {
      flex-shrink: 0;
      border-radius: 999px;
      padding: 6px 10px;
      background: rgba(108, 99, 255, 0.12);
      color: var(--accent);
      font-size: 0.78rem;
      font-weight: 700;
      line-height: 1;
    }

    .program-picker-card-preview {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }

    .program-picker-card-preview-label {
      font-size: 0.82rem;
      color: var(--text-secondary);
      font-weight: 600;
    }

    .program-picker-card-preview-icons {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .program-picker-card-preview-icon {
      width: 34px;
      height: 34px;
      border-radius: 12px;
      background: var(--surface2);
      border: 1px solid var(--border);
      display: grid;
      place-items: center;
      color: var(--text-primary);
      flex-shrink: 0;
    }

    .program-picker-card-preview-icon.is-extra {
      font-size: 0.82rem;
      font-weight: 700;
      color: var(--text-secondary);
    }

    .program-picker-card-empty {
      border: 1px dashed var(--border);
      border-radius: 20px;
      padding: 16px;
      text-align: center;
      color: var(--text-secondary);
      font-size: 0.95rem;
      line-height: 1.6;
    }

    .program-picker-custom-btn {
      width: 100%;
      min-height: 48px;
      border: 1px solid var(--border);
      border-radius: 16px;
      background: transparent;
      color: var(--text-primary);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 14px 16px;
      font-size: 1rem;
      font-weight: 600;
      font-family: inherit;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
    }

    .program-picker-custom-btn:disabled,
    .program-picker-card:disabled {
      opacity: 0.35;
      cursor: default;
    }

    .program-picker-custom-btn:active {
      background: var(--surface2);
    }

    .program-picker-custom-btn--sheet {
      margin-top: 4px;
    }

    .program-picker-list--sheet {
      max-height: min(52vh, 460px);
      overflow-y: auto;
      padding-right: 2px;
    }

    .tomorrow-preview {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 16px 20px 18px;
      margin-bottom: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      text-align: center;
    }

    .tomorrow-label {
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--text-secondary);
    }

    .tomorrow-name {
      font-size: 1.1rem;
      font-weight: 700;
      color: var(--text-primary);
      display: flex;
      align-items: center;
      gap: 7px;
    }

    .tomorrow-name .tomorrow-icon {
      width: 16px;
      height: 16px;
      color: var(--text-secondary);
      flex-shrink: 0;
    }

    .tomorrow-last-done {
      margin-top: 4px;
      align-self: center;
      min-height: 24px;
      padding: 5px 9px;
      font-size: 0.75rem;
    }

    .stats-loading {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .stats-loading-pair {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }

    .stats-loading-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 18px;
      padding: 18px 16px;
    }

    /* Toast — raised above the bottom nav bar */
    .toast {
      position: fixed;
      bottom: calc(72px + env(safe-area-inset-bottom, 0px));
      left: 50%;
      transform: translateX(-50%) translateY(20px);
      background: var(--surface2);
      border: 1px solid var(--border-active);
      color: var(--text-primary);
      padding: 13px 26px;
      border-radius: 14px;
      font-size: 0.9rem;
      font-weight: 600;
      pointer-events: none;
      opacity: 0;
      transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s;
      white-space: nowrap;
      z-index: 300;
    }

    .toast.show {
      transform: translateX(-50%) translateY(0);
      opacity: 1;
    }

    /* ── Bottom Navigation ─────────────────────────────────────────────────── */
    .bottom-nav {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background: var(--surface);
      border-top: 1px solid var(--border);
      display: flex;
      z-index: 50;
      /* Push visible content above the iPhone home bar */
      padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    .nav-btn {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
      padding: 10px 0;
      min-height: 56px;
      background: none;
      border: none;
      color: var(--text-dim);
      font-size: 0.62rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
      transition: color 0.15s;
    }

    .nav-btn.active {
      color: var(--accent);
    }

    /* Target both the placeholder <i> and the SVG lucide generates */
    .nav-btn i,
    .nav-btn svg {
      width: 22px;
      height: 22px;
    }

    /* ── History view ──────────────────────────────────────────────────────── */

    /* Sub-tab row: Calendar / List toggle */
    .history-tabs {
      display: flex;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 4px;
      margin-bottom: 20px;
    }

    .htab {
      flex: 1;
      padding: 10px;
      background: none;
      border: none;
      border-radius: 10px;
      color: var(--text-secondary);
      font-size: 0.88rem;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.15s, color 0.15s;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
    }

    .htab.active {
      background: var(--surface2);
      color: var(--accent);
    }

    /* ── Calendar ──────────────────────────────────────────────────────────── */
    .cal-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16px;
    }

    .cal-month-label {
      font-size: 1rem;
      font-weight: 700;
      color: var(--text-primary);
    }

    .cal-nav-btn {
      background: none;
      border: 1px solid var(--border);
      border-radius: 10px;
      color: var(--text-secondary);
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
      transition: background 0.15s, color 0.15s;
    }

    .cal-nav-btn:active {
      background: var(--surface2);
      color: var(--text-primary);
    }

    .cal-nav-btn i,
    .cal-nav-btn svg {
      width: 16px;
      height: 16px;
    }

    .cal-grid {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 3px;
    }

    .cal-dow {
      text-align: center;
      font-size: 0.6rem;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--text-dim);
      padding: 2px 0 8px;
    }

    .cal-day {
      aspect-ratio: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2px;
      border-radius: 8px;
    }

    .cal-day.is-today {
      background: rgba(108, 99, 255, 0.12);
      outline: 1px solid rgba(108, 99, 255, 0.35);
    }

    /* Day number inside each cell */
    .cal-day-num {
      font-size: 0.68rem;
      font-weight: 600;
      color: var(--text-dim);
      line-height: 1;
    }

    .cal-day.is-today .cal-day-num {
      color: var(--text-primary);
      font-weight: 700;
    }

    /* Cells with actual logged data get a slightly brighter number */
    .cal-day.has-workout .cal-day-num,
    .cal-day.has-rest .cal-day-num {
      color: var(--text-secondary);
    }

    /* Small icon inside calendar cells */
    .cal-icon,
    .cal-day svg {
      width: 13px;
      height: 13px;
    }

    .cal-day.has-workout .cal-icon,
    .cal-day.has-workout svg {
      color: var(--accent);
    }

    .cal-day.has-rest .cal-icon,
    .cal-day.has-rest svg {
      color: var(--amber);
    }

    .cal-day.has-other .cal-day-num {
      color: var(--text-secondary);
    }

    .cal-day.has-other .cal-icon,
    .cal-day.has-other svg {
      color: var(--teal);
    }

    /* Projected future days: dimmed icon */
    .cal-day.is-projected .cal-icon,
    .cal-day.is-projected svg {
      color: var(--text-dim);
      opacity: 0.7;
    }

    /* Today's un-logged workout: bright white, not dimmed */
    .cal-day.is-today.is-projected .cal-icon,
    .cal-day.is-today.is-projected svg {
      color: var(--text-primary);
      opacity: 1;
    }

    /* ── History List ──────────────────────────────────────────────────────── */
    .hlist {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .hlist-row {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 16px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 14px;
    }

    .hlist-row.is-today {
      border-color: rgba(108, 99, 255, 0.4);
      background: var(--surface2);
    }

    /* Projected rows are faded in the Log tab */
    .hlist-row.is-projected {
      opacity: 0.4;
    }

    /* But full opacity on the Schedule tab where they're the main content */
    #hview-schedule .hlist-row.is-projected {
      opacity: 1;
    }

    .hlist-icon {
      flex-shrink: 0;
      width: 16px;
      height: 16px;
      color: var(--text-dim);
    }

    .hlist-icon.purple { color: var(--accent); }
    .hlist-icon.amber  { color: var(--amber); }
    .hlist-icon.teal   { color: var(--teal); }

    .hlist-date {
      flex: 1;
      min-width: 0;
    }

    .hlist-date-main {
      font-size: 0.82rem;
      font-weight: 700;
      color: var(--text-primary);
      line-height: 1.2;
    }

    .hlist-date-sub {
      font-size: 0.7rem;
      color: var(--text-secondary);
      margin-top: 1px;
    }

    .hlist-name {
      font-size: 0.78rem;
      font-weight: 600;
      color: var(--text-secondary);
      text-align: right;
      flex-shrink: 0;
      max-width: 52%;
    }

    .hlist-name.purple { color: var(--text-primary); }
    .hlist-name.amber  { color: var(--amber); }
    .hlist-name.teal   { color: var(--teal); }

    .hlist-section-label {
      font-size: 0.62rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--text-dim);
      padding: 20px 4px 8px;
    }

    .hlist-empty {
      text-align: center;
      color: var(--text-dim);
      font-size: 0.85rem;
      padding: 48px 0 24px;
    }

    /* ── Test Mode Banner ─────────────────────────────────────────────────── */
    .test-banner {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 340;
      background: rgba(245, 158, 11, 0.12);
      border-bottom: 2px solid var(--amber);
      color: var(--amber);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
      padding: calc(env(safe-area-inset-top, 0px) + 11px) 16px 11px;
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }

    .test-reset-btn {
      background: var(--amber);
      color: #0d0d14;
      border: none;
      border-radius: 8px;
      padding: 6px 14px;
      font-size: 0.7rem;
      font-weight: 800;
      cursor: pointer;
      letter-spacing: 0.04em;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
      transition: opacity 0.15s;
    }

    .test-reset-btn:active {
      opacity: 0.7;
    }

    /* ── Other Activity Modal ──────────────────────────────────────────────── */
    .modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.65);
      z-index: 200;
      display: flex;
      align-items: flex-end;
    }

    .modal-sheet {
      background: var(--surface);
      border: 1px solid var(--border);
      border-top: 1px solid var(--border-active);
      border-radius: 24px 24px 0 0;
      padding: 28px 20px calc(28px + env(safe-area-inset-bottom, 0px));
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .modal-title {
      font-size: 1rem;
      font-weight: 700;
      color: var(--text-primary);
      text-align: center;
    }

    .modal-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .activity-chip {
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 20px;
      padding: 9px 16px;
      font-size: 0.82rem;
      font-weight: 600;
      color: var(--text-secondary);
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
      transition: background 0.15s, color 0.15s, border-color 0.15s;
    }

    .activity-chip:active {
      background: rgba(108, 99, 255, 0.15);
      border-color: var(--accent);
      color: var(--accent);
    }

    .modal-input {
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 14px 16px;
      font-size: 0.95rem;
      color: var(--text-primary);
      width: 100%;
      outline: none;
      font-family: inherit;
      transition: border-color 0.15s;
      -webkit-appearance: none;
    }

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

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

    .modal-actions {
      display: flex;
      gap: 10px;
    }

    .modal-confirm-btn {
      flex: 1;
      background: var(--accent);
      color: #fff;
      border: none;
      border-radius: 14px;
      padding: 16px;
      font-size: 0.95rem;
      font-weight: 700;
      cursor: pointer;
      transition: background 0.15s, opacity 0.15s;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
    }

    .modal-confirm-btn:disabled {
      opacity: 0.35;
      cursor: default;
    }

    .modal-confirm-btn:active:not(:disabled) {
      background: var(--accent-dark);
    }

    .modal-cancel-btn {
      background: transparent;
      color: var(--text-secondary);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 16px 20px;
      font-size: 0.95rem;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.15s;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
    }

    .modal-cancel-btn:active {
      background: var(--surface2);
    }

    /* ── Modal icon (moon in Skip Today sheet) ──────────────────────────────── */
    .modal-icon {
      display: flex;
      justify-content: center;
    }
    .modal-icon i,
    .modal-icon svg {
      width: 32px;
      height: 32px;
      color: var(--accent);
    }
    .modal-icon.is-rest i,
    .modal-icon.is-rest svg {
      color: var(--amber);
    }

    /* ── History list note (skip reason under Rest Day) ─────────────────────── */
    .hlist-name-wrap {
      flex-shrink: 0;
      max-width: 52%;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
    }
    .hlist-name-wrap .hlist-name {
      max-width: 100%;
    }
    .hlist-note {
      font-size: 0.7rem;
      color: var(--text-secondary);
      text-align: right;
      margin-top: 2px;
    }

    /* ── Version stamp ──────────────────────────────────────────────────────── */
    #version-stamp,
    .auth-version-stamp {
      text-align: center;
      font-size: 11px;
      color: var(--text-dim);
      margin-top: 24px;
      user-select: none;
      -webkit-user-select: none;
    }

    .auth-version-stamp {
      margin-top: 4px;
    }

    /* ── Past day tap affordance in calendar ────────────────────────────────── */
    .cal-day.is-past {
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
    }

    .cal-day.is-past:active {
      background: rgba(108, 99, 255, 0.1);
    }

    /* ── Backfill Modal ──────────────────────────────────────────────────────── */
    #backfill-sheet {
      position: relative;
      max-height: 90vh;
      overflow-y: auto;
    }

    .backfill-date-label {
      font-size: 1rem;
      font-weight: 700;
      color: var(--text-primary);
      text-align: center;
    }

    .backfill-close-btn {
      position: absolute;
      top: 14px;
      right: 14px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      border: 1px solid var(--border);
      border-radius: 999px;
      background: var(--surface2);
      color: var(--text-secondary);
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
    }

    .backfill-close-btn i,
    .backfill-close-btn svg {
      width: 18px;
      height: 18px;
    }

    .backfill-close-btn:active {
      opacity: 0.75;
    }

    /* Scrollable list of 7 selectable options */
    .backfill-options {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .backfill-option {
      display: flex;
      align-items: center;
      gap: 12px;
      width: 100%;
      padding: 14px 16px;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 14px;
      color: var(--text-primary);
      font-size: 0.9rem;
      font-weight: 600;
      cursor: pointer;
      text-align: left;
      transition: border-color 0.15s, background 0.15s;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
    }

    .backfill-option i,
    .backfill-option svg {
      width: 18px;
      height: 18px;
      color: var(--text-secondary);
      flex-shrink: 0;
    }

    .backfill-option.selected {
      border-color: var(--accent);
      background: rgba(108, 99, 255, 0.1);
    }

    .backfill-option.selected i,
    .backfill-option.selected svg {
      color: var(--accent);
    }

    .backfill-option.is-rest.selected i,
    .backfill-option.is-rest.selected svg {
      color: var(--amber);
    }

    .backfill-option.is-rest.selected {
      border-color: var(--amber);
      background: rgba(245, 158, 11, 0.1);
    }

    .backfill-option.is-other.selected i,
    .backfill-option.is-other.selected svg {
      color: var(--teal);
    }

    .backfill-option.is-other.selected {
      border-color: var(--teal);
      background: rgba(45, 212, 191, 0.08);
    }

    /* Read-only entry display */
    .backfill-readonly-entry {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 20px 18px;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 16px;
    }

    .backfill-readonly-icon i,
    .backfill-readonly-icon svg {
      width: 24px;
      height: 24px;
      color: var(--accent);
    }

    .backfill-readonly-icon.is-rest i,
    .backfill-readonly-icon.is-rest svg {
      color: var(--amber);
    }

    .backfill-readonly-icon.is-other i,
    .backfill-readonly-icon.is-other svg {
      color: var(--teal);
    }

    .backfill-readonly-icon.is-empty i,
    .backfill-readonly-icon.is-empty svg {
      color: var(--text-dim);
    }

    .backfill-readonly-name {
      font-size: 1rem;
      font-weight: 700;
      color: var(--text-primary);
    }

    #backfill-readonly {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .backfill-weight-section {
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .backfill-section-label {
      font-size: 0.65rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--text-dim);
    }

    .backfill-weight-value {
      font-size: 1rem;
      font-weight: 700;
      color: var(--text-primary);
    }

    .backfill-weight-value.is-empty {
      font-weight: 600;
      color: var(--text-dim);
    }

    .backfill-readonly-actions {
      display: flex;
      gap: 12px;
    }

    .backfill-readonly-actions .modal-cancel-btn,
    .backfill-readonly-actions .modal-confirm-btn {
      flex: 1;
    }

    .backfill-readonly-actions .modal-cancel-btn {
      background: var(--accent);
      border-color: var(--accent);
      color: #fff;
    }

    .backfill-readonly-actions .modal-cancel-btn:active {
      opacity: 0.85;
    }

    /* Edit view: flex column so options / note section / actions have consistent gaps */
    #backfill-edit-view {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    /* Other activity / rest-day note section inside backfill edit view */
    #backfill-other-section {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    /* ── Stats view ─────────────────────────────────────────────────────────── */
    .stats-range-toggle {
      display: flex;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 4px;
      margin-bottom: 20px;
    }

    .stats-toggle-btn {
      flex: 1;
      padding: 10px;
      background: none;
      border: none;
      border-radius: 10px;
      color: var(--text-secondary);
      font-size: 0.88rem;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.15s, color 0.15s;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
    }

    .stats-toggle-btn.active {
      background: var(--surface2);
      color: var(--accent);
    }

    .stats-section {
      margin-bottom: 20px;
    }

    .stats-section-label {
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--text-dim);
      margin-bottom: 10px;
      padding: 0 4px;
    }

    .stats-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 20px 20px;
    }

    .stats-big-number {
      font-size: 3rem;
      font-weight: 800;
      color: var(--text-primary);
      letter-spacing: -0.03em;
      line-height: 1;
    }

    .stats-big-label {
      font-size: 0.78rem;
      color: var(--text-secondary);
      margin-top: 4px;
    }

    .stats-pair {
      display: flex;
      gap: 12px;
    }

    .stats-pair .stats-card {
      flex: 1;
    }

    .stats-empty {
      text-align: center;
      color: var(--text-dim);
      font-size: 0.85rem;
      padding: 48px 0 24px;
    }

    .weight-chart-card {
      padding: 14px 14px 10px;
    }

    .weight-chart-wrap {
      position: relative;
      height: 220px;
    }

    #weight-chart-canvas {
      width: 100%;
      height: 100%;
      display: block;
    }

    .weight-chart-empty {
      min-height: 220px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      color: var(--text-dim);
      font-size: 0.92rem;
      padding: 0 18px;
      line-height: 1.45;
    }

    /* Workout-type breakdown rows */
    .stats-type-row {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 0;
      border-bottom: 1px solid var(--border);
    }

    .stats-type-row:last-child {
      border-bottom: none;
      padding-bottom: 0;
    }

    .stats-type-row:first-child {
      padding-top: 0;
    }

    .stats-type-icon {
      flex-shrink: 0;
      width: 16px;
      height: 16px;
      color: var(--text-secondary);
    }

    .stats-type-info {
      flex: 1;
      min-width: 0;
    }

    .stats-type-name {
      font-size: 0.82rem;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 5px;
    }

    .stats-type-last-done {
      margin-bottom: 8px;
      min-height: 24px;
      padding: 5px 9px;
      font-size: 0.75rem;
    }

    .stats-bar-track {
      height: 8px;
      border-radius: 4px;
      background: var(--surface2);
      overflow: hidden;
    }

    .stats-bar-fill {
      height: 100%;
      border-radius: 4px;
      background: var(--accent);
      transition: width 0.3s ease;
    }

    .stats-type-count {
      flex-shrink: 0;
      font-size: 0.82rem;
      font-weight: 700;
      color: var(--text-secondary);
      min-width: 24px;
      text-align: right;
    }

    /* Other row — tappable, chevron just left of the count */
    .stats-other-row {
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
    }

    .stats-other-row:active {
      background: rgba(108, 99, 255, 0.06);
      border-radius: 8px;
    }

    .stats-other-meta {
      flex-shrink: 0;
      min-width: 40px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 2px;
    }

    .stats-other-chevron {
      flex-shrink: 0;
      width: 15px;
      height: 15px;
      color: var(--text-dim);
    }

    /* Expandable list of other-activity entries */
    .stats-other-list {
      max-height: 200px;
      overflow-y: auto;
      border-top: 1px solid var(--border);
      margin-top: 4px;
      padding-top: 4px;
    }

    .stats-other-entry {
      display: flex;
      align-items: baseline;
      gap: 10px;
      padding: 7px 4px;
      border-bottom: 1px solid var(--border);
    }

    .stats-other-entry:last-child {
      border-bottom: none;
    }

    .stats-other-date {
      flex-shrink: 0;
      font-size: 0.72rem;
      font-weight: 700;
      color: var(--text-dim);
      min-width: 36px;
    }

    .stats-other-name {
      font-size: 0.82rem;
      font-weight: 600;
      color: var(--text-secondary);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    /* ── Journal view ─────────────────────────────────────────────────────── */
    .journal-section-label {
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--text-dim);
      margin-bottom: 20px;
      padding: 0 4px;
    }

    .journal-field {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-bottom: 16px;
    }

    .journal-field-label {
      font-size: 0.85rem;
      font-weight: 600;
      color: var(--text-secondary);
    }

    .journal-textarea {
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 14px 16px;
      font-size: 0.95rem;
      color: var(--text-primary);
      width: 100%;
      outline: none;
      font-family: inherit;
      transition: border-color 0.15s;
      resize: none;
      -webkit-appearance: none;
      line-height: 1.5;
    }

    .journal-textarea:focus {
      border-color: var(--accent);
    }

    .journal-textarea::placeholder {
      color: var(--text-dim);
    }

    .journal-save-btn {
      width: 100%;
      background: var(--accent);
      color: #fff;
      border: none;
      border-radius: 14px;
      padding: 16px;
      font-size: 0.95rem;
      font-weight: 700;
      cursor: pointer;
      transition: background 0.15s, opacity 0.15s;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
      margin-top: 4px;
    }

    .journal-save-btn:active {
      background: var(--accent-dark);
    }

    .journal-save-btn:disabled {
      opacity: 0.5;
      cursor: default;
    }

    /* Gratitude nudge */
    .journal-nudge {
      background: rgba(108, 99, 255, 0.08);
      border: 1px solid rgba(108, 99, 255, 0.25);
      border-radius: 14px;
      padding: 14px 16px;
      margin-bottom: 4px;
    }

    .journal-nudge-text {
      font-size: 0.85rem;
      color: var(--text-secondary);
      margin-bottom: 10px;
      line-height: 1.4;
    }

    .journal-nudge-actions {
      display: flex;
      gap: 8px;
    }

    .journal-nudge-yes {
      flex: 1;
      background: var(--accent);
      color: #fff;
      border: none;
      border-radius: 10px;
      padding: 10px;
      font-size: 0.85rem;
      font-weight: 600;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
    }

    .journal-nudge-yes:active {
      background: var(--accent-dark);
    }

    .journal-nudge-change {
      flex: 1;
      background: transparent;
      color: var(--text-secondary);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 10px;
      font-size: 0.85rem;
      font-weight: 600;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
    }

    .journal-nudge-change:active {
      background: var(--surface2);
    }

    /* Read-only entry */
    .journal-ro-entry {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 20px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      margin-bottom: 16px;
    }

    .journal-ro-field {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .journal-ro-label {
      font-size: 0.65rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--text-dim);
    }

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

    .journal-edit-btn {
      width: 100%;
      background: transparent;
      color: var(--text-secondary);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 14px;
      font-size: 0.9rem;
      font-weight: 600;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
      transition: background 0.15s;
    }

    .journal-edit-btn:active {
      background: var(--surface2);
    }

    /* ── Calendar journal dot ────────────────────────────────────────────────── */
    .cal-journal-dot {
      display: block;
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: var(--green);
      margin-top: 1px;
      flex-shrink: 0;
    }

    .cal-weight-dot {
      display: block;
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: var(--coral);
      margin-top: 1px;
      flex-shrink: 0;
    }

    /* ── Backfill journal section ─────────────────────────────────────────────── */
    #backfill-journal-section {
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .backfill-journal-field {
      display: flex;
      flex-direction: column;
      gap: 3px;
    }

    .backfill-journal-label {
      font-size: 0.65rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--text-dim);
    }

    .backfill-journal-value {
      font-size: 0.85rem;
      color: var(--text-primary);
      line-height: 1.4;
    }

    /* ── Today cards (Journal, Weight) ──────────────────────────────────────── */
    .today-card {
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 18px;
      padding: 20px;
      margin-bottom: 16px;
    }

    .today-card-label {
      font-size: 0.65rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--text-secondary);
      margin-bottom: 14px;
    }

    .card-action-btn {
      width: 100%;
      background: var(--accent);
      color: #fff;
      border: none;
      border-radius: 12px;
      padding: 14px;
      font-size: 0.95rem;
      font-weight: 700;
      cursor: pointer;
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
    }

    .card-action-btn:active {
      opacity: 0.85;
    }

    .card-complete-text {
      font-size: 0.88rem;
      color: var(--text-secondary);
      line-height: 1.4;
      margin-bottom: 10px;
    }

    .card-done-badge {
      display: inline-block;
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.06em;
      border-radius: 8px;
      padding: 4px 10px;
      margin-bottom: 12px;
    }

    .card-done-badge--journal {
      color: var(--green, #34c759);
      background: rgba(52, 199, 89, 0.12);
    }

    .card-done-badge--weight {
      color: var(--coral);
      background: rgba(255, 107, 107, 0.12);
    }

    .card-edit-btn {
      display: block;
      width: 100%;
      background: transparent;
      border: 1px solid var(--border-active);
      border-radius: 12px;
      padding: 12px;
      font-size: 0.88rem;
      font-weight: 600;
      color: var(--text-secondary);
      cursor: pointer;
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
    }

    .card-edit-btn:active {
      opacity: 0.7;
    }

    /* Log activity chooser */
    .log-activity-options {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .log-activity-option {
      display: flex;
      align-items: center;
      gap: 14px;
      width: 100%;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 15px 16px;
      font-size: 0.95rem;
      font-weight: 600;
      color: var(--text-primary);
      cursor: pointer;
      text-align: left;
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
    }

    .log-activity-option:active {
      opacity: 0.75;
    }

    .log-activity-option i,
    .log-activity-option svg {
      width: 20px;
      height: 20px;
      color: var(--text-secondary);
      flex-shrink: 0;
    }

    .log-activity-option--other {
      color: var(--text-primary);
    }

    /* Journal card completed state */
    .journal-card-field {
      margin-bottom: 10px;
    }

    .journal-card-label {
      font-size: 0.65rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--text-dim);
      margin-bottom: 2px;
    }

    .journal-card-value {
      font-size: 0.88rem;
      color: var(--text-secondary);
      line-height: 1.45;
    }

    .journal-card-value--collapsed {
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .journal-card-toggle {
      background: none;
      border: none;
      padding: 4px 0;
      font-size: 0.8rem;
      font-weight: 600;
      color: var(--accent);
      cursor: pointer;
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
      margin-bottom: 8px;
    }

    /* Journal modal — scrollable sheet for 3 textareas */
    #journal-modal .modal-sheet {
      max-height: 88vh;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }

    /* Weight modal */
    .weight-input-row {
      display: flex;
      align-items: center;
      gap: 12px;
      justify-content: center;
      padding: 8px 0;
    }

    .weight-input {
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 16px 20px;
      font-size: 2rem;
      font-weight: 700;
      color: var(--text-primary);
      width: 160px;
      text-align: center;
      outline: none;
      -webkit-appearance: none;
      font-family: inherit;
    }

    .weight-input:focus {
      border-color: var(--accent);
    }

    .weight-unit {
      font-size: 1.1rem;
      font-weight: 600;
      color: var(--text-dim);
    }

    .weight-logged-value {
      font-size: 1.5rem;
      font-weight: 700;
      color: var(--text-primary);
      margin-bottom: 8px;
    }

    /* ── Settings view ──────────────────────────────────────────────────── */
    .settings-heading {
      font-size: 1.2rem;
      font-weight: 700;
      color: var(--text-primary);
      margin: 24px 0 16px;
    }

    .settings-section {
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 8px 0;
    }

    .settings-section-title {
      font-size: 0.78rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--text-secondary);
      font-weight: 700;
      padding: 0 4px;
    }

    .settings-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 20px;
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .settings-account-row {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .settings-avatar {
      width: 48px;
      height: 48px;
      border-radius: 999px;
      background: var(--accent);
      color: #fff;
      display: grid;
      place-items: center;
      font-size: 1rem;
      font-weight: 800;
      flex-shrink: 0;
    }

    .settings-account-copy {
      min-width: 0;
    }

    .settings-account-label {
      font-size: 0.78rem;
      color: var(--text-secondary);
      margin-bottom: 4px;
    }

    .settings-account-email {
      font-size: 0.98rem;
      color: var(--text-primary);
      overflow-wrap: anywhere;
    }

    .settings-form-grid {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .settings-field {
      display: flex;
      flex-direction: column;
      gap: 6px;
      font-size: 0.82rem;
      color: var(--text-secondary);
    }

    .settings-input {
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 14px 16px;
      font-size: 1rem;
      color: var(--text-primary);
      outline: none;
      -webkit-appearance: none;
      font-family: inherit;
      width: 100%;
    }

    .settings-input:focus {
      border-color: var(--border-active);
    }

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

    .settings-input.is-readonly {
      color: var(--text-secondary);
      background: rgba(26, 26, 40, 0.55);
      border-color: rgba(34, 34, 53, 0.8);
    }

    .settings-toggle-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      cursor: pointer;
      min-height: 52px;
    }

    .settings-toggle-copy {
      display: flex;
      flex-direction: column;
      gap: 4px;
      min-width: 0;
    }

    .settings-toggle-title {
      font-size: 0.98rem;
      font-weight: 600;
      color: var(--text-primary);
    }

    .settings-toggle-note {
      font-size: 0.82rem;
      color: var(--text-secondary);
      line-height: 1.4;
    }

    .settings-toggle-control {
      position: relative;
      flex-shrink: 0;
      width: 52px;
      height: 32px;
    }

    .settings-toggle-input {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      margin: 0;
      opacity: 0;
      cursor: pointer;
    }

    .settings-toggle-switch {
      display: block;
      width: 52px;
      height: 32px;
      border-radius: 999px;
      background: rgba(88, 93, 120, 0.6);
      border: 1px solid transparent;
      transition: background 0.18s ease, border-color 0.18s ease;
      position: relative;
    }

    .settings-toggle-switch::after {
      content: '';
      position: absolute;
      top: 3px;
      left: 3px;
      width: 24px;
      height: 24px;
      border-radius: 999px;
      background: #fff;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
      transition: transform 0.18s ease;
    }

    .settings-toggle-input:checked + .settings-toggle-switch {
      background: var(--accent);
    }

    .settings-toggle-input:checked + .settings-toggle-switch::after {
      transform: translateX(20px);
    }

    .settings-toggle-input:focus-visible + .settings-toggle-switch {
      border-color: var(--border-active);
    }

    .settings-toggle-input:disabled + .settings-toggle-switch {
      opacity: 0.6;
    }

    .settings-rotation-empty {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .settings-rotation-empty-title,
    .settings-rotation-row-name {
      font-size: 0.98rem;
      font-weight: 600;
      color: var(--text-primary);
    }

    .settings-rotation-empty-note,
    .settings-rotation-row-position {
      font-size: 0.82rem;
      color: var(--text-secondary);
      line-height: 1.45;
    }

    .settings-rotation-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    #reset-program-btn {
      width: 100%;
    }

    .settings-rotation-row {
      display: flex;
      align-items: center;
      gap: 12px;
      min-height: 44px;
    }

    .settings-rotation-row-index {
      width: 28px;
      font-size: 0.82rem;
      color: var(--text-secondary);
      font-weight: 700;
      text-align: center;
      flex-shrink: 0;
    }

    .settings-rotation-row-icon,
    .rotation-builder-row-icon {
      width: 38px;
      height: 38px;
      border-radius: 12px;
      background: var(--surface2);
      border: 1px solid var(--border);
      display: grid;
      place-items: center;
      color: var(--text-primary);
      flex-shrink: 0;
    }

    .settings-rotation-row-copy,
    .rotation-builder-row-copy,
    .rotation-builder-library-copy {
      min-width: 0;
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 3px;
    }

    .rotation-builder-modal {
      align-items: stretch;
      justify-content: stretch;
    }

    .rotation-builder-sheet {
      min-height: 100vh;
      max-height: 100vh;
      border-radius: 0;
      padding-top: calc(18px + env(safe-area-inset-top, 0px));
      padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px));
      gap: 18px;
    }

    .rotation-builder-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .rotation-builder-close-btn {
      width: 42px;
      height: 42px;
      border-radius: 12px;
      border: 1px solid var(--border);
      background: var(--surface2);
      color: var(--text-primary);
      display: grid;
      place-items: center;
      padding: 0;
      flex-shrink: 0;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
    }

    .rotation-builder-close-btn:active {
      background: rgba(108, 99, 255, 0.12);
    }

    .rotation-builder-title {
      flex: 1;
    }

    .rotation-builder-spacer {
      width: 42px;
      flex-shrink: 0;
    }

    .rotation-builder-content {
      flex: 1;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 18px;
      padding-bottom: 8px;
    }

    .rotation-builder-section {
      display: flex;
      flex-direction: column;
      gap: 12px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 20px;
      padding: 16px;
    }

    .rotation-builder-section-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
    }

    .rotation-builder-section-title,
    .rotation-builder-row-name,
    .rotation-builder-library-name {
      font-size: 0.98rem;
      font-weight: 600;
      color: var(--text-primary);
    }

    .rotation-builder-row-name {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .rotation-builder-section-note,
    .rotation-builder-row-meta,
    .rotation-builder-library-meta,
    .rotation-builder-library-label {
      font-size: 0.82rem;
      color: var(--text-secondary);
      line-height: 1.45;
    }

    .rotation-builder-current-list,
    .rotation-builder-library-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .rotation-builder-row,
    .rotation-builder-library-row {
      display: flex;
      align-items: center;
      gap: 10px;
      min-height: 48px;
    }

    .rotation-builder-row--dragging {
      opacity: 0.45;
    }

    .rotation-builder-row--picked {
      background: rgba(108, 99, 255, 0.08);
      border-radius: 16px;
    }

    .rotation-builder-row-position {
      width: 26px;
      text-align: center;
      font-size: 0.82rem;
      font-weight: 700;
      color: var(--text-secondary);
      flex-shrink: 0;
    }

    .rotation-builder-drag-handle {
      width: 40px;
      min-height: 40px;
      border: 1px dashed var(--border);
      border-radius: 12px;
      background: transparent;
      color: var(--text-secondary);
      display: grid;
      place-items: center;
      padding: 0;
      cursor: grab;
      flex-shrink: 0;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
    }

    .rotation-builder-drag-handle:active {
      cursor: grabbing;
      background: rgba(108, 99, 255, 0.08);
    }

    .rotation-builder-reorder {
      display: flex;
      gap: 6px;
      flex-shrink: 0;
    }

    .rotation-builder-icon-btn,
    .rotation-builder-remove-btn,
    .rotation-builder-add-btn {
      border-radius: 12px;
      min-height: 40px;
      font-family: inherit;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
    }

    .rotation-builder-icon-btn {
      width: 40px;
      border: 1px solid var(--border);
      background: var(--surface2);
      color: var(--text-primary);
      display: grid;
      place-items: center;
      padding: 0;
      flex-shrink: 0;
    }

    .rotation-builder-icon-btn:disabled,
    .rotation-builder-remove-btn:disabled,
    .rotation-builder-add-btn:disabled {
      opacity: 0.35;
      cursor: default;
    }

    .rotation-builder-remove-btn,
    .rotation-builder-add-btn {
      border: 1px solid var(--border);
      background: transparent;
      color: var(--text-primary);
      padding: 0 14px;
      font-size: 0.9rem;
      font-weight: 600;
      flex-shrink: 0;
    }

    .rotation-builder-remove-btn--icon {
      display: none;
      width: 36px;
      min-height: 36px;
      padding: 0;
      align-items: center;
      justify-content: center;
    }

    .rotation-builder-remove-btn--icon i,
    .rotation-builder-remove-btn--icon svg {
      width: 16px;
      height: 16px;
    }

    .rotation-builder-add-btn {
      color: var(--accent);
      border-color: var(--accent);
      background: rgba(108, 99, 255, 0.08);
    }

    .rotation-builder-add-btn.is-added {
      color: #fff;
      border-color: transparent;
      background: var(--accent);
    }

    .rotation-builder-library-group {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .rotation-builder-library-label {
      text-transform: uppercase;
      letter-spacing: 0.08em;
      font-weight: 700;
    }

    .rotation-builder-library-empty {
      font-size: 0.88rem;
      color: var(--text-secondary);
      line-height: 1.5;
      text-align: center;
      padding: 8px 0 4px;
    }

    .rotation-builder-add-own-btn {
      width: 100%;
    }

    .rotation-builder-custom-form {
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding-top: 4px;
    }

    .rotation-builder-actions {
      margin-top: auto;
    }

    @media (max-width: 479px) {
      .rotation-builder-row {
        gap: 8px;
      }

      .rotation-builder-row-position,
      .rotation-builder-row-meta,
      .rotation-builder-reorder,
      .rotation-builder-remove-btn--text {
        display: none;
      }

      .rotation-builder-remove-btn--icon {
        display: inline-flex;
      }
    }

    .settings-primary-btn,
    .settings-secondary-btn,
    .settings-signout-btn,
    .settings-delete-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      border-radius: 12px;
      padding: 14px 16px;
      font-size: 1rem;
      font-weight: 600;
      cursor: pointer;
      min-height: 48px;
      font-family: inherit;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
      transition: background 0.15s, opacity 0.15s, border-color 0.15s;
    }

    .settings-primary-btn {
      background: var(--accent);
      color: #fff;
      border: none;
    }

    .settings-primary-btn:active {
      background: var(--accent-dark);
    }

    .settings-primary-btn i,
    .settings-primary-btn svg,
    .settings-secondary-btn i,
    .settings-secondary-btn svg,
    .settings-signout-btn i,
    .settings-signout-btn svg,
    .settings-delete-btn i,
    .settings-delete-btn svg {
      flex-shrink: 0;
    }

    .settings-primary-btn.is-syncing i,
    .settings-primary-btn.is-syncing svg {
      animation: settings-sync-spin 0.8s linear infinite;
    }

    .settings-secondary-btn {
      background: var(--surface2);
      color: var(--text-primary);
      border: 1px solid var(--border);
    }

    .settings-secondary-btn:active {
      background: #232339;
    }

    @keyframes settings-sync-spin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    /* ── Auth Screen ──────────────────────────────────────────────────────── */
    #auth-screen {
      position: fixed;
      inset: 0;
      background: var(--bg);
      z-index: 300;
      overflow-y: auto;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      padding: calc(env(safe-area-inset-top, 0px) + 48px) 20px
               calc(env(safe-area-inset-bottom, 0px) + 48px);
    }

    .auth-panel {
      width: 100%;
      max-width: 400px;
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .auth-app-name {
      font-size: 1.6rem;
      font-weight: 800;
      color: var(--text-primary);
      text-align: center;
      letter-spacing: -0.02em;
    }

    .auth-description {
      font-size: 0.9rem;
      color: var(--text-secondary);
      text-align: center;
      line-height: 1.55;
    }

    .auth-features {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 0;
      margin: 0;
    }

    .auth-features li {
      font-size: 0.85rem;
      color: var(--text-secondary);
      padding-left: 22px;
      position: relative;
      line-height: 1.45;
    }

    .auth-features li::before {
      content: '→';
      position: absolute;
      left: 0;
      color: var(--accent);
    }

    .auth-form {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 20px;
      padding: 24px 20px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .auth-input {
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 14px 16px;
      font-size: 1rem;
      color: var(--text-primary);
      width: 100%;
      outline: none;
      -webkit-appearance: none;
      font-family: inherit;
    }

    .auth-input:focus {
      border-color: var(--border-active);
    }

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

    .auth-primary-btn {
      background: var(--accent);
      color: #fff;
      border: none;
      border-radius: 14px;
      padding: 16px;
      font-size: 1rem;
      font-weight: 700;
      cursor: pointer;
      width: 100%;
      min-height: 52px;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
      font-family: inherit;
      margin-top: 4px;
      transition: background 0.15s, opacity 0.15s;
    }

    .auth-primary-btn:active {
      background: var(--accent-dark);
    }

    .auth-primary-btn:disabled {
      opacity: 0.5;
      cursor: default;
    }

    .auth-error {
      font-size: 0.85rem;
      color: var(--red);
      text-align: center;
      line-height: 1.4;
    }

    .auth-field-error {
      font-size: 0.8rem;
      color: var(--red);
      margin-top: -4px;
    }

    .auth-switch {
      font-size: 0.85rem;
      color: var(--text-secondary);
      text-align: center;
      margin: 0;
    }

    .auth-link-btn {
      background: none;
      border: none;
      color: var(--accent);
      font-size: 0.85rem;
      font-weight: 600;
      cursor: pointer;
      padding: 0;
      font-family: inherit;
      -webkit-tap-highlight-color: transparent;
    }

    .auth-inline-link {
      align-self: flex-end;
      margin-top: -4px;
    }

    .auth-link-btn:active {
      opacity: 0.7;
    }

    .settings-signout-btn {
      background: transparent;
      color: var(--red);
      border: 1px solid var(--red);
    }

    .settings-signout-btn:active {
      background: rgba(255, 85, 85, 0.1);
    }

    .settings-danger-section {
      margin-top: 8px;
    }

    .settings-danger-title {
      color: #ff9b9b;
    }

    .settings-danger-card {
      border-color: rgba(255, 85, 85, 0.35);
      background: linear-gradient(180deg, rgba(255, 85, 85, 0.08), rgba(19, 19, 30, 0.96));
    }

    .settings-danger-copy {
      font-size: 0.92rem;
      color: #ffd1d1;
      line-height: 1.5;
    }

    .settings-delete-btn {
      background: var(--red);
      color: #fff;
      border: none;
    }

    .settings-delete-btn:active {
      opacity: 0.85;
    }

    .settings-delete-warning {
      font-size: 0.95rem;
      line-height: 1.55;
      color: var(--text-primary);
      margin: 10px 0 0;
    }

    .modal-danger-btn {
      background: var(--red);
    }

    .modal-danger-btn:active:not(:disabled) {
      background: #d54545;
    }

    .settings-footer {
      text-align: center;
      color: var(--text-secondary);
      font-size: 0.85rem;
      margin: 12px 0 4px;
    }