*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#0d1117;--bg-surface:#161b22;--bg-elevated:#1c2128;--bg-hover:#21262d;--border:#30363d;--text:#c9d1d9;--text-muted:#8b949e;--text-bright:#f0f6fc;--accent:#58a6ff;--accent-hover:#79b8ff;--success:#3fb950;--danger:#f85149;--warning:#d29922;--font-sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;--font-mono:"SF Mono", "Fira Code", monospace;--radius:6px;--radius-lg:10px}html,body,#root{height:100%}body{background:var(--bg);color:var(--text);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;font-size:15px;line-height:1.6}a{color:var(--accent);text-decoration:none}a:hover{color:var(--accent-hover)}.app{flex-direction:column;min-height:100vh;display:flex}.loading{text-align:center;color:var(--text-muted);padding:2rem}.top-nav{background:var(--bg-surface);border-bottom:1px solid var(--border);align-items:center;gap:1.5rem;height:56px;padding:0 1.5rem;display:flex}.nav-brand{color:var(--text-bright);letter-spacing:-.02em;font-size:1.25rem;font-weight:700}.nav-links{flex:1;gap:1rem;display:flex}.nav-links a{color:var(--text-muted);font-size:.875rem}.nav-links a:hover{color:var(--text)}.nav-user{align-items:center;gap:.75rem;display:flex}.nickname{color:var(--text-muted);font-size:.875rem}.btn-logout{border:1px solid var(--border);color:var(--text-muted);border-radius:var(--radius);cursor:pointer;background:0 0;padding:4px 12px;font-size:.8125rem}.btn-logout:hover{border-color:var(--text-muted);color:var(--text)}button,.btn{cursor:pointer;border:1px solid var(--border);background:var(--bg-elevated);color:var(--text);border-radius:var(--radius);padding:8px 16px;font-family:inherit;font-size:.875rem;transition:background .15s,border-color .15s}button:hover,.btn:hover{background:var(--bg-hover);border-color:var(--text-muted)}button:disabled{opacity:.5;cursor:not-allowed}button.primary,.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}button.primary:hover{background:var(--accent-hover)}button.success,.btn.success{color:#fff;background:#238636;border-color:#238636}button.success:hover{background:#2ea043}button.danger,.btn.danger{border-color:var(--danger);color:var(--danger);background:0 0}button.danger:hover{background:#f851491a}button.small,.btn.small{padding:4px 10px;font-size:.8125rem}input[type=text],input[type=password]{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);width:100%;color:var(--text-bright);outline:none;padding:10px 12px;font-family:inherit;font-size:.9375rem;transition:border-color .15s}input:focus{border-color:var(--accent)}input::placeholder{color:var(--text-muted)}.badge{text-transform:uppercase;letter-spacing:.04em;border-radius:12px;padding:2px 8px;font-size:.75rem;font-weight:600;display:inline-block}.badge.draft{color:var(--warning);background:#d2992226}.badge.published{color:var(--success);background:#3fb95026}.badge.deleted{color:var(--danger);background:#f8514926}.edition{color:var(--text-muted);font-size:.8125rem}.error{color:var(--danger);border-radius:var(--radius);background:#f851491a;border:1px solid #f851494d;margin:.5rem 0;padding:10px 14px;font-size:.875rem}.flash{color:var(--accent);border-radius:var(--radius);background:#58a6ff1a;border:1px solid #58a6ff4d;margin:.5rem 0;padding:8px 14px;font-size:.875rem}.empty-state{text-align:center;color:var(--text-muted);padding:3rem}.empty-state button{margin-top:1rem}.login-page{justify-content:center;align-items:center;min-height:100vh;display:flex}.login-card{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-lg);width:100%;max-width:380px;padding:2.5rem}.login-card h1{color:var(--text-bright);margin-bottom:.25rem;font-size:1.75rem}.login-card .subtitle{color:var(--text-muted);margin-bottom:1.5rem;font-size:.875rem}.login-card form{flex-direction:column;gap:.75rem;display:flex}.login-card form button{margin-top:.5rem}.quick-login{border-top:1px solid var(--border);margin-top:1.5rem;padding-top:1.5rem}.quick-login p{color:var(--text-muted);margin-bottom:.5rem;font-size:.8125rem}.quick-buttons{gap:.5rem;display:flex}.quick-buttons button{flex:1}.dashboard{width:100%;max-width:1000px;margin:0 auto;padding:1.5rem}.dashboard-header{justify-content:space-between;align-items:center;margin-bottom:1.5rem;display:flex}.dashboard-header h1{color:var(--text-bright);font-size:1.5rem}.dashboard-header .subtitle{color:var(--text-muted);font-size:.875rem}.story-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem;display:grid}.story-card{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.25rem;transition:border-color .15s}.story-card:hover{border-color:var(--text-muted)}.story-card-header{justify-content:space-between;align-items:center;margin-bottom:.5rem;display:flex}.story-card h3{margin-bottom:.375rem}.story-card h3 a{color:var(--text-bright)}.story-card h3 a:hover{color:var(--accent)}.story-card .meta{color:var(--text-muted);margin-bottom:.75rem;font-size:.8125rem}.story-card-actions{flex-wrap:wrap;gap:.5rem;display:flex}.editor-page{width:100%;max-width:1200px;margin:0 auto;padding:1.5rem}.editor-header{margin-bottom:1rem}.title-row{align-items:center;gap:.75rem;margin-bottom:.75rem;display:flex}.title-input{color:var(--text-bright);border-radius:var(--radius);background:0 0;border:1px solid #0000;flex:1;padding:6px 8px;font-size:1.5rem;font-weight:700}.title-input:hover{border-color:var(--border)}.title-input:focus{border-color:var(--accent);outline:none}.chapter-title-input{color:var(--text-bright);border-radius:var(--radius);background:0 0;border:1px solid #0000;width:100%;margin-bottom:.75rem;padding:6px 8px;font-size:1.125rem;font-weight:600}.chapter-title-input:hover{border-color:var(--border)}.chapter-title-input:focus{border-color:var(--accent);outline:none}.editor-toolbar{gap:.5rem;display:flex}.editor-actions{gap:.5rem;margin-top:1rem;display:flex}.hint{color:var(--text-muted);margin-bottom:.75rem;font-size:.875rem}.inline-form{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius);align-items:center;gap:.5rem;margin-bottom:1rem;padding:.75rem;display:flex}.inline-form input{flex:1}.editor-layout{gap:1rem;min-height:500px;display:flex}.chapter-sidebar{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-lg);flex-shrink:0;width:240px;padding:1rem}.sidebar-header{justify-content:space-between;align-items:center;margin-bottom:.75rem;display:flex}.sidebar-header h3{color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;font-size:.875rem}.chapter-list{list-style:none}.chapter-list li{border-radius:var(--radius);cursor:pointer;color:var(--text);justify-content:space-between;align-items:center;padding:8px 10px;font-size:.875rem;transition:background .1s;display:flex}.chapter-list li:hover{background:var(--bg-hover)}.chapter-list li.active{color:var(--accent);background:#58a6ff1a}.ch-title{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}.ch-delete{color:var(--text-muted);opacity:0;background:0 0;border:none;padding:0 4px;font-size:1rem;transition:opacity .15s}.chapter-list li:hover .ch-delete{opacity:1}.ch-delete:hover{color:var(--danger)}.new-chapter-form{border-top:1px solid var(--border);flex-direction:column;gap:.5rem;margin-top:.75rem;padding-top:.75rem;display:flex}.form-actions{gap:.5rem;display:flex}.editor-main{flex:1;min-width:0}.tiptap-editor{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}.toolbar{border-bottom:1px solid var(--border);background:var(--bg-elevated);flex-wrap:wrap;align-items:center;gap:2px;padding:6px 8px;display:flex}.toolbar-group{align-items:center;gap:1px;display:flex}.toolbar button{color:var(--text-muted);background:0 0;border:1px solid #0000;border-radius:4px;min-width:26px;padding:4px 7px;font-size:.8125rem;font-weight:600;line-height:1.2}.toolbar button:hover{background:var(--bg-hover);color:var(--text)}.toolbar button.active{color:var(--accent);background:#58a6ff26;border-color:#58a6ff4d}.toolbar button sup,.toolbar button sub{font-size:.6em}.toolbar .highlight-icon{background:#d299224d;border-radius:2px;padding:0 3px}.toolbar .small-btn{min-width:18px;padding:2px 5px;font-size:.7rem}.color-picker{cursor:pointer;align-items:center;display:flex;position:relative}.color-picker .color-label{color:var(--text-muted);border-bottom:3px solid;padding:2px 4px;font-size:.875rem;font-weight:700}.color-picker input[type=color]{opacity:0;cursor:pointer;border:none;width:100%;height:100%;padding:0;position:absolute}.editor-footer{border-top:1px solid var(--border);background:var(--bg-elevated);color:var(--text-muted);justify-content:flex-end;gap:1rem;padding:6px 12px;font-size:.75rem;display:flex}.toolbar .separator{background:var(--border);width:1px;margin:0 4px}.tiptap-editor .tiptap{min-height:300px;color:var(--text);outline:none;padding:1rem 1.25rem;font-size:1rem;line-height:1.7}.tiptap-editor .tiptap p{margin-bottom:.75rem}.tiptap-editor .tiptap p.is-editor-empty:first-child:before{content:attr(data-placeholder);float:left;color:var(--text-muted);pointer-events:none;opacity:.5;height:0}.tiptap-editor .tiptap h1{color:var(--text-bright);margin:1.75rem 0 .75rem;font-size:1.75rem}.tiptap-editor .tiptap h2{color:var(--text-bright);margin:1.5rem 0 .75rem;font-size:1.375rem}.tiptap-editor .tiptap h3{color:var(--text-bright);margin:1.25rem 0 .5rem;font-size:1.125rem}.tiptap-editor .tiptap blockquote{border-left:3px solid var(--accent);color:var(--text-muted);margin:1rem 0;padding-left:1rem;font-style:italic}.tiptap-editor .tiptap ul,.tiptap-editor .tiptap ol{margin-bottom:.75rem;padding-left:1.5rem}.tiptap-editor .tiptap mark{background:#d299224d;border-radius:2px;padding:1px 3px}.tiptap-editor .tiptap hr{border:none;border-top:1px solid var(--border);margin:1.5rem 0}.tiptap-editor .tiptap pre{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);font-family:var(--font-mono);margin:.75rem 0;padding:.75rem 1rem;font-size:.875rem;overflow-x:auto}.tiptap-editor .tiptap code{background:var(--bg);font-family:var(--font-mono);border-radius:3px;padding:2px 5px;font-size:.875em}.tiptap-renderer .tiptap{color:var(--text);font-size:1.0625rem;line-height:1.8}.tiptap-renderer .tiptap p{margin-bottom:1rem}.tiptap-renderer .tiptap h1{color:var(--text-bright);margin:2.5rem 0 1rem;font-size:1.75rem}.tiptap-renderer .tiptap h2{color:var(--text-bright);margin:2rem 0 .75rem;font-size:1.5rem}.tiptap-renderer .tiptap h3{color:var(--text-bright);margin:1.5rem 0 .5rem;font-size:1.25rem}.tiptap-renderer .tiptap blockquote{border-left:3px solid var(--accent);color:var(--text-muted);margin:1.25rem 0;padding-left:1.25rem;font-style:italic}.tiptap-renderer .tiptap mark{background:#d299224d;border-radius:2px;padding:1px 3px}.tiptap-renderer .tiptap hr{border:none;border-top:1px solid var(--border);margin:2rem 0}.tiptap-renderer .tiptap pre{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);font-family:var(--font-mono);margin:1rem 0;padding:1rem 1.25rem;font-size:.875rem}.tiptap-renderer .tiptap code{background:var(--bg);font-family:var(--font-mono);border-radius:3px;padding:2px 5px;font-size:.875em}.tiptap-renderer .tiptap ul,.tiptap-renderer .tiptap ol{margin-bottom:1rem;padding-left:1.5rem}.empty-content{color:var(--text-muted);font-style:italic}.reader-page{width:100%;max-width:1000px;margin:0 auto;padding:1.5rem}.reader-header{border-bottom:1px solid var(--border);align-items:center;gap:1rem;margin-bottom:1.5rem;padding-bottom:1rem;display:flex}.reader-header button{flex-shrink:0}.reader-info{flex:1}.reader-info h1{color:var(--text-bright);font-size:1.25rem}.reader-info .author{color:var(--text-muted);font-size:.875rem}.progress-bar-container{background:var(--bg-elevated);border:1px solid var(--border);border-radius:10px;flex-shrink:0;width:120px;height:20px;position:relative;overflow:hidden}.progress-bar{background:var(--success);border-radius:10px;height:100%;transition:width .3s}.progress-text{color:var(--text-bright);font-size:.6875rem;font-weight:600;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.reader-layout{gap:1.5rem;display:flex}.chapter-nav{flex-shrink:0;width:200px}.chapter-nav h3{color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.75rem;font-size:.8125rem}.chapter-nav ul{list-style:none}.chapter-nav li{border-radius:var(--radius);cursor:pointer;color:var(--text);padding:8px 10px;font-size:.875rem;transition:background .1s}.chapter-nav li:hover{background:var(--bg-hover)}.chapter-nav li.active{color:var(--accent);background:#58a6ff1a}.reader-content{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-lg);flex:1;min-width:0;padding:2rem 2.5rem}.chapter-heading{color:var(--text-bright);border-bottom:1px solid var(--border);margin-bottom:1.5rem;padding-bottom:1rem;font-size:1.5rem}.chapter-navigation{border-top:1px solid var(--border);justify-content:space-between;align-items:center;margin-top:2rem;padding-top:1.5rem;display:flex}@media (width<=768px){.editor-layout,.reader-layout{flex-direction:column}.chapter-sidebar,.chapter-nav{width:100%}.reader-content{padding:1.25rem}.login-card{margin:1rem}}