:root { --ink:#21304f; --muted:#69758c; --paper:#fffdf9; --blue:#4e77e8; --blue-soft:#eaf0ff; --orange:#ffb84d; --line:#e5e9f3; --green:#37a275; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; background:#f4f7ff; color:var(--ink); font-family:"Microsoft YaHei",system-ui,sans-serif; }
button,input { font:inherit; }
button { cursor:pointer; }
.app-shell { max-width:780px; margin:0 auto; padding:28px 18px 56px; }
.hero { display:flex; justify-content:space-between; gap:20px; align-items:center; padding:8px 6px 28px; }
.eyebrow { color:var(--blue); font-weight:700; margin:0 0 5px; letter-spacing:.08em; font-size:.82rem; }
h1 { margin:0; font-size:2rem; letter-spacing:.02em; }
.subtitle { margin:9px 0 0; color:var(--muted); }
.progress-badge { min-width:98px; padding:12px; text-align:center; border-radius:20px; background:#fff; box-shadow:0 8px 25px rgba(56,83,146,.11); }
.progress-badge strong { color:var(--blue); font-size:1.6rem; }.progress-badge span { color:var(--muted); }.progress-badge small { display:block; color:var(--muted); margin-top:2px; }
.parent-panel { background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; margin-bottom:28px; }
.panel-toggle { width:100%; display:flex; justify-content:space-between; padding:16px 18px; color:var(--ink); background:#fff; border:0; font-weight:700; text-align:left; }.panel-toggle:hover { background:#fafbff; }
#parent-content { padding:0 18px 16px; }.word-form { display:grid; grid-template-columns:1fr 1fr 1fr auto; gap:10px; align-items:end; }
label { display:grid; gap:6px; color:var(--muted); font-size:.85rem; } input { min-width:0; padding:10px 11px; border:1px solid #cfd7e8; border-radius:9px; color:var(--ink); background:#fff; } input:focus { outline:3px solid #dce6ff; border-color:var(--blue); }
.word-form button { padding:11px 14px; border:0; border-radius:9px; color:white; background:var(--blue); font-weight:700; }.hint { margin:12px 0 8px; color:var(--muted); font-size:.82rem; }.text-button { border:0; padding:0; color:#9e5b48; background:none; font-size:.83rem; text-decoration:underline; }
.section-title { display:flex; align-items:baseline; justify-content:space-between; gap:16px; }.section-title h2 { margin:0; font-size:1.22rem; }.section-title p { color:var(--muted); margin:0; font-size:.88rem; }
.word-list { display:grid; gap:12px; margin-top:15px; }.word-card { display:grid; grid-template-columns:38px 1fr auto; align-items:center; gap:12px; padding:17px; border:1px solid var(--line); border-radius:17px; background:var(--paper); box-shadow:0 4px 13px rgba(50,74,130,.05); }.word-card.is-complete { background:#f3fbf7; border-color:#bce4d3; }.word-number { width:31px; height:31px; display:grid; place-items:center; border-radius:50%; color:var(--blue); background:var(--blue-soft); font-weight:700; }.is-complete .word-number { color:white; background:var(--green); }.word-line { display:flex; flex-wrap:wrap; align-items:baseline; gap:10px; }.word-text { margin:0; font-size:1.45rem; }.meaning { color:var(--muted); }.recording-status { margin:5px 0 0; color:var(--muted); font-size:.82rem; }.recording-playback { width:100%; height:28px; margin-top:7px; }.actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:7px; align-items:center; }.actions button { min-height:38px; padding:7px 9px; border:1px solid var(--line); border-radius:9px; color:var(--ink); background:#fff; font-size:.86rem; }.listen-button { color:#2859d1 !important; background:var(--blue-soft) !important; border-color:#d8e3ff !important; }.record-button.is-recording { color:#fff !important; background:#e65959 !important; border-color:#e65959 !important; animation:pulse 1s infinite; }.complete-label { display:flex; grid-template-columns:auto auto; align-items:center; gap:4px; padding:6px 4px; color:var(--green); font-weight:700; cursor:pointer; }.complete-input { accent-color:var(--green); }.delete-button { color:#a0a8b8 !important; font-size:1.25rem !important; padding:4px 9px !important; }.empty-state { margin-top:15px; padding:38px 20px; border:2px dashed #d7e0f5; border-radius:18px; text-align:center; color:var(--muted); }.empty-state h2 { color:var(--ink); font-size:1.15rem; }.empty-icon { display:grid; place-items:center; width:55px; height:55px; margin:auto; border-radius:17px; color:var(--blue); background:var(--blue-soft); font-weight:800; font-size:1.2rem; }.access-dialog { width:min(400px, calc(100% - 32px)); padding:0; border:0; border-radius:18px; color:var(--ink); box-shadow:0 18px 50px rgba(24,42,84,.28); }.access-dialog::backdrop { background:rgba(28,42,74,.42); }.access-dialog form { display:grid; gap:13px; padding:26px; }.access-dialog h2 { margin:0; }.access-dialog p:not(.eyebrow) { margin:0; color:var(--muted); }.access-dialog button { padding:11px 14px; border:0; border-radius:9px; color:#fff; background:var(--blue); font-weight:700; }.form-error { min-height:1.2em; margin:0; color:#c63f3f !important; font-size:.85rem; }
@keyframes pulse { 50% { transform:scale(1.03); } }
@media (max-width:640px) { .app-shell { padding:20px 13px 44px; }.hero { padding-bottom:20px; } h1 { font-size:1.65rem; }.word-form { grid-template-columns:1fr; }.word-form button { width:100%; }.section-title { display:block; }.section-title p { margin-top:5px; }.word-card { grid-template-columns:32px 1fr; }.actions { grid-column:1 / -1; justify-content:flex-start; }.actions button { flex:1; }.complete-label { margin-left:auto; }.delete-button { flex:0 !important; }.word-text { font-size:1.3rem; } }