/*
 * G-Screen — Styles
 * =================
 * 
 * TABLE OF CONTENTS:
 * 
 * 1. CSS Variables / Design Tokens
 * 2. Landing Page
 * 3. Device Requirements & Mobile Blocked
 * 4. Screensaver / Kiosk Mode
 * 5. Timeout Warning & Toasts
 * 6. Admin Screen
 * 7. Base Layout & Typography
 * 8. Buttons
 * 9. Horizontal Nav Layout
 * 10. Welcome Screen
 * 11. Disclaimer
 * 12. Questionnaire (progress dots, options, YOB numpad)
 * 13. MRF Test Screens (progress, help panel, iframe)
 * 14. Results Screen (category badge, factors, scales)
 * 15. QR / Share
 * 16. Report (screen + print)
 * 17. SMS Forms
 * 18. Exit Survey
 * 19. Educational Scales (VA + VF visualisations)
 * 20. Survey Cards
 * 21. Country Picker
 * 22. Print Styles
 */

    :root {
      --gs-primary: #0ea5e9;
      --gs-primary-dark: #0284c7;
      --gs-primary-light: #38bdf8;
      --gs-primary-subtle: #f0f9ff;
      --gs-accent: #06b6d4;
      --gs-review: #dc2626;
      --gs-examination: #ea580c;
      --gs-regular: #ca8a04;
      --gs-continue: #059669;
      --gs-white: #fff;
      --gs-gray-50: #fafafa;
      --gs-gray-100: #f4f4f5;
      --gs-gray-200: #e4e4e7;
      --gs-gray-300: #d4d4d8;
      --gs-gray-400: #a1a1aa;
      --gs-gray-500: #71717a;
      --gs-gray-600: #52525b;
      --gs-gray-700: #3f3f46;
      --gs-gray-800: #27272a;
      --gs-gray-900: #18181b;
      --gs-font-display: 'Fraunces', Georgia, serif;
      --gs-font-body: 'Outfit', -apple-system, sans-serif;
      --gs-radius-sm: 12px;
      --gs-radius-md: 16px;
      --gs-radius-lg: 24px;
      --gs-radius-xl: 32px;
      --gs-shadow-sm: 0 1px 2px rgba(0,0,0,0.04), 0 1px 4px rgba(0,0,0,0.04);
      --gs-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.05);
      --gs-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.05);
      --gs-shadow-glow: 0 0 40px rgba(14,165,233,0.15);
    }
    
    /* Landing Page */
    .landing-page {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      background: linear-gradient(160deg, #f0f9ff 0%, #e0f2fe 30%, #fff 70%, #fafafa 100%);
    }
    
    .landing-header {
      padding: 24px 40px;
      display: flex;
      justify-content: center;
    }
    
    .landing-logo {
      display: flex;
      align-items: center;
      gap: 12px;
      font-family: var(--gs-font-display);
      font-size: 1.75rem;
      font-weight: 700;
      color: var(--gs-primary-dark);
    }
    
    .landing-logo svg {
      width: 36px;
      height: 36px;
      color: var(--gs-primary);
    }
    
    .landing-main {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 40px 24px;
      max-width: 800px;
      margin: 0 auto;
      text-align: center;
    }
    
    .landing-hero {
      margin-bottom: 40px;
    }
    
    .landing-hero h1 {
      font-family: var(--gs-font-display);
      font-size: 3rem;
      font-weight: 700;
      color: var(--gs-gray-900);
      margin-bottom: 16px;
      letter-spacing: -0.02em;
    }
    
    .landing-subtitle {
      font-size: 1.375rem;
      color: var(--gs-gray-500);
    }
    
    .landing-stats {
      margin-bottom: 48px;
    }
    
    .landing-stat {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 24px 32px;
      background: linear-gradient(135deg, #fff7ed 0%, #fef3c7 100%);
      border-radius: var(--gs-radius-lg);
      border: 1px solid rgba(234,88,12,0.15);
    }
    
    .landing-stat .stat-number {
      font-family: var(--gs-font-display);
      font-size: 3rem;
      font-weight: 700;
      color: #ea580c;
      line-height: 1;
    }
    
    .landing-stat .stat-text {
      font-size: 1.125rem;
      color: #9a3412;
      text-align: left;
      line-height: 1.4;
    }
    
    .landing-features {
      display: flex;
      gap: 24px;
      margin-bottom: 48px;
      flex-wrap: wrap;
      justify-content: center;
    }
    
    .landing-feature {
      display: flex;
      align-items: flex-start;
      gap: 16px;
      padding: 20px 24px;
      background: var(--gs-white);
      border-radius: var(--gs-radius-lg);
      box-shadow: var(--gs-shadow-md);
      border: 1px solid var(--gs-gray-100);
      text-align: left;
      min-width: 220px;
    }
    
    .feature-icon {
      flex-shrink: 0;
      width: 44px;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--gs-primary-subtle);
      border-radius: 12px;
    }
    
    .feature-icon svg {
      width: 24px;
      height: 24px;
      color: var(--gs-primary);
    }
    
    .feature-text {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    
    .feature-text strong {
      font-size: 1rem;
      color: var(--gs-gray-800);
    }
    
    .feature-text span {
      font-size: 0.875rem;
      color: var(--gs-gray-500);
    }
    
    .landing-cta {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
    }
    
    .landing-cta .btn-large {
      padding: 20px 48px;
      font-size: 1.25rem;
      min-height: 64px;
    }
    
    .landing-note {
      font-size: 0.8125rem;
      color: var(--gs-gray-400);
    }
    
    /* Device Requirements */
    .device-status {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 20px;
      background: #ecfdf5;
      border: 1px solid #a7f3d0;
      border-radius: 100px;
      color: #047857;
      font-size: 0.9375rem;
      font-weight: 500;
      margin-bottom: 24px;
    }
    
    .device-status.blocked {
      background: #fef2f2;
      border-color: #fecaca;
      color: #b91c1c;
    }
    
    .device-status svg {
      width: 20px;
      height: 20px;
    }
    
    .requirements-box {
      background: var(--gs-gray-50);
      border: 1px solid var(--gs-gray-200);
      border-radius: var(--gs-radius-md);
      padding: 20px 24px;
      margin-bottom: 32px;
      text-align: left;
      max-width: 480px;
    }
    
    .requirements-box h3 {
      font-size: 0.875rem;
      font-weight: 600;
      color: var(--gs-gray-700);
      margin-bottom: 12px;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }
    
    .requirement-item {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      font-size: 0.9375rem;
      color: var(--gs-gray-600);
      margin-bottom: 8px;
    }
    
    .requirement-item:last-child {
      margin-bottom: 0;
    }
    
    .requirement-item svg {
      width: 18px;
      height: 18px;
      flex-shrink: 0;
      margin-top: 2px;
    }
    
    .requirement-item.required svg {
      color: var(--gs-primary);
    }
    
    .requirement-item.recommended svg {
      color: var(--gs-gray-400);
    }
    
    .requirement-item .label {
      color: var(--gs-gray-400);
      font-size: 0.8125rem;
    }
    
    /* Mobile Blocked Screen */
    .mobile-blocked {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 40px 24px;
      background: linear-gradient(160deg, #fef2f2 0%, #fee2e2 30%, #fff 70%, #fafafa 100%);
      text-align: center;
    }
    
    .mobile-blocked-icon {
      width: 80px;
      height: 80px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #fee2e2;
      border-radius: 50%;
      margin-bottom: 24px;
    }
    
    .mobile-blocked-icon svg {
      width: 40px;
      height: 40px;
      color: #dc2626;
    }
    
    .mobile-blocked h1 {
      font-family: var(--gs-font-display);
      font-size: 1.75rem;
      color: var(--gs-gray-900);
      margin-bottom: 12px;
    }
    
    .mobile-blocked p {
      font-size: 1rem;
      color: var(--gs-gray-600);
      margin-bottom: 8px;
      max-width: 320px;
    }
    
    .mobile-blocked .suggestion {
      margin-top: 24px;
      padding: 16px 24px;
      background: var(--gs-white);
      border-radius: var(--gs-radius-md);
      border: 1px solid var(--gs-gray-200);
    }
    
    .mobile-blocked .suggestion p {
      margin-bottom: 0;
      font-size: 0.9375rem;
    }
    
    .landing-footer {
      padding: 32px 40px;
      text-align: center;
      border-top: 1px solid var(--gs-gray-100);
      background: var(--gs-white);
    }
    
    .sponsor-label {
      font-size: 0.75rem;
      color: var(--gs-gray-400);
      text-transform: uppercase;
      letter-spacing: 0.1em;
      margin-bottom: 12px;
    }
    
    .sponsor-logos {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
    }
    
    .sponsor-text {
      font-size: 1rem;
      font-weight: 500;
      color: var(--gs-gray-600);
    }
    
    .sponsor-divider {
      color: var(--gs-gray-300);
    }
    
    @media (max-width: 768px) {
      .landing-hero h1 {
        font-size: 2rem;
      }
      .landing-subtitle {
        font-size: 1.125rem;
      }
      .landing-stat {
        flex-direction: column;
        text-align: center;
      }
      .landing-stat .stat-text {
        text-align: center;
      }
      .landing-features {
        flex-direction: column;
        align-items: center;
      }
      .landing-feature {
        width: 100%;
        max-width: 320px;
      }
    }
    
    /* Screensaver */
    .screensaver {
      position: fixed;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, #1e3a5f 0%, #0c4a6e 50%, #0369a1 100%);
      cursor: pointer;
      z-index: 100;
    }
    
    .ss-content {
      text-align: center;
      color: #fff;
    }
    
    .ss-icon {
      width: 100px;
      height: 100px;
      margin: 0 auto 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(255,255,255,0.1);
      border: 2px solid rgba(255,255,255,0.2);
      border-radius: 50%;
    }
    
    .ss-icon svg {
      width: 50px;
      height: 50px;
      color: #fff;
    }
    
    .ss-headline {
      font-family: var(--gs-font-display);
      font-size: 4.5rem;
      font-weight: 700;
      margin-bottom: 16px;
      color: #fff;
      text-shadow: 0 2px 20px rgba(0,0,0,0.3);
      line-height: 1.1;
    }
    
    .ss-subtext {
      font-size: 1.75rem;
      font-weight: 400;
      color: rgba(255,255,255,0.85);
      margin-bottom: 48px;
    }
    
    .ss-dots {
      display: flex;
      justify-content: center;
      gap: 12px;
      margin-bottom: 48px;
    }
    
    .ss-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: rgba(255,255,255,0.3);
      transition: all 0.3s ease;
    }
    
    .ss-dot.active {
      background: #fff;
      transform: scale(1.3);
    }
    
    .ss-dot {
      cursor: pointer;
    }
    
    .ss-dot:hover {
      background: rgba(255,255,255,0.6);
    }
    
    .ss-nav {
      position: absolute;
      top: 50%;
      left: 0;
      right: 0;
      transform: translateY(-50%);
      display: flex;
      justify-content: space-between;
      padding: 0 20px;
      pointer-events: none;
    }
    
    .ss-nav-btn {
      width: 50px;
      height: 50px;
      border: none;
      background: rgba(255,255,255,0.15);
      color: #fff;
      font-size: 2rem;
      border-radius: 50%;
      cursor: pointer;
      pointer-events: auto;
      transition: background 0.2s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
    }
    
    .ss-nav-btn:hover {
      background: rgba(255,255,255,0.3);
    }
    
    .ss-cta {
      font-size: 1.5rem;
      font-weight: 500;
      color: #fff;
      background: rgba(255,255,255,0.15);
      padding: 16px 0;
      border-radius: 100px;
      animation: pulse 2s ease-in-out infinite;
      position: fixed;
      bottom: 120px;
      left: 50%;
      margin-left: -200px;
      width: 400px;
      text-align: center;
    }
    
    @keyframes pulse {
      0%, 100% { opacity: 0.8; transform: scale(1); }
      50% { opacity: 1; transform: scale(1.02); }
    }
    
    .ss-branding {
      position: absolute;
      bottom: 40px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
    }
    
    .ss-logo {
      font-family: var(--gs-font-display);
      font-size: 1.5rem;
      font-weight: 600;
      color: #fff;
    }
    
    .ss-powered {
      font-size: 0.875rem;
      color: rgba(255,255,255,0.6);
    }
    
    /* Image-based slide */
    .ss-image {
      background: #111;
    }
    
    /* Video-based slide */
    .ss-video {
      background: #000;
    }
    .ss-video-bottom {
      position: absolute;
      bottom: 24px;
      right: 28px;
      z-index: 3;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 10px;
      text-align: right;
    }
    .ss-video-bottom .ss-cta {
      position: static;
      width: auto;
      margin-left: 0;
      padding: 12px 28px;
      font-size: 1.15rem;
    }
    .ss-video-bottom .ss-branding {
      position: static;
      align-items: flex-end;
      text-align: right;
    }
    .ss-video-bottom .ss-dots {
      justify-content: flex-end;
    }
    
    .ss-video-bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }
    
    .ss-video-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.1) 40%, rgba(0,0,0,0.1) 60%, rgba(0,0,0,0.3) 100%);
      z-index: 1;
    }
    
    .ss-image-bg {
      position: absolute;
      inset: 0;
      background-size: cover;
      background-position: center;
      filter: brightness(0.7);
    }
    
    .ss-image-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.5) 100%);
    }
    
    .ss-image-spotlight {
      position: absolute;
      width: 100px;
      height: 100px;
      top: 36%;
      left: 32%;
      border-radius: 50%;
      border: 4px solid rgba(255,80,80,0.9);
      box-shadow: 0 0 25px 8px rgba(255,80,80,0.5);
      animation: spotlightPulse 2s ease-in-out infinite;
      pointer-events: none;
    }
    
    @keyframes spotlightPulse {
      0%, 100% { opacity: 0.9; transform: scale(1); }
      50% { opacity: 0.5; transform: scale(0.95); }
    }
    
    .ss-image .ss-content {
      position: relative;
      z-index: 10;
      margin-top: 0;
      margin-bottom: auto;
      padding-top: 15vh;
    }
    
    .ss-image .ss-headline {
      font-size: 4rem;
      text-shadow: 0 2px 30px rgba(0,0,0,0.8);
    }
    
    .ss-image .ss-subtext {
      text-shadow: 0 2px 20px rgba(0,0,0,0.8);
    }
    
    .sleep-btn {
      position: absolute;
      bottom: 20px;
      right: 20px;
      padding: 10px 16px;
      border: none;
      background: var(--gs-gray-200);
      border-radius: var(--gs-radius-sm);
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 0.8125rem;
      color: var(--gs-gray-600);
      font-family: var(--gs-font-body);
      transition: background 0.2s ease;
    }
    
    .sleep-btn:hover {
      background: var(--gs-gray-300);
    }
    
    .sleep-btn svg {
      width: 18px;
      height: 18px;
    }
    
    /* Language selector */
    .ss-language {
      position: absolute;
      top: 20px;
      right: 20px;
      display: flex;
      gap: 8px;
      z-index: 20;
    }
    
    .lang-btn {
      padding: 8px 12px;
      border: 2px solid rgba(255,255,255,0.3);
      background: rgba(255,255,255,0.1);
      color: rgba(255,255,255,0.7);
      font-size: 0.875rem;
      font-weight: 500;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.2s ease;
      font-family: var(--gs-font-body);
    }
    
    .lang-btn:hover {
      background: rgba(255,255,255,0.2);
      color: #fff;
    }
    
    .lang-btn.active {
      background: rgba(255,255,255,0.95);
      color: #0c4a6e;
      border-color: #fff;
    }
    
    /* Timeout warning */
    .timeout-warning {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.7);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 1000;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s ease, visibility 0.3s ease;
    }
    
    .timeout-warning.show {
      display: flex;
      opacity: 1;
      visibility: visible;
    }
    
    .timeout-content {
      background: var(--gs-white);
      padding: 40px 48px;
      border-radius: var(--gs-radius-xl);
      text-align: center;
      box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    }
    
    .timeout-content p {
      font-size: 1.5rem;
      font-weight: 600;
      color: var(--gs-gray-800);
      margin-bottom: 24px;
    }
    
    .timeout-content .btn {
      min-width: 200px;
    }
    
    .countdown-timer {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 60px;
      height: 60px;
      margin: 0 auto 12px;
      border-radius: 50%;
      background: var(--gs-primary-subtle);
      border: 3px solid var(--gs-primary);
    }
    
    .countdown-timer span {
      font-family: var(--gs-font-display);
      font-size: 1.5rem;
      font-weight: 700;
      color: var(--gs-primary);
    }
    
    .countdown-label {
      font-size: 0.875rem !important;
      color: var(--gs-gray-500) !important;
      margin-bottom: 20px !important;
    }
    
    /* SMS Toast */
    .sms-toast {
      position: fixed;
      top: 20px;
      left: 50%;
      transform: translateX(-50%) translateY(-100px);
      padding: 16px 24px;
      border-radius: var(--gs-radius-lg);
      font-weight: 500;
      font-size: 1rem;
      display: flex;
      align-items: center;
      gap: 12px;
      z-index: 1001;
      opacity: 0;
      transition: transform 0.3s ease, opacity 0.3s ease;
    }
    
    .sms-toast.show {
      transform: translateX(-50%) translateY(0);
      opacity: 1;
    }
    
    .sms-toast.success {
      background: #166534;
      color: #fff;
    }
    
    .sms-toast.error {
      background: #dc2626;
      color: #fff;
    }
    
    .toast-icon {
      font-size: 1.25rem;
    }
    
    /* Admin screen */
    .admin-screen {
      padding-top: 4vh;
    }
    
    .admin-stats {
      display: flex;
      gap: 24px;
      justify-content: center;
      margin-bottom: 32px;
    }
    
    .admin-stat {
      background: var(--gs-white);
      border: 1px solid var(--gs-gray-200);
      border-radius: var(--gs-radius-lg);
      padding: 24px 32px;
      text-align: center;
      min-width: 140px;
    }
    
    .admin-stat-value {
      display: block;
      font-size: 2rem;
      font-weight: 700;
      color: var(--gs-primary);
      margin-bottom: 4px;
    }
    
    .admin-stat-label {
      font-size: 0.875rem;
      color: var(--gs-gray-500);
    }
    
    .admin-actions {
      display: flex;
      flex-direction: column;
      gap: 12px;
      max-width: 300px;
      margin: 0 auto;
    }
    
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }
    
    html, body {
      height: 100%;
      overflow-x: hidden;
      font-family: var(--gs-font-body);
      font-size: 16px;
      font-weight: 400;
      line-height: 1.6;
      color: var(--gs-gray-700);
      background: linear-gradient(160deg, #f0f9ff 0%, #e0f2fe 30%, #fff 70%, #fafafa 100%);
      -webkit-font-smoothing: antialiased;
      user-select: none;
    }
    
    /* Decorative background elements */
    body::before {
      content: '';
      position: fixed;
      top: -50%;
      right: -30%;
      width: 80%;
      height: 100%;
      background: radial-gradient(ellipse, rgba(14,165,233,0.06) 0%, transparent 60%);
      pointer-events: none;
      z-index: 0;
    }
    
    body::after {
      content: '';
      position: fixed;
      bottom: -30%;
      left: -20%;
      width: 60%;
      height: 80%;
      background: radial-gradient(ellipse, rgba(6,182,212,0.04) 0%, transparent 60%);
      pointer-events: none;
      z-index: 0;
    }
    
    #app {
      position: relative;
      z-index: 1;
      min-height: 100%;
      display: flex;
      flex-direction: column;
      max-width: 600px;
      margin: 0 auto;
    }
    
    #app:has(.landing-page) {
      max-width: 100%;
    }
    
    #app:has(.results-screen) {
      max-width: 95vw;
    }

    #app:has(.report) {
      max-width: 100%;
    }
    
    @media (min-width: 900px) and (max-height: 700px) {
      #app {
        max-width: 720px;
      }
      #app:has(.results-screen) {
        max-width: 95vw;
      }
    }
    
    .screen {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      padding: 28px 24px;
      padding-top: 8vh;
      overflow-y: auto;
    }
    
    /* Landscape tablet optimization */
    @media (min-width: 900px) {
      .screen {
        padding: 8px 24px;
        padding-top: 1vh;
        justify-content: center;
        overflow: hidden;
      }
      .welcome { padding: 4px 0 }
      .welcome-header { margin-bottom: 8px }
      .welcome-icon { width: 48px; height: 48px; margin-bottom: 6px }
      .welcome-icon svg { width: 24px; height: 24px }
      .welcome h1 { font-size: 1.75rem }
      .welcome-tagline { font-size: 0.9rem }
      .welcome-info { padding: 8px 12px; margin-bottom: 8px }
      .welcome-info h3 { margin-bottom: 4px; font-size: 0.85rem }
      .welcome-info p { margin-bottom: 6px; font-size: 0.8rem }
      .stat-highlight { padding: 6px; margin: 4px -4px }
      .stat-number { font-size: 1.5rem }
      .stat-label { font-size: 0.65rem }
      .duration-badge { font-size: 0.75rem }
      .btn { min-height: 32px; padding: 6px 14px; font-size: 0.8rem }
      .btn-row { margin-top: 6px; gap: 8px }
      .welcome-footer { padding-top: 4px }
      .welcome-footer p { font-size: 0.6rem; margin-bottom: 2px }
      .sms-prompt { padding: 4px 0 }
      .family-tip { padding: 6px 10px; margin-bottom: 6px; font-size: 0.75rem }
      
      /* Disclaimer screen */
      .disclaimer-section { padding: 6px 12px; margin-bottom: 0 }
      .disclaimer-section h3 { margin-bottom: 3px; padding-bottom: 3px; font-size: 0.75rem }
      .disclaimer-section li { margin-bottom: 2px; font-size: 0.7rem }
      .consent-box { padding: 6px 12px; margin: 4px 0; font-size: 0.7rem }
      
      /* Questionnaire - ultra compact */
      .progress { margin-bottom: 2px }
      .progress-dot { width: 8px; height: 8px }
      .question-counter { margin-bottom: 4px; font-size: 0.7rem }
      .question-title { font-size: 1rem; margin-bottom: 2px }
      .question-subtitle { margin-bottom: 6px; font-size: 0.7rem }
      .option { min-height: 30px; padding: 6px 10px; margin-bottom: 4px; font-size: 0.75rem }
      .option.selected::before { width: 18px; height: 18px; margin-right: 8px; font-size: 10px }
      .options-grid { gap: 4px }
      .options-grid .option { min-height: 28px; padding: 5px 8px; font-size: 0.7rem }
      
      /* Horizontal nav layout - landscape adjustments */
      .screen-horizontal { padding: 4px 8px }
      .screen-content { padding: 0 8px }
      .screen-content .progress { margin-bottom: 2px }
      .screen-content .question-counter { margin-bottom: 4px }
      .screen-content .question-title { margin-bottom: 2px }
      .screen-content .question-subtitle { margin-bottom: 6px }
      
      /* Screening */
      .screening-intro { padding: 6px 10px; margin-bottom: 4px; font-size: 0.8rem }
      .screening-intro p { font-size: 0.8rem; margin-bottom: 0 }
      .screening-instructions { padding: 6px 10px; margin-bottom: 4px }
      .screening-instructions h3 { margin-bottom: 4px; font-size: 0.8rem }
      .screening-instructions li { margin-bottom: 2px; font-size: 0.7rem }
      .screening-instructions li span { font-size: 0.65rem !important }
      .screening-note { padding: 4px 8px; margin-bottom: 4px; font-size: 0.65rem }
      .spinner { width: 40px; height: 40px; margin-bottom: 12px }
      .complete-icon { width: 50px; height: 50px; font-size: 24px; margin-bottom: 10px }
      
      /* Results - compact */
      .results-screen { padding-top: 1vh }
      .results-header { margin-bottom: 8px; gap: 12px }
      .results-header .category-badge { padding: 8px 14px }
      .btn-sm { min-height: 30px; padding: 6px 12px; font-size: 0.75rem }
      .category-badge { padding: 6px 12px; margin-bottom: 6px }
      .category-label { font-size: 0.85rem }
      .recommendation-box { padding: 8px; margin-bottom: 6px }
      .recommendation-box p { font-size: 0.7rem; line-height: 1.35 }
      .factors-section { margin-bottom: 4px }
      .factors-heading { font-size: 0.75rem; margin-bottom: 4px }
      .factors-grid { gap: 3px }
      .factor-item { padding: 3px 6px; font-size: 0.7rem }
      .mrf-result { padding: 6px 10px; margin-bottom: 6px }
      .mrf-result h3 { margin-bottom: 3px; font-size: 0.75rem }
      .mrf-result p { font-size: 0.7rem }
      .next-step { padding: 6px 10px; margin-bottom: 6px; font-size: 0.7rem }
      .eye-health-tip { padding: 6px 10px; margin-bottom: 6px; font-size: 0.7rem }
      .disclaimer-text { padding: 4px 0; font-size: 0.6rem }
      
      /* Share/QR screen */
      .qr-container { padding: 12px }
      .qr-container img { width: 100px; height: 100px }
      .qr-note { margin-top: 6px; font-size: 0.75rem }
      .link-box { padding: 8px 12px; margin-top: 8px }
      
      /* SMS form */
      .sms-option { padding: 6px 10px; margin-bottom: 5px }
      .sms-option-title { font-size: 0.8rem }
      .sms-option-desc { font-size: 0.7rem }
      .sms-input-group { margin: 6px 0 }
      .sms-input-label { font-size: 0.7rem }
      .sms-input { padding: 8px 12px; font-size: 0.8rem }
      .sms-preview { margin: 6px 0 }
      .sms-bubble { padding: 6px 10px; font-size: 0.7rem }
      .sms-success { padding: 8px; margin-bottom: 8px }
      .sms-success h3 { font-size: 0.9rem }
      .sms-success p { font-size: 0.75rem }
      
      /* Report */
      .report { padding: 12px 14px }
      .report-header { padding-bottom: 8px; margin-bottom: 8px }
      .report-section { margin-bottom: 8px }
    }
    
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(12px) }
      to { opacity: 1; transform: translateY(0) }
    }
    
    /* Typography */
    h1, h2, h3 {
      font-family: var(--gs-font-display);
      font-weight: 600;
      line-height: 1.2;
      color: var(--gs-gray-900);
      letter-spacing: -0.02em;
    }
    
    h1 { font-size: 2.75rem; font-weight: 700 }
    h2 { font-size: 1.625rem }
    h3 { font-size: 1.125rem; font-weight: 500 }
    
    p { letter-spacing: 0.01em }
    
    a { color: var(--gs-primary); text-decoration: none; font-weight: 500 }
    a:hover { text-decoration: underline }
    
    strong { font-weight: 600; color: var(--gs-gray-800) }
    
    /* Buttons */
    .btn {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 56px;
      padding: 16px 28px;
      font-family: var(--gs-font-body);
      font-size: 1rem;
      font-weight: 600;
      letter-spacing: 0.02em;
      border: none;
      border-radius: var(--gs-radius-md);
      cursor: pointer;
      transition: all 0.2s ease;
      width: 100%;
    }
    
    .btn-primary {
      background: linear-gradient(135deg, var(--gs-primary) 0%, var(--gs-primary-dark) 100%);
      color: #fff;
      box-shadow: var(--gs-shadow-md), 0 2px 8px rgba(14,165,233,0.25);
    }
    
    .btn-primary:hover { transform: translateY(-1px); box-shadow: var(--gs-shadow-lg), 0 4px 12px rgba(14,165,233,0.3) }
    .btn-primary:active { transform: translateY(1px) }
    
    .btn-secondary {
      background: var(--gs-white);
      color: var(--gs-gray-700);
      border: 1.5px solid var(--gs-gray-200);
      box-shadow: var(--gs-shadow-sm);
    }
    
    .btn-secondary:hover { background: var(--gs-gray-50); border-color: var(--gs-gray-300) }
    
    .btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none !important }
    
    .btn-row { display: flex; gap: 12px; margin-top: 20px }
    .btn-row .btn { flex: 1 }
    
    /* Horizontal nav layout - buttons on sides */
    .screen-horizontal {
      flex: 1;
      display: flex;
      flex-direction: row;
      align-items: stretch;
      padding: 8px;
      min-height: 0;
      height: 100%;
    }
    
    .nav-side-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 56px;
      min-width: 56px;
      background: var(--gs-white);
      border: 1.5px solid var(--gs-gray-200);
      border-radius: var(--gs-radius-md);
      cursor: pointer;
      transition: all 0.2s ease;
      box-shadow: var(--gs-shadow-sm);
      color: var(--gs-gray-600);
      flex-shrink: 0;
    }
    
    .nav-side-btn:hover {
      background: var(--gs-gray-50);
      border-color: var(--gs-gray-300);
    }
    
    .nav-side-btn:disabled {
      opacity: 0.35;
      cursor: not-allowed;
    }
    
    .nav-side-btn.primary {
      background: linear-gradient(135deg, var(--gs-primary) 0%, var(--gs-primary-dark) 100%);
      color: #fff;
      border: none;
      box-shadow: var(--gs-shadow-md), 0 2px 8px rgba(14,165,233,0.25);
    }
    
    .nav-side-btn.primary:hover {
      transform: translateX(2px);
    }
    
    .nav-side-btn.primary:disabled {
      opacity: 0.4;
      transform: none;
    }
    
    .nav-side-btn svg {
      width: 24px;
      height: 24px;
    }
    
    .screen-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 0 16px;
      overflow-y: auto;
      min-width: 0;
      text-align: center;
    }
    
    .screen-content > div {
      width: 100%;
      max-width: 400px;
    }
    
    /* Landscape tablet - adjust horizontal nav */
    @media (min-width: 900px) {
      .screen-horizontal {
        padding: 4px;
      }
      .nav-side-btn {
        width: 48px;
        min-width: 48px;
      }
      .nav-side-btn svg {
        width: 20px;
        height: 20px;
      }
      .screen-content {
        padding: 0 12px;
      }
    }
    
    /* Welcome Screen */
    .welcome {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      text-align: center;
      padding: 0;
    }
    
    .welcome-header { margin-bottom: 24px }
    
    .welcome-icon {
      position: relative;
      width: 96px;
      height: 96px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 20px;
    }
    
    .welcome-icon::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, var(--gs-primary-subtle) 0%, #fff 100%);
      border-radius: var(--gs-radius-lg);
      border: 2px solid rgba(14,165,233,0.2);
      box-shadow: var(--gs-shadow-glow);
      transform: rotate(-6deg);
    }
    
    .welcome-icon::after {
      content: '';
      position: absolute;
      inset: 4px;
      background: linear-gradient(135deg, #fff 0%, var(--gs-primary-subtle) 100%);
      border-radius: 20px;
      transform: rotate(-6deg);
    }
    
    .welcome-icon svg {
      position: relative;
      z-index: 1;
      width: 48px;
      height: 48px;
      color: var(--gs-primary);
      filter: drop-shadow(0 2px 4px rgba(14,165,233,0.2));
    }
    
    .welcome h1 {
      color: var(--gs-primary-dark);
      margin-bottom: 4px;
    }
    
    .welcome-tagline {
      font-size: 1.25rem;
      font-weight: 400;
      color: var(--gs-gray-500);
      letter-spacing: 0.04em;
    }
    
    .welcome-info {
      width: 100%;
      background: var(--gs-white);
      padding: 24px;
      border-radius: var(--gs-radius-xl);
      box-shadow: var(--gs-shadow-md);
      text-align: center;
      margin-bottom: 28px;
      border: 1px solid rgba(14,165,233,0.08);
    }
    
    .welcome-info h3 {
      font-family: var(--gs-font-body);
      font-size: 0.8125rem;
      font-weight: 600;
      color: var(--gs-primary-dark);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-bottom: 12px;
    }
    
    .welcome-info p {
      color: var(--gs-gray-600);
      font-size: 1rem;
      margin-bottom: 16px;
      line-height: 1.65;
    }
    
    .stat-highlight {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      padding: 20px;
      margin: 20px -8px;
      background: linear-gradient(135deg, #fff7ed 0%, #fef3c7 100%);
      border-radius: var(--gs-radius-md);
      border: 1px solid rgba(234,88,12,0.15);
    }
    
    .stat-number {
      font-family: var(--gs-font-display);
      font-size: 3rem;
      font-weight: 700;
      color: #ea580c;
      line-height: 1;
      letter-spacing: -0.03em;
    }
    
    .stat-label {
      font-size: 0.9375rem;
      color: #9a3412;
      font-weight: 500;
      text-align: left;
      line-height: 1.3;
    }
    
    .duration-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 8px 16px;
      background: var(--gs-primary-subtle);
      border-radius: 999px;
      font-size: 0.9375rem;
      font-weight: 500;
      color: var(--gs-primary-dark);
    }
    
    .duration-badge svg {
      width: 16px;
      height: 16px;
    }
    
    .welcome-footer {
      text-align: center;
      padding-top: 16px;
    }
    
    .welcome-footer p {
      font-size: 0.8125rem;
      color: var(--gs-gray-400);
      margin-bottom: 8px;
    }
    
    .welcome-brand {
      font-family: var(--gs-font-body);
      font-weight: 600;
      font-size: 0.875rem;
      color: var(--gs-primary);
      letter-spacing: 0.02em;
    }
    
    /* Disclaimer */
    .disclaimer-section {
      background: var(--gs-white);
      padding: 20px 24px;
      border-radius: var(--gs-radius-lg);
      box-shadow: var(--gs-shadow-sm);
      margin-bottom: 16px;
      border: 1px solid var(--gs-gray-100);
    }
    
    .disclaimer-section h3 {
      font-family: var(--gs-font-body);
      font-size: 0.8125rem;
      font-weight: 600;
      color: var(--gs-primary-dark);
      text-transform: uppercase;
      letter-spacing: 0.06em;
      margin-bottom: 16px;
      padding-bottom: 12px;
      border-bottom: 1px solid var(--gs-gray-100);
    }
    
    .disclaimer-section ul {
      list-style: none;
      color: var(--gs-gray-600);
    }
    
    .disclaimer-section li {
      position: relative;
      padding-left: 20px;
      margin-bottom: 12px;
      font-size: 0.9375rem;
      line-height: 1.6;
    }
    
    .disclaimer-section li::before {
      content: '';
      position: absolute;
      left: 0;
      top: 8px;
      width: 6px;
      height: 6px;
      background: var(--gs-primary);
      border-radius: 50%;
    }
    
    .consent-box {
      padding: 20px 24px;
      background: linear-gradient(135deg, var(--gs-primary-subtle) 0%, #e0f2fe 100%);
      border: 2px solid rgba(14,165,233,0.2);
      border-radius: var(--gs-radius-lg);
      text-align: center;
      font-weight: 500;
      color: var(--gs-primary-dark);
      margin: 20px 0;
      font-size: 0.9375rem;
    }
    
    .disclaimer-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      max-width: 700px;
      margin: 0 auto;
    }
    
    @media (max-width: 600px) {
      .disclaimer-grid {
        grid-template-columns: 1fr;
      }
    }
    
    /* Progress Indicator */
    .progress {
      display: flex;
      gap: 8px;
      justify-content: center;
      margin-bottom: 8px;
    }
    
    .progress-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--gs-gray-200);
      transition: all 0.3s ease;
    }
    
    .progress-dot.complete {
      background: var(--gs-primary);
    }
    
    .progress-dot.active {
      background: var(--gs-primary);
      transform: scale(1.3);
      box-shadow: 0 0 0 4px rgba(14,165,233,0.15);
    }
    
    .question-counter {
      text-align: center;
      font-size: 0.8125rem;
      font-weight: 500;
      color: var(--gs-gray-400);
      text-transform: uppercase;
      letter-spacing: 0.1em;
      margin-bottom: 24px;
    }
    
    .question-title {
      text-align: center;
      font-size: 1.5rem;
      margin-bottom: 8px;
      padding: 0 8px;
    }
    
    .question-subtitle {
      text-align: center;
      color: var(--gs-gray-500);
      font-size: 0.9375rem;
      margin-bottom: 28px;
      padding: 0 8px;
    }
    
    /* Options */
    .option {
      display: flex;
      align-items: center;
      min-height: 56px;
      padding: 16px 20px;
      background: var(--gs-white);
      border: 2px solid var(--gs-gray-200);
      border-radius: var(--gs-radius-md);
      margin-bottom: 10px;
      cursor: pointer;
      font-family: var(--gs-font-body);
      font-size: 1rem;
      font-weight: 500;
      color: var(--gs-gray-700);
      transition: all 0.2s ease;
      box-shadow: var(--gs-shadow-sm);
    }
    
    .option:hover {
      border-color: var(--gs-gray-300);
      background: var(--gs-gray-50);
    }
    
    .option.selected {
      border-color: var(--gs-primary);
      background: var(--gs-primary-subtle);
      box-shadow: 0 0 0 3px rgba(14,165,233,0.1);
    }
    
    .option.selected::before {
      content: '✓';
      display: flex;
      align-items: center;
      justify-content: center;
      width: 24px;
      height: 24px;
      margin-right: 12px;
      background: var(--gs-primary);
      color: #fff;
      border-radius: 50%;
      font-size: 12px;
      font-weight: 700;
    }
    
    .options-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }
    
    .options-grid .option {
      margin-bottom: 0;
      font-size: 0.9375rem;
      padding: 14px 16px;
      min-height: 52px;
    }
    
    /* Year of Birth Numpad */
    .yob-picker {
      text-align: center;
      padding: 8px 0;
    }
    
    .yob-display {
      font-size: 3.5rem;
      font-weight: 700;
      color: var(--gs-primary);
      font-family: var(--gs-font-display);
      margin-bottom: 24px;
      letter-spacing: 12px;
      min-height: 56px;
    }
    
    .yob-display.incomplete {
      color: var(--gs-gray-300);
    }
    
    .yob-numpad {
      display: grid;
      grid-template-columns: repeat(3, 72px);
      gap: 12px;
      justify-content: center;
    }
    
    .yob-key {
      width: 72px;
      height: 64px;
      border: none;
      border-radius: var(--gs-radius-md);
      background: var(--gs-gray-100);
      font-size: 1.5rem;
      font-weight: 600;
      color: var(--gs-gray-700);
      cursor: pointer;
      transition: all 0.15s ease;
      font-family: var(--gs-font-body);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .yob-key:active {
      transform: scale(0.95);
      background: var(--gs-gray-200);
    }
    
    .yob-key.backspace {
      font-size: 1.25rem;
      color: var(--gs-gray-500);
    }
    
    .yob-key.clear {
      font-size: 0.875rem;
      color: var(--gs-gray-500);
    }

    /* Screening */
    .screening-center {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
    }
    
    .mrf-help-panel {
      position: fixed;
      top: 10px;
      right: 20px;
      background: linear-gradient(135deg, #fef9c3 0%, #fef08a 100%);
      border: 3px solid #eab308;
      border-radius: var(--gs-radius-lg);
      box-shadow: 0 8px 30px rgba(0,0,0,0.25);
      padding: 14px 18px;
      max-width: 320px;
      max-height: 90vh;
      overflow-y: auto;
      z-index: 100;
      text-align: left;
    }
    
    .mrf-help-header {
      font-weight: 700;
      color: #92400e;
      font-size: 1.1rem;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    
    .mrf-help-steps {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    
    .mrf-help-step {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      font-size: 0.85rem;
      color: #78350f;
      line-height: 1.3;
    }
    
    .mrf-step-num {
      flex-shrink: 0;
      width: 22px;
      height: 22px;
      background: #b45309;
      color: #fff;
      border-radius: 50%;
      font-size: 0.75rem;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .mrf-help-step strong {
      color: #92400e;
      background: rgba(255,255,255,0.6);
      padding: 1px 5px;
      border-radius: 4px;
    }
    
    /* MRF iframe for kiosk mode */
    .mrf-iframe {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: none;
      z-index: 50;
      background: #fff;
    }
    
    .mrf-done-btn {
      position: fixed;
      bottom: 16px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 101;
      min-height: 44px;
      padding: 10px 32px;
      font-size: 1rem;
      box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    }
    
    .mrf-poll-status {
      position: fixed;
      bottom: 68px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 101;
      font-size: 0.7rem;
      color: var(--gs-gray-400);
      background: rgba(255,255,255,0.9);
      padding: 4px 12px;
      border-radius: 12px;
    }
    
    .screening-intro {
      background: linear-gradient(135deg, var(--gs-primary-subtle) 0%, #e0f2fe 100%);
      padding: 24px;
      border-radius: var(--gs-radius-lg);
      margin-bottom: 24px;
      text-align: center;
      border: 1px solid rgba(14,165,233,0.1);
    }
    
    .screening-intro p {
      color: var(--gs-gray-600);
      margin-bottom: 0;
    }
    
    .screening-duration {
      font-size: 1.125rem;
      color: var(--gs-primary-dark);
      font-weight: 600;
    }
    
    .screening-instructions {
      background: var(--gs-white);
      padding: 24px;
      border-radius: var(--gs-radius-lg);
      box-shadow: var(--gs-shadow-sm);
      margin-bottom: 20px;
      border: 1px solid var(--gs-gray-100);
    }
    
    .screening-instructions h3 {
      font-family: var(--gs-font-body);
      font-size: 0.8125rem;
      font-weight: 600;
      color: var(--gs-primary-dark);
      text-transform: uppercase;
      letter-spacing: 0.06em;
      margin-bottom: 16px;
    }
    
    .screening-instructions ol,
    .screening-instructions ul {
      padding-left: 24px;
      color: var(--gs-gray-600);
    }
    
    .screening-instructions li {
      margin-bottom: 12px;
      font-size: 0.9375rem;
      line-height: 1.55;
    }
    
    .screening-note {
      padding: 14px 20px;
      background: linear-gradient(135deg, #fefce8 0%, #fef9c3 100%);
      border-radius: var(--gs-radius-md);
      font-size: 0.875rem;
      color: #a16207;
      text-align: center;
      margin-bottom: 24px;
      border: 1px solid rgba(202,138,4,0.2);
    }
    
    .spinner {
      width: 72px;
      height: 72px;
      border: 3px solid var(--gs-gray-200);
      border-top-color: var(--gs-primary);
      border-radius: 50%;
      animation: spin 1s linear infinite;
      margin-bottom: 28px;
    }
    
    @keyframes spin { to { transform: rotate(360deg) } }
    
    .complete-icon {
      width: 100px;
      height: 100px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 48px;
      color: #fff;
      background: linear-gradient(135deg, var(--gs-continue) 0%, #047857 100%);
      border-radius: 50%;
      margin-bottom: 24px;
      box-shadow: 0 8px 24px -4px rgba(5,150,105,0.35);
      animation: scaleIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    
    @keyframes scaleIn {
      from { transform: scale(0); opacity: 0 }
      to { transform: scale(1); opacity: 1 }
    }
    
    @keyframes blink {
      0%, 100% { opacity: 1 }
      50% { opacity: 0.3 }
    }
    .blink { animation: blink 0.2s ease-in-out 2; }
    
    /* Results */
    .results-banner {
      text-align: center;
      padding: 16px 20px;
      margin-bottom: 16px;
      background: linear-gradient(135deg, #1e3a5f 0%, #0c4a6e 100%);
      color: #fff;
      border-radius: var(--gs-radius-md);
      max-width: 600px;
      margin-left: auto;
      margin-right: auto;
    }
    
    .results-banner p {
      margin: 0;
      font-size: 1.125rem;
      font-weight: 500;
      line-height: 1.5;
    }
    
    .results-banner p strong {
      display: block;
      font-size: 1.25rem;
      font-weight: 600;
      margin-top: 4px;
      color: #fef08a;
    }
    
    .results-header {
      text-align: center;
      margin-bottom: 16px;
    }
    
    .results-screen {
      padding-top: 2vh;
      max-width: 95vw;
      margin: 0 auto;
      width: 100%;
    }
    
    .results-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 12px;
      max-width: 600px;
      margin-left: auto;
      margin-right: auto;
    }
    
    .results-header .category-badge {
      margin: 0;
      flex: 1;
      max-width: none;
    }
    
    .results-actions {
      display: flex;
      gap: 8px;
      flex-shrink: 0;
    }
    
    .btn-sm {
      min-height: 36px;
      padding: 8px 16px;
      font-size: 0.85rem;
      width: auto;
    }
    
    .btn-large {
      min-height: 64px;
      padding: 18px 32px;
      font-size: 1.25rem;
    }
    
    .results-screen .category-badge {
      max-width: 320px;
      margin: 0 auto 12px;
      padding: 16px 20px;
    }
    
    .results-screen .recommendation-box {
      max-width: 500px;
      margin: 0 auto 14px;
      padding: 16px 20px;
    }
    
    .results-screen .recommendation-box p {
      font-size: 1rem;
    }
    
    .factors-section {
      margin-bottom: 12px;
    }
    
    .factors-heading {
      font-family: var(--gs-font-body);
      font-size: 0.75rem;
      font-weight: 600;
      color: var(--gs-gray-500);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-bottom: 10px;
      text-align: center;
    }
    
    .factors-grid {
      display: flex;
      flex-wrap: nowrap;
      gap: 24px;
      justify-content: center;
    }
    
    .factor-item {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      flex: 1 1 0;
      max-width: 250px;
    }
    
    .factor-dot {
      width: 8px;
      height: 8px;
      background: var(--gs-primary);
      border-radius: 50%;
      flex-shrink: 0;
      margin-top: 6px;
    }
    
    .factor-content {
      flex: 1;
    }
    
    .factor-content strong {
      font-size: 0.875rem;
      font-weight: 600;
      color: var(--gs-gray-800);
      display: block;
      margin-bottom: 2px;
    }
    
    .factor-content .factor-note {
      font-size: 0.75rem;
      color: var(--gs-gray-500);
      line-height: 1.4;
      margin: 0;
      font-style: normal;
      text-wrap: balance;
    }
    
    .results-screen .mrf-result {
      max-width: 500px;
      margin: 0 auto 12px;
      width: 100%;
      padding: 14px 20px;
    }
    
    .results-screen .next-step {
      max-width: 500px;
      margin: 0 auto 12px;
      padding: 14px 20px;
    }
    
    .results-screen .eye-health-tip {
      max-width: 500px;
      margin: 0 auto 12px;
      padding: 12px 16px;
    }
    
    .results-screen .disclaimer-text {
      max-width: 500px;
      margin: 0 auto;
      padding: 10px 0;
      font-size: 0.75rem;
    }
    
    .results-screen .btn-row {
      max-width: 400px;
      margin: 10px auto 0;
    }
    
    .results-screen .btn {
      min-height: 44px;
      padding: 10px 20px;
    }
    
    .category-badge {
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 20px 24px;
      border-radius: var(--gs-radius-lg);
      margin-bottom: 20px;
      box-shadow: var(--gs-shadow-md);
    }
    
    .category-label {
      font-family: var(--gs-font-display);
      font-size: 1.375rem;
      font-weight: 600;
      color: #fff;
      letter-spacing: -0.01em;
    }
    
    .recommendation-box {
      padding: 24px;
      background: var(--gs-white);
      border-radius: var(--gs-radius-lg);
      box-shadow: var(--gs-shadow-sm);
      margin-bottom: 16px;
      border: 1px solid var(--gs-gray-100);
      text-align: center;
    }
    
    .recommendation-box.recommendation-urgent {
      background: linear-gradient(135deg, #fef9c3 0%, #fef08a 100%);
      border: 2px solid #f59e0b;
    }
    
    .recommendation-box.recommendation-urgent p {
      color: #78350f;
      font-weight: 500;
    }
    
    .recommendation-box p {
      font-size: 1.0625rem;
      color: var(--gs-gray-600);
      line-height: 1.7;
      text-wrap: balance;
    }
    
    .factors-box {
      padding: 20px 24px;
      background: var(--gs-gray-50);
      border-radius: var(--gs-radius-lg);
      margin-bottom: 16px;
      border: 1px solid var(--gs-gray-100);
      text-align: center;
    }
    
    .factors-box h3 {
      font-family: var(--gs-font-body);
      font-size: 0.8125rem;
      font-weight: 600;
      color: var(--gs-gray-600);
      text-transform: uppercase;
      letter-spacing: 0.06em;
      margin-bottom: 16px;
    }
    
    .factors-list {
      list-style: none;
      display: inline-block;
      text-align: left;
    }
    
    .factors-list li {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 10px 0;
      color: var(--gs-gray-600);
      font-size: 0.9375rem;
      border-bottom: 1px solid var(--gs-gray-200);
    }
    
    .factors-list li:last-child {
      border-bottom: none;
    }
    
    .factors-list li::before {
      content: '';
      width: 8px;
      height: 8px;
      background: var(--gs-primary);
      border-radius: 50%;
      flex-shrink: 0;
      margin-top: 7px;
    }
    
    .factor-note {
      font-size: 0.8125rem;
      color: var(--gs-gray-500);
      font-style: italic;
      margin-top: 6px;
      display: block;
      line-height: 1.5;
    }
    
    .mrf-result {
      padding: 24px;
      background: var(--gs-white);
      border: 1px solid var(--gs-gray-100);
      border-radius: var(--gs-radius-lg);
      box-shadow: var(--gs-shadow-sm);
      margin-bottom: 16px;
      text-align: center;
    }
    
    .mrf-result h3 {
      font-family: var(--gs-font-body);
      font-size: 0.75rem;
      font-weight: 600;
      color: var(--gs-gray-500);
      text-transform: uppercase;
      letter-spacing: 0.06em;
      margin-bottom: 8px;
    }
    
    .mrf-result p {
      font-size: 0.9375rem;
      color: var(--gs-gray-600);
      text-wrap: balance;
    }
    
    .next-step {
      padding: 20px 24px;
      background: linear-gradient(135deg, var(--gs-primary-subtle) 0%, #e0f2fe 100%);
      border: 2px solid rgba(14,165,233,0.2);
      border-radius: var(--gs-radius-lg);
      margin-bottom: 16px;
      color: var(--gs-primary-dark);
      font-size: 0.9375rem;
      text-align: center;
      text-wrap: balance;
    }
    
    .eye-health-tip {
      padding: 16px 20px;
      background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
      border: 1px solid #86efac;
      border-radius: var(--gs-radius-md);
      margin-bottom: 16px;
      font-size: 0.9375rem;
      color: #166534;
      text-align: center;
      text-wrap: balance;
    }
    
    .family-tip {
      padding: 16px 20px;
      background: linear-gradient(135deg, #fefce8 0%, #fef3c7 100%);
      border: 1px solid #fcd34d;
      border-radius: var(--gs-radius-md);
      margin-bottom: 16px;
      font-size: 0.9375rem;
      color: #92400e;
      text-align: center;
      text-wrap: balance;
    }
    
    .disclaimer-text {
      text-align: center;
      font-size: 0.8125rem;
      color: var(--gs-gray-500);
      padding: 20px 0;
      border-top: 1px solid var(--gs-gray-200);
      margin-top: 8px;
    }
    
    /* QR / Share */
    .qr-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 28px;
      background: var(--gs-white);
      border: 2px solid var(--gs-gray-200);
      border-radius: var(--gs-radius-xl);
      box-shadow: var(--gs-shadow-md);
      margin-bottom: 16px;
    }
    
    .qr-container img {
      display: block;
      width: 180px;
      height: 180px;
      border-radius: var(--gs-radius-sm);
    }
    
    .qr-note {
      text-align: center;
      font-size: 0.8125rem;
      color: var(--gs-gray-500);
      margin-top: 16px;
    }
    
    .link-box {
      margin-top: 16px;
      padding: 16px 20px;
      background: var(--gs-gray-100);
      border-radius: var(--gs-radius-md);
      word-break: break-all;
      font-size: 0.8125rem;
      color: var(--gs-gray-600);
      text-align: center;
    }
    
    .link-box a {
      color: var(--gs-primary);
      font-weight: 600;
    }
    
    .copy-btn {
      margin-top: 12px;
      padding: 10px 20px;
      background: var(--gs-primary);
      color: #fff;
      border: none;
      border-radius: var(--gs-radius-sm);
      font-size: 0.875rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    
    .copy-btn:hover { background: var(--gs-primary-dark) }
    .copy-btn:active { transform: scale(0.98) }
    
    /* Report */
    .report {
      padding: 20px 24px;
      max-width: 800px;
      margin: 0 auto;
    }
    
    .report-header {
      text-align: center;
      padding-bottom: 12px;
      border-bottom: 1px solid var(--gs-gray-200);
      margin-bottom: 14px;
    }
    
    .report-logo {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      margin-bottom: 8px;
    }
    
    .report-logo svg {
      width: 24px;
      height: 24px;
      color: var(--gs-primary);
    }
    
    .report-logo span {
      font-family: var(--gs-font-display);
      font-size: 1.25rem;
      font-weight: 700;
      color: var(--gs-primary-dark);
    }
    
    .report-date {
      font-size: 0.75rem;
      color: var(--gs-gray-500);
    }
    
    .report-section {
      margin-bottom: 12px;
    }
    
    .report-section h3 {
      font-family: var(--gs-font-body);
      font-size: 0.7rem;
      font-weight: 600;
      color: var(--gs-gray-500);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-bottom: 6px;
    }
    
    .report-cta {
      margin-top: 14px;
      padding: 14px 18px;
      background: linear-gradient(135deg, var(--gs-primary-subtle) 0%, #e0f2fe 100%);
      border-radius: var(--gs-radius-lg);
      text-align: center;
    }
    
    .report-cta h3 {
      color: var(--gs-primary-dark);
      margin-bottom: 4px;
      text-transform: none;
      letter-spacing: normal;
      font-family: var(--gs-font-display);
      font-size: 0.9rem;
    }
    
    .report-footer {
      margin-top: 16px;
      padding-top: 12px;
      border-top: 1px solid var(--gs-gray-200);
      text-align: center;
      font-size: 0.75rem;
      color: var(--gs-gray-500);
    }

    .report .category-badge { padding: 12px 18px; margin-bottom: 10px; }
    .report .category-label { font-size: 1.125rem; }
    .report .recommendation-box { padding: 14px 18px; margin-bottom: 10px; }
    .report .recommendation-box p { font-size: 0.875rem; line-height: 1.5; }
    .report .mrf-result { padding: 10px 14px; margin-bottom: 8px; }
    .report .mrf-result p { font-size: 0.8125rem; }
    .report .factors-box { padding: 10px 16px; margin-bottom: 8px; }
    .report .factors-list li { padding: 6px 0; font-size: 0.8125rem; }
    .report .eye-health-tip, .report .family-tip { padding: 10px 14px; margin-bottom: 8px; font-size: 0.8125rem; }
    .report .report-cta p { font-size: 0.8125rem; line-height: 1.4; }
    .report-print-btn { margin-top: 12px; }

    @media print {
      @page { margin: 10mm; size: A4 portrait; }
      *, *::before, *::after { box-sizing: border-box !important; float: none !important; }
      html, body { width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; background: #fff !important; font-size: 11px !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
      body::before, body::after { display: none !important; content: none !important; }
      body.printing-report #app { display: none !important; }
      body.printing-report #printReport { display: block !important; width: 100% !important; }
      #printReport .report { max-width: 100% !important; width: 100% !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; overflow: visible !important; }
      .report h2 { font-size: 16px !important; margin-bottom: 4px !important; }
      .report-header { padding-bottom: 8px !important; margin-bottom: 8px !important; text-align: center !important; }
      .report-logo { justify-content: center !important; }
      .report-logo span { font-size: 14px !important; }
      .report-logo svg { width: 18px !important; height: 18px !important; }
      .report-date { font-size: 10px !important; }
      .report-section { margin-bottom: 6px !important; }
      .report-section h3 { font-size: 9px !important; margin-bottom: 4px !important; }
      /* Preserve scale bar colours and positions */
      .edu-scale-bar { position: relative !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
      .edu-zone { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
      .edu-zone-ok { background: #0ea5e9 !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
      .edu-zone-flag { background: #e879a0 !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
      .edu-marker-inline { position: absolute !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
      .edu-dot { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
      .edu-dot-r { background: #1e293b !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
      .edu-dot-l { background: #6366f1 !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
      /* Preserve eye-score card colours */
      .eye-score { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
      .eye-score-ok { background: #e0f2fe !important; border-color: #0ea5e9 !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
      .eye-score-flag { background: #fce4ec !important; border-color: #e879a0 !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
      /* Preserve survey card colours */
      .survey-card { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
      .survey-card-ok { background: #e0f2fe !important; border-color: #0ea5e9 !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
      .survey-card-flag { background: #fce4ec !important; border-color: #e879a0 !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
      /* Preserve universal message */
      .universal-message { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
      .report-cta { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
      .category-badge { padding: 8px 12px !important; margin-top: 6px !important; margin-bottom: 6px !important; box-shadow: none !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
      .category-label { font-size: 13px !important; }
      .recommendation-box { padding: 8px 12px !important; margin-bottom: 6px !important; text-align: center !important; }
      .recommendation-box p { font-size: 11px !important; line-height: 1.4 !important; }
      .mrf-result { padding: 6px 10px !important; margin-top: 4px !important; margin-bottom: 4px !important; }
      .mrf-result p { font-size: 11px !important; }
      .factors-box { padding: 6px 12px !important; margin-bottom: 4px !important; }
      .factors-list li { padding: 4px 0 !important; font-size: 11px !important; }
      .factor-note { font-size: 9px !important; }
      .eye-health-tip, .family-tip { padding: 6px 10px !important; margin-bottom: 4px !important; font-size: 10px !important; }
      .report-cta { padding: 8px 12px !important; margin-top: 8px !important; }
      .report-cta h3 { font-size: 11px !important; }
      .report-cta p { font-size: 10px !important; }
      .report-footer { margin-top: 8px !important; padding-top: 6px !important; font-size: 9px !important; }
      .report-print-btn, .btn { display: none !important; }
    }
    #printReport { display: none; }
    
    /* SMS */
    .sms-prompt {
      text-align: center;
      padding: 20px 0;
    }
    
    .sms-prompt h2 {
      margin-bottom: 12px;
    }
    
    .sms-prompt p {
      color: var(--gs-gray-600);
      margin-bottom: 24px;
    }
    
    .sms-option {
      display: flex;
      align-items: center;
      padding: 18px 20px;
      background: var(--gs-white);
      border: 2px solid var(--gs-gray-200);
      border-radius: var(--gs-radius-md);
      margin-bottom: 10px;
      cursor: pointer;
      transition: all 0.2s ease;
      box-shadow: var(--gs-shadow-sm);
    }
    
    .sms-option:hover {
      border-color: var(--gs-gray-300);
    }
    
    .sms-option.selected {
      border-color: var(--gs-primary);
      background: var(--gs-primary-subtle);
    }
    
    .sms-option-check {
      width: 22px;
      height: 22px;
      border: 2px solid var(--gs-gray-300);
      border-radius: 50%;
      margin-right: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: all 0.2s ease;
    }
    
    .sms-option.selected .sms-option-check {
      background: var(--gs-primary);
      border-color: var(--gs-primary);
      color: #fff;
    }
    
    .sms-option-check::after {
      content: '';
      display: none;
    }
    
    .sms-option.selected .sms-option-check::after {
      content: '✓';
      display: block;
      font-size: 11px;
      font-weight: 700;
    }
    
    .sms-option-content {
      text-align: left;
    }
    
    .sms-option-title {
      font-family: var(--gs-font-body);
      font-weight: 600;
      font-size: 1rem;
      color: var(--gs-gray-800);
    }
    
    .sms-option-desc {
      font-size: 0.875rem;
      color: var(--gs-gray-500);
      margin-top: 2px;
    }
    
    .sms-input-group {
      margin: 20px 0;
    }
    
    .sms-input-label {
      display: block;
      font-weight: 600;
      font-size: 0.875rem;
      color: var(--gs-gray-700);
      margin-bottom: 8px;
      text-align: left;
    }
    
    .sms-input {
      width: 100%;
      padding: 16px 20px;
      font-size: 1rem;
      font-family: var(--gs-font-body);
      border: 2px solid var(--gs-gray-200);
      border-radius: var(--gs-radius-md);
      outline: none;
      transition: all 0.2s ease;
      background: var(--gs-white);
    }
    
    .sms-input:focus {
      border-color: var(--gs-primary);
      box-shadow: 0 0 0 3px rgba(14,165,233,0.1);
    }
    
    .sms-input::placeholder {
      color: var(--gs-gray-400);
    }
    
    .sms-success {
      text-align: center;
      padding: 24px;
      background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
      border: 2px solid #86efac;
      border-radius: var(--gs-radius-lg);
      margin-bottom: 20px;
    }
    
    .sms-success-icon {
      font-size: 40px;
      margin-bottom: 12px;
    }
    
    .sms-success h3 {
      font-family: var(--gs-font-body);
      color: #166534;
      margin-bottom: 4px;
    }
    
    .sms-success p {
      color: #15803d;
      font-size: 0.875rem;
    }
    
    .sms-preview {
      margin: 20px 0;
    }
    
    .sms-bubble {
      background: var(--gs-gray-100);
      padding: 16px 20px;
      border-radius: var(--gs-radius-lg);
      border-bottom-left-radius: 4px;
      font-size: 0.875rem;
      line-height: 1.6;
      color: var(--gs-gray-700);
    }
    
    /* SMS Form Grid Layout */
    .sms-form-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 12px;
      max-width: 700px;
      margin-left: auto;
      margin-right: auto;
    }
    
    .sms-form-title {
      text-align: left;
    }
    
    .sms-form-actions {
      display: flex;
      gap: 8px;
      flex-shrink: 0;
    }
    
    .sms-form-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      max-width: 700px;
      margin: 0 auto;
    }
    
    .sms-form-left,
    .sms-form-right {
      display: flex;
      flex-direction: column;
    }
    
    @media (max-width: 600px) {
      .sms-form-grid {
        grid-template-columns: 1fr;
        gap: 12px;
      }
    }
    /* === NEW: Educational Scale Styles === */
    .results-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16px;
      padding: 0 4px;
    }
    .results-title h2 {
      font-size: 1.25rem;
      font-weight: 700;
      color: var(--gs-gray-900, #111827);
      margin: 0;
    }
    .scales-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      max-width: 540px;
      margin: 0 auto 12px;
    }
    .report .scales-row {
      max-width: 700px;
    }
    .scales-row .scale-section {
      margin-bottom: 0;
      margin-left: 0;
      margin-right: 0;
      max-width: none;
    }
    @media (max-width: 600px) {
      .scales-row { grid-template-columns: 1fr; }
    }
    .scale-section {
      background: #fff;
      border: 1px solid var(--gs-gray-200, #e5e7eb);
      border-radius: 12px;
      padding: 16px;
      margin-bottom: 12px;
      max-width: 540px;
      margin-left: auto;
      margin-right: auto;
    }
    .scale-section h3 {
      font-size: 0.9375rem;
      font-weight: 600;
      margin-bottom: 4px;
      color: var(--gs-gray-900, #111827);
    }
    .edu-scale { margin-top: 8px; }
    .edu-scale {
      position: relative;
      padding: 0 14px;
    }
    .edu-scale-bar {
      position: relative;
      height: 48px;
      border-radius: 8px;
      overflow: visible;
      display: flex;
    }
    .edu-zone {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .edu-zone span {
      font-size: 0.6875rem;
      font-weight: 600;
      color: #fff;
      white-space: nowrap;
    }
    .edu-zone-ok { background: #0ea5e9; border-radius: 8px 0 0 8px; }
    .edu-zone-flag { background: #e879a0; border-radius: 0 8px 8px 0; }
    .edu-scale-bar { margin-bottom: 4px; }
    .edu-scale-labels {
      display: flex;
      justify-content: space-between;
      font-size: 0.625rem;
      color: var(--gs-gray-400, #9ca3af);
      margin-top: 2px;
      padding: 0 2px;
    }
    .edu-marker-inline {
      position: absolute;
      transform: translateX(-50%);
      display: flex;
      align-items: center;
      gap: 2px;
      z-index: 2;
    }
    .edu-marker-r {
      top: 4px;
    }
    .edu-marker-l {
      bottom: 4px;
    }
    .edu-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      flex-shrink: 0;
      border: 1.5px solid #fff;
    }
    .edu-dot-r { background: #1e293b; }
    .edu-dot-l { background: #6366f1; }
    .edu-dot-label {
      font-size: 0.5625rem;
      font-weight: 700;
      color: #fff;
      white-space: nowrap;
      line-height: 1;
      text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    }
    .eye-scores {
      display: flex;
      gap: 8px;
      margin-bottom: 12px;
    }
    .eye-score {
      flex: 1;
      background: var(--gs-gray-50, #f8fafc);
      border: 1px solid var(--gs-gray-200, #e5e7eb);
      border-radius: 8px;
      padding: 8px 10px;
      text-align: center;
    }
    .eye-label {
      display: block;
      font-size: 0.6875rem;
      color: var(--gs-gray-400, #9ca3af);
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.03em;
      margin-bottom: 2px;
    }
    .eye-value {
      display: block;
      font-size: 1rem;
      font-weight: 700;
      color: var(--gs-gray-900, #111827);
    }
    .eye-score-ok {
      background: #e0f2fe;
      border-color: #0ea5e9;
    }
    .eye-score-ok .eye-value { color: #0369a1; }
    .eye-score-flag {
      background: #fce4ec;
      border-color: #e879a0;
    }
    .eye-score-flag .eye-value { color: #be185d; }
    .scale-ref {
      font-size: 0.6875rem;
      color: var(--gs-gray-400, #9ca3af);
      margin-top: 8px;
      line-height: 1.4;
    }
    .survey-section {
      max-width: 540px;
      margin: 16px auto;
    }
    .survey-heading {
      font-size: 0.9375rem;
      font-weight: 700;
      text-align: center;
      color: var(--gs-gray-600, #4b5563);
      margin-bottom: 12px;
    }
    .survey-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }
    .survey-card {
      border-radius: 10px;
      padding: 14px;
      text-align: center;
      border: 2px solid transparent;
    }
    .survey-card-title {
      display: block;
      font-size: 0.6875rem;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.03em;
      margin-bottom: 4px;
    }
    .survey-card-value {
      display: block;
      font-size: 1.0625rem;
      font-weight: 700;
    }
    .survey-card-ok {
      background: #e0f2fe;
      border-color: #0ea5e9;
    }
    .survey-card-ok .survey-card-title { color: #0369a1; }
    .survey-card-ok .survey-card-value { color: #0c4a6e; }
    .survey-card-flag {
      background: #fce4ec;
      border-color: #e879a0;
    }
    .survey-card-flag .survey-card-title { color: #be185d; }
    .survey-card-flag .survey-card-value { color: #9d174d; }
    .survey-card-note {
      display: block;
      font-size: 0.625rem;
      font-weight: 400;
      line-height: 1.3;
      margin-top: 6px;
      opacity: 0.75;
    }
    .survey-card-glow {
      box-shadow: 0 0 0 3px rgba(232, 121, 160, 0.3), 0 0 12px rgba(232, 121, 160, 0.2);
      animation: glowPulse 2s ease-in-out infinite;
    }
    @keyframes glowPulse {
      0%, 100% { box-shadow: 0 0 0 3px rgba(232, 121, 160, 0.3), 0 0 12px rgba(232, 121, 160, 0.2); }
      50% { box-shadow: 0 0 0 5px rgba(232, 121, 160, 0.4), 0 0 20px rgba(232, 121, 160, 0.3); }
    }
    @media (max-width: 400px) {
      .survey-grid { grid-template-columns: 1fr; }
    }
    .exam-alert {
      display: flex;
      gap: 10px;
      align-items: flex-start;
      padding: 14px 16px;
      background: #fef3c7;
      border: 1px solid #f59e0b;
      border-radius: 10px;
      max-width: 540px;
      margin: 12px auto;
      font-size: 0.875rem;
      color: #92400e;
    }
    .rf-section {
      background: #fff;
      border: 1px solid var(--gs-gray-200, #e5e7eb);
      border-radius: 12px;
      padding: 20px;
      max-width: 540px;
      margin: 12px auto;
    }
    .rf-heading {
      font-size: 1rem;
      font-weight: 700;
      margin: 0 0 2px;
    }
    .rf-source {
      font-size: 0.6875rem;
      color: var(--gs-gray-400, #9ca3af);
      margin: 0 0 12px;
    }
    .rf-count {
      background: #fef3c7;
      color: #92400e;
      font-weight: 600;
      font-size: 0.8125rem;
      padding: 8px 12px;
      border-radius: 8px;
      margin-bottom: 12px;
      text-align: center;
    }
    .rf-list {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .rf-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 6px 10px;
      border-radius: 8px;
      font-size: 0.8125rem;
    }
    .rf-match {
      background: #fce4ec;
      color: #be185d;
      font-weight: 600;
    }
    .rf-match svg { color: #be185d; flex-shrink: 0; }
    .rf-no {
      color: var(--gs-gray-400, #9ca3af);
    }
    .rf-dash {
      width: 16px;
      text-align: center;
      flex-shrink: 0;
      color: var(--gs-gray-300, #d1d5db);
    }
      display: flex;
      align-items: flex-start;
      gap: 8px;
      background: #fef3c7;
      border: 1px solid #fbbf24;
      border-radius: 8px;
      padding: 12px;
      margin-top: 12px;
      font-size: 0.8125rem;
      color: #92400e;
      line-height: 1.4;
    }
    .edu-reference-panel {
      background: var(--gs-gray-50, #f8fafc);
      border: 1px solid var(--gs-gray-200, #e5e7eb);
      border-radius: 12px;
      padding: 16px;
      margin-top: 12px;
      margin-bottom: 12px;
      max-width: 540px;
      margin-left: auto;
      margin-right: auto;
    }
    .edu-reference-panel h4 {
      font-size: 0.875rem;
      font-weight: 600;
      margin-bottom: 4px;
    }
    .edu-ref-source {
      font-size: 0.6875rem;
      color: var(--gs-gray-400, #9ca3af);
      margin-bottom: 10px;
    }
    .edu-reference-panel ul {
      list-style: disc;
      padding-left: 20px;
      margin: 0;
      font-size: 0.8125rem;
      color: var(--gs-gray-600, #475569);
      line-height: 1.6;
    }
    .universal-message {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      background: #eff6ff;
      border: 1px solid #bfdbfe;
      border-radius: 12px;
      padding: 16px;
      margin-top: 12px;
      max-width: 540px;
      margin-left: auto;
      margin-right: auto;
    }
    .universal-message svg { flex-shrink: 0; margin-top: 2px; color: #2563eb; }
    .universal-message p {
      font-size: 0.875rem;
      font-weight: 500;
      color: #1e40af;
      line-height: 1.5;
      margin: 0;
    }
    /* Small screen adjustments for scales */
    @media (max-height: 700px) {
      .scale-section { padding: 10px 12px; margin-bottom: 8px; }
      .edu-reference-panel { padding: 10px 12px; }
      .universal-message { padding: 10px 12px; }
    }

    /* Expiry countdown banner */
    .expiry-banner {
      display: flex;
      align-items: center;
      gap: 10px;
      background: #f0f9ff;
      border: 1px solid #bae6fd;
      border-radius: 10px;
      padding: 12px 16px;
      margin: 0 auto 16px;
      max-width: 540px;
      font-size: 0.8125rem;
      color: #0c4a6e;
      line-height: 1.4;
    }
    .expiry-banner svg { flex-shrink: 0; color: #0284c7; }
    .expiry-banner strong { font-weight: 700; }
    .expiry-banner.expiry-urgent {
      background: #fef3c7;
      border-color: #fcd34d;
      color: #78350f;
    }
    .expiry-banner.expiry-urgent svg { color: #d97706; }
    @media print { .expiry-banner { display: none; } }

    /* === KIOSK MODE: Landscape tablet optimisations === */
    @media (min-width: 900px) {
      /* Tweak 4: Results screen - horizontal layout to fit single viewport */
      .results-screen.kiosk-results {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto 1fr 1fr auto;
        gap: 6px 12px;
        padding: 6px 16px;
        max-width: 780px;
        margin: 0 auto;
        height: 100vh;
        box-sizing: border-box;
        overflow: hidden;
      }
      .results-screen.kiosk-results .results-banner {
        grid-column: 1 / -1;
        margin-bottom: 0;
        padding: 6px 16px;
      }
      .results-screen.kiosk-results .results-banner p { font-size: 0.8rem; }
      .results-screen.kiosk-results .results-title {
        grid-column: 1 / -1;
        margin-bottom: 6px;
        margin-top: 4px;
      }
      .results-screen.kiosk-results .results-title h2 { font-size: 1.1rem; }
      .results-screen.kiosk-results .kiosk-tl {
        grid-column: 1;
        grid-row: 3;
      }
      .results-screen.kiosk-results .kiosk-tr {
        grid-column: 2;
        grid-row: 3;
      }
      .results-screen.kiosk-results .kiosk-bl {
        grid-column: 1;
        grid-row: 4;
      }
      .results-screen.kiosk-results .kiosk-br {
        grid-column: 2;
        grid-row: 4;
        display: flex;
        align-items: stretch;
      }
      .results-screen.kiosk-results .scale-section {
        padding: 10px 12px;
        margin: 0;
        max-width: none;
        height: 100%;
        box-sizing: border-box;
      }
      .results-screen.kiosk-results .scale-section h3 { font-size: 0.8rem; margin-bottom: 2px; }
      .results-screen.kiosk-results .eye-scores { gap: 6px; }
      .results-screen.kiosk-results .eye-score { padding: 4px 8px; }
      .results-screen.kiosk-results .edu-scale-bar { height: 36px; }
      .results-screen.kiosk-results .scale-ref { font-size: 0.6rem; margin-top: 4px; }
      .results-screen.kiosk-results .survey-section {
        max-width: none;
        margin: 0;
        height: 100%;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
      }
      .results-screen.kiosk-results .survey-grid {
        flex: 1;
      }
      .results-screen.kiosk-results .survey-heading { font-size: 0.8rem; margin-bottom: 6px; }
      .results-screen.kiosk-results .survey-card { padding: 6px; }
      .results-screen.kiosk-results .survey-card-title { font-size: 0.6rem; }
      .results-screen.kiosk-results .survey-card-value { font-size: 0.8rem; }
      .results-screen.kiosk-results .survey-card-note { font-size: 0.55rem; margin-top: 3px; }
      .results-screen.kiosk-results .universal-message {
        max-width: none;
        padding: 12px 14px;
        margin: 0;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        gap: 12px;
      }
      .results-screen.kiosk-results .universal-message.kiosk-universal {
        flex-direction: column;
        justify-content: center;
        text-align: center;
        gap: 0;
      }
      .results-screen.kiosk-results .universal-message.kiosk-universal p { font-size: 0.85rem; margin: 0; }
      .results-screen.kiosk-results .universal-message p { font-size: 0.8rem; }
      .results-screen.kiosk-results .kiosk-bottom {
        grid-column: 1 / -1;
        grid-row: 5;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        padding-top: 8px;
      }
      .results-screen.kiosk-results .disclaimer-box { 
        max-width: none; 
        padding: 6px 12px; 
        margin: 0;
      }
      .results-screen.kiosk-results .disclaimer-box p { font-size: 0.65rem; }

      /* Tweak 6: Exit survey - compact for landscape tablet */
      .kiosk-survey {
        display: flex;
        flex-direction: column;
        gap: 11px;
        max-width: 520px;
        margin: 0 auto;
        text-align: left;
      }
      .kiosk-survey h2 {
        text-align: center;
        margin-bottom: 0;
        font-size: 1.2rem;
      }
      .kiosk-survey .survey-q p { font-size: 0.9rem; margin-bottom: 6px; font-weight: 600; }
      .kiosk-survey .survey-q .btn { font-size: 0.85rem; min-height: 38px; padding: 6px 16px; }
      .kiosk-survey-full {
        text-align: center;
      }
      .kiosk-nps-row {
        display: flex;
        gap: 4px;
      }
      .kiosk-nps-row button {
        flex: 1 !important;
        width: auto !important;
        height: 38px !important;
        border-radius: 8px !important;
        font-size: 0.85rem !important;
      }
    }