:root {
        --brand: #ffffff; /* iOS blue; adjust later */
        --bg: #ffffff;
        --fg: #0a0a0a;
        --muted: #6b7280;
        --radius: 16px;
      }
      @media (prefers-color-scheme: dark) {
        :root {
          --bg: #ffffff;
          --fg: #0a0a0a;
          --muted: #6b7280;
        }
      }

      html, body {
        height: 100vh;
        margin: 0;
        padding: 0;
        overflow: hidden;                 /* <- stops page scroll */
        overscroll-behavior: none;        /* <- no bounce/refresh on Android */
        -webkit-overflow-scrolling: auto; /* iOS */
      }

      body {
        /* Respect iPhone safe areas */
        /* padding-top: env(safe-area-inset-top);
        padding-right: env(safe-area-inset-right);
        padding-bottom: calc(env(safe-area-inset-bottom) + 8px);
        padding-left: env(safe-area-inset-left); */

        background: var(--bg);
        color: var(--fg);
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }

      div{box-sizing: border-box;}

      /* Full-height app shell */
      
      header {
        position: sticky;
        top: 0;
        backdrop-filter: saturate(180%) blur(12px);
        /* background: color-mix(in oklab, var(--bg) 80%, transparent); */
        border-bottom: 1px solid color-mix(in oklab, var(--fg) 12%, transparent);
        padding: 12px 16px;
        display: flex;
        align-items: center;
        gap: 12px;
        z-index: 10;
      }

      .title {
        font-weight: 700; font-size: 17px;
      }

      /* main {
        padding: 16px;
      } */

      .card {
        /* background: color-mix(in oklab, var(--bg) 85%, var(--fg) 5%); */
        border: 1px solid color-mix(in oklab, var(--fg) 12%, transparent);
        border-radius: var(--radius);
        padding: 16px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.06);
      }

      button.primary {
        appearance: none;
        border: none;
        background: var(--brand);
        color: white;
        padding: 12px 14px;
        border-radius: 12px;
        font-weight: 600;
        font-size: 16px;
        width: 100%;
      }

      footer {
        padding: 8px 16px;
        font-size: 12px;
        color: var(--muted);
        text-align: center;
      }

      /* Pull-to-refresh bounce on iOS */
      /* main { overscroll-behavior-y: contain; } */

      /* Install banner placeholder (Android) */
      #install-banner { display: none; position: fixed; left: 0; right: 0; bottom: env(safe-area-inset-bottom); padding: 12px 16px; }
      #install-banner .sheet {
        max-width: 480px; margin: 0 auto; background: var(--bg); border: 1px solid color-mix(in oklab, var(--fg) 10%, transparent); border-radius: 16px; padding: 12px; display: flex; gap: 12px; align-items: center;
      }
      #install-banner button { flex-shrink: 0; }