/* 方案 A · 游戏化：圆角卡片 + 加粗底边（像能按下去的按钮）+ 明亮配色 */
:root {
  --green: #58CC02;
  --green-btn: #46A302;       /* 按钮和大卡片用深一点的绿，白字对比度够 */
  --green-dark: #3A8A00;
  --green-soft: #D7FFB8;
  --green-ink: #3F8F00;
  --blue: #1CB0F6;
  --blue-dark: #1899D6;
  --blue-soft: #DDF4FF;
  --blue-ink: #1278AB;
  --purple-soft: #F6E9FF;
  --purple-ink: #8A45B8;
  --yellow: #FFC800;
  --yellow-soft: #FFF5D3;
  --yellow-ink: #946C00;
  --red: #FF4B4B;
  --red-dark: #EA2B2B;
  --red-soft: #FFE5E5;
  --surface: #FFFFFF;
  --text: #3C3C3C;
  --muted: #6F6F6F;
  --line: #E5E5E5;
  --page: #F2F2EE;
  --accent: #1CB0F6; /* 每个孩子自己的颜色，JS 会改 */

  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 20px;
  --font: "Nunito", -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --sheet: 680px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font: 600 16px/1.6 var(--font);
  color: var(--text);
  background: var(--page);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
img { max-width: 100%; display: block; }

#app { max-width: var(--sheet); min-height: 100vh; margin: 0 auto; background: var(--surface); }
@media (min-width: 700px) { #app { border-left: 2px solid var(--line); border-right: 2px solid var(--line); } }

.wrap { padding: 16px 16px calc(32px + env(safe-area-inset-bottom)); }
body.with-tabs .wrap { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
body.with-composer .wrap { padding-bottom: calc(var(--composer-h, 200px) + 24px); }

/* ---------- 通用 ---------- */
.hand { font-weight: 900; color: var(--text); }
.nw, .w { white-space: nowrap; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.center { text-align: center; }
.hidden { display: none !important; }
.grow { flex: 1; min-width: 0; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row.nowrap { flex-wrap: nowrap; }
.stack > * + * { margin-top: 14px; }
.hl { color: var(--green-ink); }
.mk { background: var(--yellow-soft); color: #7A5600; border-radius: 6px; padding: 0 4px; font-weight: 800; }

/* 卡片：灰色描边 + 加粗底边 */
.sk { background: var(--surface); border: 2px solid var(--line); border-bottom-width: 5px; border-radius: var(--r-lg); }
.panel { padding: 16px; }

/* 按钮：底边加粗，按下去会「陷」下去 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 48px; padding: 8px 20px; font-size: 17px; font-weight: 900; letter-spacing: .5px;
  color: var(--blue-ink); background: var(--surface);
  border: 2px solid var(--line); border-bottom-width: 5px; border-radius: var(--r-md);
  transition: transform .06s, border-bottom-width .06s;
}
.btn:active { transform: translateY(3px); border-bottom-width: 2px; }
.btn:disabled { opacity: .5; cursor: default; transform: none; }
.btn.primary { background: var(--green-btn); border-color: var(--green-btn); border-bottom-color: var(--green-dark); color: #fff; text-shadow: 0 1px 0 var(--green-dark); }
.btn.danger { background: var(--red-soft); border-color: #FFC2C2; color: var(--red-dark); }
.btn.ghost { border-color: transparent; background: transparent; color: var(--muted); }
.btn.big { width: 100%; min-height: 56px; font-size: 19px; }
.btn.small { min-height: 40px; padding: 4px 14px; font-size: 15px; }
.linkbtn { border: 0; background: none; color: var(--blue-ink); font-size: 14px; font-weight: 800; padding: 8px; }

.iconbtn {
  width: 46px; height: 46px; flex: none; display: grid; place-items: center; padding: 0;
  font-size: 21px; font-weight: 900; color: #8A8A8A; text-decoration: none;
  background: var(--surface); border: 2px solid var(--line); border-bottom-width: 4px; border-radius: var(--r-sm);
}
.iconbtn:active { transform: translateY(2px); border-bottom-width: 2px; }
.iconbtn.ghost { visibility: hidden; }
.iconbtn.on { background: var(--yellow-soft); border-color: #FFE48A; }
.iconbtn.send { background: var(--blue); border-color: var(--blue); border-bottom-color: var(--blue-dark); color: #fff; }
.iconbtn:disabled { opacity: .45; }
.iconbtn.mic { background: var(--green-soft); border-color: #B5EC8C; border-bottom-color: #8FD45F; }
.iconbtn.mic.rec { background: var(--red); border-color: var(--red); border-bottom-color: var(--red-dark); color: #fff; animation: pulse 1s ease-in-out infinite; }
.iconbtn.mic.busy { background: var(--blue-soft); border-color: #B8E6FC; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 75, 75, .45); } 50% { box-shadow: 0 0 0 10px rgba(255, 75, 75, 0); } }

/* 小标签 */
.chip {
  display: inline-flex; align-items: center; gap: 3px; height: 26px; padding: 0 10px;
  font-size: 13px; font-weight: 800; white-space: nowrap;
  border: 2px solid var(--line); border-radius: 999px; background: #F7F7F7; color: var(--muted);
}
.chip.math, .chip.rev { background: var(--blue-soft); border-color: #B8E6FC; color: var(--blue-ink); }
.chip.eng { background: var(--purple-soft); border-color: #E8CCFB; color: var(--purple-ink); }
.chip.chn, .chip.bad { background: var(--red-soft); border-color: #FFC2C2; color: var(--red-dark); }
.chip.sci, .chip.tag, .chip.streak { background: var(--yellow-soft); border-color: #FFE48A; color: var(--yellow-ink); }
.chip.doing, .chip.ok { background: var(--green-soft); border-color: #B5EC8C; color: var(--green-ink); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

/* 表单 */
input[type=text], input[type=password], input[type=date], textarea, select {
  width: 100%; min-width: 0; min-height: 48px; padding: 10px 14px; font-size: 17px; font-weight: 700;
  background: #F7F7F7; border: 2px solid var(--line); border-radius: var(--r-md); outline: none;
}
input:focus, textarea:focus, select:focus { background: #fff; border-color: var(--blue); }
::placeholder { color: #A0A0A0; }
textarea { resize: none; line-height: 1.5; }
label.field { display: block; }
label.field > span:first-child { display: block; font-size: 14px; font-weight: 800; color: var(--muted); margin: 0 4px 6px; }
.pin-input { text-align: center; font-size: 26px !important; letter-spacing: 10px; }

/* ---------- 顶栏 / 底部标签 ---------- */
.nav { position: sticky; top: 0; z-index: 10; background: var(--surface); border-bottom: 2px solid var(--line); padding-top: env(safe-area-inset-top); }
.nav-in { display: flex; align-items: center; gap: 10px; padding: 8px 12px; min-height: 62px; }
.nav h1 { flex: 1; margin: 0; text-align: center; font-size: 19px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.tabbar {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 20;
  width: min(var(--sheet), 100%); display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  background: var(--surface); border-top: 2px solid var(--line);
}
.tab { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 58px; font-size: 13px; font-weight: 900; color: var(--muted); background: none; border: 2px solid transparent; border-radius: var(--r-md); }
.tab .e { font-size: 24px; line-height: 1.1; }
.tab.on { background: var(--blue-soft); border-color: #84D8FF; color: var(--blue-ink); }
.tab .badge { position: absolute; top: 2px; left: 56%; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--red); color: #fff; font: 900 12px/20px var(--font); font-style: normal; }

/* ---------- 选孩子 ---------- */
.hero-title { padding: 28px 0 4px; }
.hero-title h1 { margin: 0; font-size: 30px; font-weight: 900; }
.hero-title p { margin: 4px 0 0; color: var(--muted); font-weight: 700; }
.kids { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; margin-top: 24px; }
.kid-card { text-align: left; padding: 18px; display: flex; flex-direction: column; gap: 2px; min-height: 170px; border-top: 6px solid var(--c); }
.kid-card:active { transform: translateY(3px); border-bottom-width: 2px; }
.kid-card .avatar { font-size: 44px; line-height: 1; width: auto; height: auto; border: 0; background: none; display: block; }
.kid-card .name { font-size: 22px; margin-top: 8px; }
.kid-card .badges { margin-top: auto; display: flex; gap: 6px; flex-wrap: wrap; padding-top: 8px; }

/* ---------- 孩子首页 ---------- */
.profile { display: flex; align-items: center; gap: 12px; min-height: 60px; }
.avatar { width: 54px; height: 54px; flex: none; display: grid; place-items: center; font-size: 30px; padding: 0; border-radius: 50%; background: #F1F1F1; border: 2px solid var(--line); border-bottom-width: 4px; }
.profile .name { font-size: 21px; line-height: 1.2; }
.profile .grade { font-size: 14px; color: var(--muted); font-weight: 800; }
.streak-pill { margin-left: auto; display: inline-flex; align-items: center; height: 44px; padding: 0 14px; font-size: 15px; font-weight: 900; color: #B26B00; background: var(--yellow-soft); border: 2px solid #FFE48A; border-bottom-width: 4px; border-radius: 999px; white-space: nowrap; }

.hero {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 16px; width: 100%; text-align: left;
  margin-top: 22px; padding: 28px 18px; min-height: 128px; color: #fff;
  background: var(--green-btn); border: 0; border-bottom: 6px solid var(--green-dark); border-radius: var(--r-lg);
}
.hero:active { transform: translateY(3px); border-bottom-width: 3px; }
.hero::after { content: ""; position: absolute; right: -30px; top: -30px; width: 120px; height: 120px; border-radius: 50%; background: rgba(255, 255, 255, .14); }
.hero .ic { width: 68px; height: 68px; flex: none; display: grid; place-items: center; font-size: 36px; background: #fff; border-radius: var(--r-md); border-bottom: 5px solid #CFEEB5; }
.hero .t { display: block; font-size: 24px; font-weight: 900; line-height: 1.25; text-shadow: 0 2px 0 var(--green-dark); }
.hero .s { display: block; font-size: 16px; font-weight: 800; margin-top: 4px; text-shadow: 0 1px 0 var(--green-dark); }

.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
.tile { text-align: left; padding: 14px 16px 12px; min-height: 130px; display: flex; flex-direction: column; justify-content: space-between; }
.tile:active { transform: translateY(3px); border-bottom-width: 2px; }
.tile .lbl { font-size: 16px; font-weight: 900; }
.tile .row { justify-content: space-between; align-items: flex-end; flex-wrap: nowrap; }
.tile .num { font-size: 44px; font-weight: 900; line-height: 1; color: var(--purple-ink); }
.tile .go { width: 44px; height: 44px; display: grid; place-items: center; font-size: 22px; font-weight: 900; color: #fff; background: var(--blue); border-bottom: 4px solid var(--blue-dark); border-radius: var(--r-sm); }
.tile.review { background: var(--blue-soft); border-color: #B8E6FC; border-bottom-color: #8FD5F7; }
.tile.review .num { color: var(--blue-ink); }
.tile .num.red, .tile.review .num.red { color: var(--red-dark); }
.tile.sk-b { background: var(--purple-soft); border-color: #EAD2FB; border-bottom-color: #DCB6F6; }

.sec-h { font-size: 20px; font-weight: 900; margin: 26px 0 12px; }

.list { display: flex; flex-direction: column; gap: 12px; }
.item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px; text-align: left; min-height: 84px; border-radius: var(--r-md); }
.item:active { transform: translateY(3px); border-bottom-width: 2px; }
.item .thumb { width: 58px; height: 58px; flex: none; object-fit: cover; object-position: top; border: 2px solid var(--line); border-radius: var(--r-sm); background: #F7F7F7; }
.item .tt { display: block; font-size: 17px; font-weight: 900; margin-bottom: 4px; }
.item .chips { margin-bottom: 2px; }
.item .small { display: block; font-weight: 700; }
.item .chev { font-size: 24px; color: #AFAFAF; font-weight: 900; }
.empty { text-align: center; color: var(--muted); padding: 40px 12px; font-weight: 800; }

.filters { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 10px; scrollbar-width: none; }
.filters button { flex: none; min-height: 40px; padding: 4px 14px; font-size: 15px; font-weight: 800; color: var(--muted); background: var(--surface); border: 2px solid var(--line); border-bottom-width: 4px; border-radius: 999px; }
.filters button.on { background: var(--blue-soft); border-color: #84D8FF; color: var(--blue-ink); }

/* ---------- 拍题 ---------- */
.tips { background: var(--yellow-soft); border: 2px solid #FFE48A; border-bottom-width: 4px; border-radius: var(--r-lg); padding: 12px 16px; font-size: 15px; color: #6B4E00; }
.tips ul { margin: 4px 0 0; padding-left: 20px; }
.photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.photo, .add-photo { aspect-ratio: 3 / 4; position: relative; overflow: hidden; border-radius: var(--r-md); border: 2px solid var(--line); border-bottom-width: 5px; }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo button { position: absolute; top: 6px; right: 6px; width: 32px; height: 32px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .55); color: #fff; font-weight: 900; }
.add-photo { border-style: dashed; border-bottom-width: 2px; background: #FAFAFA; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--muted); font-size: 15px; font-weight: 800; }
.add-photo .plus { font-size: 36px; font-weight: 900; color: var(--blue); line-height: 1; }

.loading { text-align: center; padding: 60px 16px; }
.loading .spin { font-size: 60px; display: inline-block; animation: bob 1.2s ease-in-out infinite; }
.loading p { font-size: 20px; }
@keyframes bob { 50% { transform: translateY(-10px) rotate(-6deg); } }

/* ---------- 错题卡 / 对话 ---------- */
.prob { padding: 12px 14px; background: var(--blue-soft); border-color: #B8E6FC; border-bottom-color: #8FD5F7; }
.prob .pt { font-size: 18px; margin: 6px 0 2px; }
.prob .px { font-size: 16px; }
.thumbs { display: flex; gap: 8px; margin-top: 8px; }
.thumbs img { width: 64px; height: 64px; object-fit: cover; border: 2px solid var(--line); border-radius: var(--r-sm); cursor: zoom-in; }

.chat { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.msg { display: flex; gap: 8px; align-items: flex-end; max-width: 100%; }
.msg .who-av { width: 38px; height: 38px; flex: none; display: grid; place-items: center; font-size: 20px; border-radius: 50%; background: var(--green-soft); border: 2px solid #B5EC8C; }
.bub { padding: 9px 14px; line-height: 1.6; font-size: 16px; overflow-wrap: anywhere; border-radius: 18px; }
.msg.ai .bub { max-width: calc(100% - 80px); background: #fff; border: 2px solid var(--line); border-bottom-width: 4px; border-bottom-left-radius: 6px; }
.msg.kid { width: 100%; justify-content: flex-end; }
.msg.kid .bub { max-width: 85%; background: var(--blue); color: #fff; border-bottom: 4px solid var(--blue-dark); border-bottom-right-radius: 6px; }
.msg.kid .bub img { border-radius: 10px; margin-bottom: 6px; max-height: 240px; }
.say { flex: none; width: 32px; height: 32px; border: 0; background: none; font-size: 17px; border-radius: 50%; opacity: .7; }
.say.loading { animation: spin 1s linear infinite; opacity: .5; }
.say.playing { background: var(--yellow-soft); opacity: 1; }
@keyframes spin { to { transform: rotate(360deg); } }
.lower .bub { font-size: 20px; line-height: 1.7; }
.lower .variant .q { font-size: 21px; }
.sys { align-self: center; font-size: 14px; font-weight: 800; color: var(--yellow-ink); background: var(--yellow-soft); border: 2px solid #FFE48A; padding: 4px 14px; border-radius: 999px; }
.typing::after { content: '…'; display: inline-block; animation: bob .8s ease-in-out infinite; color: var(--muted); font-weight: 900; }

.composer {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 20; width: min(var(--sheet), 100%);
  padding: 10px 12px calc(6px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 2px solid var(--line);
}
.composer .row { align-items: flex-end; gap: 8px; }
.composer textarea { min-height: 48px; max-height: 160px; flex: 1; }
.composer .iconbtn { width: 48px; height: 48px; border-radius: var(--r-md); }
.composer [data-photo] { background: var(--purple-soft); border-color: #E8CCFB; }
.hint { font-size: 14px; font-weight: 800; color: var(--blue-ink); margin: 0 4px 8px; }
.attach-preview { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.attach-preview img { width: 56px; height: 56px; object-fit: cover; border: 2px solid var(--line); border-radius: var(--r-sm); }

.cele { position: relative; margin-bottom: 12px; padding: 12px 14px 14px; text-align: center; background: var(--yellow-soft); border: 2px solid #FFE48A; border-bottom-width: 5px; border-radius: var(--r-lg); }
.cele .ct { font-size: 19px; color: #7A5600; margin: 2px 0 10px; }
.stamp { display: none; }

.takeaway { padding: 12px 16px; background: var(--green-soft); border: 2px solid #B5EC8C; border-bottom-width: 4px; border-radius: var(--r-lg); color: #2E6B00; }

.variant { padding: 14px 16px; }
.variant .qno { font-size: 18px; color: var(--blue-ink); }
.variant .q { font-size: 17px; margin: 6px 0 12px; }
.answer-row { gap: 8px; }
.answer-row input { flex: 1; }
.answer-row .btn { min-height: 48px; padding: 4px 14px; flex: none; }
.feedback { border-radius: var(--r-md); padding: 10px 14px; margin: 10px 0; border: 2px solid var(--line); }
.feedback.ok { background: var(--green-soft); border-color: #B5EC8C; color: #2E6B00; }
.feedback.bad { background: var(--red-soft); border-color: #FFC2C2; color: #A51D1D; }
.answer-box { border-top: 2px dashed var(--line); margin-top: 12px; padding-top: 10px; font-size: 15px; }

details { background: var(--surface); border: 2px solid var(--line); border-bottom-width: 4px; border-radius: var(--r-lg); padding: 2px 16px; }
details summary { padding: 12px 0; font-size: 17px; font-weight: 900; cursor: pointer; list-style: none; }
details summary::after { content: '▾'; float: right; color: #AFAFAF; }
details[open] summary::after { content: '▴'; }
details > div { padding-bottom: 14px; }
ol.steps { margin: 0; padding-left: 22px; }

.dots { display: inline-flex; gap: 4px; vertical-align: middle; }
.dots i { width: 11px; height: 11px; border-radius: 50%; background: var(--line); }
.dots i.on { background: var(--green); }

/* ---------- 家长 ---------- */
.pin { max-width: 360px; margin: 48px auto 0; padding: 24px; }
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; text-align: center; }
.stat-row .num { font-size: 28px; font-weight: 900; color: var(--blue-ink); line-height: 1.2; }
.stat-row .lbl { font-size: 13px; color: var(--muted); font-weight: 800; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.bars { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.bar { display: grid; grid-template-columns: 7em 1fr 2.5em; align-items: center; gap: 8px; font-size: 14px; }
.bar .label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar .track { height: 12px; background: var(--line); border-radius: 99px; overflow: hidden; }
.bar .fill { display: block; height: 100%; background: var(--green); border-radius: 99px; }
.bar .n { text-align: right; color: var(--muted); }
.avatars, .swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.avatars button { width: 48px; height: 48px; font-size: 28px; border: 2px solid var(--line); border-bottom-width: 4px; border-radius: var(--r-sm); background: #fff; }
.avatars button.on { background: var(--blue-soft); border-color: #84D8FF; }
.swatches button { width: 40px; height: 40px; border: 0; border-radius: 50%; }
.swatches button.on { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--text); }

/* ---------- 弹层 / 提示 ---------- */
.overlay { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, .55); }
.overlay > img { max-height: 90vh; border-radius: 12px; }
.modal { width: min(380px, 100%); padding: 22px; }
#toast { position: fixed; left: 50%; bottom: calc(120px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 60; pointer-events: none; width: max-content; max-width: 88vw; }
#toast div { background: #3C3C3C; color: #fff; padding: 10px 18px; border-radius: var(--r-md); font-size: 15px; font-weight: 800; }

.katex { font-size: 1.05em; }

/* 标题、短句均衡换行，避免最后一行只剩 1–2 个字 */
.tt, .pt, .nav h1, .sec-h, .ct, .hero .t, .kid-card .name, .variant .qno, .tips li, .hint, .empty, .muted.center { text-wrap: balance; }
.bub, .q, .feedback, .takeaway, .px { text-wrap: pretty; }

/* ---------- 手机窄屏 ---------- */
@media (max-width: 480px) {
  .wrap { padding-left: 14px; padding-right: 14px; }
  .grid2 { grid-template-columns: 1fr; }
  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .kids { grid-template-columns: 1fr 1fr; gap: 12px; }
  .kid-card { min-height: 150px; padding: 14px; }
  .composer .iconbtn { width: 44px; height: 44px; font-size: 19px; }
  .answer-row .iconbtn { width: 44px; height: 44px; }
}

/* ---------- 对话里的图 ---------- */
.msg-diagram { margin: -4px 0 4px 46px; padding: 10px; }
.dg-title { font-weight: 900; margin: 2px 4px 8px; }
.dg-board { width: 100%; aspect-ratio: 1 / 0.82; border-radius: 12px; background: #fff; touch-action: none; }
.dg-board.solid { aspect-ratio: 1 / 0.9; }
.dg-readouts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.dg-ro { padding: 4px 10px; border-radius: 999px; font-weight: 900; font-size: 15px; border: 2px solid var(--line); }
.dg-ro.r0 { background: var(--blue-soft); border-color: #B8E6FC; color: var(--blue-ink); }
.dg-ro.r1 { background: #FFF1E0; border-color: #FFD3A3; color: #B85E00; }
.dg-ro.r2 { background: var(--green-soft); border-color: #B5EC8C; color: var(--green-ink); }
.dg-hint { font-size: 13px; color: var(--muted); margin: 6px 4px 0; }
.dg-step { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 2px dashed var(--line); }
.dg-text { flex: 1; font-size: 15px; text-wrap: pretty; }
.dg-nav { display: flex; gap: 6px; flex: none; }
.drawing { margin-top: 6px; font-size: 14px; color: var(--blue-ink); font-weight: 800; }
@media (max-width: 480px) { .msg-diagram { margin-left: 0; } }