:root {
  color-scheme: light;
  --navy: #162742;
  --navy-2: #263d61;
  --ink: #26344c;
  --muted: #7d8ba0;
  --muted-2: #a6b1c0;
  --line: #e6ebf1;
  --canvas: #f5f7fb;
  --surface: #fff;
  --coral: #ec765c;
  --coral-dark: #d95a46;
  --gold: #f4c967;
  --gold-dark: #ba861f;
  --teal: #4bb49e;
  --purple: #8175d9;
  --blue: #6992df;
  --shadow: 0 14px 38px rgba(30, 53, 87, .07);
  --radius: 18px;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--canvas); }
body { margin: 0; color: var(--ink); background: var(--canvas); font-size: 14px; line-height: 1.5; }
body.modal-open { overflow: hidden; }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid rgba(105, 146, 223, .3); outline-offset: 2px; }
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3, h4 { color: var(--navy); }
h1 { font-size: 22px; letter-spacing: -.04em; }
h2 { font-size: clamp(27px, 3vw, 39px); line-height: 1.08; letter-spacing: -.06em; }
h3 { font-size: 16px; letter-spacing: -.025em; }

.app-shell { display: flex; min-height: 100vh; }
.sidebar { width: 238px; flex: 0 0 238px; display: flex; flex-direction: column; padding: 27px 17px 20px; color: #fff; background: var(--navy); }
.brand-lockup { display: flex; align-items: center; gap: 10px; padding: 0 10px 28px; }
.brand-mark { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; color: var(--navy); background: var(--gold); font-size: 18px; font-weight: 900; box-shadow: 0 6px 14px rgba(0, 0, 0, .18); }
.brand-name { color: #fff; font-size: 16px; font-weight: 900; letter-spacing: .18em; }
.brand-tagline { margin-top: 3px; color: #aab9ce; font-size: 10px; letter-spacing: .06em; }
.nav-list { display: grid; gap: 5px; }
.nav-item { display: flex; align-items: center; gap: 11px; width: 100%; padding: 12px 13px; border: 0; border-radius: 11px; color: #aebbd0; background: transparent; text-align: left; font-size: 12px; transition: background .2s, color .2s; }
.nav-item:hover { color: #fff; background: rgba(255,255,255,.08); }
.nav-item.is-active { color: #fff; background: #2a4167; box-shadow: inset 3px 0 var(--coral); }
.nav-icon { width: 18px; color: #d0d9e7; text-align: center; font-size: 17px; }
.sidebar-mascot-card { position: relative; display: block; width: calc(100% - 16px); min-height: 105px; overflow: hidden; margin: 27px 8px 17px; padding: 14px 10px; border: 1px solid rgba(255,255,255,.1); border-radius: 13px; color: inherit; background: linear-gradient(150deg, rgba(255,255,255,.1), rgba(255,255,255,.03)); text-align: left; transition: border-color .2s, background .2s, transform .2s; }
.sidebar-mascot-card:hover { border-color: rgba(244,201,103,.45); background: linear-gradient(150deg, rgba(255,255,255,.15), rgba(255,255,255,.05)); transform: translateY(-1px); }
.sidebar-mascot-card:focus-visible { outline: 3px solid rgba(247,216,123,.72); outline-offset: 3px; }
.sidebar-mascot-copy { position: relative; z-index: 1; display: grid; gap: 2px; max-width: 85px; }
.sidebar-mascot-copy span { color: #8fa4c1; font-size: 9px; letter-spacing: .12em; font-weight: 800; }
.sidebar-mascot-copy strong { color: #f8d88a; font-size: 18px; }
.sidebar-mascot-copy small { color: #aebdd2; font-size: 9px; line-height: 1.4; }
.sidebar-mascot-card img { position: absolute; right: -16px; bottom: -18px; width: 122px; transform: rotate(7deg); }
.sidebar-goal { margin: auto 8px 20px; padding: 15px 13px; border: 1px solid rgba(255,255,255,.09); border-radius: 13px; background: rgba(255,255,255,.055); }
.sidebar-goal-label, .section-kicker, .eyebrow { font-size: 9px; font-weight: 900; letter-spacing: .14em; }
.sidebar-goal-label { color: #8fa3bf; }
.sidebar-goal-title { margin: 9px 0 5px; color: #fff; font-size: 12px; line-height: 1.55; font-weight: 800; }
.sidebar-goal-purpose { margin-bottom: 14px; overflow: hidden; color: #c7d4e5; font-size: 10px; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.mini-progress, .progress-track { height: 7px; overflow: hidden; border-radius: 99px; background: #edf0f5; }
.mini-progress { height: 5px; background: rgba(255,255,255,.16); }
.mini-progress span, .progress-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--coral), #f5b265); transition: width .4s ease; }
.sidebar-goal-meta { display: flex; justify-content: space-between; margin-top: 9px; color: #a0b2ca; font-size: 9px; }
.sidebar-profile { display: flex; align-items: center; gap: 9px; padding: 13px 8px 0; border-top: 1px solid rgba(255,255,255,.09); }
.profile-copy { display: grid; flex: 1; gap: 3px; min-width: 0; }
.profile-copy strong { color: #fff; font-size: 11px; }
.profile-copy span { color: #9eafc7; font-size: 9px; }
.avatar { display: grid; flex: 0 0 auto; place-items: center; border-radius: 50%; color: #fff; background: linear-gradient(145deg, #f2a16e, #d45c56); font-weight: 800; }
.avatar-small { width: 30px; height: 30px; font-size: 9px; }
.avatar-top { width: 36px; height: 36px; color: #c5d7fb; background: linear-gradient(145deg, #547acc, #273e70); font-size: 10px; }
.icon-button { display: inline-grid; place-items: center; min-width: 31px; height: 31px; border: 0; border-radius: 9px; color: var(--muted); background: #f2f5f9; font-weight: 800; }
.icon-button-dark { color: #a7b6cc; background: transparent; }
.icon-button-dark:hover { color: #fff; background: rgba(255,255,255,.08); }

.main-content { min-width: 0; flex: 1; padding: 27px clamp(22px, 4vw, 60px) 25px; }
.topbar { display: flex; align-items: flex-end; justify-content: space-between; max-width: 1320px; margin: 0 auto 27px; }
body.is-subpage .topbar h1 { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; border: 0; clip: rect(0 0 0 0); white-space: nowrap; }
.eyebrow { margin-bottom: 7px; color: var(--muted-2); }
.topbar-actions { display: flex; align-items: center; gap: 13px; }
.notification-button { position: relative; width: 33px; height: 33px; border: 0; border-radius: 50%; color: var(--gold-dark); background: transparent; font-size: 20px; }
.notification-button:hover { background: #edf1f7; }
.notification-button.has-reminder { animation: reminder-nudge 2.8s ease-in-out infinite; }
.notification-dot { position: absolute; top: 4px; right: 3px; width: 7px; height: 7px; border: 2px solid #fff; border-radius: 50%; background: var(--coral); }
.notification-dot[hidden] { display: none; }
@keyframes reminder-nudge { 0%, 80%, 100% { transform: rotate(0); } 84% { transform: rotate(8deg); } 88% { transform: rotate(-8deg); } 92% { transform: rotate(4deg); } }
.view { display: none; max-width: 1320px; margin: 0 auto; }
.view.is-visible { display: block; }

.mountain-hero { position: relative; min-height: 303px; overflow: hidden; padding: 33px 35px; border-radius: 22px; color: #fff; background: linear-gradient(115deg, #1b2e4b 0%, #2d4c72 56%, #527496 100%); box-shadow: 0 18px 42px rgba(31, 55, 91, .18); }
.mountain-hero[data-time-of-day="dawn"] { background: linear-gradient(115deg, #704f65 0%, #a66f73 54%, #638e9c 100%); }
.mountain-hero[data-time-of-day="day"] { background: linear-gradient(115deg, #39728f 0%, #5e9baa 54%, #80a99b 100%); }
.mountain-hero[data-time-of-day="evening"] { background: linear-gradient(115deg, #463f61 0%, #865f73 54%, #4c7189 100%); }
.mountain-hero[data-time-of-day="night"] { background: linear-gradient(115deg, #1b2e4b 0%, #2d4c72 56%, #527496 100%); }
.mountain-hero[data-time-of-day="dawn"] .stars { opacity: .38; }
.mountain-hero[data-time-of-day="day"] .stars { opacity: .08; }
.mountain-hero[data-time-of-day="evening"] .stars { opacity: .62; }
.mountain-hero[data-time-of-day="day"] .moon { opacity: .16; transform: scale(.72); box-shadow: none; }
.mountain-hero[data-time-of-day="dawn"] .moon { opacity: .3; transform: scale(.86); }
.mountain-hero[data-time-of-day="evening"] .moon { opacity: .6; }
.mountain-hero[data-time-of-day="day"] .meteor { animation-play-state: paused; }
.mountain-hero[data-area="cloud"] .mountain-haze { opacity: .42; filter: blur(13px); transform: scale(1.14); }
.mountain-hero[data-area="crystal"] .mountain-front { filter: saturate(1.35) hue-rotate(12deg); }
.mountain-hero[data-area="crystal"] .hero-particles span { color: #d7c9ff; }
.mountain-hero[data-area="moon"] .moon { box-shadow: 0 0 45px rgba(206,204,255,.5), 0 0 0 8px rgba(183,185,255,.08); }
.mountain-hero[data-area="summit"] .mountain-layer { filter: brightness(1.12) saturate(.82); }
.mountain-hero[data-area="summit"] .hero-particles span { color: #fff1b0; }
.mountain-hero::after { content: ""; position: absolute; inset: 0; opacity: .38; background: radial-gradient(circle at 16% 22%, rgba(255,231,158,.24) 0 1px, transparent 2px), radial-gradient(circle at 57% 13%, rgba(255,255,255,.32) 0 1px, transparent 2px), radial-gradient(circle at 81% 27%, rgba(255,255,255,.24) 0 1px, transparent 2px); background-size: 53px 47px, 91px 80px, 67px 73px; animation: star-drift 18s linear infinite; pointer-events: none; }
.hero-copy { position: relative; z-index: 3; max-width: 350px; }
@media (min-width: 1101px) {
  .hero-copy { max-width: 390px; }
  .hero-copy h2 em { white-space: nowrap; }
}
.hero-eyebrow { color: #e9c770; }
.hero-goal { display: inline-block; max-width: 100%; margin-top: 8px !important; padding: 4px 8px; overflow: hidden; border: 1px solid rgba(255,255,255,.16); border-radius: 7px; color: #f7df9e !important; background: rgba(13,29,52,.28); font-size: 10px !important; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.hero-goal[hidden] { display: none; }
.hero-copy h2 { color: #fff; }
.hero-copy h2 em { color: #f6cf75; font-style: normal; }
.hero-copy p { margin-top: 13px; color: #c8d7e8; font-size: 12px; }
.hero-next-step { display: flex; align-items: center; gap: 8px; width: min(390px, 100%); margin-top: 14px; padding: 8px 9px; border: 1px solid rgba(255,255,255,.16); border-radius: 11px; background: rgba(12,30,53,.3); box-shadow: inset 0 1px rgba(255,255,255,.05); backdrop-filter: blur(6px); }
.hero-next-step-icon { display: grid; width: 26px; height: 26px; flex: 0 0 auto; place-items: center; border-radius: 8px; color: var(--navy); background: #f7d783; font-size: 13px; font-weight: 900; }
.hero-next-step-copy { display: grid; flex: 1; min-width: 0; gap: 1px; }
.hero-next-step-copy > span { color: #f2cf78; font-size: 7px; font-weight: 900; letter-spacing: .13em; }
.hero-next-step-copy strong { overflow: hidden; color: #fff; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.hero-next-step-copy small { overflow: hidden; color: #bfd0e2; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.hero-next-step-action { flex: 0 0 auto; min-height: 30px; padding: 0 9px; border: 1px solid rgba(255,255,255,.25); border-radius: 8px; color: #fff; background: rgba(255,255,255,.12); font-size: 9px; font-weight: 900; white-space: nowrap; }
.hero-next-step-action:hover { background: rgba(255,255,255,.2); }
.hero-actions { display: flex; gap: 9px; margin-top: 23px; }
.mountain-scene { position: absolute; inset: 0 0 0 34%; overflow: hidden; }
.stars { position: absolute; inset: 0; background: radial-gradient(circle at 59% 18%, #f3d989 0 2px, transparent 2.8px), radial-gradient(circle at 77% 30%, #fff 0 1px, transparent 2px), radial-gradient(circle at 69% 47%, #fff 0 1px, transparent 2px), radial-gradient(circle at 88% 19%, #f3d989 0 1px, transparent 2px); animation: star-drift 24s ease-in-out infinite alternate; }
.moon { position: absolute; top: 29px; right: 25%; width: 48px; height: 48px; border-radius: 50%; background: #f7dfa1; box-shadow: 0 0 32px rgba(247,223,161,.3); animation: moon-glow 4.5s ease-in-out infinite; }
.meteor { position: absolute; z-index: 1; width: 34px; height: 1px; opacity: 0; background: linear-gradient(90deg, transparent, rgba(255,236,165,.95)); transform: rotate(-28deg); }
.meteor-one { top: 25%; left: 38%; animation: meteor-fall 8s 2s ease-in infinite; }
.meteor-two { top: 39%; left: 65%; animation: meteor-fall 11s 5.5s ease-in infinite; }
.mountain-layer { position: absolute; right: -8%; bottom: -8px; width: 94%; height: 67%; clip-path: polygon(0 100%, 0 64%, 15% 48%, 24% 60%, 40% 20%, 52% 49%, 65% 32%, 78% 60%, 91% 37%, 100% 57%, 100% 100%); }
.mountain-back { opacity: .55; background: #8ca4b2; transform: translateX(-4%); animation: mountain-sway-back 9s ease-in-out infinite alternate; }
.mountain-mid { bottom: -18px; opacity: .85; background: #58788d; transform: translateX(10%); animation: mountain-sway-mid 12s ease-in-out infinite alternate; }
.mountain-front { right: -14%; bottom: -40px; height: 58%; animation: mountain-sway-front 15s ease-in-out infinite alternate; }
.mountain-haze { position: absolute; z-index: 2; width: 55%; height: 28px; border-radius: 50%; opacity: .2; background: rgba(206,226,235,.6); filter: blur(9px); }
.haze-one { right: 27%; bottom: 26%; animation: haze-drift 9s ease-in-out infinite alternate; }
.haze-two { right: 3%; bottom: 36%; width: 38%; opacity: .13; animation: haze-drift 12s 1s ease-in-out infinite alternate-reverse; }
.campfire { position: absolute; right: 36%; bottom: 27px; z-index: 2; color: #f4ca66; font-size: 23px; filter: drop-shadow(0 0 10px rgba(247,205,104,.8)); animation: campfire-idle 1.8s ease-in-out infinite; }
.hero-particles { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.hero-particles span { position: absolute; color: #f7d989; font-size: 11px; opacity: .75; }
.hero-particles span:nth-child(1) { right: 28%; bottom: 35%; animation: particle-float 3.8s ease-in-out infinite; }
.hero-particles span:nth-child(2) { right: 17%; bottom: 48%; color: #d3e9ed; animation: particle-float 4.6s .8s ease-in-out infinite; }
.hero-particles span:nth-child(3) { right: 43%; bottom: 44%; animation: particle-float 5.2s 1.4s ease-in-out infinite; }
.climb-burst { position: absolute; right: 23%; bottom: 30%; z-index: 6; pointer-events: none; }
.climb-burst[hidden] { display: none; }
.climb-burst > strong { position: absolute; top: -7px; left: 50%; color: #fff7c8; font-size: 14px; font-weight: 900; letter-spacing: .02em; opacity: 0; text-shadow: 0 2px 7px rgba(7,23,45,.42), 0 0 9px rgba(255,219,119,.8); transform: translate(-50%, 0) scale(.82); white-space: nowrap; }
.climb-burst.is-active > strong { animation: climb-distance-pop .95s ease-out both; }
.climb-burst span { position: absolute; color: #ffe49a; font-size: var(--spark-size, 16px); opacity: 0; filter: drop-shadow(0 0 7px rgba(255,222,135,.75)); }
.climb-burst span:nth-of-type(1) { --burst-x: -46px; --burst-y: -25px; --spark-delay: 0s; --spark-size: 15px; }
.climb-burst span:nth-of-type(2) { --burst-x: 39px; --burst-y: -18px; --spark-delay: .06s; --spark-size: 13px; color: #fff2b8; }
.climb-burst span:nth-of-type(3) { --burst-x: -27px; --burst-y: -58px; --spark-delay: .12s; --spark-size: 11px; }
.climb-burst span:nth-of-type(4) { --burst-x: 9px; --burst-y: -72px; --spark-delay: .18s; --spark-size: 9px; color: #f7d7ff; }
.climb-burst span:nth-of-type(5) { --burst-x: 58px; --burst-y: -49px; --spark-delay: .24s; --spark-size: 15px; }
.climb-burst span:nth-of-type(6) { --burst-x: -67px; --burst-y: -47px; --spark-delay: .1s; --spark-size: 10px; color: #d7f4ee; }
.climb-burst span:nth-of-type(7) { --burst-x: 45px; --burst-y: -75px; --spark-delay: .3s; --spark-size: 12px; }
.climb-burst span:nth-of-type(8) { --burst-x: -18px; --burst-y: -88px; --spark-delay: .36s; --spark-size: 9px; color: #f7d7ff; }
.climb-burst span:nth-of-type(9) { --burst-x: 78px; --burst-y: -30px; --spark-delay: .42s; --spark-size: 10px; color: #d7f4ee; }
.climb-burst span:nth-of-type(10) { --burst-x: -82px; --burst-y: -15px; --spark-delay: .48s; --spark-size: 12px; color: #fff2b8; }
.climb-burst.is-active span { animation: climb-spark .92s cubic-bezier(.2,.75,.25,1) var(--spark-delay, 0s) both; }
.mascot-image { position: absolute; right: 9%; bottom: -41px; z-index: 4; width: clamp(190px, 27%, 295px); pointer-events: none; filter: drop-shadow(0 13px 10px rgba(12,26,47,.2)); transform: rotate(1deg); }
.mascot-image.mood-close { filter: drop-shadow(0 13px 10px rgba(12,26,47,.2)) drop-shadow(0 0 13px rgba(246,207,117,.22)); }
.mascot-image.mood-idle { animation: mascot-float 4.2s ease-in-out infinite; }
.mascot-image.mood-encourage { animation: mascot-float 5.4s .3s ease-in-out infinite; }
.mascot-image.mood-rest { filter: saturate(.8) drop-shadow(0 13px 10px rgba(12,26,47,.2)); animation: mascot-rest 6s ease-in-out infinite; }
.mascot-image.mood-focus { filter: drop-shadow(0 13px 10px rgba(12,26,47,.2)) drop-shadow(0 0 15px rgba(105,146,223,.25)); animation: mascot-focus 4.8s ease-in-out infinite; }
.mascot-image.mood-close { animation: mascot-nod 2.4s ease-in-out infinite; }
.mascot-image.mood-celebrate, .mascot-image.mood-discovery { animation: mascot-hop 1.1s ease-in-out 2; }
@keyframes mascot-hop { 0%, 100% { transform: rotate(1deg) translateY(0); } 45% { transform: rotate(-3deg) translateY(-9px); } 70% { transform: rotate(3deg) translateY(0); } }
.mountain-hero.is-celebrating .mascot-image { filter: drop-shadow(0 13px 10px rgba(12,26,47,.2)) drop-shadow(0 0 18px rgba(247,214,123,.45)); }
.mountain-hero.is-celebrating { box-shadow: 0 18px 42px rgba(31,55,91,.18), 0 0 0 3px rgba(244,201,103,.18); }
.mountain-hero.is-celebrating .campfire { animation: campfire-glow .85s ease-in-out 3; }
@keyframes campfire-glow { 50% { transform: scale(1.28); filter: drop-shadow(0 0 16px rgba(247,205,104,.95)); } }
@keyframes star-drift { from { background-position: 0 0, 0 0, 0 0; } to { background-position: 28px -12px, -20px 16px, 17px -9px; } }
@keyframes moon-glow { 50% { transform: scale(1.04); box-shadow: 0 0 42px rgba(247,223,161,.48); } }
@keyframes meteor-fall { 0% { opacity: 0; transform: translate(0, 0) rotate(-28deg); } 8% { opacity: .9; } 28%, 100% { opacity: 0; transform: translate(86px, 45px) rotate(-28deg); } }
@keyframes mountain-sway-back { to { transform: translateX(-1%); } }
@keyframes mountain-sway-mid { to { transform: translateX(6%); } }
@keyframes mountain-sway-front { to { transform: translateX(-2%); } }
@keyframes haze-drift { to { transform: translateX(-22px); opacity: .08; } }
@keyframes campfire-idle { 50% { transform: scale(1.1) rotate(-4deg); filter: drop-shadow(0 0 15px rgba(247,205,104,.95)); } }
@keyframes particle-float { 0%, 100% { transform: translateY(5px) scale(.8); opacity: .2; } 50% { transform: translateY(-12px) scale(1.1); opacity: .85; } }
@keyframes mascot-float { 0%, 100% { transform: rotate(1deg) translateY(0); } 50% { transform: rotate(-1deg) translateY(-5px); } }
@keyframes mascot-rest { 0%, 100% { transform: rotate(2deg) translateY(0); } 50% { transform: rotate(0deg) translateY(3px); } }
@keyframes mascot-nod { 0%, 100% { transform: rotate(1deg) translateY(0); } 50% { transform: rotate(-2deg) translateY(-2px); } }
@keyframes mascot-focus { 0%, 100% { transform: rotate(1deg) translateY(0); } 50% { transform: rotate(0deg) translateY(-3px); } }
@keyframes mascot-climb { 0% { transform: rotate(1deg) translate(0, 0); } 24% { transform: rotate(-4deg) translate(-9px, -12px); } 48% { transform: rotate(3deg) translate(5px, -24px); } 72% { transform: rotate(-2deg) translate(-4px, -12px); } 100% { transform: rotate(1deg) translate(0, 0); } }
@keyframes mountain-climb { 0%, 100% { filter: brightness(1); } 42% { filter: brightness(1.15); transform: translateX(-2%); } }
@keyframes climb-spark { 0% { opacity: 0; transform: translate(0, 0) rotate(0deg) scale(.35); } 18% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--burst-x), var(--burst-y)) rotate(35deg) scale(1.15); } }
@keyframes climb-distance-pop { 0% { opacity: 0; transform: translate(-50%, 5px) scale(.82); } 18% { opacity: 1; transform: translate(-50%, -2px) scale(1); } 72% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -32px) scale(1.05); } }
.hero-progress-forecast { position: absolute; top: 51%; right: 21%; z-index: 6; display: grid; gap: 10px; width: min(36%, 360px); min-width: 300px; padding: 14px 16px 12px; overflow: hidden; border: 1px solid rgba(202,239,171,.58); border-radius: 16px; color: #fff; background: linear-gradient(145deg, rgba(18,40,61,.86), rgba(38,72,82,.76)); box-shadow: 0 12px 28px rgba(11,29,47,.22), inset 0 1px rgba(255,255,255,.14); backdrop-filter: blur(9px); transform: translateY(-50%); }
.hero-progress-forecast[hidden] { display: none; }
.hero-forecast-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hero-forecast-heading > div { display: grid; min-width: 0; gap: 3px; }
.hero-forecast-heading span { color: #cce9a8; font-size: 9px; font-weight: 900; letter-spacing: .14em; line-height: 1.2; }
.hero-forecast-heading strong { overflow: hidden; color: #fff; font-size: 14px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.hero-forecast-detail-button { display: inline-grid; min-height: 29px; flex: 0 0 auto; place-items: center; padding: 0 9px; border: 1px solid rgba(220,244,202,.34); border-radius: 9px; color: #e4f3d5; background: rgba(255,255,255,.1); font-size: 9px; font-weight: 900; line-height: 1; white-space: nowrap; }
.hero-forecast-detail-button:hover { border-color: rgba(255,255,255,.58); color: #fff; background: rgba(255,255,255,.17); }
.hero-forecast-summary { display: grid; min-width: 0; gap: 3px; padding-top: 1px; }
.hero-forecast-summary strong { overflow: hidden; color: #ffbe91; font-size: 15px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.hero-forecast-summary span { overflow: visible; color: #d5e0e3; font-size: 10px; line-height: 1.4; white-space: normal; }
.hero-forecast-chart { height: 78px; overflow: hidden; border: 1px solid rgba(220,239,232,.12); border-radius: 10px; background: rgba(7,24,43,.16); }
.hero-forecast-chart svg { display: block; width: 100%; height: 100%; }
.hero-forecast-chart .forecast-grid-line { stroke: rgba(220,239,232,.16); }
.hero-forecast-chart .forecast-axis-label, .hero-forecast-chart .forecast-date-label { display: none; }
.hero-forecast-chart .forecast-today-line { stroke: rgba(255,207,167,.65); }
.hero-forecast-chart .forecast-plan-line { stroke: #bcb3ff; stroke-width: 3; }
.hero-forecast-chart .forecast-actual-line { stroke: #ff9a73; stroke-width: 4; }
.hero-forecast-chart .forecast-plan-dot { r: 3; }
.hero-forecast-chart .forecast-actual-dot { r: 4; }
.hero-forecast-legend { display: flex; align-items: center; gap: 14px; color: #c7d8dc; font-size: 9px; }
.hero-forecast-legend .forecast-legend-line { width: 14px; border-top-color: #ff9a73; }
.hero-forecast-legend .forecast-legend-line.is-plan { border-top-color: #bcb3ff; }
.mountain-hero.is-climbing .mascot-image { animation: mascot-climb 1.2s cubic-bezier(.2,.75,.3,1) both; }
.mountain-hero.is-climbing .mountain-front { animation: mountain-climb 1.2s ease-out both; }
.mountain-hero.is-climbing .hero-particles span { animation-duration: 1.2s; }
.summit-label { position: absolute; right: 30px; top: 26px; z-index: 5; display: flex; align-items: center; gap: 8px; padding: 8px 11px; border: 1px solid rgba(255,255,255,.18); border-radius: 10px; background: rgba(18,37,66,.35); backdrop-filter: blur(6px); }
.summit-label-icon { color: #f2d17c; font-size: 19px; }
.summit-label div { display: grid; gap: 3px; }
.summit-label small { color: #b7c8dc; font-size: 8px; }
.summit-label strong { color: #fff; font-size: 13px; }
.summit-distance-units { color: #f6d991; font-size: 9px; font-weight: 900; }
.summit-distance-reward { color: #d7f2a8; font-size: 8px; font-weight: 900; }
.summit-distance-reward[hidden] { display: none; }
.camp-discovery { position: absolute; left: 35px; bottom: 20px; z-index: 7; display: grid; gap: 3px; width: min(275px, calc(100% - 70px)); padding: 11px 13px; border: 1px solid rgba(255,235,164,.35); border-radius: 12px; background: rgba(20,39,68,.78); box-shadow: 0 9px 22px rgba(8,22,42,.2); backdrop-filter: blur(8px); animation: discovery-in .45s ease-out both; }
.camp-discovery[hidden] { display: none; }
.camp-discovery span { color: #f2cf78; font-size: 8px; font-weight: 900; letter-spacing: .14em; }
.camp-discovery strong { color: #fff; font-size: 14px; }
.camp-discovery small { color: #c4d3e4; font-size: 9px; }
.camp-discovery[data-area="starfall"] { border-color: rgba(255,223,123,.55); background: linear-gradient(135deg, rgba(18,57,68,.88), rgba(31,76,75,.78)); }
.camp-discovery[data-area="cloud"] { border-color: rgba(194,240,235,.62); background: linear-gradient(135deg, rgba(31,75,93,.88), rgba(82,133,145,.78)); }
.camp-discovery[data-area="crystal"] { border-color: rgba(201,187,255,.68); background: linear-gradient(135deg, rgba(42,45,91,.9), rgba(76,68,128,.8)); }
.camp-discovery[data-area="moon"] { border-color: rgba(206,204,255,.62); background: linear-gradient(135deg, rgba(26,32,76,.92), rgba(54,53,108,.82)); }
.camp-discovery[data-area="summit"] { border-color: rgba(255,246,190,.7); background: linear-gradient(135deg, rgba(64,89,106,.9), rgba(111,151,159,.82)); }
@keyframes discovery-in { from { opacity: 0; transform: translateY(9px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }

.button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; padding: 0 15px; border: 1px solid transparent; border-radius: 10px; font-size: 11px; font-weight: 900; transition: transform .2s, background .2s, box-shadow .2s; }
.button:hover { transform: translateY(-1px); }
.button:disabled, .quick-record:disabled { cursor: not-allowed; opacity: .48; transform: none; }
.button-primary { color: #fff; background: var(--coral); box-shadow: 0 7px 15px rgba(236,118,92,.22); }
.button-primary:hover { background: var(--coral-dark); }
.button-hero-ghost { color: #e4edf8; border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.08); }
.button-hero-ghost:hover { background: rgba(255,255,255,.14); }
.button-soft { color: var(--navy-2); border-color: #e1e7ef; background: #f3f6fb; }
.button-outline { color: var(--navy-2); border-color: #dfe6ee; background: #fff; }
.button-outline:hover, .button-soft:hover { background: #f0f4fa; }
.button-ghost { color: var(--muted); border-color: #e0e6ed; background: #fff; }
.button-full { width: 100%; }
.button-small { min-height: 32px; padding: 0 11px; font-size: 10px; }
.text-button { padding: 5px 0; border: 0; color: var(--coral-dark); background: transparent; font-size: 10px; font-weight: 900; }

.stats-strip { display: grid; grid-template-columns: 1.3fr repeat(5, 1fr); gap: 1px; margin: 15px 0 20px; overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: var(--line); box-shadow: var(--shadow); }
.stat-block { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 15px 17px; background: #fff; }
.stat-block-main { background: #fffdf7; }
.stat-block > div { display: grid; gap: 4px; min-width: 0; }
.stat-block small { color: var(--muted); font-size: 9px; white-space: nowrap; }
.stat-block strong { overflow: hidden; color: var(--navy); font-size: 20px; letter-spacing: -.05em; text-overflow: ellipsis; white-space: nowrap; }
.stat-block strong b { margin-left: 2px; color: var(--muted); font-size: 11px; letter-spacing: 0; }
.stat-block strong i { color: #9aa6b7; font-size: 10px; font-style: normal; letter-spacing: 0; }
.stat-rest-label { color: var(--purple); font-size: 10px; font-style: normal; letter-spacing: 0; }
.stat-symbol { display: grid; width: 30px; height: 30px; flex: 0 0 auto; place-items: center; border-radius: 10px; font-size: 18px; font-weight: 900; }
.stat-symbol-sun { color: var(--gold-dark); background: #fff0c4; }
.stat-symbol-route { color: var(--purple); background: #efedff; }
.stat-symbol-streak { color: var(--coral-dark); background: #ffebe7; }
.stat-symbol-gem { color: var(--teal); background: #e6f8f2; }
.stat-symbol-diamond { color: #5f73d8; background: #edf0ff; }
.stat-symbol-xp { color: #4d76b9; background: #e7efff; }
.streak-shield { display: inline-flex; width: fit-content; padding: 2px 5px; border-radius: 5px; color: var(--purple) !important; background: #efedff; font-size: 8px !important; font-weight: 900; }
.xp-next { color: #6b87b7; font-size: 8px; font-weight: 800; }
.streak-week-card { display: flex; align-items: center; gap: 18px; min-height: 79px; margin: -7px 0 20px; padding: 13px 17px; border: 1px solid #e6ebf1; border-radius: 15px; background: linear-gradient(105deg, #fff, #fbfcff); box-shadow: var(--shadow); }
.streak-week-copy { display: grid; flex: 0 0 210px; gap: 3px; min-width: 0; }
.streak-week-copy .section-kicker { margin-bottom: 0; color: var(--purple); font-size: 8px; }
.streak-week-copy strong { overflow: hidden; color: var(--navy); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.streak-week-copy small { overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.streak-week-days { display: grid; grid-template-columns: repeat(7, minmax(24px, 1fr)); flex: 1; gap: 7px; }
.streak-week-day { display: grid; justify-items: center; gap: 5px; color: var(--muted-2); font-size: 8px; }
.streak-week-dot { display: grid; width: 24px; height: 24px; place-items: center; border: 1px solid #e0e6ee; border-radius: 50%; color: #b7c1cd; background: #f7f9fb; font-size: 10px; font-weight: 900; }
.streak-week-day small { color: var(--muted); font-size: 8px; }
.streak-week-day.is-done .streak-week-dot { border-color: #a6dfd1; color: #fff; background: var(--teal); box-shadow: 0 3px 8px rgba(75,180,158,.18); }
.streak-week-day.is-rest .streak-week-dot { border-color: #d4d0f5; color: var(--purple); background: #efedff; }
.streak-week-day.is-today .streak-week-dot { outline: 3px solid rgba(236,118,92,.14); outline-offset: 2px; }
.streak-week-day.is-today small { color: var(--coral-dark); font-weight: 900; }
.streak-week-badge { flex: 0 0 auto; padding: 7px 8px; border-radius: 7px; color: var(--purple); background: #efedff; font-size: 9px; font-weight: 900; }
.reminder-banner { display: flex; align-items: center; gap: 10px; min-height: 58px; margin: -5px 0 15px; padding: 10px 12px; border: 1px solid #f1dfb9; border-radius: 13px; background: linear-gradient(105deg, #fffaf0, #fffdf8); box-shadow: 0 6px 16px rgba(126, 96, 42, .08); }
.reminder-banner[hidden] { display: none; }
.reminder-icon { display: grid; width: 29px; height: 29px; flex: 0 0 auto; place-items: center; border-radius: 9px; color: var(--gold-dark); background: #fff0c4; font-size: 15px; }
.reminder-banner > div { display: grid; flex: 1; min-width: 0; gap: 2px; }
.reminder-kicker { color: var(--coral-dark); font-size: 8px; font-weight: 900; letter-spacing: .1em; }
.reminder-banner strong { overflow: hidden; color: var(--navy); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.reminder-banner small { color: var(--muted); font-size: 8px; }

.home-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(285px, .82fr); gap: 20px; }
.home-main-column, .home-side-column { display: grid; align-content: start; gap: 20px; }
.card { border: 1px solid rgba(218,225,234,.8); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.climb-card, .route-card, .materials-card, .timer-card, .joy-card, .quest-card, .rule-card, .timer-large-card, .timer-guide-card, .settings-card { padding: 22px; }
.climb-card.is-rest-day { border-color: rgba(129,117,217,.28); }
.climb-card.is-rest-day .section-kicker { color: var(--purple); }
.card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 13px; }
.card-heading-tight { align-items: center; }
.section-kicker { margin-bottom: 7px; color: #a0abba; }
.card-lead { margin-top: 9px; color: var(--muted); font-size: 11px; line-height: 1.6; }
.next-step-banner { display: flex; align-items: center; gap: 9px; min-height: 51px; margin-top: 14px; padding: 9px 10px; border: 1px solid #f3e6c5; border-radius: 11px; background: linear-gradient(105deg, #fffaf0, #fffdf8); }
.next-step-icon { display: grid; width: 27px; height: 27px; flex: 0 0 auto; place-items: center; border-radius: 9px; color: var(--gold-dark); background: #fff0c4; font-size: 14px; }
.next-step-banner > div { display: grid; flex: 1; gap: 2px; min-width: 0; }
.next-step-banner strong { overflow: hidden; color: var(--navy); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.next-step-banner small { overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.next-step-kicker { color: var(--coral-dark); font-size: 8px; font-weight: 900; }
.conversion-chip, .rule-badge { padding: 7px 9px; border-radius: 7px; color: var(--gold-dark); background: #fff5d8; font-size: 9px; white-space: nowrap; }
.conversion-chip b { color: var(--navy); }
.page-log-form { display: flex; gap: 9px; margin-top: 19px; }
.record-toolbar { display: flex; align-items: center; gap: 8px; margin-top: 16px; color: var(--muted); font-size: 11px; }
.record-toolbar label { flex: 0 0 auto; font-weight: 900; }
.record-toolbar select { min-width: 0; max-width: 235px; height: 34px; padding: 0 27px 0 9px; border: 1px solid #dfe5ed; border-radius: 8px; color: var(--navy); background: #fff; font-size: 12px; font-weight: 800; }
.record-toolbar span { overflow: hidden; color: var(--muted-2); text-overflow: ellipsis; white-space: nowrap; }
.study-intent { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.study-intent-label { margin-right: 2px; color: var(--muted); font-size: 11px; font-weight: 800; }
.study-intent-button { min-height: 30px; padding: 0 10px; border: 1px solid #dfe6ee; border-radius: 8px; color: var(--muted); background: #fff; font-size: 11px; font-weight: 800; transition: color .2s, background .2s, border-color .2s, transform .2s; }
.study-intent-button:hover { color: var(--navy); background: #f4f7fb; transform: translateY(-1px); }
.study-intent-button.is-selected { border-color: var(--purple); color: #fff; background: var(--purple); box-shadow: 0 4px 10px rgba(129,117,217,.16); }
.page-input-wrap { display: flex; align-items: center; flex: 1; min-width: 0; height: 42px; padding: 0 11px; border: 1px solid #dce4ed; border-radius: 10px; background: #fff; }
.page-input-wrap:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(105,146,223,.12); }
.page-input-wrap input { width: 100%; min-width: 0; border: 0; outline: 0; color: var(--navy); font-size: 20px; font-weight: 900; }
.page-input-wrap span { color: var(--muted); font-size: 10px; font-weight: 800; white-space: nowrap; }
.page-log-form .button { flex: 0 0 auto; }
.quick-records { display: flex; align-items: center; gap: 7px; margin-top: 10px; }
.quick-record { min-height: 31px; padding: 0 10px; border: 0; border-radius: 7px; color: var(--navy-2); background: #f1f4f8; font-size: 11px; font-weight: 900; }
.quick-record:hover { background: #e9eef5; }
.quick-record-note { margin-left: auto; color: var(--muted-2); font-size: 9px; }
.record-result { display: flex; align-items: center; gap: 15px; margin-top: 20px; padding: 12px 13px; border-radius: 11px; background: #f8fafc; }
.record-result > div:not(.record-divider):not(.record-progress) { display: grid; gap: 4px; }
.record-result span, .record-result small { color: var(--muted); font-size: 9px; }
.record-result strong { color: var(--navy); font-size: 13px; }
.record-divider { width: 1px; height: 29px; background: #e0e6ed; }
.record-progress { flex: 1; min-width: 80px; }
.record-progress .progress-track { height: 5px; }
.record-progress small { display: block; margin-top: 5px; color: var(--coral-dark); text-align: right; white-space: nowrap; }
.record-progress .map-step-hint { margin-top: 3px; color: var(--gold-dark); font-weight: 900; }
.activity-feed { margin-top: 16px; padding-top: 14px; border-top: 1px solid #eef1f5; }
.activity-feed-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.activity-feed-heading > div { display: grid; gap: 3px; }
.activity-feed-heading .section-kicker { margin: 0; color: var(--purple); font-size: 8px; }
.activity-feed-heading strong { color: var(--navy); font-size: 13px; }
.activity-feed-heading > span { color: var(--muted); font-size: 10px; font-weight: 800; }
.activity-empty { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 10px; border-radius: 9px; color: var(--muted); background: #f8fafc; }
.activity-empty > span { color: var(--gold-dark); font-size: 15px; }
.activity-empty p { font-size: 10px; line-height: 1.5; }
.activity-item { display: flex; align-items: center; gap: 8px; min-width: 0; margin-top: 8px; padding: 8px 0; border-bottom: 1px solid #f0f3f6; }
.activity-item:last-child { border-bottom: 0; }
.activity-icon { display: grid; width: 25px; height: 25px; flex: 0 0 auto; place-items: center; border-radius: 8px; color: var(--purple); background: #efedff; font-size: 12px; font-weight: 900; }
.activity-icon.is-time { color: var(--coral-dark); background: #ffebe6; }
.activity-copy { display: grid; flex: 1; min-width: 0; gap: 2px; }
.activity-copy strong { overflow: hidden; color: var(--navy); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.activity-copy small { overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.activity-item > b { flex: 0 0 auto; color: var(--teal); font-size: 10px; }
.activity-undo { flex: 0 0 auto; min-height: 26px; padding: 0 7px; border: 1px solid #e1e7ef; border-radius: 6px; color: var(--muted); background: #fff; font-size: 9px; font-weight: 800; }
.activity-undo:hover { color: var(--coral-dark); border-color: #ffd4cb; background: #fff7f5; }

.route-total { color: var(--muted); font-size: 10px; }
.route-total strong { color: var(--coral-dark); font-size: 18px; }
.route-heading-actions { display: flex; align-items: center; gap: 14px; }
.route-heading-actions .text-button { white-space: nowrap; }
.route-round { padding: 5px 7px; border-radius: 6px; color: var(--purple); background: #efedff; font-size: 8px; font-weight: 900; letter-spacing: .08em; }
.route-summit-count { color: var(--teal-dark); font-size: 9px; font-weight: 900; white-space: nowrap; }
.route-map { position: relative; height: 166px; margin-top: 21px; border-radius: 13px; background: radial-gradient(circle at 74% 22%, rgba(247,223,161,.48) 0 3px, transparent 4px), linear-gradient(145deg, #f5f8fc 0%, #edf4f3 55%, #e3efeb 100%); overflow: hidden; }
.route-map::before, .route-map::after { display: none; }
.route-zone-bands { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.route-zone-band { position: absolute; right: 0; left: 0; border-top: 1px solid rgba(255,255,255,.48); border-bottom: 1px solid rgba(90,120,126,.08); opacity: .78; }
.route-zone-band-starfall { background: linear-gradient(90deg, rgba(50,130,123,.17), rgba(255,231,150,.12), rgba(50,130,123,.08)); }
.route-zone-band-cloud { background: linear-gradient(90deg, rgba(176,224,220,.24), rgba(255,255,255,.4), rgba(127,183,190,.16)); }
.route-zone-band-crystal { background: linear-gradient(90deg, rgba(116,106,182,.17), rgba(198,184,255,.2), rgba(82,88,155,.14)); }
.route-zone-band-moon { background: linear-gradient(90deg, rgba(69,73,148,.15), rgba(158,151,225,.16), rgba(43,50,112,.13)); }
.route-zone-band-summit { background: linear-gradient(90deg, rgba(208,232,218,.32), rgba(255,247,192,.24), rgba(126,174,177,.16)); }
.route-mini-svg { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; }
.route-mini-svg path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.route-mini-base { stroke: #d1dce0; stroke-width: 5.8; filter: drop-shadow(0 3px 2px rgba(48,76,83,.12)); }
.route-mini-progress { stroke: var(--teal); stroke-width: 3.7; stroke-dasharray: 100; stroke-dashoffset: var(--route-mini-offset, 100); filter: drop-shadow(0 0 3px rgba(75,180,158,.38)); }
.route-node { position: absolute; top: auto; z-index: 2; width: 74px; transform: translate(-50%, -50%); text-align: center; }
.route-node-marker { width: 30px; height: 30px; display: grid; place-items: center; margin: 0 auto 9px; border: 4px solid #e0e8ee; border-radius: 50%; color: #9eabb7; background: #fff; font-size: 11px; font-weight: 900; box-shadow: 0 3px 8px rgba(39,59,81,.08); }
.route-node span { display: block; color: #9aa7b7; font-size: 9px; line-height: 1.35; }
.route-node.is-done .route-node-marker { border-color: var(--teal); color: #fff; background: var(--teal); }
.route-node.is-done span { color: #438c7e; font-weight: 800; }
.route-node.is-current .route-node-marker { width: 39px; height: 39px; margin-top: -4px; border-color: var(--coral); color: #fff; background: var(--coral); box-shadow: 0 0 0 6px rgba(236,118,92,.12), 0 5px 12px rgba(236,118,92,.22); animation: route-node-pulse 2.2s ease-in-out infinite; }
.route-node.is-current span { color: var(--coral-dark); font-weight: 900; }
@keyframes route-node-pulse { 50% { box-shadow: 0 0 0 10px rgba(236,118,92,.05), 0 5px 12px rgba(236,118,92,.2); transform: scale(1.04); } }
.route-footer { display: flex; gap: 15px; margin-top: 12px; color: var(--muted); font-size: 9px; }
.route-next-summit { color: var(--gold-dark); font-weight: 900; }
.legend-dot { display: inline-block; width: 7px; height: 7px; margin-right: 4px; border-radius: 50%; }
.legend-done { background: var(--teal); }
.legend-next { background: var(--coral); }
.legend-locked { background: #d5dee6; }

.material-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 17px; }
.material-tile { min-width: 0; padding: 13px; border: 1px solid #edf0f4; border-radius: 12px; background: #fbfcfd; }
.material-tile-top { display: flex; align-items: center; justify-content: space-between; gap: 7px; }
.material-color { width: 9px; height: 9px; border-radius: 50%; }
.material-kind { color: var(--muted-2); font-size: 8px; font-weight: 900; }
.material-tile h4 { margin: 10px 0 8px; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.material-tile .progress-track { height: 5px; }
.material-tile-meta { display: flex; justify-content: space-between; margin-top: 8px; color: var(--muted); font-size: 8px; }
.material-tile-meta strong { color: var(--navy); }
.material-tile-plan { margin-top: 8px; color: var(--coral-dark); font-size: 10px; font-weight: 900; line-height: 1.35; }
.material-tile-actions { display: flex; justify-content: flex-end; gap: 11px; margin-top: 11px; padding-top: 9px; border-top: 1px solid #edf0f4; }
.empty-library-card { display: flex; align-items: center; gap: 11px; min-width: 0; padding: 17px; border: 1px dashed #cfd9e5; border-radius: 13px; color: var(--muted); background: #fbfcfd; }
.empty-library-icon { display: grid; width: 30px; height: 30px; flex: 0 0 auto; place-items: center; border-radius: 9px; color: var(--coral-dark); background: #fff0ed; font-size: 18px; font-weight: 900; }
.empty-library-card > div { display: grid; flex: 1; gap: 3px; min-width: 0; }
.empty-library-card strong { color: var(--navy); font-size: 12px; }
.empty-library-card small { color: var(--muted); font-size: 10px; line-height: 1.45; }

.timer-card { background: linear-gradient(145deg, #fff, #f7f9ff); }
.timer-card-status { display: flex; align-items: center; gap: 7px; }
.timer-live-dot { color: #cbd4df; font-size: 10px; }
.timer-live-dot.is-running { color: var(--coral); animation: pulse 1.3s infinite; }
.timer-day-total { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 15px; padding: 9px 11px; border: 1px solid #e7ecf2; border-radius: 10px; background: #fbfcff; }
.timer-day-total > div { display: grid; gap: 2px; }
.timer-day-total span { color: var(--muted); font-size: 9px; }
.timer-day-total strong { color: var(--navy); font-size: 18px; font-variant-numeric: tabular-nums; }
.timer-day-total strong b { margin-left: 2px; color: var(--coral-dark); font-size: 10px; }
.timer-day-total > small { color: var(--muted-2); font-size: 8px; text-align: right; }
.focus-badge { padding: 5px 7px; border-radius: 6px; color: #365d9c; background: #e8efff; font-size: 8px; font-weight: 900; animation: focus-badge-pulse 2s ease-in-out infinite; }
.focus-badge[hidden] { display: none; }
@keyframes focus-badge-pulse { 50% { box-shadow: 0 0 0 4px rgba(105,146,223,.09); } }
@keyframes pulse { 50% { opacity: .35; } }
.timer-plan-context { display: flex; align-items: center; gap: 9px; margin-bottom: 15px; padding: 9px 10px; border: 1px solid #e1e8f1; border-radius: 11px; background: linear-gradient(105deg, #f8fbff, #fff); }
.timer-plan-icon { display: grid; width: 27px; height: 27px; flex: 0 0 auto; place-items: center; border-radius: 8px; color: var(--navy); background: #e5efff; font-size: 13px; font-weight: 900; }
.timer-plan-copy { display: grid; flex: 1; min-width: 0; gap: 1px; }
.timer-plan-copy .section-kicker { margin-bottom: 0; color: #7390bb; font-size: 7px; }
.timer-plan-copy strong { overflow: hidden; color: var(--navy); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.timer-plan-copy small { overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.timer-plan-context .button { flex: 0 0 auto; }
.timer-tabs { display: flex; gap: 4px; margin-top: 17px; padding: 4px; border-radius: 10px; background: #eff3f8; }
.timer-tab { flex: 1; min-height: 30px; border: 0; border-radius: 7px; color: var(--muted); background: transparent; font-size: 10px; font-weight: 900; }
.timer-tab.is-active { color: var(--navy); background: #fff; box-shadow: 0 2px 5px rgba(30,54,88,.08); }
.timer-tab:disabled { cursor: not-allowed; opacity: .55; }
.timer-display { margin: 19px 0 9px; color: var(--navy); text-align: center; font-size: 45px; font-weight: 900; letter-spacing: -.08em; font-variant-numeric: tabular-nums; }
.timer-display.timer-display-large { margin-top: 35px; font-size: clamp(66px, 10vw, 104px); }
.timer-status { color: var(--muted); text-align: center; font-size: 10px; }
.timer-status strong { color: var(--coral-dark); }
.timer-actions { display: flex; gap: 7px; margin-top: 18px; }
.timer-actions .button { flex: 1; }
.timer-note { margin-top: 11px; color: var(--muted-2); text-align: center; font-size: 9px; line-height: 1.5; }
.timer-reset { display: block; margin: 10px auto 0; padding: 4px 7px; border: 0; color: var(--muted-2); background: transparent; font-size: 9px; }
.timer-reset:hover { color: var(--coral-dark); }
.timer-result { display: flex; align-items: center; gap: 8px; margin-top: 13px; padding: 9px 10px; border: 1px solid #f0dfad; border-radius: 10px; background: #fffaf0; animation: timer-result-in .4s ease-out both; }
.timer-result-icon { display: grid; width: 22px; height: 22px; flex: 0 0 auto; place-items: center; border-radius: 7px; color: #fff; background: var(--gold); font-size: 11px; }
.timer-result > div { display: grid; flex: 1; min-width: 0; gap: 2px; }
.timer-result strong { overflow: hidden; color: var(--gold-dark); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.timer-result small { overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.timer-result-link { flex: 0 0 auto; padding: 4px 0; border: 0; color: var(--coral-dark); background: transparent; font-size: 8px; font-weight: 900; white-space: nowrap; }
.timer-result-link:hover { text-decoration: underline; }
@keyframes timer-result-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
body.focus-mode .home-side-column > .joy-card,
body.focus-mode .home-side-column > .quest-card,
body.focus-mode .home-side-column > .rule-card { opacity: .48; transition: opacity .35s ease; }
body.focus-mode .mountain-hero { box-shadow: 0 18px 42px rgba(31,55,91,.18), 0 0 0 3px rgba(105,146,223,.14); }
.joy-card { background: #fffdf7; }
.joy-card-top { display: flex; align-items: center; gap: 10px; }
.joy-icon { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 12px; color: var(--gold-dark); background: #fff1c6; font-size: 20px; }
.joy-card p { margin-top: 14px; color: #68758a; font-size: 11px; line-height: 1.7; }
.joy-result { display: flex; align-items: center; gap: 7px; margin-top: 12px; padding: 8px 9px; border: 1px solid #f0dfad; border-radius: 8px; color: var(--gold-dark); background: #fff8df; animation: joy-result-in .45s ease-out both; }
.joy-result[hidden] { display: none; }
.joy-result-spark { display: grid; width: 18px; height: 18px; place-items: center; border-radius: 6px; color: #fff; background: var(--gold); font-size: 10px; }
.joy-result-copy { display: grid; gap: 2px; min-width: 0; }
.joy-result strong { overflow: hidden; color: var(--gold-dark); font-size: 9px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.joy-result small { overflow: hidden; color: #9a7d35; font-size: 8px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.joy-companion-reward { display: grid; flex: 0 0 auto; gap: 2px; margin-left: 2px; padding-left: 7px; border-left: 1px solid #efdca2; }
.joy-companion-reward[hidden] { display: none; }
.joy-companion-reward-kicker { color: var(--coral-dark); font-size: 6px; font-weight: 900; letter-spacing: .1em; white-space: nowrap; }
.joy-companion-reward-list { display: flex; align-items: center; gap: 4px; }
.joy-companion-reward-list > span { display: inline-flex; align-items: center; gap: 2px; color: var(--navy); font-size: 8px; font-weight: 900; }
.joy-companion-reward-list img { width: 24px; height: 24px; object-fit: contain; }
.joy-result-action { flex: 0 0 auto; margin-left: auto; padding: 4px 0 4px 5px; border: 0; color: var(--coral-dark); background: transparent; font-size: 8px; font-weight: 900; white-space: nowrap; }
.joy-result-action:hover { text-decoration: underline; }
@keyframes joy-result-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.joy-meter { display: flex; justify-content: space-between; margin-top: 16px; padding-top: 11px; border-top: 1px solid #f2ead2; color: var(--muted); font-size: 9px; }
.joy-meter strong { color: var(--gold-dark); font-size: 11px; }
.quest-card { background: linear-gradient(145deg, #fbfbff, #fff); }
.quest-header-badges { display: flex; align-items: center; gap: 5px; }
.quest-summary { min-width: 36px; padding: 6px 8px; border-radius: 7px; color: var(--purple); background: #efedff; text-align: center; font-size: 10px; font-weight: 900; }
.quest-reward-total { padding: 6px 7px; border-radius: 7px; color: var(--gold-dark); background: #fff4cf; font-size: 9px; font-weight: 900; }
.quest-list { display: grid; gap: 12px; margin-top: 17px; }
.quest-item { display: flex; align-items: center; gap: 9px; }
.quest-icon { display: grid; width: 26px; height: 26px; flex: 0 0 auto; place-items: center; border-radius: 8px; color: var(--purple); background: #efedff; font-size: 13px; font-weight: 900; }
.quest-copy { display: grid; flex: 1; gap: 6px; min-width: 0; }
.quest-copy strong { overflow: hidden; color: var(--navy); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.quest-progress { height: 5px; overflow: hidden; border-radius: 99px; background: #edf0f5; }
.quest-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--purple), #a49ae9); transition: width .35s ease; }
.quest-reward { flex: 0 0 auto; color: var(--gold-dark); font-size: 8px; font-weight: 900; }
.quest-count { flex: 0 0 auto; color: var(--muted); font-size: 9px; font-weight: 900; }
.quest-item.is-done .quest-icon { color: #fff; background: var(--teal); }
.quest-item.is-done .quest-progress span { background: var(--teal); }
.quest-item.is-done .quest-count { color: var(--teal); }
.weekly-quest { margin-top: 17px; padding: 11px 12px; border: 1px solid #e7e1f7; border-radius: 11px; background: linear-gradient(105deg, #faf9ff, #fff); }
.weekly-quest.is-complete { border-color: #bce5dc; background: #f4fcf9; }
.weekly-quest-top { display: flex; align-items: center; justify-content: space-between; gap: 9px; }
.weekly-quest-top > div { display: grid; min-width: 0; gap: 3px; }
.weekly-quest-kicker { color: var(--purple); font-size: 8px; font-weight: 900; letter-spacing: .1em; }
.weekly-quest-top strong { color: var(--navy); font-size: 10px; }
.weekly-quest-badge { flex: 0 0 auto; padding: 5px 7px; border-radius: 6px; color: var(--purple); background: #efedff; font-size: 8px; font-weight: 900; }
.weekly-quest.is-complete .weekly-quest-kicker, .weekly-quest.is-complete .weekly-quest-badge { color: #368979; }
.weekly-quest.is-complete .weekly-quest-badge { background: #ddf5ed; }
.weekly-quest-progress { height: 5px; margin-top: 9px; overflow: hidden; border-radius: 99px; background: #ebe8f6; }
.weekly-quest-progress span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--purple), #a49ae9); transition: width .35s ease; }
.weekly-quest.is-complete .weekly-quest-progress span { background: var(--teal); }
.weekly-quest small { display: block; margin-top: 6px; overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.quest-note { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 10px; padding: 8px 9px; border-radius: 8px; color: var(--muted); background: #f8fafc; font-size: 9px; line-height: 1.5; }
.quest-note-copy { min-width: 0; flex: 1 1 180px; }
.quest-note-action { flex: 0 0 auto; padding: 4px 0 4px 5px; border: 0; color: var(--coral-dark); background: transparent; font-size: 8px; font-weight: 900; white-space: nowrap; }
.quest-note-action:hover { text-decoration: underline; }
.rule-card { background: #f8fbfb; }
.rule-badge { color: #3c8a79; background: #e4f7f1; }
.rule-row { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid #e7efed; }
.rule-row:last-of-type { border-bottom: 0; }
.rule-icon { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 9px; font-size: 13px; font-weight: 900; }
.rule-icon-page { color: var(--purple); background: #efedff; }
.rule-icon-time { color: var(--coral-dark); background: #ffebe6; }
.rule-row > div { display: grid; flex: 1; gap: 3px; }
.rule-row strong { color: var(--navy); font-size: 10px; }
.rule-row small { color: var(--muted); font-size: 9px; }
.rule-row em { color: var(--teal); font-size: 9px; font-style: normal; font-weight: 900; }
.rule-card > p { margin-top: 12px; color: var(--muted); font-size: 9px; line-height: 1.5; }

.subpage-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 23px; }
.subpage-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex: 0 0 auto; }
#view-chests > .subpage-heading .subpage-actions { display: none; }
.subpage-heading h2 { margin-bottom: 8px; font-size: 31px; }
.subpage-heading p { color: var(--muted); font-size: 13px; }
.settings-companion-shortcut { white-space: nowrap; }
.chest-page-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr); gap: 20px; max-width: 1050px; }
.chest-corner-main { padding: 0; overflow: hidden; }
.chest-inventory-card { align-self: start; padding: 22px; overflow: hidden; }
.chest-corner-main { border-color: #eadfbe; background: #fff; }
.chest-corner-main.has-chests { border-color: #efc763; box-shadow: 0 15px 34px rgba(218, 165, 57, .13); }
.chest-page-stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 190px; min-height: 245px; overflow: hidden; padding: 27px 25px 24px; color: #fff; background: linear-gradient(135deg, #203957 0%, #2f6375 54%, #b77c55 100%); }
.chest-page-stage::before { position: absolute; inset: 0; content: ""; opacity: .58; background: radial-gradient(circle at 15% 24%, rgba(255,255,255,.72) 0 1px, transparent 2px), radial-gradient(circle at 72% 20%, rgba(255,228,135,.9) 0 1px, transparent 2px), radial-gradient(circle at 88% 68%, rgba(255,255,255,.55) 0 1px, transparent 2px), radial-gradient(circle at 49% 80%, rgba(255,228,135,.68) 0 1px, transparent 2px); background-size: 83px 71px, 107px 91px, 131px 113px, 97px 89px; }
.chest-page-stage::after { position: absolute; right: -90px; bottom: -120px; width: 320px; height: 230px; border-radius: 50%; content: ""; opacity: .22; background: #f5d278; filter: blur(5px); }
.chest-page-stage-copy, .chest-page-stage-art { position: relative; z-index: 1; }
.chest-page-stage-copy { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; justify-content: center; }
.chest-page-stage .section-kicker { margin-bottom: 8px; color: #f8d878; }
.chest-page-stage h3 { max-width: 360px; color: #fff; font-size: 25px; line-height: 1.25; }
.chest-page-stage p { max-width: 380px; margin-top: 9px; color: #d5e4ed; font-size: 11px; line-height: 1.55; }
.chest-page-actions { display: flex; gap: 8px; margin-top: 20px; }
.chest-page-actions .button { min-height: 40px; }
.chest-page-wait { display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; border: 1px dashed rgba(255,255,255,.42); border-radius: 9px; color: #ffe49a; background: rgba(255,255,255,.08); font-size: 10px; font-weight: 900; }
.button-stage-ghost { color: #fff; border-color: rgba(255,255,255,.38); background: rgba(255,255,255,.1); }
.button-stage-ghost:hover { background: rgba(255,255,255,.18); }
.chest-page-stage-art { display: grid; align-content: center; justify-items: center; gap: 5px; }
.chest-page-stage-art > span { color: #ffe49a; font-size: 9px; font-weight: 900; letter-spacing: .08em; }
.chest-page-stage-art .chest-art { width: 170px; height: 155px; filter: drop-shadow(0 18px 12px rgba(9, 25, 45, .3)); animation: chest-idle 3.6s ease-in-out infinite; }
.chest-page-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 25px; border-bottom: 1px solid #f0e6cf; }
.chest-page-stats > div { display: grid; gap: 4px; padding: 15px 12px; border-left: 1px solid #f0e6cf; }
.chest-page-stats > div:first-child { padding-left: 0; border-left: 0; }
.chest-page-stats small { color: var(--muted); font-size: 9px; font-weight: 800; }
.chest-page-stats strong { color: var(--navy); font-size: 17px; }
.chest-page-progress, .chest-drop-table { margin-right: 25px; margin-left: 25px; }
.chest-page-progress { display: grid; gap: 7px; margin-top: 19px; padding-top: 0; }
.chest-page-progress > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 10px; font-weight: 800; }
.chest-page-progress > div:first-child strong { color: var(--gold-dark); font-size: 12px; }
.chest-page-progress small { color: var(--muted-2); font-size: 9px; }
.chest-drop-table { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 20px; margin-bottom: 25px; padding: 13px; border: 1px dashed #e5d4a7; border-radius: 11px; background: rgba(255,255,255,.62); }
.chest-drop-table strong { grid-column: 1 / -1; color: var(--gold-dark); font-size: 10px; }
.chest-drop-table span { display: flex; align-items: center; justify-content: space-between; gap: 7px; padding: 7px 8px; border-radius: 7px; color: var(--muted); background: #fffdf8; font-size: 9px; }
.chest-drop-table b { color: var(--navy); }
.chest-pending-list { display: grid; gap: 0; margin-top: 8px; }
.chest-pending-item { display: flex; align-items: center; gap: 9px; padding: 9px 0; border-top: 1px solid #edf1f4; }
.chest-pending-item:first-child { border-top: 0; }
.chest-pending-item > div { display: grid; min-width: 0; gap: 2px; }
.chest-pending-item strong { color: var(--navy); font-size: 10px; }
.chest-pending-item small { color: var(--muted); font-size: 8px; }
.chest-pending-icon { display: grid; width: 38px; height: 38px; flex: 0 0 auto; place-items: center; border-radius: 10px; background: #fff0c4; }
.chest-pending-icon img { display: block; width: 35px; height: 35px; object-fit: contain; }
.chest-empty-state { display: flex; align-items: center; gap: 11px; margin-top: 12px; padding: 14px 11px; border: 1px dashed #e7d9b5; border-radius: 11px; background: #fffaf0; }
.chest-empty-state img { display: block; width: 62px; height: 62px; object-fit: contain; }
.chest-empty-state div { display: grid; gap: 4px; min-width: 0; }
.chest-empty-state strong { color: var(--navy); font-size: 11px; }
.chest-empty-state small { color: var(--muted); font-size: 9px; line-height: 1.45; }
.chest-history-section { margin-top: 20px; }
.companion-corner-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 15px 0 16px; padding: 11px; border: 1px solid #eadfbe; border-radius: 10px; background: linear-gradient(110deg, #fffaf0, #fff); }
.companion-corner-link > div { display: grid; min-width: 0; gap: 1px; }
.companion-corner-link .section-kicker { margin: 0; color: var(--gold-dark); font-size: 7px; }
.companion-corner-link strong { color: var(--navy); font-size: 10px; }
.companion-corner-link small { overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.companion-corner-link .button { flex: 0 0 auto; white-space: nowrap; }
.library-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 11px; margin-bottom: 20px; }
.library-summary > div { display: grid; gap: 6px; padding: 15px 17px; border: 1px solid var(--line); border-radius: 13px; background: #fff; box-shadow: var(--shadow); }
.library-summary > div > span { color: var(--muted); font-size: 12px; }
.library-summary strong { display: flex; align-items: baseline; gap: 2px; color: var(--navy); font-size: 31px; line-height: 1.05; letter-spacing: -.05em; }
.library-summary strong span { color: inherit; font-size: inherit; line-height: inherit; }
.positive-text { color: var(--teal) !important; }
.rhythm-card { margin-bottom: 20px; padding: 20px 22px 16px; }
.plan-note { margin-top: 10px; color: var(--muted); font-size: 11px; line-height: 1.55; }
.plan-insight { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(170px, 1.45fr); gap: 1px; margin-top: 15px; overflow: hidden; border: 1px solid #e8edf2; border-radius: 11px; background: #e8edf2; }
.plan-insight > div { display: grid; align-content: center; gap: 4px; min-width: 0; padding: 10px 11px; background: #fbfcfd; }
.plan-insight small { color: var(--muted); font-size: 8px; }
.plan-insight strong { overflow: hidden; color: var(--navy); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.plan-insight-progress { min-width: 0; }
.plan-insight-progress .progress-track { height: 6px; margin-top: 2px; }
.plan-insight-progress .progress-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--teal), var(--coral)); transition: width .35s ease; }
.plan-insight-progress small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-breakdown { margin-top: 13px; padding-top: 12px; border-top: 1px solid #edf0f4; }
.plan-breakdown-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--navy); font-size: 10px; font-weight: 900; }
.plan-breakdown-heading small { color: var(--muted-2); font-size: 8px; font-weight: 800; }
.plan-breakdown-list { display: grid; gap: 7px; margin-top: 8px; }
.plan-breakdown-item { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 7px 8px; border: 1px solid #edf0f4; border-radius: 9px; background: #fbfcfd; }
.plan-breakdown-color { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; }
.plan-breakdown-copy { display: grid; flex: 1; min-width: 0; gap: 1px; }
.plan-breakdown-copy strong { overflow: hidden; color: var(--navy); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.plan-breakdown-copy small { overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.plan-breakdown-status { flex: 0 0 auto; color: var(--muted-2); font-size: 8px; font-weight: 900; white-space: nowrap; }
.plan-breakdown-status.is-next { color: var(--coral-dark); }
.plan-breakdown-action { flex: 0 0 auto; padding: 4px 6px; border: 1px solid #dfe6ee; border-radius: 6px; color: var(--coral-dark); background: #fff; font-size: 8px; font-weight: 900; }
.plan-breakdown-action:hover { background: #fff4f1; }
.plan-breakdown-empty { padding: 9px 10px; border-radius: 9px; color: var(--muted); background: #f8fafc; font-size: 9px; }
.history-range-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 15px; }
.history-range { display: flex; align-items: center; gap: 4px; }
.history-range > span { margin-right: 4px; color: var(--muted); font-size: 10px; font-weight: 800; }
.history-range button { min-height: 29px; padding: 0 9px; border: 1px solid #dfe6ee; border-radius: 7px; color: var(--muted); background: #fff; font-size: 10px; font-weight: 900; }
.history-range button:hover { color: var(--navy); background: #f4f7fb; }
.history-range button.is-selected { border-color: var(--purple); color: #fff; background: var(--purple); }
.history-legend { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 9px; }
.history-legend-dot { display: inline-block; width: 7px; height: 7px; margin-right: 3px; border-radius: 50%; }
.history-legend-dot.is-plan { border: 1px dashed var(--purple); background: transparent; }
.history-legend-dot.is-actual { background: var(--coral); }
.history-chart { display: grid; grid-template-columns: repeat(var(--history-days, 7), minmax(0, 1fr)); align-items: end; gap: 10px; width: 100%; min-width: 0; height: 144px; margin-top: 13px; padding: 0 3px; overflow-x: hidden; border-bottom: 1px solid #e9eef3; }
.history-chart.is-wide { grid-template-columns: repeat(var(--history-days, 30), minmax(24px, 1fr)); overflow-x: auto; }
.history-chart-hint { display: block; margin-top: 5px; color: var(--muted-2); font-size: 8px; line-height: 1.35; text-align: right; }
.history-chart-hint[hidden] { display: none; }
.history-day { display: grid; grid-template-rows: 18px 1fr 20px; align-items: end; height: 100%; min-width: 0; text-align: center; }
.history-value { overflow: hidden; color: var(--muted-2); font-size: 9px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.history-bar-track { position: relative; display: flex; align-items: end; justify-content: center; height: 100%; }
.history-plan-marker { position: absolute; right: 10%; left: 10%; z-index: 1; height: 1px; border-top: 1px dashed rgba(129,117,217,.7); }
.history-bar-track span { display: block; width: min(24px, 70%); min-height: 3px; border-radius: 7px 7px 0 0; background: #c8d5e4; transition: height .35s ease; }
.history-plan-bar { background: repeating-linear-gradient(135deg, #c8c1ef 0 3px, #eceafd 3px 6px) !important; opacity: .9; }
.history-day.is-future .history-value, .history-day.is-future small { color: var(--purple); }
.history-day.is-future small { font-weight: 800; }
.history-day.is-today .history-bar-track span { background: linear-gradient(180deg, var(--coral), #f4b164); box-shadow: 0 5px 12px rgba(236,118,92,.18); }
.history-day.is-today .history-value, .history-day.is-today small { color: var(--coral-dark); font-weight: 900; }
.history-day small { color: var(--muted); font-size: 9px; }
.progress-forecast { margin-top: 17px; padding: 13px 14px 11px; overflow: hidden; border: 1px solid #e5ebf1; border-radius: 12px; background: linear-gradient(135deg, #fff 0%, #fbfcff 100%); }
.progress-forecast[hidden] { display: none; }
.forecast-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; }
.forecast-heading h3 { margin-top: 3px; color: var(--navy); font-size: 15px; }
.forecast-material-picker { display: grid; flex: 0 1 270px; gap: 4px; color: var(--muted); font-size: 8px; font-weight: 900; }
.forecast-material-picker select { width: 100%; min-width: 0; height: 31px; padding: 0 8px; border: 1px solid #dfe6ee; border-radius: 7px; color: var(--navy); background: #fff; font-size: 10px; font-weight: 800; }
.forecast-summary { display: flex; align-items: baseline; flex-wrap: wrap; gap: 7px 12px; margin-top: 11px; }
.forecast-summary strong { color: var(--coral-dark); font-size: 13px; }
.forecast-summary span { color: var(--muted); font-size: 9px; line-height: 1.45; }
.forecast-chart { width: 100%; margin-top: 7px; overflow-x: auto; overscroll-behavior-x: contain; }
.forecast-chart svg { display: block; width: 100%; min-width: 520px; height: auto; }
.forecast-grid-line { stroke: #e9eef3; stroke-width: 1; }
.forecast-axis-label { fill: var(--muted-2); font-size: 9px; font-weight: 800; }
.forecast-date-label { fill: var(--muted); font-size: 9px; font-weight: 800; }
.forecast-date-label.is-today { fill: var(--coral-dark); font-weight: 900; }
.forecast-today-line { stroke: rgba(236,118,92,.5); stroke-dasharray: 2 4; stroke-width: 1; }
.forecast-plan-line { fill: none; stroke: var(--purple); stroke-dasharray: 6 5; stroke-linecap: round; stroke-width: 2.5; }
.forecast-actual-line { fill: none; stroke: var(--coral); stroke-linecap: round; stroke-linejoin: round; stroke-width: 3; }
.forecast-plan-dot { fill: #fff; stroke: var(--purple); stroke-width: 2; }
.forecast-actual-dot { fill: var(--coral); stroke: #fff; stroke-width: 2; }
.forecast-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 13px; margin-top: 2px; color: var(--muted); font-size: 9px; }
.forecast-legend-line { display: inline-block; width: 18px; height: 0; margin-right: 4px; vertical-align: middle; border-top: 2px solid var(--coral); }
.forecast-legend-line.is-plan { border-top: 2px dashed var(--purple); }
.forecast-legend small { color: var(--muted-2); font-size: 8px; }
.rhythm-footer { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; color: var(--muted); font-size: 9px; }
.rhythm-footer strong { margin-left: 3px; color: var(--navy); font-size: 10px; }
.library-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.material-filter-tools { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(135px, .75fr)); gap: 8px; margin: 17px 0 14px; padding: 10px; border: 1px solid #e5ebf1; border-radius: 11px; background: #fbfcfe; }
.material-filter-tools label { display: grid; min-width: 0; gap: 5px; color: var(--muted); font-size: 8px; font-weight: 900; }
.material-filter-tools input, .material-filter-tools select { width: 100%; height: 32px; min-width: 0; padding: 0 8px; border: 1px solid #dfe6ee; border-radius: 7px; color: var(--navy); background: #fff; font-size: 10px; }
.material-filter-tools input::placeholder { color: var(--muted-2); }
.material-filter-tools[hidden] { display: none; }
.library-card { padding: 20px; }
.library-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.material-title-line { display: flex; align-items: center; gap: 7px; }
.library-card h3 { margin: 6px 0 5px; font-size: 17px; }
.library-card p { color: var(--muted); font-size: 11px; }
.library-card .material-color { display: inline-block; width: 11px; height: 11px; }
.library-card .progress-track { height: 8px; margin: 20px 0 9px; }
.library-card-meta { display: flex; justify-content: space-between; color: var(--muted); font-size: 11px; }
.library-card-meta strong { color: var(--navy); }
.library-card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 17px; padding-top: 13px; border-top: 1px solid #eef1f5; }
.library-card-footer span { display: grid; min-width: 0; gap: 4px; color: var(--coral-dark); font-size: 9px; font-weight: 900; }
.library-card-pace { color: var(--navy); font-size: 11px; line-height: 1.3; }
.library-card-footer small { color: var(--muted-2); font-size: 9px; font-weight: 700; }
.library-actions { display: flex; align-items: center; justify-content: flex-end; gap: 7px; }
.link-button { min-height: 31px; padding: 0 9px; border: 1px solid #dfe6ee; border-radius: 7px; color: var(--muted); background: #fff; font-size: 11px; font-weight: 900; }
.link-button:hover { color: var(--navy); background: #f4f7fb; }
.link-button-edit { color: var(--navy-2); }
.link-button-danger { color: var(--coral-dark); border-color: #f1d8d1; background: #fffaf8; }
.link-button-danger:hover { color: var(--coral-dark); border-color: #efb7aa; background: #fff0ed; }
.library-card-badges { display: flex; align-items: center; gap: 5px; }
.priority-chip { min-height: 21px; padding: 0 7px; border: 1px solid transparent; border-radius: 6px; font-size: 8px; font-weight: 900; }
.priority-chip.priority-1 { color: var(--coral-dark); border-color: #ffd4cb; background: #fff0ed; }
.priority-chip.priority-2 { color: var(--purple); border-color: #dedafb; background: #f3f1ff; }
.priority-chip.priority-3 { color: var(--muted); border-color: #e1e6ed; background: #f5f7fa; }
.priority-chip:hover { transform: translateY(-1px); filter: brightness(.98); }
.material-complete { color: var(--teal) !important; }
.label-chip { display: inline-flex; align-items: center; min-height: 21px; padding: 0 8px; border-radius: 6px; color: var(--muted); background: #f1f4f8; font-size: 9px; font-weight: 900; }
.label-chip-coral { color: var(--coral-dark); background: #fff0ed; }

.timer-view-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(285px, .75fr); gap: 20px; }
.timer-large-card { min-height: 450px; display: grid; place-items: center; }
.timer-large-card > div { width: min(100%, 530px); }
.timer-guide-card { background: linear-gradient(145deg, #263e62, #385c7f); }
.timer-guide-card h3 { margin-top: 18px; color: #fff; font-size: 23px; line-height: 1.45; }
.timer-guide-card .section-kicker { color: #a9c1d8; }
.timer-guide-rule { display: flex; align-items: center; gap: 8px; margin: 31px 0 24px; color: #f6d480; font-weight: 900; }
.timer-guide-rule span { padding: 8px 10px; border-radius: 8px; color: #fff; background: rgba(255,255,255,.11); font-size: 12px; }
.timer-guide-rule strong { color: #b6c8db; }
.timer-guide-rule b { font-size: 17px; }
.timer-guide-card > p { color: #c1d1e1; font-size: 11px; line-height: 1.8; }
.timer-tip { display: grid; gap: 6px; margin-top: 30px; padding: 14px; border-radius: 11px; background: rgba(255,255,255,.1); }
.timer-tip span { color: #9fb6ce; font-size: 9px; font-weight: 900; }
.timer-tip strong { color: #fff; font-size: 11px; line-height: 1.5; }

.settings-card { max-width: 720px; padding: 4px 22px; }
.companion-card { max-width: 720px; margin-top: 14px; padding: 22px; }
.companion-card-lead { margin: -4px 0 15px; color: var(--muted); font-size: 11px; line-height: 1.6; }
.companion-treasure { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-bottom: 15px; overflow: hidden; border: 1px solid #e9edf2; border-radius: 10px; background: #e9edf2; }
.companion-treasure > div { display: grid; gap: 4px; padding: 10px 12px; background: #fbfcfd; }
.companion-treasure span { color: var(--muted); font-size: 9px; font-weight: 800; }
.companion-treasure strong { color: var(--navy); font-size: 14px; }
.companion-treasure small { grid-column: 1 / -1; padding: 8px 11px; color: var(--muted); background: #f7f9fb; font-size: 9px; line-height: 1.4; }
.companion-chest-progress { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; margin: -7px 0 15px; color: var(--muted); }
.companion-chest-progress > span { font-size: 8px; font-weight: 900; white-space: nowrap; }
.companion-chest-progress > strong { color: var(--gold-dark); font-size: 9px; }
.companion-chest-progress-track { height: 6px; overflow: hidden; border-radius: 99px; background: #edf1f3; }
.companion-chest-progress-track i { display: block; height: 100%; min-width: 0; border-radius: inherit; background: linear-gradient(90deg, #f2c866, #ec765c); transition: width .35s ease; }
.companion-chest-corner { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 9px; margin: -3px 0 15px; padding: 9px 10px; border: 1px solid #eadfbe; border-radius: 11px; background: linear-gradient(110deg, #fffaf0, #fff); }
.companion-chest-corner.has-chests { border-color: #efc763; box-shadow: 0 8px 18px rgba(218, 165, 57, .13); }
.companion-chest-corner-copy { display: grid; min-width: 0; gap: 1px; }
.companion-chest-corner-copy .section-kicker { margin: 0; color: var(--gold-dark); font-size: 7px; }
.companion-chest-corner-copy strong { color: var(--navy); font-size: 11px; }
.companion-chest-corner-copy small { overflow: hidden; color: var(--muted); font-size: 8px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.companion-chest-corner .button { white-space: nowrap; }
.companion-chest-rule { display: grid; gap: 3px; margin: -3px 0 15px; padding: 9px 11px; border: 1px dashed #e5d4a7; border-radius: 9px; background: #fffaf0; }
.companion-chest-rule strong { color: var(--gold-dark); font-size: 9px; }
.companion-chest-rule small { color: var(--muted); font-size: 8px; line-height: 1.45; }
.companion-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.companion-option { position: relative; display: grid; min-width: 0; gap: 7px; padding: 9px; border: 1px solid #e1e7ef; border-radius: 12px; color: var(--navy); background: #fff; text-align: left; transition: border-color .2s, box-shadow .2s, transform .2s, opacity .2s; }
.companion-option:hover:not(:disabled) { border-color: var(--teal); box-shadow: 0 6px 15px rgba(45,108,109,.12); transform: translateY(-2px); }
.companion-option.is-selected { border-color: var(--teal); box-shadow: inset 0 0 0 2px rgba(75,180,158,.14), 0 6px 15px rgba(45,108,109,.1); }
.companion-option.is-locked { cursor: not-allowed; opacity: .58; filter: saturate(.6); }
.companion-option:disabled { cursor: not-allowed; }
.companion-option-image { display: grid; height: 94px; place-items: end center; overflow: hidden; border-radius: 8px; background: linear-gradient(145deg, #f3f7fb, #e8f1f1); }
.companion-option-image img { width: 100%; height: 100%; object-fit: contain; }
.companion-option-copy { display: grid; min-width: 0; gap: 2px; }
.companion-option-copy strong { font-size: 12px; }
.companion-option-copy small { min-height: 24px; color: var(--muted); font-size: 8px; line-height: 1.35; }
.companion-option-copy em { color: var(--teal-dark); font-size: 8px; font-style: normal; font-weight: 900; }
.companion-option.is-locked .companion-option-copy em { color: var(--muted); }
.companion-chest-log { margin-top: 16px; padding-top: 13px; border-top: 1px solid #edf1f4; }
.chest-inventory-note { margin: -2px 0 8px; color: var(--muted); font-size: 8px; line-height: 1.45; }
.companion-chest-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 5px; }
.companion-chest-heading strong { color: var(--navy); font-size: 10px; }
.companion-chest-heading span { color: var(--muted-2); font-size: 8px; font-weight: 800; }
.companion-chest-item { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-top: 1px solid #f0f3f6; }
.companion-chest-item:first-of-type { border-top: 0; }
.companion-chest-icon { display: grid; width: 24px; height: 24px; flex: 0 0 auto; place-items: center; border-radius: 7px; color: var(--gold-dark); background: #fff0c4; font-size: 11px; }
.companion-chest-item div { display: grid; min-width: 0; gap: 2px; }
.companion-chest-item strong { color: var(--navy); font-size: 9px; }
.companion-chest-item small, .companion-chest-empty { color: var(--muted); font-size: 8px; line-height: 1.45; }
.companion-chest-icon img { display: block; width: 24px; height: 24px; object-fit: contain; }
.companion-chest-empty { margin: 0; }
.summit-journal { margin-top: 16px; padding: 14px; border: 1px solid #e7edf2; border-radius: 12px; background: #fbfcfd; }
.summit-journal .camp-album-heading { margin-top: 0; }
.summit-journal-item { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid #edf1f4; }
.summit-journal-item:first-child { border-top: 0; }
.summit-journal-icon { display: grid; width: 28px; height: 28px; flex: 0 0 auto; place-items: center; border-radius: 9px; color: #a87917; background: #fff2bf; font-size: 13px; }
.summit-journal-item div { display: grid; min-width: 0; gap: 3px; }
.summit-journal-item strong { overflow: hidden; color: var(--navy); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.summit-journal-item small, .summit-journal-empty { color: var(--muted); font-size: 9px; line-height: 1.5; }
.summit-journal-empty { margin: 0; }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 19px 0; border-bottom: 1px solid #eef1f5; }
.setting-row:last-child { border-bottom: 0; }
.setting-row > div { display: grid; gap: 5px; }
.setting-row strong { color: var(--navy); font-size: 12px; }
.setting-row span { color: var(--muted); font-size: 11px; line-height: 1.45; }
.setting-row-goal { align-items: flex-start; }
.setting-row-objective { align-items: flex-start; }
.setting-row-objective > div { flex: 1; min-width: 0; }
.setting-row-objective > div span { overflow-wrap: anywhere; }
.setting-row-backup { align-items: flex-start; }
.setting-row-backup > div:first-child { flex: 1; min-width: 0; }
.backup-actions { display: flex !important; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.backup-actions .button { white-space: nowrap; }
.goal-options { display: flex !important; gap: 5px; flex: 0 0 auto; }
.goal-options button { display: grid; min-width: 68px; min-height: 40px; padding: 5px 8px; border: 1px solid #dfe6ee; border-radius: 8px; color: var(--muted); background: #fff; font-size: 10px; font-weight: 900; }
.goal-options button strong { color: inherit; font-size: 10px; line-height: 1.1; }
.goal-options button small { color: inherit; font-size: 8px; font-weight: 700; line-height: 1.1; white-space: nowrap; }
.goal-options button:hover { color: var(--navy); background: #f4f7fb; }
.goal-options button.is-selected { border-color: var(--teal); color: #fff; background: var(--teal); box-shadow: 0 4px 10px rgba(75,180,158,.2); }
.setting-row-rest { align-items: flex-start; }
.setting-row-freeze { align-items: flex-start; }
.setting-row-freeze > div { flex: 1; min-width: 0; }
.setting-freeze-chip { align-self: flex-start; color: var(--gold-dark); background: #fff7dc; white-space: nowrap; }
.setting-freeze-chip.is-empty { color: var(--muted); background: #f1f4f8; }
.freeze-actions { display: flex !important; align-items: center; gap: 8px; flex: 0 0 auto; }
.setting-freeze-buy { white-space: nowrap; }
.setting-freeze-buy:disabled { cursor: not-allowed; opacity: .52; }
.setting-row-date { align-items: center; }
.setting-row-date input { width: 150px; height: 32px; padding: 0 8px; border: 1px solid #dfe6ee; border-radius: 8px; color: var(--navy); background: #fff; font-size: 10px; font-weight: 800; }
.rest-day-options { display: flex !important; flex-wrap: wrap; justify-content: flex-end; gap: 4px; max-width: 235px; }
.rest-day-options button { width: 29px; height: 29px; padding: 0; border: 1px solid #dfe6ee; border-radius: 8px; color: var(--muted); background: #fff; font-size: 10px; font-weight: 900; }
.rest-day-options button:hover { color: var(--navy); background: #f4f7fb; }
.rest-day-options button.is-selected { border-color: var(--purple); color: #fff; background: var(--purple); box-shadow: 0 4px 10px rgba(129,117,217,.2); }
.setting-row-danger strong { color: var(--coral-dark); }
.toggle { position: relative; width: 42px; height: 24px; flex: 0 0 42px; padding: 0; border: 0; border-radius: 20px; background: #dfe5ed; transition: background .2s; }
.toggle span { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(20,30,50,.18); transition: left .2s; }
.toggle.is-on { background: var(--teal); }
.toggle.is-on span { left: 21px; }
.page-footer { display: flex; justify-content: space-between; gap: 20px; max-width: 1320px; margin: 26px auto 0; color: #a0abba; font-size: 9px; }

.modal-backdrop { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; padding: 20px; background: rgba(15, 28, 49, .58); backdrop-filter: blur(5px); }
.modal-backdrop[hidden], .modal[hidden] { display: none; }
.modal { width: min(100%, 470px); max-height: calc(100vh - 40px); overflow: auto; padding: 24px; border-radius: 20px; background: #fff; box-shadow: 0 24px 60px rgba(10,25,50,.25); }
.modal-topline { display: flex; align-items: center; justify-content: space-between; }
.modal-close { width: 30px; height: 30px; border: 0; border-radius: 50%; color: var(--muted); background: #f1f3f6; font-size: 20px; line-height: 1; }
.modal h2 { margin: 20px 0 8px; font-size: 26px; }
.modal-intro { color: var(--muted); font-size: 11px; line-height: 1.65; }
.popular-materials { margin-top: 17px; padding: 12px; border: 1px solid #eee7d5; border-radius: 12px; background: linear-gradient(145deg, #fffaf0, #fffdf9); }
.popular-materials[hidden] { display: none; }
.popular-materials-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.popular-materials-heading > div { display: grid; gap: 2px; min-width: 0; }
.popular-materials-heading .section-kicker { margin: 0; color: var(--gold-dark); font-size: 8px; }
.popular-materials-heading strong { color: var(--navy); font-size: 11px; }
.popular-materials-toggle { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; min-height: 30px; padding: 0 8px; border: 1px solid #eadfbe; border-radius: 8px; color: var(--gold-dark); background: rgba(255,255,255,.78); font-size: 8px; font-weight: 900; }
.popular-materials-toggle:hover { border-color: var(--gold); background: #fff; }
.popular-materials-toggle i { display: inline-block; font-size: 14px; font-style: normal; line-height: 1; transform: translateY(-1px); transition: transform .2s ease; }
.popular-materials.is-open .popular-materials-toggle i { transform: rotate(180deg) translateY(1px); }
.popular-materials-help { margin-top: 6px; color: var(--muted); font-size: 8px; line-height: 1.35; }
.popular-material-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 10px; }
.popular-material-grid[hidden] { display: none; }
.popular-material { display: grid; align-content: start; min-width: 0; min-height: 68px; padding: 9px; border: 1px solid #eadfbe; border-radius: 9px; color: var(--navy); background: rgba(255,255,255,.78); text-align: left; transition: border-color .2s, background .2s, transform .2s, box-shadow .2s; }
.popular-material:hover { border-color: var(--gold); background: #fff; box-shadow: 0 4px 12px rgba(186,134,31,.12); transform: translateY(-1px); }
.popular-material.is-selected { border-color: var(--teal); background: #f3fcf9; box-shadow: 0 0 0 2px rgba(75,180,158,.12); }
.popular-material > span { color: var(--gold-dark); font-size: 8px; font-weight: 900; }
.popular-material strong { display: -webkit-box; margin-top: 2px; overflow: hidden; font-size: 9px; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.popular-material small { margin-top: 4px; color: var(--muted); font-size: 8px; font-weight: 800; }
.onboarding-modal { width: min(100%, 520px); }
.onboarding-step { color: var(--muted-2); font-size: 10px; font-weight: 900; letter-spacing: .08em; }
.onboarding-target { margin: 0; padding: 13px; border: 1px solid #e4eaf1; border-radius: 11px; }
.onboarding-target legend { padding: 0 5px; color: var(--navy); font-size: 11px; font-weight: 900; }
.onboarding-target-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.onboarding-target-options label { position: relative; display: block; cursor: pointer; }
.onboarding-target-options input { position: absolute; opacity: 0; pointer-events: none; }
.onboarding-target-options span { display: grid; gap: 2px; padding: 10px 8px; border: 1px solid #dfe6ee; border-radius: 9px; color: var(--muted); text-align: center; background: #fff; }
.onboarding-target-options strong { color: inherit; font-size: 13px; }
.onboarding-target-options small { font-size: 9px; }
.onboarding-target-options input:checked + span { border-color: var(--teal); color: #fff; background: var(--teal); box-shadow: 0 4px 10px rgba(75,180,158,.18); }
.onboarding-target-options input:focus-visible + span { outline: 3px solid rgba(105,146,223,.3); outline-offset: 2px; }
.mountain-map-modal { width: min(100%, 780px); }
.mountain-map-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-top: 4px; }
.mountain-map-title-row h2 { margin-top: 20px; }
.map-stage-badge { flex: 0 0 auto; margin-top: 23px; padding: 8px 10px; border-radius: 8px; color: var(--coral-dark); background: #fff0ed; font-size: 10px; font-weight: 900; }
.mountain-overview { --map-world-height: 2000%; --map-scroll-px: 0px; --map-zoom: 1; position: relative; height: min(72vh, 540px); min-height: 420px; overflow: hidden; margin-top: 21px; border: 1px solid rgba(117,151,177,.3); border-radius: 17px; background: linear-gradient(180deg, #4a7693 0%, #83acb1 53%, #c3d2bf 100%); box-shadow: inset 0 -30px 50px rgba(31,71,74,.16); }
.mountain-overview::before { position: absolute; inset: 0; z-index: 0; content: ""; pointer-events: none; background: radial-gradient(circle at 78% 13%, rgba(255,239,174,.78) 0 3%, rgba(255,239,174,.22) 12%, transparent 30%), linear-gradient(180deg, rgba(255,244,202,.1), transparent 42%); }
.mountain-overview[data-time-of-day="dawn"] { background: linear-gradient(180deg, #e1a58f 0%, #8eafb0 49%, #cbd4bd 100%); }
.mountain-overview[data-time-of-day="day"] { background: linear-gradient(180deg, #76b6ce 0%, #a8c9c3 50%, #d7d9bb 100%); }
.mountain-overview[data-time-of-day="evening"] { background: linear-gradient(180deg, #bd7e78 0%, #718f9b 51%, #b6c3ad 100%); }
.mountain-overview[data-time-of-day="night"] { background: linear-gradient(180deg, #243d60 0%, #456d7e 56%, #7d9b9a 100%); }
.mountain-overview[data-time-of-day="dawn"] .overview-sky span { opacity: .38; }
.mountain-overview[data-time-of-day="day"] .overview-sky span { opacity: .08; }
.mountain-overview[data-time-of-day="evening"] .overview-sky span { opacity: .62; }
.mountain-overview[data-time-of-day="day"] .overview-moon { opacity: .16; transform: scale(.72); box-shadow: none; }
.mountain-overview[data-time-of-day="dawn"] .overview-moon { opacity: .3; transform: scale(.86); }
.mountain-overview[data-time-of-day="evening"] .overview-moon { opacity: .6; }
.mountain-overview[data-time-of-day="night"]::before { background: radial-gradient(circle at 78% 13%, rgba(247,223,161,.35) 0 3%, rgba(247,223,161,.11) 12%, transparent 30%), linear-gradient(180deg, rgba(15,33,59,.18), transparent 42%); }
.map-relief { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: radial-gradient(ellipse at 18% 24%, rgba(245,249,223,.16) 0 12%, transparent 35%), radial-gradient(ellipse at 83% 71%, rgba(37,83,87,.18) 0 16%, transparent 44%), linear-gradient(135deg, rgba(235,242,221,.1), transparent 42%, rgba(35,78,87,.11)); opacity: .78; }
.map-relief::before, .map-relief::after { position: absolute; content: ""; filter: drop-shadow(0 16px 15px rgba(24,54,67,.12)); }
.map-relief::before { top: -4%; left: -10%; width: 76%; height: 112%; background: linear-gradient(145deg, rgba(216,232,211,.2), rgba(98,142,139,.11) 56%, rgba(34,74,82,.18)); clip-path: polygon(0 33%, 12% 26%, 22% 34%, 36% 18%, 49% 31%, 63% 13%, 77% 27%, 90% 17%, 100% 27%, 100% 100%, 0 100%); }
.map-relief::after { right: -12%; bottom: -8%; width: 78%; height: 108%; background: linear-gradient(25deg, rgba(31,70,79,.2), rgba(174,201,187,.11) 52%, rgba(225,234,210,.18)); clip-path: polygon(0 30%, 15% 21%, 28% 31%, 43% 16%, 57% 28%, 72% 12%, 86% 25%, 100% 18%, 100% 100%, 0 100%); }
.mountain-overview[data-time-of-day="day"] .map-relief { opacity: .68; }
.mountain-overview[data-time-of-day="dawn"] .map-relief { opacity: .78; }
.mountain-overview[data-time-of-day="evening"] .map-relief { opacity: .84; }
.mountain-overview[data-time-of-day="night"] .map-relief { opacity: 1; background: repeating-radial-gradient(ellipse at 24% 30%, transparent 0 22px, rgba(180,214,208,.11) 23px 25px, transparent 26px 53px), repeating-radial-gradient(ellipse at 82% 72%, transparent 0 28px, rgba(8,30,50,.2) 29px 32px, transparent 33px 67px); }
.map-world-viewport { position: absolute; inset: 0; z-index: 1; overflow: hidden; overscroll-behavior: contain; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.map-world-viewport::before { position: absolute; inset: 0; z-index: 0; content: ""; pointer-events: none; background: linear-gradient(180deg, #4a7693 0%, #83acb1 53%, #c3d2bf 100%); }
.mountain-overview[data-time-of-day="dawn"] .map-world-viewport::before { background: linear-gradient(180deg, #e1a58f 0%, #8eafb0 49%, #cbd4bd 100%); }
.mountain-overview[data-time-of-day="day"] .map-world-viewport::before { background: linear-gradient(180deg, #76b6ce 0%, #a8c9c3 50%, #d7d9bb 100%); }
.mountain-overview[data-time-of-day="evening"] .map-world-viewport::before { background: linear-gradient(180deg, #bd7e78 0%, #718f9b 51%, #b6c3ad 100%); }
.mountain-overview[data-time-of-day="night"] .map-world-viewport::before { background: linear-gradient(180deg, #243d60 0%, #456d7e 56%, #7d9b9a 100%); }
.mountain-overview[data-area="starfall"] .map-world-viewport::before { background: linear-gradient(180deg, rgba(38,99,100,.23), rgba(17,66,75,.48)), linear-gradient(180deg, #243d60 0%, #456d7e 56%, #7d9b9a 100%); }
.mountain-overview[data-area="cloud"] .map-world-viewport::before { background: linear-gradient(180deg, rgba(161,211,214,.45), rgba(118,171,182,.28)), linear-gradient(180deg, #4a7693 0%, #83acb1 53%, #c3d2bf 100%); }
.mountain-overview[data-area="crystal"] .map-world-viewport::before { background: linear-gradient(180deg, rgba(90,110,169,.3), rgba(63,70,122,.52)), linear-gradient(180deg, #4a7693 0%, #83acb1 53%, #c3d2bf 100%); }
.mountain-overview[data-area="moon"] .map-world-viewport::before { background: linear-gradient(180deg, rgba(54,60,119,.45), rgba(35,42,91,.7)), linear-gradient(180deg, #243d60 0%, #456d7e 56%, #7d9b9a 100%); }
.mountain-overview[data-area="summit"] .map-world-viewport::before { background: linear-gradient(180deg, rgba(227,239,222,.5), rgba(74,111,142,.35)), linear-gradient(180deg, #76b6ce 0%, #a8c9c3 50%, #d7d9bb 100%); }
.map-world-viewport.is-dragging { cursor: grabbing; }
.map-world { position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: var(--map-world-height); transform: translate3d(var(--map-scroll-x-px, 0px), var(--map-scroll-px), 0); will-change: transform; }
.map-world-track { position: absolute; inset: 0; z-index: 3; transform: translate3d(var(--map-track-scroll-x, 0px), 0, 0); will-change: transform; }
.map-world-content { position: relative; left: calc((100% - (100% / var(--map-zoom) + 240px)) / 2); width: calc(100% / var(--map-zoom) + 240px); height: 100%; transform: scale(var(--map-zoom)); transform-origin: 50% 0; will-change: transform; }
.map-zone-layer { position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; transform: scaleX(var(--map-zone-scale-x, 1)); transform-origin: 50% 0; }
.map-zone { position: absolute; left: 0; width: 100%; overflow: hidden; isolation: isolate; }
.map-zone::before, .map-zone::after { position: absolute; inset: 0; content: ""; pointer-events: none; }
.map-zone-title { position: absolute; top: 7%; left: 8%; z-index: 2; padding: 7px 9px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; color: rgba(248,251,235,.78); background: rgba(18,43,57,.22); box-shadow: 0 4px 12px rgba(20,50,60,.08); font-size: 10px; font-weight: 900; letter-spacing: .04em; text-shadow: 0 1px 4px rgba(12,30,43,.28); transform: scaleX(var(--map-zone-title-scale-x, 1)) scaleY(var(--map-zone-title-scale-y, 1)); transform-origin: left top; }
.map-zone-title.is-right { right: 8%; left: auto; transform-origin: right top; }
.map-zone-starfall { background: linear-gradient(180deg, rgba(38,99,100,.23), rgba(17,66,75,.48)); }
.map-zone-starfall::before { background: radial-gradient(circle at 16% 28%, rgba(255,230,149,.85) 0 2px, transparent 3px), radial-gradient(circle at 62% 53%, rgba(255,239,169,.7) 0 2px, transparent 3px), radial-gradient(circle at 83% 20%, rgba(255,239,169,.72) 0 1px, transparent 2px), radial-gradient(ellipse at 78% 70%, rgba(22,91,79,.24) 0 18%, transparent 52%); opacity: .9; }
.map-zone-starfall::after { left: 6%; top: 34%; width: 88%; height: 55%; background: linear-gradient(105deg, transparent 0 37%, rgba(19,61,65,.15) 38% 43%, transparent 44% 59%, rgba(19,61,65,.1) 60% 64%, transparent 65%); clip-path: polygon(0 100%, 9% 50%, 18% 74%, 29% 25%, 41% 64%, 54% 15%, 65% 58%, 78% 31%, 91% 72%, 100% 45%, 100% 100%); }
.map-zone-cloud { background: linear-gradient(180deg, rgba(161,211,214,.45), rgba(118,171,182,.28)); }
.map-zone-cloud::before { background: radial-gradient(ellipse at 12% 58%, rgba(239,249,242,.42) 0 13%, transparent 14%), radial-gradient(ellipse at 31% 32%, rgba(245,252,247,.32) 0 17%, transparent 18%), radial-gradient(ellipse at 78% 68%, rgba(224,243,242,.36) 0 16%, transparent 17%), linear-gradient(145deg, transparent 0 42%, rgba(236,249,243,.18) 43% 57%, transparent 58%); filter: blur(2px); }
.map-zone-cloud::after { background: radial-gradient(ellipse at 18% 72%, rgba(231,248,244,.22) 0 17%, transparent 18%), radial-gradient(ellipse at 72% 29%, rgba(214,241,238,.2) 0 21%, transparent 22%), linear-gradient(165deg, transparent 0 44%, rgba(222,245,241,.12) 45% 54%, transparent 55%); opacity: .8; }
.map-zone-crystal { background: linear-gradient(180deg, rgba(90,110,169,.3), rgba(63,70,122,.52)); }
.map-zone-crystal::before { background: radial-gradient(circle at 25% 32%, rgba(180,218,255,.2) 0 8%, transparent 28%), radial-gradient(circle at 75% 62%, rgba(185,157,255,.16) 0 9%, transparent 30%), linear-gradient(125deg, transparent 0 39%, rgba(180,218,255,.12) 40% 47%, transparent 48% 68%, rgba(185,157,255,.1) 69% 75%, transparent 76%); clip-path: polygon(0 0, 100% 9%, 100% 100%, 0 88%); }
.map-zone-crystal::after { left: 12%; top: 18%; width: 76%; height: 70%; background: linear-gradient(130deg, transparent 0 37%, rgba(218,236,255,.35) 38% 42%, transparent 43% 57%, rgba(191,171,255,.28) 58% 63%, transparent 64%); transform: rotate(-7deg); }
.map-zone-moon { background: linear-gradient(180deg, rgba(54,60,119,.45), rgba(35,42,91,.7)); }
.map-zone-moon::before { background: radial-gradient(circle at 72% 24%, rgba(251,226,166,.7) 0 10%, rgba(251,226,166,.15) 11% 20%, transparent 21%), radial-gradient(ellipse at 24% 80%, rgba(102,91,162,.35) 0 18%, transparent 19%), radial-gradient(ellipse at 53% 58%, rgba(151,143,221,.12) 0 16%, transparent 42%); }
.map-zone-moon::after { background: linear-gradient(82deg, transparent 0 39%, rgba(189,184,238,.1) 40% 47%, transparent 48% 68%, rgba(189,184,238,.08) 69% 75%, transparent 76%); opacity: .8; }
.map-zone-summit { background: linear-gradient(180deg, rgba(227,239,222,.5), rgba(138,182,185,.3) 45%, rgba(74,111,142,.35)); }
.map-zone-summit::before { background: radial-gradient(circle at 50% 18%, rgba(255,246,190,.9) 0 4%, rgba(255,246,190,.25) 12%, transparent 30%), linear-gradient(155deg, transparent 0 37%, rgba(249,253,239,.45) 38% 53%, transparent 54%), linear-gradient(25deg, transparent 0 42%, rgba(220,239,228,.36) 43% 56%, transparent 57%); }
.map-zone-summit::after { background: linear-gradient(145deg, transparent 0 41%, rgba(255,255,241,.15) 42% 50%, transparent 51% 69%, rgba(255,255,241,.1) 70% 76%, transparent 77%); }
.map-zone-motif { position: absolute; right: 22%; bottom: 12%; width: 110px; height: 70px; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; opacity: .45; transform: rotate(-12deg); }
.map-zone-starfall .map-zone-motif { width: 150px; height: 90px; border: 0; border-radius: 0; background: radial-gradient(circle at 18% 30%, rgba(255,235,158,.86) 0 2px, transparent 3px), radial-gradient(circle at 46% 65%, rgba(255,239,169,.7) 0 2px, transparent 3px), radial-gradient(circle at 78% 22%, rgba(255,255,225,.72) 0 1px, transparent 2px); transform: none; }
.map-zone-cloud .map-zone-motif { width: 160px; height: 78px; border: 0; border-radius: 50%; background: radial-gradient(ellipse at 24% 65%, rgba(244,252,247,.42) 0 22%, transparent 23%), radial-gradient(ellipse at 52% 44%, rgba(245,253,250,.48) 0 31%, transparent 32%), radial-gradient(ellipse at 79% 66%, rgba(231,247,243,.4) 0 24%, transparent 25%); filter: blur(1px); transform: none; }
.map-zone-moon .map-zone-motif { border-color: rgba(229,219,255,.2); box-shadow: 0 0 0 18px rgba(229,219,255,.05), 0 0 0 36px rgba(229,219,255,.04); }
.map-zone-crystal .map-zone-motif { width: 20px; height: 72px; border: 0; border-radius: 0; background: linear-gradient(135deg, transparent 0 30%, rgba(193,226,255,.6) 31% 54%, transparent 55%), linear-gradient(45deg, transparent 0 40%, rgba(205,182,255,.55) 41% 65%, transparent 66%); transform: rotate(17deg); }
.map-zone-summit .map-zone-motif { width: 160px; height: 78px; border: 0; border-radius: 0; background: linear-gradient(155deg, transparent 0 42%, rgba(249,253,239,.55) 43% 57%, transparent 58%), linear-gradient(25deg, transparent 0 48%, rgba(220,239,228,.46) 49% 63%, transparent 64%); clip-path: polygon(0 100%, 22% 55%, 37% 72%, 53% 22%, 66% 63%, 82% 38%, 100% 61%, 100% 100%); transform: none; }
.map-zone-summit .map-zone-title { color: #fff4be; background: rgba(72,90,108,.3); }
.overview-sky { position: absolute; inset: 0; z-index: 1; }
.overview-sky span { position: absolute; color: rgba(255,238,171,.9); font-size: 13px; animation: overview-twinkle 3.6s ease-in-out infinite; }
.overview-sky span:nth-child(1) { top: 15%; left: 18%; }
.overview-sky span:nth-child(2) { top: 26%; left: 44%; animation-delay: .9s; }
.overview-sky span:nth-child(3) { top: 10%; right: 19%; animation-delay: 1.7s; }
.overview-sky span:nth-child(4) { top: 37%; right: 38%; animation-delay: 2.4s; }
@keyframes overview-twinkle { 0%, 100% { opacity: .35; transform: scale(.75); } 50% { opacity: 1; transform: scale(1.15); } }
.overview-moon { position: absolute; top: 3%; right: 13%; z-index: 1; width: 42px; height: 42px; border-radius: 50%; background: #f7dfa1; box-shadow: 0 0 30px rgba(247,223,161,.35); }
.overview-mountain { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; clip-path: none; }
.overview-mountain-back { opacity: .36; background: linear-gradient(155deg, rgba(222,239,224,.44), rgba(94,139,143,.3) 52%, rgba(37,83,96,.34)); clip-path: polygon(0 45%, 10% 36%, 21% 44%, 34% 29%, 47% 42%, 59% 26%, 72% 39%, 86% 23%, 100% 34%, 100% 100%, 0 100%); }
.overview-mountain-front { opacity: .24; background: linear-gradient(25deg, rgba(26,70,79,.42), rgba(107,153,151,.3) 54%, rgba(224,236,214,.28)); clip-path: polygon(0 64%, 12% 53%, 24% 63%, 37% 42%, 49% 59%, 61% 37%, 73% 55%, 86% 41%, 100% 53%, 100% 100%, 0 100%); }
.map-terrain { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.terrain-item { position: absolute; display: block; transform: translate(-50%, -50%) rotate(var(--terrain-rotation, 0deg)) scale(var(--map-terrain-scale, 1)); }
.terrain-tree, .terrain-tree-small { width: 24px; height: 31px; filter: drop-shadow(0 4px 3px rgba(12,31,42,.26)); }
.terrain-tree::before, .terrain-tree-small::before { content: ""; position: absolute; left: 50%; bottom: 0; width: 5px; height: 13px; border-radius: 2px; background: #6b4e3e; transform: translateX(-50%); }
.terrain-tree::after, .terrain-tree-small::after { content: ""; position: absolute; left: 50%; top: 0; width: 25px; height: 25px; border-radius: 45% 55% 42% 58%; background: linear-gradient(145deg, #7fc2a7 0%, #2b776c 48%, #174f55 100%); clip-path: polygon(50% 0, 100% 74%, 73% 70%, 89% 100%, 11% 100%, 27% 70%, 0 74%); transform: translateX(-50%); }
.terrain-tree-small { width: 18px; height: 24px; opacity: .88; transform: translate(-50%, -50%) rotate(var(--terrain-rotation, 0deg)) scale(calc(.84 * var(--map-terrain-scale, 1))); }
.terrain-rock, .terrain-rock-small { width: 27px; height: 16px; border-radius: 55% 45% 40% 60%; background: linear-gradient(145deg, #b6c3c1 0%, #738a91 55%, #4b6974 100%); box-shadow: inset 4px 3px 0 rgba(255,255,255,.19), 0 4px 4px rgba(12,31,42,.22); }
.terrain-rock-small { width: 18px; height: 11px; opacity: .82; transform: translate(-50%, -50%) rotate(var(--terrain-rotation, 0deg)) scale(calc(.8 * var(--map-terrain-scale, 1))); }
.terrain-bush { width: 31px; height: 18px; border-radius: 55% 45% 50% 50%; background: radial-gradient(circle at 24% 36%, #a2d0ad 0 17%, transparent 18%), radial-gradient(circle at 53% 28%, #70ae8e 0 22%, transparent 23%), radial-gradient(circle at 77% 46%, #3e8074 0 30%, transparent 31%), #326c66; filter: drop-shadow(0 4px 3px rgba(12,31,42,.2)); }
.terrain-flower { width: 11px; height: 11px; border-radius: 50%; background: radial-gradient(circle, #f8db7b 0 22%, transparent 24%), radial-gradient(circle at 20% 30%, #f39a92 0 32%, transparent 34%), radial-gradient(circle at 80% 30%, #f39a92 0 32%, transparent 34%), radial-gradient(circle at 30% 85%, #f39a92 0 32%, transparent 34%), radial-gradient(circle at 70% 85%, #f39a92 0 32%, transparent 34%); filter: drop-shadow(0 2px 2px rgba(62,61,41,.2)); }
.terrain-lantern { width: 10px; height: 20px; border-radius: 4px 4px 2px 2px; background: linear-gradient(90deg, #8a5947 0 25%, #ffe18a 26% 74%, #8a5947 75%); box-shadow: 0 0 9px rgba(255,220,119,.72), 0 4px 3px rgba(26,52,49,.2); }
.terrain-lantern::before { position: absolute; top: -4px; left: 1px; width: 8px; height: 4px; border-radius: 50% 50% 0 0; background: #6c4b42; content: ""; }
.terrain-bridge { width: 105px; height: 24px; border-top: 5px solid #d7b474; border-bottom: 4px solid #8b5e48; background: repeating-linear-gradient(90deg, #c6915f 0 8px, #eed39c 8px 11px); box-shadow: 0 5px 4px rgba(12,31,42,.3); }
.terrain-bridge::before, .terrain-bridge::after { content: ""; position: absolute; top: -18px; width: 4px; height: 35px; border-radius: 3px; background: #6a4a43; box-shadow: 40px 0 #6a4a43, 80px 0 #6a4a43; }
.terrain-bridge::before { left: 8px; }
.terrain-bridge::after { left: 8px; top: -11px; width: 89px; height: 15px; border: 2px solid #dcbf86; border-bottom: 0; border-radius: 50% 50% 0 0; background: transparent; box-shadow: 0 0; }
.terrain-waterfall { width: 28px; height: 90px; border-radius: 45%; background: repeating-linear-gradient(165deg, rgba(198,239,240,.9) 0 7px, rgba(97,181,191,.55) 8px 14px, transparent 15px 24px); filter: drop-shadow(0 0 8px rgba(183,238,235,.45)); }
.terrain-shrine { width: 37px; height: 29px; border: 3px solid #d9bd7d; border-top: 0; border-radius: 3px; background: #b96b53; box-shadow: 0 5px 5px rgba(12,31,42,.26); }
.terrain-shrine::before { content: ""; position: absolute; left: -8px; top: -8px; width: 47px; height: 10px; border-radius: 50%; background: #f0cf83; box-shadow: 0 4px 0 #a15a49; }
.terrain-cliff { width: 42px; height: 30px; border-radius: 48% 52% 32% 68%; background: linear-gradient(145deg, #d5d6bd 0%, #9eaa91 45%, #667b73 100%); clip-path: polygon(0 100%, 8% 34%, 34% 0, 63% 29%, 100% 12%, 92% 100%); box-shadow: inset 5px 4px rgba(255,255,255,.25), 0 5px 5px rgba(24,54,55,.2); }
.map-moti { position: absolute; z-index: 7; width: 47px; height: 47px; transform: translate(-50%, -84%) scale(var(--map-moti-scale, 1)); transform-origin: 50% 84%; pointer-events: none; transition: left .9s cubic-bezier(.2,.8,.25,1), top .9s cubic-bezier(.2,.8,.25,1); }
.map-moti.is-travelling { transition: none; }
.map-moti img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 7px 5px rgba(13,30,48,.35)); animation: map-moti-bob 1.8s ease-in-out infinite; }
@keyframes map-moti-bob { 0%, 100% { transform: rotate(-2deg) translateY(0); } 50% { transform: rotate(2deg) translateY(-4px); } }
.map-auto-label { position: absolute; top: 12px; left: 14px; z-index: 7; display: flex; align-items: center; gap: 8px; max-width: calc(100% - 28px); padding: 7px 8px 7px 10px; border: 1px solid rgba(255,239,177,.32); border-radius: 8px; color: #fff7d1; background: rgba(17,38,62,.68); box-shadow: 0 5px 15px rgba(10,25,42,.18); backdrop-filter: blur(5px); font-size: 9px; font-weight: 900; }
.map-auto-label > span { min-width: 0; }
.map-auto-undo { flex: 0 0 auto; padding: 3px 5px; border: 1px solid rgba(255,239,177,.34); border-radius: 5px; color: #fff7d1; background: rgba(255,255,255,.09); font-size: 8px; font-weight: 900; }
.map-auto-undo:hover { background: rgba(255,255,255,.17); }
.map-auto-label[hidden] { display: none; }
.overview-route-svg { position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%; overflow: visible; }
.overview-route-svg path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.overview-route-base { stroke: rgba(71,55,54,.76); stroke-width: 34; filter: drop-shadow(0 5px 4px rgba(12,31,42,.3)); }
.overview-route-progress { stroke: #f3cd73; stroke-width: 20; stroke-dasharray: 100; stroke-dashoffset: var(--route-offset, 52); filter: drop-shadow(0 0 5px rgba(243,205,115,.58)); }
.mountain-map-modal:not([hidden]) .overview-route-progress { animation: overview-route-draw 1.15s ease-out both; }
@keyframes overview-route-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: var(--route-offset, 52); } }
.overview-route-nodes { position: absolute; inset: 0; z-index: 6; width: 100%; }
.overview-node { position: absolute; width: 90px; padding: 0; border: 0; transform: translate(-50%, -50%) scale(var(--map-label-scale, 1)); color: inherit; background: transparent; font: inherit; text-align: center; cursor: pointer; }
.overview-node:focus-visible { outline: 3px solid rgba(247,216,123,.72); outline-offset: 4px; border-radius: 10px; }
.overview-node-marker { display: grid; width: 34px; height: 34px; place-items: center; margin: 0 auto 6px; border: 3px solid rgba(225,237,238,.75); border-radius: 50%; color: #d2dfe2; background: rgba(27,52,78,.84); box-shadow: 0 4px 10px rgba(11,30,49,.2); font-size: 12px; font-weight: 900; }
.overview-node > span { display: block; color: #e5eef1; font-size: 9px; font-weight: 900; line-height: 1.25; text-shadow: 0 1px 4px rgba(15,31,50,.42); }
.overview-node > small { display: block; margin-top: 3px; color: rgba(224,238,239,.68); font-size: 8px; }
.overview-node.is-done .overview-node-marker { border-color: var(--teal); color: #fff; background: var(--teal); }
.overview-node.is-current .overview-node-marker { border-color: #fff0b3; color: var(--navy); background: var(--gold); box-shadow: 0 0 0 7px rgba(247,216,123,.18), 0 4px 14px rgba(15,32,53,.32); animation: overview-current-pulse 2s ease-in-out infinite; }
.overview-node.is-current > span { color: #fff4bd; }
.overview-node.is-preview .overview-node-marker { border-color: #f5d98a; color: #fff5c9; background: rgba(121,91,154,.88); box-shadow: 0 0 0 7px rgba(245,217,138,.14), 0 4px 14px rgba(15,32,53,.32); }
.overview-node.is-preview > span { color: #fff5c9; }
.overview-node.is-locked .overview-node-marker { opacity: .72; }
@keyframes overview-current-pulse { 50% { transform: scale(1.1); box-shadow: 0 0 0 11px rgba(247,216,123,.06), 0 4px 14px rgba(15,32,53,.28); } }
.mountain-overview.is-map-moving .map-world { transition: transform .9s cubic-bezier(.2,.8,.25,1); }
.map-zoom-controls { position: absolute; top: 12px; right: 13px; z-index: 9; display: flex; align-items: center; gap: 5px; padding: 4px; border: 1px solid rgba(255,255,255,.16); border-radius: 9px; color: #fff4bd; background: rgba(18,38,62,.62); backdrop-filter: blur(5px); }
.map-zoom-button { display: grid; width: 25px; height: 25px; place-items: center; border: 0; border-radius: 6px; color: #fff4bd; background: rgba(255,255,255,.12); font-size: 16px; font-weight: 900; line-height: 1; }
.map-zoom-button:hover { background: rgba(255,255,255,.24); }
.map-zoom-button:disabled { cursor: not-allowed; opacity: .35; }
#mapZoomLabel { min-width: 36px; color: #e5eef1; font-size: 8px; font-weight: 900; text-align: center; }
.map-touch-hint { position: absolute; right: 13px; bottom: 13px; z-index: 8; padding: 6px 8px; border: 1px solid rgba(255,255,255,.14); border-radius: 7px; color: rgba(231,240,243,.84); background: rgba(18,38,62,.52); backdrop-filter: blur(5px); font-size: 8px; font-weight: 800; pointer-events: none; }
.map-window-controls { display: flex; align-items: center; gap: 7px; margin-top: 12px; }
.map-window-controls .button { flex: 0 0 auto; }
.map-window-controls span { flex: 1; color: var(--muted); font-size: 9px; font-weight: 900; letter-spacing: .08em; text-align: center; }
.map-window-controls button:disabled { cursor: not-allowed; opacity: .4; }
.overview-legend { position: absolute; right: 13px; bottom: 12px; z-index: 5; display: flex; gap: 10px; padding: 7px 9px; border: 1px solid rgba(255,255,255,.14); border-radius: 8px; color: rgba(231,240,243,.78); background: rgba(18,38,62,.55); backdrop-filter: blur(5px); font-size: 8px; }
.overview-legend small { color: rgba(255,238,171,.86); font-weight: 900; }
.overview-dot { display: inline-block; width: 7px; height: 7px; margin-right: 3px; border-radius: 50%; background: #cbdadd; }
.overview-dot-done { background: var(--teal); }
.overview-dot-current { background: var(--gold); }
.overview-dot-locked { background: #9cadb5; }
.overview-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 12px; overflow: hidden; border: 1px solid #e9edf2; border-radius: 11px; background: #e9edf2; }
.overview-summary > div { display: grid; gap: 4px; padding: 11px 13px; background: #fbfcfd; }
.overview-summary small { color: var(--muted); font-size: 8px; }
.overview-summary strong { overflow: hidden; color: var(--navy); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.camp-story { margin-top: 12px; padding: 13px 15px; border: 1px solid #eadfbf; border-radius: 12px; background: linear-gradient(105deg, #fffaf0, #fff); box-shadow: 0 6px 17px rgba(156,122,52,.08); }
.camp-story-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.camp-story-heading .section-kicker { margin-bottom: 0; color: var(--gold-dark); }
.camp-story-badge { padding: 4px 7px; border-radius: 6px; color: var(--gold-dark); background: #fff0c4; font-size: 8px; font-weight: 900; }
.camp-story h3 { margin-top: 7px; color: var(--navy); font-size: 13px; }
.camp-story p { margin-top: 5px; color: var(--muted); font-size: 10px; line-height: 1.65; }
.camp-story[data-area="starfall"] { border-color: #e8d59a; background: linear-gradient(105deg, #fff9e8, #fff); }
.camp-story[data-area="cloud"] { border-color: #c7e3e1; background: linear-gradient(105deg, #f2fbfa, #fff); }
.camp-story[data-area="crystal"] { border-color: #d7cef6; background: linear-gradient(105deg, #f7f5ff, #fff); }
.camp-story[data-area="moon"] { border-color: #d2d2f1; background: linear-gradient(105deg, #f5f5ff, #fff); }
.camp-story[data-area="summit"] { border-color: #d4e2dc; background: linear-gradient(105deg, #f3fbf6, #fff); }
.landmark-progress { display: grid; gap: 6px; margin-top: 12px; }
.landmark-progress-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 9px; font-weight: 800; }
.landmark-progress-top strong { color: var(--gold-dark); font-size: 10px; }
.landmark-progress .progress-track { height: 7px; background: #f1ead7; }
.landmark-progress .progress-track > span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--teal), var(--gold)); box-shadow: 0 2px 6px rgba(75,180,158,.2); transition: width .45s ease; }
.camp-album-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 22px; }
.camp-album-heading .section-kicker { margin-bottom: 5px; color: var(--purple); }
.camp-album-heading h3 { font-size: 14px; }
.camp-album-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 11px; }
.camp-album-item { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 9px; border: 1px solid #e6ebf1; border-radius: 10px; background: #f8fafc; }
.camp-album-icon { display: grid; width: 25px; height: 25px; flex: 0 0 auto; place-items: center; border-radius: 8px; color: #aab6c3; background: #e9eef3; font-size: 11px; font-weight: 900; }
.camp-album-item > div { display: grid; min-width: 0; gap: 3px; }
.camp-album-item strong { overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.camp-album-item small { color: var(--muted-2); font-size: 8px; white-space: nowrap; }
.camp-album-item.is-unlocked { border-color: #bce5dc; background: #f4fcf9; }
.camp-album-item.is-unlocked .camp-album-icon { color: #fff; background: var(--teal); }
.camp-album-item.is-unlocked strong { color: #368979; }
.camp-album-item.is-next { border-color: #f5dfad; background: #fffaf0; }
.camp-album-item.is-next .camp-album-icon { color: var(--gold-dark); background: #fff0c4; }
.camp-album-item.is-next strong { color: var(--gold-dark); }
.camp-album-item[data-area="starfall"] { border-left: 3px solid #e8d59a; }
.camp-album-item[data-area="cloud"] { border-left: 3px solid #b8deda; }
.camp-album-item[data-area="crystal"] { border-left: 3px solid #d0c3f0; }
.camp-album-item[data-area="moon"] { border-left: 3px solid #c3c3e9; }
.camp-album-item[data-area="summit"] { border-left: 3px solid #cbded3; }
.achievement-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 23px; }
.achievement-heading .section-kicker { margin-bottom: 5px; color: var(--coral-dark); }
.achievement-heading h3 { font-size: 14px; }
.achievement-note { margin-top: 5px; color: var(--muted); font-size: 9px; }
.achievement-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 11px; }
.achievement-item { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 9px; border: 1px solid #e6ebf1; border-radius: 10px; background: #f8fafc; }
.achievement-icon { display: grid; width: 25px; height: 25px; flex: 0 0 auto; place-items: center; border-radius: 8px; color: #aab6c3; background: #e9eef3; font-size: 11px; font-weight: 900; }
.achievement-item > div { display: grid; min-width: 0; gap: 3px; }
.achievement-item strong { overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.achievement-item small { overflow: hidden; color: var(--muted-2); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.achievement-item.is-unlocked { border-color: #f2d7a5; background: #fffaf0; }
.achievement-item.is-unlocked .achievement-icon { color: var(--gold-dark); background: #fff0c4; box-shadow: 0 3px 8px rgba(243,205,115,.18); }
.achievement-item.is-unlocked strong { color: var(--gold-dark); }
.achievement-item.is-locked { opacity: .82; }
.form-stack { display: grid; gap: 14px; margin-top: 19px; }
.form-stack label { display: grid; gap: 7px; color: var(--navy); font-size: 12px; font-weight: 900; }
.form-stack input, .form-stack select { width: 100%; height: 42px; padding: 0 12px; border: 1px solid #dfe5ed; border-radius: 9px; color: var(--navy); background: #fff; font-size: 13px; }
.form-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.deadline-field { display: grid; min-width: 0; gap: 7px; color: var(--navy); font-size: 12px; font-weight: 900; }
.deadline-field > label { display: block; }
.deadline-presets { display: grid; gap: 5px; margin-top: 1px; }
.deadline-presets > span { color: var(--muted); font-size: 8px; font-weight: 800; }
.deadline-preset-buttons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.deadline-preset { min-width: 0; min-height: 28px; padding: 0 3px; overflow: hidden; border: 1px solid #dfe6ee; border-radius: 7px; color: var(--muted); background: #fff; font-size: 9px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; transition: border-color .2s, color .2s, background .2s, transform .2s; }
.deadline-preset:hover { border-color: var(--gold); color: var(--gold-dark); background: #fffaf0; transform: translateY(-1px); }
.deadline-preset.is-selected { border-color: var(--teal); color: #fff; background: var(--teal); box-shadow: 0 3px 8px rgba(75,180,158,.18); }
.material-plan-preview { display: grid; gap: 3px; margin-top: 8px; padding: 8px 9px; border: 1px solid #cfe9e2; border-radius: 8px; color: var(--teal-dark); background: #f3fbf8; }
.material-plan-preview strong { font-size: 10px; line-height: 1.3; }
.material-plan-preview span { color: var(--muted); font-size: 8px; line-height: 1.4; }
.material-plan-preview.is-empty { border-color: #e5ebf1; background: #f8fafc; }
.material-plan-preview.is-empty strong { color: var(--muted); }
.material-plan-preview.is-complete { border-color: #d7e9df; background: #f5fbf7; }
.material-plan-preview.is-complete strong { color: var(--teal-dark); }
.material-plan-preview.is-rest { border-color: #ddd8f5; color: var(--purple); background: #faf9ff; }
.material-plan-preview.is-rest strong { color: var(--purple); }
.material-plan-preview.is-overdue { border-color: #f1d8cf; color: var(--coral-dark); background: #fff8f5; }
.form-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 7px; }
.chest-popup { position: fixed; top: 50%; left: 50%; z-index: 25; display: grid; width: min(450px, calc(100vw - 30px)); gap: 14px; padding: 18px; border: 1px solid #eed28a; border-radius: 22px; color: var(--navy); background: linear-gradient(145deg, #fffdf5, #fff); box-shadow: 0 26px 70px rgba(12, 28, 49, .3), 0 0 0 100vmax rgba(13, 28, 49, .56), 0 0 0 7px rgba(246, 201, 103, .14); animation: chest-popup-in .32s ease-out both; }
.chest-popup[hidden] { display: none; }
.chest-popup.is-rewarded { border-color: #9ad6c7; box-shadow: 0 26px 70px rgba(12, 28, 49, .3), 0 0 0 100vmax rgba(13, 28, 49, .56), 0 0 0 7px rgba(75, 180, 158, .12); }
.chest-popup-topline { display: flex; align-items: center; justify-content: space-between; color: var(--gold-dark); font-size: 8px; font-weight: 900; letter-spacing: .14em; }
.chest-popup-close { width: 25px; height: 25px; border: 0; border-radius: 50%; color: var(--muted); background: #f4f6f8; font-size: 17px; line-height: 1; }
.chest-popup-body { display: grid; grid-template-columns: 145px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 145px; }
.chest-popup-body h2 { font-size: 22px; line-height: 1.2; }
.chest-popup-body p { margin-top: 5px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.chest-popup-reward { display: grid; gap: 3px; margin: -1px 0 0; padding: 11px 12px; border: 1px solid #f0d481; border-radius: 11px; color: var(--gold-dark); background: linear-gradient(135deg, #fff5c9, #fffdf3); text-align: center; }
.chest-popup-reward span { font-size: 8px; font-weight: 900; letter-spacing: .16em; }
.chest-popup-reward strong { font-size: 15px; }
.chest-popup-actions { display: flex; gap: 7px; }
.chest-popup-actions .button { flex: 1; min-height: 36px; }
.chest-popup-actions .button[hidden] { display: none; }
.chest-art { position: relative; width: 132px; height: 132px; filter: drop-shadow(0 11px 9px rgba(113, 72, 29, .2)); }
.chest-art img { display: block; width: 100%; height: 100%; object-fit: contain; }
.chest-art .chest-open-image { display: none; }
.chest-popup.is-opening .chest-art .chest-closed-image, .chest-popup.is-rewarded .chest-art .chest-closed-image { display: none; }
.chest-popup.is-opening .chest-art .chest-open-image, .chest-popup.is-rewarded .chest-art .chest-open-image { display: block; }
.chest-art::after { position: absolute; inset: 10%; border-radius: 50%; content: ""; opacity: 0; pointer-events: none; background: radial-gradient(circle, rgba(255,235,137,.9), rgba(255,207,88,.24) 45%, transparent 70%); mix-blend-mode: screen; }
.chest-particle { position: absolute; z-index: 2; color: #f9d875; font-size: 17px; font-weight: 900; opacity: .7; text-shadow: 0 0 9px rgba(244, 201, 103, .8); }
.chest-particle-one { top: 7%; right: 4%; }
.chest-particle-two { top: 27%; left: -3%; --chest-particle-x: -17px; --chest-particle-y: -13px; font-size: 13px; }
.chest-particle-three { right: 8%; bottom: 14%; --chest-particle-x: 19px; --chest-particle-y: -20px; font-size: 12px; }
.chest-particle-four { bottom: 3%; left: 8%; --chest-particle-x: -11px; --chest-particle-y: -18px; font-size: 10px; }
.chest-particle-one { --chest-particle-x: 14px; --chest-particle-y: -22px; }
.chest-popup.is-opening .chest-art { animation: chest-shake .78s ease-in-out both; }
.chest-popup.is-opening .chest-art::after { animation: chest-light .78s ease-out both; }
.chest-popup.is-opening .chest-particle { animation: chest-particle-burst .78s ease-out both; }
.chest-popup.is-rewarded .chest-art { animation: chest-idle 3.6s ease-in-out infinite; }
.chest-popup.is-rewarded .chest-popup-reward:not([hidden]) { animation: reward-pop .42s cubic-bezier(.2, 1.35, .45, 1) both; }
@keyframes chest-popup-in { from { opacity: 0; transform: translate(-50%, -44%) scale(.94); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes chest-shake { 0%, 100% { transform: rotate(0); } 22% { transform: rotate(-5deg) translateX(-2px); } 44% { transform: rotate(5deg) translateX(2px); } 66% { transform: rotate(-3deg); } }
@keyframes chest-light { 0%, 22% { opacity: 0; transform: scale(.55); } 62% { opacity: 1; transform: scale(1.35); } 100% { opacity: 0; transform: scale(1.75); } }
@keyframes chest-particle-burst { 0%, 20% { opacity: 0; transform: translate(0, 5px) scale(.4); } 62% { opacity: 1; transform: translate(var(--chest-particle-x, 0), var(--chest-particle-y, -12px)) scale(1.25); } 100% { opacity: 0; transform: translate(var(--chest-particle-x, 0), var(--chest-particle-y, -25px)) scale(.75); } }
@keyframes chest-idle { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-5px) rotate(-1deg); } }
@keyframes reward-pop { from { opacity: 0; transform: translateY(8px) scale(.88); } to { opacity: 1; transform: translateY(0) scale(1); } }
.toast { position: fixed; right: 22px; bottom: 22px; z-index: 20; max-width: min(360px, calc(100vw - 44px)); padding: 12px 15px; border-radius: 10px; color: #fff; background: var(--navy); box-shadow: 0 12px 28px rgba(15,30,55,.22); font-size: 11px; font-weight: 800; opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity .2s, transform .2s; }
.toast.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 1100px) {
  .sidebar { width: 215px; flex-basis: 215px; }
  .main-content { padding-right: 25px; padding-left: 25px; }
  .home-grid { grid-template-columns: minmax(0, 1.32fr) minmax(250px, .88fr); }
  .stat-block { gap: 7px; padding-right: 10px; padding-left: 10px; }
  .stat-symbol { width: 27px; height: 27px; font-size: 16px; }
  .stat-block small { font-size: 8px; }
  .stat-block strong { font-size: 17px; }
  .stat-block strong b { font-size: 9px; }
  .stat-block strong i { font-size: 8px; }
  .mountain-hero { padding-left: 26px; }
  .hero-copy { max-width: 43%; }
  .hero-progress-forecast { right: 17%; width: min(34%, 330px); min-width: 270px; }
  .mascot-image { right: 4%; }
}

@media (min-width: 561px) and (max-width: 1100px) {
  .hero-actions { gap: 6px; }
  .hero-actions .button { padding-right: 9px; padding-left: 9px; font-size: 10px; white-space: nowrap; }
}

@media (max-width: 860px) {
  .app-shell { display: block; }
  .sidebar { position: sticky; top: 0; z-index: 8; width: 100%; padding: 14px 18px; border-bottom: 1px solid rgba(255,255,255,.08); box-shadow: 0 8px 18px rgba(13,29,53,.14); }
  .brand-lockup { padding: 0; }
  .sidebar-mascot-card, .sidebar-goal, .sidebar-profile { display: none; }
  .nav-list { display: flex; gap: 4px; margin-top: 14px; overflow-x: auto; }
  .nav-item { flex: 1 0 auto; justify-content: center; width: auto; padding: 9px 10px; font-size: 10px; }
  .nav-item.is-active { box-shadow: inset 0 -3px var(--coral); }
  .main-content { padding: 20px 18px 22px; }
  .home-grid, .timer-view-grid { grid-template-columns: 1fr; }
  .home-main-column { order: 2; }
  .home-side-column { order: 1; }
  .chest-page-grid { grid-template-columns: 1fr; }
  .home-side-column { grid-template-columns: repeat(2, minmax(0,1fr)); align-items: start; }
  .timer-card { grid-column: 1 / -1; }
  .rule-card { grid-column: 1 / -1; }
  .stats-strip { grid-template-columns: repeat(2, 1fr); }
  .companion-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stat-block-main { grid-column: 1 / -1; }
  .mountain-hero { min-height: 355px; }
  .mountain-scene { left: 14%; opacity: .95; }
  .hero-copy { max-width: 370px; }
  .hero-copy h2 { font-size: 33px; }
  .mascot-image { right: 7%; width: 230px; }
  .summit-label { top: 19px; right: 19px; }
  .hero-progress-forecast { top: auto; right: 18px; bottom: 18px; width: min(48%, 310px); min-width: 0; transform: none; }
  .hero-progress-forecast .hero-forecast-chart { height: 58px; }
}

@media (max-width: 560px) {
  .sidebar { padding: 8px 12px 9px; }
  .brand-lockup { gap: 8px; }
  .brand-mark { width: 30px; height: 30px; border-radius: 9px; font-size: 16px; }
  .brand-name { font-size: 14px; }
  .brand-tagline { margin-top: 2px; font-size: 8px; }
  .modal-close, .chest-popup-close { width: 40px; height: 40px; }
  .notification-button { width: 38px; height: 38px; }
  .main-content { padding: 17px 12px calc(19px + env(safe-area-inset-bottom)); }
  .modal-backdrop { padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)); }
  .modal { max-height: calc(100dvh - 24px); }
  .topbar { margin-bottom: 19px; }
  .nav-list { display: flex; gap: 2px; margin-top: 8px; overflow: visible; }
  .nav-item { min-width: 0; min-height: 44px; flex: 1 1 0; flex-direction: column; gap: 2px; padding: 6px 2px; font-size: clamp(9px, 2.6vw, 10px); line-height: 1.1; text-align: center; white-space: normal; }
  .nav-icon { width: auto; font-size: 14px; line-height: 1; }
  .popular-materials-heading { align-items: center; flex-direction: row; gap: 7px; }
  .popular-material-grid { grid-template-columns: 1fr; }
  .deadline-preset-buttons { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .reminder-banner { align-items: flex-start; flex-wrap: wrap; }
  .reminder-banner > div { flex-basis: calc(100% - 39px); }
  .reminder-banner .button { width: calc(100% - 39px); margin-left: 39px; }
  h1 { font-size: 18px; }
  .mountain-hero { min-height: 470px; padding: 82px 20px 25px; }
  .mountain-hero.has-next-companion { padding-top: 104px; }
  .hero-copy { z-index: 7; }
  .hero-copy h2 { font-size: 31px; }
  .hero-actions { position: relative; z-index: 7; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; max-width: 326px; }
  .hero-actions .button { width: auto; min-height: 40px; padding-right: 8px; padding-left: 8px; }
  .hero-actions .button-map-action { grid-column: 1 / -1; }
  .hero-next-step { align-items: flex-start; }
  .hero-next-step-copy strong, .hero-next-step-copy small { display: -webkit-box; overflow: hidden; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .hero-next-step-action { align-self: center; min-height: 40px; padding-right: 10px; padding-left: 10px; }
  .hero-forecast-detail-button { min-height: 38px; }
  .mountain-scene { top: 212px; left: 0; opacity: .84; }
  .mascot-image { right: 1%; bottom: -22px; width: 165px; }
  .hero-progress-forecast { position: relative; top: auto; right: auto; bottom: auto; width: auto; min-width: 0; margin: 16px 0 0; transform: none; }
  .hero-progress-forecast .hero-forecast-chart { height: 64px; }
  .summit-label { top: 15px; right: 16px; left: 16px; justify-content: center; gap: 7px; padding: 7px 9px; }
  .summit-label div { min-width: 0; }
  .summit-label small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .stats-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 12px; }
  .stats-strip .stat-block-xp { grid-column: span 2; }
  .companion-card { padding: 18px; }
  .chest-page-stage { grid-template-columns: 1fr; min-height: 0; padding: 23px 18px 16px; }
  .chest-page-stage h3 { max-width: 290px; font-size: 22px; }
  .chest-page-stage-art { min-height: 135px; margin-top: -3px; }
  .chest-page-stage-art .chest-art { width: 150px; height: 128px; }
  .chest-page-stats { margin-right: 18px; margin-left: 18px; }
  .chest-page-stats > div { padding: 13px 8px; }
  .chest-page-stats strong { font-size: 15px; }
  .chest-page-progress, .chest-drop-table { margin-right: 18px; margin-left: 18px; }
  .chest-page-actions { flex-direction: column; }
  .chest-page-wait { justify-content: center; width: 100%; }
  .chest-drop-table { grid-template-columns: 1fr; }
  .chest-drop-table strong { grid-column: auto; }
  .companion-corner-link { align-items: stretch; flex-direction: column; }
  .companion-corner-link .button { width: 100%; }
  .companion-chest-corner { grid-template-columns: 46px minmax(0, 1fr); }
  .companion-chest-corner > .chest-art { transform: scale(.72); transform-origin: left center; margin-right: -20px; }
  .companion-chest-corner .button { grid-column: 2; width: 100%; }
  .companion-treasure { grid-template-columns: 1fr 1fr; }
  .companion-treasure > div:last-of-type { grid-column: 1 / -1; }
  .companion-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .companion-option { padding: 7px; }
  .companion-option-image { height: 78px; }
  .stat-block { padding: 13px 12px; }
  .stat-block strong { font-size: 17px; }
  .stat-symbol { width: 27px; height: 27px; }
  .streak-week-card { position: relative; align-items: flex-start; flex-wrap: wrap; gap: 10px; margin-top: -5px; padding: 12px; }
  .streak-week-copy { flex: 1 1 100%; padding-right: 48px; }
  .streak-week-days { flex-basis: 100%; gap: 4px; }
  .streak-week-dot { width: 23px; height: 23px; }
  .streak-week-badge { position: absolute; top: 12px; right: 12px; }
  .climb-card, .route-card, .materials-card, .timer-card, .joy-card, .quest-card, .rule-card, .timer-large-card, .timer-guide-card { padding: 18px; }
  .card-heading { align-items: flex-start; flex-direction: column; }
  .card-heading-tight { align-items: center; flex-direction: row; }
  .conversion-chip { align-self: flex-start; }
  .record-toolbar { align-items: flex-start; flex-wrap: wrap; }
  .record-toolbar label, .record-toolbar select { flex-basis: 100%; }
  .record-toolbar select { max-width: none; height: 40px; }
  .record-toolbar span { flex-basis: 100%; padding-left: 0; }
  .study-intent-button, .quick-record { min-height: 38px; }
  .page-log-form { align-items: stretch; flex-direction: column; }
  .page-log-form .button { width: 100%; }
  .quick-record-note { display: none; }
  .quick-records { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .quick-record { width: 100%; padding-right: 4px; padding-left: 4px; }
  .text-button { min-height: 32px; padding-top: 4px; padding-bottom: 4px; }
  .link-button { min-height: 34px; }
  .activity-undo { min-height: 32px; }
  .record-result { flex-wrap: wrap; gap: 10px; }
  .record-progress { flex-basis: 100%; }
  .record-progress small { text-align: left; }
  .route-map { height: 182px; }
  .route-node { width: 59px; font-size: 8px; }
  .route-footer { flex-wrap: wrap; gap: 7px 11px; }
  .route-next-summit { flex-basis: 100%; text-align: right; }
  .route-heading-actions { width: 100%; justify-content: space-between; }
  .material-grid { grid-template-columns: 1fr; }
  .material-grid .material-tile:nth-child(n+3) { display: none; }
  .home-side-column { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .home-side-column .timer-card,
  .home-side-column .joy-card,
  .home-side-column .quest-card,
  .home-side-column .rule-card { grid-column: auto; grid-row: auto; min-width: 0; padding: 12px; }
  .home-side-column .timer-card .card-heading-tight { gap: 5px; }
  .home-side-column .timer-card .card-heading-tight h3 { font-size: 12px; letter-spacing: -.05em; white-space: nowrap; }
  .home-side-column .timer-day-total { align-items: flex-start; flex-direction: column; gap: 2px; margin-top: 8px; padding: 7px 8px; }
  .home-side-column .timer-day-total strong { font-size: 16px; }
  .home-side-column .timer-day-total > small { display: none; }
  .home-side-column .timer-tabs { margin-top: 8px; padding: 3px; }
  .home-side-column .timer-tab { min-height: 34px; padding: 0 2px; font-size: 8px; white-space: nowrap; }
  .home-side-column .timer-display { margin: 11px 0 5px; font-size: 32px; }
  .home-side-column .timer-status { overflow: hidden; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
  .home-side-column .timer-actions { flex-direction: row; gap: 5px; margin-top: 9px; }
  .home-side-column .timer-actions .button { width: auto; min-width: 0; min-height: 36px; padding-right: 4px; padding-left: 4px; font-size: 8px; white-space: nowrap; }
  .home-side-column .timer-note { display: none; }
  .home-side-column .timer-reset { min-height: 30px; margin-top: 4px; padding: 3px 4px; font-size: 8px; }
  .home-side-column .joy-card-top { align-items: flex-start; gap: 8px; }
  .home-side-column .joy-icon { width: 30px; height: 30px; border-radius: 10px; font-size: 17px; }
  .home-side-column .joy-card h3 { font-size: 12px; line-height: 1.3; }
  .home-side-column .joy-card p { margin-top: 9px; font-size: 9px; line-height: 1.45; }
  .home-side-column .joy-meter { margin-top: 11px; padding-top: 8px; font-size: 8px; }
  .home-side-column .joy-meter strong { font-size: 10px; }
  .home-side-column .quest-card .card-heading-tight { align-items: flex-start; flex-direction: column; gap: 6px; }
  .home-side-column .quest-card .section-kicker { margin-bottom: 3px; font-size: 7px; }
  .home-side-column .quest-card h3 { font-size: 12px; }
  .home-side-column .quest-header-badges { justify-content: space-between; width: 100%; }
  .home-side-column .quest-summary { min-width: 0; padding: 4px 6px; font-size: 9px; }
  .home-side-column .quest-reward-total { padding: 4px 6px; font-size: 8px; }
  .home-side-column .quest-list { gap: 8px; margin-top: 10px; }
  .home-side-column .quest-item { gap: 6px; }
  .home-side-column .quest-icon { width: 22px; height: 22px; border-radius: 7px; font-size: 11px; }
  .home-side-column .quest-copy { gap: 4px; }
  .home-side-column .quest-copy strong { display: -webkit-box; overflow: hidden; font-size: 8px; line-height: 1.25; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .home-side-column .quest-progress { height: 4px; }
  .home-side-column .quest-reward, .home-side-column .quest-count { font-size: 8px; }
  .home-side-column .quest-note { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px; margin-top: 8px; padding: 6px 7px; font-size: 8px; line-height: 1.35; }
  .home-side-column .quest-note-copy { flex-basis: auto; }
  .home-side-column .quest-note-action { min-height: 30px; padding: 3px 0 3px 3px; font-size: 8px; }
  .home-side-column .weekly-quest { margin-top: 7px; padding: 7px 8px; }
  .home-side-column .weekly-quest-top { align-items: baseline; gap: 5px; }
  .home-side-column .weekly-quest-top > div { display: flex; align-items: baseline; gap: 4px; }
  .home-side-column .weekly-quest-kicker { flex: 0 0 auto; font-size: 7px; white-space: nowrap; }
  .home-side-column .weekly-quest-top strong { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
  .home-side-column .weekly-quest-badge { padding: 4px 5px; font-size: 8px; }
  .home-side-column .weekly-quest-progress { height: 4px; margin-top: 6px; }
  .home-side-column .weekly-quest small { display: none; }
  .home-side-column .timer-result small { display: -webkit-box; overflow: hidden; line-height: 1.3; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .home-side-column .rule-card .card-heading-tight > div { min-width: 0; }
  .home-side-column .rule-card .card-heading-tight h3 { font-size: 13px; letter-spacing: -.04em; white-space: nowrap; }
  .home-side-column .rule-card .rule-badge { padding-right: 6px; padding-left: 6px; font-size: 8px; }
  .home-side-column .rule-row { gap: 6px; padding: 8px 0; }
  .home-side-column .rule-icon { width: 23px; height: 23px; border-radius: 7px; font-size: 11px; }
  .home-side-column .rule-row strong { font-size: 8px; }
  .home-side-column .rule-row small, .home-side-column .rule-row em { font-size: 7px; }
  .home-side-column .rule-card > p { display: none; }
  .subpage-heading { align-items: flex-start; flex-direction: column; }
  .subpage-actions { align-items: stretch; flex-direction: column; width: 100%; }
  .subpage-heading .button { width: 100%; }
  .subpage-actions { gap: 8px; }
  .library-summary { grid-template-columns: repeat(2, 1fr); }
  .plan-insight { grid-template-columns: repeat(3, 1fr); }
  .plan-insight-progress { grid-column: 1 / -1; }
  .forecast-heading { align-items: stretch; flex-direction: column; gap: 9px; }
  .forecast-material-picker { flex-basis: auto; }
  .forecast-material-picker select { height: 40px; font-size: 12px; }
  .forecast-summary { display: grid; gap: 4px; }
  .forecast-chart { overflow-x: hidden; }
  .forecast-chart svg { width: 100%; min-width: 0; height: auto; }
  .forecast-axis-label, .forecast-date-label { font-size: clamp(10px, 2.8vw, 13px); }
  .library-grid { grid-template-columns: 1fr; }
  .material-filter-tools { grid-template-columns: 1fr 1fr; }
  .material-filter-tools label:first-child { grid-column: 1 / -1; }
  .timer-large-card { min-height: 390px; }
  .timer-tabs button { min-height: 40px; }
  .timer-actions { flex-direction: column; }
  .timer-actions .button { width: 100%; min-height: 42px; }
  .timer-guide-rule { flex-wrap: wrap; }
  .form-two-col { grid-template-columns: 1fr; }
  .form-actions { flex-direction: column-reverse; }
  .form-actions .button { width: 100%; min-height: 42px; }
  #addMaterialModal .form-actions { position: static; margin: 8px 0 0; padding: 0; border-top: 0; background: transparent; backdrop-filter: none; }
  .setting-row-goal { align-items: flex-start; flex-direction: column; }
  .goal-options { width: 100%; }
  .goal-options button { flex: 1; }
  .setting-row-objective { align-items: stretch; flex-direction: column; gap: 10px; }
  .setting-row-objective .button { align-self: flex-start; }
  .setting-row-backup { flex-direction: column; gap: 10px; }
  .backup-actions { justify-content: flex-start; width: 100%; }
 .setting-row-rest { flex-direction: column; }
 .setting-row-freeze { flex-direction: column; gap: 8px; }
  .freeze-actions { justify-content: space-between; width: 100%; }
  .setting-row-date { align-items: flex-start; flex-direction: column; }
  .setting-row-date input { width: 100%; }
  .rest-day-options { justify-content: flex-start; max-width: none; width: 100%; }
  .mountain-map-title-row { flex-direction: column; gap: 0; }
  .mountain-map-title-row h2 { margin-top: 18px; }
  .map-stage-badge { margin-top: 0; }
  .map-window-controls { flex-wrap: wrap; }
  .map-window-controls span { order: -1; flex-basis: 100%; }
  .map-window-controls .button { flex: 1; }
  .map-window-controls .button { min-height: 38px; }
  .map-zoom-button { width: 38px; height: 38px; border-radius: 9px; font-size: 20px; }
  .mountain-overview { height: min(68vh, 520px); min-height: 390px; }
  .overview-node { width: 48px; }
  .overview-node > span { font-size: 7px; }
  .overview-node > small { font-size: 7px; }
  .overview-node-marker { width: 30px; height: 30px; font-size: 10px; }
  .overview-legend { right: 9px; left: 9px; flex-wrap: wrap; justify-content: space-between; gap: 4px; font-size: 7px; }
  .overview-legend small { flex-basis: 100%; text-align: right; }
  .overview-summary { grid-template-columns: repeat(2, 1fr); }
  .map-moti { width: 39px; height: 39px; }
  .map-auto-label { top: 9px; left: 10px; font-size: 8px; }
  .map-zoom-controls { top: 9px; right: 9px; }
  .map-touch-hint { right: 9px; bottom: 9px; left: 9px; text-align: center; }
  .overview-summary > div { padding: 10px 8px; }
  .overview-summary strong { font-size: 9px; }
  .camp-story { padding: 11px 12px; }
  .camp-story p { font-size: 9px; }
  .camp-album-grid { grid-template-columns: repeat(2, 1fr); }
  .camp-album-item { padding: 8px; }
  .achievement-grid { grid-template-columns: repeat(2, 1fr); }
  .achievement-item { padding: 8px; }
  .history-range-tools { align-items: stretch; flex-direction: column; gap: 8px; }
  .history-range { width: 100%; }
  .history-range button { flex: 1; min-height: 38px; }
  .history-range > span { align-self: center; }
  .library-card-footer { align-items: stretch; flex-direction: column; gap: 11px; }
  .library-actions { justify-content: stretch; }
  .library-actions .link-button, .library-actions .button { flex: 1; min-width: 0; min-height: 38px; }
  .setting-row-objective .button { width: 100%; }
  .page-footer { align-items: flex-start; flex-direction: column; }
  .chest-popup { top: 50%; left: 50%; right: auto; bottom: auto; width: calc(100vw - 24px); padding: 15px; }
  .chest-popup-body { grid-template-columns: 112px minmax(0, 1fr); min-height: 112px; gap: 8px; }
  .chest-popup-body h2 { font-size: 18px; }
  .chest-art { width: 112px; height: 112px; }
  .chest-popup-actions { flex-direction: column; }
  .chest-popup-actions .button { width: 100%; }
}

@media (max-width: 340px) {
  .home-side-column { gap: 8px; }
  .home-side-column .rule-card .card-heading-tight { gap: 6px; }
  .home-side-column .rule-card .card-heading-tight h3 { font-size: 11px; letter-spacing: -.06em; }
  .home-side-column .rule-card .rule-badge { padding-right: 4px; padding-left: 4px; font-size: 7px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}