:root{
  --bg:#fff8ef;--card:#ffffff;--ink:#2b2621;--muted:#72695f;--accent:#8e6bd8;--accent2:#ffb86b;--soft:#f5ecff;--border:#eadfce;--success:#6ab57a;--warning:#f6a34a;--shadow:0 14px 40px rgba(54,37,18,.12);
}
[data-theme="night"]{
  --bg:#131725;--card:#1c2132;--ink:#fdf4e6;--muted:#c8c1b4;--accent:#c8a8ff;--accent2:#ffd28a;--soft:#2b2440;--border:#363347;--success:#7dcc8d;--warning:#ffbb66;--shadow:0 16px 46px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:ui-rounded,"Trebuchet MS",Arial,sans-serif;background:radial-gradient(circle at top left,var(--soft),transparent 32rem),var(--bg);color:var(--ink);line-height:1.65}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
button,input,select{font:inherit}
.container{max-width:1120px;margin:0 auto;padding:0 1rem}
.topbar{position:sticky;top:0;z-index:30;backdrop-filter:blur(12px);background:color-mix(in srgb,var(--bg) 82%, transparent);border-bottom:1px solid color-mix(in srgb,var(--border) 75%, transparent)}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.85rem 0}
.brand{display:flex;align-items:center;gap:.8rem;font-weight:800}
.brand-badge{width:2.6rem;height:2.6rem;border-radius:50%;background:linear-gradient(145deg,#d6d6da,#fff);display:grid;place-items:center;box-shadow:var(--shadow);font-size:1.15rem}
.top-actions{display:flex;gap:.65rem;align-items:center}
.nav-btn,.chip,.pill-btn,.icon-btn{border:1px solid var(--border);background:var(--card);color:var(--ink);border-radius:999px;padding:.65rem 1rem;cursor:pointer}
.icon-btn{padding:.65rem .85rem}
.hero{padding:1.5rem 0 1rem}
.hero-card{background:linear-gradient(135deg, rgba(142,107,216,.18), rgba(255,184,107,.16));border:1px solid var(--border);border-radius:2rem;padding:1.4rem;box-shadow:var(--shadow)}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:1.25rem;align-items:center}
.eyebrow{text-transform:uppercase;letter-spacing:.12em;color:var(--accent);font-size:.8rem;font-weight:800;margin:0 0 .55rem}
h1{font-size:clamp(2.3rem,8vw,4.8rem);line-height:.98;margin:.1rem 0 .8rem}
.hero-copy{font-size:1.08rem;color:var(--muted);max-width:60ch}
.hero-actions{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.2rem}
.primary{background:var(--accent);border-color:transparent;color:white;font-weight:800}
.secondary{background:var(--card)}
.progress-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem}
.progress-card{background:var(--card);border:1px solid var(--border);border-radius:1.35rem;padding:1rem;box-shadow:0 8px 24px rgba(54,37,18,.08)}
.progress-card strong{display:block;font-size:1.7rem;line-height:1}
.progress-card span{display:block;color:var(--muted);margin-top:.35rem}
.continue-box{grid-column:1/-1;background:linear-gradient(135deg, rgba(255,255,255,.8), rgba(255,255,255,.55));}
.section{padding:1rem 0 2.2rem}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:1rem;margin-bottom:1rem;flex-wrap:wrap}
.section-head p{margin:.35rem 0 0;color:var(--muted)}
.tools{display:flex;gap:.7rem;flex-wrap:wrap}
input,select{background:var(--card);color:var(--ink);border:1px solid var(--border);border-radius:999px;padding:.8rem 1rem;min-width:200px}
.story-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.story-card{background:var(--card);border:1px solid var(--border);border-radius:1.45rem;overflow:hidden;box-shadow:0 12px 28px rgba(54,37,18,.08);display:flex;flex-direction:column}
.cover-wrap{position:relative;background:#f0e5ff}
.cover-wrap img{width:100%;aspect-ratio:2/3;object-fit:cover}
.cover-status{position:absolute;top:.7rem;left:.7rem;right:.7rem;display:flex;justify-content:space-between;gap:.5rem;pointer-events:none}
.cover-status .tag{pointer-events:auto}
.tag{display:inline-flex;align-items:center;gap:.35rem;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-radius:999px;padding:.34rem .62rem;font-size:.76rem;font-weight:800;color:var(--ink);border:1px solid rgba(255,255,255,.75)}
.tag.success{color:#255e32}.tag.warn{color:#8b5300}
.story-body{display:flex;flex-direction:column;gap:.8rem;padding:1rem}
.story-body h3{margin:0;font-size:1.2rem;line-height:1.15}
.story-body p{margin:0;color:var(--muted)}
.meta{display:flex;flex-wrap:wrap;gap:.5rem}.meta .pill{background:var(--soft);color:var(--accent);border-radius:999px;padding:.24rem .62rem;font-size:.78rem;font-weight:800}
.card-actions{margin-top:auto;display:grid;grid-template-columns:1fr 1fr;gap:.55rem}
.small-btn{border-radius:1rem;padding:.72rem .8rem;border:1px solid var(--border);background:var(--card);cursor:pointer;font-weight:700;text-align:center}
.small-btn.primary{color:#fff}
.story-layout{padding:1rem 0 2rem}
.story-shell{display:grid;grid-template-columns:320px minmax(0,1fr);gap:1.15rem;align-items:start}
.story-sidebar{position:sticky;top:5.5rem;display:flex;flex-direction:column;gap:1rem}
.cover-panel,.tools-panel,.mini-nav,.note-card{background:var(--card);border:1px solid var(--border);border-radius:1.5rem;overflow:hidden;box-shadow:var(--shadow)}
.cover-panel img{width:100%;aspect-ratio:2/3;object-fit:cover}
.cover-content{padding:1rem}.cover-content h1{font-size:2rem;margin:0 0 .45rem;line-height:1.03}.cover-content p{color:var(--muted);margin:.35rem 0 0}
.tools-panel{padding:1rem}
.tool-stack{display:flex;flex-direction:column;gap:.7rem}
.full-btn{width:100%;border-radius:1rem;padding:.9rem 1rem;border:1px solid var(--border);background:var(--card);cursor:pointer;font-weight:800;text-align:center}
.full-btn.primary{background:var(--accent);color:#fff;border-color:transparent}
.full-btn.secondary{background:var(--soft)}
.status-line{font-size:.95rem;color:var(--muted);margin-top:.2rem}
.story-main{display:flex;flex-direction:column;gap:1rem}
.front-highlight{background:linear-gradient(135deg, rgba(142,107,216,.14), rgba(255,184,107,.14));border:1px solid var(--border);border-radius:1.5rem;padding:1rem 1.1rem;box-shadow:var(--shadow)}
.front-highlight h2{font-size:1.45rem;margin:.1rem 0 .4rem}
.front-highlight p{margin:.2rem 0;color:var(--muted)}
.badge-row{display:flex;gap:.55rem;flex-wrap:wrap;margin-top:.8rem}
.badge{display:inline-flex;background:var(--card);border:1px solid var(--border);border-radius:999px;padding:.42rem .75rem;font-size:.83rem;font-weight:800}
.story-page{background:var(--card);border:1px solid var(--border);border-radius:1.5rem;padding:1.1rem 1rem;box-shadow:0 12px 28px rgba(54,37,18,.07);scroll-margin-top:5.6rem}
.story-page.current{outline:2px solid color-mix(in srgb,var(--accent) 55%, transparent)}
.page-head{display:flex;justify-content:space-between;gap:.8rem;align-items:center;margin-bottom:.75rem;flex-wrap:wrap}
.page-num{font-weight:900;color:var(--accent);font-size:1rem}
.bookmark-btn{border:1px solid var(--border);background:var(--soft);color:var(--ink);border-radius:999px;padding:.55rem .85rem;cursor:pointer;font-weight:800}
.bookmark-btn.active{background:var(--accent);color:#fff;border-color:transparent}
.story-page p{font-size:1.05rem;line-height:1.85;margin:0}
.note-card{padding:1rem;color:var(--muted)}
.mini-nav{padding:1rem;display:flex;flex-direction:column;gap:.7rem}
.footer{padding:2rem 0 3rem;color:var(--muted);text-align:center}
@media (max-width:980px){.hero-grid,.story-shell{grid-template-columns:1fr}.story-sidebar{position:static}.story-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){h1{font-size:2.5rem}.progress-grid,.story-grid{grid-template-columns:1fr}.topbar-inner{padding:.7rem 0}.top-actions{gap:.45rem}.nav-btn,.chip,.pill-btn,.icon-btn,input,select{padding:.72rem .95rem}.hero-card{padding:1rem}.progress-card strong{font-size:1.45rem}.card-actions{grid-template-columns:1fr}.story-page{padding:1rem .9rem}.story-page p{font-size:1.03rem;line-height:1.84}.cover-content h1{font-size:1.8rem}}