:root {
  --text: #11243d;
  --muted: #63738a;
  --border: #d8e1e9;
  --card: #fff;
  --panel: #f5f8f7;
  --green: #3d8069;
  --green-soft: #eaf4ee;
  --navy: #102a47;
  --navy-deep: #0a1d34;
  --blue: #315675;
  --page-bg: #edf2f5;
  --danger: #a43b3b;
  --shadow: 0 10px 24px rgba(16,42,71,.05);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  min-height: 100vh;
  margin: 0;
  background: radial-gradient(circle at 50% -20%, #fff 0, var(--page-bg) 42rem);
  color: var(--text);
  font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.5;
}
button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: var(--green); }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { color: var(--navy); line-height: 1.08; }
h1, h2 { font-family: "DM Serif Display", Georgia, serif; font-weight: 400; letter-spacing: -.025em; }
h1 { margin-bottom: .55rem; font-size: clamp(2rem, 7vw, 2.65rem); }
h2 { margin-bottom: .55rem; font-size: 1.7rem; }
h3 { margin-bottom: .45rem; font-size: 1.08rem; }

.page-shell { padding: 24px 14px 56px; }
.shell, .messages { max-width: 580px; margin: 0 auto; }
.app-stack { display: grid; gap: 1rem; }
.hidden { display: none !important; }
.mobile-app-bar { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 100; top: .5rem; left: .5rem; transform: translateY(-150%); border-radius: .5rem; background: #fff; color: var(--navy); padding: .6rem .8rem; }
.skip-link:focus { transform: none; }
.messages { padding: 1rem 14px 0; }
.message { margin: 0; border: 1px solid var(--border); border-radius: .75rem; background: #fff; padding: .7rem .8rem; }
.account-footer { max-width: 580px; display: flex; justify-content: center; align-items: center; gap: .45rem; margin: -2.2rem auto 1.6rem; color: var(--muted); font-size: .72rem; }
.account-footer form { margin: 0; }
.account-footer a, .account-footer button { min-height: 40px; display: inline-flex; align-items: center; border: 0; background: none; color: var(--muted); font-weight: 700; text-decoration: none; cursor: pointer; }

.page-banner, .auth-brand {
  overflow: hidden;
  border-radius: 1.35rem;
  background: linear-gradient(135deg,var(--navy-deep),var(--navy));
  color: #fff;
  padding: 1.35rem 1.25rem 1.15rem;
  box-shadow: 0 16px 34px rgba(16,42,71,.15);
}
.page-banner h1, .auth-brand h1 { color: #fff; }
.page-banner > p:last-of-type, .auth-brand > p:last-child { margin-bottom: 0; color: #c8d5e0; font-size: .84rem; }
.banner-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.banner-top > * { margin: 0; }
.banner-top > strong, .banner-date { color: #c8d5e0; font-size: .72rem; font-weight: 800; letter-spacing: .05em; }
.brand-label { margin: 0; color: #fff; font-size: .68rem; font-weight: 800; letter-spacing: .18em; }
.banner-day { margin-bottom: .32rem; color: #93b8a8 !important; font-size: .68rem !important; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.banner-link { min-height: 40px; display: inline-flex; align-items: center; margin-top: .55rem; color: #d7ebe2; font-size: .72rem; font-weight: 800; text-decoration: none; }
.home-banner h1 { margin-top: .75rem; }
.course-meter { margin-top: 1.15rem; }
.meter-label { display: flex; justify-content: space-between; margin-bottom: .35rem; color: #d1dce5; font-size: .65rem; font-weight: 800; letter-spacing: .08em; }
.meter-track { height: 7px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.18); }
.meter-track span { display: block; height: 100%; border-radius: inherit; background: #5a9b81; transition: width .25s ease; }

.card {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 1.2rem;
  background: var(--card);
  padding: 1rem;
  box-shadow: var(--shadow);
}
.section-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.section-title-row > * { min-width: 0; }
.section-kicker { margin: 0 0 .3rem; color: var(--green); font-size: .68rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.support-copy { margin-bottom: .85rem; color: var(--muted); font-size: .82rem; line-height: 1.55; }
.status-chip, .calendar-count {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; min-height: 28px;
  border-radius: 999px; background: #e8eef5; color: var(--muted);
  padding: .28rem .62rem; font-size: .61rem; font-weight: 800; letter-spacing: .08em; white-space: nowrap;
}
.status-chip.active { background: var(--green-soft); color: var(--green); }
.status-chip.closed { background: var(--green); color: #fff; }
.status-chip.locked { background: #e8eef5; color: var(--muted); }
.success-mark { color: var(--green); }

.button {
  min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: .38rem;
  border: 1px solid transparent; border-radius: .8rem; padding: .72rem 1rem;
  font-size: .75rem; font-weight: 800; letter-spacing: .035em; text-align: center; text-decoration: none; cursor: pointer;
  transition: transform .16s ease, background .16s ease, box-shadow .16s ease;
}
.button:hover:not(:disabled) { transform: translateY(-1px); }
.button.primary { border-color: var(--navy); background: var(--navy); color: #fff; box-shadow: 0 8px 16px rgba(16,42,71,.15); }
.button.primary:hover:not(:disabled) { background: var(--navy-deep); }
.button.outline { border-color: var(--border); background: #fff; color: var(--navy); }
.button.text { border-color: transparent; background: transparent; color: var(--green); box-shadow: none; }
.button.small { min-height: 44px; padding: .55rem .75rem; }
.button.wide { width: 100%; }
.button.grow { flex: 1; }
.button:disabled { opacity: .48; cursor: not-allowed; box-shadow: none; }
.button-row, .quick-buttons { display: flex; flex-wrap: wrap; gap: .5rem; }
.button-row.split { margin-top: .9rem; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid rgba(61,128,105,.36); outline-offset: 2px; }

label { color: var(--navy); font-weight: 700; }
input, textarea {
  width: 100%; border: 1px solid var(--border); border-radius: .75rem; background: #fff;
  color: var(--text); padding: .72rem .78rem; font-size: 16px; box-shadow: inset 0 1px 2px rgba(16,42,71,.03);
}
textarea { resize: vertical; }
input:focus, textarea:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(61,128,105,.12); outline: none; }
.field-label { display: block; margin-top: .85rem; }
.field-label strong, .field-label span { display: block; }
.field-label strong { font-size: .72rem; letter-spacing: .1em; }
.field-label span { margin: .18rem 0 .45rem; color: var(--muted); font-size: .75rem; font-weight: 500; }
.form-status { min-height: 1.2rem; margin: .55rem 0 0; color: var(--muted); font-size: .72rem; line-height: 1.4; }
.form-status.error, .form-error, .errorlist { color: var(--danger); }
.errorlist { margin: 0; padding-left: 1.1rem; font-size: .75rem; }

/* Calendar and Home */
.calendar-count { color: var(--green); }
.calendar-grid { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: .42rem; margin-top: .8rem; }
.day-tile {
  min-width: 0; min-height: 58px; display: grid; place-content: center; gap: .04rem;
  border: 1px solid var(--border); border-radius: .68rem; background: #f7f9fa; color: var(--muted);
  padding: .3rem; text-align: center; text-decoration: none;
}
.day-tile small { font-size: .47rem; font-weight: 800; letter-spacing: .08em; }
.day-tile strong { color: inherit; font-size: .88rem; line-height: 1.05; }
.day-tile span { font-size: .48rem; font-weight: 800; letter-spacing: .02em; white-space: nowrap; }
.day-tile.active, .day-tile.building, .day-tile.lesson_complete, .day-tile.reviewing { border-color: var(--navy); background: var(--navy); color: #fff; box-shadow: 0 5px 12px rgba(16,42,71,.15); }
.day-tile.closed { border-color: #9fcbb1; background: var(--green-soft); color: var(--green); }
.day-tile.available { border: 2px solid var(--green); background: #fff; color: var(--green); box-shadow: 0 4px 10px rgba(61,128,105,.1); }
.day-tile.locked { color: #8e9ba9; }
.calendar-legend { display: flex; flex-wrap: wrap; gap: .45rem .8rem; margin-top: .75rem; color: var(--muted); font-size: .6rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.calendar-legend span { display: inline-flex; align-items: center; gap: .28rem; }
.legend-dot { width: .52rem; height: .52rem; border-radius: 999px; background: #d6dee5; }
.legend-dot.active { background: var(--navy); }
.legend-dot.closed { background: var(--green); }
.legend-dot.available { border: 2px solid var(--green); background: #fff; }
.destination-panel { border: 1px solid #9fcbb1; border-radius: 1rem; background: linear-gradient(145deg,#f7fbf8,#edf7f1); padding: .9rem; }
.destination-panel small, .strategy-progress-head small { color: var(--green); font-size: .65rem; font-weight: 800; letter-spacing: .11em; }
.destination-panel p { margin: .4rem 0 0; color: var(--navy); font-family: "DM Serif Display", Georgia, serif; font-size: clamp(1.4rem,6vw,1.9rem); line-height: 1.15; overflow-wrap: anywhere; }
.strategy-progress-head { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: .7rem; margin: 1rem 0 .6rem; }
.strategy-progress-head small, .strategy-progress-head strong { display: block; }
.strategy-progress-head strong { margin-top: .15rem; color: var(--navy); font-size: .66rem; }
.strategy-progress { height: 8px; overflow: hidden; border-radius: 999px; background: #e1e8ed; }
.strategy-progress span { display: block; height: 100%; border-radius: inherit; background: var(--green); transition: width .25s ease; }
.strategy-checklist { display: grid; gap: .55rem; }
.strategy-check { display: grid; grid-template-columns: 23px minmax(0,1fr); gap: .6rem; align-items: start; border: 1px solid #dce8e2; border-radius: .82rem; background: #fff; padding: .7rem; cursor: pointer; }
.strategy-check:first-child { border-color: #9fcbb1; background: #f7fbf8; }
.strategy-check input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.check-ui { width: 21px; height: 21px; display: grid; place-items: center; border: 2px solid #a8b8c3; border-radius: 50%; color: transparent; font-size: .7rem; font-weight: 900; }
.strategy-check input:focus-visible + .check-ui { outline: 3px solid rgba(61,128,105,.3); outline-offset: 2px; }
.strategy-check.done { border-color: #9fcbb1; background: #f4faf6; }
.strategy-check.done .check-ui { border-color: var(--green); background: var(--green); color: #fff; }
.strategy-copy { min-width: 0; }
.strategy-copy small, .strategy-copy strong, .strategy-copy em { display: block; }
.strategy-copy small { color: var(--green); font-size: .61rem; font-weight: 800; letter-spacing: .1em; }
.strategy-copy strong { overflow-wrap: anywhere; color: var(--navy); font-size: .86rem; }
.strategy-copy em { margin-top: .3rem; color: var(--muted); font-size: .73rem; font-style: normal; line-height: 1.4; }
.strategy-copy em b { color: var(--text); font-size: .61rem; letter-spacing: .08em; }
.closed-today .strategy-check { cursor: default; }
.quick-buttons { display: grid; grid-template-columns: 1fr 1fr; }
.quick-form { margin-top: .75rem; border: 1px solid #b9d9c9; border-radius: .82rem; background: #f7fbf8; padding: .75rem; }
.quick-form label { display: block; margin-bottom: .35rem; font-size: .66rem; letter-spacing: .1em; }
.quick-form .button-row { margin-top: .5rem; }
.gate-card { text-align: center; }
.gate-card .section-kicker { margin-bottom: .6rem; }
.gate-card h2 { margin-top: .45rem; font-family: "Manrope", sans-serif; font-size: 1rem; font-weight: 800; letter-spacing: .08em; }
.gate-card.unlocked h2 { text-transform: uppercase; }
.gate-card p:not(.section-kicker) { color: var(--muted); font-size: .82rem; }
.gate-icon, .gate-lock { width: 44px; height: 44px; display: grid; place-items: center; margin: 0 auto; border-radius: 50%; background: var(--green-soft); color: var(--green); font-weight: 900; }
.gate-lock { background: #e8eef5; color: var(--muted); }
.gate-card.unlocked { border-color: #9fcbb1; background: #f7fbf8; }

/* Lesson */
.lesson-progress { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .45rem; padding: .4rem; }
.lesson-step { min-width: 0; display: flex; align-items: center; justify-content: center; gap: .4rem; min-height: 52px; border-radius: .7rem; color: var(--muted); padding: .35rem; }
.lesson-step > span { width: 26px; height: 26px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 50%; background: #fff; color: var(--navy); font-size: .7rem; font-weight: 800; }
.lesson-step small, .lesson-step strong { display: block; }
.lesson-step small { font-size: .5rem; letter-spacing: .1em; }
.lesson-step strong { font-size: .72rem; }
.lesson-step.active { background: var(--navy); color: #fff; }
.lesson-step.active > span { border-color: #fff; background: #fff; }
.lesson-step.complete { color: var(--green); }
.lesson-step.complete > span { border-color: #b9d9c9; background: var(--green-soft); color: var(--green); }
.complete-card { border-color: #b9d9c9; }
.locked-section { opacity: .47; pointer-events: none; }
.video-frame { aspect-ratio: 16/9; overflow: hidden; margin: .8rem 0 .65rem; border-radius: 1rem; background: var(--navy-deep); }
.video-frame iframe { width: 100%; height: 100%; border: 0; }
.video-placeholder { min-height: 220px; display: grid; place-content: center; justify-items: center; gap: .45rem; margin: .8rem 0 .65rem; border: 1px solid var(--border); border-radius: 1rem; background: var(--panel); text-align: center; }
.video-placeholder span { width: 60px; height: 60px; display: grid; place-items: center; border-radius: 50%; background: var(--green); color: #fff; }
.video-placeholder small { color: var(--muted); font-size: .65rem; font-weight: 800; letter-spacing: .12em; }
.read-lesson { max-height: 440px; overflow-y: auto; margin: .8rem 0; border: 1px solid var(--border); border-radius: 1rem; background: #fbfcfc; padding: .9rem; color: #263b51; font-size: .86rem; line-height: 1.7; }
.read-lesson p:last-child { margin-bottom: 0; }
.idea-panel { margin: .7rem 0; border-left: 4px solid var(--green); border-radius: .7rem; background: var(--panel); padding: .75rem .85rem; }
.idea-panel small { color: var(--green); font-size: .64rem; font-weight: 800; letter-spacing: .12em; }
.idea-panel p { margin: .3rem 0 0; font-size: .82rem; font-weight: 700; }
.build-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .4rem; margin: .9rem 0 1rem; border: 1px solid #dce8e2; border-radius: .9rem; background: var(--panel); padding: .35rem; }
.build-step { min-width: 0; display: flex; align-items: center; justify-content: center; gap: .35rem; min-height: 48px; border-radius: .65rem; color: var(--muted); }
.build-step > span { width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 50%; background: #fff; color: var(--navy); font-size: .65rem; font-weight: 800; }
.build-step small, .build-step strong { display: block; }
.build-step small { font-size: .46rem; letter-spacing: .08em; }
.build-step strong { font-size: .7rem; }
.build-step.active { background: #fff; color: var(--navy); box-shadow: 0 2px 8px rgba(16,42,71,.06); }
.build-step.active > span { border-color: var(--navy); background: var(--navy); color: #fff; }
.build-step.complete { color: var(--green); }
.build-step.complete > span { border-color: #b9d9c9; background: var(--green-soft); color: var(--green); }
.build-stage { animation: section-reveal .24s ease both; }
.stage-heading { display: flex; align-items: flex-start; gap: .55rem; margin-bottom: .35rem; }
.stage-heading > span { width: 28px; height: 28px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: var(--navy); color: #fff; font-size: .72rem; font-weight: 800; }
.stage-heading .section-kicker, .stage-heading h3 { margin-bottom: 0; }
.dashboard-group { border: 1px solid var(--border); border-radius: 1rem; background: #fff; padding: .85rem; }
.dashboard-group + .dashboard-group { margin-top: .8rem; }
.group-heading, .selected-heading, .available-heading, .first-step-heading { display: flex; align-items: center; justify-content: space-between; gap: .7rem; }
.group-heading strong, .selected-heading strong, .available-heading strong, .first-step-heading strong { color: var(--navy); font-size: .68rem; letter-spacing: .12em; }
.group-heading strong::before { content: ""; width: .48rem; height: .48rem; display: inline-block; margin-right: .38rem; border-radius: 50%; background: var(--green); }
.group-heading span, .selected-heading span, .first-step-heading span, .available-heading small { color: var(--muted); font-size: .64rem; font-weight: 800; }
.dashboard-list { display: grid; gap: .48rem; margin-top: .65rem; }
.item-card { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: .48rem; min-height: 52px; border: 1px solid #dce8e2; border-radius: .72rem; background: var(--panel); padding: .45rem .5rem; }
.item-source { min-width: 2.35rem; display: inline-flex; justify-content: center; border-radius: 999px; background: var(--green-soft); color: var(--green); padding: .22rem .35rem; font-size: .58rem; font-weight: 800; text-transform: uppercase; }
.item-source.work { background: #e8eef5; color: var(--blue); }
.item-text { min-width: 0; overflow-wrap: anywhere; font-size: .82rem; font-weight: 700; }
.item-text small { display: block; color: var(--green); font-size: .58rem; text-transform: uppercase; }
.item-actions { display: flex; }
.item-action { min-height: 44px; border: 0; border-radius: .55rem; background: transparent; color: var(--navy); padding: .4rem; font-size: .67rem; font-weight: 800; cursor: pointer; }
.item-action:hover { background: #e8eef5; }
.item-action.remove { color: var(--muted); }
.item-edit-form { grid-column: 1/-1; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: .4rem; width: 100%; }
.add-item-button { width: 100%; min-height: 44px; margin-top: .62rem; border: 1px dashed #b9d9c9; border-radius: .72rem; background: #f7fbf8; color: var(--green); font-size: .75rem; font-weight: 800; cursor: pointer; }
.inline-capture { margin-top: .6rem; }
.inline-capture .button-row { margin-top: .4rem; }
.assist-note { display: flex; gap: .6rem; margin-bottom: .8rem; border-left: 3px solid var(--green); border-radius: .55rem; background: #f4faf6; padding: .65rem .75rem; }
.assist-note > span { color: var(--green); }
.assist-note p { margin: 0; }
.assist-note strong, .assist-note small { display: block; }
.assist-note strong { color: var(--green); font-size: .66rem; letter-spacing: .08em; }
.assist-note small { margin-top: .2rem; color: var(--muted); font-size: .73rem; }
.strategy-slots { display: grid; gap: .5rem; margin-top: .55rem; }
.strategy-slot { min-height: 54px; display: grid; grid-template-columns: 25px minmax(0,1fr); align-items: center; gap: .5rem; border: 1px dashed #c5d5de; border-radius: .75rem; background: #fbfcfc; padding: .38rem .45rem; }
.strategy-slot.is-over { border-color: var(--green); background: #f2f9f5; }
.strategy-position { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: #e8eef5; color: var(--blue); font-size: .65rem; font-weight: 800; }
.strategy-empty { color: #8a99aa; font-size: .73rem; }
.strategy-card { min-width: 0; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: .4rem; border-radius: .55rem; padding: .35rem .4rem; background: #fff; cursor: grab; }
.strategy-card strong { min-width: 0; overflow-wrap: anywhere; font-size: .78rem; }
.strategy-card .slot-actions { display: flex; }
.strategy-card button { min-width: 38px; min-height: 40px; border: 0; background: transparent; color: var(--green); font-weight: 800; cursor: pointer; }
.available-heading { margin: .9rem 0 .45rem; }
.available-items { display: grid; gap: .45rem; }
.available-card { width: 100%; min-height: 50px; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: .5rem; border: 1px solid #dce8e2; border-radius: .72rem; background: var(--panel); color: var(--text); padding: .45rem .55rem; text-align: left; cursor: pointer; }
.available-card span:nth-child(2) { overflow-wrap: anywhere; font-size: .78rem; font-weight: 700; }
.available-add { color: var(--green); font-size: .72rem; font-weight: 800; }
.strategy-preview { display: grid; gap: .45rem; margin-bottom: .75rem; }
.preview-item { border: 1px solid var(--border); border-radius: .75rem; background: var(--panel); padding: .65rem .7rem; }
.preview-item.main { border-color: #9fcbb1; background: #f4faf6; }
.preview-item small, .preview-item strong { display: block; }
.preview-item small { color: var(--green); font-size: .6rem; font-weight: 800; letter-spacing: .08em; }
.preview-item strong { margin-top: .12rem; overflow-wrap: anywhere; font-size: .82rem; }
.assist-link { min-height: 44px; display: inline-flex; align-items: center; gap: .35rem; border: 0; background: transparent; color: var(--green); padding: .35rem 0; font-size: .71rem; font-weight: 800; cursor: pointer; }
.suggestion-panel { border: 1px solid #b9d9c9; border-radius: .8rem; background: #f4faf6; padding: .75rem; }
.suggestion-panel small { color: var(--green); font-size: .62rem; font-weight: 800; letter-spacing: .1em; }
.suggestion-panel p { margin: .3rem 0 .55rem; font-size: .82rem; font-weight: 700; }
.first-step-heading { margin: .8rem 0 .5rem; }
.first-step-list { display: grid; gap: .6rem; }
.first-step-card { border: 1px solid var(--border); border-radius: .85rem; background: #fff; padding: .72rem; }
.first-step-card.main { border-color: #9fcbb1; background: #f7fbf8; }
.first-step-title { display: flex; align-items: flex-start; gap: .5rem; color: var(--navy); font-size: .8rem; font-weight: 800; }
.first-step-number { width: 22px; height: 22px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: #e8eef5; color: var(--blue); font-size: .65rem; }
.first-step-card.main .first-step-number { background: var(--green); color: #fff; }
.first-step-card textarea { min-height: 70px; margin-top: .5rem; }
.completed-summary { display: flex; gap: .65rem; border-left: 3px solid var(--green); border-radius: .65rem; background: #f4faf6; padding: .75rem .8rem; }
.completed-summary > span { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; background: var(--green); color: #fff; }
.completed-summary p { margin: .12rem 0 0; color: var(--muted); font-size: .75rem; }
.vision-meter { display: grid; grid-template-columns: 1fr auto; gap: .35rem; margin: .8rem 0; color: var(--muted); font-size: .63rem; font-weight: 800; letter-spacing: .08em; }
.vision-meter div { grid-column: 1/-1; height: 7px; overflow: hidden; border-radius: 999px; background: #e1e8ed; }
.vision-meter i { display: block; height: 100%; border-radius: inherit; background: var(--green); }
.vision-question { position: relative; margin-top: .75rem; border: 1px solid var(--border); border-radius: 1rem; padding: .85rem; }
.question-number { width: 27px; height: 27px; display: grid; place-items: center; margin-bottom: .5rem; border-radius: 50%; background: var(--navy); color: #fff; font-size: .7rem; font-weight: 800; }
.vision-question label small, .vision-question label strong { display: block; }
.vision-question label small { color: var(--green); font-size: .61rem; letter-spacing: .1em; }
.vision-question label strong { margin: .2rem 0 .55rem; font-size: .84rem; line-height: 1.4; }
.talk-toggle { width: 100%; min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: .6rem; border: 1px solid #b9d9c9; border-radius: .78rem; background: #f4faf6; color: var(--green); padding: .62rem .72rem; text-align: left; cursor: pointer; }
.talk-toggle strong, .talk-toggle small { display: block; }
.talk-toggle strong { font-size: .74rem; letter-spacing: .04em; }
.talk-toggle small { margin-top: .1rem; color: var(--muted); font-size: .64rem; font-weight: 700; }
.coach-panel { margin-top: .55rem; border: 1px solid #b9d9c9; border-radius: .9rem; background: #f7fbf8; padding: .75rem; }
.coach-head { display: flex; justify-content: space-between; gap: .7rem; color: var(--navy); font-size: .62rem; font-weight: 800; letter-spacing: .1em; }
.coach-head span { color: var(--muted); white-space: nowrap; }
.coach-log { display: grid; gap: .5rem; max-height: 280px; overflow-y: auto; margin-top: .6rem; }
.coach-message { max-width: 92%; border: 1px solid #dce8e2; border-radius: .78rem; border-bottom-left-radius: .25rem; background: #fff; padding: .58rem .68rem; font-size: .76rem; line-height: 1.45; }
.coach-message.user { margin-left: auto; border: 0; border-bottom-right-radius: .25rem; background: var(--navy); color: #fff; }
.coach-form { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: .45rem; align-items: end; margin-top: .6rem; }
.coach-form textarea { min-height: 72px; }

/* Review */
.review-destination > h2 { font-size: clamp(1.45rem,6vw,2rem); }
.result-options { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; margin: .9rem 0 0; padding: 0; border: 0; }
.result-options legend { grid-column: 1/-1; margin-bottom: .25rem; color: var(--navy); font-size: .7rem; font-weight: 800; letter-spacing: .08em; }
.result-options legend span { color: var(--green); font-size: .58rem; }
.result-options label { position: relative; min-height: 92px; display: block; border: 1px solid var(--border); border-radius: .82rem; background: #fff; padding: .72rem; cursor: pointer; }
.result-options label:has(input:checked) { border-color: var(--green); background: #f4faf6; box-shadow: 0 0 0 2px rgba(61,128,105,.1); }
.result-options input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.result-options strong, .result-options small { display: block; }
.result-options strong { color: var(--navy); font-size: .78rem; }
.result-options small { margin-top: .25rem; color: var(--muted); font-size: .72rem; font-weight: 500; line-height: 1.4; }
.summary-count { color: var(--muted); font-size: .66rem; }
.result-list, .decision-list { display: grid; gap: .4rem; }
.result-row { display: grid; grid-template-columns: 22px minmax(0,1fr); gap: .5rem; align-items: start; border-bottom: 1px solid #e4eaee; padding: .55rem 0; }
.result-row:last-child { border-bottom: 0; }
.result-row > span { color: var(--green); font-weight: 900; text-align: center; }
.result-row strong, .result-row small { display: block; }
.result-row strong { overflow-wrap: anywhere; font-size: .82rem; }
.result-row small { margin-top: .18rem; color: var(--muted); font-size: .66rem; }
.positive-prompt { display: flex; gap: .45rem; border-left: 3px solid var(--green); border-radius: .55rem; background: #f4faf6; color: var(--muted); padding: .65rem .72rem; font-size: .75rem; }
.positive-prompt span { color: var(--green); }
.decision-card { min-width: 0; border: 1px solid var(--border); border-radius: .82rem; padding: .72rem; }
.decision-card legend { max-width: 100%; padding: 0 .25rem; color: var(--text); font-size: .82rem; font-weight: 800; overflow-wrap: anywhere; }
.decision-options { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .35rem; margin-top: .55rem; }
.decision-options label { position: relative; min-height: 58px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: .62rem; background: #fff; padding: .4rem; text-align: center; cursor: pointer; }
.decision-options label:has(input:checked) { border-color: var(--green); background: #f4faf6; color: var(--green); }
.decision-options input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.decision-options strong, .decision-options small { display: block; }
.decision-options strong { font-size: .6rem; line-height: 1.25; }
.decision-options small { margin-top: .12rem; color: var(--muted); font-size: .54rem; font-weight: 500; }
.close-card { border-color: #9fcbb1; }

/* Authentication and state pages */
.auth-wrap, .state-wrap { display: grid; gap: 1rem; }
.login-auth-wrap { position: relative; }
.auth-brand { min-height: 205px; display: flex; flex-direction: column; justify-content: flex-end; }
.auth-brand-logo { width: 64px; height: 64px; margin-bottom: .72rem; object-fit: contain; }
.auth-brand h1 { max-width: 420px; margin-top: .8rem; }
.auth-card h2, .state-card h2 { font-size: 1.7rem; }
.stack-form { display: grid; gap: .45rem; margin-top: 1rem; }
.stack-form label { margin-top: .25rem; font-size: .67rem; letter-spacing: .09em; }
.support-link { min-height: 44px; display: inline-flex; align-items: center; margin-top: .55rem; font-size: .75rem; font-weight: 800; }
.auth-note, .field-help { color: var(--muted); font-size: .7rem; }
.field-help ul { margin: .2rem 0 .5rem; padding-left: 1.15rem; }
.auth-success { width: 44px; height: 44px; display: grid; place-items: center; margin-bottom: .7rem; border-radius: 50%; background: var(--green-soft); color: var(--green); font-size: 1.15rem; font-weight: 900; }
.state-card { text-align: center; }
.state-icon { width: 48px; height: 48px; display: grid; place-items: center; margin: 0 auto .7rem; border-radius: 50%; background: var(--green-soft); color: var(--green); font-size: .72rem; font-weight: 900; }

/* App install */
.install-app-control {
  position: absolute; z-index: 2; top: .82rem; right: .82rem;
  min-height: 44px; display: inline-flex; align-items: center; gap: .38rem;
  border: 1px solid rgba(255,255,255,.24); border-radius: .72rem;
  background: rgba(255,255,255,.1); color: #fff; padding: .35rem .58rem .35rem .4rem;
  font-size: .62rem; font-weight: 800; letter-spacing: .08em; cursor: pointer;
  box-shadow: 0 6px 16px rgba(0,0,0,.12); backdrop-filter: blur(8px);
  transition: background .16s ease, transform .16s ease;
}
.install-app-control:hover { background: rgba(255,255,255,.18); transform: translateY(-1px); }
.install-app-control__icon { position: relative; width: 30px; height: 30px; flex: 0 0 auto; }
.install-app-control__icon img { width: 30px; height: 30px; display: block; object-fit: contain; }
.install-app-control__icon b {
  position: absolute; right: -2px; bottom: -2px; width: 14px; height: 14px;
  display: grid; place-items: center; border: 2px solid var(--navy); border-radius: 50%;
  background: var(--green); color: #fff; font-size: .65rem; line-height: 1;
}
.install-app-control[data-install-ready="true"] { border-color: #abd5bf; background: rgba(61,128,105,.55); }
.install-app-dialog {
  width: min(calc(100% - 28px), 480px); max-height: min(680px, calc(100dvh - 28px));
  border: 1px solid var(--border); border-radius: 1.2rem; background: #fff; color: var(--text);
  padding: 1rem; box-shadow: 0 24px 70px rgba(10,29,52,.3);
}
.install-app-dialog::backdrop { background: rgba(10,29,52,.64); backdrop-filter: blur(2px); }
.install-app-dialog__head { display: grid; grid-template-columns: 48px minmax(0,1fr) 44px; align-items: start; gap: .7rem; }
.install-app-dialog__head img { width: 48px; height: 48px; object-fit: contain; }
.install-app-dialog__head h2 { margin: .08rem 0 .8rem; font-size: 1.35rem; }
.install-app-dialog__head .section-kicker { margin-bottom: .15rem; }
.install-dialog-close {
  width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: .65rem;
  background: var(--panel); color: var(--navy); font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.install-steps { display: grid; gap: .55rem; margin: .75rem 0 1rem; padding-left: 1.4rem; }
.install-steps li { padding-left: .18rem; color: var(--text); font-size: .82rem; font-weight: 650; }

@media (display-mode: standalone) {
  .install-app-control { display: none; }
}

/* Profile */
.profile-email { margin: -.15rem 0 .65rem; color: var(--muted); font-size: .82rem; overflow-wrap: anywhere; }
.profile-badges { display: flex; flex-wrap: wrap; gap: .4rem; }
.profile-badges span { display: inline-flex; align-items: center; min-height: 27px; border-radius: 999px; background: var(--green-soft); color: var(--green); padding: .25rem .55rem; font-size: .58rem; font-weight: 800; letter-spacing: .06em; }
.profile-stats { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; margin-top: .75rem; }
.profile-stats > div { border: 1px solid #dce8e2; border-radius: .75rem; background: var(--panel); padding: .7rem; }
.profile-stats strong, .profile-stats span { display: block; }
.profile-stats strong { color: var(--navy); font-family: "DM Serif Display", Georgia, serif; font-size: 1.55rem; font-weight: 400; }
.profile-stats span { margin-top: .1rem; color: var(--muted); font-size: .57rem; font-weight: 800; letter-spacing: .07em; }
.profile-privacy { margin: .75rem 0 0; border-left: 3px solid var(--green); border-radius: .5rem; background: #f4faf6; color: var(--muted); padding: .62rem .7rem; font-size: .7rem; }

@keyframes section-reveal { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 760px) {
  .mobile-app-bar {
    position: sticky; z-index: 60; top: 0; display: block;
    padding-top: env(safe-area-inset-top); background: rgba(10,29,52,.97);
    box-shadow: 0 5px 18px rgba(10,29,52,.18); backdrop-filter: blur(12px);
  }
  .mobile-app-bar__inner {
    max-width: 580px; min-height: 56px; display: flex; align-items: center; gap: .6rem;
    margin: 0 auto; padding: 6px 10px;
  }
  .mobile-menu-toggle {
    width: 44px; height: 44px; flex: 0 0 auto; display: grid; place-items: center;
    border: 1px solid rgba(255,255,255,.14); border-radius: 50%; background: rgba(255,255,255,.08);
    padding: 0; cursor: pointer; transition: background .16s ease, transform .16s ease;
  }
  .mobile-menu-toggle:hover, .mobile-app-bar.menu-open .mobile-menu-toggle { background: rgba(255,255,255,.16); }
  .mobile-app-bar.menu-open .mobile-menu-toggle { transform: rotate(8deg); }
  .mobile-menu-toggle img { width: 42px; height: 42px; display: block; object-fit: contain; }
  .mobile-app-bar__brand { overflow: hidden; color: #fff; font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-app-menu {
    position: absolute; z-index: 2; top: 100%; left: max(10px, env(safe-area-inset-left)); right: max(10px, env(safe-area-inset-right));
    max-width: 560px; max-height: 0; display: grid; gap: .35rem; overflow: hidden;
    margin: 0 auto; border: 0 solid rgba(255,255,255,.12); border-radius: 0 0 1rem 1rem;
    background: var(--navy-deep); padding: 0 .5rem; opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateY(-7px); box-shadow: 0 14px 24px rgba(10,29,52,.22);
    transition: max-height .2s ease, opacity .16s ease, transform .16s ease, visibility .16s ease, padding .2s ease, border-width .2s ease;
  }
  .mobile-app-menu.is-open {
    max-height: min(180px, calc(100dvh - 64px)); overflow-y: auto; border-width: 1px;
    padding: .5rem; opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
  }
  .mobile-app-menu a, .mobile-app-menu button {
    width: 100%; min-height: 44px; display: flex; align-items: center; border: 0; border-radius: .65rem;
    background: transparent; color: #fff; padding: .62rem .7rem; font-size: .76rem; font-weight: 800;
    letter-spacing: .05em; text-align: left; text-decoration: none; cursor: pointer;
  }
  .mobile-app-menu a:hover, .mobile-app-menu button:hover { background: rgba(255,255,255,.1); }
  .mobile-app-menu form { margin: 0; }
}

@media (max-width: 480px) {
  .page-shell { padding: 10px 10px 52px; }
  .page-banner { padding: 1.15rem 1rem 1rem; }
  .card { padding: .85rem; }
  .calendar-grid { grid-template-columns: repeat(5,minmax(0,1fr)); gap: .34rem; }
  .day-tile { min-height: 54px; }
  .calendar-legend { gap: .4rem .6rem; }
  .strategy-progress-head { grid-template-columns: 1fr; align-items: start; }
  .lesson-step { flex-direction: column; gap: .15rem; text-align: center; }
  .lesson-step small { display: none; }
  .result-options, .decision-options { grid-template-columns: 1fr; }
  .result-options label { min-height: 76px; }
  .decision-options label { justify-content: flex-start; min-height: 50px; padding: .5rem .6rem; text-align: left; }
  .decision-options small { font-size: .58rem; }
  .coach-form { grid-template-columns: 1fr; }
  .coach-form .button { width: 100%; }
  .auth-brand { min-height: 230px; padding-top: 4.7rem; }
  .install-app-control { top: .62rem; right: .62rem; }
  .install-app-dialog { width: calc(100% - 18px); max-height: calc(100dvh - 18px); border-radius: 1rem; padding: .85rem; }
  .install-app-dialog__head { grid-template-columns: 42px minmax(0,1fr) 44px; gap: .55rem; }
  .install-app-dialog__head img { width: 42px; height: 42px; }
  .install-app-dialog__head h2 { font-size: 1.2rem; }
}

@media (max-width: 360px) {
  body { font-size: 14px; }
  .brand-label { letter-spacing: .12em; }
  .quick-buttons { grid-template-columns: 1fr; }
  .button-row.split { display: grid; grid-template-columns: 1fr; }
  .button-row.split .button { width: 100%; }
  .item-card { grid-template-columns: auto minmax(0,1fr); }
  .item-actions { grid-column: 2; justify-content: flex-end; }
}

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