/* CTDT V2.4 Typography Fix — full Vietnamese-safe system font stacks */
:root{
  --paper:#f8f3ed;
  --paper-2:#fffdf9;
  --card:#fffaf5;
  --card-strong:#ffffff;
  --ink:#332628;
  --muted:#887875;
  --accent:#b85c50;
  --accent-dark:#87413d;
  --accent-soft:#f3ddd5;
  --plum:#241923;
  --plum-2:#35232f;
  --line:rgba(91,55,55,.13);
  --shadow:0 12px 34px rgba(71,43,43,.09);
  --shadow-soft:0 5px 18px rgba(71,43,43,.07);
  --radius:22px;
  --reader-size:18px;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --paper:#11141a;
  --paper-2:#171b22;
  --card:#1b2028;
  --card-strong:#20262f;
  --ink:#f5ece4;
  --muted:#b9aba4;
  --accent:#d48174;
  --accent-dark:#f0a096;
  --accent-soft:#3c2a2c;
  --plum:#0c0f14;
  --plum-2:#17111a;
  --line:rgba(255,255,255,.09);
  --shadow:0 16px 36px rgba(0,0,0,.27);
  --shadow-soft:0 7px 20px rgba(0,0,0,.22);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--paper)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Segoe UI",Tahoma,Arial,sans-serif;line-height:1.58;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:auto}
button,input,a{font:inherit}
button{color:inherit}
a{-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}

.splash{position:fixed;inset:0;z-index:999;display:grid;place-content:center;gap:24px;text-align:center;background:radial-gradient(circle at 50% 38%,#fffdf8 0,#f8efe7 52%,#efe2d8 100%);transition:opacity .65s ease,visibility .65s ease}
.splash::before,.splash::after{content:"";position:absolute;width:240px;height:240px;border-radius:50%;filter:blur(4px);opacity:.22}
.splash::before{left:-80px;top:-80px;background:#b85c50}
.splash::after{right:-100px;bottom:-120px;background:#241923}
.splash.done{opacity:0;visibility:hidden;pointer-events:none}
.splash-orbit{width:116px;height:116px;margin:auto;border:1px solid rgba(184,92,80,.35);border-radius:50%;display:grid;place-items:center;position:relative}
.splash-orbit::before,.splash-orbit::after{content:"";position:absolute;border-radius:50%;border:1px solid rgba(184,92,80,.18);animation:orbit 2.6s ease-in-out infinite}
.splash-orbit::before{inset:-13px}.splash-orbit::after{inset:13px;animation-delay:.3s}
.splash-orbit span{width:72px;height:72px;border-radius:25px;background:var(--plum);color:#fff8ee;display:grid;place-items:center;font:700 25px/1 Cambria,"Times New Roman",serif;box-shadow:0 16px 34px rgba(36,25,35,.23)}
.splash-copy strong{display:block;font:700 22px/1.2 Cambria,"Times New Roman",serif;letter-spacing:.08em;color:#4a2428}
.splash-copy em{display:block;margin-top:7px;color:var(--accent);font:italic 19px/1.2 Cambria,"Times New Roman",serif}
.splash-line{width:172px;height:3px;border-radius:9px;background:rgba(184,92,80,.13);overflow:hidden;margin:auto}.splash-line i{display:block;width:45%;height:100%;background:var(--accent);animation:loading 1.4s ease-in-out infinite}
@keyframes orbit{50%{transform:scale(1.05);opacity:.45}}
@keyframes loading{0%{transform:translateX(-110%)}100%{transform:translateX(330%)}}

.app-shell{min-height:100vh;opacity:0;transition:opacity .4s ease}.app-shell.ready{opacity:1}
.topbar{height:70px;position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;padding:10px max(15px,calc((100vw - 1080px)/2));background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none;min-width:0}.brand-mark{width:41px;height:41px;border-radius:15px;background:var(--plum);color:#fff8ef;display:grid;place-items:center;font:700 16px Cambria,"Times New Roman",serif;box-shadow:var(--shadow-soft)}.brand-copy{min-width:0}.brand b{display:block;font:700 15px/1.2 "Segoe UI",Tahoma,Arial,sans-serif;white-space:nowrap;letter-spacing:-.01em}.brand small{display:block;color:var(--muted);font-size:11px;white-space:nowrap}
.top-actions{display:flex;align-items:center;gap:7px}.round-button,.install-mini{border:1px solid var(--line);background:var(--card-strong);box-shadow:0 3px 11px rgba(70,42,42,.04);cursor:pointer}.round-button{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-size:19px}.install-mini{min-height:40px;padding:0 13px;border-radius:14px;color:var(--accent-dark);font-weight:750;font-size:12px}.music-bars{height:16px;display:flex;align-items:center;gap:2px}.music-bars i{width:2px;height:7px;background:currentColor;border-radius:2px}.music-button.playing .music-bars i{animation:musicBars .8s ease-in-out infinite}.music-button.playing .music-bars i:nth-child(2){animation-delay:.18s}.music-button.playing .music-bars i:nth-child(3){animation-delay:.36s}
@keyframes musicBars{0%,100%{height:6px}50%{height:16px}}

main{width:min(100%,1080px);margin:0 auto;padding:18px 15px 114px;min-height:calc(100vh - 70px)}
.bottom-nav{position:fixed;left:50%;transform:translateX(-50%);bottom:0;z-index:50;width:min(100%,720px);display:grid;grid-template-columns:repeat(5,1fr);padding:8px 8px calc(8px + env(safe-area-inset-bottom));background:rgba(36,25,35,.98);border-radius:24px 24px 0 0;box-shadow:0 -9px 30px rgba(28,20,29,.18)}
.bottom-nav a{display:block;padding:5px 2px;border-radius:14px;text-align:center;text-decoration:none;color:#cfc0c1;font-size:19px}.bottom-nav small{display:block;font-size:10px;margin-top:1px}.bottom-nav a.active{color:#ff9688;background:rgba(255,255,255,.065)}

.page-transition{animation:pageIn .42s cubic-bezier(.2,.75,.22,1)}
.page-transition.turn-forward{transform-origin:left center;animation:turnForward .46s cubic-bezier(.2,.72,.2,1)}
.page-transition.turn-back{transform-origin:right center;animation:turnBack .46s cubic-bezier(.2,.72,.2,1)}
@keyframes pageIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes turnForward{from{opacity:.25;transform:perspective(1300px) rotateY(-8deg) translateX(22px)}to{opacity:1;transform:none}}
@keyframes turnBack{from{opacity:.25;transform:perspective(1300px) rotateY(8deg) translateX(-22px)}to{opacity:1;transform:none}}
::view-transition-old(root){animation:.22s ease both fadeOut}::view-transition-new(root){animation:.42s ease both pageIn}@keyframes fadeOut{to{opacity:0;transform:scale(.985)}}

.hero{display:grid;grid-template-columns:minmax(0,1fr);border-radius:30px;overflow:hidden;background:var(--plum);box-shadow:0 20px 46px rgba(36,25,35,.18);position:relative;min-height:660px}.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(28,20,29,.06),rgba(28,20,29,.18) 42%,rgba(21,15,22,.91) 88%)}.hero-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.72}.hero-content{position:relative;z-index:2;min-height:660px;padding:34px 22px 30px;display:flex;flex-direction:column;justify-content:flex-end;text-align:center;color:#fff9ef}.hero-kicker{font-size:11px;text-transform:uppercase;letter-spacing:.2em;color:#f2aea3;font-weight:800}.hero h1{margin:7px 0 0;font:700 clamp(41px,11vw,68px)/1.02 Cambria,"Times New Roman",serif;letter-spacing:.02em;text-transform:uppercase}.hero h2{margin:9px 0 15px;font:italic 25px/1.2 Cambria,"Times New Roman",serif;color:#f3b4aa}.hero-tagline{max-width:520px;margin:0 auto 22px;color:#eadfda;font-size:15px}.hero-actions{width:min(100%,430px);display:grid;gap:10px;margin:0 auto}.primary-button,.secondary-button,.ghost-button{border:0;border-radius:16px;padding:14px 17px;text-decoration:none;text-align:center;font-weight:800;cursor:pointer}.primary-button{background:var(--accent);color:#fffaf3;box-shadow:0 11px 25px rgba(184,92,80,.23)}.primary-button:hover{background:var(--accent-dark)}.secondary-button{background:rgba(255,255,255,.10);color:#fff;border:1px solid rgba(255,255,255,.21)}.ghost-button{background:var(--accent-soft);color:var(--accent-dark)}.full{width:100%}

.section{margin-top:28px}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-bottom:13px}.section-heading h2{margin:0;font:800 27px/1.2 "Segoe UI",Tahoma,Arial,sans-serif;letter-spacing:-.025em}.text-link{color:var(--accent-dark);text-decoration:none;font-weight:760;font-size:13px}.eyebrow,.modal-kicker{color:var(--accent);font-size:11px;text-transform:uppercase;letter-spacing:.16em;font-weight:850}.muted{color:var(--muted)}
.intro-card,.quote-card,.info-card,.reader-reflection,.stat-card,.account-summary{background:var(--card-strong);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-soft)}
.intro-card{padding:22px}.intro-card blockquote{margin:0 0 12px;color:var(--accent-dark);font:700 24px/1.42 Cambria,"Times New Roman",serif;letter-spacing:-.012em}.intro-card p{margin:0}
.home-grid{display:grid;gap:14px}.continue-card{display:grid;grid-template-columns:104px minmax(0,1fr);min-height:148px;border-radius:var(--radius);overflow:hidden;background:var(--card-strong);border:1px solid var(--line);box-shadow:var(--shadow-soft);color:inherit;text-decoration:none}.continue-card img{width:104px;height:100%;object-fit:cover}.continue-card .content{padding:15px 15px 14px 0}.continue-card h3{font:750 21px/1.24 "Segoe UI",Tahoma,Arial,sans-serif;margin:4px 0 7px;letter-spacing:-.018em}.progress-track{height:5px;background:var(--accent-soft);border-radius:99px;overflow:hidden;margin-top:10px}.progress-track span{display:block;height:100%;background:var(--accent);border-radius:99px}.home-actions-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.home-action-card{padding:18px;border-radius:20px;background:var(--card-strong);border:1px solid var(--line);box-shadow:var(--shadow-soft);color:inherit;text-decoration:none}.home-action-card b{display:block;margin-top:8px;font:750 18px/1.25 "Segoe UI",Tahoma,Arial,sans-serif;letter-spacing:-.012em}.home-action-card span{font-size:23px;color:var(--accent)}

.page-head{padding:15px 3px 7px}.page-title{margin:3px 0 8px;font:700 clamp(33px,8vw,46px)/1.12 Cambria,"Times New Roman",serif;letter-spacing:-.018em}.page-subtitle{margin:0;color:var(--muted)}.head-row{display:flex;align-items:end;justify-content:space-between;gap:15px}.sync-chip,.offline-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;padding:7px 10px;background:var(--card-strong);font-size:11px;color:var(--muted)}.sync-chip.online,.offline-chip.ready{color:#4d7659}.search-box{display:flex;gap:8px;margin:18px 0}.search-box input{width:100%;border:1px solid var(--line);background:var(--card-strong);color:var(--ink);border-radius:16px;padding:13px 15px;outline:none;box-shadow:0 3px 12px rgba(70,42,42,.035)}.search-box input:focus{border-color:rgba(184,92,80,.5);box-shadow:0 0 0 4px rgba(184,92,80,.09)}
.chapter-grid{display:grid;gap:13px}.chapter-card{display:grid;grid-template-columns:106px minmax(0,1fr);min-height:150px;background:var(--card-strong);border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:var(--shadow-soft);color:inherit;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease}.chapter-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}.chapter-card img{width:106px;height:100%;object-fit:cover}.chapter-card-body{padding:14px 15px}.chapter-number{color:var(--accent);font-size:11px;text-transform:uppercase;letter-spacing:.05em;font-weight:850}.chapter-card h2{font:750 20px/1.28 "Segoe UI",Tahoma,Arial,sans-serif;margin:4px 0 6px;letter-spacing:-.02em}.chapter-card p{margin:0;color:var(--muted);font-size:13px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}.chapter-meta{display:flex;align-items:center;gap:10px;margin-top:9px;color:var(--muted);font-size:11px}.complete-badge{color:var(--accent-dark);font-weight:850}.offline-mark{margin-left:auto;color:#4d7659}.empty{padding:25px;text-align:center;background:var(--card);border-radius:18px;color:var(--muted)}

.reader-shell{max-width:760px;margin:0 auto}.reader-toolbar{position:sticky;top:70px;z-index:25;margin:0 -3px;padding:9px 3px;display:flex;align-items:center;justify-content:space-between;background:color-mix(in srgb,var(--paper) 93%,transparent);backdrop-filter:blur(13px);border-bottom:1px solid var(--line)}.reader-toolbar a,.reader-toolbar button{border:1px solid var(--line);background:var(--card-strong);border-radius:13px;padding:9px 11px;color:inherit;text-decoration:none;cursor:pointer}.reader-tools{display:flex;gap:6px}.reader-progress{position:sticky;top:124px;z-index:24;height:3px;background:var(--accent-soft)}.reader-progress span{display:block;height:100%;width:0;background:var(--accent)}.reader-hero{text-align:center;padding:26px 0 22px}.reader-visual{width:min(100%,620px);height:250px;object-fit:cover;border-radius:25px;box-shadow:var(--shadow);margin-bottom:20px}.reader-title{font:700 clamp(37px,9vw,56px)/1.12 Cambria,"Times New Roman",serif;margin:7px 0 9px;letter-spacing:-.018em}.reader-meta{color:var(--muted);font-size:13px}.reader-content{font-family:Cambria,"Times New Roman",serif;font-size:var(--reader-size);line-height:1.82;letter-spacing:0;font-kerning:normal;font-variant-ligatures:common-ligatures}.reader-content p{margin:0 0 1.05em;text-align:left;hyphens:none}.reader-content p.dialogue{width:fit-content;max-width:89%;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;font-size:calc(var(--reader-size) - 1px);line-height:1.5;padding:11px 14px;background:var(--card-strong);border:1px solid var(--line);border-radius:18px 18px 18px 6px;box-shadow:0 5px 14px rgba(70,42,42,.05)}.reader-content p.dialogue.alt{margin-left:auto;background:var(--accent-soft);border-radius:18px 18px 6px 18px}.reader-reflection{margin:34px 0;padding:22px;border-left:4px solid var(--accent);font:400 19px/1.62 Cambria,"Times New Roman",serif}.reader-reflection h3{margin:0 0 9px;color:var(--accent-dark);font-size:20px}.reader-status-row{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-top:15px}.heart{border:1px solid var(--line);background:var(--card);width:42px;height:42px;border-radius:50%;cursor:pointer;font-size:19px}.heart.active{background:var(--accent);color:white;border-color:transparent}.reader-nav{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:30px 0}.reader-nav a{padding:16px;background:var(--card-strong);border:1px solid var(--line);border-radius:18px;color:inherit;text-decoration:none;box-shadow:var(--shadow-soft)}.reader-nav a:last-child{text-align:right}.swipe-hint{text-align:center;color:var(--muted);font-size:11px;margin-top:-14px}

.timeline{display:grid;gap:13px;position:relative}.timeline::before{content:"";position:absolute;left:21px;top:15px;bottom:15px;width:1px;background:rgba(184,92,80,.35)}.timeline-item{position:relative;margin-left:46px;padding:16px 18px;background:var(--card-strong);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-soft);color:inherit;text-decoration:none}.timeline-item::before{content:"";position:absolute;left:-36px;top:20px;width:17px;height:17px;border-radius:50%;background:var(--accent);border:4px solid var(--paper);box-shadow:0 0 0 1px rgba(184,92,80,.25)}.timeline-item h3{margin:3px 0 4px;font:750 18px/1.25 "Segoe UI",Tahoma,Arial,sans-serif;letter-spacing:-.015em}.timeline-item p{margin:0;color:var(--muted);font-size:13px}.journey-group-title{margin:28px 0 12px;font:800 24px/1.25 "Segoe UI",Tahoma,Arial,sans-serif;color:var(--accent-dark);letter-spacing:-.02em}
.quotes-list{display:grid;gap:14px}.quote-card{padding:22px;position:relative;overflow:hidden}.quote-card::before{content:"“";position:absolute;right:17px;top:-19px;font:700 90px Cambria,"Times New Roman",serif;color:rgba(184,92,80,.09)}.quote-card p{position:relative;margin:0;font:400 20px/1.65 Cambria,"Times New Roman",serif;letter-spacing:-.006em}.quote-card footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px}.featured-quote{background:var(--plum);color:#fff7ef;border-radius:24px;padding:28px;box-shadow:var(--shadow);position:relative;overflow:hidden}.featured-quote::after{content:"";position:absolute;right:-40px;bottom:-55px;width:170px;height:170px;border:1px solid rgba(255,255,255,.12);border-radius:50%}.featured-quote blockquote{margin:0;font:400 23px/1.58 Cambria,"Times New Roman",serif;letter-spacing:-.008em}.featured-quote cite{display:block;margin-top:13px;color:#e5a096}

.work-cover{width:min(100%,410px);display:block;margin:15px auto 23px;border-radius:28px;box-shadow:0 20px 44px rgba(36,25,35,.19)}.info-card{padding:23px}.info-card p{margin:12px 0}.characters-image{width:100%;max-height:420px;object-fit:contain;border-radius:24px;background:var(--card);border:1px solid var(--line)}.characters{display:grid;gap:13px;margin-top:13px}.character{padding:18px;background:var(--card-strong);border:1px solid var(--line);border-radius:18px}.character h3{margin:0 0 6px;font:750 19px/1.25 "Segoe UI",Tahoma,Arial,sans-serif;letter-spacing:-.015em}.character p{margin:0;color:var(--muted)}.notice{padding:18px;border:1px dashed rgba(184,92,80,.38);border-radius:18px;color:var(--muted);background:var(--card)}

.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.stat-card{padding:15px;text-align:center}.stat-card b{display:block;font:700 24px Cambria,"Times New Roman",serif;color:var(--accent-dark)}.stat-card span{font-size:11px;color:var(--muted)}

.modal-backdrop{position:fixed;inset:0;z-index:120;display:grid;place-items:end center;padding:18px;background:rgba(28,20,29,.48);backdrop-filter:blur(7px)}.modal{width:min(100%,470px);max-height:88vh;overflow:auto;background:var(--paper-2);border:1px solid var(--line);border-radius:28px;padding:28px 22px 22px;position:relative;box-shadow:0 26px 70px rgba(28,20,29,.27)}.modal-close{position:absolute;right:13px;top:12px;width:37px;height:37px;border-radius:50%;border:1px solid var(--line);background:var(--card);cursor:pointer;font-size:22px}.modal h2{margin:4px 0 10px;font:800 27px/1.22 "Segoe UI",Tahoma,Arial,sans-serif;letter-spacing:-.02em}.app-icon-preview{width:76px;height:76px;border-radius:25px;display:grid;place-items:center;background:var(--plum);color:#fff8ef;font:700 23px Cambria,"Times New Roman",serif;box-shadow:var(--shadow)}.modal ol{padding-left:21px}.modal li{margin:9px 0}.range-label{display:flex;justify-content:space-between;margin:20px 0 6px;font-weight:700}.range{width:100%;accent-color:var(--accent)}
.account-tabs{display:grid;grid-template-columns:1fr 1fr;gap:5px;background:var(--accent-soft);border-radius:14px;padding:4px;margin:17px 0}.account-tabs button{border:0;background:transparent;border-radius:11px;padding:10px;cursor:pointer}.account-tabs button.active{background:var(--card-strong);box-shadow:var(--shadow-soft);font-weight:800}.form-field{display:grid;gap:6px;margin:12px 0}.form-field label{font-weight:700;font-size:13px}.form-field input{border:1px solid var(--line);background:var(--card-strong);color:var(--ink);border-radius:14px;padding:12px 13px;outline:none}.form-field input:focus{border-color:rgba(184,92,80,.5);box-shadow:0 0 0 4px rgba(184,92,80,.08)}.account-summary{padding:19px}.account-avatar{width:58px;height:58px;border-radius:20px;background:var(--accent-soft);color:var(--accent-dark);display:grid;place-items:center;font:700 20px Cambria,"Times New Roman",serif}.account-row{display:flex;gap:13px;align-items:center}.account-row h3{margin:0;font:750 19px/1.25 "Segoe UI",Tahoma,Arial,sans-serif;letter-spacing:-.015em}.account-row p{margin:2px 0 0;color:var(--muted);font-size:13px}.button-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:15px}.error-message{margin:10px 0;padding:10px 12px;border-radius:12px;background:#ffe7e3;color:#8c3932;font-size:13px}.success-message{margin:10px 0;padding:10px 12px;border-radius:12px;background:#e9f5ea;color:#3f694a;font-size:13px}
.toast{position:fixed;z-index:160;left:50%;bottom:92px;transform:translate(-50%,18px);opacity:0;pointer-events:none;background:var(--plum);color:#fff7ef;border-radius:999px;padding:10px 15px;font-size:13px;box-shadow:var(--shadow);transition:.25s ease}.toast.show{opacity:1;transform:translate(-50%,0)}

@media(min-width:720px){
  main{padding-left:24px;padding-right:24px}.hero{min-height:610px}.hero-content{min-height:610px}.home-grid{grid-template-columns:1.1fr .9fr;align-items:stretch}.chapter-grid{grid-template-columns:1fr 1fr}.characters{grid-template-columns:1fr 1fr}.quotes-list{grid-template-columns:1fr 1fr}.modal-backdrop{place-items:center}.stats{max-width:620px}
}
@media(max-width:520px){
  .brand-copy{display:none}.install-mini{display:none}.top-actions{margin-left:auto}.hero{min-height:calc(100vh - 118px);border-radius:25px}.hero-content{min-height:calc(100vh - 118px);padding:27px 18px}.hero h1{font-size:45px}.hero h2{font-size:22px}.chapter-card{grid-template-columns:96px minmax(0,1fr);min-height:142px}.chapter-card img{width:96px}.chapter-card h2{font-size:20px}.reader-visual{height:210px}.reader-content{line-height:1.82}.reader-nav{grid-template-columns:1fr}.reader-nav a:last-child{text-align:left}.home-actions-grid{grid-template-columns:1fr 1fr}.stats{grid-template-columns:repeat(3,1fr)}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.hero.cover-home .hero-cover{opacity:1;object-position:center top}.hero.cover-home::after{background:linear-gradient(180deg,rgba(19,14,20,0) 45%,rgba(19,14,20,.18) 64%,rgba(19,14,20,.96) 91%)}.home-cover-actions{justify-content:flex-end;padding-top:440px}.home-cover-actions .hero-tagline{font-size:14px;text-shadow:0 2px 10px rgba(0,0,0,.7)}
.home-action-card{border:1px solid var(--line);text-align:left;cursor:pointer}.home-action-card small{display:block;margin-top:3px}
@media(max-width:520px){.home-cover-actions{padding-top:420px}.hero.cover-home .hero-cover{object-position:center top}}
main:focus{outline:none}

/* ===== V2.5 PUBLIC ANALYTICS ===== */
.community-section{padding-top:4px}
.community-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:14px}
.community-head h2{margin:4px 0 0;font:800 clamp(22px,4vw,30px)/1.18 "Segoe UI",Tahoma,Arial,sans-serif;letter-spacing:-.025em;color:var(--ink)}
.live-indicator{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;padding:9px 12px;border:1px solid var(--line);border-radius:999px;background:var(--card-strong);font-size:12px;color:var(--muted);box-shadow:var(--shadow-soft)}
.live-indicator i{width:8px;height:8px;border-radius:50%;background:#54a66d;box-shadow:0 0 0 4px rgba(84,166,109,.12);animation:livePulse 1.8s ease-out infinite}
.live-indicator b{font-size:13px;color:var(--ink)}
@keyframes livePulse{0%{box-shadow:0 0 0 0 rgba(84,166,109,.28)}70%{box-shadow:0 0 0 8px rgba(84,166,109,0)}100%{box-shadow:0 0 0 0 rgba(84,166,109,0)}}
.public-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.public-stat{min-width:0;display:flex;align-items:center;gap:12px;padding:15px 16px;background:var(--card-strong);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-soft)}
.public-stat>span{flex:0 0 auto;width:38px;height:38px;border-radius:13px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-dark);font-size:19px}
.public-stat div{min-width:0}
.public-stat b{display:block;font:800 22px/1.05 "Segoe UI",Tahoma,Arial,sans-serif;color:var(--accent-dark);font-variant-numeric:tabular-nums}
.public-stat small{display:block;margin-top:4px;color:var(--muted);font-size:11px;white-space:normal}
.chapter-views,.reader-read-stat{display:inline-flex;align-items:center;gap:4px;color:var(--muted)}
.chapter-views b,.reader-read-stat b{font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.reader-read-stat{padding:4px 8px;border-radius:999px;background:var(--accent-soft);color:var(--accent-dark)}
.reader-read-stat b{color:var(--accent-dark)}
@media(max-width:620px){
  .community-head{align-items:center}
  .community-head h2{font-size:21px}
  .public-stats{grid-template-columns:1fr 1fr}
  .public-stat:last-child{grid-column:1/-1}
}
@media(max-width:400px){
  .community-head{align-items:flex-start;flex-direction:column;gap:9px}
  .public-stat{padding:13px}
  .public-stat>span{width:34px;height:34px}
  .public-stat b{font-size:19px}
}


/* ===== V2.6 READER PRO ===== */
.completion-stat,.reader-completion-stat{display:inline-flex;align-items:center;gap:4px;color:#4d7659;font-weight:750;font-size:11px}
.reader-completion-stat{padding:4px 8px;border-radius:999px;background:#eaf3ec;color:#42694c}
:root[data-theme="dark"] .reader-completion-stat{background:#213329;color:#a9d5b4}

.reader-shell{--reader-line-height:1.82;transition:background .25s ease,color .25s ease,border-color .25s ease;padding:0 18px 18px;border-radius:26px}
.reader-shell[data-reader-theme="paper"]{background:#f8f1e8;color:#35292a;border:1px solid rgba(104,70,58,.10)}
.reader-shell[data-reader-theme="white"]{background:#fff;color:#282426;border:1px solid #ece7e3}
.reader-shell[data-reader-theme="night"]{background:#15171c;color:#eee7df;border:1px solid rgba(255,255,255,.08)}
.reader-shell[data-reader-theme="night"] .reader-meta,.reader-shell[data-reader-theme="night"] .muted,.reader-shell[data-reader-theme="night"] .swipe-hint{color:#b9aea8}
.reader-shell[data-reader-theme="night"] .reader-toolbar{background:rgba(21,23,28,.94);border-color:rgba(255,255,255,.08)}
.reader-shell[data-reader-theme="night"] .reader-toolbar a,.reader-shell[data-reader-theme="night"] .reader-toolbar button{background:#20232a;border-color:rgba(255,255,255,.09);color:#f2ebe4}
.reader-shell[data-reader-theme="night"] .reader-settings-panel{background:#1d2026;border-color:rgba(255,255,255,.09);box-shadow:0 18px 44px rgba(0,0,0,.34)}
.reader-shell[data-reader-theme="night"] .reader-settings-panel button{background:#272b33;border-color:rgba(255,255,255,.10);color:#e9e2db}
.reader-shell[data-reader-theme="night"] .reader-settings-panel button.active{background:#8c4c45;color:#fff}
.reader-shell[data-reader-theme="night"] .reader-reflection{background:#20232a;border-color:rgba(255,255,255,.09);border-left-color:#d48174}
.reader-shell[data-reader-theme="night"] .reader-content p.dialogue{background:#20232a;border-color:rgba(255,255,255,.09)}
.reader-shell[data-reader-theme="night"] .reader-content p.dialogue.alt{background:#3b292c}
.reader-shell[data-reader-theme="night"] .reader-nav a{background:#20232a;border-color:rgba(255,255,255,.09);color:#eee7df}
.reader-shell[data-reader-theme="night"] .offline-chip.ready{background:#243229;color:#b2d7bc}
.reader-shell[data-reader-font="serif"] .reader-content{font-family:Cambria,"Times New Roman",serif}
.reader-shell[data-reader-font="sans"] .reader-content{font-family:"Segoe UI",Tahoma,Arial,sans-serif;letter-spacing:-.008em}
.reader-content{line-height:var(--reader-line-height,1.82)}
.reader-settings-panel{position:sticky;top:123px;z-index:28;margin:0 0 8px;padding:14px;background:rgba(255,253,249,.98);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);backdrop-filter:blur(16px)}
.reader-setting-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--line)}
.reader-setting-row:last-child{border-bottom:0}.reader-setting-row>b{font-size:12px;white-space:nowrap;color:var(--muted)}
.setting-chips,.font-stepper{display:flex;align-items:center;justify-content:flex-end;gap:6px;flex-wrap:wrap}
.setting-chips button,.font-stepper button{border:1px solid var(--line);background:var(--card-strong);border-radius:11px;padding:7px 10px;cursor:pointer;font-size:12px}
.setting-chips button.active{background:var(--accent);color:#fff;border-color:transparent}.font-stepper span{min-width:48px;text-align:center;font-size:12px;font-weight:800}
.reader-quote-actions,.quote-card-actions{display:flex;align-items:center;gap:8px}.quote-image-button{border:1px solid var(--line);background:var(--card-strong);color:var(--accent-dark);border-radius:999px;padding:8px 11px;cursor:pointer;font-size:11px;font-weight:800}.quote-image-button:hover{background:var(--accent-soft)}
.reader-reflection>p{margin:0}

.quote-share-modal{width:min(100%,560px)}.quote-format-tabs{display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:4px;margin:16px 0;background:var(--accent-soft);border-radius:13px}.quote-format-tabs button{border:0;background:transparent;border-radius:10px;padding:9px;cursor:pointer}.quote-format-tabs button.active{background:var(--card-strong);box-shadow:var(--shadow-soft);font-weight:800}.quote-canvas-wrap{display:grid;place-items:center;max-height:52vh;overflow:auto;padding:12px;background:#eee6df;border-radius:20px;border:1px solid var(--line)}.quote-canvas-wrap canvas{width:100%;height:auto;max-height:48vh;object-fit:contain;border-radius:13px;box-shadow:0 10px 28px rgba(36,25,35,.18)}

@media(max-width:620px){
  .reader-shell{padding:0 12px 16px;border-radius:20px}.reader-settings-panel{top:123px}.reader-setting-row{align-items:flex-start;flex-direction:column;gap:7px}.setting-chips,.font-stepper{justify-content:flex-start}.reader-meta{line-height:2}.chapter-meta{flex-wrap:wrap}.offline-mark{margin-left:0}.quote-card footer{align-items:flex-end}.quote-card-actions{flex-shrink:0}
}

/* ===== V2.7 DESKTOP ADAPTIVE ===== */
.desktop-hero-copy{display:none}

html[data-layout="desktop"] body{
  background:
    radial-gradient(circle at 88% 8%,rgba(184,92,80,.055),transparent 28rem),
    linear-gradient(180deg,var(--paper-2),var(--paper));
}
html[data-layout="desktop"] .topbar{
  height:76px;
  padding:12px max(28px,calc((100vw - 1480px)/2 + 28px));
  background:color-mix(in srgb,var(--paper-2) 95%,transparent);
  box-shadow:0 7px 26px rgba(74,45,45,.035);
}
html[data-layout="desktop"] .brand-mark{width:44px;height:44px;border-radius:14px}
html[data-layout="desktop"] .brand b{font-size:16px}
html[data-layout="desktop"] .brand small{font-size:11px}
html[data-layout="desktop"] .top-actions{gap:9px}
html[data-layout="desktop"] .round-button{width:42px;height:42px}
html[data-layout="desktop"] .install-mini{min-height:42px;padding:0 16px}

html[data-layout="desktop"] main{
  width:min(100%,1480px);
  margin:0 auto;
  min-height:calc(100vh - 76px);
  padding:30px 30px 76px 258px;
}
html[data-layout="desktop"] .bottom-nav{
  left:max(28px,calc((100vw - 1480px)/2 + 28px));
  top:96px;
  bottom:auto;
  transform:none;
  width:198px;
  display:flex;
  flex-direction:column;
  gap:5px;
  padding:11px;
  border-radius:22px;
  background:var(--card-strong);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}
html[data-layout="desktop"] .bottom-nav::before{
  content:"KHÁM PHÁ";
  display:block;
  padding:8px 11px 7px;
  color:var(--muted);
  font-size:10px;
  font-weight:850;
  letter-spacing:.16em;
}
html[data-layout="desktop"] .bottom-nav a{
  display:flex;
  align-items:center;
  gap:11px;
  min-height:48px;
  padding:9px 11px;
  border-radius:13px;
  text-align:left;
  color:var(--muted);
  font-size:19px;
  transition:background .18s ease,color .18s ease,transform .18s ease;
}
html[data-layout="desktop"] .bottom-nav a:hover{background:var(--paper);color:var(--ink);transform:translateX(2px)}
html[data-layout="desktop"] .bottom-nav small{margin:0;font-size:13px;font-weight:700}
html[data-layout="desktop"] .bottom-nav a.active{color:var(--accent-dark);background:var(--accent-soft)}

html[data-layout="desktop"] .hero.cover-home{
  display:grid;
  grid-template-columns:minmax(390px,.86fr) minmax(470px,1.14fr);
  min-height:590px;
  border-radius:30px;
  background:var(--card-strong);
  border:1px solid var(--line);
  box-shadow:0 20px 54px rgba(63,39,39,.11);
}
html[data-layout="desktop"] .hero.cover-home::after{display:none}
html[data-layout="desktop"] .hero.cover-home .hero-cover{
  position:relative;
  inset:auto;
  grid-column:1;
  grid-row:1;
  width:100%;
  height:590px;
  opacity:1;
  object-position:center top;
  border-radius:29px 0 0 29px;
}
html[data-layout="desktop"] .hero.cover-home .hero-content{
  grid-column:2;
  grid-row:1;
  min-height:590px;
  padding:58px clamp(42px,5vw,74px);
  justify-content:center;
  align-items:flex-start;
  text-align:left;
  color:var(--ink);
  background:linear-gradient(145deg,var(--card-strong),color-mix(in srgb,var(--paper) 58%,var(--card-strong)));
}
html[data-layout="desktop"] .desktop-hero-copy{display:block;max-width:650px}
html[data-layout="desktop"] .desktop-hero-copy .hero-kicker{color:var(--accent);font-family:"Segoe UI",Tahoma,Arial,sans-serif}
html[data-layout="desktop"] .desktop-hero-copy h1{
  max-width:620px;
  margin:12px 0 3px;
  color:var(--ink);
  font-size:clamp(48px,4.5vw,72px);
  line-height:1.02;
  letter-spacing:-.025em;
}
html[data-layout="desktop"] .desktop-hero-copy h2{margin:10px 0 24px;color:var(--accent-dark);font-size:28px}
html[data-layout="desktop"] .desktop-hero-copy p{max-width:570px;margin:0 0 20px;color:var(--muted);font-size:16px;line-height:1.75}
html[data-layout="desktop"] .home-cover-actions{padding-top:58px}
html[data-layout="desktop"] .home-cover-actions .hero-tagline{max-width:570px;margin:0 0 24px;color:var(--muted);font-size:14px;text-shadow:none}
html[data-layout="desktop"] .hero-actions{width:auto;max-width:570px;margin:0;grid-template-columns:auto auto;align-items:center}
html[data-layout="desktop"] .hero-actions .primary-button{min-width:230px}
html[data-layout="desktop"] .hero-actions .secondary-button{background:var(--paper);color:var(--accent-dark);border:1px solid var(--line)}

html[data-layout="desktop"] .section{margin-top:34px}
html[data-layout="desktop"] .section-heading h2{font-size:29px}
html[data-layout="desktop"] .home-grid{grid-template-columns:1.05fr .95fr;gap:22px}
html[data-layout="desktop"] .continue-card{min-height:172px;grid-template-columns:132px minmax(0,1fr)}
html[data-layout="desktop"] .continue-card img{width:132px}
html[data-layout="desktop"] .continue-card .content{padding:20px 20px 18px 0}
html[data-layout="desktop"] .continue-card h3{font-size:24px}
html[data-layout="desktop"] .home-action-card{transition:transform .18s ease,box-shadow .18s ease}
html[data-layout="desktop"] .home-action-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
html[data-layout="desktop"] .intro-card{padding:28px 30px}
html[data-layout="desktop"] .intro-card blockquote{font-size:27px}
html[data-layout="desktop"] .public-stat{padding:18px}
html[data-layout="desktop"] .public-stat b{font-size:25px}

html[data-layout="desktop"] .page-head{padding-top:20px}
html[data-layout="desktop"] .page-title{font-size:48px}
html[data-layout="desktop"] .search-box{max-width:620px;margin:22px 0}
html[data-layout="desktop"] .chapter-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:17px}
html[data-layout="desktop"] .chapter-card{grid-template-columns:126px minmax(0,1fr);min-height:174px}
html[data-layout="desktop"] .chapter-card img{width:126px}
html[data-layout="desktop"] .chapter-card-body{padding:18px 18px}
html[data-layout="desktop"] .chapter-card h2{font-size:22px}
html[data-layout="desktop"] .chapter-card p{font-size:13px;-webkit-line-clamp:3}

html[data-layout="desktop"] .reader-shell{max-width:940px;padding:0 34px 30px;border-radius:30px}
html[data-layout="desktop"] .reader-toolbar{top:76px;margin:0 -12px;padding:11px 12px}
html[data-layout="desktop"] .reader-progress{top:133px}
html[data-layout="desktop"] .reader-settings-panel{top:136px;max-width:780px;margin:0 auto 12px}
html[data-layout="desktop"] .reader-hero{padding:34px 0 28px}
html[data-layout="desktop"] .reader-visual{width:min(100%,760px);height:330px}
html[data-layout="desktop"] .reader-title{font-size:56px}
html[data-layout="desktop"] .reader-content,
html[data-layout="desktop"] .reader-reflection,
html[data-layout="desktop"] .reader-nav{max-width:780px;margin-left:auto;margin-right:auto}
html[data-layout="desktop"] .reader-content{font-size:var(--reader-size);line-height:var(--reader-line-height,1.82)}
html[data-layout="desktop"] .reader-content p{margin-bottom:1.18em}
html[data-layout="desktop"] .reader-reflection{margin-top:42px;margin-bottom:42px;padding:26px 28px}
html[data-layout="desktop"] .reader-nav{margin-top:36px}
html[data-layout="desktop"] .swipe-hint{margin-top:-16px;font-size:12px}

html[data-layout="desktop"] .timeline{gap:15px}
html[data-layout="desktop"] .timeline-item{padding:18px 20px}
html[data-layout="desktop"] .quotes-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:17px}
html[data-layout="desktop"] .work-cover{max-width:420px;float:left;margin:0 28px 24px 0}
html[data-layout="desktop"] .info-card{min-height:300px}
html[data-layout="desktop"] .characters{clear:both}
html[data-layout="desktop"] .modal{max-height:86vh}
html[data-layout="desktop"] .toast{bottom:28px}

@media (min-width:1024px) and (max-width:1180px){
  html[data-layout="desktop"] main{padding-left:230px;padding-right:22px}
  html[data-layout="desktop"] .bottom-nav{width:174px;left:22px}
  html[data-layout="desktop"] .hero.cover-home{grid-template-columns:360px minmax(0,1fr)}
  html[data-layout="desktop"] .hero.cover-home .hero-content{padding:46px 36px}
  html[data-layout="desktop"] .desktop-hero-copy h1{font-size:50px}
}

/* Tablet keeps the mobile navigation but uses the extra width better. */
html[data-layout="tablet"] main{width:min(100%,980px)}
html[data-layout="tablet"] .chapter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
html[data-layout="tablet"] .hero{min-height:610px}
html[data-layout="tablet"] .hero-content{min-height:610px}

/* ===== V2.8 DESKTOP BOOK READER ===== */
/* The desktop reader becomes a book-focused workspace. Mobile/tablet remain unchanged. */
html[data-layout="desktop"] body.reader-route main{
  width:min(100%,1480px);
  padding-left:30px;
  padding-right:30px;
}
html[data-layout="desktop"] body.reader-route .bottom-nav{
  opacity:0;
  pointer-events:none;
  transform:translateX(-16px);
}
html[data-layout="desktop"] body.reader-route .topbar,
html[data-layout="desktop"] body.reader-route .bottom-nav,
html[data-layout="desktop"] body.reader-route .reader-toolbar,
html[data-layout="desktop"] body.reader-route .desktop-reader-toc,
html[data-layout="desktop"] body.reader-route .desktop-reader-info{
  transition:opacity .26s ease,transform .28s ease,filter .26s ease;
}
html[data-layout="desktop"] body.reader-route.reader-controls-hidden .topbar{
  opacity:0;
  transform:translateY(-102%);
  pointer-events:none;
}
html[data-layout="desktop"] body.reader-route.reader-controls-hidden .reader-toolbar{
  opacity:.08;
  transform:translateY(-8px);
}
html[data-layout="desktop"] body.reader-route.reader-controls-hidden .reader-toolbar:hover{
  opacity:1;
  transform:none;
}
html[data-layout="desktop"] body.reader-route.reader-controls-hidden .desktop-reader-toc,
html[data-layout="desktop"] body.reader-route.reader-controls-hidden .desktop-reader-info{
  opacity:.18;
  filter:saturate(.55);
}
html[data-layout="desktop"] body.reader-route.reader-controls-hidden .desktop-reader-toc:hover,
html[data-layout="desktop"] body.reader-route.reader-controls-hidden .desktop-reader-info:hover{
  opacity:1;
  filter:none;
}

/* Reset the V2.7 centered card into a three-column reading desk. */
html[data-layout="desktop"] .reader-shell.desktop-book-reader{
  width:100%;
  max-width:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:minmax(170px,220px) minmax(560px,760px) minmax(170px,220px);
  justify-content:center;
  align-items:start;
  gap:24px;
  background:transparent!important;
  border:0!important;
  border-radius:0;
  box-shadow:none;
  overflow:visible;
}
html[data-layout="desktop"] .reader-book-page{
  position:relative;
  min-width:0;
  min-height:calc(100vh - 116px);
  padding:0 clamp(34px,4vw,52px) 54px;
  border:1px solid rgba(84,58,49,.12);
  border-radius:8px 8px 18px 18px;
  box-shadow:0 24px 70px rgba(64,43,36,.12),0 2px 8px rgba(64,43,36,.05);
  overflow:clip;
}
html[data-layout="desktop"] .reader-shell[data-reader-theme="paper"] .reader-book-page{
  background:
    linear-gradient(90deg,rgba(94,62,46,.025),transparent 8%,transparent 92%,rgba(94,62,46,.025)),
    repeating-linear-gradient(0deg,rgba(101,78,61,.012) 0,rgba(101,78,61,.012) 1px,transparent 1px,transparent 4px),
    #fffaf0;
  color:#35292a;
}
html[data-layout="desktop"] .reader-shell[data-reader-theme="white"] .reader-book-page{
  background:#fff;
  color:#282426;
}
html[data-layout="desktop"] .reader-shell[data-reader-theme="night"] .reader-book-page{
  background:linear-gradient(180deg,#171a20,#14171c);
  color:#eee7df;
  border-color:rgba(255,255,255,.08);
  box-shadow:0 28px 78px rgba(0,0,0,.34);
}
html[data-layout="desktop"] .reader-book-page::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:1px;
  background:linear-gradient(180deg,transparent,rgba(108,79,61,.16) 10%,rgba(108,79,61,.08) 90%,transparent);
  pointer-events:none;
}
html[data-layout="desktop"] .reader-shell[data-reader-theme="night"] .reader-book-page::before{
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.09) 10%,rgba(255,255,255,.03) 90%,transparent);
}
html[data-layout="desktop"] .reader-book-page .reader-toolbar{
  top:76px;
  margin:0 calc(clamp(34px,4vw,52px) * -1);
  padding:11px clamp(20px,3vw,36px);
  border-bottom:1px solid rgba(91,55,55,.10);
  background:color-mix(in srgb,#fffaf0 93%,transparent);
}
html[data-layout="desktop"] .reader-shell[data-reader-theme="white"] .reader-book-page .reader-toolbar{
  background:rgba(255,255,255,.94);
}
html[data-layout="desktop"] .reader-shell[data-reader-theme="night"] .reader-book-page .reader-toolbar{
  background:rgba(20,23,28,.94);
}
html[data-layout="desktop"] .reader-book-page .reader-progress{
  top:133px;
  margin:0 calc(clamp(34px,4vw,52px) * -1);
}
html[data-layout="desktop"] .reader-book-page .reader-settings-panel{
  top:139px;
  max-width:660px;
}
html[data-layout="desktop"] .reader-book-page .reader-hero{
  padding:40px 0 34px;
}
html[data-layout="desktop"] .reader-book-page .reader-visual{
  width:100%;
  height:300px;
  border-radius:18px;
  box-shadow:0 18px 42px rgba(67,45,37,.12);
}
html[data-layout="desktop"] .reader-book-page .reader-title{
  max-width:660px;
  margin:10px auto 12px;
  font-size:clamp(42px,4.25vw,58px);
}
html[data-layout="desktop"] .reader-book-page .reader-meta{
  max-width:660px;
  margin:0 auto;
  line-height:1.8;
}
html[data-layout="desktop"] .reader-book-page .reader-content,
html[data-layout="desktop"] .reader-book-page .reader-reflection,
html[data-layout="desktop"] .reader-book-page .reader-nav{
  max-width:660px;
  margin-left:auto;
  margin-right:auto;
}
html[data-layout="desktop"] .reader-book-page .reader-content{
  font-size:var(--reader-size);
  line-height:var(--reader-line-height,1.82);
}
html[data-layout="desktop"] .reader-book-page .reader-content p{
  margin-bottom:1.22em;
}
html[data-layout="desktop"] .reader-book-page .reader-content p:not(.dialogue){
  text-wrap:pretty;
}
html[data-layout="desktop"] .reader-book-page .reader-reflection{
  margin-top:48px;
  margin-bottom:46px;
  padding:28px 30px;
}
html[data-layout="desktop"] .reader-book-page .reader-nav{
  margin-top:42px;
}
html[data-layout="desktop"] .reader-book-page .swipe-hint{
  margin-top:-14px;
  padding-bottom:4px;
}

/* Chapter rail */
html[data-layout="desktop"] .desktop-reader-toc,
html[data-layout="desktop"] .desktop-reader-info{
  position:sticky;
  top:96px;
  align-self:start;
}
html[data-layout="desktop"] .desktop-reader-toc{
  max-height:calc(100vh - 116px);
  overflow:auto;
  padding:14px 10px 14px 14px;
  border:1px solid var(--line);
  border-radius:20px;
  background:color-mix(in srgb,var(--card-strong) 94%,transparent);
  box-shadow:var(--shadow-soft);
  scrollbar-width:thin;
  scrollbar-color:rgba(184,92,80,.25) transparent;
}
html[data-layout="desktop"] .desktop-reader-panel-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  padding:5px 6px 12px;
}
html[data-layout="desktop"] .desktop-reader-panel-head h2{
  margin:2px 0 0;
  font-size:18px;
  line-height:1.2;
}
html[data-layout="desktop"] .desktop-reader-panel-head>a{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:10px;
  color:var(--accent-dark);
  text-decoration:none;
  background:var(--accent-soft);
}
html[data-layout="desktop"] .desktop-reader-overline{
  color:var(--muted);
  font-size:9px;
  font-weight:850;
  letter-spacing:.16em;
}
html[data-layout="desktop"] .desktop-reader-chapter-list{
  display:grid;
  gap:4px;
}
html[data-layout="desktop"] .desktop-reader-chapter{
  display:grid;
  grid-template-columns:30px minmax(0,1fr);
  gap:8px;
  padding:9px 7px;
  border-radius:12px;
  color:inherit;
  text-decoration:none;
  transition:background .18s ease,transform .18s ease;
}
html[data-layout="desktop"] .desktop-reader-chapter:hover{
  background:var(--paper);
  transform:translateX(2px);
}
html[data-layout="desktop"] .desktop-reader-chapter.current{
  background:var(--accent-soft);
  color:var(--accent-dark);
}
html[data-layout="desktop"] .desktop-reader-chapter-no{
  padding-top:1px;
  color:var(--accent);
  font-size:10px;
  font-weight:900;
  letter-spacing:.06em;
}
html[data-layout="desktop"] .desktop-reader-chapter-copy{
  min-width:0;
}
html[data-layout="desktop"] .desktop-reader-chapter-copy b{
  display:block;
  overflow:hidden;
  color:inherit;
  font-size:11px;
  line-height:1.3;
  white-space:nowrap;
  text-overflow:ellipsis;
}
html[data-layout="desktop"] .desktop-reader-chapter-copy small{
  display:block;
  margin-top:3px;
  color:var(--muted);
  font-size:9px;
}
html[data-layout="desktop"] .desktop-reader-chapter-copy i{
  display:block;
  height:2px;
  margin-top:6px;
  overflow:hidden;
  border-radius:99px;
  background:var(--accent-soft);
}
html[data-layout="desktop"] .desktop-reader-chapter-copy i em{
  display:block;
  height:100%;
  border-radius:99px;
  background:var(--accent);
}

/* Reading status rail */
html[data-layout="desktop"] .desktop-reader-info-card{
  padding:18px;
  border:1px solid var(--line);
  border-radius:20px;
  background:color-mix(in srgb,var(--card-strong) 95%,transparent);
  box-shadow:var(--shadow-soft);
}
html[data-layout="desktop"] .desktop-reader-info-card>h2{
  margin:5px 0 3px;
  font-size:22px;
  line-height:1.1;
}
html[data-layout="desktop"] .desktop-reader-info-card>h2 small{
  color:var(--muted);
  font-size:12px;
  font-weight:650;
}
html[data-layout="desktop"] .desktop-reader-info-title{
  min-height:38px;
  margin:0 0 14px;
  color:var(--muted);
  font-size:12px;
  line-height:1.45;
}
html[data-layout="desktop"] .desktop-reader-progress-ring{
  --progress:0;
  width:112px;
  height:112px;
  margin:8px auto 17px;
  padding:8px;
  border-radius:50%;
  background:conic-gradient(var(--accent) calc(var(--progress) * 1%),var(--accent-soft) 0);
  box-shadow:inset 0 0 0 1px rgba(184,92,80,.08);
}
html[data-layout="desktop"] .desktop-reader-progress-ring>div{
  width:100%;
  height:100%;
  display:grid;
  place-content:center;
  text-align:center;
  border-radius:50%;
  background:var(--card-strong);
}
html[data-layout="desktop"] .desktop-reader-progress-ring b{
  display:block;
  color:var(--accent-dark);
  font-size:25px;
  line-height:1;
}
html[data-layout="desktop"] .desktop-reader-progress-ring span{
  display:block;
  margin-top:4px;
  color:var(--muted);
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.1em;
}
html[data-layout="desktop"] .desktop-reader-facts{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
  margin:0 0 12px;
}
html[data-layout="desktop"] .desktop-reader-facts>div{
  padding:10px;
  border-radius:12px;
  background:var(--paper);
}
html[data-layout="desktop"] .desktop-reader-facts span,
html[data-layout="desktop"] .desktop-reader-facts b{
  display:block;
}
html[data-layout="desktop"] .desktop-reader-facts span{
  color:var(--muted);
  font-size:9px;
}
html[data-layout="desktop"] .desktop-reader-facts b{
  margin-top:3px;
  font-size:11px;
}
html[data-layout="desktop"] .desktop-reader-quick{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
  margin-top:12px;
}
html[data-layout="desktop"] .desktop-reader-quick button{
  min-height:54px;
  padding:8px 5px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--card-strong);
  cursor:pointer;
}
html[data-layout="desktop"] .desktop-reader-quick button span,
html[data-layout="desktop"] .desktop-reader-quick button small{
  display:block;
}
html[data-layout="desktop"] .desktop-reader-quick button span{
  color:var(--accent-dark);
  font-size:18px;
  font-weight:800;
}
html[data-layout="desktop"] .desktop-reader-quick button small{
  margin-top:2px;
  color:var(--muted);
  font-size:9px;
}
html[data-layout="desktop"] .desktop-reader-side-nav{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
  margin-top:12px;
}
html[data-layout="desktop"] .desktop-reader-side-nav a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:40px;
  padding:8px 9px;
  border-radius:11px;
  background:var(--accent-soft);
  color:var(--accent-dark);
  text-decoration:none;
  font-size:10px;
  font-weight:800;
}
html[data-layout="desktop"] .desktop-reader-focus-note{
  margin:13px 2px 0;
  color:var(--muted);
  font-size:9px;
  line-height:1.45;
}

/* Dark reader rails */
html[data-layout="desktop"] .reader-shell[data-reader-theme="night"] .desktop-reader-toc,
html[data-layout="desktop"] .reader-shell[data-reader-theme="night"] .desktop-reader-info-card{
  background:#1b1e24;
  border-color:rgba(255,255,255,.08);
}
html[data-layout="desktop"] .reader-shell[data-reader-theme="night"] .desktop-reader-chapter:hover,
html[data-layout="desktop"] .reader-shell[data-reader-theme="night"] .desktop-reader-facts>div{
  background:#242830;
}
html[data-layout="desktop"] .reader-shell[data-reader-theme="night"] .desktop-reader-progress-ring>div,
html[data-layout="desktop"] .reader-shell[data-reader-theme="night"] .desktop-reader-quick button{
  background:#20242b;
  border-color:rgba(255,255,255,.08);
}

/* Medium desktop: keep TOC, hide the status rail so the page never gets cramped. */
@media (min-width:1024px) and (max-width:1180px){
  html[data-layout="desktop"] body.reader-route main{padding-left:22px;padding-right:22px}
  html[data-layout="desktop"] .reader-shell.desktop-book-reader{
    grid-template-columns:170px minmax(0,760px);
    gap:18px;
  }
  html[data-layout="desktop"] .desktop-reader-info{display:none}
  html[data-layout="desktop"] .reader-book-page{padding-left:36px;padding-right:36px}
  html[data-layout="desktop"] .reader-book-page .reader-visual{height:270px}
}


/* ===== V2.9.1 — User Profile ===== */
.profile-completeness{display:block;margin-top:4px;color:var(--accent,#b85c50);font-size:11px;font-weight:700}
.account-avatar-img{object-fit:cover;overflow:hidden;padding:0;background:#eee}
.account-avatar.large-profile,.account-avatar-img.large-profile{width:76px;height:76px;border-radius:24px;font-size:24px;flex:0 0 76px}
.profile-mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:16px 0 4px}
.profile-mini-grid>div{padding:10px 11px;border:1px solid var(--line);border-radius:13px;background:var(--card,#fff)}
.profile-mini-grid span{display:block;font-size:10px;color:var(--muted);margin-bottom:3px}.profile-mini-grid b{font-size:12px;word-break:break-word}
.profile-editor-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.profile-editor-head h2{margin:0}.text-button{border:0;background:transparent;color:var(--accent,#b85c50);font:inherit;font-size:12px;font-weight:800;cursor:pointer;padding:7px}
.avatar-editor{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;margin:18px 0;padding:14px;border:1px solid var(--line);border-radius:18px;background:var(--card,#fff)}.avatar-editor b{display:block}.avatar-editor p{margin:4px 0 10px;color:var(--muted);font-size:11px}.button-row.compact{gap:7px;justify-content:flex-start}.file-button{cursor:pointer}.danger-soft{color:#a34c43;border-color:#ebc7c0!important;background:#fff8f6!important}
.profile-form{display:grid;grid-template-columns:1fr 1fr;gap:12px}.profile-form .form-field{margin:0}.profile-form .full-span{grid-column:1/-1}.profile-form select,.profile-form input{width:100%;box-sizing:border-box;border:1px solid var(--line);background:var(--card,#fff);color:var(--ink);border-radius:13px;padding:12px 13px;font:inherit;outline:none}.profile-form select:focus,.profile-form input:focus{border-color:#c78377;box-shadow:0 0 0 3px rgba(184,92,80,.10)}.profile-form small{display:block;margin-top:4px;color:var(--muted);font-size:10px}.profile-privacy{font-size:10px!important;line-height:1.55;margin-top:12px}.success-message{padding:10px 12px;border-radius:12px;background:#edf8ef;color:#356443;border:1px solid #cfe7d4;margin:10px 0;font-size:12px}.error-message{padding:10px 12px;border-radius:12px;background:#fff0ed;color:#8d3933;border:1px solid #f1c8c0;margin:10px 0;font-size:12px}
@media(max-width:560px){.profile-form{grid-template-columns:1fr}.profile-form .full-span{grid-column:auto}.profile-mini-grid{grid-template-columns:1fr}.avatar-editor{grid-template-columns:1fr;text-align:center}.avatar-editor #profileAvatarPreview{display:flex;justify-content:center}.avatar-editor .button-row{justify-content:center}}