:root {
  color-scheme: light;
  --canvas: #edf2e9;
  --paper: #fffefa;
  --side: #f4f7ef;
  --ink: #223e32;
  --muted: #52665b;
  --accent: #245a47;
  --accent-soft: #dceade;
  --peach: #f7e9df;
  --line: #d9e2d7;
  font: 16px/1.6 system-ui, "PingFang SC", "Microsoft YaHei", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--canvas); }
button, select { font: inherit; }
button, summary { cursor: pointer; }
:focus-visible { outline: 3px solid #347c60; outline-offset: 3px; }
a { color: var(--accent); text-underline-offset: 3px; }
main { max-width: 80rem; margin-inline: auto; padding: clamp(.65rem, 3vw, 2.5rem); }
#student-growth-dashboard {
  display: grid;
  grid-template-columns: clamp(10rem, 17vw, 14rem) minmax(0, 1fr);
  min-height: min(48rem, 90svh);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 1.4rem;
  box-shadow: 0 12px 36px #263f2410;
}
.growth-sidebar { padding: 1.6rem .85rem; background: var(--side); border-inline-end: 1px solid var(--line); border-radius: 1.4rem 0 0 1.4rem; }
.growth-brand { display: flex; align-items: center; gap: .55rem; margin: 0 .4rem 1.55rem; font-weight: 750; }
.growth-brand small { display: block; color: var(--muted); font-size: .75rem; font-weight: 450; }
.growth-menu { display: grid; gap: .3rem; }
.growth-menu button { display: flex; align-items: center; gap: .55rem; min-height: 44px; padding: .45rem .65rem; border: 0; border-radius: .7rem; text-align: start; color: var(--muted); background: transparent; }
.growth-menu button:hover, .growth-menu button[aria-selected="true"] { background: var(--accent-soft); color: var(--accent); }
.growth-menu button[aria-selected="true"] { font-weight: 750; }
.site-symbol { display: inline-grid; place-items: center; flex: none; width: 1.35rem; color: var(--accent); font-style: normal; }
.growth-brand .site-symbol { width: 2rem; height: 2rem; border-radius: .6rem; background: var(--accent); color: var(--paper); font-size: 1.2rem; }
.growth-content { min-width: 0; padding: clamp(.8rem, 3vw, 2.25rem); }
h1, h3, p, dl { margin: 0; }
.growth-brand h1 { font: inherit; }
h3 { font-size: 1.1rem; line-height: 1.45; }
.journal-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: clamp(.65rem, 2vw, 1rem);
  margin-block-end: clamp(.95rem, 2.5vw, 1.4rem);
  padding: clamp(.85rem, 2.5vw, 1.3rem);
  border-inline-start: .3rem solid #e1bd79;
  border-radius: .9rem;
  background: linear-gradient(115deg, #193e31, #2b5846);
  color: #fffdf4;
  box-shadow: 0 .25rem .7rem #193e3122;
}
.journal-header::before {
  content: "";
  width: 1rem;
  height: 1rem;
  margin-block-start: .4rem;
  background: #f3d69b;
  clip-path: polygon(50% 0%, 65% 35%, 100% 50%, 65% 65%, 50% 100%, 35% 65%, 0% 50%, 35% 35%);
}
.journal-header p { font-size: clamp(1.05rem, 1rem + .55vw, 1.42rem); font-weight: 750; line-height: 1.5; overflow-wrap: anywhere; }
.text-muted { color: var(--muted); }
.growth-section { display: grid; gap: .45rem; align-content: start; }
.growth-section + .growth-section { margin-block-start: 1rem; padding-block-start: 1rem; border-block-start: 1px solid var(--line); }
.growth-spotlights { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: .85rem; }
.growth-spotlights .growth-section { margin: 0; padding: .85rem; border: 1px solid var(--line); border-radius: .9rem; }
.growth-illustration { display: flex; align-items: center; justify-content: center; gap: .7rem; min-height: 6rem; margin-block-end: .25rem; border-radius: .65rem; background: var(--peach); }
.growth-illustration .site-symbol { width: auto; font-size: 2rem; }
.growth-palette, .growth-talk-bubble { background: var(--accent-soft); }
.growth-history { margin-block-start: 1.2rem; }
.growth-timeline { list-style: none; margin: 0; padding: 0; }
.growth-timeline li { display: grid; grid-template-columns: .75rem minmax(0, 1fr); gap: .65rem; position: relative; padding-block: .35rem; }
.growth-timeline li:first-child::before { content: ""; position: absolute; inset-block: .9rem -.65rem; inset-inline-start: .3rem; border-inline-start: 1px solid var(--line); }
.growth-timeline-dot { position: relative; width: .65rem; height: .65rem; margin-block-start: .4rem; border-radius: 50%; background: var(--accent); }
.growth-timeline-next { background: var(--paper); border: 1px solid var(--accent); }
.growth-review div { display: grid; grid-template-columns: minmax(5rem, 22%) minmax(0, 1fr); gap: .65rem; padding-block: .7rem; border-block-end: 1px solid var(--line); }
.growth-review dt { color: var(--accent); font-weight: 700; }
.growth-review dd { margin: 0; }
.growth-period { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-block: .4rem; }
.growth-period select { min-height: 44px; padding: .25rem .6rem; border: 1px solid var(--line); border-radius: .65rem; background: var(--side); color: var(--ink); }
.growth-talk-bubble { justify-self: start; padding: .7rem .85rem; border-radius: 1rem 1rem 1rem .2rem; }
.site-schedule-heading { margin-block-end: .9rem; }
.site-schedule-heading h3 { margin-block-end: .2rem; }
.site-schedule { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .55rem; margin-block-end: .75rem; }
.site-schedule button { min-width: 0; min-height: 56px; padding: .55rem .65rem; border: 1px solid var(--line); border-radius: .8rem; background: var(--side); color: var(--ink); text-align: start; font-weight: 750; }
.site-schedule button:hover { border-color: var(--accent); }
.site-schedule button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.site-schedule small { display: block; color: var(--muted); font-weight: 450; }
.site-schedule-table { border: 1px solid var(--line); border-radius: .8rem; overflow: hidden; background: var(--paper); }
.growth-schedule { width: 100%; table-layout: fixed; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.growth-schedule :is(th, td) { padding: .5rem .7rem; border-block-end: 1px solid var(--line); text-align: start; vertical-align: top; overflow-wrap: anywhere; }
.growth-schedule :is(th, td):first-child { width: 8rem; color: var(--accent); }
.growth-schedule thead { background: var(--side); color: var(--muted); }
.growth-schedule tbody tr:last-child > * { border-block-end: 0; }
@media (max-width: 720px) {
  #student-growth-dashboard { grid-template-columns: 7.2rem minmax(0, 1fr); }
  .growth-sidebar { padding-inline: .45rem; }
  .growth-brand { margin-inline: 0; gap: .35rem; }
  .growth-brand small { display: none; }
  .growth-menu button { padding-inline: .35rem; font-size: .9rem; gap: .25rem; }
  .site-schedule { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  html { scroll-padding-block-end: calc(7.5rem + env(safe-area-inset-bottom)); }
  main {
    padding: 0;
    padding-inline: env(safe-area-inset-left) env(safe-area-inset-right);
  }
  #student-growth-dashboard {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    min-height: 100svh;
    padding-block-end: calc(7.5rem + env(safe-area-inset-bottom));
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .growth-sidebar { border: 0; border-block-end: 1px solid var(--line); padding: calc(.65rem + env(safe-area-inset-top)) .9rem .65rem; border-radius: 0; }
  .growth-brand { margin: 0; }
  .growth-brand small { display: block; }
  .growth-menu {
    position: fixed;
    z-index: 10;
    inset: auto 0 0;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .15rem;
    padding: .3rem max(.35rem, env(safe-area-inset-right)) calc(.3rem + env(safe-area-inset-bottom)) max(.35rem, env(safe-area-inset-left));
    border-block-start: 1px solid var(--line);
    background: var(--paper);
    box-shadow: 0 -.25rem 1rem #263f2415;
  }
  .growth-menu button {
    display: grid;
    justify-items: center;
    align-content: center;
    min-height: 48px;
    min-width: 0;
    gap: 0;
    padding: .2rem .1rem;
    text-align: center;
    font-size: .76rem;
    line-height: 1.25;
  }
  .growth-menu button .site-symbol { font-size: 1.03rem; }
  .growth-content { padding: .9rem; }
  .growth-schedule :is(th, td) { padding-inline: .45rem; }
  .growth-schedule :is(th, td):first-child { width: 7rem; }
}
.material-form { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%, 12rem),1fr)); gap:.7rem; padding:1rem; border:1px solid var(--line); border-radius:.8rem; background:var(--side); }
.material-form label { display:grid; gap:.2rem; min-width:0; }
.material-form input, .material-form select { width:100%; min-height:44px; padding:.35rem .5rem; border:1px solid var(--line); border-radius:.5rem; background:var(--paper); color:var(--ink); font:inherit; }
.material-wide, .material-form [role="status"] { grid-column:1 / -1; }
.material-form button { justify-self:start; min-height:44px; padding:.35rem .75rem; border:0; border-radius:.6rem; background:var(--accent); color:var(--paper); }
.material-form button:disabled { opacity:.6; }
.material-list { list-style:none; padding:0; margin:.3rem 0; display:grid; gap:.55rem; }
.material-list li { min-width:0; padding:.65rem; border:1px solid var(--line); border-radius:.6rem; overflow-wrap:anywhere; }
.material-list img { display:block; width:100%; height:9rem; object-fit:contain; background:var(--side); border-radius:.4rem; margin-bottom:.35rem; }
.material-list button { min-height:44px; margin-inline-start:.45rem; padding:0 .45rem; border:0; background:transparent; color:var(--accent); text-decoration:underline; }
.art-gallery { grid-template-columns:repeat(auto-fit,minmax(min(100%, 10rem),1fr)); }
.study-topics { margin:0; padding-inline-start:1.5rem; }
.account-entry { max-width: 34rem; margin-block: clamp(1rem, 8vh, 5rem); padding: clamp(1rem, 4vw, 2rem); background: var(--paper); border: 1px solid var(--line); border-radius: 1rem; }
.account-entry h1 { color: var(--accent); font-size: clamp(1.4rem, 6vw, 2rem); }
.account-entry h2 { margin-block: .85rem .4rem; font-size: 1.2rem; }
.account-entry p { margin-block: .55rem; }
.account-entry .material-form { margin-block: .65rem; grid-template-columns: 1fr; }
.site-account-create summary { padding: .55rem .25rem; color: var(--accent); font-weight: 750; }
.account-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }
.account-actions button { min-height: 44px; padding-inline: .65rem; border: 1px solid var(--line); border-radius: .5rem; background: var(--side); color: var(--accent); }
[hidden] { display: none !important; }
.allowance-totals { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); gap:.65rem; }
.allowance-totals > div { min-width:0; padding:.7rem .85rem; border:1px solid var(--line); border-radius:.8rem; background:var(--side); }
.allowance-totals > div:first-child { background:var(--accent-soft); }
.allowance-totals dt { color:var(--muted); font-weight:650; }
.allowance-totals dd { margin:0; color:var(--accent); font-size:clamp(1.25rem, 3vw, 1.8rem); font-variant-numeric:tabular-nums; font-weight:750; overflow-wrap:anywhere; }
.allowance-totals small { color:var(--muted); }
.family-switch { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin-block-end:.6rem; }
.family-switch :is(a, button) { display:inline-flex; align-items:center; min-height:44px; padding:.35rem .85rem; border:1px solid var(--line); border-radius:.65rem; background:var(--side); color:var(--accent); text-decoration:none; }
.family-switch button { border-style:dashed; }
.family-switch button:disabled { color:var(--muted); cursor:default; }
.family-switch a[aria-current="page"] { border-color:var(--accent); background:var(--accent-soft); font-weight:750; }
#family-view-note, #family-switch-note { margin-block-end:.65rem; }
[data-family-read-only="true"] :is(#art-upload, #study-upload, #allowance-form, #art-records button:not(.review-generate), #study-records button:not(.review-generate), #allowance-records button) { display:none; }
.diary-form { grid-template-columns:minmax(0, 1fr); }
.diary-form textarea { width:100%; min-height:6rem; padding:.65rem; border:1px solid var(--line); border-radius:.55rem; color:var(--ink); background:var(--paper); font:inherit; resize:vertical; }
.diary-form audio, #diary-records audio { display:block; width:100%; max-width:24rem; }
#diary-records .diary-text { white-space:pre-wrap; }
[data-family-read-only="true"] :is(#diary-form, #diary-records .diary-delete) { display:none; }
.allowance-wallet-heading { margin:.45rem 0 0; }
.allowance-wallets { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%, 8rem),1fr)); gap:.55rem; }
.allowance-wallets > div { min-width:0; padding:.55rem .75rem; border:1px solid var(--line); border-radius:.7rem; background:var(--paper); }
.allowance-wallets dt { color:var(--muted); font-size:.88rem; font-weight:650; }
.allowance-wallets dd { margin:0; color:var(--accent); font-weight:750; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.material-review { margin-block:.45rem; padding:.5rem .6rem; border:1px solid var(--line); border-radius:.55rem; background:var(--side); }
.material-review summary { min-height:36px; color:var(--accent); font-weight:750; }
.review-actions { display:flex; flex-wrap:wrap; align-items:end; gap:.4rem .65rem; margin-block:.4rem; }
.review-actions label { display:grid; gap:.2rem; }
.review-actions input { max-width:6rem; min-height:44px; border:1px solid var(--line); border-radius:.45rem; color:var(--ink); background:var(--paper); font:inherit; }
.material-list .review-actions button { margin-inline-start:0; padding-inline:.65rem; border:1px solid var(--line); border-radius:.45rem; background:var(--paper); text-decoration:none; }
.review-feedback { display:grid; gap:.15rem; margin-block:.45rem; }
.review-feedback dt { color:var(--accent); font-weight:750; }
.review-feedback dd { margin:0 0 .45rem; white-space:pre-wrap; }
.young-ideas { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%, 10rem),1fr)); gap:.6rem; margin:.3rem 0 0; padding:0; list-style:none; }
.young-ideas li { display:grid; align-content:start; gap:.2rem; padding:.7rem .8rem; border:1px solid var(--line); border-radius:.7rem; background:var(--side); }
.young-ideas strong { color:var(--accent); }
[data-young-view="true"] :is(.growth-menu button, .material-form button) { min-height:48px; }
.site-chat { display:grid; min-width:0; gap:.55rem; padding:.8rem; border:1px solid var(--line); border-radius:.8rem; background:var(--paper); }
.site-chat h4, .diary-compose-title { margin:0; color:var(--accent); }
#site-chat-log { display:grid; gap:.55rem; max-height:22rem; overflow:auto; padding:0; margin:0; list-style:none; }
.site-chat-message { max-width:min(90%, 36rem); padding:.55rem .7rem; border-radius:.75rem; background:var(--side); overflow-wrap:anywhere; }
.site-chat-message p { white-space:pre-wrap; }
.site-chat-user { justify-self:end; background:var(--accent-soft); }
.site-chat-message button { min-height:44px; margin-block-start:.25rem; border:0; background:transparent; color:var(--accent); text-decoration:underline; }
[data-family-read-only="true"] .diary-compose-title { display:none; }
@media (max-width: 600px) {
  .material-form { grid-template-columns: minmax(0, 1fr); padding: .75rem; }
  .material-form > button { justify-self: stretch; }
  .account-entry { margin: max(1rem, env(safe-area-inset-top)) .85rem; padding: 1rem; }
  .family-switch a, .family-switch button { flex: 1 0 auto; justify-content: center; }
  #site-chat-log { max-height: min(16rem, 40svh); }
}