:root {
      --blue: #1A56DB;
      --blue-dark: #1341b0;
      --blue-light: #dbeafe;
      --blue-mid: #3b82f6;
      --white: #ffffff;
      --off-white: #f8faff;
      --text: #1e293b;
      --text-muted: #64748b;
      --border: #e2e8f0;
      --radius: 18px;
      --font-display: 'Boogaloo', cursive;
      --font-body: 'Nunito', sans-serif;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      -webkit-tap-highlight-color: transparent;
    }

    html, body {
      height: 100%;
      width: 100%;
      /* Mobile browsers: 100% alone can clip when the URL bar shows/hides; dvh tracks the visible viewport. */
      min-height: 100%;
      min-height: 100dvh;
      background: var(--white);
      font-family: var(--font-body);
      color: var(--text);
      overflow: hidden;
    }

    /*
     * Until JS finishes auth + routing, ignore taps so users do not stack navigations
     * or land on the wrong screen while Firestore/profile is still loading.
     */
    html.cover-app-booting #app {
      pointer-events: none;
      user-select: none;
      -webkit-user-select: none;
    }

    #app {
      width: 100%;
      height: 100%;
      min-height: 100%;
      min-height: 100dvh;
      max-width: 430px;
      margin: 0 auto;
      position: relative;
      overflow: hidden;
      background: var(--white);
      /* Reduces parent/page bounce fighting in-app pull-to-refresh on iOS Chrome/Safari */
      overscroll-behavior-y: contain;
      transform: translateZ(0);
    }

    /* Pull-to-refresh: smooth snap when finger lifts (no transition while dragging). */
    #app.ptr-springback {
      transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
    }

    /* Covers #app while returning from Google redirect (sessionStorage coverAuthRedirectPending). */
    #boot-overlay {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 100000;
      background: var(--off-white);
      align-items: center;
      justify-content: center;
      flex-direction: column;
      padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right))
        max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
    }

    body.boot-auth-pending #boot-overlay {
      display: flex;
    }

    .boot-overlay__text {
      font-family: var(--font-body);
      font-size: 16px;
      font-weight: 700;
      color: var(--text-muted);
      text-align: center;
    }

    .ptr-indicator {
      position: absolute;
      top: 8px;
      left: 50%;
      width: 34px;
      height: 34px;
      margin-left: -17px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.96);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transform: translateY(-50px);
      transition: transform 0.18s ease, opacity 0.18s ease;
      z-index: 100;
      pointer-events: none;
    }

    .ptr-indicator.visible {
      opacity: 1;
    }

    .ptr-spinner {
      width: 18px;
      height: 18px;
      border: 2px solid #d9deea;
      border-top-color: #3b82f6;
      border-radius: 50%;
    }

    .ptr-indicator.refreshing .ptr-spinner {
      animation: ptr-spin 0.8s linear infinite;
    }

    .refresh-flash {
      position: absolute;
      inset: 0;
      background: rgba(148, 163, 184, 0.22);
      opacity: 0;
      pointer-events: none;
      z-index: 95;
      transition: opacity 0.1s linear;
    }

    .refresh-flash.active {
      opacity: 1;
    }

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

    /* Pull-to-refresh: larger affordance + safe area on phones */
    @media (pointer: coarse) {
      .ptr-indicator {
        top: max(10px, env(safe-area-inset-top, 0px));
        width: 42px;
        height: 42px;
        margin-left: -21px;
      }

      .ptr-spinner {
        width: 22px;
        height: 22px;
        border-width: 2.5px;
      }
    }

    /* ─── SCREENS ─── */
    .screen {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 40px 28px 52px;
      opacity: 0;
      pointer-events: none;
      transform: translateX(60px);
      transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .screen.active {
      opacity: 1;
      pointer-events: all;
      transform: translateX(0);
    }

    .screen.exit {
      opacity: 0;
      transform: translateX(-60px);
      pointer-events: none;
    }

    /* overscroll-behavior: default (auto) so mobile can rubber-band / show whitespace at top when pulled */

    /* ─── SHARED ─── */
    .btn {
      width: 100%;
      max-width: 320px;
      padding: 17px 24px;
      border-radius: 50px;
      border: none;
      font-family: var(--font-display);
      font-size: 20px;
      letter-spacing: 0.5px;
      cursor: pointer;
      transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      touch-action: manipulation;
    }

    .btn:active { transform: scale(0.97); }

    .btn-primary {
      background: var(--blue);
      color: var(--white);
      box-shadow: 0 4px 20px rgba(26, 86, 219, 0.35);
    }

    .btn-primary:hover {
      background: var(--blue-dark);
      box-shadow: 0 6px 24px rgba(26, 86, 219, 0.45);
    }

    .btn-secondary {
      background: var(--white);
      color: var(--blue);
      border: 2px solid var(--blue);
      box-shadow: none;
    }

    .btn-secondary:hover {
      background: rgba(26, 86, 219, 0.06);
      box-shadow: 0 4px 16px rgba(26, 86, 219, 0.12);
    }

    .screen-title {
      font-family: var(--font-display);
      font-size: 42px;
      line-height: 1.1;
      color: var(--text);
      text-align: center;
      margin-bottom: 12px;
    }

    .screen-sub {
      font-size: 16px;
      color: var(--text-muted);
      text-align: center;
      line-height: 1.5;
      margin-bottom: 40px;
      font-weight: 600;
    }

    .back-btn {
      position: absolute;
      top: 18px;
      left: 20px;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: var(--blue-light);
      border: none;
      color: var(--blue);
      font-size: 20px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.15s;
      z-index: 10;
      touch-action: manipulation;
    }

    .back-btn:active { background: #c3d9ff; }

    .footer-note {
      position: absolute;
      bottom: 20px;
      left: 0; right: 0;
      text-align: center;
      font-size: 11px;
      color: var(--text-muted);
      font-weight: 600;
      letter-spacing: 0.3px;
    }

    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(24px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    .screen.active .anim-1 { animation: fadeUp 0.5s ease 0.05s both; }
    .screen.active .anim-2 { animation: fadeUp 0.5s ease 0.15s both; }
    .screen.active .anim-3 { animation: fadeUp 0.5s ease 0.25s both; }
    .screen.active .anim-4 { animation: fadeUp 0.5s ease 0.35s both; }
    .screen.active .anim-5 { animation: fadeUp 0.5s ease 0.45s both; }

    /* ─── SCREEN 1: WELCOME ─── */
    #screen-welcome { background: var(--white); gap: 0; }

    .welcome-deco {
      position: absolute;
      top: -60px; right: -60px;
      width: 240px; height: 240px;
      border-radius: 50%;
      background: var(--blue-light);
      opacity: 0.5; z-index: 0;
    }

    .welcome-deco-2 {
      position: absolute;
      bottom: -80px; left: -80px;
      width: 280px; height: 280px;
      border-radius: 50%;
      background: var(--blue-light);
      opacity: 0.3; z-index: 0;
    }

    .cover-wordmark {
      font-family: var(--font-display);
      font-size: 88px;
      line-height: 1;
      color: var(--blue);
      text-align: center;
      margin-bottom: 12px;
      position: relative;
      z-index: 1;
      letter-spacing: -1px;
    }

    .welcome-tagline {
      font-family: var(--font-body);
      font-size: 16px;
      color: var(--text-muted);
      font-weight: 600;
      text-align: center;
      margin-bottom: 64px;
      letter-spacing: 0.3px;
      position: relative;
      z-index: 1;
    }

    #screen-welcome .btn-wrap {
      position: relative;
      z-index: 1;
    }

    /* ─── SCREEN 2: SIGN IN ─── */
    /*
     * Must scroll when content + keyboard exceed the viewport (#app/body are overflow:hidden).
     * flex-start + overflow-y:auto makes this screen the scroll container (center alone clips with no scroll).
     */
    #screen-signin {
      gap: 16px;
      background: var(--off-white);
      justify-content: flex-start;
      align-items: center;
      padding-top: max(52px, env(safe-area-inset-top, 0px));
      /* Room for fixed footer + iOS home indicator / Android gesture bar */
      padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
      overflow-y: auto;
      overflow-x: hidden;
      -webkit-overflow-scrolling: touch;
      /* Keep scroll gesture on this pane (mobile Safari / Chrome), not the hidden body. */
      touch-action: pan-y;
    }

    .signin-card {
      width: 100%;
      max-width: 360px;
      background: var(--white);
      border-radius: var(--radius);
      padding: 28px 24px;
      box-shadow: 0 2px 20px rgba(0,0,0,0.07);
      display: flex;
      flex-direction: column;
      gap: 14px;
      margin-bottom: 12px;
    }

    .signin-card-title {
      font-family: var(--font-display);
      font-size: 18px;
      color: var(--text-muted);
      text-align: center;
      margin-bottom: 4px;
    }

    #screen-signin .signin-card .profile-label:first-of-type {
      margin-top: 0;
    }

    .signin-forgot-wrap {
      display: flex;
      justify-content: flex-end;
      margin: -4px 0 6px;
    }

    .signin-email-error {
      min-height: 1.25em;
      font-size: 13px;
      font-weight: 600;
      color: #c62828;
      margin: 0;
    }

    .signin-email-error--success {
      color: #2e7d32;
    }

    .signin-actions {
      display: flex;
      flex-direction: column;
      gap: 12px;
      width: 100%;
      align-items: stretch;
    }

    .signin-link {
      background: none;
      border: none;
      padding: 0;
      font: inherit;
      font-size: 14px;
      font-weight: 700;
      color: var(--blue);
      text-decoration: underline;
      cursor: pointer;
    }

    .signin-link:hover {
      opacity: 0.9;
    }

    .divider {
      display: flex;
      align-items: center;
      gap: 12px;
      width: 100%;
      max-width: 360px;
    }

    .divider-line { flex: 1; height: 1px; background: var(--border); }

    .divider-label {
      font-size: 13px;
      color: var(--text-muted);
      font-weight: 700;
    }

    .google-btn {
      width: 100%;
      max-width: 360px;
      padding: 15px 24px;
      border-radius: 50px;
      border: 2px solid var(--border);
      background: var(--white);
      font-family: var(--font-body);
      font-size: 16px;
      font-weight: 700;
      color: var(--text);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      transition: border-color 0.15s, box-shadow 0.15s;
      margin-bottom: 12px;
      touch-action: manipulation;
    }

    .google-btn:active { transform: scale(0.97); }
    .google-btn:hover { border-color: var(--blue); box-shadow: 0 2px 12px rgba(26,86,219,0.1); }
    .google-logo { width: 22px; height: 22px; }

    .profile-name-caution {
      width: 100%;
      max-width: 360px;
      margin: 0 0 4px;
      padding: 12px 14px;
      border-radius: 12px;
      border: 1px solid #fecaca;
      background: #fef2f2;
      font-size: 13px;
      font-weight: 600;
      line-height: 1.35;
      color: #991b1b;
      font-family: var(--font-body);
    }

    .profile-name-caution strong {
      font-weight: 800;
    }

    .profile-card {
      width: 100%;
      max-width: 360px;
      background: var(--white);
      border-radius: var(--radius);
      padding: 22px 20px;
      box-shadow: 0 2px 20px rgba(0,0,0,0.07);
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-bottom: 8px;
    }

    #screen-post-paywall .profile-card > label,
    #screen-post-paywall .profile-card > input {
      display: block;
      width: 100%;
    }

    .profile-label {
      font-size: 13px;
      color: var(--text-muted);
      font-weight: 700;
      margin-top: 6px;
    }

    .profile-input {
      width: 100%;
      padding: 12px 14px;
      border-radius: 12px;
      border: 2px solid var(--border);
      font-family: var(--font-body);
      font-size: 15px;
      color: var(--text);
      background: var(--off-white);
      outline: none;
    }

    .profile-input:focus {
      border-color: var(--blue);
      background: var(--white);
    }

    .profile-select {
      appearance: none;
      -webkit-appearance: none;
      background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%), linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
      background-position: calc(100% - 18px) calc(50% - 3px), calc(100% - 12px) calc(50% - 3px);
      background-size: 6px 6px, 6px 6px;
      background-repeat: no-repeat;
    }

    #screen-post-paywall .btn {
      position: relative;
      z-index: 2;
    }

    #screen-post-paywall .footer-note {
      position: static;
      margin-top: 8px;
      pointer-events: none;
    }

    /* ─── MY PROFILE (account read-only) ─── */
    #screen-my-profile {
      position: relative;
      gap: 0;
      background: #f3f6fc;
      justify-content: flex-start;
      padding: 52px 20px 40px;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }

    .account-profile-bg {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: min(420px, 140%);
      height: 200px;
      background: radial-gradient(ellipse 80% 100% at 50% 0%, rgba(219, 234, 254, 0.95) 0%, transparent 72%);
      pointer-events: none;
      z-index: 0;
    }

    #screen-my-profile .account-profile-back {
      z-index: 2;
      box-shadow: 0 2px 12px rgba(26, 86, 219, 0.12);
    }

    .account-profile-top {
      position: relative;
      z-index: 1;
      text-align: center;
      padding: 8px 12px 20px;
      max-width: 360px;
      margin: 0 auto;
      width: 100%;
    }

    .account-profile-page-title {
      font-family: var(--font-display);
      font-size: 40px;
      line-height: 1.08;
      color: var(--text);
      margin: 0 0 8px;
      letter-spacing: -0.5px;
    }

    .account-profile-lead {
      font-family: var(--font-body);
      font-size: 15px;
      font-weight: 600;
      color: var(--text-muted);
      line-height: 1.45;
      margin: 0;
      max-width: 280px;
      margin-left: auto;
      margin-right: auto;
    }

    .account-profile-card {
      position: relative;
      z-index: 1;
      width: 100%;
      max-width: 360px;
      margin: 0 auto;
      background: var(--white);
      border-radius: 22px;
      border: 1px solid rgba(226, 232, 240, 0.95);
      box-shadow:
        0 4px 6px -1px rgba(15, 23, 42, 0.06),
        0 20px 45px -15px rgba(26, 86, 219, 0.14);
      overflow: hidden;
    }

    .account-profile-card-banner {
      height: 72px;
      background: linear-gradient(125deg, var(--blue) 0%, #2563eb 42%, var(--blue-dark) 100%);
      opacity: 1;
    }

    .account-profile-card-main {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 0 22px 26px;
      margin-top: -52px;
    }

    .account-profile-avatar-wrap {
      flex-shrink: 0;
      padding: 5px;
      border-radius: 50%;
      background: linear-gradient(145deg, #fff 0%, #e8efff 100%);
      box-shadow:
        0 4px 16px rgba(26, 86, 219, 0.18),
        0 0 0 1px rgba(255, 255, 255, 0.8) inset;
      margin-bottom: 14px;
    }

    .account-profile-avatar-inner {
      width: 118px;
      height: 118px;
      border-radius: 50%;
      overflow: hidden;
      position: relative;
      background: var(--blue-light);
    }

    .account-profile-photo {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .account-profile-placeholder {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background: linear-gradient(155deg, #3b82f6 0%, var(--blue-dark) 100%);
      color: var(--white);
      font-family: var(--font-body);
      font-size: 44px;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;
      letter-spacing: 0.02em;
    }

    .account-profile-placeholder[hidden] {
      display: none !important;
    }

    .account-profile-name {
      font-family: var(--font-body);
      font-size: 1.35rem;
      font-weight: 800;
      color: var(--text);
      margin: 0 0 18px;
      line-height: 1.3;
      text-align: center;
      word-break: break-word;
      max-width: 100%;
    }

    .account-profile-email-row {
      align-self: stretch;
      text-align: left;
      padding: 14px 16px 16px;
      background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
      border-radius: 16px;
      border: 1px solid var(--border);
    }

    .account-profile-email-label {
      display: block;
      font-family: var(--font-body);
      font-size: 11px;
      font-weight: 800;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.07em;
      margin-bottom: 6px;
    }

    .account-profile-email {
      font-family: var(--font-body);
      font-size: 15px;
      font-weight: 600;
      color: var(--text);
      margin: 0;
      line-height: 1.4;
      word-break: break-word;
    }

    .account-profile-referral-block {
      align-self: stretch;
      margin-top: 18px;
      width: 100%;
    }

    .account-profile-referral-display {
      text-align: left;
      padding: 14px 16px 16px;
      background: linear-gradient(180deg, #f0fdf4 0%, #ecfdf5 100%);
      border-radius: 16px;
      border: 1px solid #bbf7d0;
    }

    .account-profile-referral-static-label {
      font-family: var(--font-body);
      font-size: 11px;
      font-weight: 800;
      color: #166534;
      text-transform: uppercase;
      letter-spacing: 0.07em;
      margin: 0 0 6px;
    }

    .account-profile-referral-static-value {
      font-family: var(--font-body);
      font-size: 15px;
      font-weight: 700;
      color: var(--text);
      margin: 0;
      line-height: 1.4;
      word-break: break-word;
    }

    .account-profile-referral-form {
      text-align: left;
    }

    .account-profile-referral-form .account-profile-email-label {
      margin-bottom: 4px;
    }

    .account-profile-referral-hint {
      font-family: var(--font-body);
      font-size: 12px;
      font-weight: 600;
      color: var(--text-muted);
      line-height: 1.4;
      margin: 0 0 10px;
    }

    .account-profile-referral-input {
      width: 100%;
      max-width: none;
      margin-bottom: 12px;
    }

    .account-profile-referral-save {
      width: 100%;
      max-width: none;
      margin: 0;
      touch-action: manipulation;
    }

    .account-profile-referral-error {
      font-family: var(--font-body);
      font-size: 13px;
      font-weight: 600;
      color: #c62828;
      margin: 10px 0 0;
    }

    .account-profile-subscription-block {
      align-self: stretch;
      margin-top: 16px;
      width: 100%;
    }

    .account-profile-subscription-btn {
      width: 100%;
      max-width: none;
      margin: 0;
      touch-action: manipulation;
    }

    .account-profile-subscription-error {
      font-family: var(--font-body);
      font-size: 13px;
      font-weight: 600;
      color: #c62828;
      margin: 10px 0 0;
    }

    /* ─── SCREEN 4: TUTORIAL ─── */
    #screen-tutorial,
    #screen-tutorial-preview {
      background: var(--off-white);
      justify-content: flex-start;
      gap: 12px;
      padding-top: 64px;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      padding-bottom: 96px;
    }

    .tutorial-card {
      width: 100%;
      max-width: 360px;
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: 18px;
      padding: 16px 16px 12px;
      box-shadow: 0 2px 14px rgba(0, 0, 0, 0.06);
    }

    .tutorial-card h3 {
      font-family: var(--font-display);
      font-size: 24px;
      color: var(--text);
      margin-bottom: 6px;
    }

    .tutorial-card > p {
      font-size: 13px;
      font-weight: 600;
      color: var(--text-muted);
      line-height: 1.45;
      margin-bottom: 10px;
    }

    .tutorial-steps {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .tutorial-step {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      background: #f8faff;
      border: 1px solid #e8eef9;
      border-radius: 12px;
      padding: 9px 10px;
    }

    .tutorial-step-num {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: var(--blue-light);
      color: var(--blue);
      font-size: 12px;
      font-weight: 800;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      margin-top: 2px;
    }

    .tutorial-step strong {
      display: block;
      font-size: 13px;
      line-height: 1.2;
      margin-bottom: 2px;
    }

    .tutorial-step p {
      font-size: 12px;
      color: var(--text-muted);
      font-weight: 600;
      line-height: 1.35;
    }

    .tutorial-app-icon-wrap {
      width: 100%;
      max-width: 360px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
    }

    .tutorial-app-icon {
      width: 112px;
      height: 112px;
      border-radius: 24px;
      overflow: hidden;
      background: #fff;
      box-shadow: 0 12px 28px rgba(15, 23, 42, 0.15);
      flex-shrink: 0;
    }

    .tutorial-app-icon img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .tutorial-app-caption {
      font-size: 13px;
      font-weight: 600;
      color: var(--text-muted);
      line-height: 1.45;
      text-align: center;
      margin: 0;
      padding: 0 8px;
    }

    .tutorial-app-caption strong {
      color: var(--text);
    }

    .tutorial-full-previews {
      width: 100%;
      max-width: 360px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .tutorial-full-preview {
      background: var(--white);
      border-radius: 14px;
      border: 1px solid var(--border);
      padding: 10px;
    }

    .tutorial-full-snapshot {
      border-radius: 10px;
      background: #eef4ff;
      border: 1px dashed #cddaf4;
      overflow: hidden;
      min-height: 240px;
      max-height: 260px;
      position: relative;
    }

    .tutorial-full-static-image {
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: center top;
      display: block;
    }

    .tutorial-full-snapshot::after {
      content: "Unlock full schedule";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 34%;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      padding-bottom: 10px;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.02em;
      color: #1e3a8a;
      background: linear-gradient(
        to top,
        rgba(236, 245, 255, 0.96) 0%,
        rgba(236, 245, 255, 0.84) 40%,
        rgba(236, 245, 255, 0.28) 74%,
        rgba(236, 245, 255, 0) 100%
      );
      backdrop-filter: blur(2px);
      -webkit-backdrop-filter: blur(2px);
      pointer-events: none;
      z-index: 2;
    }

    /* Rabbit Hole preview: blur / veil sits a bit higher than Cocktail */
    #tutorial-full-rabbit.tutorial-full-snapshot::after {
      height: 44%;
      background: linear-gradient(
        to top,
        rgba(236, 245, 255, 0.96) 0%,
        rgba(236, 245, 255, 0.86) 36%,
        rgba(236, 245, 255, 0.3) 70%,
        rgba(236, 245, 255, 0) 100%
      );
    }

    .tutorial-full-scale {
      transform-origin: top left;
      transform: scale(0.28);
      width: 357%;
      pointer-events: none;
    }

    .tutorial-full-scale .screen {
      position: static;
      inset: auto;
      opacity: 1;
      transform: none;
      pointer-events: none;
      width: 100%;
      min-height: 0;
    }

    .tutorial-disclaimer {
      margin-top: 4px;
      border-radius: 12px;
      border: 1px solid #fde68a;
      background: #fffbeb;
      padding: 10px 10px 10px 12px;
      width: 100%;
      max-width: 360px;
    }

    .tutorial-disclaimer-title {
      font-size: 12.5px;
      font-weight: 800;
      color: #92400e;
      margin-bottom: 6px;
      line-height: 1.25;
    }

    .tutorial-disclaimer ul {
      list-style: disc;
      margin: 0 0 0 16px;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .tutorial-disclaimer li {
      font-size: 11.5px;
      color: #78350f;
      font-weight: 600;
      line-height: 1.3;
    }

    #screen-post-paywall,
    #screen-community-guidelines {
      background: var(--off-white);
      justify-content: flex-start;
      gap: 14px;
      padding-top: 64px;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      padding-bottom: 132px;
    }

    .home-tutorial {
      width: 100%;
      max-width: 360px;
      border-radius: 16px;
      border: 1px solid #dbe7ff;
      background: #eff6ff;
      box-shadow: 0 4px 16px rgba(29, 78, 216, 0.08);
      overflow: visible;
    }

    .home-tutorial-head {
      padding: 14px 14px 10px;
      border-bottom: 1px solid #d7e5ff;
      background: linear-gradient(180deg, #eff6ff 0%, #eaf2ff 100%);
    }

    .home-tutorial-title {
      margin: 0;
      font-family: var(--font-display);
      font-size: 22px;
      line-height: 1.1;
      color: #1e3a8a;
    }

    .home-tutorial-sub {
      margin: 3px 0 0;
      font-size: 12px;
      font-weight: 700;
      color: #4563a4;
      font-family: var(--font-body);
    }

    .home-tutorial-steps {
      border-top: 1px solid #d7e5ff;
      padding: 10px 10px 10px;
      display: flex;
      flex-direction: column;
      gap: 7px;
      background: rgba(255, 255, 255, 0.52);
      max-height: none;
      overflow: visible;
    }

    .home-step {
      display: flex;
      align-items: flex-start;
      gap: 9px;
      background: #ffffff;
      border: 1px solid #dbe7ff;
      border-radius: 12px;
      padding: 9px;
      overflow: visible;
    }

    .home-step-num {
      width: 22px;
      height: 22px;
      border-radius: 999px;
      background: #dbeafe;
      color: #1d4ed8;
      font-size: 12px;
      font-weight: 800;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      margin-top: 1px;
      font-family: var(--font-body);
    }

    .home-step-copy {
      min-width: 0;
      flex: 1;
    }

    .home-step-label {
      margin: 0;
      font-size: 12.5px;
      font-weight: 800;
      line-height: 1.25;
      color: #0f172a;
      font-family: var(--font-body);
    }

    .home-step-desc {
      margin: 3px 0 0;
      font-size: 11px;
      font-weight: 600;
      line-height: 1.35;
      color: #4b5563;
      font-family: var(--font-body);
    }

    .ios-example {
      margin-top: 6px;
      border-radius: 10px;
      border: 1px solid #d8deea;
      background: #f8fafc;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
    }

    .ios-example-step1 {
      /* No fixed height: step1.png is tall and should scale with aspect ratio */
      padding: 0;
      background: transparent;
      border: none;
      box-shadow: none;
    }

    /* Keep step images consistent: scale to card width without cropping. */
    .ios-example-step1 img {
      display: block;
      width: 100%;
      height: auto;
      object-fit: contain;
      object-position: center;
      border-radius: 10px;
    }

    .ios-step1-back {
      width: 26px;
      height: 26px;
      border-radius: 999px;
      border: 1px solid #e2e8f0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #9ca3af;
      font-size: 18px;
      font-weight: 700;
      flex-shrink: 0;
    }

    .ios-step1-bar {
      flex: 1;
      height: 30px;
      border-radius: 16px;
      background: #3f3f46;
      color: #fff;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      letter-spacing: 0.01em;
      font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
    }

    .ios-step1-dots {
      width: 30px;
      height: 30px;
      border-radius: 999px;
      border: 1px solid #e2e8f0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #111827;
      font-size: 14px;
      font-weight: 700;
      flex-shrink: 0;
      font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
    }

    .ios-example-step2 {
      padding: 0;
      background: transparent;
    }

    .ios-example-step2 img {
      display: block;
      width: 100%;
      height: auto;
      object-fit: contain;
      object-position: center;
      border-radius: 10px;
    }

    .ios-sheet-row {
      border-radius: 8px;
      background: #ffffff;
      border: 1px solid #e5e7eb;
      padding: 7px 9px;
      font-size: 11.5px;
      font-weight: 600;
      color: #1f2937;
      font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
    }

    .ios-sheet-row + .ios-sheet-row {
      margin-top: 5px;
    }

    .ios-sheet-row.is-target {
      border-color: #93c5fd;
      background: #eaf2ff;
      color: #1d4ed8;
      font-weight: 700;
    }

    .ios-example-step3 {
      padding: 0;
      background: transparent;
      font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
    }

    .ios-example-step3 img {
      display: block;
      width: 100%;
      height: auto;
      object-fit: contain;
      object-position: center;
      border-radius: 10px;
    }

    .ios-step3-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: #e5e7eb;
      font-size: 11px;
      font-weight: 600;
      padding: 0 2px 6px;
    }

    .ios-step3-close {
      width: 20px;
      height: 20px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.12);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 700;
    }

    .ios-example-step4 {
      padding: 8px;
      background: #0f172a;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .ios-step4-cover-icon {
      width: 72px;
      height: 72px;
      border-radius: 16px;
      object-fit: cover;
      background: #ffffff;
      padding: 6px;
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.24);
    }

    .tutorial-previews {
      width: 100%;
      max-width: 360px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      opacity: 0.96;
    }

    .tutorial-preview {
      background: var(--white);
      border-radius: 14px;
      border: 1px solid var(--border);
      padding: 10px;
    }

    .tutorial-preview-title {
      font-size: 11px;
      font-weight: 800;
      color: var(--text-muted);
      margin-bottom: 7px;
    }

    .tutorial-preview-box {
      border-radius: 10px;
      background: #f3f7ff;
      border: 1px dashed #cddaf4;
      padding: 10px 8px;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .tutorial-preview-box span {
      font-size: 12px;
      font-weight: 800;
      color: var(--text);
      line-height: 1.2;
    }

    .tutorial-preview-box small {
      font-size: 10.5px;
      font-weight: 700;
      color: #5d6b83;
    }

    .tutorial-preview-line {
      font-size: 11px;
      font-weight: 600;
      color: #334155;
      line-height: 1.3;
    }

    .tutorial-preview-line b {
      font-weight: 800;
      color: #0f172a;
    }

    /* ─── SCREEN 5: PAYWALL ─── */
    /* Scrollable on short viewports: base .screen uses justify-content:center + overflow hidden on #app */
    #screen-paywall {
      background: var(--white);
      gap: 0;
      justify-content: flex-start;
      align-items: center;
      overflow-y: auto;
      overflow-x: hidden;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior-y: contain;
      touch-action: pan-y;
      padding-top: max(64px, calc(env(safe-area-inset-top) + 44px));
      padding-bottom: max(52px, calc(env(safe-area-inset-bottom) + 28px));
      padding-left: max(28px, env(safe-area-inset-left));
      padding-right: max(28px, env(safe-area-inset-right));
    }

    #screen-paywall .back-btn {
      top: max(18px, env(safe-area-inset-top));
      left: max(20px, env(safe-area-inset-left));
    }

    .paywall-error {
      color: #e53e3e;
      font-size: 0.85rem;
      margin-top: 12px;
      text-align: center;
      width: 100%;
      max-width: 360px;
    }

    .paywall-badge {
      background: var(--blue-light);
      color: var(--blue);
      font-family: var(--font-display);
      font-size: 14px;
      letter-spacing: 2px;
      text-transform: uppercase;
      padding: 6px 18px;
      border-radius: 50px;
      margin-bottom: 28px;
    }

    .price-block {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 36px;
    }

    .price-amount { font-family: var(--font-display); font-size: 72px; color: var(--blue); line-height: 1; }
    .price-period { font-size: 16px; color: var(--text-muted); font-weight: 700; margin-top: 4px; }

    .perks {
      width: 100%;
      max-width: 320px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-bottom: 40px;
    }

    .perk { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; font-weight: 600; color: var(--text); line-height: 1.35; }

    .perk-text { flex: 1; min-width: 0; }

    .perk-text strong { font-weight: 800; color: var(--text); }

    .perk-icon {
      width: 32px; height: 32px;
      border-radius: 10px;
      background: var(--blue-light);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }

    .perk-icon svg { width: 16px; height: 16px; stroke: var(--blue); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

    /* ─── SCREEN 4: VENUE SELECTION ─── */
    #screen-select { background: var(--off-white); justify-content: flex-start; padding-top: 60px; }

    .select-header { text-align: center; margin-bottom: 32px; }
    .select-header h1 { font-family: var(--font-display); font-size: 36px; color: var(--text); margin-bottom: 6px; }
    .select-header p { font-size: 14px; color: var(--text-muted); font-weight: 600; }

    .venue-list { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 16px; }

    .venue-card {
      width: 100%;
      border-radius: 20px;
      padding: 24px 22px;
      display: flex;
      align-items: center;
      gap: 18px;
      cursor: pointer;
      border: none;
      text-align: left;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .venue-card:active { transform: scale(0.98); }

    .venue-card-rabbit { background: var(--blue); color: var(--white); box-shadow: 0 6px 24px rgba(26,86,219,0.3); }
    .venue-card-mellow { background: var(--white); color: var(--text); box-shadow: 0 4px 16px rgba(0,0,0,0.08); border: 2px solid var(--border); }
    .venue-card-cocktail { background: var(--text); color: var(--white); box-shadow: 0 6px 20px rgba(30,41,59,0.25); }

    .venue-initial {
      width: 46px; height: 46px;
      border-radius: 12px;
      background: rgba(255,255,255,0.2);
      display: flex; align-items: center; justify-content: center;
      font-family: var(--font-display);
      font-size: 22px;
      flex-shrink: 0;
    }

    .venue-card-mellow .venue-initial { background: var(--blue-light); color: var(--blue); }

    .venue-info { flex: 1; }
    .venue-name { font-family: var(--font-display); font-size: 24px; line-height: 1.1; margin-bottom: 4px; }
    .venue-desc { font-size: 13px; font-weight: 600; opacity: 0.7; }
    .venue-arrow { font-size: 22px; opacity: 0.4; flex-shrink: 0; font-weight: 300; }

    /* ─── SCREEN 5: RABBIT HOLE DASHBOARD ─── */
    #screen-rabbit {
      padding: 0;
      justify-content: flex-start;
      align-items: stretch;
      background: #eef3f8;
      overflow-y: auto;
      overflow-x: hidden;
      min-height: 0;
      -webkit-overflow-scrolling: touch;
    }

    .rh-navbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 16px;
      background: var(--white);
      border-bottom: 1px solid #c8dcea;
      flex-shrink: 0;
      position: sticky;
      top: 0;
      z-index: 20;
    }

    .rh-branding {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
    }

    .rh-fly-logo {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      overflow: hidden;
      border: 2px solid var(--border);
      flex-shrink: 0;
    }

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

    .rh-secondary-logo {
      height: 58px;
      width: auto;
      max-width: 190px;
      object-fit: contain;
      display: none;
      margin-left: 4px;
    }

    #screen-rabbit.is-rounders .rh-secondary-logo {
      display: block;
    }

    .rh-hamburger {
      width: 42px; height: 42px;
      border-radius: 8px;
      background: #3a6b9e;
      border: none;
      color: var(--white);
      cursor: pointer;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      gap: 5px; padding: 10px;
      transition: background 0.15s;
    }

    .rh-hamburger:active { background: #2e5580; }
    .rh-hamburger-line { width: 20px; height: 2px; background: var(--white); border-radius: 2px; }

    .rh-body {
      flex: 0 0 auto;
      min-height: auto;
      overflow: visible;
      padding: 14px 12px calc(140px + env(safe-area-inset-bottom, 0px));
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .rh-profile-card {
      background: var(--white);
      border-radius: 10px;
      padding: 16px 18px;
      display: flex;
      align-items: center;
      gap: 16px;
      box-shadow: 0 1px 4px rgba(0,0,0,0.07);
      border: 1px solid #dce8f5;
    }

    .rh-avatar {
      width: 58px; height: 58px;
      border-radius: 50%;
      background: #c8d3e0;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }

    .rh-avatar svg { width: 36px; height: 36px; fill: #8a99ab; }

    .rh-profile-info { flex: 1; }
    .rh-profile-name { font-family: var(--font-body); font-size: 15px; font-weight: 700; color: #1a1a1a; margin-bottom: 1px; }
    .rh-profile-venue { font-family: var(--font-body); font-size: 15px; font-weight: 800; color: #1a1a1a; margin-bottom: 1px; }
    .rh-profile-loc { font-family: var(--font-body); font-size: 13px; color: #555; font-weight: 400; margin-bottom: 5px; }

    .rh-add-photo {
      font-size: 13px; color: #4baad3; font-weight: 600;
      background: none; border: none; cursor: pointer; padding: 0; font-family: var(--font-body);
    }

    .rh-shifts-card { background: var(--white); border-radius: 10px; overflow: visible; box-shadow: 0 1px 4px rgba(0,0,0,0.07); border: 1px solid #dce8f5; }

    .rh-shifts-header { background: #4baad3; padding: 11px 16px; }
    .rh-shifts-header h3 { font-family: var(--font-body); font-size: 14px; font-weight: 700; color: var(--white); letter-spacing: 0.1px; }

    .rh-shifts-body {
      padding: 12px 16px 14px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      min-height: 56px;
    }

    .rh-shift-day { margin-bottom: 0; }

    .rh-shift-date { font-family: var(--font-body); font-size: 13.5px; font-weight: 400; color: #333; margin-bottom: 4px; }
    .rh-shift-date strong { font-weight: 700; }

    .today-badge {
      display: inline;
      background: #fef08a; color: #854d0e;
      font-weight: 700; font-size: 13px;
      padding: 1px 5px; border-radius: 3px; margin-right: 1px;
    }

    .rh-shift-row { display: flex; align-items: baseline; gap: 6px; padding-left: 4px; font-family: var(--font-body); font-size: 14px; }
    .rh-shift-time { font-weight: 800; color: #1a1a1a; white-space: nowrap; }
    .rh-shift-role { color: #333; font-weight: 400; flex: 1; }

    .rh-giveup {
      color: #4baad3; font-weight: 600; font-size: 13px;
      background: none; border: none; cursor: pointer; font-family: var(--font-body); padding: 0; margin-left: 4px;
    }

    .rh-view-more {
      display: block; color: #4baad3; font-weight: 600; font-size: 13.5px;
      background: none; border: none; cursor: pointer; font-family: var (--font-body); padding: 8px 0 12px;
    }

    .rh-menu-list { background: var(--white); border-radius: 10px; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,0.07); border: 1px solid #dce8f5; }

    .rh-menu-item {
      display: flex; align-items: center; justify-content: space-between;
      padding: 20px 18px;
      border-bottom: 1px solid #dce8f5;
      cursor: pointer; background: none;
      border-left: none; border-right: none; border-top: none;
      width: 100%; text-align: left;
      transition: background 0.12s;
      font-family: var(--font-body);
    }

    .rh-menu-item:last-child { border-bottom: none; }
    .rh-menu-item:active { background: #f8faff; }

    .rh-menu-item-left { display: flex; align-items: center; }

    .rh-menu-icon { display: none; }

    .rh-menu-label { font-family: var(--font-body); font-size: 15px; font-weight: 600; color: #3a9bd5; }

    .rh-menu-badge {
      background: #f97316; color: white;
      font-size: 11px; font-weight: 800;
      width: 20px; height: 20px;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
    }

    .rh-menu-chevron { color: #9ab4cc; font-size: 18px; font-weight: 400; line-height: 1; }

    /* ─── DRAWER ─── */
    .rh-drawer-overlay {
      position: absolute; inset: 0;
      background: rgba(0,0,0,0.45);
      z-index: 50; opacity: 0; pointer-events: none;
      transition: opacity 0.3s ease;
    }

    .rh-drawer-overlay.open { opacity: 1; pointer-events: all; }

    .rh-drawer {
      position: absolute; top: 0; right: 0; bottom: 0;
      width: 82%; max-width: 320px;
      background: var(--white);
      z-index: 60;
      transform: translateX(100%);
      transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
      display: flex; flex-direction: column; overflow: hidden;
    }

    .rh-drawer.open { transform: translateX(0); }

    .rh-drawer-header {
      background: var(--blue);
      padding: 52px 22px 22px;
      display: flex; flex-direction: column; gap: 4px;
      position: relative;
    }

    .rh-drawer-name { font-family: var(--font-display); font-size: 26px; color: var(--white); }
    .rh-drawer-venue { font-size: 13px; color: rgba(255,255,255,0.75); font-weight: 700; }

    .rh-drawer-body { flex: 1; overflow-y: auto; padding: 8px 0; }

    .rh-drawer-section {
      padding: 10px 22px 4px;
      font-size: 11px; font-weight: 800; color: var(--text-muted);
      letter-spacing: 1.5px; text-transform: uppercase;
    }

    .rh-drawer-item {
      display: flex; align-items: center; gap: 14px;
      padding: 14px 22px;
      cursor: pointer; background: none; border: none;
      width: 100%; text-align: left;
      font-family: var(--font-body);
      transition: background 0.12s;
    }

    .rh-drawer-item:active { background: var(--off-white); }
    .rh-drawer-item:disabled { opacity: 0.4; cursor: default; }

    .rh-drawer-item-icon {
      width: 20px; height: 20px;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }

    .rh-drawer-item-icon svg { width: 18px; height: 18px; stroke: var(--text-muted); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

    .rh-drawer-item-label { font-size: 16px; font-weight: 700; color: var(--text); }

    .rh-drawer-divider { height: 1px; background: var(--border); margin: 8px 22px; }

    .rh-drawer-footer { padding: 16px 0 32px; border-top: 1px solid var(--border); }

    .rh-drawer-item.danger .rh-drawer-item-label { color: #ef4444; }
    .rh-drawer-item.danger .rh-drawer-item-icon svg { stroke: #ef4444; }

    .rh-drawer-item.switch-item .rh-drawer-item-label { color: var(--blue); }
    .rh-drawer-item.switch-item .rh-drawer-item-icon svg { stroke: var(--blue); }

    .rh-no-shifts {
      font-family: var(--font-body);
      font-size: 14px;
      line-height: 1.35;
      color: #555;
      font-weight: 400;
      padding: 8px 0 2px;
      margin: 0;
    }

    .rh-drawer-close {
      position: absolute; top: 14px; right: 14px;
      width: 32px; height: 32px; border-radius: 50%;
      background: rgba(255,255,255,0.2);
      border: none; color: white; font-size: 16px;
      cursor: pointer; display: flex; align-items: center; justify-content: center;
    }

    /* ════════════════════════════════════════
       COCKTAIL COLLECTION SCREEN
    ════════════════════════════════════════ */

    :root {
      --cc-blue: #1a56db;
      --cc-blue-pill: #dbeafe;
      --cc-blue-pill-text: #1d4ed8;
      --cc-bg: #f6f7f9;
      --cc-white: #ffffff;
      --cc-border: #eceef2;
      --cc-text: #111827;
      --cc-sub: #374151;
      --cc-muted: #9ca3af;
      --cc-nav-icon: #6b7280;
      --cc-nav-bg: #f9fafb;
      --cc-font: 'Inter', sans-serif;
    }

    #screen-cocktail {
      padding: 0;
      justify-content: flex-start;
      align-items: stretch;
      background: var(--cc-bg);
      overflow: hidden;
      font-family: var(--cc-font);
    }

    /* ── Header ── */
    .cc-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 16px 12px;
      background: var(--cc-white);
      flex-shrink: 0;
    }

    .cc-header__logo {
      width: 74px;
      height: 42px;
      flex-shrink: 0;
    }

    .cc-header__logo img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    .cc-header__title {
      font-family: var(--cc-font);
      font-size: 19px;
      font-weight: 700;
      color: var(--cc-text);
      flex: 1;
      text-align: center;
      margin: 0;
      letter-spacing: -0.3px;
    }

    .cc-icon-btn {
      width: 36px;
      height: 36px;
      border: none;
      background: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--cc-sub);
      border-radius: 8px;
      flex-shrink: 0;
    }

    /* ── Location bar ── */
    .cc-location-picker {
      position: relative;
      flex-shrink: 0;
      background: var(--cc-white);
      border-bottom: 1px solid var(--cc-border);
    }

    .cc-location-bar {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      padding: 12px 16px 14px;
      background: var(--cc-white);
      font-family: var(--cc-font);
      font-size: 15px;
      font-weight: 500;
      color: var(--cc-text);
      cursor: default;
    }

    .cc-location-pin {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      border: 2px solid var(--cc-blue);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .cc-location-label {
      flex: 1;
      font-weight: 500;
    }

    .cc-location-chevron {
      color: var(--cc-muted);
      transition: transform 0.18s ease;
    }

    .cc-location-toggle {
      border: none;
      background: transparent;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      border-radius: 6px;
      cursor: pointer;
      color: inherit;
    }

    .cc-location-picker.open .cc-location-chevron {
      transform: rotate(180deg);
    }

    .cc-location-menu {
      position: absolute;
      top: calc(100% + 6px);
      left: 12px;
      right: 12px;
      z-index: 35;
      background: var(--cc-white);
      border: 1px solid var(--cc-border);
      border-radius: 12px;
      box-shadow: 0 10px 22px rgba(17, 24, 39, 0.12);
      padding: 6px;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .cc-location-menu[hidden] {
      display: none;
    }

    .cc-location-option {
      border: none;
      background: transparent;
      text-align: left;
      padding: 10px 12px;
      border-radius: 8px;
      font-family: var(--cc-font);
      font-size: 14px;
      font-weight: 500;
      color: var(--cc-text);
      cursor: pointer;
    }

    .cc-location-option:hover {
      background: #f5f7fb;
    }

    .cc-location-option.is-active {
      background: var(--cc-blue-pill);
      color: var(--cc-blue-pill-text);
      font-weight: 600;
    }

    /* ── Segmented control ── */
    .cc-segmented {
      display: flex;
      background: var(--cc-bg);
      padding: 4px;
      margin: 12px 12px 2px;
      border-radius: 10px;
      flex-shrink: 0;
      box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
    }

    .cc-seg-btn {
      flex: 1;
      padding: 9px 8px;
      border: none;
      background: none;
      font-family: var(--cc-font);
      font-size: 13.5px;
      font-weight: 500;
      color: var(--cc-muted);
      cursor: pointer;
      border-radius: 7px;
      transition: background 0.15s, color 0.15s, box-shadow 0.15s;
    }

    .cc-seg-btn--active {
      background: var(--cc-white);
      color: var(--cc-text);
      font-weight: 600;
      box-shadow: 0 1px 3px rgba(15, 23, 42, 0.1);
    }

    /* ── Date nav ── */
    .cc-date-nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 10px 12px;
      background: var(--cc-bg);
      flex-shrink: 0;
    }

    .cc-date-nav__center {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .cc-date-range {
      font-family: var(--cc-font);
      font-size: 18px;
      font-weight: 700;
      color: var(--cc-text);
      letter-spacing: -0.2px;
    }

    /* ── Schedule sheet ── */
    .cc-sheet {
      flex: 1;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      padding: 2px 12px 90px;
      display: flex;
      flex-direction: column;
      gap: 0;
    }

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

    .cc-empty {
      font-family: var(--cc-font);
      font-size: 14px;
      color: var(--cc-muted);
      text-align: center;
      padding: 40px 0;
    }

    /* Each day row card */
    .cc-day-card {
      background: var(--cc-white);
      border-radius: 18px;
      padding: 16px 16px;
      display: flex;
      align-items: center;
      gap: 16px;
      box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
      border: 1px solid #f1f3f6;
    }

    /* Date box on left */
    .cc-day-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 56px;
      min-width: 56px;
      height: 64px;
      border-radius: 14px;
      background: #f7f8fb;
      border: 1px solid #eef1f5;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
    }

    .cc-day-box--scheduled {
      background: var(--cc-blue-pill);
      border-color: var(--cc-blue-pill);
    }

    .cc-day-abbr {
      font-family: var(--cc-font);
      font-size: 12px;
      font-weight: 600;
      color: #8c929d;
      text-transform: uppercase;
      letter-spacing: 0.3px;
      line-height: 1;
      margin-bottom: 2px;
    }

    .cc-day-abbr--scheduled {
      color: var(--cc-blue);
    }

    .cc-day-num {
      font-family: var(--cc-font);
      font-size: 22px;
      font-weight: 700;
      color: #1f2937;
      line-height: 1;
    }

    .cc-day-num--scheduled {
      color: var(--cc-blue);
    }

    /* Day content area */
    .cc-day-content {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-width: 0;
    }

    .cc-day-main {
      flex: 1;
      min-width: 0;
    }

    .cc-not-scheduled {
      font-family: var(--cc-font);
      font-size: 15px;
      font-weight: 400;
      color: #a3a8b2;
    }

    .cc-shift-time-bold {
      font-family: var(--cc-font);
      font-size: 14px;
      font-weight: 700;
      color: var(--cc-text);
      margin-bottom: 2px;
    }

    .cc-shift-role-line {
      font-family: var(--cc-font);
      font-size: 13px;
      font-weight: 400;
      color: var(--cc-sub);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .cc-shift-venue-line {
      font-family: var(--cc-font);
      font-size: 12px;
      font-weight: 400;
      color: var(--cc-muted);
    }

    .cc-day-right {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 4px;
      flex-shrink: 0;
    }

    .cc-hours-badge {
      font-family: var(--cc-font);
      font-size: 12px;
      font-weight: 500;
      color: var(--cc-muted);
    }

    .cc-open-shift-pill {
      background: var(--cc-blue-pill);
      color: var(--cc-blue-pill-text);
      font-family: var(--cc-font);
      font-size: 12px;
      font-weight: 700;
      padding: 5px 10px;
      border-radius: 20px;
      white-space: nowrap;
    }

    /* ── FAB ── */
    .cc-fab {
      position: absolute;
      bottom: 78px;
      right: 16px;
      width: 56px;
      height: 56px;
      border-radius: 16px;
      background: var(--cc-blue);
      border: none;
      box-shadow: 0 4px 16px rgba(26,86,219,0.45);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 10;
      transition: transform 0.15s;
    }

    .cc-fab:active { transform: scale(0.95); }

    /* ── Bottom nav ── */
    .cc-bottom-nav {
      position: absolute;
      bottom: 0; left: 0; right: 0;
      height: 68px;
      background: var(--cc-nav-bg);
      border-top: 1px solid var(--cc-border);
      display: flex;
      align-items: stretch;
      z-index: 20;
    }

    .cc-nav-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
      border: none;
      background: none;
      cursor: pointer;
      color: var(--cc-nav-icon);
      font-family: var(--cc-font);
      font-size: 10px;
      font-weight: 500;
      padding: 0;
    }

    /* Nav icon backgrounds — grey pill for inactive, blue for active */
    .cc-nav-item .cc-nav-icon-wrap {
      width: 34px;
      height: 26px;
      border-radius: 8px;
      background: var(--cc-border);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .cc-nav-item--active .cc-nav-icon-wrap {
      background: var(--cc-blue);
    }

    .cc-nav-item--active {
      color: var(--cc-blue);
    }

    .cc-nav-item svg { display: block; }

    /* ── More panel (slides up) ── */
    .cc-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,0.4);
      z-index: 30;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
    }

    .cc-backdrop.open {
      opacity: 1;
      pointer-events: all;
    }

    .cc-more-panel {
      position: absolute;
      left: 0; right: 0; bottom: 0;
      background: var(--cc-white);
      border-radius: 20px 20px 0 0;
      z-index: 40;
      transform: translateY(100%);
      transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .cc-more-panel.open { transform: translateY(0); }

    .cc-more-panel__top {
      display: flex;
      justify-content: flex-end;
      padding: 14px 16px 4px;
    }

    .cc-more-close {
      width: 32px; height: 32px;
      border-radius: 50%;
      background: var(--cc-bg);
      border: none;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      color: var(--cc-muted);
    }

    .cc-more-panel__user {
      padding: 4px 20px 16px;
      border-bottom: 1px solid var(--cc-border);
    }

    .cc-more-panel__name {
      font-family: var(--cc-font);
      font-size: 18px;
      font-weight: 700;
      color: var(--cc-text);
      margin-bottom: 2px;
    }

    .cc-more-panel__sub {
      font-family: var(--cc-font);
      font-size: 13px;
      color: var(--cc-muted);
    }

    .cc-more-panel__nav {
      padding: 8px 0 16px;
      display: flex;
      flex-direction: column;
    }

    .cc-more-panel__option {
      background: none;
      border: none;
      font-family: var(--font-body);
      font-size: 16px;
      font-weight: 700;
      color: var(--text);
      text-align: left;
      padding: 14px 22px;
      cursor: pointer;
      transition: background 0.12s;
    }

    .cc-more-panel__option:active { background: #f8faff; }

    .cc-more-switch {
      color: var(--blue);
    }

    .cc-more-danger {
      color: #ef4444;
    }

    .cc-settings-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.32);
      z-index: 45;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.25s ease;
    }

    .cc-settings-backdrop.open {
      opacity: 1;
      pointer-events: all;
    }

    .cc-settings-panel {
      position: absolute;
      top: 0;
      right: 0;
      width: min(86%, 320px);
      height: 100%;
      background: var(--cc-white);
      border-left: 1px solid var(--cc-border);
      box-shadow: -8px 0 24px rgba(17, 24, 39, 0.14);
      z-index: 50;
      transform: translateX(100%);
      transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
      display: flex;
      flex-direction: column;
    }

    .cc-settings-panel.open {
      transform: translateX(0);
    }

    .cc-settings-panel__top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 14px 10px 18px;
      border-bottom: 1px solid var(--cc-border);
    }

    .cc-settings-panel__title {
      margin: 0;
      font-family: var(--cc-font);
      font-size: 20px;
      font-weight: 700;
      color: var(--cc-text);
    }

    .cc-settings-panel__group {
      display: flex;
      flex-direction: column;
      padding: 8px 0;
    }

    .cc-settings-panel__item {
      border: none;
      background: transparent;
      text-align: left;
      padding: 14px 18px;
      font-family: var(--cc-font);
      font-size: 15px;
      font-weight: 600;
      color: var(--cc-text);
      cursor: pointer;
    }

    .cc-settings-panel__item:active {
      background: #f8faff;
    }