.container{min-height:100vh;display:flex}.sidebar-nav{background:var(--card);width:20%;padding:30px;box-shadow:2px 0 15px #00000014}.sidebar-nav h2{margin-bottom:40px}.sidebar-nav button{cursor:pointer;background:var(--input-bg);height:40px;color:var(--input-text);border:none;border-radius:8px}.main{flex:1;padding:40px}.top{align-items:center;gap:12px;margin-bottom:30px;display:flex}.top input{background:var(--input-bg);min-width:0;color:var(--input-text);border:none;border-radius:12px;flex:1;padding:12px}.top select{cursor:pointer;background:var(--input-bg);width:fit-content;min-width:80px;height:40px;color:var(--input-text);border:none;border-radius:12px;padding:0 14px}.create-row{gap:10px;margin-bottom:30px;display:flex}.create-row input{background:var(--input-bg);color:var(--input-text);border:none;border-radius:12px;flex:1;padding:14px}.create-row button{cursor:pointer;background:var(--input-bg);width:60px;color:var(--input-text);border:none;border-radius:12px}.grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:25px;display:grid}.card{background:var(--card);cursor:pointer;border-radius:25px;padding:25px;transition:all .3s;box-shadow:0 4px 20px #00000014}.card:hover{transform:translateY(-4px)}.card-top{justify-content:space-between;align-items:center;margin-bottom:20px;font-size:35px;display:flex}.actions{gap:8px;display:flex}.actions button{cursor:pointer;border:none;border-radius:10px;width:40px;height:40px}.cover{background:#f5f5f5;border-radius:12px;justify-content:center;align-items:center;width:100%;height:140px;margin:10px;font-size:48px;display:flex;overflow:hidden}.cover img{object-fit:cover;border-radius:12px;width:100%;height:140px}body.light{color:#000;--card:#f9f9f9;--input-bg:#f7f7f7;--input-text:#222;background:#fff}body.dark{color:#fff;--card:#2a2a2a;--input-bg:#333;--input-text:#eee;background:#1e1e1e}body.eye{color:#000;--card:#edf4e4;--input-bg:#f6fbf2;--input-text:#2f3a2f;background:#e8f5e9}[data-editor-theme=light]{--editor-bg:#fff;--editor-text:#000}[data-editor-theme=dark]{--editor-bg:#1e1e1e;--editor-text:#fff}[data-editor-theme=eye]{--editor-bg:#e8f5e9;--editor-text:#000}.editor{flex-direction:column;flex:1;height:100%;padding:0 10px;display:flex;overflow:hidden}.editor-header{flex-shrink:0;justify-content:space-between;align-items:center;padding:10px 16px;display:flex}.editor-header h2{margin:0}.editor-header button{cursor:pointer;border:none;border-radius:6px;margin-left:8px;padding:6px 12px}.editor-body{flex:1;padding:12px;display:flex;overflow:hidden}.editor-body textarea{resize:none;box-sizing:border-box;border:none;border-radius:8px;outline:none;flex:1;width:100%;padding:16px;font-size:16px}.editor-footer{flex-shrink:0;height:50px;padding:10px 0}.editor-footer button{cursor:pointer;border:none;border-radius:8px;width:100%;height:100%}body{margin:0}.layout{height:100vh;display:flex}.sidebar{border-right:1px solid #ddd;width:20%;padding:0 20px 10px;overflow:auto}.chapter-create{gap:8px;width:100%;display:flex}.chapter-create input{width:80%}.chapter-create button{width:20%}.history{border-left:1px solid #ddd;width:15%;padding:0 15px;overflow:auto}.editor-area{flex-direction:column;flex:1;display:flex}.topbar{border-bottom:1px solid #ddd;gap:10px;padding:10px;display:flex}.topbar select{cursor:pointer;border:1px solid #ccc;border-radius:6px;margin-left:auto;padding:6px 10px}.chapter-item{cursor:pointer;padding:20px}.chapter-item:hover{background:#f2f2f2}.title-input{border:none;outline:none;margin-bottom:15px;font-size:24px;font-weight:700}.history-item{background:#f7f7f7;margin-bottom:10px;padding:10px}.chapter-card{cursor:pointer;border-radius:8px;justify-content:space-between;align-items:center;margin-bottom:8px;padding:10px;display:flex}.chapter-card:hover{background:#f5f5f5}.chapter-title{font-weight:600}.chapter-actions{gap:6px;display:flex}.layout.light{color:#222;background:#fff}.layout.light .chapter-card,.layout.light .editor-body textarea{color:#222;background:#f9f9f9}.layout.dark{color:#eee;background:#1e1e1e}.layout.dark .chapter-card,.layout.dark .editor-body textarea{color:#eee;background:#2a2a2a}.layout.eye{color:#2f3a2f;background:#e8f5e9}.layout.eye .chapter-card,.layout.eye .editor-body textarea{color:#2f3a2f;background:#edf4e4}.login-wrapper{justify-content:center;align-items:center;min-height:100vh;padding:20px;display:flex}.login-card{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:var(--card-bg);border-radius:24px;flex-direction:column;gap:16px;width:100%;max-width:420px;padding:40px;display:flex;box-shadow:0 10px 30px #00000026}.login-card h1{text-align:center;margin:0;font-size:34px}.sub{text-align:center;opacity:.7;margin-bottom:10px}.login-card input{border:1px solid var(--border-color);background:var(--input-bg);color:var(--text-color);--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;border-radius:12px;outline:none;padding:14px;font-size:15px;transition:all .2s}@media (prefers-color-scheme:dark){.login-card input{--lightningcss-light: ;--lightningcss-dark:initial}}.login-card input:focus{border-color:#4f8cff}.password-input::-ms-reveal{display:none}.password-input::-ms-clear{display:none}.password-wrapper{align-items:center;display:flex;position:relative}.password-wrapper input{background:var(--input-bg);height:25px;color:var(--input-text);border:none;border-radius:12px;flex:1;padding:12px 40px 12px 12px}.password-wrapper .toggle-eye{cursor:pointer;color:var(--input-text);background:0 0;border:none;align-items:center;font-size:18px;display:flex;position:absolute;right:10px}.remember-row{align-items:center;gap:10px;margin-top:-4px;margin-bottom:4px;font-size:14px;display:flex}.remember-row input[type=checkbox]{cursor:pointer;width:16px;height:16px}.remember-row label{cursor:pointer;-webkit-user-select:none;user-select:none}.login-btn,.register-btn{cursor:pointer;border:none;border-radius:12px;padding:14px;font-size:15px;font-weight:600;transition:all .2s}.login-btn{background:var(--input-bg);color:var(--input-text)}.login-btn:hover{transform:translateY(-2px)}.register-btn{background:var(--input-bg);color:var(--text-color);border:1px solid var(--border-color);font-weight:600}.register-btn:hover{filter:brightness(.96);transform:translateY(-2px)}