:root {
  --ink: #172831; --muted: #65747b; --paper: #f4f3ef; --surface: #fffefa;
  --line: #e5e6df; --navy: #123c42; --blue: #366a78; --blue-soft: #e6efef;
  --orange: #d47739; --orange-soft: #faebda; --green: #287762; --red: #a94438;
  --shadow: 0 10px 28px rgba(18, 44, 50, .05);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--ink); background: var(--paper); font-synthesis: none; -webkit-text-size-adjust: 100%;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--paper); }
body { min-width: 280px; }
button, input, textarea, select { font: inherit; }
button { border: 0; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: default; opacity: .5; }
button:focus-visible, a:focus-visible, select:focus-visible { outline: 3px solid #d7a762; outline-offset: 3px; }
input, textarea { -webkit-appearance: none; }
.icon { width: 22px; height: 22px; flex: 0 0 22px; vertical-align: middle; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; white-space: nowrap; }
.eyebrow { display: block; color: var(--muted); font-size: 11px; line-height: 1.5; letter-spacing: .06em; }
.brand-lockup { display: flex; align-items: center; gap: 12px; }
.brand-lockup strong { display: block; font-size: 23px; letter-spacing: .02em; }
.brand-lockup small { display: block; color: var(--muted); margin-top: 4px; font-size: 11px; }
.brand-icon { width: 49px; height: 49px; display: grid; place-items: center; border-radius: 17px; background: var(--navy); color: #f9e5c6; font-size: 26px; font-weight: 800; }
.launch-screen, .connection-screen { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: max(30px, env(safe-area-inset-top)) 24px max(30px, env(safe-area-inset-bottom)); }
.launch-screen { color: var(--surface); background: var(--navy); }
.launch-screen .brand-lockup small { color: #aec6c4; }
.launch-screen .brand-icon { color: var(--navy); background: #edc78e; }
.launch-screen > p { color: #b7cbc9; font-size: 13px; margin-top: 22px; }
.loading-line { display: flex; gap: 8px; margin-top: 42px; }
.loading-line i { width: 6px; height: 6px; background: #e6bf83; border-radius: 50%; animation: pulse 1.4s infinite; }
.loading-line i:nth-child(2) { animation-delay: .15s; }.loading-line i:nth-child(3) { animation-delay: .3s; }
@keyframes pulse { 50% { opacity: .3; transform: translateY(-3px); } }
.auth-screen { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: max(26px, env(safe-area-inset-top)) 22px max(26px, env(safe-area-inset-bottom)); background: radial-gradient(ellipse at 100% 0%, #dfebe5, transparent 60%), var(--paper); }
.auth-card { width: 100%; max-width: 430px; padding: 18px 6px; }
.auth-copy { margin: 56px 0 34px; }
.auth-copy h1 { font-size: clamp(29px, 8vw, 37px); line-height: 1.35; letter-spacing: -.035em; margin: 13px 0 16px; font-weight: 750; }
.auth-copy > p { color: var(--muted); font-size: 14px; line-height: 1.8; margin: 0; }
.login-form { display: grid; gap: 10px; }
.login-form label { font-size: 13px; font-weight: 650; color: #42555a; margin-top: 6px; }
.login-form input { width: 100%; min-height: 52px; border: 1px solid #d9dfd9; border-radius: 13px; color: var(--ink); background: rgba(255,255,255,.82); padding: 13px 16px; outline: 0; font-size: 16px; }
.login-form input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(54,106,120,.09); }
.login-form .primary-action { margin-top: 12px; }
.primary-action, .secondary-action, .hero-action { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 13px 18px; border-radius: 13px; font-size: 14px; font-weight: 700; text-decoration: none; }
.primary-action { background: var(--navy); color: #fffefa; }
.primary-action.full, .secondary-action.full { width: 100%; }
.primary-action.compact { min-height: 44px; padding: 10px 17px; font-size: 13px; }
.secondary-action { background: var(--blue-soft); color: var(--navy); }
.hero-action { background: #edc78e; color: #193a3d; min-height: 44px; padding: 10px 14px; font-size: 13px; }
.hero-action .icon, .primary-action .icon { width: 18px; height: 18px; flex-basis: 18px; }
.auth-foot { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 26px; color: var(--muted); font-size: 11px; }
.auth-foot .icon { width: 15px; height: 15px; flex-basis: 15px; }
.form-error, .inline-error { background: #fbece8; color: var(--red); border: 1px solid #f0d1c9; font-size: 13px; line-height: 1.65; border-radius: 12px; padding: 11px 13px; }
.inline-error { margin: 0 0 14px; }
.inline-error p { margin: 0; }.inline-error .text-button { color: var(--red); }
.app-page { min-height: 100vh; min-height: 100dvh; padding-bottom: calc(82px + env(safe-area-inset-bottom)); }
.mobile-header { min-height: 82px; display: flex; align-items: center; gap: 10px; padding: max(18px, env(safe-area-inset-top)) 20px 13px; background: rgba(244,243,239,.96); position: sticky; top: 0; z-index: 10; backdrop-filter: blur(18px); }
.header-copy { flex: 1; min-width: 0; }.header-copy h1 { margin: 4px 0 0; font-size: 23px; line-height: 1.4; letter-spacing: -.035em; font-weight: 750; overflow-wrap: anywhere; }
.avatar-button { width: 44px; height: 44px; flex: 0 0 44px; color: var(--navy); background: #dfe9df; border: 2px solid #fffdf9; border-radius: 50%; font-weight: 750; font-size: 17px; }
.icon-button { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 10px; color: var(--navy); background: transparent; border-radius: 12px; }
.page-body { max-width: 640px; margin: 0 auto; padding: 8px 18px 28px; }
.environment-pill { display: inline-flex; align-items: center; padding: 5px 9px; font-size: 10px; border-radius: 6px; color: #7e623c; background: #f3e8d6; margin: 0 0 12px; letter-spacing: .02em; }
.environment-pill.live { color: #4e6f65; background: #e7eee8; }
.project-card { display: flex; align-items: center; gap: 12px; padding: 14px 15px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); }
.project-badge { display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 42px; border-radius: 13px; color: var(--navy); background: var(--blue-soft); }
.project-copy { flex: 1; min-width: 0; }.project-copy h2 { font-size: 16px; margin: 3px 0; }.project-copy p { font-size: 11px; color: var(--muted); margin: 3px 0; }
.project-switch { max-width: 110px; }.project-switch select { min-height: 44px; max-width: 110px; border: 0; background: #edf1eb; color: var(--navy); border-radius: 10px; padding: 8px; font-size: 12px; }
.hero-card { position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px; min-height: 224px; margin-top: 16px; padding: 23px 20px; border-radius: 23px; background: var(--navy); color: #fffcf6; box-shadow: 0 10px 24px rgba(18,60,66,.13); }
.hero-card::after { content: ''; position: absolute; width: 190px; height: 190px; right: -110px; top: -110px; border: 25px solid rgba(237,199,142,.08); border-radius: 50%; pointer-events: none; }
.hero-main { flex: 1; min-width: 0; }.hero-kicker { display: inline-block; color: #e6c79c; font-size: 11px; }
.hero-card h2 { font-size: 23px; line-height: 1.45; margin: 10px 0 9px; letter-spacing: -.03em; }
.hero-card p { color: #bacfcb; font-size: 12px; line-height: 1.8; margin: 0 0 19px; }
.hero-score { width: 66px; flex: 0 0 66px; text-align: center; align-self: flex-start; border-top: 2px solid #d5af77; padding-top: 13px; margin-top: 30px; }
.hero-score strong { font-size: 33px; font-weight: 600; line-height: 1; }.hero-score span { display: block; color: #b9cfc9; font-size: 10px; margin-top: 9px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 26px 1px 12px; }
.section-heading h2 { display: flex; align-items: center; gap: 7px; font-size: 17px; margin: 4px 0 0; letter-spacing: -.025em; }
.text-button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; color: var(--blue); background: transparent; font-size: 12px; font-weight: 650; padding: 8px 4px; }
.text-button .icon { width: 15px; height: 15px; flex-basis: 15px; }
.status-pill { display: inline-block; padding: 5px 8px; white-space: nowrap; font-size: 10px; font-weight: 600; border-radius: 6px; color: #9b6234; background: var(--orange-soft); }
.status-pill.green { color: var(--green); background: #e1eee5; }
.stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.stat-card { padding: 16px 12px; min-height: 94px; border: 1px solid var(--line); background: var(--surface); border-radius: 15px; }
.stat-card > strong { display: block; color: var(--navy); font-size: 27px; letter-spacing: -.05em; line-height: 1.25; font-weight: 650; overflow-wrap: anywhere; }.stat-card strong > small { font-size: 11px; margin-left: 3px; font-weight: 500; color: var(--muted); }
.stat-card > span { display: block; font-size: 10px; margin-top: 9px; color: var(--muted); line-height: 1.5; }
.task-list, .history-list, .project-list { display: grid; gap: 11px; }
.task-list { grid-template-columns: minmax(0, 1fr); min-width: 0; }
.task-card { width: 100%; max-width: 100%; min-width: 0; min-height: 104px; display: flex; align-items: center; gap: 10px; padding: 15px 12px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 17px; text-align: left; }
.task-icon { display: grid; place-items: center; width: 40px; height: 44px; flex: 0 0 40px; color: #b96d36; background: var(--orange-soft); border-radius: 12px; }.task-icon.green { color: var(--green); background: #e1eee5; }
.task-content { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; overflow-wrap: anywhere; }.task-content > strong { font-size: 13px; line-height: 1.6; }.task-content > small, .task-tags { font-size: 10px; line-height: 1.5; color: var(--muted); }
.task-end { display: grid; gap: 8px; justify-items: end; flex: 0 0 auto; min-width: 0; max-width: 58px; color: var(--blue); }.task-end .icon { width: 17px; height: 17px; }.status-text { font-size: 10px; line-height: 1.5; white-space: normal; overflow-wrap: anywhere; text-align: right; }
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 230px; padding: 34px 22px; text-align: center; }
.empty-icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 18px; background: #e7eee5; color: var(--blue); margin-bottom: 17px; }
.empty-state h1, .empty-state h2 { font-size: 18px; line-height: 1.5; margin: 0 0 10px; }.empty-state > p { max-width: 330px; font-size: 13px; line-height: 1.8; color: var(--muted); margin: 0 0 22px; }
.loading-copy { font-size: 13px; color: var(--muted); text-align: center; padding: 20px; }
.project-row { display: flex; width: 100%; min-height: 82px; text-align: left; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--line); background: var(--surface); border-radius: 16px; color: var(--ink); }
.project-row > span:nth-child(2) { flex: 1; min-width: 0; }.project-row strong { display: block; font-size: 14px; }.project-row small { display: block; font-size: 11px; color: var(--muted); margin-top: 6px; }
.info-note { display: flex; align-items: flex-start; gap: 9px; padding: 16px 3px; color: var(--muted); }.info-note > .icon { width: 17px; height: 17px; flex-basis: 17px; margin-top: 2px; }.info-note p { margin: 0; font-size: 12px; line-height: 1.8; }
.training-page { padding-top: 3px; }.training-page > .environment-pill { margin-bottom: 9px; }
.training-goal { background: #e4ede7; border: 1px solid #dce6dc; border-radius: 15px; padding: 14px; }.training-goal > span { color: #507268; font-size: 10px; }.training-goal > strong { display: block; font-size: 14px; line-height: 1.7; margin-top: 5px; }.training-goal > p { font-size: 12px; line-height: 1.8; color: var(--muted); margin: 8px 0 0; }
.conversation-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 20px 1px 14px; }.owner-identity { display: flex; align-items: center; gap: 9px; }.owner-identity strong { display: block; font-size: 14px; }.owner-identity small { display: block; font-size: 10px; color: var(--muted); margin-top: 4px; }
.person-avatar { width: 37px; height: 37px; flex: 0 0 37px; display: grid; place-items: center; border-radius: 50%; background: var(--orange-soft); color: #a76632; font-size: 15px; font-weight: 700; }
.emotion-tag { font-size: 10px; border: 1px solid #dddccf; border-radius: 6px; padding: 6px 8px; color: #7a7654; max-width: 120px; }
.conversation { display: flex; flex-direction: column; gap: 17px; padding: 1px 0 21px; }
.message { max-width: 90%; width: fit-content; }.message-bubble { padding: 13px 15px; font-size: 14px; line-height: 1.9; white-space: pre-wrap; overflow-wrap: anywhere; }
.owner-msg { align-self: flex-start; }.owner-msg .message-bubble { background: var(--surface); border: 1px solid #e1e5dc; border-radius: 4px 17px 17px 17px; }
.trainee-msg { align-self: flex-end; }.trainee-msg .message-bubble { color: #f7fcf7; background: var(--navy); border-radius: 17px 4px 17px 17px; }
.message-meta { color: #7f8a8c; font-size: 9px; line-height: 1.6; margin: 5px 3px 0; }.trainee-msg .message-meta { text-align: right; }
.reply-card { padding: 12px; background: var(--surface); border: 1px solid #dce2d7; border-radius: 17px; box-shadow: var(--shadow); }
.reply-card textarea { width: 100%; min-height: 76px; max-height: 200px; border: 0; border-radius: 0; resize: vertical; outline: 0; background: transparent; color: var(--ink); padding: 3px 2px; font-size: 16px; line-height: 1.65; }
.reply-controls { display: flex; gap: 10px; justify-content: space-between; align-items: center; }.draft-hint { font-size: 10px; color: var(--muted); }
.training-tools { display: flex; flex-wrap: wrap; gap: 5px 12px; align-items: center; justify-content: space-between; margin-top: 9px; }.assist-capsule { min-height: 44px; max-width: 100%; display: flex; gap: 7px; align-items: center; padding: 9px 11px; border-radius: 22px; color: var(--blue); background: #e6eeeb; font-size: 11px; }.assist-capsule .icon { width: 15px; height: 15px; flex-basis: 15px; }.assist-capsule > small { color: #70867d; font-size: 9px; }.quiet-label { color: var(--muted); font-size: 11px; }.finish-training { color: #7c6c5a; }
.session-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 8px 0 0; border-top: 1px solid var(--line); padding-top: 5px; }.session-actions .text-button { font-size: 10px; color: #7b8983; }.session-actions .text-button:last-child { color: #977454; }
.sheet-backdrop { position: fixed; inset: 0; background: rgba(10,34,37,.46); z-index: 60; display: flex; justify-content: center; align-items: flex-end; padding: 18px 13px max(13px, env(safe-area-inset-bottom)); }.confirm-sheet { width: 100%; max-width: 520px; padding: 12px 22px 22px; border-radius: 25px; background: var(--surface); box-shadow: 0 20px 80px rgba(0,0,0,.2); }.sheet-handle { display: block; height: 4px; width: 36px; border-radius: 2px; background: #d5ddd3; margin: 0 auto 21px; }.confirm-sheet h2 { font-size: 21px; line-height: 1.5; margin: 0 0 12px; }.confirm-sheet > p { font-size: 13px; color: #526a62; line-height: 1.9; margin: 8px 0 16px; }.confirm-sheet > p.sheet-note { color: var(--muted); font-size: 11px; }.confirm-sheet .secondary-action { margin-top: 10px; }
.submitted-card { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 16px; border: 1px solid #d6e4d7; border-radius: 16px; background: #e9f1e6; color: var(--green); }.submitted-card > div { flex: 1; min-width: 160px; }.submitted-card strong { font-size: 14px; }.submitted-card p { margin: 7px 0 0; font-size: 11px; line-height: 1.6; color: var(--muted); }.submitted-card .secondary-action { margin-left: auto; }
.typing { display: flex; gap: 5px; align-items: center; padding: 12px 15px; border-radius: 16px; background: #e9eee8; color: var(--muted); }.typing > i { width: 4px; height: 4px; background: #7b938b; border-radius: 50%; animation: pulse 1.4s infinite; }.typing > i:nth-child(2) { animation-delay: .2s; }.typing > i:nth-child(3) { animation-delay: .4s; }.typing > span { margin-left: 6px; font-size: 10px; }
.hints-panel { margin-top: 12px; border: 1px solid #d6e4da; border-radius: 18px; background: #edf4ec; padding: 15px; }.hints-panel .section-heading { margin: 0; }.hints-panel h2 { color: var(--green); font-size: 14px; }.hints-panel h2 .icon { width: 17px; height: 17px; }.method-note { font-size: 10px; color: #6c8476; margin: 0 0 14px; }.hint-item { margin-top: 12px; border-top: 1px solid #dbe7d9; padding-top: 12px; }.hint-item > strong { color: #35654b; font-size: 12px; }.hint-item > p { font-size: 12px; line-height: 1.8; margin: 5px 0 0; color: #506d5a; }
.growth-banner { margin-top: 3px; min-height: 166px; border-radius: 20px; padding: 21px; background: #e1ebe1; color: var(--navy); }.growth-banner > strong { display: block; font-size: 46px; line-height: 1.2; margin: 12px 0 6px; letter-spacing: -.04em; font-weight: 600; }.growth-banner strong > small { font-size: 13px; margin-left: 6px; }.growth-banner > span:last-child { font-size: 12px; color: #587665; }
.history-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; text-align: left; border: 1px solid var(--line); background: var(--surface); border-radius: 17px; padding: 17px 15px; color: var(--ink); }.history-card h3 { font-size: 14px; line-height: 1.6; margin: 9px 0 6px; }.history-card p { font-size: 10px; color: var(--muted); margin: 0; line-height: 1.7; }.history-score { min-width: 43px; font-size: 28px; font-weight: 600; color: var(--navy); }.history-score > small { font-size: 10px; margin-left: 4px; font-weight: 400; }
.report-score-card { padding: 29px 22px 26px; color: #faf9f2; background: var(--navy); border-radius: 22px; text-align: center; }.report-score-card > span { font-size: 12px; color: #b8cec8; }.report-score-card > strong { display: block; font-size: 69px; line-height: 1.2; margin: 13px 0 3px; font-weight: 600; }.report-score-card strong > small { font-size: 13px; margin-left: 5px; }.report-score-card h2 { font-size: 17px; color: #e5c28c; margin: 4px 0 12px; }.report-score-card p { color: #b5ccc4; font-size: 10px; line-height: 1.7; margin: 0; }
.ranking-note { display: flex; gap: 7px; align-items: flex-start; color: var(--muted); font-size: 11px; line-height: 1.8; padding: 15px 5px; }.ranking-note .icon { width: 15px; height: 15px; flex-basis: 15px; margin-top: 2px; }
.dimension-list { padding: 18px 17px; background: var(--surface); border: 1px solid var(--line); border-radius: 17px; display: grid; gap: 19px; }.dimension > div:first-child { display: flex; justify-content: space-between; align-items: center; font-size: 12px; margin-bottom: 10px; }.dimension-track { background: #e6ece4; height: 6px; border-radius: 3px; overflow: hidden; }.dimension-track > i { display: block; height: 100%; background: #6d9882; border-radius: 3px; }
.trend-chart { display: flex; align-items: flex-end; justify-content: space-around; gap: 8px; padding: 17px 16px; min-height: 155px; background: var(--surface); border: 1px solid var(--line); border-radius: 17px; }.trend-chart > div { display: flex; min-width: 28px; flex-direction: column; align-items: center; gap: 7px; }.trend-chart i { display: block; width: 24px; max-width: 100%; border-radius: 5px 5px 2px 2px; background: #a3bea8; }.trend-chart strong, .trend-chart span { font-size: 9px; color: var(--muted); font-weight: 500; }
.review-card { padding: 18px 17px; margin: 17px 0; background: #e8efe5; border-radius: 17px; }.review-card.warm { background: #f5eadb; }.review-card h2 { margin: 0 0 13px; font-size: 15px; }.review-card > p { display: flex; gap: 8px; font-size: 12px; line-height: 1.8; color: #586b5c; margin: 10px 0 0; }.review-card.warm > p { color: #7c694f; }.review-card .icon { width: 15px; height: 15px; flex-basis: 15px; margin-top: 3px; }
.profile-card { display: flex; align-items: center; gap: 15px; padding: 24px 20px; color: #f6f6ee; background: var(--navy); border-radius: 21px; }.profile-avatar { width: 58px; height: 58px; flex: 0 0 58px; display: grid; place-items: center; border-radius: 50%; background: #d6dfbf; color: var(--navy); font-size: 24px; font-weight: 600; border: 3px solid rgba(255,255,255,.17); }.profile-card h2 { margin: 0 0 8px; font-size: 21px; }.profile-card p { margin: 0; color: #b9cec5; font-size: 12px; }
.profile-details { margin-top: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 17px; padding: 4px 17px; }.profile-details dl { margin: 0; }.profile-details dl > div { display: flex; align-items: center; justify-content: space-between; gap: 15px; min-height: 57px; border-bottom: 1px solid #ebeee7; }.profile-details dl > div:last-child { border: 0; }.profile-details dt { font-size: 12px; color: var(--muted); }.profile-details dd { margin: 0; font-size: 13px; text-align: right; line-height: 1.6; overflow-wrap: anywhere; }
.logout-button { min-height: 50px; width: 100%; display: flex; justify-content: center; align-items: center; gap: 8px; color: #a6513b; background: #f8eee8; border: 1px solid #ecded2; border-radius: 13px; font-size: 13px; }.logout-button .icon { width: 17px; height: 17px; flex-basis: 17px; }.version-copy { color: #8a928e; text-align: center; font-size: 10px; line-height: 1.9; margin: 28px 0 0; }
.bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; justify-content: space-around; gap: 3px; padding: 8px 9px max(8px, env(safe-area-inset-bottom)); border-top: 1px solid #e1e5dc; background: rgba(255,254,250,.96); backdrop-filter: blur(18px); }
.bottom-nav > button { flex: 1; max-width: 100px; min-width: 44px; min-height: 53px; padding: 7px 4px 5px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; border-radius: 13px; background: transparent; color: #86918c; font-size: 10px; }.bottom-nav .icon { width: 21px; height: 21px; }.bottom-nav > button.active { color: var(--navy); background: #e9efe6; font-weight: 750; }
.offline-bar { position: fixed; z-index: 30; bottom: calc(78px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); max-width: calc(100% - 30px); padding: 9px 14px; border: 1px solid #e7d8bb; border-radius: 20px; color: #856443; background: #fcf2df; font-size: 10px; white-space: nowrap; }
.toast { position: fixed; z-index: 40; bottom: calc(88px + env(safe-area-inset-bottom)); left: 18px; right: 18px; max-width: 540px; margin: 0 auto; padding: 13px 16px; color: #fafcf7; background: rgba(18,60,66,.97); border-radius: 14px; box-shadow: var(--shadow); text-align: center; font-size: 12px; line-height: 1.8; }
@media (min-width: 700px) { .app-page { max-width: 720px; margin: auto; border-inline: 1px solid #e6e8df; }.mobile-header { padding-inline: 28px; }.page-body { padding: 10px 28px 35px; }.bottom-nav { max-width: 720px; margin-inline: auto; }.auth-card { max-width: 430px; }.hero-card { min-height: 230px; padding: 28px; }.hero-card h2 { font-size: 27px; }.hero-score { width: 94px; flex-basis: 94px; }.hero-score strong { font-size: 45px; } }
@media (max-width: 350px) { .page-body { padding-inline: 13px; }.mobile-header { padding-inline: 15px; }.header-copy h1 { font-size: 21px; }.hero-card { padding: 18px 16px; }.hero-card h2 { font-size: 21px; }.hero-score { width: 52px; flex-basis: 52px; }.hero-score strong { font-size: 29px; }.stat-card { padding: 14px 9px; }.stat-card > strong { font-size: 24px; }.task-end { max-width: 43px; }.task-card { gap: 8px; padding-inline: 10px; }.assist-capsule small { display: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; scroll-behavior: auto !important; } }