:root { --bg:#0b0c10; --panel:#14161d; --ink:#f2f2f5; --muted:#a8abb8; --accent:#6a4bb3; --line:#ffffff1c; font-size:22px; }
* { box-sizing:border-box; }
html,body { margin:0; height:100%; background:var(--bg); color:var(--ink); font:1rem/1.5 "Noto Sans",system-ui,sans-serif; }
button,select { font:inherit; color:var(--ink); background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:.5em .9em; min-height:2.4em; cursor:pointer; }
button:hover,select:hover { border-color:var(--accent); background:#1b1e29; }
button[aria-pressed="true"] { background:var(--accent); }
button:disabled { opacity:.4; cursor:default; }

/* Hub */
.hub { max-width:720px; margin:0 auto; padding:1.2rem; }
.hub h1 { margin:.2em 0 0; font-size:1.6rem; }
.hub .sub { color:var(--muted); margin:0 0 1rem; }
.stats { display:flex; gap:1rem; margin:0 0 1rem; }
.stat { flex:1; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:.6rem .9rem; }
.stat b { display:block; font-size:1.5rem; }
.stat span { color:var(--muted); font-size:.8rem; }
.tools { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:.8rem; }
.tool { text-align:left; padding:.9rem 1rem; border-radius:16px; }
.tool b { display:block; } .tool small { color:var(--muted); }
.note { color:var(--muted); font-size:.8rem; margin-top:1.2rem; }

/* Writing */
.writing { display:flex; flex-direction:column; height:100%; }
.bar { display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; padding:.5rem .7rem; background:var(--panel); border-bottom:1px solid var(--line); }
.bar .grow { flex:1; }
.bar .count { color:var(--muted); font-size:.85rem; }
#page-wrap { flex:1; overflow:auto; padding:1.2rem 0 4rem; }
#editor { max-width:46em; margin:0 auto; padding:2.2em 2.6em; min-height:100%; background:#f6f3ea; color:#1b1b1f;
  font:1em/1.7 Georgia,"Noto Serif",serif; outline:none; border-radius:6px; box-shadow:0 8px 40px #0008; }
#editor p { margin:0; min-height:1.7em; white-space:pre-wrap; text-indent:1.5em; }
#editor p:first-child, #editor p.chapter + p, #editor p.sceneBreak + p, #editor p.heading1 + p, #editor p.heading2 + p { text-indent:0; }
#editor p.chapter { text-align:center; font-size:1.6em; font-weight:bold; text-indent:0; margin:1.2em 0 .8em; }
#editor p.heading1 { font-size:1.4em; font-weight:bold; text-indent:0; margin:1em 0 .4em; }
#editor p.heading2 { font-size:1.15em; font-weight:bold; text-indent:0; margin:.8em 0 .3em; }
#editor p.sceneBreak { text-align:center; text-indent:0; letter-spacing:.4em; margin:.6em 0; color:#555; }
#editor p.quote { margin-left:2em; font-style:italic; }
#editor p[data-align="center"] { text-align:center; } #editor p[data-align="right"] { text-align:right; } #editor p[data-align="justify"] { text-align:justify; }
#editor .note { background:#ffe98a; border-radius:3px; }