:root {
  --ink: #1f1b2e;
  --ink-2: #3f3858;
  --muted: #6f675f;
  --paper: #f6efe3;
  --paper-2: #fff8eb;
  --card: rgba(255, 250, 239, .94);
  --line: rgba(62, 45, 32, .16);
  --purple: #5845d9;
  --purple-2: #8d78ff;
  --cyan: #2aaec0;
  --amber: #d98b45;
  --green: #3e966e;
  --rose: #c94f67;
  --navy: #17172f;
  --navy-2: #262150;
  --shadow: 0 24px 64px rgba(64, 42, 22, .13);
  --radius-xl: 34px;
  --radius: 22px;
  --radius-sm: 14px;
  --focus: 0 0 0 3px rgba(88,69,217,.24), 0 0 0 1px var(--purple);
}
* { box-sizing: border-box; }
html, body { overflow-x: hidden; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: Avenir, "Avenir Next", Nunito, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 14% 12%, rgba(255, 206, 132, .33), transparent 19rem),
    radial-gradient(circle at 82% 10%, rgba(93, 75, 245, .14), transparent 22rem),
    radial-gradient(circle at 74% 88%, rgba(42, 174, 192, .13), transparent 26rem),
    linear-gradient(135deg, #f8efe1 0%, #f6efe7 48%, #eef5f3 100%);
}
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .28; background-image: radial-gradient(rgba(31,27,46,.16) .55px, transparent .6px); background-size: 18px 18px; mask-image: linear-gradient(110deg, rgba(0,0,0,.9), transparent 72%); z-index: -1; }
button, input, select, textarea { font: inherit; }
button, .button { min-height: 44px; border: 0; border-radius: 16px; padding: .78rem 1.05rem; cursor: pointer; font-weight: 760; letter-spacing: -.015em; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
button:hover { transform: translateY(-1px); }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, .chip:focus-visible, .nav-item:focus-visible { outline: none; box-shadow: var(--focus); }
.primary { color: #fff8eb; background: linear-gradient(135deg, #4f3ed0, #6b58ee 55%, #9078ff); box-shadow: 0 14px 30px rgba(88,69,217,.22); }
.secondary { color: var(--purple); background: rgba(91,75,245,.1); border: 1px solid rgba(91,75,245,.18); }
.ghost { color: var(--ink-2); background: rgba(255,255,255,.66); border: 1px solid var(--line); }
.danger { color: #8f1730; background: rgba(222,92,116,.11); border: 1px solid rgba(222,92,116,.25); }
.app-shell { display: grid; grid-template-columns: 292px minmax(0,1fr); min-height: 100vh; }
.sidebar { position: sticky; top: 0; align-self: start; height: 100vh; padding: 1.2rem; background: linear-gradient(180deg, var(--navy), var(--navy-2)); color: #f7f4ee; border-right: 1px solid rgba(255,255,255,.08); overflow: auto; }
.brand { display: flex; align-items: center; gap: .8rem; margin-bottom: 1rem; }
.mark { width: 44px; height: 44px; border-radius: 15px; background: conic-gradient(from 135deg, var(--purple), var(--cyan), var(--amber), var(--purple)); box-shadow: 0 0 32px rgba(91,75,245,.5); position: relative; }
.mark::after { content:""; position:absolute; inset: 7px; border-radius: 10px; background: rgba(17,20,40,.74); }
.brand h1 { margin: 0; font-size: 1.04rem; line-height: 1.05; letter-spacing: -.02em; }
.brand span { display:block; margin-top:.18rem; color: rgba(247,244,238,.64); font-size: .76rem; font-weight: 600; }
.save-status { margin: .8rem 0; padding: .7rem .8rem; border-radius: 16px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.1); color: rgba(247,244,238,.86); font-size: .78rem; }
.nav-list, #drawer-nav { display: grid; gap: .44rem; margin-top: 1rem; }
.nav-section { color: rgba(247,244,238,.42); font-size: .7rem; text-transform: uppercase; letter-spacing: .14em; margin: 1.2rem .82rem .3rem; font-weight: 800; }
.nav-item, #drawer-nav button { width: 100%; text-align: left; border-radius: 14px; padding: .78rem .82rem; color: rgba(247,244,238,.78); background: transparent; border: 1px solid transparent; min-height: 44px; font-size: .9rem; font-weight: 700; }
.nav-item.active, .nav-item[aria-current="page"] { color: #fff; background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.14); }
.side-note { display: grid; gap: .7rem; margin-top: 1.4rem; padding: 1rem; border-radius: 18px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.1); color: rgba(247,244,238,.78); font-size: .84rem; line-height: 1.45; }
.feedback-button { width: 100%; justify-content: center; color: #fff8eb; background: linear-gradient(135deg, #4f3ed0, #6b58ee 55%, #9078ff); border: 1px solid rgba(88,69,217,.2); }
main { padding: clamp(1rem, 3vw, 3rem); }
.screen { display: none; max-width: 1180px; margin: 0 auto; animation: reveal .22s ease both; }
.screen.active { display: block; }
@keyframes reveal { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } }
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 1.4rem; align-items: stretch; min-height: calc(100vh - 6rem); }
.panel { background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); border-radius: var(--radius-xl); padding: clamp(1.1rem, 3vw, 2rem); backdrop-filter: blur(16px); }
.panel.dark { background: linear-gradient(140deg, #151834, #22234a); color: #fff; border-color: rgba(255,255,255,.1); }
.eyebrow { color: var(--purple); font-weight: 850; text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; margin: 0 0 .65rem; }
h2 { margin: 0 0 .8rem; font-size: clamp(2.4rem, 7vw, 5.8rem); line-height: .9; letter-spacing: -.075em; max-width: 10ch; }
h3 { margin: 0 0 .65rem; font-size: clamp(1.35rem, 2.6vw, 2.2rem); line-height: 1.05; letter-spacing: -.04em; }
h4 { margin: 0 0 .45rem; font-size: 1rem; letter-spacing: -.02em; }
p { color: var(--muted); line-height: 1.62; margin: 0 0 1rem; }
.dark p, .dark .muted { color: rgba(255,255,255,.72); }
.actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.1rem; }
.grid { display: grid; gap: 1rem; }
.grid.two { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid.three { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid.four { grid-template-columns: repeat(4, minmax(0,1fr)); }
.card { border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; background: rgba(255,255,255,.72); }
.card.selected { border-color: rgba(91,75,245,.55); box-shadow: 0 0 0 4px rgba(91,75,245,.09); background: rgba(255,255,255,.94); }
.card.soft { background: rgba(247,244,238,.74); }
.small { font-size:.86rem; color: var(--muted); line-height: 1.45; }
.label { display:block; margin-bottom:.4rem; color: var(--ink-2); font-size:.82rem; font-weight: 850; }
input, textarea, select { width: 100%; min-height: 44px; border-radius: 14px; border:1px solid var(--line); background: rgba(255,255,255,.82); color: var(--ink); padding:.75rem .85rem; }
textarea { min-height: 96px; resize: vertical; }
.chip, .answer { border: 1px solid var(--line); background: rgba(255,255,255,.72); color: var(--ink-2); padding:.55rem .75rem; border-radius:999px; min-height: 44px; font-weight: 760; }
.chip.active, .answer.active { color: #fff; background: var(--purple); border-color: var(--purple); }
.pill-row, .answers, .badge-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.pill, .badge { display:inline-flex; align-items:center; gap:.4rem; padding:.42rem .65rem; border-radius: 999px; border: 1px solid rgba(91,75,245,.26); background: rgba(91,75,245,.08); color: #3b327f; font-size:.8rem; font-weight:800; }
.badge.calm { background: rgba(56,198,217,.12); color:#126b78; }
.badge.warn { background: rgba(222,92,116,.12); color:#9a2440; }
.badge.reg { background: rgba(70,183,131,.14); color:#246b4f; }
.badge.prep { background: rgba(91,75,245,.12); color:var(--purple); }
.notice { border-left: 4px solid var(--purple); padding: .9rem 1rem; background: rgba(91,75,245,.08); border-radius: 16px; color: var(--ink-2); }
.warning { border-left-color: var(--rose); background: rgba(222,92,116,.1); }
.success { border-left-color: var(--green); background: rgba(70,183,131,.1); }
.question { display:grid; gap:.65rem; padding:1rem; border-radius:18px; background: rgba(255,255,255,.68); border:1px solid var(--line); }
.note-fields { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:.75rem; }
.section-header { display: none; align-items: center; justify-content: space-between; gap: .8rem; position: sticky; top: 0; z-index: 50; margin: -1rem -1rem 1rem; padding: .8rem 1rem; background: rgba(246,239,227,.94); border-bottom: 1px solid var(--line); backdrop-filter: blur(16px); }
.progress-strip { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1rem 0; }
.progress-strip button { min-height: 38px; padding: .45rem .6rem; font-size: .78rem; }
.a4 { width: min(100%, 760px); margin: 0 auto; background: #fff; color: var(--ink); border-radius: 14px; box-shadow: 0 18px 70px rgba(0,0,0,.18); padding: 1.1rem; min-height: 860px; display:grid; grid-template-rows:auto 1fr auto; }
.a4 header { border-radius: 14px; padding: 1rem; background: linear-gradient(135deg, var(--navy), #28265b); color:#fff; }
.a4 h3 { color:#fff; margin:0; }
.passport-grid { display:grid; grid-template-columns:1fr 1fr; gap:.6rem; margin-top:.8rem; align-content: start; }
.passport-box { border:1px solid rgba(23,23,47,.16); border-radius:12px; padding:.65rem; font-size:.86rem; line-height:1.35; }
.passport-box strong { display:block; margin-bottom:.3rem; }
.footer-note { border-top:1px solid var(--line); padding-top:.7rem; font-size:.75rem; color: var(--muted); display:flex; justify-content:space-between; gap:1rem; }
.toast { position: fixed; right: 1rem; bottom: 1rem; background: var(--navy); color:#fff; padding:.85rem 1rem; border-radius:999px; box-shadow: var(--shadow); transform: translateY(130%); opacity:0; transition:.2s ease; z-index: 500; max-width: min(92vw, 520px); }
.toast.show { transform:none; opacity:1; }
.bottom-nav { display: none; }
.drawer-backdrop { position: fixed; inset: 0; background: rgba(17,20,40,.42); z-index: 180; }
.section-drawer { position: fixed; inset: 0 auto 0 0; width: min(88vw, 360px); background: var(--paper-2); color: var(--ink); padding: 1rem; z-index: 220; box-shadow: 24px 0 70px rgba(17,20,40,.28); overflow: auto; }
.drawer-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
#drawer-nav button { color: var(--ink-2); border-color: var(--line); background: rgba(255,255,255,.62); }
#drawer-nav button.active { color: var(--purple); border-color: rgba(91,75,245,.35); background: rgba(91,75,245,.09); }
@media (max-width: 1023px) and (min-width: 641px) {
  .app-shell { display: block; }
  .sidebar { position: sticky; top: 0; z-index: 80; height: auto; max-height: 34vh; padding: .85rem; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.08); }
  .brand { margin-bottom: .6rem; }
  .side-note { display: none; }
  .save-status { display: inline-block; margin: 0 0 .55rem; }
  .nav-section { display: none; }
  .nav-list { display: flex; flex-wrap: wrap; gap: .42rem; margin-top: .2rem; }
  .nav-item { width: auto; text-align: center; font-size: .82rem; padding: .62rem .72rem; white-space: nowrap; }
}
@media (max-width: 920px) {
  .hero, .grid.two, .grid.three, .grid.four, .note-fields { grid-template-columns: 1fr; }
  .a4 { min-height: auto; }
}
@media (max-width: 640px) {
  body { overscroll-behavior-y: contain; }
  .app-shell { display: block; }
  .sidebar { display: none; }
  main { padding: .85rem .85rem calc(78px + max(0.75rem, env(safe-area-inset-bottom))); }
  .screen { max-width: 100%; }
  .panel { border-radius: 24px; padding: 1rem; }
  .hero { min-height: auto; }
  .bottom-nav { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: .25rem; position: fixed; left: 0; right: 0; bottom: 0; z-index: 150; padding: .45rem .45rem; padding-bottom: max(0.75rem, env(safe-area-inset-bottom)); background: rgba(255,250,239,.96); border-top: 1px solid var(--line); box-shadow: 0 -16px 44px rgba(64,42,22,.13); backdrop-filter: blur(16px); }
  .bottom-nav button { min-height: 56px; min-width: 44px; padding: .45rem .3rem; border-radius: 16px; background: transparent; color: var(--ink-2); font-size: .76rem; }
  .bottom-nav button.active { color: #fff; background: var(--purple); }
  .section-header { display:flex; }
  .progress-strip { display:none; }
  .passport-grid { grid-template-columns: 1fr; }
  .footer-note { flex-direction: column; }
  .toast { right: .75rem; left: .75rem; bottom: calc(82px + max(0.75rem, env(safe-area-inset-bottom))); border-radius: 18px; }
}