/* Senior-First A++ Stylesheet · Contrast >= 7:1 · Touch Targets >= 56x56px · Zero Overflow */
:root {
  --paper: #fffdf8;
  --ink: #162c3b;
  --muted: #263946;
  --blue: #163e63;
  --green: #164d43;
  --danger: #7a1c1c;
  --line: #54646e;
  --soft: #eef3f2;
  --warm: #f4efe3;
  --warn-bg: #fff4d9;
  --warn-ink: #5a2e0e;
  --night-bg: #0f1113;
  --night-card: #181c20;
  --night-ink: #f4efe3;
  --night-accent: #f4dfaa;
  --font-base: 20px;
  --font-scale: 1;
}

html.font-size-normal { --font-base: 18px; --font-scale: 0.9; }
html.font-size-large  { --font-base: 20px; --font-scale: 1; }
html.font-size-xlarge { --font-base: 24px; --font-scale: 1.2; }

*, *::before, *::after { box-sizing: border-box; min-width: 0; }

html {
  color: var(--ink);
  background: var(--warm);
  scroll-padding: 24px;
}

body {
  margin: 0;
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: var(--font-base);
  line-height: 1.6;
  color: var(--ink);
  background: var(--warm);
  overflow-wrap: anywhere;
}

body.night-sanctuary-mode {
  background: var(--night-bg);
  color: var(--night-ink);
}

button, input, textarea, select {
  font: inherit;
  color: inherit;
  max-width: 100%;
}

button, .btn, .cta, .primary-btn, .nav-tab, a[role="button"] {
  min-height: 56px;
  min-width: 56px;
  padding: 12px 18px;
  border: 2px solid var(--line);
  border-radius: 10px;
  background: #ffffff;
  color: var(--ink);
  cursor: pointer;
  font-weight: 700;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

button:hover, .btn:hover { background: #e3ecec; border-color: var(--ink); }
button:active { transform: translateY(1px); }

:focus-visible {
  outline: 3px solid #0c3f67;
  outline-offset: 4px;
  box-shadow: 0 0 0 7px #ffffff;
}

p, h1, h2, h3, h4, li, label, span { overflow-wrap: anywhere; }
h1, h2, h3, h4 { line-height: 1.3; text-wrap: pretty; }
a { color: var(--blue); text-underline-offset: 4px; }

.skip-link {
  position: absolute;
  top: -120px;
  left: 16px;
  z-index: 300;
  background: #ffffff;
  color: var(--ink);
  padding: 14px 18px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  font-weight: 800;
}
.skip-link:focus { top: 12px; }

/* In-App WebView Escape Banner */
.webview-escape-banner {
  display: none;
  padding: 18px 20px;
  background: var(--warn-bg);
  color: var(--warn-ink);
  border-bottom: 3px solid var(--warn-ink);
}
.webview-escape-banner.active { display: block; }
.webview-escape-inner { max-width: 1160px; margin: auto; }
.webview-escape-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.webview-escape-btn {
  background: var(--warn-ink);
  color: #ffffff;
  border-color: var(--warn-ink);
}
.webview-escape-btn:hover { background: #3f1f08; color: #ffffff; }
.webview-escape-btn.secondary { background: #ffffff; color: var(--warn-ink); border-color: var(--warn-ink); }

/* Top Bar: 9 Languages + Font Scaling */
.top-bar {
  background: var(--ink);
  color: #ffffff;
  padding: 16px 24px;
  border-bottom: 5px solid #bad4ca;
}
.top-bar-inner {
  max-width: 1180px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.lang-selector-group, .font-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.language-caption, .font-controls-label {
  color: #ffffff;
  font-size: calc(18px * var(--font-scale));
  font-weight: 700;
  margin-right: 4px;
}
.lang-btn {
  background: var(--ink);
  color: #ffffff;
  border-color: #c2d0d4;
  padding: 10px 12px;
  min-width: 58px;
  min-height: 56px;
}
.lang-btn:hover { background: #2c4657; color: #ffffff; border-color: #ffffff; }
.lang-btn.active {
  background: #ffffff;
  color: var(--ink);
  border-color: #ffffff;
  box-shadow: inset 0 -5px var(--green);
}
.font-btn {
  padding: 10px 14px;
  min-width: 58px;
  min-height: 56px;
  background: #ffffff;
  color: var(--ink);
  border-color: #ffffff;
}
.font-btn.active {
  background: #f4dfaa;
  color: var(--ink);
  border-color: #f4dfaa;
  box-shadow: inset 0 -5px var(--ink);
}

/* Main App Container */
.app-container {
  max-width: 1180px;
  margin: auto;
  padding: 24px 24px 56px;
}

.hero-header {
  padding: 24px 28px;
  margin-bottom: 22px;
  background: var(--paper);
  color: var(--ink);
  border: 2px solid #8a999e;
  border-left: 8px solid var(--green);
  border-radius: 6px 16px 16px 6px;
}
.edition {
  font-size: calc(18px * var(--font-scale));
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--green);
  margin: 0 0 8px;
}
.hero-title {
  font-family: Georgia, serif;
  font-size: calc(32px * var(--font-scale));
  margin: 0 0 10px;
  font-weight: 700;
  color: var(--ink);
}
.hero-subtitle {
  font-size: var(--font-base);
  margin: 0 0 16px;
  color: var(--muted);
}
.privacy-banner {
  background: #edf4ef;
  border: 1px solid #4e6c5e;
  border-radius: 8px;
  padding: 12px 16px;
  color: #14362b;
  font-size: calc(18px * var(--font-scale));
  font-weight: 600;
}
.demo-status-banner {
  margin-top: 12px;
  background: #eef4fa;
  border: 1px solid var(--blue);
  border-radius: 8px;
  padding: 12px 16px;
  color: var(--ink);
  font-size: calc(18px * var(--font-scale));
  font-weight: 600;
}
.hero-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
  align-items: center;
}
.guide-btn {
  background: var(--paper);
  color: var(--blue);
  border: 2px solid var(--blue);
}
.guide-btn:hover { background: #e4edf3; }
.pin-gate-open-btn {
  background: var(--green);
  color: #ffffff;
  border-color: var(--green);
}
.pin-gate-open-btn:hover { background: #103b33; color: #ffffff; }
.paper-format-pill {
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
  color: var(--ink);
  font-size: calc(17px * var(--font-scale));
  font-weight: 700;
}

/* Passwordless PIN Gate Card */
.auth-gate-card {
  background: var(--paper);
  color: var(--ink);
  border: 3px solid var(--blue);
  border-radius: 16px;
  padding: 28px;
  margin-bottom: 24px;
}
.auth-gate-card.hidden { display: none; }
.pin-display-row {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 18px 0;
  flex-wrap: wrap;
}
.pin-slot {
  width: 50px;
  height: 60px;
  border: 2px solid var(--ink);
  border-radius: 10px;
  background: #ffffff;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(28px * var(--font-scale));
  font-weight: 800;
}
.pin-slot.filled { background: #edf4ef; border-color: var(--green); }
.pin-keypad-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(64px, 1fr));
  gap: 10px;
  max-width: 340px;
  margin: 0 auto 18px;
}
.pin-key-btn {
  min-width: 64px;
  min-height: 64px;
  font-size: calc(26px * var(--font-scale));
  font-weight: 800;
  background: #ffffff;
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 12px;
}
.pin-key-btn:hover { background: #e4edf3; }
.pin-key-btn.action { background: var(--soft); font-size: calc(20px * var(--font-scale)); }

/* 5-Module Navigation Tabs */
.module-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 24px;
}
.module-tab-btn,
.acc-subtab-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  gap: 8px;
  padding: 14px;
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--line);
  font-size: calc(18px * var(--font-scale));
}
.module-tab-btn.active, .acc-subtab-btn.active, .btn-primary-giant {
  background: var(--blue);
  color: #ffffff;
  border-color: var(--blue);
}
.module-tab-btn.active:hover, .acc-subtab-btn.active:hover, .btn-primary-giant:hover {
  background: #102f4c;
  color: #ffffff;
}
.btn-green-giant {
  background: var(--green);
  color: #ffffff;
  border-color: var(--green);
}
.btn-green-giant:hover { background: #103b33; color: #ffffff; }
.btn-secondary-giant {
  background: #ffffff;
  color: var(--ink);
  border-color: var(--ink);
}
.btn-danger-giant {
  background: var(--danger);
  color: #ffffff;
  border-color: var(--danger);
}
.btn-danger-giant:hover { background: #5a1313; color: #ffffff; }

.module-panel {
  display: none;
  border: 2px solid #7d8d94;
  border-radius: 16px;
  background: var(--paper);
  color: var(--ink);
  padding: 28px;
}
.module-panel.active { display: block; }

.section-h2 { font-size: calc(27px * var(--font-scale)); margin: 0 0 10px; }
.section-intro { color: var(--muted); margin: 0 0 22px; }

/* Form Inputs */
.form-field-block { margin-bottom: 20px; }
.input-label { display: block; font-size: var(--font-base); font-weight: 700; margin-bottom: 10px; }
.form-input-large, .form-textarea-large, .letter-select-dropdown {
  display: block;
  width: 100%;
  min-height: 58px;
  font-size: var(--font-base);
  background: #ffffff;
  color: var(--ink);
  border: 2px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
}
.form-textarea-large { min-height: 112px; resize: vertical; }
::placeholder { color: #364752; opacity: 1; }

.action-btn-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 12px;
  margin-top: 16px;
}

.status-banner {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 8px;
  border: 2px solid var(--blue);
  background: #eef4fa;
  color: var(--ink);
  font-weight: 700;
}
.status-banner.ok { border-color: var(--green); background: #edf4ef; color: #14362b; }
.status-banner.err { border-color: var(--danger); background: #fdf0f0; color: var(--danger); }
.status-banner.hidden { display: none; }

/* Module 1: Vault 6 Sections Grid */
.vault-crypto-box {
  padding: 20px;
  border: 2px solid var(--blue);
  border-radius: 12px;
  background: var(--soft);
  margin-bottom: 24px;
}
.vault-pass-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}
.vault-sections-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 28px;
}
.vault-section-card {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #ffffff;
}
.divider-hr { border: 0; border-top: 2px solid #cbd5da; margin: 28px 0; }

/* Module 2: Voice Legacy + QR Album */
.prompt-card-box {
  padding: 20px;
  border: 2px solid var(--green);
  border-left: 8px solid var(--green);
  border-radius: 12px;
  background: #edf4ef;
  color: #14362b;
  margin-bottom: 20px;
}
.voice-rec-btn {
  min-height: 68px;
  width: 100%;
  font-size: calc(22px * var(--font-scale));
}
.voice-rec-btn.recording {
  background: var(--danger);
  border-color: var(--danger);
  color: #ffffff;
}
.album-grid {
  display: grid;
  gap: 18px;
  margin-top: 20px;
}
.qr-album-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  gap: 16px;
  padding: 20px;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: #ffffff;
  color: var(--ink);
  align-items: center;
}
.qr-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
}
.qr-box svg {
  width: 132px;
  height: 132px;
  max-width: 100%;
  background: #ffffff;
  border: 2px solid var(--ink);
  padding: 4px;
}

/* Module 3: Night Sanctuary Dark Mode (#0F1113 / #F4EFE3) */
#panel-sanctuary.active,
body.night-sanctuary-mode #panel-sanctuary {
  background: var(--night-bg);
  color: var(--night-ink);
  border-color: #495663;
}
body.night-sanctuary-mode .hero-header,
body.night-sanctuary-mode .account-footer {
  background: var(--night-card);
  color: var(--night-ink);
  border-color: #495663;
}
body.night-sanctuary-mode .hero-title,
body.night-sanctuary-mode .hero-subtitle,
body.night-sanctuary-mode .edition,
body.night-sanctuary-mode .section-intro {
  color: var(--night-ink);
}
body.night-sanctuary-mode .privacy-banner,
body.night-sanctuary-mode .demo-status-banner {
  background: #1f262c;
  color: var(--night-ink);
  border-color: #6b7b89;
}
.sanctuary-stage {
  background: var(--night-card);
  color: var(--night-ink);
  border: 2px solid #556370;
  border-radius: 16px;
  padding: 28px 22px;
  text-align: center;
  margin-bottom: 22px;
}
.sanctuary-play-btn {
  width: 88px;
  height: 88px;
  min-width: 88px;
  min-height: 88px;
  border-radius: 50%;
  background: var(--night-accent);
  color: var(--night-bg);
  border: 3px solid #ffffff;
  font-size: calc(30px * var(--font-scale));
  margin: 14px auto;
}
.sanctuary-play-btn:hover { background: #ffffff; color: var(--night-bg); }
.sanctuary-timers {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 16px 0;
}
.sanctuary-timer-btn, .sanctuary-track-btn, .sanctuary-mode-btn {
  background: #22282e;
  color: var(--night-ink);
  border: 2px solid #8a9aa8;
}
.sanctuary-timer-btn.active, .sanctuary-track-btn.active {
  background: var(--night-accent);
  color: var(--night-bg);
  border-color: var(--night-accent);
}
.sanctuary-track-list {
  display: grid;
  gap: 10px;
  margin: 16px 0;
}
.sanctuary-track-btn { justify-content: space-between; text-align: left; width: 100%; }

/* Module 4: Scam Shield */
.scam-result-card {
  margin-top: 20px;
  padding: 22px;
  border-radius: 12px;
  border: 3px solid var(--ink);
  background: #ffffff;
  color: var(--ink);
}
.scam-result-card.hidden { display: none; }
.scam-result-card.red { border-color: var(--danger); background: #fdf0f0; }
.scam-result-card.yellow { border-color: #714500; background: #fff6df; }
.scam-result-card.green { border-color: var(--green); background: #edf4ef; }
.scam-verdict-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: calc(22px * var(--font-scale));
  font-weight: 800;
  margin-bottom: 12px;
}
.traffic-light-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-block;
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
}

/* Module 5: Accelerators 2026 */
.disclaimer-box {
  padding: 16px 18px;
  background: #fff7e7;
  color: var(--warn-ink);
  border: 2px solid #82592b;
  border-radius: 10px;
  font-weight: 700;
  margin-bottom: 20px;
}
.disclaimer-box.bottom { margin-top: 24px; margin-bottom: 0; }
.acc-region-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}
.acc-region-btn { background: var(--soft); color: var(--ink); }
.acc-region-btn.active { background: var(--blue); color: #ffffff; border-color: var(--blue); }
.acc-subtabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}
.acc-subpanel { display: none; }
.acc-subpanel.active { display: block; }

.quiz-progress-bar-wrap { height: 14px; border: 1px solid #49635d; border-radius: 8px; background: #e7eeee; overflow: hidden; margin: 8px 0 16px; }
.quiz-progress-bar-fill { background: var(--green); height: 100%; }
.quiz-step-badge, .diagnosis-header-badge { display: inline-block; border-radius: 6px; background: var(--soft); padding: 6px 12px; margin-bottom: 14px; font-weight: 700; }
.quiz-question-title { font-size: calc(23px * var(--font-scale)); margin: 0 0 18px; }
.quiz-options-list { display: grid; gap: 12px; }
.quiz-option-btn { justify-content: space-between; text-align: left; padding: 16px 18px; width: 100%; }
.quiz-option-arrow { flex-shrink: 0; color: var(--blue); }
.quiz-nav-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.diagnosis-grid { display: grid; gap: 14px; margin: 18px 0; }
.diag-item-box { border: 1px solid var(--line); border-left: 6px solid var(--blue); padding: 16px; border-radius: 8px; background: #ffffff; }
.diag-item-box.money { background: #edf4ef; border-left-color: var(--green); }
.diag-item-box.step { background: #fff7e7; border-left-color: #754019; }
.diag-item-label { font-weight: 800; margin-bottom: 6px; }

.calc-selector-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 22px; }
.calc-select-card { justify-content: flex-start; text-align: left; background: var(--soft); padding: 14px; }
.calc-select-card.active { border: 3px solid var(--blue); background: #e4edf3; color: var(--ink); box-shadow: inset 0 -4px var(--blue); }
.calc-workspace, .letter-workspace { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 22px; align-items: start; }
.calc-inputs-box, .letter-form-box { padding: 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--soft); }
.input-field-group { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #899b9d; }
.input-field-group:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.stepper-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) 56px; gap: 8px; }
.stepper-btn { padding: 6px; font-size: calc(24px * var(--font-scale)); background: var(--blue); color: #ffffff; border-color: var(--blue); }
.stepper-btn:hover { background: #102f4c; color: #ffffff; }
.numeric-input-large { min-height: 58px; width: 100%; text-align: center; border: 2px solid var(--line); border-radius: 8px; background: #ffffff; font-weight: 800; font-size: calc(22px * var(--font-scale)); padding: 8px 4px; }
.unit-badge { grid-column: 1 / -1; font-size: calc(17px * var(--font-scale)); color: var(--muted); font-weight: 700; }
.preset-chips-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.preset-chip.active { background: #dcebe3; border-color: var(--green); box-shadow: inset 0 -4px var(--green); }
.calc-results-box { border: 2px solid var(--blue); border-radius: 12px; padding: 20px; background: #ffffff; }
.kpi-cards-grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 18px; }
.kpi-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 10px; padding: 14px; border: 1px solid #87999a; border-radius: 8px; background: var(--soft); }
.kpi-card.highlight { background: #edf4ef; border-left: 5px solid var(--green); }
.kpi-card-label { font-weight: 600; }
.kpi-card-val { font-size: calc(21px * var(--font-scale)); font-weight: 800; }
.comparison-bars-section { padding: 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--soft); margin-bottom: 16px; }
.comp-bar-group { margin-bottom: 16px; }
.comp-bar-group:last-child { margin-bottom: 0; }
.comp-bar-header { display: flex; flex-direction: column; gap: 4px; font-weight: 700; margin-bottom: 8px; }
.comp-bar-track { height: calc(38px * var(--font-scale)); position: relative; border: 1px solid var(--line); border-radius: 6px; background: #e1e8eb; }
.comp-bar-fill { height: 100%; background: var(--green); border-radius: 4px; }
.comp-bar-fill.bar-b { background: #713c12; }
.bar-value { position: absolute; right: 6px; top: 3px; padding: 0 6px; border-radius: 4px; background: #ffffff; color: var(--ink); font-weight: 800; line-height: 1.4; }
.plain-explanation-box { padding: 16px; background: #fff7e7; border: 1px solid #82592b; border-radius: 8px; margin-bottom: 16px; }
.legal-badge-box { padding: 14px; background: #eaf0f5; color: var(--ink); border: 1px solid #5d7384; border-radius: 8px; margin-bottom: 16px; }

/* Printable A4 / Letter Sheets */
.selected-letter-title { padding: 14px 16px; background: var(--soft); border-left: 4px solid var(--blue); margin: 0 0 20px; font-weight: 700; }
.a4-preview-wrapper { padding: 16px; background: #e9eeed; border: 1px solid #718381; border-radius: 8px; }
.a4-sheet { padding: 26px; background: #ffffff; color: var(--ink); font-size: var(--font-base); line-height: 1.65; font-family: Georgia, serif; }
.a4-sender-block { padding-bottom: 14px; border-bottom: 2px solid var(--ink); margin-bottom: 20px; }
.a4-recipient-date-row { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; margin-bottom: 20px; }
.a4-recipient-block { white-space: pre-line; }
.a4-subject-line { border-left: 4px solid var(--ink); padding-left: 14px; margin-bottom: 20px; font-weight: 700; }
.a4-body-p { text-align: left; margin: 0 0 16px; }
.a4-signature-block { margin-top: 28px; }
.a4-signature-line { border-top: 2px solid var(--ink); padding-top: 8px; margin-top: 40px; display: block; width: 100%; }
.a4-attachments-box { margin-top: 26px; border-top: 1px solid var(--ink); padding-top: 14px; }
.a4-attachment-item { display: flex; align-items: center; gap: 12px; min-height: 56px; margin-bottom: 10px; cursor: pointer; }
.a4-checkbox { width: 30px; height: 30px; flex-shrink: 0; accent-color: var(--green); }
.copy-feedback-banner { display: none; border: 2px solid var(--green); background: #edf4ef; color: #14362b; padding: 16px; margin-top: 14px; border-radius: 8px; }
.manual-copy { width: 100%; min-height: 180px; font: inherit; margin-top: 12px; }

/* Sticky In-App Guide Modal (>= 64px Header) */
.guide-modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(15, 17, 19, 0.8);
  padding: 16px;
  overflow-y: auto;
}
.guide-modal-backdrop.open { display: block; }
.guide-modal-dialog {
  max-width: 860px;
  margin: 0 auto;
  background: var(--paper);
  color: var(--ink);
  border: 3px solid var(--ink);
  border-radius: 16px;
  overflow: hidden;
}
.guide-modal-header {
  position: sticky;
  top: 0;
  z-index: 10;
  min-height: 68px;
  background: var(--ink);
  color: #ffffff;
  padding: 12px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.guide-modal-body { padding: 26px; }
.guide-page-card {
  padding: 20px;
  margin-bottom: 18px;
  border: 1px solid var(--line);
  border-left: 6px solid var(--green);
  border-radius: 10px;
  background: #ffffff;
}

/* Transparent Account Footer (VAMP / FTC) */
.account-footer {
  max-width: 1180px;
  margin: 0 auto 40px;
  padding: 24px;
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--line);
  border-radius: 14px;
}
.footer-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 16px;
}
.footer-legal-link {
  background: var(--soft);
  color: var(--ink);
  border: 2px solid var(--line);
  border-radius: 10px;
  padding: 12px 16px;
  min-height: 56px;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

/* Responsive Breakpoints */
@media (max-width: 980px) {
  .module-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vault-sections-grid, .calc-workspace, .letter-workspace, .acc-subtabs, .calc-selector-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 700px) {
  .top-bar { padding: 14px; }
  .top-bar-inner { gap: 14px; }
  .lang-selector-group {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    gap: 8px;
  }
  .language-caption { grid-column: 1 / -1; }
  .lang-btn { width: 100%; padding: 10px 6px; }
  .font-controls { width: 100%; justify-content: space-between; }
  .font-controls-label { width: 100%; }
  .font-btn { flex: 1; }
  .app-container { padding: 16px 14px 36px; }
  .hero-header { padding: 18px 16px; }
  .hero-title { font-size: calc(27px * var(--font-scale)); }
  .module-tabs { grid-template-columns: minmax(0, 1fr); }
  .module-panel { padding: 18px 14px; }
  .vault-pass-row { grid-template-columns: minmax(0, 1fr); }
  .qr-album-card { grid-template-columns: minmax(0, 1fr); }
  .kpi-card { grid-template-columns: minmax(0, 1fr); }
  .a4-preview-wrapper { padding: 8px; }
  .a4-sheet { padding: 16px 12px; }
  .account-footer { margin: 0 14px 32px; padding: 18px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}

@media print {
  .no-print, .top-bar, .hero-header, .module-tabs, .auth-gate-card, .account-footer, .skip-link, .webview-escape-banner {
    display: none !important;
  }
  body {
    background: #ffffff !important;
    color: #000000 !important;
    font-size: 16.5pt !important;
    line-height: 1.5 !important;
  }
  .app-container { padding: 0; margin: 0; max-width: none; }
  .module-panel { border: 0; padding: 0; background: #ffffff; }

  body.print-target-guide .module-panel { display: none !important; }
  body.print-target-guide #guide-modal {
    display: block !important;
    position: static !important;
    background: #ffffff !important;
    padding: 0 !important;
  }
  body.print-target-guide .guide-modal-header { display: none !important; }
  body.print-target-guide .guide-modal-dialog { border: 0 !important; max-width: none !important; }
  body.print-target-guide * { font-size: 16.5pt !important; color: #000000 !important; }

  body.print-target-universal-letter #panel-vault { display: block !important; }
  body.print-target-universal-letter .vault-hide-on-print { display: none !important; }
  body.print-target-universal-letter #universal-a4-sheet,
  body.print-target-universal-letter #universal-a4-sheet * { font-size: 16.5pt !important; color: #000000 !important; }

  body.print-target-album #panel-legacy { display: block !important; }
  body.print-target-album .legacy-hide-on-print { display: none !important; }
  body.print-target-album #legacy-album-printable,
  body.print-target-album #legacy-album-printable * { font-size: 16.5pt !important; color: #000000 !important; }

  body.print-target-acc-letter #panel-accelerators { display: block !important; }
  body.print-target-acc-letter .acc-hide-on-print { display: none !important; }
  body.print-target-acc-letter #acc-a4-letter-sheet,
  body.print-target-acc-letter #acc-a4-letter-sheet * { font-size: 16.5pt !important; color: #000000 !important; }
}