:root {
  color-scheme: light;
  --bg: #f7f7f2;
  --surface: #ffffff;
  --surface-soft: #f2f5ed;
  --ink: #253b30;
  --muted: #536357;
  --line: #c8d1c4;
  --primary: #256247;
  --primary-dark: #174b35;
  --primary-soft: #e4efe7;
  --accent: #a95734;
  --danger: #b42318;
  --shadow: 0 8px 28px rgba(37, 59, 48, .045);
  --radius: 20px;
  --tap-min: 60px;
  --tap-primary: 64px;
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  font-size: 22px;
  line-height: 1.65;
}

* { box-sizing: border-box; }
html { min-height: 100%; scroll-padding-bottom: 120px; background: var(--bg); }
body { min-height: 100vh; margin: 0; overflow-wrap: anywhere; color: var(--ink); background: var(--bg); }
img, video, canvas, svg { max-width: 100%; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button { cursor: pointer; user-select: none; }
button:active { opacity: .86; }
button:disabled { cursor: not-allowed; opacity: .48; }
:focus-visible { outline: 3px solid #996018; outline-offset: 4px; }
#main:focus { outline: none; }
small { font-size: .86rem; line-height: 1.6; }
::placeholder { color: #637064; opacity: 1; }
.ui-icon { flex: 0 0 auto; width: 1.2rem; height: 1.2rem; vertical-align: middle; }
.topbar-actions { display: flex; align-items: center; gap: .6rem; }
.reading-button { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: var(--tap-min); padding: .5rem .8rem; border: 1px solid #97ad99; border-radius: 12px; color: var(--primary-dark); background: var(--surface); font-size: .9rem; font-weight: 800; }
.reading-button > span:first-child { font-size: 1.15rem; }
.reading-button[aria-pressed="true"] { background: var(--primary-soft); border-color: var(--primary); }
[hidden] { display: none !important; }

h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: .75rem; font-size: clamp(1.55rem, 3.5vw, 2rem); line-height: 1.4; }
h2 { margin-bottom: .45rem; font-size: clamp(1.35rem, 3vw, 1.65rem); line-height: 1.45; }
h3 { margin-bottom: .5rem; font-size: 1.18rem; line-height: 1.35; }
.eyebrow { margin: 0 0 .45rem; color: var(--primary); font-size: .95rem; font-weight: 800; letter-spacing: .05em; }
.lead { max-width: 34rem; color: var(--muted); font-size: 1rem; line-height: 1.7; }
.muted { color: var(--muted); }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.skip-link { position: fixed; top: -5rem; left: 1rem; z-index: 50; padding: .8rem 1rem; border-radius: 10px; background: white; }
.skip-link:focus { top: 1rem; }

.landing { width: min(100% - 2rem, 640px); min-height: 100vh; margin: 0 auto; padding: max(2rem, env(safe-area-inset-top)) 0 max(2rem, env(safe-area-inset-bottom)); }
.landing-header { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.6rem; }
.landing-header div { flex: 1; display: grid; gap: .1rem; }
.landing-header strong { font-size: 1.15rem; }
.landing-header div > span { color: var(--muted); font-size: .86rem; }
.brand-mark { flex: 0 0 48px; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; color: white; background: var(--primary); font-size: 1.25rem; font-weight: 900; }
.role-panel { padding: clamp(1.35rem, 4vw, 2.2rem); border: 1px solid var(--line); border-radius: 20px; background: var(--surface); box-shadow: var(--shadow); }
.role-grid { display: grid; gap: .85rem; margin-top: 1.5rem; }
.role-card { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: center; gap: 1rem; min-height: 112px; padding: 1.1rem; border: 1px solid var(--line); border-radius: 14px; color: var(--ink); background: white; text-align: left; transition: border-color .15s, background .15s, transform .12s; }
.role-card::after { content: ""; width: 22px; height: 22px; border: 2px solid #b9c2c8; border-radius: 20px; }
.role-card:hover { border-color: #9bc4b2; background: var(--surface-soft); }
.role-card.selected { border-color: var(--primary); background: var(--primary-soft); box-shadow: inset 0 0 0 1px var(--primary); }
.role-card.selected::after { border: 7px solid var(--primary); background: white; }
.role-card:active { transform: scale(.99); }
.role-icon { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 16px; background: var(--primary-soft); color: var(--primary-dark); font-size: 1.1rem; font-weight: 900; }
.role-icon.junior { background: #fff1df; color: #9a5400; }
.role-copy { min-width: 0; }
.role-copy strong, .role-copy span { display: block; }
.role-copy strong { margin-bottom: .3rem; font-size: 1.14rem; }
.role-copy span { color: var(--muted); font-size: 1rem; line-height: 1.5; }
.privacy-tip { display: grid; gap: .2rem; margin-top: 1.2rem; padding: 1rem; border-radius: 12px; background: #f5f7f8; color: var(--muted); font-size: .95rem; line-height: 1.5; }
.privacy-tip strong { display: flex; align-items: center; gap: .3rem; color: var(--primary-dark); }
.landing-foot { margin: 1.1rem 0 0; color: var(--muted); font-size: .95rem; text-align: center; }
.login-submit { width: 100%; margin-top: 1rem; background: var(--primary); }
.login-submit:hover { background: var(--primary-dark); }

.app-shell { min-height: 100vh; }
.topbar { position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: .9rem; min-height: 76px; padding-top: max(.7rem, env(safe-area-inset-top)); padding-right: max(clamp(1rem, 4vw, 3rem), env(safe-area-inset-right)); padding-bottom: .7rem; padding-left: max(clamp(1rem, 4vw, 3rem), env(safe-area-inset-left)); border-bottom: 1px solid var(--line); background: rgba(255, 253, 248, .98); }
.brand { display: flex; align-items: center; gap: .7rem; width: fit-content; min-height: var(--tap-min); padding: 0; border: 0; color: var(--ink); background: transparent; font-size: 1.08rem; font-weight: 850; text-align: left; }
.topbar .brand-mark { flex-basis: 42px; width: 42px; height: 42px; border-radius: 12px; font-size: 1rem; }
.user-chip { display: flex; align-items: center; gap: .45rem; color: var(--muted); font-size: .95rem; }
.user-dot { width: .5rem; height: .5rem; border-radius: 20px; background: #34a16e; }
.notification-button { position: relative; min-width: 82px; min-height: var(--tap-min); padding: .6rem 1rem; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: white; font-size: .95rem; font-weight: 750; }
.notification-button .badge { position: absolute; top: -.35rem; right: -.3rem; min-width: 1.35rem; height: 1.35rem; justify-content: center; border: 0; color: white; background: var(--danger); }
.layout { width: min(100%, 1480px); margin: 0 auto; display: grid; grid-template-columns: minmax(215px, 246px) minmax(0, 1fr); gap: clamp(1rem, 3vw, 2rem); padding-top: 1.6rem; padding-right: max(clamp(1rem, 3vw, 2rem), env(safe-area-inset-right)); padding-bottom: max(5rem, calc(2rem + env(safe-area-inset-bottom))); padding-left: max(clamp(1rem, 3vw, 2rem), env(safe-area-inset-left)); }
.sidebar { position: sticky; top: 94px; align-self: start; display: flex; flex-direction: column; gap: .35rem; padding: .55rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.nav-button { position: relative; width: 100%; min-height: 68px; display: flex; align-items: center; gap: .5rem; padding: .7rem .6rem; border: 0; border-radius: 11px; color: var(--muted); background: transparent; text-align: left; font-size: .95rem; }
.nav-count { display: grid; place-items: center; min-width: 26px; min-height: 26px; margin-left: auto; padding: 0 .25rem; border-radius: 20px; color: #fff; background: var(--danger); font-size: .82rem; }
.nav-icon { flex: 0 0 1.8rem; width: 1.8rem; height: 1.8rem; display: grid; place-items: center; border-radius: 9px; color: var(--primary-dark); background: var(--primary-soft); font-size: .9rem; font-weight: 900; }
.nav-button:hover { background: #f4f6f7; }
.nav-button.active { color: var(--primary-dark); background: var(--primary-soft); font-weight: 850; }
.nav-separator { height: 1px; margin: .35rem .6rem; background: var(--line); }
.main { min-width: 0; max-width: 1000px; }
.page-head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1.35rem; }
.page-head h2 { margin-bottom: .35rem; }
.page-head p { margin-bottom: 0; color: var(--muted); line-height: 1.6; }

.home-greeting { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem 1rem; margin-bottom: 1.3rem; }
.home-greeting h1 { margin-bottom: .25rem; }
.home-greeting p { margin-bottom: 0; color: var(--muted); }
.home-greeting .eyebrow { margin-bottom: .25rem; color: var(--primary); }
.home-date { color: var(--muted); font-size: .86rem; }
.hero { overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(220px, 1fr); border: 1px solid #b7c9b5; border-radius: var(--radius); color: var(--ink); background: #eaf0e3; box-shadow: var(--shadow); }
.hero-copy { align-self: center; padding: clamp(1.2rem, 3vw, 1.8rem); }
.hero-symbol { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: .7rem; border-radius: 16px; color: var(--primary); background: #d9e6d3; }
.hero-symbol .ui-icon { width: 30px; height: 30px; }
.hero h2 { max-width: 16ch; font-size: 1.7rem; }
.hero p { max-width: 34rem; color: #435640; font-size: .95rem; line-height: 1.8; }
.hero .button { min-height: 76px; padding: .85rem 1.2rem; gap: .65rem; font-size: 1.12rem; }
.hero .button .ui-icon:last-child { margin-left: .7rem; }
.hero-assurance { display: flex; align-items: center; gap: .25rem; margin-top: .7rem; color: #435640; font-size: .86rem; }
.hero-art { min-height: 320px; background: url('/assets/hero.webp') 65% center / cover no-repeat; }

.button { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: var(--tap-primary); padding: .9rem 1.2rem; border: 1px solid transparent; border-radius: 14px; color: white; background: var(--primary); font-size: 1rem; font-weight: 800; line-height: 1.5; text-decoration: none; transition: background .15s, transform .12s; }
.button:hover { background: var(--primary-dark); }
.button:active { transform: scale(.985); }
.button.secondary { border-color: var(--line); color: var(--ink); background: white; }
.button.secondary:hover { border-color: #a9b7b0; background: var(--surface-soft); }
.button.ghost { color: var(--primary-dark); background: var(--primary-soft); }
.button.danger { color: white; background: var(--danger); }
.button.danger-subtle { border-color: #e5b8b3; color: #8a2119; background: #fff5f4; }
.button.danger-subtle:hover { background: #fee9e7; }
.button-row { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.15rem; }
.button-row.compact { margin-top: 0; }
.button-row.compact select { width: auto; }

.panel, .item { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: 0 4px 16px rgba(24, 39, 32, .045); }
.panel { padding: clamp(1.2rem, 3vw, 1.8rem); }
.panel + .panel { margin-top: 1rem; }
.item { padding: 1.25rem; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.field { display: grid; gap: .5rem; margin-bottom: 1rem; }
.field label, .field-label { font-size: 1rem; font-weight: 800; }
.field small { color: var(--muted); font-size: .95rem; line-height: 1.55; }
input, textarea, select { width: 100%; min-width: 0; min-height: var(--tap-min); padding: .85rem 1rem; border: 2px solid #a9b7a7; border-radius: 12px; color: var(--ink); background: white; }
textarea { min-height: 140px; resize: vertical; line-height: 1.65; }
input:focus, textarea:focus, select:focus { border-color: var(--primary); outline: 3px solid rgba(47, 114, 88, .12); }
input[type="file"] { min-height: var(--tap-primary); padding: .4rem; }
input[type="file"]::file-selector-button { min-height: 48px; margin-right: .8rem; padding: .55rem .9rem; border: 0; border-radius: 8px; color: var(--primary-dark); background: var(--primary-soft); font-weight: 750; }
.item-list { display: grid; gap: 1rem; }
.item-head { display: flex; align-items: start; justify-content: space-between; gap: 1rem; }
.item p { color: var(--muted); line-height: 1.65; }
.meta { display: flex; flex-wrap: wrap; gap: .55rem; color: var(--muted); font-size: .95rem; }
.badge { min-height: 34px; display: inline-flex; align-items: center; padding: .3rem .65rem; border: 1px solid #b9d4c7; border-radius: 20px; color: var(--primary-dark); background: var(--primary-soft); font-size: .86rem; font-weight: 800; }
.badge.green { color: #256346; background: #e5f4ec; }
.steps { padding-left: 1.45rem; line-height: 1.8; }
.empty { padding: 3rem 1rem; border: 1px dashed #cdd5da; border-radius: var(--radius); color: var(--muted); background: var(--surface); text-align: center; }
.empty strong { display: block; margin-bottom: .35rem; color: var(--ink); }
.timeline { position: relative; padding-left: 1.4rem; }
.timeline::before { content: ""; position: absolute; top: .7rem; bottom: .7rem; left: .25rem; width: 2px; background: #cadfd5; }
.timeline .item { position: relative; }
.timeline .item::before { content: ""; position: absolute; top: 1.5rem; left: -1.55rem; width: .7rem; height: .7rem; border: 3px solid var(--bg); border-radius: 20px; background: var(--primary); }
.quote { padding: .9rem 1rem; border-left: 4px solid var(--accent); border-radius: 0 10px 10px 0; color: var(--ink) !important; background: #fff8ea; }

.switch-line { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 82px; padding: 1rem 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.switch-line:last-child { border-bottom: 0; }
.switch-line p { margin: .2rem 0 0; }
.switch { flex: 0 0 64px; width: 64px; height: 40px; accent-color: var(--primary); cursor: pointer; }
.notice { margin-bottom: 1rem; padding: .9rem 1rem; border-left: 4px solid var(--accent); border-radius: 0 10px 10px 0; color: #754c12; background: #fff7e8; }
.notice.error { color: #8a2119; background: #fff0ef; }
.notice.success { color: #205f45; background: #e9f6ef; }
.notice-button { width: 100%; min-height: var(--tap-primary); margin-top: 1rem; border: 0; text-align: left; }

.section-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1rem; margin: 1.7rem 0 .75rem; }
.section-head h2 { margin: 0; font-size: 1.2rem; }
.section-head p { margin: 0; color: var(--muted); font-size: .86rem; }
.conversation-starts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.start-card { min-height: 114px; display: flex; align-items: center; gap: .75rem; padding: .9rem; border: 1px solid var(--line); border-radius: 16px; color: var(--ink); background: var(--surface); text-align: left; }
.start-copy { flex: 1; min-width: 0; display: grid; gap: .15rem; }
.start-card > .ui-icon { width: .9rem; color: var(--muted); }
.start-card .topic-icon { flex: 0 0 48px; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; color: #396542; background: #eaf0e3; }
.start-card .topic-1 { color: #995741; background: #faeee8; }
.start-card .topic-2 { color: #826323; background: #f5efdd; }
.start-card .topic-3 { color: #436e7b; background: #e9f0f2; }
.start-card:hover { border-color: #8eb09e; background: #fff; }
.start-card strong { color: var(--ink); font-size: 1.05rem; }
.start-copy > span { color: var(--muted); font-size: .86rem; line-height: 1.6; }
.home-letter { width: 100%; min-height: 96px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .9rem; margin-top: 1rem; padding: 1rem; border: 1px solid #b7cabe; border-radius: 14px; color: var(--ink); background: #fffdf8; text-align: left; }
.home-letter > span:not(.avatar):not(.letter-icon) { min-width: 0; display: grid; gap: .15rem; }
.letter-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; color: #98621b; background: #f4e8ce; }
.home-letter.has-reply { border: 2px solid #aa7933; background: #fffcf4; }
.home-letter small { color: var(--muted); }
.home-letter strong { font-size: 1.1rem; line-height: 1.5; }
.home-letter b { color: var(--primary-dark); }
.home-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-top: 1rem; }
.home-links button { display: flex; align-items: center; gap: .6rem; min-height: 76px; padding: .8rem 1rem; border: 1px solid var(--line); border-radius: 14px; color: var(--primary-dark); background: var(--surface); font-size: .95rem; font-weight: 800; text-align: left; }
.home-links button .ui-icon:last-child { width: .9rem; margin-left: auto; }
.family-message { padding: 1rem 1.1rem; border-left: 4px solid var(--accent); border-radius: 0 8px 8px 0; color: var(--ink) !important; background: #fbf3e5; font-size: 1.08rem; line-height: 1.75 !important; }
.response-wish { padding: .85rem 1rem; border-radius: 10px; color: var(--primary-dark) !important; background: var(--primary-soft); }
.response-wish span { display: block; margin-top: .35rem; color: var(--ink); }
.response-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.response-choice { min-height: 88px; display: flex; align-items: center; gap: .8rem; padding: .85rem; border: 1px solid var(--line); border-radius: 12px; background: white; cursor: pointer; }
.response-choice:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); box-shadow: inset 0 0 0 1px var(--primary); }
.response-choice input { flex: 0 0 30px; width: 30px; min-height: 30px; height: 30px; accent-color: var(--primary); }
.response-choice span, .response-choice strong, .response-choice small { display: block; }
.response-choice small { margin-top: .15rem; color: var(--muted); font-size: .95rem; }
.optional-title { margin-bottom: 1rem; padding: .85rem 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft); }
.optional-title summary { min-height: var(--tap-min); display: flex; align-items: center; justify-content: space-between; gap: .5rem; color: var(--primary-dark); font-weight: 800; cursor: pointer; list-style: none; }
.optional-title summary::after { content: "+"; flex-shrink: 0; font-size: 1.4rem; }
.optional-title[open] summary::after { content: "−"; }
.optional-title summary::-webkit-details-marker { display: none; }
.optional-title .field { margin-top: .8rem; margin-bottom: 0; }
.original-block { margin: 1rem 0; padding: 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft); }
.conversation { display: grid; gap: .65rem; margin: 1rem 0; padding: 1rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #faf8f2; }
.message { width: min(88%, 640px); padding: .85rem 1rem; border-radius: 4px 14px 14px 14px; background: white; box-shadow: 0 2px 8px rgba(62,48,31,.06); }
.message.mine { justify-self: end; border-radius: 14px 4px 14px 14px; background: var(--primary-soft); }
.message p { margin: .25rem 0; color: var(--ink); }
.message small { color: var(--muted); }
.quick-replies { display: flex; flex-wrap: wrap; gap: .55rem; margin-bottom: .65rem; }
.quick-reply { min-height: 60px; padding: .65rem .85rem; border: 1px solid #afc7ba; border-radius: 10px; color: var(--primary-dark); background: #f5faf7; text-align: left; }
.context-block { margin: .8rem 0; padding: .9rem 1rem; border-radius: 10px; background: var(--surface-soft); }
.context-block small { color: var(--muted); font-size: .95rem; }
.context-block p { margin: .3rem 0 0; color: var(--ink); }

.recorder { display: grid; justify-items: center; gap: .85rem; margin-bottom: 1rem; padding: 1.4rem; border-radius: 14px; background: var(--surface-soft); text-align: center; }
.recorder p { margin-bottom: 0; color: var(--muted); }
.record-orb { display: flex; align-items: center; justify-content: center; gap: .65rem; width: min(100%, 360px); min-height: 104px; padding: 1rem; border: 5px solid #c2d6bd; border-radius: 20px; color: white; background: var(--primary); font-size: 1.25rem; font-weight: 900; line-height: 1.5; }
.record-orb .ui-icon { width: 1.5rem; height: 1.5rem; }
.record-orb.recording { background: #a6372c; border-color: #e9c7bf; }
.compose-steps { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; margin: 0 0 1.2rem; padding: 0; list-style: none; color: var(--muted); font-size: .95rem; }
.compose-steps li { display: flex; align-items: center; gap: .4rem; }
.compose-steps b { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); }
.compose-steps [aria-current] { color: var(--primary-dark); font-weight: 800; }
.compose-steps [aria-current] b { border-color: var(--primary); color: #fff; background: var(--primary); }
.reading-sample { margin: 1rem 0; padding: 1rem; border-radius: 12px; background: var(--surface-soft); }
.reading-sample p { margin: .5rem 0 0; }
.account-panel { margin-top: 1.5rem !important; }
.record-orb.recording { animation: pulse 1.4s ease-in-out infinite; }
.recorder-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; }
.recorder-actions .button { min-width: 176px; }
@keyframes pulse { 50% { box-shadow: 0 0 0 14px rgba(47, 114, 88, .12); } }
fieldset { min-width: 0; margin: 0 0 1rem; padding: 1rem; border: 1px solid var(--line); border-radius: 12px; }
legend { padding: 0 .45rem; font-weight: 800; }
.choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.choice { min-height: 72px; display: flex; align-items: center; gap: .8rem; padding: .8rem; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.choice input { flex: 0 0 28px; width: 28px; min-height: 28px; height: 28px; }
.choice small, .member small { display: block; color: var(--muted); }
.choice:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); box-shadow: inset 0 0 0 1px var(--primary); }
.media-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .75rem; margin: .85rem 0; }
.media-shell { min-height: 72px; display: grid; place-items: center; overflow: hidden; border-radius: 12px; background: #edf1f3; }
.media-image { width: 100%; max-height: 280px; object-fit: cover; }
.media-audio { width: calc(100% - 1rem); }
.media-error { padding: 1rem; color: var(--muted); }

.member-grid { display: grid; gap: .3rem; }
.member { min-height: 70px; display: flex; align-items: center; gap: .8rem; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.avatar { flex: 0 0 48px; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 20px; color: var(--primary-dark); background: var(--primary-soft); font-weight: 900; }
.invite-box { display: grid; gap: .5rem; margin-top: 1rem; padding: 1rem; border-radius: 12px; background: #f5f7f8; }
.invite-box code { font-size: 1.35rem; letter-spacing: .14em; }
.notification-item { width: 100%; min-height: 88px; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .9rem; padding: 1.1rem; border: 1px solid var(--line); border-radius: 14px; color: var(--ink); background: var(--surface); text-align: left; }
.notification-item.unread { border-color: #9bc4b2; background: #f8fcfa; }
.notification-mark { width: .65rem; height: .65rem; border-radius: 20px; background: #c5cdd3; }
.notification-item.unread .notification-mark { background: var(--primary); }
.toast { position: fixed; right: max(1.2rem, env(safe-area-inset-right)); bottom: max(1.2rem, env(safe-area-inset-bottom)); z-index: 40; max-width: min(520px, calc(100vw - 2.4rem)); padding: .95rem 1.1rem; border: 2px solid white; border-radius: 12px; color: white; background: #26312c; font-size: 1rem; line-height: 1.65; box-shadow: var(--shadow); }
.loading { display: inline-flex; align-items: center; gap: .5rem; color: var(--muted); }
.toast { pointer-events: none; }
.loading::before { content: ""; width: 1rem; height: 1rem; border: 2px solid var(--line); border-top-color: var(--primary); border-radius: 20px; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
html.large-text { font-size: 26px; }
html.high-contrast { --ink: #101713; --muted: #34423a; --line: #8b958f; --primary: #12543a; --primary-dark: #083e29; }

@media (max-width: 1040px) {
  .layout { grid-template-columns: 1fr; padding-top: .8rem; }
  .sidebar { position: static; z-index: 15; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; margin: 0; padding: .5rem; border: 1px solid var(--line); border-radius: 14px; box-shadow: none; }
  .nav-button { width: 100%; min-height: 64px; white-space: normal; text-align: center; }
  .nav-separator { display: none; }
  .main { max-width: none; }
  .user-chip span { display: none; }
}

@media (max-width: 820px) {
  .hero { grid-template-columns: minmax(0, 1fr) 220px; }
  .conversation-starts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .landing { width: min(100% - 1.25rem, 640px); padding-top: max(1rem, env(safe-area-inset-top)); }
  .landing-header { flex-wrap: wrap; margin-bottom: 1rem; }
  .landing-header .reading-button { width: 100%; }
  .role-panel { padding: 1rem; }
  .role-card { grid-template-columns: 44px minmax(0, 1fr) auto; gap: .55rem; min-height: 120px; padding: .8rem; }
  .role-card::after { width: 20px; height: 20px; }
  .role-icon { width: 54px; height: 54px; }
  .topbar { position: relative; display: flex; flex-wrap: wrap; gap: .4rem; padding-top: max(.5rem, env(safe-area-inset-top)); padding-right: max(.6rem, env(safe-area-inset-right)); padding-bottom: .5rem; padding-left: max(.6rem, env(safe-area-inset-left)); }
  .topbar .brand { flex: 1; min-height: 60px; font-size: 1rem; white-space: nowrap; }
  .topbar .brand-mark, .topbar .reading-button > span:first-child, .topbar .notification-button > .ui-icon { display: none; }
  .topbar-actions { display: flex; gap: .4rem; }
  .topbar .reading-button, .topbar .notification-button { min-width: 0; padding: .4rem .45rem; font-size: .86rem; white-space: nowrap; }
  .user-chip { display: none; }
  .layout { gap: .8rem; padding-right: max(.8rem, env(safe-area-inset-right)); padding-bottom: calc(7.2rem + env(safe-area-inset-bottom)); padding-left: max(.8rem, env(safe-area-inset-left)); }
  .sidebar { position: fixed; top: auto; right: 0; bottom: 0; left: 0; z-index: 30; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0; padding: .3rem max(.15rem, env(safe-area-inset-right)) calc(.3rem + env(safe-area-inset-bottom)) max(.15rem, env(safe-area-inset-left)); border-top: 1px solid var(--line); border-bottom: 0; border-radius: 0; background: rgba(255,253,248,.99); box-shadow: 0 -8px 24px rgba(24,39,32,.08); overflow: visible; }
  .sidebar .nav-button { display: none; }
  .sidebar.elder [data-view="home"], .sidebar.elder [data-view="create"], .sidebar.elder [data-view="responses"], .sidebar.elder [data-view="family"], .sidebar.junior [data-view="home"], .sidebar.junior [data-view="shares"], .sidebar.junior [data-view="timeline"], .sidebar.junior [data-view="family"] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem; width: 100%; min-height: 84px; padding: .4rem .1rem; font-size: .9rem; font-weight: 800; line-height: 1.4; text-align: center; white-space: normal; }
  .sidebar .nav-count { position: absolute; top: 0; right: .3rem; min-width: 25px; min-height: 25px; font-size: .75rem; }
  .large-text .sidebar .nav-button { font-size: .86rem; }
  .sidebar .nav-icon { flex-basis: 1.65rem; width: 1.65rem; height: 1.65rem; border-radius: 8px; font-size: .85rem; }
  .sidebar .nav-button.active { box-shadow: inset 0 4px 0 var(--primary); }
  .hero { grid-template-columns: 1fr; }
  .hero-copy { padding: 1.4rem 1.2rem; }
  .hero h2 { font-size: 1.3rem; }
  .hero-art { display: none; }
  .hero-copy { padding: 1.1rem; }
  .hero-symbol { display: none; }
  .hero .button { font-size: 1.08rem; padding: .8rem; }
  .hero .button .ui-icon:last-child { display: none; }
  .home-greeting { margin-bottom: 1rem; }
  .home-greeting > div > p:last-child { font-size: .9rem; }
  .home-greeting h1 { font-size: 1.5rem; }
  .home-date { display: none; }
  .grid-2, .choice-grid { grid-template-columns: 1fr; }
  .response-grid, .conversation-starts { grid-template-columns: 1fr; }
  .home-links { grid-template-columns: 1fr; }
  .button, .button-row .button { width: 100%; flex: 1 1 100%; }
  .button-row.compact select { width: 100%; }
  .page-head, .item-head { align-items: start; flex-direction: column; }
  .panel, .item { padding: .9rem; }
  .home-letter { gap: .55rem; padding: .8rem; }
  .letter-icon { width: 42px; height: 48px; }
  .home-letter > .ui-icon { width: .9rem; }
  .toast { right: .7rem; left: .7rem; bottom: calc(5.6rem + env(safe-area-inset-bottom)); max-width: none; }
  .recorder { padding: 1rem .7rem; }
  .recorder-actions { width: 100%; }
  .recorder-actions .button { width: 100%; }
  .timeline { padding-left: 1rem; }
  .timeline .item::before { left: -1.15rem; }
}

@media (orientation: landscape) and (max-height: 560px) and (max-width: 1040px) {
  .topbar { position: relative; }
  .sidebar { position: static; }
  .hero-art { min-height: 140px; }
}

@media (max-width: 390px) {
  .landing { width: min(100% - 1rem, 640px); }
  .notification-button { min-width: 74px; }
  .role-card { grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; }
  .role-icon { display: none; }
  .layout { padding-right: .6rem; padding-left: .6rem; }
  .hero-copy { padding: .9rem; }
  .hero .button > .ui-icon, .home-greeting > div > p:last-child { display: none; }
  .start-card { gap: .6rem; padding: .8rem; }
  .start-card .topic-icon { flex-basis: 40px; width: 40px; height: 44px; }
}

@media (pointer: coarse) {
  button, .choice, input:not([type="radio"]):not([type="checkbox"]), select { min-height: var(--tap-min); }
  .button, .notice-button { min-height: var(--tap-primary); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}