*,:before,:after{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}svg{flex-shrink:0;display:block}:root{--font-sans:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--font-display:"Outfit", var(--font-sans);--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px);--safe-right:env(safe-area-inset-right,0px);--bg-app:#070913;--bg-surface:#0f1123;--bg-card:#191d3866;--border-color:#ffffff14;--border-focus:#ffffff40;--text-primary:#f3f4f6;--text-secondary:#9ca3af;--text-muted:#6b7280;--accent-primary:#7c3aed;--accent-secondary:#a78bfa;--accent-gradient:linear-gradient(135deg, #7c3aed, #4f46e5);--danger:#ef4444;--success:#10b981;--warning:#f59e0b;--shadow-sm:0 2px 8px #0006;--shadow-md:0 8px 24px #00000080;--shadow-lg:0 16px 40px #0009;--notebook-accent:var(--accent-primary);--notebook-accent-transparent:color-mix(in srgb, var(--notebook-accent) 15%, transparent)}html,body{background-color:var(--bg-app);color:var(--text-primary);font-family:var(--font-sans);width:100%;height:100%;font-size:16px;line-height:1.5;overflow:hidden}#app{width:100%;height:100%;position:relative;overflow:hidden}.page-loader{z-index:1000;background:var(--bg-app);justify-content:center;align-items:center;transition:opacity .25s;display:flex;position:absolute;inset:0}.page-loader.fade-out{opacity:0;pointer-events:none}.page-loader-spinner{border:2px solid #ffffff1a;border-top-color:#ffffff80;border-radius:50%;width:32px;height:32px;animation:.7s linear infinite loaderSpin}@keyframes loaderSpin{to{transform:rotate(360deg)}}.glass{-webkit-backdrop-filter:blur(16px);border:1px solid var(--border-color);background:#0f112399}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:99px}::-webkit-scrollbar-thumb:hover{background:#fff3}.screen{opacity:0;pointer-events:none;background-color:var(--bg-app);flex-direction:column;width:100%;height:100%;transition:opacity .35s cubic-bezier(.25,1,.5,1),transform .35s cubic-bezier(.25,1,.5,1);display:flex;position:absolute;inset:0;transform:translateY(15px)}.screen.active{opacity:1;pointer-events:auto;z-index:10;transform:translate(0,0)}.btn{font-family:var(--font-sans);cursor:pointer;-webkit-user-select:none;user-select:none;border:1px solid #0000;border-radius:12px;outline:none;justify-content:center;align-items:center;gap:8px;padding:12px 20px;font-size:.95rem;font-weight:500;transition:all .2s cubic-bezier(.4,0,.2,1);display:inline-flex}.btn-primary{background:var(--accent-gradient);color:#fff;box-shadow:0 4px 12px #7c3aed4d}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 16px #7c3aed73}.btn-primary:active{transform:translateY(1px)}.btn-secondary{border-color:var(--border-color);color:var(--text-primary);background:#ffffff0a}.btn-secondary:hover{border-color:var(--border-focus);background:#ffffff14}.btn-text{color:var(--text-secondary);background:0 0}.btn-text:hover{color:var(--text-primary);background:#ffffff08}.btn-icon{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;width:38px;height:38px;transition:all .2s;display:inline-flex}.btn-icon:hover{color:var(--text-primary);background:#ffffff0d}.btn-icon-round{border:1px solid var(--border-color);color:var(--text-secondary);cursor:pointer;background:#ffffff0a;border-radius:50%;justify-content:center;align-items:center;width:44px;height:44px;transition:all .2s;display:inline-flex}.btn-icon-round:hover{color:var(--text-primary);background:#ffffff14;transform:scale(1.05)}.btn-full{width:100%}.text-danger{color:var(--danger)!important}.text-danger:hover{background:#ef44441a!important}#screen-login{background:radial-gradient(circle at top,#1e1b4b 0%,#070913 70%);justify-content:center;align-items:center;padding:20px}.login-card{width:100%;max-width:400px;box-shadow:var(--shadow-lg);border-radius:24px;padding:40px 30px;animation:.5s cubic-bezier(.25,1,.5,1) cardFadeIn}@keyframes cardFadeIn{0%{opacity:0;transform:translateY(20px)scale(.98)}to{opacity:1;transform:translateY(0)scale(1)}}.login-header{text-align:center;margin-bottom:30px}.app-logo{color:var(--accent-secondary);background:#7c3aed26;border:1px solid #7c3aed4d;border-radius:16px;margin-bottom:16px;padding:12px;display:inline-flex}.login-header h1{font-family:var(--font-display);letter-spacing:-.5px;margin-bottom:6px;font-size:1.8rem;font-weight:700}.login-header p{color:var(--text-secondary);font-size:.9rem}.form-group{flex-direction:column;gap:8px;margin-bottom:20px;display:flex}.form-group label{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;font-size:.85rem;font-weight:500}.form-group input{border:1px solid var(--border-color);color:var(--text-primary);font-family:var(--font-sans);background:#ffffff0a;border-radius:12px;outline:none;padding:14px 16px;font-size:.95rem;transition:all .2s}.form-group input:focus{border-color:var(--accent-secondary);background:#ffffff12;box-shadow:0 0 0 3px #7c3aed26}.error-msg{color:#fca5a5;background:#ef44441a;border:1px solid #ef444433;border-radius:10px;margin-bottom:20px;padding:10px 14px;font-size:.85rem}.hidden{display:none!important}.spinner{border:2px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:20px;height:20px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.app-header{border-bottom:1px solid var(--border-color);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#07091380;flex-shrink:0;justify-content:space-between;align-items:center;padding:24px;display:flex}.app-header h2{font-family:var(--font-display);font-size:1.5rem;font-weight:700}.header-subtitle{color:var(--text-secondary);font-size:.85rem}.content-scroll{-webkit-overflow-scrolling:touch;flex-grow:1;padding:24px;overflow-y:auto}.notebooks-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px;padding-bottom:80px;display:grid}.bg-glow{pointer-events:none;z-index:1;filter:blur(140px);opacity:.6;border-radius:50%;position:absolute}.glow-1{background:radial-gradient(circle,#7c3aed40 0%,#0000 70%);width:500px;height:500px;top:-150px;left:-150px}.glow-2{background:radial-gradient(circle,#06b6d426 0%,#0000 70%);width:600px;height:600px;bottom:-200px;right:-200px}.notebooks-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));justify-items:center;gap:28px;padding-bottom:100px;display:grid}.notebook-card{cursor:pointer;-webkit-user-select:none;user-select:none;background:0 0;border:none;flex-direction:column;align-items:center;gap:12px;width:140px;padding:0;transition:all .3s cubic-bezier(.25,.8,.25,1);display:flex}.book-cover{background-image:linear-gradient(90deg,#0003 0%,#0000000d 5%,#ffffff14 8%,#0000 12%,#0000000a 15%,#0000 88%,#0003 100%);border-radius:3px 12px 12px 3px;justify-content:center;align-items:center;width:135px;height:185px;transition:all .3s cubic-bezier(.25,.8,.25,1);display:flex;position:relative;overflow:hidden;box-shadow:0 4px 10px #00000059,0 1px 2px #0003,inset 1px 1px #ffffff26}.book-spine{background:#00000040;border-right:1px solid #ffffff0a;border-radius:3px 0 0 3px;width:12px;position:absolute;top:0;bottom:0;left:0;box-shadow:inset 1px 0 #ffffff0d}.book-label{z-index:2;background:#fdfdfa;border:1px dashed #00000026;border-radius:4px;justify-content:center;align-items:center;width:78%;min-height:50px;padding:8px 6px;display:flex;box-shadow:inset 0 0 3px #0000001a,0 2px 5px #0000004d}.book-title-text{font-family:var(--font-display);color:#1f2937;text-align:center;-webkit-line-clamp:3;word-break:break-word;-webkit-box-orient:vertical;font-size:.85rem;font-weight:700;line-height:1.2;display:-webkit-box;overflow:hidden}.book-ribbon{clip-path:polygon(0% 0%,100% 0%,100% 100%,50% 75%,0% 100%);z-index:1;background:#ef4444;width:8px;height:18px;transition:all .3s;position:absolute;bottom:-6px;right:18px;box-shadow:0 1px 3px #0003}.notebook-card-info{text-align:center}.notebook-card-pages{color:var(--text-secondary);letter-spacing:.2px;font-size:.8rem;font-weight:500}.notebook-card:hover .book-cover{transform:translateY(-8px)rotate(-2deg);box-shadow:0 15px 30px #00000080,0 4px 10px #0000004d,inset 1px 1px #fff3}.notebook-card:hover .book-ribbon{transform:translateY(2px)}.fab{background:var(--accent-gradient);color:#fff;cursor:pointer;z-index:100;border:none;border-radius:50%;outline:none;justify-content:center;align-items:center;width:56px;height:56px;transition:all .25s cubic-bezier(.4,0,.2,1);display:flex;position:absolute;bottom:24px;right:24px;box-shadow:0 4px 20px #7c3aed66}.fab:hover{transform:translateY(-2px)scale(1.05)rotate(90deg);box-shadow:0 6px 24px #7c3aed8c}.fab:active{transform:translateY(1px)}.editor-layout{width:100%;height:100%;display:flex;overflow:hidden}.editor-sidebar{border-right:1px solid var(--border-color);z-index:15;flex-direction:column;flex-shrink:0;width:320px;height:100%;transition:transform .3s cubic-bezier(.25,1,.5,1);display:flex}.sidebar-header{border-bottom:1px solid var(--border-color);padding:20px}.btn-back{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;cursor:pointer;background:0 0;border:none;align-items:center;gap:6px;margin-bottom:16px;font-size:.85rem;font-weight:600;transition:all .2s;display:inline-flex}.btn-back:hover{color:var(--notebook-accent);transform:translate(-3px)}.sidebar-title-container{justify-content:space-between;align-items:center;display:flex}.sidebar-title-container h3{font-family:var(--font-display);letter-spacing:-.3px;white-space:nowrap;text-overflow:ellipsis;max-width:230px;font-size:1.35rem;font-weight:700;overflow:hidden}.sidebar-action{border-bottom:1px solid var(--border-color);padding:16px 20px}.pages-list{flex-direction:column;flex-grow:1;gap:4px;padding:12px;display:flex;overflow-y:auto}.page-item{cursor:pointer;-webkit-user-select:none;user-select:none;background:0 0;border:1px solid #0000;border-radius:12px;justify-content:space-between;align-items:center;padding:14px 16px;transition:all .2s;display:flex}.page-item-info{flex-direction:column;flex-grow:1;gap:4px;display:flex;overflow:hidden}.page-item-title{color:var(--text-primary);white-space:nowrap;text-overflow:ellipsis;font-size:.95rem;font-weight:500;overflow:hidden}.page-item-date{color:var(--text-muted);font-size:.75rem}.page-item:hover{background:#ffffff06;border-color:#ffffff0a}.page-item.active{background:var(--notebook-accent-transparent);border-color:rgba(var(--notebook-accent), .15);box-shadow:inset 2px 0 0 var(--notebook-accent)}.page-item.active .page-item-title{color:var(--text-primary);font-weight:600}.editor-main{background:#060810;flex-direction:column;flex-grow:1;height:100%;display:flex;position:relative}.mobile-editor-header{display:none}.editor-toolbar{border-bottom:1px solid var(--border-color);flex-shrink:0;justify-content:space-between;align-items:center;height:60px;padding:0 24px;display:flex}.editor-tools{border:1px solid var(--border-color);background:#ffffff05;border-radius:10px;gap:4px;padding:4px;display:flex}.btn-tool{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;border-radius:6px;justify-content:center;align-items:center;width:32px;height:32px;transition:all .2s;display:flex}.btn-tool:hover{color:var(--notebook-accent);background:#ffffff0d}.autosave-status{color:var(--text-secondary);align-items:center;gap:8px;font-size:.8rem;display:flex}.status-icon{border-radius:50%;width:8px;height:8px}.success-icon{background-color:var(--success);box-shadow:0 0 8px var(--success)}.syncing-icon{background-color:var(--warning);box-shadow:0 0 8px var(--warning);animation:1s infinite alternate pulse}@keyframes pulse{0%{opacity:.4}to{opacity:1}}.editor-placeholder{color:var(--text-muted);text-align:center;flex-direction:column;flex-grow:1;justify-content:center;align-items:center;gap:16px;max-width:400px;margin:0 auto;padding:40px;display:flex}.editor-placeholder p{font-size:.95rem}.editor-content{flex-direction:column;flex-grow:1;display:flex;overflow:hidden}.editor-fields{flex-direction:column;flex-grow:1;gap:16px;padding:30px;display:flex;overflow-y:auto}.editor-title{font-family:var(--font-display);color:var(--text-primary);letter-spacing:-.5px;background:0 0;border:none;outline:none;flex-shrink:0;width:100%;font-size:2rem;font-weight:700}.editor-title::placeholder{color:#ffffff26}.editor-wrapper{flex-direction:column;flex-grow:1;display:flex;position:relative;overflow:hidden}.editor-textarea{resize:none;font-family:var(--font-sans);color:var(--text-primary);background:0 0;border:none;outline:none;flex-grow:1;width:100%;height:100%;font-size:1.05rem;line-height:1.7}.editor-textarea::placeholder{color:#ffffff26}.editor-preview{font-family:var(--font-sans);color:var(--text-primary);cursor:text;-webkit-user-select:text;user-select:text;flex-grow:1;width:100%;height:100%;padding-bottom:40px;font-size:1.05rem;line-height:1.7;overflow-y:auto}.preview-empty{color:#ffffff40;font-style:italic}.preview-todo-item{cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:12px;margin:10px 0;display:flex}.preview-todo-item input[type=checkbox]{appearance:none;cursor:pointer;background:#ffffff08;border:1.5px solid #ffffff40;border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;width:18px;height:18px;transition:all .25s cubic-bezier(.4,0,.2,1);display:flex}.preview-todo-item input[type=checkbox]:checked{background:var(--notebook-accent,var(--accent-primary));border-color:var(--notebook-accent,var(--accent-primary))}.preview-todo-item input[type=checkbox]:checked:after{content:"";border:2px solid #fff;border-width:0 2px 2px 0;width:4px;height:8px;margin-bottom:2px;display:block;transform:rotate(45deg)}.preview-todo-item.checked span{color:var(--text-secondary);opacity:.6;text-decoration:line-through}.preview-bullet-item{margin-bottom:8px;margin-left:20px;list-style-type:disc}.preview-paragraph{margin-bottom:12px}.glass-dialog{width:100%;max-width:400px;box-shadow:var(--shadow-lg);color:var(--text-primary);background:0 0;border:none;border-radius:20px;outline:none;margin:auto;padding:0}.glass-dialog::backdrop{-webkit-backdrop-filter:blur(8px);background:#050712cc}.dialog-content{border:1px solid var(--border-color);color:var(--text-primary);background:#0f1224;border-radius:20px;flex-direction:column;gap:20px;padding:30px;display:flex}.dialog-content h3{font-family:var(--font-display);color:var(--text-primary);font-size:1.3rem;font-weight:700}.dialog-content p{color:var(--text-secondary);font-size:.95rem;line-height:1.5}.dialog-content label{color:var(--text-secondary)!important}.dialog-content input[type=text]{color:var(--text-primary)!important;border:1px solid var(--border-color)!important;background:#ffffff0a!important}.dialog-content input[type=text]:focus{border-color:var(--border-focus)!important}.color-picker-grid{grid-template-columns:repeat(7,1fr);gap:10px;margin-top:5px;display:grid}.color-circle{cursor:pointer;border:2px solid #0000;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;transition:all .2s;display:flex}.color-circle:hover{transform:scale(1.1)}.color-circle.selected{border-color:#fff;transform:scale(1.05)}.dialog-actions{justify-content:flex-end;gap:12px;margin-top:10px;display:flex}.toast{border:1px solid var(--border-color);color:var(--text-primary);box-shadow:var(--shadow-md);z-index:9999;pointer-events:none;background:#0f1123f2;border-radius:12px;padding:12px 24px;font-size:.9rem;font-weight:500;transition:opacity .3s,transform .3s;position:absolute;bottom:24px;left:50%;transform:translate(-50%)}.toast.show{animation:.35s cubic-bezier(.25,1,.5,1) forwards toastFadeIn}@keyframes toastFadeIn{0%{opacity:0;transform:translate(-50%,15px)}to{opacity:1;transform:translate(-50%)}}@media (width<=768px){.editor-layout{width:200vw;height:100%;transition:transform .3s cubic-bezier(.25,.8,.25,1);display:flex;transform:translate(0,0)}.editor-layout.active-editing{transform:translate(-100vw)}.editor-sidebar{border-right:none;flex-shrink:0;width:100vw;height:100%;position:relative!important;transform:none!important}.editor-main{flex-shrink:0;width:100vw;height:100%}.mobile-editor-header{background:var(--bg-surface);border-bottom:1px solid var(--border-color);flex-shrink:0;justify-content:space-between;align-items:center;height:60px;padding:0 16px;display:flex}.mobile-nav-title{font-family:var(--font-display);white-space:nowrap;text-overflow:ellipsis;max-width:180px;font-size:1.1rem;font-weight:700;overflow:hidden}.editor-fields{gap:12px;padding:20px}.editor-title{font-size:1.6rem}}html,body{overscroll-behavior:none;-webkit-text-size-adjust:100%}.app-header{padding-top:calc(20px + var(--safe-top));padding-left:calc(24px + var(--safe-left));padding-right:calc(24px + var(--safe-right))}#screen-login{padding-top:calc(24px + var(--safe-top));padding-bottom:calc(24px + var(--safe-bottom))}.content-scroll{padding-left:calc(24px + var(--safe-left));padding-right:calc(24px + var(--safe-right))}.fab{bottom:calc(20px + var(--safe-bottom));right:calc(20px + var(--safe-right));width:60px;height:60px}.toast{bottom:calc(20px + var(--safe-bottom))}.form-group input,#page-title-input,#page-content-input{font-size:1rem}.btn-icon{width:44px;height:44px}.color-circle{width:38px;height:38px}.color-picker-grid{grid-template-columns:repeat(7,1fr);gap:8px}@media (hover:none){.btn:active,.btn-icon:active,.btn-icon-round:active,.btn-back:active,.btn-tool:active{opacity:.6;transform:scale(.95)}.fab:active{opacity:.85;transform:scale(.9)rotate(45deg)}.notebook-card:active .book-cover{transform:translateY(-4px)scale(.97);box-shadow:0 8px 20px #00000080,0 2px 6px #0000004d}.page-item:active{background:#ffffff0f!important}}@media (width<=768px){.editor-sidebar .sidebar-header{padding-top:calc(20px + var(--safe-top))}.mobile-editor-header{height:calc(56px + var(--safe-top));padding-top:var(--safe-top);padding-left:calc(16px + var(--safe-left));padding-right:calc(16px + var(--safe-right))}.pages-list{padding-bottom:calc(16px + var(--safe-bottom))}.editor-fields{padding-bottom:calc(48px + var(--safe-bottom))}.notebooks-grid{padding-bottom:calc(80px + var(--safe-bottom));grid-template-columns:repeat(2,1fr);justify-items:center;gap:20px}.notebook-card{max-width:155px}.book-cover{max-width:130px}.page-item{min-height:60px;padding:16px}.glass-dialog{border-radius:24px 24px 0 0;width:100%;max-width:100%;margin:0;position:fixed;inset:auto 0 0}.dialog-content{padding-bottom:calc(28px + var(--safe-bottom));border-radius:24px 24px 0 0}.dialog-content:before{content:"";background:#ffffff2e;border-radius:2px;width:36px;height:4px;margin:-8px auto 14px;display:block}}