:root { --ink: #183c35; --cream: #f7f1e5; --orange: #ee6844; --green: #1b4940; }
* { box-sizing:border-box }
body { margin:0;background:var(--cream);color:var(--ink);font-family:DM Sans,sans-serif;background-image:radial-gradient(#d9cdb6 0.5px,transparent 0.5px);background-size:12px 12px }
button,a { font:inherit;color:inherit }
button { cursor:pointer }
.shell { max-width:1180px;margin:auto;padding:0 34px }
header { height:90px;display:flex;align-items:center;border-bottom:1px solid #dfd5c3;gap:55px }
.brand { display:flex;gap:10px;align-items:center;text-decoration:none;font-family:Nunito;font-size:20px;font-weight:800 }
.brand-mark { width:43px;height:43px;border-radius:15px 15px 15px 5px;background:var(--orange);color:white;display:grid;place-items:center;font:25px Ma Shan Zheng;transform:rotate(-4deg) }
.brand small { display:block;font:8px DM Sans;letter-spacing:2.7px;color:#799087 }
nav { display:flex;gap:36px;height:100%;align-items:center }
nav a { text-decoration:none;color:#789087;font-size:14px;height:100%;display:grid;place-items:center;position:relative }
nav a.active { color:var(--ink);font-weight:700 }
nav a.active:after { content:"";height:3px;background:var(--orange);border-radius:3px;position:absolute;left:4px;right:4px;bottom:0 }
.profile { margin-left:auto;border:0;background:transparent;display:flex;align-items:center;gap:7px;font-weight:700 }
.profile span { color:#8a9a93;font-weight:400;font-size:12px }
.profile b { background:#e2c76b;padding:8px;border-radius:50% }
.hero { min-height:270px;padding:55px 0 40px;display:flex;align-items:center;justify-content:space-between }
.eyebrow { color:#e05f3e;font-weight:700;letter-spacing:2.1px;font-size:10px;margin:0 0 13px }
h1 { font:400 43px Ma Shan Zheng;line-height:1.28;margin:0;letter-spacing:2px }
h1 em { color:var(--orange);font-style:normal;font-size:49px }
.sub { color:#758b83;font-size:13px }
.streak-card { width:324px;min-height:135px;padding:25px;border:1px solid #ded2bc;border-radius:24px 24px 24px 8px;display:flex;gap:18px;align-items:center;background:#fcf9f1;box-shadow:0 12px 35px #67542e0c }
.sun { width:70px;height:70px;display:grid;place-items:center;border-radius:50%;background:#f8c75f;color:#fff5d2;font-size:40px }
.streak-card span,.streak-card small { display:block;color:#80938b;font-size:11px }
.streak-card strong { display:block;margin:2px 0;font-family:Nunito;font-size:18px }
.streak-card strong i { font-style:normal;font-size:30px;color:var(--orange) }
.continue { min-height:172px;padding:20px 30px;border-radius:24px 24px 24px 8px;display:flex;align-items:center;gap:27px;color:#f9f2df;background:var(--green);box-shadow:0 17px 40px #163c3526 }
.empty-start { min-height:130px;padding:24px 30px;border:1px dashed #cdbd9f;border-radius:24px 24px 24px 8px;display:flex;align-items:center;gap:18px;background:#fbf7ed }
.empty-start>span { width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:#eadcc3;color:var(--orange);font-size:28px }
.empty-start div { flex:1 }
.empty-start b,.empty-start small { display:block }
.empty-start small { color:#7b8c85;margin-top:5px;font-size:11px }
.mini-cover { width:102px;height:130px;border-radius:8px 15px 15px 8px;padding:14px;display:flex;flex-direction:column;background:#e6ae65;color:#173e38;box-shadow:inset 5px 0 #ffffff2e,0 8px 17px #0f2924 }
.mini-cover span { font-size:7px;letter-spacing:1.5px }
.mini-cover b { font:20px Ma Shan Zheng;line-height:1;margin-top:13px }
.mini-cover i { font-style:normal;font-size:32px;margin:auto 0 0 auto }
.continue-info { flex:1 }
.label { display:inline-block;background:#e86b48;padding:4px 10px;font-size:9px;border-radius:9px 9px 9px 3px }
.continue h2 { margin:8px 0 0;font:700 24px Nunito }
.continue p,.continue small { margin:2px 0;color:#b9cac4;font-size:11px }
.progress { height:4px;max-width:290px;background:#52736c;border-radius:3px;margin:13px 0 4px;overflow:hidden }
.progress i { height:100%;background:#efaa58;display:block }
.primary { border:0;background:#f6efe0;color:var(--ink);font-weight:700;border-radius:14px 14px 14px 5px;padding:15px 22px;box-shadow:0 8px 18px #0e2924 }
.primary span { color:var(--orange);margin-right:6px }
.library { padding:75px 0 }
.section-head { display:flex;align-items:end;justify-content:space-between;margin-bottom:28px }
.section-head h2,.record h2 { font:400 30px Ma Shan Zheng;margin:0;letter-spacing:1px }
.section-head h2 span { font:11px DM Sans;color:#8b9994;margin-left:8px }
.filters { display:flex;gap:7px }
.filters button { border:1px solid #dcd2c1;background:transparent;color:#788a83;border-radius:20px;padding:7px 14px;font-size:11px }
.filters button.active { color:white;background:#24554b;border-color:#24554b }
.books { display:grid;grid-template-columns:repeat(4,1fr);gap:27px 22px }
.book { cursor:pointer;transition:transform .25s;animation:rise .55s both }
.book:hover { transform:translateY(-7px) rotate(-.4deg) }
.cover { height:264px;padding:20px;border-radius:10px 22px 22px 10px;box-shadow:inset 7px 0 #ffffff25,0 12px 22px #4c40251d;position:relative;overflow:hidden;color:var(--ink) }
.cover:before { content:"";position:absolute;width:150px;height:150px;border:2px solid #ffffff55;border-radius:50%;right:-50px;bottom:-45px }
.cover .level { font-size:8px;letter-spacing:2px }
.cover h3 { font:700 24px Nunito;line-height:1.04;margin:15px 0;width:80% }
.cover .art { position:absolute;right:22px;bottom:28px;font-size:70px;filter:drop-shadow(0 8px 5px #60451b24) }
.cover .done { position:absolute;top:14px;right:14px;background:#fff9;border-radius:50%;width:25px;height:25px;display:grid;place-items:center;color:#2c6659 }
.book-meta { padding:13px 5px }
.book-meta b { display:block;font:700 15px Nunito }
.book-meta span { color:#899792;font-size:10px }
.record { border-top:1px solid #ded4c2;padding:60px 0 80px;display:grid;grid-template-columns:1.4fr 1fr;gap:60px;align-items:center }
.week { display:flex;gap:12px;margin-top:25px }
.day { text-align:center;color:#83948d;font-size:9px }
.day i { width:38px;height:38px;margin-top:8px;border:1px dashed #c9c2b5;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:15px }
.day.read i { background:#ed704e;color:white;border:0;box-shadow:0 5px 10px #dc6c4944 }
.stats { display:flex;background:#ebe4d6;border-radius:20px;padding:24px 10px }
.stats div { flex:1;text-align:center;border-right:1px solid #d3cabb }
.stats div:last-child { border:0 }
.stats b { display:block;font:800 27px Nunito;color:var(--orange) }
.stats span { font-size:9px;color:#82908b }
footer { border-top:1px solid #dfd5c3;padding:25px 0 40px;color:#8c9994;font:12px Ma Shan Zheng }
footer span { float:right;font:8px DM Sans;letter-spacing:1px }
.library-actions { display:flex;align-items:center;gap:12px }
.upload-trigger { border:0;background:var(--orange);color:white;border-radius:13px 13px 13px 5px;padding:9px 15px;font-size:11px;font-weight:700;box-shadow:0 7px 16px #d6563730 }
.upload-trigger span { font-size:16px;vertical-align:-1px }
.upload-card { height:264px;border:2px dashed #d1b98f;border-radius:10px 22px 22px 10px;background:#f2e9d8;color:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;transition:.25s;box-shadow:inset 7px 0 #ffffff55 }
.upload-card:hover { border-color:var(--orange);background:#fff0dc;transform:translateY(-7px) rotate(-.4deg) }
.upload-plus { width:55px;height:55px;border-radius:50%;background:var(--orange);color:white;display:grid;place-items:center;font-size:30px;margin-bottom:17px;box-shadow:0 9px 20px #d95f3c35 }
.upload-card strong { font:700 17px Nunito }
.upload-card small { color:#7f9089;font-size:10px;margin-top:5px }
.upload-card i { font-style:normal;color:#987b52;font-size:8px;margin-top:20px;background:#eadcc2;border-radius:20px;padding:5px 9px }
.toast { position:fixed;left:50%;top:25px;transform:translate(-50%,-20px);opacity:0;z-index:80;background:#173f37;color:white;padding:13px 20px;border-radius:14px 14px 14px 5px;box-shadow:0 14px 40px #0b292455;font-size:12px;transition:.25s;pointer-events:none }
.toast.show { opacity:1;transform:translate(-50%,0) }
.upload-modal>div { width:520px;position:relative }
.modal-close { position:absolute;right:17px;top:10px;width:34px!important;background:transparent!important;color:#84918c!important;font-size:23px }
.drop-zone { min-height:190px;border:2px dashed #d2c5af;border-radius:20px 20px 20px 7px;display:flex;flex-direction:column;align-items:center;justify-content:center;margin:24px 0 18px;transition:.2s;background:#f6efdf;cursor:pointer }
.drop-zone:hover,.drop-zone.dragging { border-color:var(--orange);background:#fff1dc;transform:translateY(-2px) }
.drop-zone.selected { border-style:solid;border-color:#79a290;background:#eef4e9 }
.drop-zone input { display:none }
.drop-zone i { width:55px;height:65px;background:#e96b49;color:white;border-radius:5px 12px 12px 5px;display:grid;place-items:center;font:800 12px Nunito;box-shadow:inset 5px 0 #ffffff2c;margin-bottom:12px }
.drop-zone b { font-size:13px;max-width:390px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap }
.drop-zone small { color:#89948f;height:auto;margin-top:4px }
.upload-fields { display:grid;grid-template-columns:1fr 130px;gap:12px;text-align:left }
.upload-fields label { font-size:10px;color:#7a8983 }
.upload-fields input,.upload-fields select { width:100%;margin-top:6px;border:1px solid #d8cdb9;background:#f8f2e7;border-radius:10px;padding:11px;color:var(--ink);outline:none }
.upload-error { color:#d04e38!important;height:20px!important }
.upload-modal button:disabled { opacity:.45;cursor:not-allowed }
.folder-upload>div { width:620px;max-height:90vh;overflow:auto }
.batch-summary { display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 }
.batch-summary span { background:#e9dfca;color:#6e7d77;border-radius:20px;padding:6px 10px;font-size:9px }
.batch-summary b { color:var(--orange);margin-left:4px }
.file-preview { max-height:220px;overflow:auto;margin:6px 0 10px;text-align:left }
.file-preview>div { display:grid;grid-template-columns:35px 1fr auto 25px;align-items:center;gap:9px;padding:8px 6px;border-bottom:1px solid #e6dccb }
.file-preview span { background:#e96b49;color:white;border-radius:5px;padding:5px 3px;text-align:center;font:700 7px Nunito }
.file-preview b { font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis }
.file-preview i { font-style:normal;color:#72877f;background:#e9eee8;border-radius:12px;padding:4px 8px;font-size:8px }
.file-preview button { width:24px!important;margin:0!important;padding:3px!important;background:transparent!important;color:#87948f!important;font-size:16px }
.filters { max-width:560px;overflow-x:auto;padding-bottom:3px }
.pdf-canvas { display:none;max-width:100%;margin:auto;box-shadow:0 10px 30px #493c2522 }
.page:has(.pdf-canvas[style*="block"]) { justify-content:center }
@media (max-width:800px) { .library-actions { align-items:flex-end;flex-direction:column } .upload-modal>div { width:calc(100vw - 30px);padding:28px 20px } .upload-fields { grid-template-columns:1fr } .pdf-canvas { height:auto!important } }
.reader { position:fixed;inset:0;background:#103a34;color:#f7f1e5;z-index:20;display:none;overflow:auto }
.reader.active { display:block }
.reader-top { height:86px;border-bottom:1px solid #ffffff22;display:flex;align-items:center;padding:0 34px;justify-content:space-between }
.reader-title { display:flex;align-items:center;gap:14px }
.reader-title button { border:1px solid #ffffff38;background:transparent;color:white;width:38px;height:38px;border-radius:50%;font-size:25px }
.reader-title b { display:block;font:700 16px Nunito }
.reader-title small { color:#9cb3ad;font-size:9px }
.read-progress { text-align:center;font-size:10px;color:#b4c5c0 }
.read-progress i { display:block;width:190px;height:3px;background:#4c6d67;margin-top:8px;border-radius:3px;overflow:hidden }
.read-progress b { display:block;height:100%;background:#efaa58;transition:width .3s }
.lock { border:1px solid #ffffff28;background:#ffffff0c;color:#d3dfdb;border-radius:20px;padding:9px 14px;font-size:10px }
.focus-note { width:max-content;margin:20px auto 0;background:#ffffff0d;padding:7px 14px;border-radius:20px;color:#9ab0aa;font-size:9px;letter-spacing:1px }
.stage { max-width:1050px;margin:22px auto 60px;display:grid;grid-template-columns:65px minmax(400px,760px) 65px;gap:26px;align-items:center;justify-content:center }
.page { min-height:610px;background:#fffaf0;border-radius:9px 24px 24px 9px;color:var(--ink);box-shadow:0 25px 70px #001b1788,inset 9px 0 #eee1cb;padding:34px 48px 25px;display:flex;flex-direction:column }
.scene { flex:1;min-height:395px;border-radius:5px 16px 16px 5px;background:linear-gradient(#a9d7da 0 61%,#eac67a 61%);display:grid;place-items:center;font-size:170px;position:relative;overflow:hidden }
.scene:after { content:"";position:absolute;inset:auto 0 39% 0;height:20px;background:#ffffff66;clip-path:polygon(0 60%,12% 10%,25% 70%,40% 20%,60% 80%,80% 20%,100% 70%,100% 100%,0 100%) }
.sentence { font:800 31px Nunito;text-align:center;padding:25px 0 10px }
.sentence button { border:0;background:transparent;padding:1px 3px;border-bottom:2px dotted #d5a84a;font:inherit }
.sentence button:hover { color:var(--orange);background:#ffe9ac;border-radius:6px }
.hint { color:#9b9d8f;text-align:center;font-size:9px }
.arrow { width:54px;height:54px;border-radius:50%;border:1px solid #ffffff2d;background:#ffffff0d;color:#e8efe9;font-size:38px }
.arrow:hover { background:#ffffff1d }
.word-card { position:fixed;right:35px;bottom:28px;background:#fffaf0;color:var(--ink);width:355px;border-radius:18px 18px 18px 6px;padding:20px;display:none;gap:15px;box-shadow:0 18px 55px #001b17aa;z-index:30 }
.word-card.show { display:flex;animation:rise .25s both }
.word-card .speaker { background:#f3b756;width:47px;height:47px;display:grid;place-items:center;border-radius:14px;font-size:20px }
.word-card h3 { margin:0;font:800 23px Nunito }
.word-card p { color:#7c8e87;margin:2px 0;font-size:11px }
.word-card strong,.word-card small { display:block;margin-top:8px }
.word-card small { color:#81918b;font-size:10px }
.word-card>button { position:absolute;right:12px;top:10px;border:0;background:transparent;color:#80908a;font-size:18px }
.modal { position:fixed;inset:0;background:#082a26cc;z-index:40;display:none;place-items:center;backdrop-filter:blur(7px) }
.modal.show { display:grid }
.modal>div { width:390px;background:#fffaf0;border-radius:30px 30px 30px 9px;padding:38px;color:var(--ink);text-align:center;box-shadow:0 30px 80px #001713 }
.modal span { color:var(--orange);font-size:10px;letter-spacing:2px;font-weight:700 }
.modal h2 { font:400 31px Ma Shan Zheng;margin:10px 0 }
.modal p { color:#7c8d87;font-size:12px;line-height:1.7 }
.modal input { width:100%;padding:14px;text-align:center;border:1px solid #d8cdb9;border-radius:12px;background:#f3eddf;font-size:20px;outline:0 }
.modal small { display:block;color:#d24e38;height:18px;padding-top:4px }
.modal button { width:100%;border:0;background:var(--green);color:white;padding:13px;border-radius:12px;margin-top:8px;font-weight:700 }
.modal button.ghost { background:transparent;color:#75877f }
.badge { width:80px;height:80px;margin:-8px auto 17px;border-radius:50%;background:#f4bd50;color:white;display:grid;place-items:center;font-size:40px;box-shadow:0 0 0 12px #f4bd5025 }
.reward { margin:20px 0;background:#f3e8d4;border-radius:12px;padding:12px;font-size:12px }
@keyframes rise { from { opacity:0;transform:translateY(12px) } to { opacity:1;transform:none } }
@media (max-width:800px) { .shell { padding:0 18px } nav { display:none } .hero { display:block } .streak-card { width:100%;margin-top:25px } .books { grid-template-columns:repeat(2,1fr) } .section-head { align-items:flex-start;gap:18px;flex-direction:column } .continue { padding:18px;gap:14px } .continue .mini-cover { display:none } .record { grid-template-columns:1fr;gap:25px } .stage { grid-template-columns:35px 1fr 35px;gap:5px;margin:15px 7px } .page { min-height:560px;padding:20px 18px } .scene { min-height:350px;font-size:120px } .arrow { width:35px;height:44px;border:0 } .reader-top { padding:0 12px } .lock { font-size:0;padding:8px } .lock:first-letter { font-size:15px } .read-progress i { width:100px } .sentence { font-size:24px } .word-card { right:15px;bottom:15px;width:calc(100% - 30px) } }