/* 团团乐园 · 电视大屏样式
   尺寸全部用 vh/vw，任何分辨率的电视都按比例铺满；四周留 4% 安全边距防电视裁边 */
:root {
  --ink: #3b2a4a;
  --red: #ff6b6b;
  --yellow: #ffbe2e;
  --blue: #4d96ff;
  --green: #3fbf7f;
  --red-d: #d94848;
  --yellow-d: #d99a10;
  --blue-d: #2f72d6;
  --green-d: #2a9a62;
  --card: #fffdf8;
  --font: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", sans-serif;
  --round: "Arial Rounded MT Bold", "Comic Sans MS", "Microsoft YaHei", sans-serif;
  --kai: "KaiTi", "STKaiti", "楷体", "Kaiti SC", serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  font-family: var(--font);
  color: var(--ink);
  background:
    radial-gradient(ellipse 30vw 12vh at 12% 18%, #fff8 60%, transparent 61%),
    radial-gradient(ellipse 22vw 9vh at 85% 12%, #fff7 60%, transparent 61%),
    linear-gradient(180deg, #bfe6ff 0%, #e6f6ff 45%, #fff4dc 100%);
  user-select: none;
}
body.no-cursor, body.no-cursor * { cursor: none !important; }

#app { position: fixed; inset: 0; padding: 3.5vh 4vw; display: flex; flex-direction: column; }

/* ---------- 顶栏：吉祥物 + 字幕 + 进度星 ---------- */
#top { height: 12vh; display: flex; align-items: center; gap: 2vw; flex-shrink: 0; position: relative; }
#mascot { font-size: 10vh; line-height: 1; width: 12vh; text-align: center; }
#mascot .panda { display: inline-block; }
.m-idle .panda { animation: bob 2.4s ease-in-out infinite; }
.m-cheer .panda { animation: jump .45s ease-in-out 3; }
.m-think .panda { animation: tilt 1s ease-in-out infinite; }
.m-listen .panda { animation: tilt 1.6s ease-in-out infinite; }
.m-listen::after { content: "👂"; font-size: 5vh; position: absolute; left: 10vh; top: 1vh; }
.m-sleep .panda { opacity: .6; }
#title { font-size: 4.6vh; font-weight: 800; transition: opacity .2s; }
#top:has(#bubble.show) #title { opacity: 0; }
#bubble {
  position: absolute; left: 14vh; top: 50%; transform: translateY(-50%) scale(.9);
  max-width: 62vw; padding: 1.4vh 2.4vh; border-radius: 3vh; background: #fff;
  font-size: 3.6vh; font-weight: 700; box-shadow: 0 .8vh 0 #0001;
  opacity: 0; transition: .2s; pointer-events: none;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
#bubble.show { opacity: 1; transform: translateY(-50%) scale(1); }
#bubble::before { content: ""; position: absolute; left: -1.6vh; top: 50%; margin-top: -1.2vh; border: 1.2vh solid transparent; border-right: 1.8vh solid #fff; border-left: 0; }
#dots { margin-left: auto; font-size: 5vh; letter-spacing: .6vh; color: #0002; }
#dots .on { color: #ffc400; text-shadow: 0 0 1vh #ffd84d; }

/* ---------- 页面容器 ---------- */
.screen { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4vh; min-height: 0; animation: fadein .35s ease; }
body[data-screen="home"] #top, body[data-screen="splash"] #top, body[data-screen="rest"] #top { visibility: hidden; }
body[data-screen="home"] #bubble, body[data-screen="rest"] #bubble { visibility: visible; left: 50%; top: 2vh; transform: translateX(-50%); }

/* 启动页 / 首页 */
.splash { text-align: center; }
.splash h1, .hero h1 { font-size: 11vh; margin: 0; color: #ff7a59; text-shadow: 0 .6vh 0 #fff, 0 1.2vh 0 #0001; letter-spacing: 1vh; }
.big-panda { font-size: 24vh; line-height: 1; animation: bob 2.4s ease-in-out infinite; }
.press { font-size: 5vh; font-weight: 800; animation: blink 1.4s ease-in-out infinite; }
.hero { display: flex; align-items: center; gap: 4vw; }
.hero p { font-size: 4.2vh; font-weight: 800; margin: 1vh 0 0; }
.hero .big-panda { font-size: 20vh; }
.remote-hint { position: absolute; bottom: 3vh; font-size: 2.4vh; opacity: .65; }

/* ---------- 方块菜单 ---------- */
.tiles { display: grid; grid-template-columns: repeat(var(--cols), auto); gap: 3.5vw; }
.tile {
  width: min(22vw, 36vh); aspect-ratio: 1; border-radius: 5vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; color: #fff; position: relative;
  box-shadow: 0 1.4vh 0 var(--d); background: var(--c); transition: transform .18s;
}
.tile .t-icon { font-size: 15vh; line-height: 1.1; }
.tile .t-label { font-size: 4.6vh; font-weight: 900; text-shadow: 0 .4vh 0 #0003; text-align: center; }
.tile.focus { transform: translateY(-2vh) scale(1.08); outline: 1.2vh solid #fff; }
.tile.focus::after, .card.focus::after { content: "👆"; position: absolute; bottom: -9vh; left: 50%; font-size: 7vh; transform: translateX(-50%); animation: point 1s ease-in-out infinite; }

.c-red { --c: var(--red); --d: var(--red-d); }
.c-yellow { --c: var(--yellow); --d: var(--yellow-d); }
.c-blue { --c: var(--blue); --d: var(--blue-d); }
.c-green { --c: var(--green); --d: var(--green-d); }

/* ---------- 题目区 ---------- */
.prompt { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; width: 100%; }
.ask { font-size: 16vh; display: flex; flex-direction: column; align-items: center; animation: bob 2.4s ease-in-out infinite; }
.ask small { font-size: 4vh; font-weight: 800; opacity: .6; }

/* ---------- 答题卡片 ---------- */
.cards { display: flex; gap: 3vw; padding-bottom: 9vh; transition: opacity .3s; }
.cards.waiting { opacity: 0; pointer-events: none; }
.card {
  width: min(20vw, 34vh); aspect-ratio: 1; border-radius: 4.5vh; background: var(--card);
  border: 1.3vh solid var(--c); box-shadow: 0 1.4vh 0 var(--d); position: relative;
  display: flex; align-items: center; justify-content: center; transition: transform .18s, opacity .3s, filter .3s;
  cursor: pointer;
}
.cards.n4 .card { width: min(16vw, 30vh); }
.card .face { display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.card.focus { transform: translateY(-2vh) scale(1.08); box-shadow: 0 1.4vh 0 var(--d), 0 0 0 1vh #fff, 0 0 6vh 1vh var(--c); }
.card.wrong { animation: shake .45s; opacity: .4; filter: grayscale(1); }
.card.correct { animation: pop .5s; box-shadow: 0 1.4vh 0 var(--d), 0 0 0 1.2vh #fff, 0 0 8vh 2vh #ffd84d; }
.card.hint { animation: pulse 1s ease-in-out infinite; }
.num { font-family: var(--round); font-size: 21vh; font-weight: 900; color: var(--d); }
.cards.n4 .num { font-size: 17vh; }
.letter { font-family: var(--round); font-size: 20vh; font-weight: 900; color: var(--d); }
.hz { font-family: var(--kai); font-size: 21vh; color: var(--ink); }
.pic { font-size: 17vh; }
.cards.n4 .pic { font-size: 14vh; }
.extra { margin-top: .6vh; font-size: 4vh; font-weight: 800; animation: fadein .3s; }
.extra .word, .word { font-family: var(--round); font-size: 4.6vh; color: var(--ink); }
.mini-dots { font-size: 3vh; letter-spacing: .3vh; color: var(--d); max-width: 16vw; word-break: break-all; text-align: center; }
.pic-s { font-size: 6vh; }
.card:has(.extra) .num, .card:has(.extra) .letter, .card:has(.extra) .hz { font-size: 15vh; }
.card:has(.extra) .pic { font-size: 12vh; }

/* 比多少：宽卡片 */
.cards.wide-row .card { width: min(34vw, 46vh); aspect-ratio: 4 / 3; }
.group { font-size: 8vh; line-height: 1.15; max-width: 28vw; text-align: center; word-break: break-all; }

/* 数一数：十格框 */
.frame { display: grid; grid-template-columns: repeat(5, 13vh); gap: 1.4vh; padding: 2vh; background: #fff9; border-radius: 3vh; }
.frame .cell { height: 13vh; border: .6vh dashed #3b2a4a33; border-radius: 2vh; display: flex; align-items: center; justify-content: center; font-size: 9vh; }
.pop { animation: pop .35s; display: inline-block; }

/* 数数小火车 */
.grid50 { display: grid; grid-template-columns: repeat(10, 6.2vh); gap: .8vh; }
.grid50 .g { height: 6.2vh; border-radius: 1.4vh; background: #fff9; display: flex; align-items: center; justify-content: center; font-family: var(--round); font-size: 3.2vh; font-weight: 800; opacity: .45; transition: .2s; }
.grid50 .g.row { opacity: 1; background: #fff; }
.grid50 .g.lit { background: var(--yellow); color: #fff; transform: scale(1.2); box-shadow: 0 0 2vh var(--yellow); }
.train { display: flex; align-items: flex-end; gap: 1.2vw; }
.engine { font-size: 17vh; line-height: 1; transform: scaleX(-1); }
.car { width: 15vh; height: 13vh; border-radius: 2.4vh 2.4vh 1vh 1vh; background: var(--blue); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--round); font-size: 7.5vh; font-weight: 900; box-shadow: inset 0 -1.6vh 0 #0002, 0 2vh 0 -1vh var(--ink); }
.car:nth-child(odd) { background: var(--red); }
.car.hidden { background: #fff; color: var(--ink); border: .6vh dashed var(--ink); animation: glow 1.2s infinite; }

/* 找规律 */
.pattern { display: flex; gap: 2vw; font-size: 13vh; align-items: center; padding: 2vh 3vw; background: #fff9; border-radius: 4vh; }
.pattern .q { display: inline-flex; width: 16vh; height: 16vh; border: .7vh dashed var(--ink); border-radius: 3vh; align-items: center; justify-content: center; animation: glow 1.2s infinite; }

/* 象形识字：图变字 */
.intro { position: relative; width: 50vh; height: 40vh; display: flex; align-items: center; justify-content: center; }
.intro .pic, .intro .hz { position: absolute; transition: all 1.3s ease; }
.intro .pic { font-size: 30vh; }
.intro .hz { font-size: 34vh; opacity: 0; transform: scale(.4); }
.intro.morph .pic { transform: translate(-20vh, -12vh) scale(.35); opacity: .9; }
.intro.morph .hz { opacity: 1; transform: scale(1); }

/* 古诗 */
.poem { background: #fffdf5ee; border-radius: 4vh; padding: 3vh 5vw; text-align: center; box-shadow: 0 1.4vh 0 #0001; }
.p-title { font-family: var(--kai); font-size: 7vh; font-weight: 700; }
.p-author { font-size: 3vh; opacity: .6; margin-bottom: 1.4vh; }
.p-line { font-family: var(--kai); font-size: 7vh; padding: .4vh 2vw; border-radius: 2vh; transition: .25s; display: flex; align-items: center; gap: 1.6vw; justify-content: center; }
.poem.long .p-line { font-size: 5.2vh; }
.p-pic { font-size: .8em; }
.p-line.on { background: var(--yellow); color: #fff; transform: scale(1.08); text-shadow: 0 .3vh 0 #0003; }

/* 翻牌记忆 */
.memory { display: grid; grid-template-columns: repeat(var(--cols), 24vh); gap: 3vh 2.4vw; }
.mcard { height: 24vh; position: relative; transform-style: preserve-3d; transition: transform .45s; cursor: pointer; }
.mcard > div { position: absolute; inset: 0; border-radius: 3.5vh; display: flex; align-items: center; justify-content: center; backface-visibility: hidden; }
.mcard .back { background: repeating-linear-gradient(45deg, var(--blue), var(--blue) 2vh, #6aa8ff 2vh, #6aa8ff 4vh); font-size: 10vh; box-shadow: 0 1.2vh 0 var(--blue-d); }
.mcard .front { background: var(--card); font-size: 15vh; transform: rotateY(180deg); border: 1vh solid var(--yellow); box-shadow: 0 1.2vh 0 var(--yellow-d); }
.mcard.open, .mcard.matched { transform: rotateY(180deg); }
.mcard.matched .front { border-color: var(--green); box-shadow: 0 0 5vh var(--green); }
.mcard.focus { outline: 1vh solid #fff; border-radius: 3.5vh; }
.mcard.focus::after { content: "👆"; position: absolute; bottom: -7vh; left: 50%; font-size: 6vh; transform: translateX(-50%) rotateY(0); animation: point 1s infinite; }
.mcard.open.focus::after, .mcard.matched.focus::after { transform: translateX(50%) rotateY(180deg); }

/* 完成庆祝 */
.celebrate { text-align: center; }
.big-star { font-size: 34vh; animation: spinpop 1s ease; }
.c-text { font-size: 10vh; font-weight: 900; color: #ffb400; -webkit-text-stroke: .4vh #fff; }

/* 冒险地图 */
.map { display: flex; align-items: center; }
.node { position: relative; display: flex; flex-direction: column; align-items: center; width: 15vh; }
.n-icon { width: 15vh; height: 15vh; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 8vh; box-shadow: 0 1vh 0 #0002; }
.n-label { font-size: 2.6vh; font-weight: 800; margin-top: 1.5vh; white-space: nowrap; }
.node.done .n-icon { background: #d8f7e6; }
.node.now .n-icon { background: var(--yellow); animation: pulse 1s infinite; }
.node.goal .n-icon { background: #ffe0ef; }
.walker { position: absolute; top: -13vh; font-size: 11vh; animation: jump 1s ease-in-out infinite; }
.path { width: 4vw; height: 1.2vh; background: repeating-linear-gradient(90deg, var(--ink) 0 1.2vh, transparent 1.2vh 2.4vh); opacity: .35; margin-bottom: 5vh; }

/* 礼物 */
.gift { position: relative; width: 60vh; height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.gift .rays { position: absolute; inset: 0; border-radius: 50%; background: repeating-conic-gradient(#ffe27a 0 10deg, transparent 10deg 20deg); opacity: 0; transition: opacity .5s; animation: spin 12s linear infinite; }
.gift .box { font-size: 30vh; animation: wiggle .6s ease-in-out infinite; }
.gift .sticker-big, .gift .g-name { display: none; }
.gift.open .rays { opacity: .8; }
.gift.open .box { display: none; }
.gift.open .sticker-big { display: block; font-size: 32vh; animation: spinpop .8s ease; position: relative; }
.gift.open .g-name { display: block; font-size: 6vh; font-weight: 900; position: relative; background: #fff; padding: .5vh 3vh; border-radius: 3vh; }

/* 贴纸墙 */
.stickers { display: grid; grid-template-columns: repeat(10, 10.5vh); gap: 1.6vh; }
.st { height: 10.5vh; border-radius: 2vh; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 7vh; box-shadow: 0 .6vh 0 #0001; transition: transform .15s; cursor: pointer; }
.st.locked { filter: grayscale(1) brightness(1.6); opacity: .25; }
.st.focus { transform: scale(1.25); outline: .7vh solid var(--yellow); z-index: 1; }

/* 休息 */
.rest { text-align: center; }
.rest .moon { font-size: 12vh; }
.sleepy { font-size: 26vh; line-height: 1; opacity: .85; }
.zzz { font-size: 8vh; vertical-align: top; animation: bob 2s infinite; display: inline-block; }
.rest h2 { font-size: 8vh; margin: 2vh 0 1vh; }
.rest p { font-size: 4.2vh; line-height: 1.6; }

/* ---------- 家长页 ---------- */
.parent { width: 100%; height: 100%; display: flex; gap: 2vw; font-size: 2.6vh; }
.p-left, .p-right { background: #fffffff0; border-radius: 3vh; padding: 2.4vh 2vw; }
.p-left { width: 42%; overflow: auto; }
.p-right { flex: 1; overflow: auto; }
.parent h2 { margin: 0 0 1.6vh; font-size: 4vh; }
.parent h3 { font-size: 2.8vh; margin: 2vh 0 1vh; }
.row { display: flex; align-items: center; gap: 1vw; padding: 1.1vh 1.2vw; border-radius: 1.6vh; }
.row.focus { background: #ffe9a8; outline: .4vh solid var(--yellow); }
.r-label { flex: 1; font-weight: 700; white-space: nowrap; }
.r-val { min-width: 8vw; text-align: center; font-weight: 800; max-width: 16vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row button { font: inherit; font-weight: 800; border: 0; border-radius: 1.2vh; padding: .6vh 1.4vw; background: var(--blue); color: #fff; cursor: pointer; }
.p-help { opacity: .6; font-size: 2.2vh; line-height: 1.6; }
.bars { display: flex; gap: 1.4vw; height: 16vh; align-items: flex-end; }
.bar { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; font-size: 2vh; }
.bar div { width: 60%; background: var(--blue); border-radius: 1vh 1vh 0 0; min-height: 2px; }
.bar em { font-style: normal; opacity: .6; }
.summary { font-weight: 800; }
.stat { margin-bottom: 1.4vh; }
.s-head { font-weight: 800; display: flex; justify-content: space-between; }
.s-head span { opacity: .6; font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: .6vh; margin-top: .6vh; }
.chip { padding: .2vh 1vh; border-radius: 1vh; font-size: 2.2vh; font-weight: 700; background: #eee; color: #999; margin-right: .4vh; }
.chip.learn { background: #ffe2a8; color: #8a5a00; }
.chip.ok { background: #bff0d4; color: #1d7a4a; }

/* ---------- 特效 ---------- */
#fx { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 10; }
.confetti { position: absolute; top: -8vh; font-size: 5vh; animation: fall 1.6s ease-in forwards; }
.toast { position: absolute; top: 4vh; left: 50%; transform: translateX(-50%); background: var(--ink); color: #fff; font-size: 3.4vh; padding: 1.4vh 3vh; border-radius: 3vh; animation: fadein .3s; }

@keyframes bob { 50% { transform: translateY(-1.2vh); } }
@keyframes jump { 50% { transform: translateY(-3vh) scale(1.1); } }
@keyframes tilt { 25% { transform: rotate(-10deg); } 75% { transform: rotate(10deg); } }
@keyframes blink { 50% { opacity: .35; } }
@keyframes point { 50% { transform: translate(-50%, -1.5vh); } }
@keyframes shake { 20%, 60% { transform: translateX(-2vh); } 40%, 80% { transform: translateX(2vh); } }
@keyframes pop { 0% { transform: scale(.6); } 60% { transform: scale(1.2); } 100% { transform: scale(1); } }
@keyframes pulse { 50% { transform: scale(1.08); box-shadow: 0 0 0 1.2vh #fff, 0 0 7vh 2vh #ffd84d; } }
@keyframes glow { 50% { transform: scale(1.06); background: #fff6c8; } }
@keyframes spinpop { 0% { transform: scale(0) rotate(-180deg); } 70% { transform: scale(1.15) rotate(10deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes wiggle { 25% { transform: rotate(-8deg); } 75% { transform: rotate(8deg); } }
@keyframes fall { to { transform: translateY(115vh) rotate(540deg); } }
@keyframes fadein { from { opacity: 0; } }

/* ---------- v1.1：返回按钮、麦克风、说一说、家长入口 ---------- */
.nav-btn { font: inherit; font-size: 3.2vh; font-weight: 900; height: 8vh; padding: 0 2.6vh; border: 0; border-radius: 4vh; background: #fff; color: var(--ink); box-shadow: 0 .8vh 0 #0002; cursor: pointer; flex-shrink: 0; }
.nav-btn:hover { background: #fff6d6; }
#btn-home { margin-left: 1.6vw; }
#bubble { left: 34vh; max-width: 52vw; }
body[data-screen="home"] #btn-back, body[data-screen="home"] #btn-home,
body[data-screen="splash"] #btn-back, body[data-screen="splash"] #btn-home,
body[data-screen="rest"] #btn-back, body[data-screen="rest"] #btn-home { display: none; }
#mic { display: none; font-size: 3.2vh; font-weight: 900; padding: 1vh 2.4vh; border-radius: 4vh; background: var(--red); color: #fff; margin-left: auto; animation: pulse-mic 1.2s ease-in-out infinite; }
body.listening #mic { display: block; }
body.listening #dots { margin-left: 2vw; }
@keyframes pulse-mic { 50% { transform: scale(1.08); box-shadow: 0 0 0 1.2vh #ff6b6b44; } }
.big-sign { font-size: 34vh; line-height: 1; display: flex; flex-direction: column; align-items: center; animation: pop .4s; }
.big-sign.num { font-family: var(--round); font-weight: 900; color: var(--blue-d); background: #fff; border-radius: 5vh; padding: 3vh 8vh; border: 1.3vh solid var(--blue); }
.big-sign .word { font-size: 7vh; margin-top: 1vh; background: #fff; padding: .4vh 3vh; border-radius: 3vh; }
.speak-hint { font-size: 6vh; font-weight: 900; padding: 2vh 5vh; margin-bottom: 6vh; border-radius: 5vh; background: #fff; box-shadow: 0 1vh 0 #0001; animation: bob 1.6s ease-in-out infinite; }
.speak-hint small { font-size: 3vh; opacity: .55; margin-left: 1vw; }
.parent-entry { position: absolute; top: 3.5vh; right: 4vw; font: inherit; font-size: 2.8vh; font-weight: 800; padding: 1.2vh 2.4vh; border: 0; border-radius: 3vh; background: #ffffffcc; color: var(--ink); cursor: pointer; }
.gate { background: #fff; border-radius: 4vh; padding: 5vh 6vw; text-align: center; font-size: 3.4vh; }
.gate h2 { margin: 0 0 2vh; font-size: 5vh; }
.gate-opts { display: flex; gap: 2vw; justify-content: center; margin: 3vh 0; }
.gate-opts button { font: inherit; font-size: 5vh; font-weight: 900; width: 14vh; height: 12vh; border: 0; border-radius: 3vh; color: #fff; cursor: pointer; }
.gate-opts button:nth-child(1) { background: var(--red); } .gate-opts button:nth-child(2) { background: var(--yellow); }
.gate-opts button:nth-child(3) { background: var(--blue); } .gate-opts button:nth-child(4) { background: var(--green); }

/* ---------- v1.2：成长报告 ---------- */
.report { display: flex; gap: 2vw; align-items: center; }
.radar { width: 30vh; height: 30vh; flex-shrink: 0; }
.radar .ring { fill: none; stroke: #3b2a4a22; stroke-width: 1; }
.radar .axis { stroke: #3b2a4a1a; }
.radar .shape { fill: #4d96ff44; stroke: var(--blue); stroke-width: 2.5; stroke-linejoin: round; }
.radar text { font-size: 13.5px; font-weight: 700; fill: var(--ink); }
.dims { flex: 1; display: flex; flex-direction: column; gap: .6vh; }
.dim { display: flex; align-items: center; gap: .8vw; font-size: 2.3vh; }
.d-name { width: 5.4em; font-weight: 800; }
.d-bar { flex: 1; min-width: 6vw; height: 1.4vh; background: #eee; border-radius: 1vh; overflow: hidden; }
.d-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--yellow), var(--green)); border-radius: 1vh; }
.d-score { width: 2.2em; text-align: right; font-weight: 900; }
.d-level { width: 3.4em; opacity: .7; }
.d-trend { width: 1.2em; font-size: 2.6vh; }
.d-trend .up { color: var(--green-d); } .d-trend .down { color: var(--red-d); }
.r-lines { margin: 1vh 0; padding-left: 1.4em; line-height: 1.7; font-size: 2.4vh; }
.parent h4 { font-size: 2.5vh; margin: 1.6vh 0 .6vh; }
.parent h3 small, .parent h4 small { font-weight: 600; opacity: .6; font-size: .8em; }