:root {
  color-scheme: light;
  font-family: ui-rounded, "PingFang HK", "Noto Sans TC", system-ui, sans-serif;
  background: #fff8ed;
  color: #3b302c;
  --ink: #3b302c;
  --muted: #806f65;
  --peach: #ff8f70;
  --yellow: #ffd66b;
  --mint: #bcebd9;
  --lavender: #ded9ff;
  --panel: rgba(255, 255, 255, .86);
  --shadow: 0 18px 50px rgba(93, 62, 38, .10);
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: radial-gradient(circle at 10% 0%, #fff0c9 0, transparent 28rem), var(--bg, #fff8ed); }
button, input, select { font: inherit; }
button { cursor: pointer; border: 0; }
.topbar { max-width: 1180px; margin: 0 auto; padding: 1.25rem 1.25rem .5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: clamp(1.5rem, 4vw, 2.2rem); letter-spacing: -.04em; }
h2 { margin-bottom: .4rem; font-size: clamp(1.25rem, 3vw, 1.75rem); letter-spacing: -.03em; }
.eyebrow { margin-bottom: .35rem; color: #d76e50; font-size: .72rem; font-weight: 800; letter-spacing: .13em; }
.shared-badge, .age-pill { padding: .55rem .8rem; border-radius: 999px; background: #fff; color: #7a6258; box-shadow: 0 5px 18px rgba(93, 62, 38, .08); font-size: .82rem; }
.age-pill { background: var(--mint); color: #356a59; font-weight: 800; }
.app-shell { max-width: 1180px; margin: 0 auto; padding: 1rem 1.25rem 4rem; }
.hero-card { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 185px; margin: .8rem 0 1.2rem; padding: 2rem; border-radius: 30px; background: linear-gradient(125deg, #ffe5ae, #ffd9cf 55%, #e6e1ff); box-shadow: var(--shadow); overflow: hidden; }
.hero-card p:not(.eyebrow) { max-width: 560px; margin-bottom: 0; color: #6c574d; line-height: 1.7; }
.hero-icon { font-size: clamp(4rem, 11vw, 7rem); transform: rotate(8deg); }
.two-column { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 1.2rem; }
.panel { margin-bottom: 1.2rem; padding: 1.35rem; border: 1px solid rgba(180, 139, 104, .15); border-radius: 24px; background: var(--panel); box-shadow: var(--shadow); backdrop-filter: blur(8px); }
.section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; }
.story-form, .inline-form { display: grid; gap: .85rem; }
label { display: grid; gap: .35rem; color: #6b584e; font-size: .9rem; font-weight: 700; }
input, select { width: 100%; padding: .78rem .85rem; border: 1px solid #ead9c8; border-radius: 13px; outline: none; background: #fffdf9; color: var(--ink); }
input:focus, select:focus { border-color: var(--peach); box-shadow: 0 0 0 3px rgba(255, 143, 112, .15); }
.form-row { display: grid; grid-template-columns: 1fr 90px; gap: .8rem; }
.primary-button, .quiet-button { padding: .78rem 1rem; border-radius: 13px; font-weight: 800; transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease; }
.primary-button { background: var(--peach); color: white; box-shadow: 0 8px 18px rgba(215, 110, 80, .22); }
.primary-button:hover, .quiet-button:hover { transform: translateY(-1px); }
button:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 2px 6px rgba(93, 62, 38, .18); filter: saturate(1.2) brightness(.96); }
button:disabled, button[aria-disabled="true"] { cursor: not-allowed; opacity: .55; filter: grayscale(.35); box-shadow: none; }
.is-busy { position: relative; cursor: wait !important; color: currentColor !important; padding-right: 2.5rem; pointer-events: none; }
.is-busy::after { content: ""; position: absolute; width: 1rem; height: 1rem; top: 50%; right: .75rem; margin-top: -.5rem; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: button-spin .7s linear infinite; }
.is-busy:disabled { opacity: 1; filter: none; cursor: wait !important; }
@keyframes button-spin { to { transform: rotate(360deg); } }
.quiet-button { background: #fff3e7; color: #a2644e; }
.book-list { display: grid; gap: .7rem; }
.book-card { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .9rem; border-radius: 16px; background: #fffaf5; border: 1px solid #f0e5d8; }
.book-card h3 { margin: 0 0 .2rem; font-size: 1rem; }
.book-card p { margin: 0; color: var(--muted); font-size: .8rem; }
.book-card .quiet-button { white-space: nowrap; padding: .55rem .7rem; }
.voice-library-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .95fr); gap: 1rem; align-items: start; }
.voice-clone-form { margin-top: .25rem; }
.voice-source-tabs { display: flex; gap: .5rem; padding: .25rem; border-radius: 16px; background: #fff3e7; }
.voice-source-tabs .quiet-button { flex: 1; background: transparent; }
.voice-source-tabs .quiet-button.is-selected { background: #fff; color: #a64f39; box-shadow: 0 4px 12px rgba(93, 62, 38, .12); }
#voice-upload-panel, #voice-record-panel { display: grid; gap: .75rem; }
.record-script-label { margin: 0; color: #6b584e; font-size: .9rem; font-weight: 700; }
#voice-record-script { margin: 0; padding: 1rem; border-left: 4px solid var(--yellow); border-radius: 0 14px 14px 0; background: #fffaf0; color: #6b584e; line-height: 1.7; }
.record-controls { display: flex; align-items: center; gap: .8rem; }
.record-timer { min-width: 4.8rem; padding: .65rem .8rem; border-radius: 12px; background: #3b302c; color: white; font-variant-numeric: tabular-nums; text-align: center; letter-spacing: .08em; }
.record-timer.is-recording { background: #b14d40; box-shadow: 0 0 0 4px rgba(177, 77, 64, .16); }
#voice-record-preview { width: 100%; }
#voice-record-reset { justify-self: start; }
.activity-bar { position: fixed; z-index: 10; right: 1rem; bottom: 1rem; left: 1rem; min-height: 0; padding: .75rem 1rem; border: 1px solid rgba(180, 139, 104, .2); border-radius: 16px; background: rgba(255, 255, 255, .94); box-shadow: 0 10px 30px rgba(93, 62, 38, .14); color: #6b584e; font-size: .88rem; font-weight: 700; text-align: center; backdrop-filter: blur(10px); }
.activity-bar:empty { display: none; }
.voice-status { min-height: 1.4rem; margin: 0; color: #9c5c49; font-size: .9rem; font-weight: 700; }
.voice-status.success { color: #39705e; }
.voice-status.error { color: #b14d40; }
.voice-picker { padding: 1rem; border-radius: 20px; background: #fffaf5; border: 1px solid #f0e5d8; }
.voice-picker-label { margin-bottom: .75rem; color: #6b584e; font-size: .95rem; font-weight: 800; }
.voice-picker-list { display: grid; gap: .65rem; }
.voice-option { display: grid; grid-template-columns: auto 1fr; gap: .75rem; align-items: start; padding: .85rem .9rem; border-radius: 16px; background: #fff; border: 1px solid #ead9c8; }
.voice-option input { width: auto; margin-top: .2rem; }
.voice-option strong, .voice-option span { display: block; }
.voice-option strong { margin-bottom: .15rem; }
.voice-option span { color: var(--muted); font-size: .82rem; line-height: 1.5; }
.voice-option.is-selected { border-color: var(--peach); box-shadow: 0 0 0 3px rgba(255, 143, 112, .12); }
.voice-option.is-disabled { background: #f5f1ed; opacity: .76; cursor: not-allowed; }
.voice-option.is-disabled input { cursor: not-allowed; }
.voice-default-badge { display: inline-block; margin-left: .35rem; padding: .12rem .45rem; border-radius: 999px; background: var(--mint); color: #356a59; font-size: .72rem; font-weight: 800; vertical-align: middle; }
.voice-status-badge { display: inline-block !important; margin-left: .35rem; padding: .12rem .45rem; border-radius: 999px; background: #eee9e4; font-size: .72rem !important; font-weight: 800; vertical-align: middle; }
.voice-status-badge.status-ready { background: var(--mint); color: #356a59; }
.voice-status-badge.status-running, .voice-status-badge.status-queued { background: #fff0c7; color: #8a651d; }
.voice-status-badge.status-failed { background: #ffe1d7; color: #a44338; }
.reader-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(270px, .85fr); gap: 1.2rem; align-items: stretch; }
.reader-art-wrap { position: relative; min-height: 360px; display: grid; place-items: center; overflow: hidden; border-radius: 20px; background: linear-gradient(145deg, #e9f8e9, #fff2cb); }
.reader-art-wrap img { display: none; width: 100%; height: 100%; max-height: 520px; object-fit: contain; }
.reader-art-wrap.has-image img { display: block; }
.reader-art-wrap.has-image #reader-art-placeholder { display: none; }
#reader-art-placeholder { padding: 2rem; color: #7d8d79; text-align: center; }
.reader-copy { display: flex; flex-direction: column; justify-content: center; min-height: 300px; }
.page-count { color: #d76e50; font-size: .82rem; font-weight: 800; }
.narration { margin: 1rem 0; font-size: clamp(1.35rem, 3vw, 2rem); line-height: 1.65; letter-spacing: .03em; }
.reader-copy audio { width: 100%; margin-top: auto; }
.reader-controls { display: flex; gap: .6rem; margin-bottom: 1rem; }
.reader-actions { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-top: 1.1rem; padding-top: 1rem; border-top: 1px dashed #ead9c8; }
.muted { color: var(--muted); font-size: .85rem; line-height: 1.6; }
.notice { min-height: 0; margin-bottom: 1rem; color: #9c5c49; font-weight: 700; }
.notice:empty { display: none; }
.notice.error { padding: .75rem 1rem; border-radius: 13px; background: #ffe1d7; }
.notice.success { padding: .75rem 1rem; border-radius: 13px; background: #ddf5e8; color: #39705e; }
.token-panel { max-width: 600px; margin: 2rem auto; }
.inline-form { grid-template-columns: 1fr auto; align-items: center; }
[hidden] { display: none !important; }
@media (max-width: 820px) {
  .two-column, .reader-layout, .voice-library-grid { grid-template-columns: 1fr; }
  .hero-card { min-height: 0; padding: 1.5rem; }
  .hero-icon { font-size: 4rem; }
  .reader-art-wrap { min-height: 260px; }
}
@media (max-width: 520px) {
  .topbar { align-items: flex-start; flex-direction: column; }
  .shared-badge { align-self: flex-start; }
  .app-shell { padding-inline: .8rem; }
  .panel { padding: 1rem; border-radius: 20px; }
  .inline-form { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .voice-source-tabs, .record-controls { flex-direction: column; align-items: stretch; }
  .record-timer { align-self: center; }
  .activity-bar { right: .8rem; bottom: .8rem; left: .8rem; }
}