/* 三套主题只切换配色；原有页面顺序、尺寸和间距共用下方组件规则。 */
:root,body.theme-boy {
  --paper:#F5F9FF; --paper-2:#EFF5FC; --white:#FFFFFF;
  --ink:#243C58; --ink-soft:#5E7189;
  --forest:#2E73CD; --forest-dark:#235BA4; --forest-soft:#E9F2FF;
  --sun:#E7B65B; --sun-soft:#FFF5DF; --sun-ink:#876221; --sun-line:#EEDDB7;
  --berry:#77B5A5; --berry-soft:#EAF7F2; --berry-ink:#3C796A; --berry-line:#D3E9E1;
  --line:#DEE7F2; --canvas:#EAF0F8; --topbar-bg:#FBFDFF;
  --progress:#6A9FDF; --heat-low:#C4DAF6;
  --hero-bg:#E8F2FF; --hero-line:#CDDEF6; --hero-ink:#2D5B95; --hero-muted:#4E6989;
  --hero-footer:#DFECFC; --hero-divider:#C5D8F1; --hero-star:#A48035;
  --hero-hint-bg:rgba(255,255,255,.75); --hero-hint-ink:#4E6989;
  --caption:#5F7388; --locked-bg:#E9EFF5; --locked-ink:#8E9EAF;
}
body.theme-girl {
  --paper:#FFF7FA; --paper-2:#FFF0F5; --white:#FFFFFF;
  --ink:#553C4B; --ink-soft:#806574;
  --forest:#BD507C; --forest-dark:#9F3D67; --forest-soft:#FCE8F0;
  --sun:#D6B17D; --sun-soft:#FFF3E3; --sun-ink:#8A6434; --sun-line:#EDDDC5;
  --berry:#B19ACF; --berry-soft:#F3EDFA; --berry-ink:#795A98; --berry-line:#E4D9EF;
  --line:#F0DFE7; --canvas:#F6ECF1; --topbar-bg:#FFFBFD;
  --progress:#DB8DAD; --heat-low:#F1BED2;
  --hero-bg:#FDE8F0; --hero-line:#F0C9D8; --hero-ink:#8E4665; --hero-muted:#80546A;
  --hero-footer:#FADCE7; --hero-divider:#EDC3D3; --hero-star:#A77F47;
  --hero-hint-bg:rgba(255,255,255,.75); --hero-hint-ink:#80546A;
  --caption:#826778; --locked-bg:#F1E9EF; --locked-ink:#AB97A4;
}
body.theme-parent {
  --paper:#F4F6F7; --paper-2:#EDF1F3; --white:#FFFFFF;
  --ink:#293940; --ink-soft:#60717A;
  --forest:#344F5B; --forest-dark:#223F4B; --forest-soft:#E8EFF2;
  --sun:#B5A17C; --sun-soft:#F4F0E6; --sun-ink:#7E6A46; --sun-line:#E4DDCC;
  --berry:#8AA29C; --berry-soft:#EBF0EE; --berry-ink:#526E66; --berry-line:#D8E2DE;
  --line:#DFE5E7; --canvas:#E8EDEF; --topbar-bg:#FBFCFC;
  --progress:#78939E; --heat-low:#C3D1D7;
  --hero-bg:#344C58; --hero-line:#4D6570; --hero-ink:#F0F4F4; --hero-muted:#D0DDE2;
  --hero-footer:#2C444F; --hero-divider:#4D6570; --hero-star:#D2BC8E;
  --hero-hint-bg:rgba(255,255,255,.08); --hero-hint-ink:#D0DDE2;
  --caption:#617178; --locked-bg:#E9EDEF; --locked-ink:#8F9EA5;
}
:root,body {
  color-scheme:light;
  --gold:var(--sun-ink); --gold-soft:var(--sun-soft); --moss:var(--progress); --mist:var(--line);
  --shadow:0 2px 9px rgba(30,45,65,.035); --glass:none;
  --r-lg:18px; --r-md:14px; --r-sm:10px;
  --bg-gradient:var(--paper); --topbar-shadow:transparent;
  --success:#37794B; --success-soft:#EAF4EB; --danger:#A34F4F; --danger-soft:#FAECEC;
}
html { scroll-padding-top:72px; }
body { font-family:'PingFang SC','Microsoft YaHei',system-ui,-apple-system,sans-serif; font-size:14px; line-height:1.5; background:var(--canvas); }
button,input,select,textarea { font-family:inherit; }
button { touch-action:manipulation; }
button:focus-visible,[tabindex]:focus-visible,input:focus-visible,select:focus-visible { outline:2px solid var(--forest); outline-offset:3px; }
input,select { min-width:0; max-width:100%; }
img { max-width:100%; }
.app { width:100%; max-width:520px; margin:0 auto; min-height:100dvh; background:var(--paper); box-shadow:0 0 32px rgba(30,45,65,.04); }
.topbar { min-height:58px; padding:calc(10px + env(safe-area-inset-top)) 16px 10px; background:var(--topbar-bg); color:var(--ink); border-bottom:1px solid var(--line); box-shadow:none; gap:8px; }
.brand { display:flex; align-items:center; gap:7px; font-size:17px; font-weight:800; letter-spacing:0; white-space:nowrap; }
.brand .logo { width:28px; height:28px; border-radius:9px; background:var(--forest); }
.brand .logo svg { width:18px; height:18px; }
.top-right { gap:7px; }
.topbar .icon-btn { width:34px; height:34px; border-radius:11px; box-shadow:none; background:var(--paper-2); border:1px solid var(--line); backdrop-filter:none; }
.topbar .icon-btn svg { width:19px; height:19px; stroke:var(--forest-dark); }
.avatar-btn { width:34px; height:34px; border:1px solid var(--line); background:var(--forest-soft); }
.avatar-btn img { object-fit:contain; }
.role-chip { height:32px; min-width:47px; padding:0 9px; justify-content:center; gap:4px; border-radius:10px; background:var(--forest-soft); color:var(--forest-dark); box-shadow:none; font-size:12px; }
.role-chip::after { content:'⌄'; margin-top:-2px; font-size:12px; opacity:.75; }
.view { width:100%; padding:12px 14px calc(88px + env(safe-area-inset-bottom)); }
.view>h2:first-child { margin:4px 0 5px!important; font-size:20px!important; line-height:1.4; font-weight:800!important; }
.view>h2:first-child+p { margin:0 0 16px!important; font-size:13px!important; line-height:1.5; }
.tabbar { max-width:520px; padding:6px 9px calc(7px + env(safe-area-inset-bottom)); min-height:64px; background:var(--topbar-bg); border-top:1px solid var(--line); box-shadow:none; gap:2px; }
.tabbar button { min-height:50px; gap:4px; padding:5px 2px; border-radius:12px; font-size:12px; font-weight:500; color:var(--ink-soft); }
.tabbar button .ic,.tabbar button .ic svg { width:22px; height:22px; }
.tabbar button .ic svg { stroke:var(--ink-soft); stroke-width:1.8; }
.tabbar button.active { color:var(--forest-dark); font-weight:700; background:var(--forest-soft); }
.tabbar button.active .ic svg { stroke:var(--forest); }
.tabbar button.active:after { content:none; }
.card,.chart-box,.set-group { background:#FFF; border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow); }
.card { padding:14px; }
.card+.card { margin-top:10px; }
/* Inline grids in the supplied app also matched .card + .card; reset only grid children. */
[style*="display:grid"]>.card,[style*="display: grid"]>.card { min-width:0; margin-top:0!important; }
[style*="display:grid"]>.card+.card,[style*="display: grid"]>.card+.card { margin-top:0!important; }
.sec-title { margin:18px 1px 9px; gap:8px; }
.sec-title h2 { font-size:15px; font-weight:800; line-height:1.4; }
.sec-title .more { font-size:12px; font-weight:500; color:var(--forest-dark); }
.more[data-action] { cursor:pointer; }
button.more { min-height:30px; padding:3px 0 3px 8px; }
.btn { min-height:42px; padding:10px 14px; border-radius:12px; font-size:14px; font-weight:650; line-height:1.4; gap:6px; box-shadow:none; }
.btn-primary { background:var(--forest); border:1px solid var(--forest); color:#FFF; box-shadow:none; }
.btn-sun { background:var(--sun-soft); border:1px solid var(--sun-line); color:var(--sun-ink); box-shadow:none; }
.btn-berry { background:var(--berry-soft); border:1px solid var(--berry-line); color:var(--berry-ink); box-shadow:none; }
.btn-ghost { background:var(--paper-2); border:1px solid var(--line); color:var(--forest-dark); box-shadow:none; backdrop-filter:none; }
.btn-block { min-height:46px; font-size:15px; }
.btn:active { transform:scale(.985); box-shadow:none; }
.btn[disabled] { opacity:.45; }
.btn svg { width:17px; height:17px; }
.chip { min-height:36px; padding:7px 11px; font-size:13px; line-height:1.4; color:var(--ink-soft); background:var(--paper-2); border:1px solid var(--line); border-radius:10px; backdrop-filter:none; }
.chip-row { gap:7px; }
.chip.on { background:var(--forest-soft); color:var(--forest-dark); border-color:var(--heat-low); }
.pill { font-size:12px; padding:4px 8px; font-weight:600; }
.pill.fire,.pill.gold { color:var(--sun-ink); }
.pill.green { color:var(--forest-dark); background:var(--forest-soft); }
.pill.berry { color:var(--berry-ink); }
.bar { display:block; height:6px; background:var(--paper-2); border-radius:5px; }
.bar i { background:var(--progress); }
.bar.sun i { background:var(--sun); }
.bar.berry i { background:var(--berry); }
.kpi-grid { gap:8px; }
.kpi { padding:12px 6px; background:#FFF; border:1px solid var(--line); border-radius:14px; backdrop-filter:none; box-shadow:none; }
.kpi b { font-size:21px; font-weight:750; line-height:1.3; overflow-wrap:anywhere; }
.kpi span { display:block; font-size:12px; margin-top:4px; line-height:1.35; }
.kpi.orange b,.kpi.gold b { color:var(--sun-ink); }
.kpi.berry b { color:var(--berry-ink); }
/* Original home: pet, interaction, daily sentence, points, tasks, shortcuts, check-in. */
.hero { margin-top:0; padding:15px 15px 0; border:1px solid var(--hero-line); border-radius:18px; background:var(--hero-bg); color:var(--hero-ink); }
.hero .hello { font-size:12px; color:var(--hero-muted); opacity:1; }
.hero h1 { margin:3px 0 0; font-size:20px; line-height:1.4; font-weight:750; color:var(--hero-ink); }
.desk-pet-zone { margin-top:2px; padding:0; }
.pet-home { max-width:420px; height:118px; border:none; background:transparent; }
.pet-home-hint { bottom:7px; padding:3px 9px; font-size:11px; line-height:1.4; font-weight:400; color:var(--hero-hint-ink); background:var(--hero-hint-bg); border-radius:8px; }
.pet-home-deco { opacity:.35; filter:none; }
.pet-home-deco-1 { bottom:30px; }
.pet-home-deco-2 { bottom:42px; }
.pet-home-deco-3 { top:9px; }
.streak-row { gap:0; padding:10px 0 11px; margin:0 -15px; background:var(--hero-footer); border-top:1px solid var(--hero-line); border-radius:0 0 18px 18px; }
.streak-chip { flex:1; justify-content:center; gap:5px; padding:0 8px; font-size:12px; line-height:1.6; font-weight:600; background:transparent!important; color:var(--hero-muted); border-radius:0; }
.streak-chip+.streak-chip { border-left:1px solid var(--hero-divider); }
.streak-chip svg { width:15px; height:15px; fill:var(--hero-star); color:var(--hero-star); }
.pet-stage-caption { margin:7px 0 10px; color:var(--caption); text-align:center; font-size:11px; line-height:1.4; }
.home-pet-controls { padding:12px!important; margin-top:0!important; }
.home-pet-controls>div:first-child { margin-bottom:9px!important; }
.home-pet-controls>div:first-child>div { background:var(--paper-2)!important; }
.home-pet-controls>div:first-child>div>div { background:var(--progress)!important; }
.pet-actions { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; }
.pet-actions .btn { width:100%; min-width:0!important; min-height:38px; padding:7px 2px!important; font-size:12px!important; border-radius:10px; white-space:nowrap; }
.chibi-pet { position:absolute; left:0; top:0; width:84px; height:84px; z-index:4; cursor:grab; touch-action:none; user-select:none; will-change:transform; contain:layout; filter:drop-shadow(0 5px 6px rgba(35,55,75,.14)); }
.chibi-pet:active { cursor:grabbing; }
.chibi-sprite { display:block; width:84px; height:84px; background-color:transparent; background-repeat:no-repeat; background-size:400% 300%; transform-origin:center bottom; }
.chibi-bubble { position:absolute; left:50%; top:-7px; max-width:130px; padding:5px 8px; border:1px solid rgba(35,55,75,.09); border-radius:10px 10px 10px 3px; color:var(--ink); background:#FFF; box-shadow:0 4px 12px rgba(30,45,65,.10); font-size:11px; line-height:1.35; white-space:nowrap; opacity:0; transform:translate(-50%,-5px); pointer-events:none; transition:.18s ease; }
.chibi-bubble.show { opacity:1; transform:translate(-50%,-11px); }
.pet-picker { max-width:430px; }
.pet-choice-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; margin:15px 0 17px; }
.pet-choice { min-width:0; min-height:124px; padding:8px 6px 9px; border:1px solid var(--line); border-radius:14px; color:var(--ink); background:var(--paper); cursor:pointer; }
.pet-choice.selected { border:2px solid var(--forest); background:var(--forest-soft); }
.pet-choice-preview { display:block; width:72px; height:72px; margin:0 auto 5px; background-color:transparent; background-repeat:no-repeat; background-size:400% 300%; background-position:0 0; }
.pet-choice-cat { display:flex; align-items:center; justify-content:center; font-size:43px; background:var(--sun-soft); }
.pet-choice b,.pet-choice small { display:block; overflow-wrap:anywhere; }
.pet-choice b { font-size:14px; }
.pet-choice small { margin-top:2px; color:var(--ink-soft); font-size:11px; }
.pet-outfit-title { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin:0 1px 9px; }
.pet-outfit-title span { color:var(--ink-soft); font-size:12px; }
.pet-outfit-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-bottom:14px; }
@media(max-width:359px){.pet-choice-grid{gap:5px}.pet-choice{padding-inline:3px}.pet-choice-preview{width:64px;height:64px}}
@media(prefers-reduced-motion:reduce){.chibi-pet,.chibi-bubble{transition:none!important}}
.home-sentence { margin-top:10px!important; padding:12px 14px; background:#FFF; border-color:var(--line); }
.home-sentence>div:nth-child(2) { font-size:15px!important; font-weight:650!important; color:var(--forest-dark)!important; }
.home-sentence .spk-btn { min-width:30px; min-height:30px; }
.home-points { display:flex; align-items:center; gap:10px; margin-top:10px!important; padding:12px 14px; background:#FFF; }
.home-points .icon-sm { width:34px; height:34px; border-radius:11px; }
.home-points .icon-sm svg { width:20px; height:20px; }
.home-points b { font-size:16px!important; font-weight:700; color:var(--sun-ink)!important; }
.home-points .btn { min-height:36px; font-size:13px; padding:7px 12px; }
.task-head { gap:10px; margin-bottom:10px; }
.task-head .t { gap:10px; min-width:0; }
.task-icon { width:40px; height:40px; border-radius:12px; }
.task-icon svg { width:21px; height:21px; }
.task-icon.en { background:var(--forest-soft); color:var(--forest); }
.task-icon.ma { background:var(--sun-soft); color:var(--sun-ink); }
.task-icon.ro { background:var(--berry-soft); color:var(--berry-ink); }
.task-head b { font-size:15px; font-weight:700; }
.task-head .t>div>span { font-size:12px; line-height:1.4; margin-top:3px; }
.task-head>.pill { flex:none; min-width:52px; justify-content:center; text-align:center; }
.task-card { padding:13px 14px; }
.task-meta { min-height:25px; margin-top:7px; font-size:12px; }
.task-meta .more { display:inline-flex; align-items:center; gap:2px; min-height:25px; font-size:12px; color:var(--forest-dark); }
.home-shortcuts { gap:10px!important; }
.home-shortcuts>.card { min-height:112px!important; height:auto!important; padding:13px 14px!important; gap:10px; border-radius:16px; }
.home-shortcuts>.card>div:first-child { width:36px!important; height:36px!important; border-radius:11px!important; }
.home-shortcuts>.card svg { width:20px; height:20px; }
.home-shortcuts>.card>div:last-child>div:first-child { font-size:14px!important; font-weight:700!important; }
.checkin-zone { margin-top:13px; }
.checkin-zone .btn { padding:12px; font-size:15px; min-height:46px; }
.checkin-zone .card { border-color:var(--line)!important; background:var(--forest-soft)!important; padding:14px; }
.checkin-zone .card h3 { font-size:16px!important; }
.checkin-zone .card>div:first-child { font-size:24px!important; }
/* Equal module sizes within the existing two-column learning layout. */
.module { min-width:0; }
.module .mod-head { gap:10px; margin-bottom:10px; }
.module .mod-icon { width:42px; height:42px; flex:none; border-radius:12px; }
.module .mod-icon svg { width:23px; height:23px; }
.module h3 { font-size:16px; font-weight:700; }
.module .sub { font-size:12px; line-height:1.5; }
.module .actions { gap:8px; margin-top:12px; }
body[data-page=learn] [style*="display:grid"]>.module { padding:13px!important; min-height:96px; }
body[data-page=learn] .mod-icon { width:36px!important; height:36px!important; border-radius:11px!important; }
body[data-page=learn] .mod-icon svg { width:21px; height:21px; }
body[data-page=learn] .module>div:first-child { gap:8px!important; margin-bottom:11px!important; }
body[data-page=learn] .module>div:first-child>div>div:first-child { font-size:14px!important; font-weight:700!important; line-height:1.45; }
body[data-page=learn] .module>div:first-child>div>div+div { font-size:12px!important; margin-top:3px; }
.word-card { margin:7px 0 16px; }
.word-card-inner { min-height:246px; }
.word-face { padding:24px 20px; border-radius:18px; border:1px solid var(--line); background:#FFF; box-shadow:var(--shadow); }
.word-face.back { background:var(--forest-soft); border-color:var(--heat-low); }
.word-face .big { font-size:clamp(28px,8vw,37px); line-height:1.2; letter-spacing:0; overflow-wrap:anywhere; }
.word-face .ph { font-size:15px; margin-top:9px; }
.word-face .cn { font-size:23px; margin-top:10px; }
.word-face .ex { font-size:14px; line-height:1.6; }
.word-face .tip { font-size:12px; bottom:15px; opacity:1; }
.spk-btn { min-width:34px; min-height:34px; background:var(--forest-soft); border:1px solid var(--line); color:var(--forest); }
.spk-btn svg { width:18px; height:18px; }
.session-bar { margin-bottom:12px; min-height:30px; }
.session-bar .n { font-size:13px; }
.quiz-opt { min-height:48px; padding:13px 14px; font-size:15px; margin-top:9px; border-radius:13px; }
.quiz-opt.correct { border-color:#97BFA3; background:#EAF4EB; }
.quiz-opt.wrong { border-color:#CBA78B; background:#F9EFE7; color:#A17355; }
.math-stage { padding:23px 17px; border-radius:18px; border:1px solid var(--line); box-shadow:var(--shadow); }
.math-stage .q { font-size:30px; line-height:1.5; letter-spacing:0; overflow-wrap:anywhere; }
.math-stage .q.word-problem { font-size:21px; text-align:left; line-height:1.6; }
.ans-row { gap:9px; flex-wrap:wrap; }
.ans-row input { width:145px; min-width:0; flex:1; font-size:24px; border-radius:12px; }
.feedback { font-size:14px; text-align:center; }
.timer-pill { top:65px; }
.empty { padding:26px 15px; }
.empty .mascot { width:90px; height:90px; object-fit:contain; border-radius:0; box-shadow:none; }
.empty h3 { font-size:18px; }
.empty p { font-size:13px; }
.wrong-item { gap:10px; padding:13px 14px; }
.wrong-item .main b { font-size:15px; }
.wrong-item .main .sub { font-size:12px; }
.wrong-item .mark { min-height:36px; font-size:12px; }
.chart-box { padding:15px; }
.chart-box>svg { max-height:240px; }
.heat-legend { font-size:12px; }
.badge-symbol { display:flex; align-items:center; justify-content:center; width:52px; height:52px; margin:0 auto 9px; border-radius:16px; background:var(--gold-soft); color:var(--gold); }
.badge-symbol svg { width:28px; height:28px; }
.badge-symbol.locked { background:var(--locked-bg); color:var(--locked-ink); }
.set-group { margin-bottom:12px; }
.set-group .g-title { padding:12px 14px; font-size:13px; font-weight:700; letter-spacing:0; color:var(--forest-dark); background:var(--paper-2); }
.set-row { padding:13px 14px; gap:10px; }
.set-row+.set-row { border-top:1px solid var(--line); }
.set-row>div:first-child { min-width:0; }
.set-row .lab { font-size:14px; font-weight:650; }
.set-row .desc { font-size:12px; line-height:1.6; margin-top:3px; }
.set-row select,.set-row input[type=text],.set-row input[type=time] { max-width:48%; font-size:14px; }
.set-row .range-row { flex:0 1 185px; max-width:53%; gap:7px; }
.range-row input[type=range] { width:80px; min-width:0; }
.range-row b { min-width:33px; font-size:13px; }
.set-group>div[style*="padding:8px 2px"],.set-group>div[style*="padding:4px 2px"],.set-group>div[style*="margin:4px 2px"] { margin:0 14px 12px!important; padding:0!important; }
.switch input:focus-visible+i { outline:2px solid var(--forest); outline-offset:3px; }
.modal-mask { background:rgba(28,40,54,.3); padding:20px; }
.modal { border-radius:20px; background:var(--topbar-bg); box-shadow:0 14px 50px rgba(28,40,54,.14); max-height:85dvh; overflow:auto; }
.modal h3 { font-size:19px; }
.modal .mascot { object-fit:contain; border-radius:0; }
.story-line { padding:9px 10px!important; border-radius:10px!important; }
.story-line.active { transform:none; }
body[data-page=shop] #view>.card:first-of-type { background:var(--sun-soft)!important; color:var(--sun-ink)!important; border:1px solid var(--sun-line)!important; }
/* 头像仍为 56px，名称与上传入口对齐。 */
.avatar-choices { display:flex; gap:14px; flex-wrap:wrap; align-items:flex-start; }
.avatar-choice { display:flex; flex-direction:column; align-items:center; gap:5px; width:60px; padding:0; font-size:12px; line-height:1.5; color:var(--ink-soft); position:relative; border-radius:12px; }
.avatar-preview { display:flex; align-items:center; justify-content:center; width:56px; height:56px; border:2px solid transparent; border-radius:50%; overflow:hidden; background:var(--paper-2); }
.avatar-preview img { display:block; width:100%; height:100%; object-fit:contain; }
.avatar-choice-boy .avatar-preview { background:#E9F2FF; }
.avatar-choice-girl .avatar-preview { background:#FCE8F0; }
.avatar-choice[aria-pressed=true] { color:var(--forest-dark); font-weight:700; }
.avatar-choice[aria-pressed=true] .avatar-preview { border-color:var(--forest); box-shadow:0 0 0 2px var(--forest-soft); }
.avatar-upload { cursor:pointer; }
.avatar-upload .avatar-preview { border:2px dashed var(--line); font-size:24px; font-weight:400; }
.avatar-upload input { position:absolute; width:1px; height:1px; opacity:0; }
.avatar-upload:focus-within { outline:2px solid var(--forest); outline-offset:3px; }
.avatar-theme-note { margin-top:10px; font-size:12px; color:var(--ink-soft); }
.photo-theme { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-top:12px; font-size:12px; color:var(--ink-soft); }
.photo-theme .chip-row { margin:0; }
.pet-bubble { color:var(--ink); border-color:var(--line); }
.pet-status { background:var(--forest-dark); box-shadow:var(--shadow); }
.timer-pill .t,.wrong-item .tag.ma { color:var(--sun-ink); }
/* 答案的对错状态保持固定语义色，不随主题变化。 */
.quiz-opt.correct { color:var(--success); background:var(--success-soft); border-color:#97BFA3; }
.quiz-opt.wrong { color:var(--danger); background:var(--danger-soft); border-color:#D6AAAA; }
.feedback.ok { color:var(--success); }
.feedback.no { color:var(--danger); }
@media(min-width:760px) {
  .app,.tabbar { max-width:520px; }
  .view { padding:14px 16px calc(90px + env(safe-area-inset-bottom)); }
}
@media(max-width:359px) {
  .topbar { padding-left:12px; padding-right:12px; }
  .brand { font-size:16px; gap:6px; }
  .top-right { gap:5px; }
  .view { padding-left:12px; padding-right:12px; }
  .pet-actions { gap:5px; }
  .pet-actions .btn { font-size:11px!important; }
  .hero h1 { font-size:19px; }
  body[data-page=learn] [style*="display:grid"]>.module { padding:11px!important; }
  body[data-page=learn] .mod-icon { width:31px!important; height:31px!important; }
  body[data-page=learn] .module>div:first-child { gap:6px!important; }
  body[data-page=learn] .module>div:first-child>div>div:first-child { font-size:13px!important; }
  .set-row { flex-wrap:wrap; }
  .set-row .range-row { max-width:100%; }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
}