/* ════════════════════════════════════════════════════════════════
 * NN Hellas — PWA Single-Question Mode (DARK MODE v3)
 *
 * Σχεδιαστική φιλοσοφία: Typeform-dark meets Apple HIG dark theme
 *   • Premium σκούρο φόντο με υποδεικτικό gradient
 *   • Πορτοκαλί accents (NN brand) που λάμπουν σε σκούρο φόντο
 *   • Κάθε επιλογή ως «card» με γράμμα-πρόθεμα (A, B, C…)
 *   • Required answer per question — δεν επιτρέπει skipping
 *
 * Ενεργοποιείται ΜΟΝΟ σε standalone PWA mode.
 * Σε browser ο πελάτης βλέπει την κανονική (light) διάταξη.
 * ════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════
 *  COLOR PALETTE — Dark Theme
 *
 *  --bg-base        #0E0E10  /* base background */
 *  --bg-elev-1      #18181B  /* elevated surface */
 *  --bg-elev-2      #1F1F23  /* card */
 *  --bg-elev-3      #27272A  /* badges, secondary surfaces */
 *  --border-1       #2A2A2E
 *  --border-2       #3F3F46
 *  --text-primary   #FAFAFA
 *  --text-secondary #D4D4D8
 *  --text-muted     #A1A1AA
 *  --text-faint     #71717A
 *  --orange         #FF9248  /* slightly lighter for dark mode contrast */
 *  --orange-bright  #FFA552
 *  --orange-deep    #E87722
 * ════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════
 *  1.  BASE PWA BEHAVIOR (iOS quirks, dark theme, safe areas)
 * ════════════════════════════════════════════════════════════════ */

body.pwa-mode {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  background:
    radial-gradient(ellipse at top, rgba(232,119,34,0.08) 0%, transparent 50%),
    linear-gradient(180deg, #0E0E10 0%, #161618 100%);
  background-attachment: fixed;
  color: #FAFAFA;
  min-height: 100vh;
  min-height: 100dvh;
}
body.pwa-mode input,
body.pwa-mode textarea {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}
body.pwa-mode {
  padding-top:    env(safe-area-inset-top);
  padding-left:   env(safe-area-inset-left);
  padding-right:  env(safe-area-inset-right);
}

/* Prevent iOS zoom on input focus */
body.pwa-mode input[type="text"],
body.pwa-mode input[type="email"],
body.pwa-mode input[type="tel"],
body.pwa-mode input[type="number"],
body.pwa-mode textarea,
body.pwa-mode select { font-size: 16px; }


/* ════════════════════════════════════════════════════════════════
 *  2.  SINGLE-QUESTION VISIBILITY CONTROL
 * ════════════════════════════════════════════════════════════════ */

body.pwa-mode .screen.active .q-block.pwa-q-hidden { display: none !important; }
body.pwa-mode .screen.active .nav-row              { display: none !important; }

/* Welcome (s0) & Results (s6) — όχι single-mode */
body.pwa-mode .screen#s0 .q-block,
body.pwa-mode .screen#s6 .q-block { display: block !important; }


/* ════════════════════════════════════════════════════════════════
 *  3.  TOP THIN PROGRESS BAR
 * ════════════════════════════════════════════════════════════════ */

body.pwa-mode #progress-track {
  height: 3px;
  background: rgba(255,255,255,0.05);
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
}
body.pwa-mode #progress-fill {
  background: linear-gradient(90deg, #E87722 0%, #FFA552 100%);
  box-shadow: 0 0 12px rgba(255,165,82,0.55);
  height: 100%;
  transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}


/* ════════════════════════════════════════════════════════════════
 *  4.  MINI PROGRESS DOTS (ερωτήσεις εντός βήματος)
 * ════════════════════════════════════════════════════════════════ */

.pwa-mini-progress { display: none; }

body.pwa-mode .pwa-mini-progress {
  display: flex;
  gap: 5px;
  padding: 24px 24px 0;
  max-width: 640px;
  margin: 0 auto;
  position: relative;
  z-index: 5;
}
body.pwa-mode .pwa-mini-progress .dot {
  flex: 1;
  height: 4px;
  background: rgba(255,255,255,0.08);
  border-radius: 4px;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
body.pwa-mode .pwa-mini-progress .dot.done {
  background: #E87722;
  opacity: 0.85;
}
body.pwa-mode .pwa-mini-progress .dot.current {
  background: linear-gradient(90deg, #E87722 0%, #FFA552 100%);
  box-shadow: 0 0 10px rgba(255,165,82,0.6);
}


/* ════════════════════════════════════════════════════════════════
 *  5.  MAIN APP CONTAINER & QUESTION CARD
 * ════════════════════════════════════════════════════════════════ */

body.pwa-mode .app {
  max-width: 640px;
  margin: 0 auto;
  padding: 16px 20px 140px;
  position: relative;
  color: #FAFAFA;
}

body.pwa-mode .screen.active {
  animation: pwa-screen-enter 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Screen-level header (step + title) */
body.pwa-mode .screen.active .step-label {
  display: inline-block;
  padding: 7px 14px;
  background: rgba(255,165,82,0.12);
  color: #FFA552;
  border: 1px solid rgba(255,165,82,0.2);
  border-radius: 100px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  margin: 24px 0 10px;
}
body.pwa-mode .screen.active .screen-title {
  font-size: 24px;
  font-weight: 800;
  color: #FAFAFA;
  margin-bottom: 4px;
  letter-spacing: -0.4px;
}
body.pwa-mode .screen.active .screen-sub {
  font-size: 14px;
  color: #A1A1AA;
  margin-bottom: 20px;
  display: none;
}

/* Error message */
body.pwa-mode .error-msg:not(:empty) {
  background: rgba(220,38,38,0.12);
  color: #FCA5A5;
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 16px;
  font-size: 14px;
  border-left: 4px solid #EF4444;
}

/* The active question — hero card treatment */
body.pwa-mode .screen.active .q-block.pwa-q-current {
  background: linear-gradient(180deg, #1F1F23 0%, #18181B 100%);
  border-radius: 20px;
  padding: 28px 24px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.05) inset,
    0 10px 32px rgba(0,0,0,0.45),
    0 4px 16px rgba(232,119,34,0.06);
  border: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 16px;
}

/* Shake animation when user tries to proceed without answer */
body.pwa-mode .screen.active .q-block.pwa-q-current.pwa-shake {
  animation: pwa-shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97);
  border-color: rgba(239,68,68,0.5);
  box-shadow:
    0 0 0 4px rgba(239,68,68,0.12),
    0 10px 32px rgba(0,0,0,0.45);
}
@keyframes pwa-shake {
  10%, 90% { transform: translateX(-3px); }
  20%, 80% { transform: translateX(5px); }
  30%, 50%, 70% { transform: translateX(-8px); }
  40%, 60% { transform: translateX(8px); }
}

/* Inline required-answer hint */
body.pwa-mode .pwa-required-hint {
  display: none;
  color: #FCA5A5;
  font-size: 13px;
  font-weight: 600;
  margin-top: 14px;
  padding: 8px 12px;
  background: rgba(239,68,68,0.1);
  border-radius: 8px;
  border-left: 3px solid #EF4444;
}
body.pwa-mode .q-block.pwa-q-current.pwa-show-required .pwa-required-hint {
  display: block;
  animation: pwa-fade-in 0.3s ease;
}
@keyframes pwa-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Hero question text */
body.pwa-mode .screen.active .q-block.pwa-q-current .q-label {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.35;
  color: #FAFAFA;
  margin-bottom: 22px;
  letter-spacing: -0.4px;
  font-family: 'Lora', Georgia, serif;
}

/* Hint text */
body.pwa-mode .screen.active .q-block.pwa-q-current .q-hint {
  font-size: 13px;
  color: #A1A1AA;
  background: rgba(255,255,255,0.03);
  border-radius: 10px;
  padding: 10px 14px;
  margin: -8px 0 16px;
  border-left: 3px solid #FFA552;
}
body.pwa-mode .screen.active .q-block.pwa-q-current .q-hint-explain {
  font-size: 13.5px;
  color: #D4D4D8;
  line-height: 1.6;
  background: rgba(255,165,82,0.06);
  border-radius: 12px;
  padding: 14px 16px;
  margin: -6px 0 18px;
  border: 1px solid rgba(255,165,82,0.15);
}
body.pwa-mode .screen.active .q-block.pwa-q-current .q-hint-explain.q-hint-attention {
  color: #FFFFFF;
  font-weight: 600;
  background: rgba(255,165,82,0.16);
  border: 1px solid rgba(255,165,82,0.45);
  border-left: 4px solid #FFA552;
}


/* ════════════════════════════════════════════════════════════════
 *  6.  OPTION CARDS με γράμματα προθέματα (A, B, C, D…)
 * ════════════════════════════════════════════════════════════════ */

body.pwa-mode .opts {
  display: flex;
  flex-direction: column;
  gap: 10px;
  counter-reset: opt-letter;
}

body.pwa-mode .opts.grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

body.pwa-mode .opt {
  counter-increment: opt-letter;
  background: #27272A;
  border: 2px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  transition: all 0.18s ease;
  min-height: 56px;
  position: relative;
}

/* Letter badge before option text */
body.pwa-mode .opt::before {
  content: counter(opt-letter, upper-alpha);
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  background: rgba(255,255,255,0.08);
  color: #D4D4D8;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
  font-family: 'Nunito Sans', sans-serif;
  transition: all 0.18s ease;
  order: -1;
}

/* Hide original dot/check */
body.pwa-mode .opt .opt-dot,
body.pwa-mode .opt .opt-check { display: none !important; }

body.pwa-mode .opt .opt-text {
  flex: 1;
  font-size: 15px;
  font-weight: 600;
  color: #E4E4E7;
  line-height: 1.4;
}

body.pwa-mode .opt:hover {
  border-color: rgba(255,165,82,0.4);
  background: #2D2A28;
}

/* Selected state — for radios (input:checked) AND checkboxes (.sel class via togMulti) */
body.pwa-mode .opt:has(input:checked),
body.pwa-mode .opt.sel {
  border-color: #FF9248;
  background: linear-gradient(135deg, rgba(232,119,34,0.18) 0%, rgba(255,146,72,0.08) 100%);
  box-shadow:
    0 0 0 4px rgba(255,146,72,0.08),
    0 8px 24px rgba(232,119,34,0.25);
}
body.pwa-mode .opt:has(input:checked)::before,
body.pwa-mode .opt.sel::before {
  background: linear-gradient(135deg, #E87722, #FFA552);
  color: #18181B;
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(255,146,72,0.5);
}
body.pwa-mode .opt:has(input:checked) .opt-text,
body.pwa-mode .opt.sel .opt-text {
  color: #FFFFFF;
  font-weight: 700;
}

body.pwa-mode .opt:active { transform: scale(0.98); }


/* ════════════════════════════════════════════════════════════════
 *  7.  FORM INPUTS (name, email, phone, spouse age)
 * ════════════════════════════════════════════════════════════════ */

body.pwa-mode .form-input {
  width: 100%;
  background: #27272A;
  border: 2px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 16px 18px;
  font-size: 16px;
  font-weight: 600;
  color: #FAFAFA;
  transition: all 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
}
body.pwa-mode .form-input:focus {
  outline: none;
  border-color: #FF9248;
  background: #2A2724;
  box-shadow: 0 0 0 4px rgba(255,146,72,0.12);
}
body.pwa-mode .form-input::placeholder {
  color: #71717A;
  font-weight: 500;
}


/* ════════════════════════════════════════════════════════════════
 *  8.  SLIDERS
 * ════════════════════════════════════════════════════════════════ */

body.pwa-mode .slider-wrap {
  background: linear-gradient(135deg, rgba(232,119,34,0.08) 0%, rgba(255,255,255,0.02) 100%);
  border-radius: 16px;
  padding: 24px 20px;
  border: 1px solid rgba(255,165,82,0.15);
}
body.pwa-mode .slider-val {
  font-size: 36px;
  font-weight: 800;
  color: #FFA552;
  text-align: center;
  margin-bottom: 16px;
  font-family: 'Lora', Georgia, serif;
  letter-spacing: -1px;
  text-shadow: 0 0 24px rgba(255,165,82,0.3);
}
body.pwa-mode .slider-wrap input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: rgba(255,255,255,0.08);
  border-radius: 3px;
  outline: none;
}
body.pwa-mode .slider-wrap input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 28px; height: 28px;
  background: linear-gradient(135deg, #E87722, #FFA552);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(255,146,72,0.5);
  border: 3px solid #18181B;
}
body.pwa-mode .slider-wrap input[type="range"]::-moz-range-thumb {
  width: 28px; height: 28px;
  background: linear-gradient(135deg, #E87722, #FFA552);
  border-radius: 50%;
  cursor: pointer;
  border: 3px solid #18181B;
  box-shadow: 0 4px 16px rgba(255,146,72,0.5);
}
body.pwa-mode .slider-labels {
  color: #71717A;
}


/* ════════════════════════════════════════════════════════════════
 *  9.  FLOATING NAVIGATION BAR
 * ════════════════════════════════════════════════════════════════ */

.pwa-nav { display: none; }

body.pwa-mode .pwa-nav {
  display: block;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  padding: 16px 20px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, #0E0E10 50%, rgba(14,14,16,0));
  z-index: 100;
  pointer-events: none;
}

body.pwa-mode .pwa-nav-row {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
  max-width: 640px;
  margin: 0 auto;
  pointer-events: auto;
}

body.pwa-mode .pwa-nav button {
  font-family: inherit;
  border: none;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}
body.pwa-mode .pwa-nav button:active:not(:disabled) { transform: scale(0.95); }

/* Back button */
body.pwa-mode .pwa-btn-prev {
  background: rgba(255,255,255,0.06);
  color: #A1A1AA;
  padding: 14px 20px;
  border-radius: 14px;
  font-size: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  flex: 0 0 auto;
  min-width: 90px;
}
body.pwa-mode .pwa-btn-prev:hover {
  background: rgba(255,255,255,0.1);
  color: #FAFAFA;
}

/* Next button — gradient FAB */
body.pwa-mode .pwa-btn-next {
  background: linear-gradient(135deg, #E87722 0%, #FFA552 100%);
  color: #18181B;
  padding: 16px 28px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 800;
  box-shadow:
    0 8px 24px rgba(232,119,34,0.4),
    0 2px 4px rgba(232,119,34,0.2);
  flex: 1;
  letter-spacing: 0.2px;
}
body.pwa-mode .pwa-btn-next:hover:not(:disabled) {
  background: linear-gradient(135deg, #FFA552 0%, #FFB776 100%);
  box-shadow: 0 12px 32px rgba(255,165,82,0.5);
}

/* Disabled — when current question hasn't been answered */
body.pwa-mode .pwa-btn-next:disabled,
body.pwa-mode .pwa-btn-next.pwa-disabled {
  background: rgba(255,255,255,0.08);
  color: #71717A;
  box-shadow: none;
  cursor: not-allowed;
}


/* ════════════════════════════════════════════════════════════════
 * 10.  AUTO-ADVANCE HINT
 * ════════════════════════════════════════════════════════════════ */

body.pwa-mode .pwa-auto-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 0 4px 12px;
  max-width: 640px;
  margin: 0 auto;
  opacity: 0;
  height: 0;
  overflow: hidden;
  transition: opacity 0.25s ease, height 0.25s ease;
  pointer-events: auto;
}
body.pwa-mode .pwa-auto-hint.visible {
  opacity: 1;
  height: 32px;
}
body.pwa-mode .pwa-auto-hint-bar {
  width: 100%;
  height: 3px;
  background: rgba(255,165,82,0.12);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}
body.pwa-mode .pwa-auto-hint.visible .pwa-auto-hint-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #E87722 0%, #FFA552 100%);
  border-radius: 2px;
  animation: pwa-auto-fill 2.2s linear forwards;
  transform-origin: left center;
  box-shadow: 0 0 8px rgba(255,165,82,0.6);
}
@keyframes pwa-auto-fill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
body.pwa-mode .pwa-auto-hint-text {
  font-size: 11px;
  font-weight: 600;
  color: #71717A;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}


/* ════════════════════════════════════════════════════════════════
 * 11.  ANIMATIONS
 * ════════════════════════════════════════════════════════════════ */

body.pwa-mode .screen.active .q-block.pwa-q-current {
  animation: pwa-q-enter 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
body.pwa-mode .screen.active .q-block.pwa-q-current .opt {
  animation: pwa-opt-enter 0.45s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
body.pwa-mode .screen.active .q-block.pwa-q-current .opt:nth-child(1) { animation-delay: 0.05s; }
body.pwa-mode .screen.active .q-block.pwa-q-current .opt:nth-child(2) { animation-delay: 0.10s; }
body.pwa-mode .screen.active .q-block.pwa-q-current .opt:nth-child(3) { animation-delay: 0.15s; }
body.pwa-mode .screen.active .q-block.pwa-q-current .opt:nth-child(4) { animation-delay: 0.20s; }
body.pwa-mode .screen.active .q-block.pwa-q-current .opt:nth-child(5) { animation-delay: 0.25s; }
body.pwa-mode .screen.active .q-block.pwa-q-current .opt:nth-child(n+6) { animation-delay: 0.30s; }

@keyframes pwa-q-enter {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pwa-opt-enter {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pwa-screen-enter {
  from { opacity: 0; }
  to   { opacity: 1; }
}


/* ════════════════════════════════════════════════════════════════
 * 12.  TABLET / iPad (≥768px) — generous spacing, big typography
 * ════════════════════════════════════════════════════════════════ */

@media (min-width: 768px) {

  body.pwa-mode .app {
    max-width: 720px;
    padding: 32px 48px 160px;
  }

  body.pwa-mode .pwa-mini-progress {
    max-width: 720px;
    padding: 32px 48px 0;
    gap: 7px;
  }
  body.pwa-mode .pwa-mini-progress .dot { height: 5px; }

  body.pwa-mode .screen.active .step-label {
    font-size: 12px;
    padding: 8px 18px;
    margin-top: 32px;
    margin-bottom: 14px;
  }
  body.pwa-mode .screen.active .screen-title {
    font-size: 30px;
    margin-bottom: 6px;
  }
  body.pwa-mode .screen.active .screen-sub {
    display: block;
    font-size: 16px;
    margin-bottom: 28px;
  }

  body.pwa-mode .screen.active .q-block.pwa-q-current {
    padding: 44px 40px;
    border-radius: 28px;
    box-shadow:
      0 1px 0 rgba(255,255,255,0.05) inset,
      0 20px 48px rgba(0,0,0,0.5),
      0 8px 24px rgba(232,119,34,0.08);
  }
  body.pwa-mode .screen.active .q-block.pwa-q-current .q-label {
    font-size: 30px;
    margin-bottom: 32px;
    line-height: 1.3;
  }
  body.pwa-mode .screen.active .q-block.pwa-q-current .q-hint,
  body.pwa-mode .screen.active .q-block.pwa-q-current .q-hint-explain {
    font-size: 15px;
    padding: 16px 20px;
  }

  body.pwa-mode .opts { gap: 12px; }
  body.pwa-mode .opt {
    padding: 22px 24px;
    border-radius: 18px;
    min-height: 72px;
    gap: 18px;
  }
  body.pwa-mode .opt::before {
    width: 40px; height: 40px;
    font-size: 16px;
    border-radius: 10px;
  }
  body.pwa-mode .opt .opt-text {
    font-size: 17px;
    line-height: 1.45;
  }

  body.pwa-mode .form-input {
    font-size: 18px;
    padding: 20px 22px;
    border-radius: 16px;
  }

  body.pwa-mode .slider-wrap {
    padding: 32px 28px;
    border-radius: 20px;
  }
  body.pwa-mode .slider-val {
    font-size: 48px;
    margin-bottom: 20px;
  }
  body.pwa-mode .slider-wrap input[type="range"] { height: 8px; }
  body.pwa-mode .slider-wrap input[type="range"]::-webkit-slider-thumb {
    width: 36px; height: 36px;
  }
  body.pwa-mode .slider-wrap input[type="range"]::-moz-range-thumb {
    width: 36px; height: 36px;
  }

  body.pwa-mode .pwa-nav {
    padding: 24px 48px;
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  }
  body.pwa-mode .pwa-nav-row {
    max-width: 720px;
    gap: 16px;
  }
  body.pwa-mode .pwa-btn-prev {
    padding: 18px 28px;
    font-size: 16px;
    min-width: 130px;
    border-radius: 16px;
  }
  body.pwa-mode .pwa-btn-next {
    padding: 20px 36px;
    font-size: 17px;
    border-radius: 16px;
    box-shadow:
      0 12px 32px rgba(232,119,34,0.5),
      0 4px 8px rgba(232,119,34,0.2);
  }
  body.pwa-mode .pwa-auto-hint {
    max-width: 720px;
    padding: 0 8px 14px;
  }
  body.pwa-mode .pwa-auto-hint.visible { height: 36px; }
}


/* ════════════════════════════════════════════════════════════════
 * 13.  iPad landscape & iPad Pro (≥1024px)
 * ════════════════════════════════════════════════════════════════ */

@media (min-width: 1024px) {

  body.pwa-mode .app {
    max-width: 760px;
    padding: 48px 56px 180px;
  }
  body.pwa-mode .pwa-mini-progress {
    max-width: 760px;
    padding: 40px 56px 0;
  }
  body.pwa-mode .pwa-nav-row { max-width: 760px; }

  body.pwa-mode .screen.active .screen-title {
    font-size: 34px;
  }
  body.pwa-mode .screen.active .q-block.pwa-q-current .q-label {
    font-size: 32px;
    line-height: 1.28;
  }
  body.pwa-mode .screen.active .q-block.pwa-q-current {
    padding: 52px 48px;
  }
}


/* ════════════════════════════════════════════════════════════════
 * 14.  Landscape orientation: 2-col για non-grid2 opts
 * ════════════════════════════════════════════════════════════════ */

@media (min-width: 900px) and (orientation: landscape) {
  body.pwa-mode .opts:not(.grid2) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
}


/* ════════════════════════════════════════════════════════════════
 * 15.  WELCOME SCREEN (s0) — dark beautified
 * ════════════════════════════════════════════════════════════════ */

body.pwa-mode .screen#s0.active {
  text-align: center;
}
body.pwa-mode .screen#s0 .welcome-card {
  background: linear-gradient(180deg, #1F1F23 0%, #18181B 100%);
  border-radius: 20px;
  padding: 24px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.05) inset,
    0 10px 32px rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.06);
  margin: 20px 0;
  text-align: left;
}
body.pwa-mode .screen#s0 h2 { color: #FAFAFA; }
body.pwa-mode .screen#s0 p { color: #D4D4D8; }
body.pwa-mode .screen#s0 .step-item {
  color: #E4E4E7;
  background: rgba(255,255,255,0.04);
  border-radius: 10px;
  margin-bottom: 6px;
}
body.pwa-mode .screen#s0 .step-num {
  background: linear-gradient(135deg, #E87722, #FFA552);
  color: #18181B;
}
body.pwa-mode .screen#s0 .advisor-badge {
  background: rgba(255,165,82,0.1);
  color: #FFA552;
  border: 1px solid rgba(255,165,82,0.2);
}
body.pwa-mode .screen#s0 .nn-logo {
  color: #FFA552;
}
body.pwa-mode .screen#s0 .nn-sub {
  color: #D4D4D8;
}

/* Primary button on welcome */
body.pwa-mode .btn-primary {
  background: linear-gradient(135deg, #E87722 0%, #FFA552 100%);
  color: #18181B;
  box-shadow: 0 8px 24px rgba(232,119,34,0.4);
}

@media (min-width: 768px) {
  body.pwa-mode .screen#s0 .welcome-card {
    padding: 36px;
    border-radius: 28px;
  }
}