:root{--bg: #0f1117;--bg-soft: #161922;--card: #1b1f2a;--card-hover: #222736;--border: #2a3040;--text: #e7e9ee;--muted: #9aa3b2;--primary: #7c5cff;--primary-600: #6a48f0;--danger: #ff6b6b;--radius: 14px;--font-ui: "Sarabun", system-ui, -apple-system, "Segoe UI", sans-serif;color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;padding:0;-webkit-text-size-adjust:100%;text-size-adjust:100%}html{-webkit-tap-highlight-color:transparent}body{background:var(--bg);color:var(--text);font-family:var(--font-ui);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#80808059;border-radius:8px;border:2px solid transparent;background-clip:padding-box}::-webkit-scrollbar-thumb:hover{background:#8080808c;background-clip:padding-box}html{scrollbar-width:thin;scrollbar-color:rgba(128,128,128,.45) transparent}a{color:inherit;text-decoration:none}code{background:#7c5cff24;color:#c9bdff;padding:1px 6px;border-radius:6px;font-size:.9em}.muted{color:var(--muted)}.small{font-size:.85rem}.center-screen{min-height:100dvh;display:grid;place-items:center;padding:24px}.center-pad{display:grid;place-items:center;gap:16px;padding:48px 16px}.hide-mobile{display:inline}.spinner{width:38px;height:38px;border:3px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.alert{background:#7c5cff1f;border:1px solid rgba(124,92,255,.4);color:#d8ccff;padding:10px 14px;border-radius:10px;font-size:.92rem;line-height:1.5}.alert.error{background:#ff6b6b1f;border-color:#ff6b6b73;color:#ffc2c2}.empty{padding:40px 16px;text-align:center;color:var(--muted);border:1px dashed var(--border);border-radius:var(--radius)}.btn{font-family:inherit;font-size:.95rem;font-weight:500;border:1px solid var(--border);background:var(--card);color:var(--text);padding:9px 16px;border-radius:10px;cursor:pointer;transition:background .15s,border-color .15s,transform .05s}.btn:hover{background:var(--card-hover)}.btn:active{transform:translateY(1px)}.btn:disabled{opacity:.4;cursor:not-allowed}.btn.primary{background:var(--primary);border-color:var(--primary);color:#fff}.btn.primary:hover{background:var(--primary-600)}.btn.ghost{background:transparent}.btn.block{width:100%;display:block}.btn.small{padding:6px 12px;font-size:.88rem}.icon-btn{width:40px;height:40px;display:grid;place-items:center;border-radius:10px;border:1px solid transparent;background:transparent;color:inherit;cursor:pointer;font-size:1.05rem;font-weight:600}.icon-btn:hover{background:#7f7f7f26}.chip{display:inline-flex;align-items:center;gap:4px;font-size:.78rem;padding:3px 9px;border-radius:999px;background:#7c5cff24;color:#c4b6ff;border:1px solid rgba(124,92,255,.25)}.chip.mini{font-size:.7rem;padding:2px 7px}.chips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}.field{display:flex;flex-direction:column;gap:6px}.field span{font-size:.88rem;color:var(--muted)}.field input{font-family:inherit;font-size:1rem;padding:11px 13px;border-radius:10px;border:1px solid var(--border);background:var(--bg-soft);color:var(--text)}.field input:focus{outline:none;border-color:var(--primary)}.checkbox-row{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:.92rem;color:var(--muted);-webkit-user-select:none;user-select:none}.checkbox-row input[type=checkbox]{width:18px;height:18px;accent-color:var(--primary);cursor:pointer}.login-bg{background:radial-gradient(1200px 600px at 50% -10%,#1c2030,var(--bg))}.login-card{width:100%;max-width:380px;background:var(--card);border:1px solid var(--border);border-radius:18px;padding:30px 26px;display:flex;flex-direction:column;gap:16px;box-shadow:0 24px 60px #00000073}.login-brand{text-align:center;margin-bottom:6px}.login-brand h1{margin:8px 0 2px;font-size:1.5rem;letter-spacing:.3px}.login-logo{font-size:2rem}.app-page{min-height:100dvh}.topbar{position:sticky;top:0;z-index:20;background:#0f1117d9;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}.topbar-inner{max-width:1040px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px}.brand{display:flex;align-items:center;gap:8px;font-size:1.05rem}.brand .login-logo{font-size:1.3rem}.small-brand{font-size:.95rem;opacity:.85}.topbar-actions{display:flex;align-items:center;gap:10px}.container{max-width:1040px;margin:0 auto;padding:22px 16px 80px}.page-title{font-size:1.25rem;margin:6px 0 18px}.novel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}.novel-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:border-color .15s,transform .15s}.novel-card:hover{border-color:var(--primary);transform:translateY(-2px)}.cover{aspect-ratio:3 / 2;background:linear-gradient(135deg,#2b2350,#3a2d6b);background-size:cover;background-position:center;display:grid;place-items:center}.cover-initial{font-size:3rem;font-weight:700;color:#ffffffd9}.cover.big{aspect-ratio:3 / 4;width:180px;border-radius:12px}.novel-body{padding:14px;display:flex;flex-direction:column;gap:6px}.novel-title{font-size:1.05rem;font-weight:600;line-height:1.35}.novel-title:hover{color:var(--primary)}.novel-actions{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}.novel-hero{display:flex;gap:22px;align-items:flex-start;margin-bottom:30px}.novel-hero-info h1{margin:0 0 4px;font-size:1.7rem}.desc{color:var(--muted);line-height:1.7;margin:12px 0 16px;max-width:60ch}.volume-title{font-size:1rem;color:var(--primary);margin:22px 0 8px;padding-left:4px}.chapter-list{list-style:none;margin:0;padding:0;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}.chapter-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--border);transition:background .12s}.chapter-list li:last-child .chapter-row{border-bottom:none}.chapter-row:hover{background:var(--card-hover)}.chapter-row.current{background:#7c5cff1f}.ch-num{min-width:34px;text-align:center;color:var(--muted);font-variant-numeric:tabular-nums}.ch-title{flex:1}.ch-count{white-space:nowrap}.reader-root{min-height:100dvh;background:var(--reader-bg);color:var(--reader-fg)}.reader-progress{position:fixed;top:0;left:0;height:3px;background:var(--primary);z-index:60;transition:width .1s linear}.reader-bar{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--reader-bg) 88%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--reader-surface)}.reader-bar-inner{max-width:var(--reader-width);margin:0 auto;padding:6px 12px;display:flex;align-items:center;gap:10px}.reader-bar .icon-btn{color:var(--reader-fg)}.reader-bar .icon-btn:hover{background:var(--reader-surface)}.reader-bar-title{flex:1;min-width:0;text-align:center;line-height:1.2}.rb-novel{font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rb-ch{font-size:.75rem;color:var(--reader-muted)}.reader-bar-actions{display:flex;gap:4px}.reader-content{max-width:var(--reader-width);margin:0 auto;padding:30px 22px 120px}.reader-volume{text-align:center;color:var(--reader-muted);font-size:.95rem;margin-bottom:8px}.reader-title{text-align:center;font-family:var(--reader-font);font-size:calc(var(--reader-fontsize) * 1.4);line-height:1.4;margin:0 0 28px;padding-bottom:20px;border-bottom:1px solid var(--reader-surface)}.reader-text{font-family:var(--reader-font);font-size:var(--reader-fontsize);line-height:var(--reader-lineheight);letter-spacing:var(--reader-letterspacing)}.reader-text p{margin:0 0 var(--reader-paraspacing);text-align:justify;text-justify:inter-character;word-break:break-word}.reader-text strong,.reader-text b{font-weight:700;color:var(--reader-fg)}.reader-text em,.reader-text i{font-style:italic}.reader-text del{opacity:.6}.reader-text h2,.reader-text h3,.reader-text h4{font-family:var(--reader-font);line-height:1.4;margin:calc(var(--reader-paraspacing) * 1.5) 0 var(--reader-paraspacing)}.reader-text h2{font-size:calc(var(--reader-fontsize) * 1.25)}.reader-text h3{font-size:calc(var(--reader-fontsize) * 1.12)}.reader-text blockquote{margin:var(--reader-paraspacing) 0;padding:2px 0 2px 1em;border-left:3px solid var(--reader-surface);color:var(--reader-muted);font-style:italic}.reader-text ul,.reader-text ol{margin:0 0 var(--reader-paraspacing);padding-left:1.6em}.reader-text li{margin-bottom:.3em}.reader-text a{color:var(--primary);text-decoration:underline}.reader-text img{max-width:100%;height:auto;border-radius:8px;margin:var(--reader-paraspacing) auto;display:block}.reader-text code{background:var(--reader-surface);color:inherit}.reader-text hr{border:none;height:auto;overflow:visible;text-align:center;margin:calc(var(--reader-paraspacing) * 1.7) 0}.reader-text hr:before{content:"❖ ❖ ❖";color:var(--reader-muted);font-size:.78em;letter-spacing:.5em}.reader-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:48px;padding-top:22px;border-top:1px solid var(--reader-surface)}.reader-root .btn{background:var(--reader-surface);border-color:color-mix(in srgb,var(--reader-fg) 18%,transparent);color:var(--reader-fg)}.reader-root .btn:hover:not(:disabled){background:color-mix(in srgb,var(--reader-fg) 12%,var(--reader-surface))}.reader-root .btn.ghost{background:transparent}.reader-root .btn.nav{border-color:transparent}.reader-root .btn.primary,.reader-root .btn.nav.primary{background:var(--primary);border-color:var(--primary);color:#fff}.reader-root .btn.primary:hover:not(:disabled),.reader-root .btn.nav.primary:hover:not(:disabled){background:var(--primary-600)}.panel-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000073;opacity:0;pointer-events:none;transition:opacity .2s;z-index:70}.panel-backdrop.show{opacity:1;pointer-events:auto}.settings-panel,.toc-drawer{position:fixed;top:0;right:0;height:100dvh;width:min(380px,90vw);background:var(--card);border-left:1px solid var(--border);z-index:80;transform:translate(100%);transition:transform .25s ease;display:flex;flex-direction:column;box-shadow:-20px 0 50px #0006}.settings-panel.open,.toc-drawer.open{transform:translate(0)}.panel-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--border)}.panel-head h3{margin:0;font-size:1.05rem}.panel-scroll{overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:20px}.ctrl{display:flex;flex-direction:column;gap:10px}.ctrl>label{font-size:.85rem;color:var(--muted);font-weight:600}.stepper{display:flex;align-items:center;justify-content:space-between;background:var(--bg-soft);border:1px solid var(--border);border-radius:10px;padding:4px}.stepper button{min-width:52px;padding:8px 10px;border:none;background:var(--card-hover);color:var(--text);border-radius:8px;cursor:pointer;font-weight:600;font-family:inherit}.stepper button:hover{background:var(--primary)}.stepper .val{font-variant-numeric:tabular-nums;font-weight:600}.seg{display:flex;gap:6px}.seg button{flex:1;padding:9px;border:1px solid var(--border);background:var(--bg-soft);color:var(--text);border-radius:9px;cursor:pointer;font-family:inherit}.seg button.active{background:var(--primary);border-color:var(--primary);color:#fff}.font-options{display:flex;flex-direction:column;gap:8px}.font-opt{text-align:left;padding:10px 12px;border:1px solid var(--border);background:var(--bg-soft);color:var(--text);border-radius:10px;cursor:pointer;display:flex;flex-direction:column;gap:2px}.font-opt.active{border-color:var(--primary);background:#7c5cff1f}.font-sample{font-size:1.05rem;color:var(--muted)}.font-sarabun{font-family:Sarabun,sans-serif}.font-noto-sans{font-family:Noto Sans Thai,sans-serif}.font-noto-serif{font-family:"Noto Serif Thai",serif}.theme-swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.swatch{aspect-ratio:1;border:2px solid;border-radius:10px;cursor:pointer;font-size:1.1rem;font-weight:700;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;position:relative}.swatch.active{outline:2px solid var(--primary);outline-offset:2px}.swatch-label{font-size:.6rem;font-weight:500;opacity:.8}.color-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.color-field{display:flex;align-items:center;gap:8px;font-size:.85rem;color:var(--muted)}.color-field input[type=color]{width:42px;height:32px;border:1px solid var(--border);border-radius:8px;background:none;cursor:pointer;padding:2px}.drawer-list{list-style:none;margin:0;padding:8px;overflow-y:auto}.drawer-list a{display:flex;gap:10px;padding:11px 12px;border-radius:9px}.drawer-list a:hover{background:var(--card-hover)}.drawer-list a.current{background:#7c5cff29;color:#c9bdff}.topbar-inner,.reader-bar-inner{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}.reader-bar-inner{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}@media (max-width: 900px){.novel-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}.container{padding:18px 16px 80px}.novel-hero{gap:18px}}@media (max-width: 640px){.hide-mobile{display:none}.novel-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}.cover-initial{font-size:2.2rem}.novel-title{font-size:.98rem}.novel-actions{flex-direction:column}.novel-actions .btn{width:100%;text-align:center}.novel-hero{flex-direction:column;align-items:center;text-align:center}.novel-hero-info{text-align:center;width:100%}.novel-hero-info h1{font-size:1.4rem}.chips{justify-content:center}.desc{text-align:left}.cover.big{width:140px}.page-title{font-size:1.12rem}.reader-content{padding:22px 18px 120px}.reader-text p{text-align:left}.reader-nav{flex-wrap:wrap;gap:8px}.reader-nav .btn.nav{flex:1 1 42%}.reader-nav .btn.ghost{order:3;flex:1 1 100%;text-align:center}.settings-panel,.toc-drawer{width:100vw;border-left:none}.login-card{padding:26px 20px}}@media (max-width: 380px){.novel-grid{grid-template-columns:1fr 1fr}.theme-swatches{grid-template-columns:repeat(3,1fr)}}@media (hover: none) and (pointer: coarse){.chapter-row,.drawer-list a{padding-top:14px;padding-bottom:14px}}