@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@600;700&display=swap');
:root{--ink:#202124;--muted:#73767d;--paper:#f7f7f4;--purple:#5856d6;--purple-dark:#4542bc;--sidebar:#171821;--line:#e6e6e1}*{box-sizing:border-box}body{margin:0;color:var(--ink);background:var(--paper);font-family:'DM Sans',sans-serif}.btn-primary{--bs-btn-bg:var(--purple);--bs-btn-border-color:var(--purple);--bs-btn-hover-bg:var(--purple-dark);--bs-btn-hover-border-color:var(--purple-dark)}a{color:var(--purple)}.toast-message{position:fixed;top:1rem;left:50%;transform:translateX(-50%);z-index:2000;min-width:min(90vw,360px)}
.auth-shell{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}.auth-brand{display:grid;place-items:center;padding:3rem;color:#fff;background:radial-gradient(circle at 25% 15%,#7774ed55,transparent 35%),linear-gradient(145deg,#151620,#292a3a)}.auth-brand h1{font:700 clamp(3.5rem,7vw,7rem)/1 'Playfair Display',serif}.auth-brand p{font-size:1.35rem;color:#cbcbd7;line-height:1.6}.brand-mark{display:grid;place-items:center;width:72px;height:72px;border-radius:22px;background:var(--purple);font-size:2rem;margin-bottom:2rem}.auth-panel{display:grid;place-items:center;padding:2rem;background:#fff}.auth-card{width:min(100%,430px)}.auth-card h2{font:700 2.25rem 'Playfair Display',serif}.divider{display:flex;align-items:center;gap:1rem;color:#9b9ca1;font-size:.8rem;margin:1.2rem 0}.divider:before,.divider:after{content:"";height:1px;background:var(--line);flex:1}.form-control,.form-select{border-color:#dadad5}.form-control:focus,.form-select:focus{border-color:#9694e8;box-shadow:0 0 0 .2rem #5856d622}
.google-login-button{border:1px solid #b8bbc3;background:#fff;color:#202124;font-weight:600;box-shadow:0 1px 2px #00000014}.google-login-button .bi-google{color:#4285f4;font-size:1.15rem}.google-login-button:hover,.google-login-button:focus{border-color:#4285f4;background:#f7faff;color:#111;box-shadow:0 0 0 .2rem #4285f426}
.side-link.sidebar-primary-link{margin:0 0 1.15rem;border:1px solid #7e7bed45;background:#7e7bed12}.sidebar-new-note{margin:0 0 1.15rem}.sidebar-primary-link>i:first-child{color:#918ef5}.sidebar-primary-link>i:last-child{margin-left:auto;color:#777986;font-size:.75rem}
.notes-app{display:grid;grid-template-columns:270px 1fr;min-height:100vh}.sidebar{position:fixed;width:270px;height:100vh;background:var(--sidebar);color:#fff;padding:1.5rem;display:flex;flex-direction:column}.app-logo{display:flex;align-items:center;gap:.65rem;text-decoration:none;color:#fff;font:700 1.5rem 'Playfair Display',serif;margin-bottom:2rem}.app-logo i{color:#8d8af4}.nav-title,.eyebrow{font-size:.69rem;font-weight:700;letter-spacing:.16em;color:#8e8f9c;margin:.4rem .7rem .7rem}.side-link{display:flex;align-items:center;gap:.75rem;color:#b8bac4;text-decoration:none;border-radius:9px;padding:.68rem .72rem;margin:.12rem 0}.side-link span{flex:1}.side-link small{color:#777985}.side-link:hover,.side-link.active{background:#282a37;color:#fff}.new-book{display:flex;align-items:center;background:#242631;border-radius:9px;overflow:hidden}.new-book input[type=color]{width:28px;height:32px;border:0;padding:4px;background:transparent}.new-book input[name=name]{min-width:0;flex:1;border:0;background:transparent;color:white;padding:.5rem;font-size:.82rem;outline:0}.new-book button,.icon-btn,.favorite-form button{border:0;background:transparent;color:inherit}.user-box{display:flex;align-items:center;gap:.65rem;margin-top:auto;padding-top:1rem;border-top:1px solid #2e303b}.user-avatar{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--purple);overflow:hidden}.user-avatar img{width:100%;height:100%;object-fit:cover}.user-box strong,.user-box small{display:block;font-size:.77rem}.user-box small{color:#8e8f9c}.notes-main{grid-column:2}.topbar{height:76px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 3rem}.search{display:flex;align-items:center;gap:.7rem;background:#f3f3f0;border-radius:10px;padding:.65rem 1rem;width:min(420px,100%)}.search input{border:0;background:transparent;outline:0;width:100%}.mobile-new{display:none}.content-wrap{padding:2.5rem 3rem}.content-wrap h2{font:700 2rem 'Playfair Display',serif}.note-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.2rem}.note-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:15px;overflow:hidden;transition:.2s}.note-card:hover{transform:translateY(-3px);box-shadow:0 12px 30px #28283812}.note-card>a{text-decoration:none;color:inherit}.note-preview{height:190px;padding:1.25rem;overflow:hidden;font-family:Georgia,serif;line-height:1.6;color:#53545a;background:linear-gradient(#fff,#fdfdfb)}.note-preview img{max-width:100%;height:auto}.note-preview h1,.note-preview h2,.note-preview h3{font-size:1.1rem}.note-meta{border-top:1px solid var(--line);padding:1rem 3rem 1rem 1.2rem}.note-meta h3{font-size:1rem;margin:0 0 .3rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.note-meta p{font-size:.73rem;color:#929399;margin:0}.favorite-form{position:absolute;right:.85rem;bottom:1.1rem}.favorite-form button{font-size:1.05rem}.locked{height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#777;text-align:center}.locked i{font-size:2rem;color:var(--purple);margin-bottom:.5rem}.locked small{font-size:.67rem;margin-top:.3rem}.empty-state{text-align:center;padding:6rem 1rem;color:var(--muted)}.empty-state>i{font-size:4rem;color:#aaa8ed}.empty-state h3{color:var(--ink);font-family:'Playfair Display',serif;margin-top:1rem}
.editor-shell{min-height:100vh}.editor-header{height:68px;padding:0 2rem;background:#171821;color:#fff;display:flex;align-items:center;gap:1.2rem}.editor-header .app-logo{margin:0;flex:1}.editor-header>.icon-btn{font-size:1.25rem}.editor-page{width:min(100% - 2rem,960px);margin:2rem auto 4rem;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 15px 50px #2525290d;overflow:hidden}.editor-meta{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 3rem 0}.editor-meta select{width:auto}.title-input{display:block;width:100%;border:0;outline:0;padding:1.5rem 3rem .8rem;font:700 clamp(2rem,4vw,3rem) 'Playfair Display',serif}.toolbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:.2rem;border-block:1px solid var(--line);padding:.55rem 3rem;background:#fcfcfa;overflow-x:auto}.toolbar button{border:0;background:transparent;border-radius:6px;width:34px;height:34px}.toolbar button:hover{background:#ececf5}.toolbar>span{width:1px;height:22px;background:var(--line);margin:0 .3rem}.toolbar select{border:0;background:transparent;font-size:.8rem;padding:.3rem;outline:0}.rich-editor{min-height:420px;padding:2rem 3rem;outline:0;font:17px/1.75 Georgia,serif}.rich-editor:empty:before{content:attr(data-placeholder);color:#a4a4a0}.rich-editor img{max-width:100%;height:auto}.attachments,.encryption-panel{margin:0 3rem;padding:1.6rem 0;border-top:1px solid var(--line)}.attachments h3{font-size:.95rem}.upload-zone{display:flex;align-items:center;flex-direction:column;justify-content:center;border:1px dashed #bbbcc4;border-radius:10px;padding:1.2rem;color:#74757d;cursor:pointer}.upload-zone i{font-size:1.7rem;color:var(--purple)}.upload-zone small{font-size:.72rem}.upload-zone input{display:none}.attachment-list{display:flex;flex-wrap:wrap;gap:.5rem;margin:.8rem 0}.attachment-list a{display:flex;align-items:center;gap:.6rem;padding:.6rem .8rem;border:1px solid var(--line);border-radius:8px;text-decoration:none;color:var(--ink);font-size:.78rem}.attachment-list i{font-size:1.3rem;color:var(--purple)}.attachment-list small{display:block;color:var(--muted)}.form-check-label small{display:block;color:var(--muted)}.encryption-options{display:none;grid-template-columns:1fr 2fr;gap:.7rem;margin-top:1rem}.encryption-options.active{display:grid}.editor-actions{display:flex;justify-content:flex-end;gap:.7rem;padding:1.2rem 3rem;background:#fafaf7;border-top:1px solid var(--line)}.unlock-card,.status-card{width:min(100% - 2rem,520px);margin:10vh auto;text-align:center;background:#fff;border:1px solid var(--line);border-radius:18px;padding:3rem;box-shadow:0 20px 60px #25252912}.lock-orb{width:70px;height:70px;display:grid;place-items:center;margin:0 auto 1.2rem;border-radius:50%;background:#eeedff;color:var(--purple);font-size:1.8rem}.unlock-card h2,.status-card h1{font:700 2rem 'Playfair Display',serif}.unlock-card>small{display:block;margin-top:1rem;color:var(--muted)}.status-page{min-height:100vh;display:grid;place-items:center}.status-card{margin:auto}.status-card>i{font-size:3rem;color:var(--purple)}.status-card pre{text-align:left;padding:1rem;background:#22232b;color:#e8e8e8;border-radius:8px}
@media(max-width:760px){.auth-shell{grid-template-columns:1fr}.auth-brand{display:none}.notes-app{display:block}.sidebar{display:none}.notes-main{display:block}.topbar{padding:0 1rem}.mobile-new{display:block;margin-left:.6rem}.content-wrap{padding:1.5rem 1rem}.note-grid{grid-template-columns:1fr}.editor-header{padding:0 1rem}.editor-header .app-logo span{display:none}.editor-page{margin:1rem;width:calc(100% - 2rem)}.editor-meta,.toolbar,.rich-editor,.title-input,.editor-actions{padding-left:1.25rem;padding-right:1.25rem}.attachments,.encryption-panel{margin-inline:1.25rem}.encryption-options{grid-template-columns:1fr}.editor-actions{position:sticky;bottom:0}.unlock-card{margin-top:2rem}}
.storage-usage{padding:.55rem .1rem .05rem}.storage-usage-track{height:5px;overflow:hidden;border-radius:99px;background:#30323d;cursor:help}.storage-usage-track>span{display:block;height:100%;min-width:1px;border-radius:inherit;background:linear-gradient(90deg,#7774ed,#aaa8ed);transition:width .3s ease}
.backpack-title{display:flex;align-items:center;gap:.45rem;color:#b5a4dc}.backpack-title i{font-size:.9rem}.draggable-note{cursor:grab}.draggable-note:active{cursor:grabbing}.draggable-note.is-dragging{opacity:.35}.notebook-drop-target{transition:background .16s ease,box-shadow .16s ease,color .16s ease}.notebook-drop-target.is-drop-target{background:#403b62;color:#fff;box-shadow:inset 0 0 0 2px #8f86df}
.backpacks-scroll{min-height:0;overflow-y:auto;padding-right:.15rem}.backpack-group{margin-top:.65rem}.backpack-title{margin-bottom:.3rem;padding:.45rem .65rem;border-radius:7px}.backpack-title span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.backpack-title small{color:#777985;font-size:.6rem;letter-spacing:0}.backpack-drop-target{transition:.16s}.backpack-drop-target.is-drop-target{background:#403b62;color:#fff;box-shadow:inset 0 0 0 2px #8f86df}.draggable-notebook{margin-left:.45rem;width:calc(100% - .45rem);cursor:grab}.draggable-notebook.is-dragging{opacity:.35}.backpack-add-book summary,.backpack-create summary{padding:.35rem .7rem;color:#8f91a0;cursor:pointer;font-size:.68rem;list-style:none}.backpack-add-book summary::-webkit-details-marker,.backpack-create summary::-webkit-details-marker{display:none}.backpack-add-book .new-book,.backpack-create .new-book{margin:.25rem 0 .5rem}.backpack-create{margin-top:.65rem;border-top:1px solid #2e303b;padding-top:.4rem}.backpack-limit{display:block;padding:.7rem;color:#777985;font-size:.62rem}
.backpack-toggle{display:grid;place-items:center;width:22px;height:22px;padding:0;border:0;border-radius:5px;background:transparent;color:#8f91a0;font-size:.68rem}.backpack-toggle:hover{background:#343645;color:#fff}.backpack-group.is-collapsed>:not(.backpack-title){display:none}.backpack-group>.side-link,.backpack-group>.backpack-add-book{position:relative;margin-left:1.15rem;width:calc(100% - 1.15rem)}.backpack-group>.side-link:before{content:'';position:absolute;left:-.72rem;top:-.55rem;width:.55rem;height:1.55rem;border-left:1px solid #454754;border-bottom:1px solid #454754;border-radius:0 0 0 5px}.backpack-group>.backpack-add-book{padding-left:.05rem;border-left:1px solid #454754}.backpack-group>.backpack-add-book summary{padding-left:.7rem}
.backpack-group>.side-link:before{display:none}.backpack-group>.backpack-add-book{border-left:0}
.backpack-quick-add{display:grid;place-items:center;width:20px;height:20px;padding:0;border:0;border-radius:5px;background:transparent;color:#a7a9b6;font-size:.62rem}.backpack-quick-add:hover{background:#3d3f4d;color:#fff}
.backpack-add-book>summary{display:none}
.backpack-title>span{cursor:text}.backpack-title>span.is-editing{padding:.15rem .3rem;border-radius:4px;outline:1px solid #7774ed;background:#20212b;color:#fff;cursor:text}
.backpack-context-menu{position:fixed;z-index:4000;display:none;width:210px;padding:.35rem;border:1px solid #41434f;border-radius:10px;background:#20212a;box-shadow:0 14px 45px #0008}.backpack-context-menu.is-open{display:block}.backpack-context-menu button{display:flex;align-items:center;gap:.65rem;width:100%;padding:.58rem .7rem;border:0;border-radius:7px;background:transparent;color:#d6d7de;text-align:left;font-size:.76rem}.backpack-context-menu button:hover{background:#30323d;color:#fff}.backpack-context-menu button.is-danger{color:#ff8b91}.backpack-context-menu button.is-danger:hover{background:#512b32;color:#fff}
.vault-context-menu [data-action="access"]{margin-top:.35rem;padding-top:.75rem;border-top:1px solid #444652;border-radius:0 0 7px 7px}
.note-context-menu{overflow:visible}.note-context-menu button:disabled{opacity:.42;cursor:not-allowed}.note-move-submenu{position:absolute;top:40px;left:calc(100% + 6px);display:none;width:210px;max-height:260px;padding:.35rem;overflow-y:auto;border:1px solid #41434f;border-radius:10px;background:#20212a;box-shadow:0 14px 45px #0008}.note-context-menu.show-move .note-move-submenu{display:block}.note-move-submenu small{display:block;padding:.6rem;color:#8f91a0;font-size:.7rem}.note-encrypt-dialog .note-encrypt-icon{color:#5856d6;font-size:2rem}.note-encrypt-dialog .note-encrypt-name{font-weight:700}.note-encrypt-dialog label{margin-top:.85rem}.note-encrypt-dialog select,.note-encrypt-dialog input{margin-top:.35rem}
.backpack-delete-overlay{position:fixed;inset:0;z-index:5000;display:grid;place-items:center;padding:1rem;background:#090a0ebd;backdrop-filter:blur(5px)}.backpack-delete-dialog{width:min(100%,470px);padding:2rem;border:1px solid #e3b6b9;border-radius:17px;background:#fff;color:#303138;box-shadow:0 30px 90px #0008}.backpack-delete-icon{color:#d44550;font-size:2rem}.backpack-delete-dialog h2{margin:.5rem 0 1rem;font:700 1.8rem 'Playfair Display',serif}.backpack-delete-dialog p{font-size:.88rem;line-height:1.55}.backpack-delete-dialog .backpack-delete-warning{color:#b42f3a;font-weight:700}.backpack-delete-dialog label{display:block;margin-top:1.25rem;font-size:.82rem}.backpack-delete-dialog label strong{color:#bd2734;font-size:.95rem}.backpack-delete-dialog input{margin-top:.45rem;text-transform:uppercase}.backpack-delete-dialog footer{display:flex;justify-content:flex-end;gap:.6rem;margin-top:1.4rem}
.user-account-menu{position:fixed;z-index:6000;width:180px;padding:.35rem;border:1px solid #41434f;border-radius:10px;background:#20212a;box-shadow:0 14px 45px #0008}.user-account-menu a,.user-account-menu button{display:flex;align-items:center;gap:.65rem;width:100%;padding:.65rem .75rem;border:0;border-radius:7px;background:transparent;color:#dedee5;text-decoration:none;text-align:left;font-size:.8rem}.user-account-menu a:hover,.user-account-menu button:hover{background:#30323d;color:#fff}.user-account-menu button{color:#ff9ca1}
.profile-page{min-height:100vh;background:#f4f4f1}.profile-top{height:72px;display:flex;align-items:center;padding:0 max(1rem,calc((100% - 1080px)/2));background:#171821}.profile-top .app-logo{margin:0 0 0 auto}.profile-shell{width:min(100% - 2rem,1080px);margin:0 auto;padding:3rem 0 5rem}.profile-identity{display:flex;align-items:center;gap:1.4rem;margin-bottom:2rem}.profile-avatar{width:88px;height:88px;display:grid;place-items:center;overflow:hidden;border-radius:24px;background:var(--purple);color:#fff;font:700 2rem 'Playfair Display',serif}.profile-avatar img{width:100%;height:100%;object-fit:cover}.profile-identity p,.profile-card>span,.profile-card div>span{margin:0;color:#858690;font-size:.68rem;font-weight:700;letter-spacing:.14em}.profile-identity h1{margin:.15rem 0;font:700 2.4rem 'Playfair Display',serif}.profile-identity span,.profile-identity small{display:block;color:var(--muted)}.profile-identity small{font-size:.75rem;margin-top:.25rem}.profile-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:1rem}.profile-card,.profile-settings,.profile-stats article{background:#fff;border:1px solid var(--line);border-radius:16px}.profile-card{padding:1.5rem}.encryption-card{display:flex;gap:1rem}.encryption-card>i{font-size:2rem;color:var(--purple)}.profile-card h2{margin:.35rem 0;font-size:1.35rem}.profile-card p{margin:0;color:var(--muted);font-size:.82rem}.algorithm-item{display:block;margin-top:.45rem;color:var(--muted)}.profile-progress{height:7px;margin:1rem 0 .45rem;overflow:hidden;border-radius:99px;background:#e8e8e4}.profile-progress span{display:block;height:100%;background:linear-gradient(90deg,#5856d6,#9794f3)}.storage-card>small{color:var(--muted)}.profile-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin:1rem 0}.profile-stats article{padding:1.2rem}.profile-stats i{color:var(--purple);font-size:1.3rem}.profile-stats strong,.profile-stats span{display:block}.profile-stats strong{margin:.4rem 0;font-size:1.6rem}.profile-stats span{color:var(--muted);font-size:.76rem}.profile-settings{padding:1.6rem}.profile-settings>header{display:flex;gap:.9rem;align-items:center;border-bottom:1px solid var(--line);padding-bottom:1rem}.profile-settings>header>i{font-size:1.6rem;color:var(--purple)}.profile-settings h2,.profile-settings p{margin:0}.profile-settings p{color:var(--muted);font-size:.8rem}.profile-settings form{display:grid;grid-template-columns:1fr 1fr auto;align-items:end;gap:1rem;padding-top:1.2rem}.profile-settings label{font-size:.8rem;font-weight:600}.profile-settings label small{display:block;margin-top:.35rem;color:var(--muted);font-weight:400}
html[data-theme=dark] body{--ink:#e8e8ed;--muted:#a1a2aa;--paper:#111218;--line:#343640;background:#111218;color:var(--ink)}html[data-theme=dark] .notes-main,html[data-theme=dark] .profile-page{background:#111218}html[data-theme=dark] .topbar,html[data-theme=dark] .note-card,html[data-theme=dark] .editor-page,html[data-theme=dark] .profile-card,html[data-theme=dark] .profile-settings,html[data-theme=dark] .profile-stats article,html[data-theme=dark] .auth-panel{background:#1d1e26;color:var(--ink)}html[data-theme=dark] .form-control,html[data-theme=dark] .form-select{background:#252631;border-color:#42444f;color:#eee}@media(prefers-color-scheme:dark){html:not([data-theme]) body{--ink:#e8e8ed;--muted:#a1a2aa;--paper:#111218;--line:#343640;background:#111218;color:var(--ink)}html:not([data-theme]) .notes-main,html:not([data-theme]) .profile-page{background:#111218}html:not([data-theme]) .topbar,html:not([data-theme]) .note-card,html:not([data-theme]) .editor-page,html:not([data-theme]) .profile-card,html:not([data-theme]) .profile-settings,html:not([data-theme]) .profile-stats article,html:not([data-theme]) .auth-panel{background:#1d1e26;color:var(--ink)}}
@media(max-width:760px){.profile-grid,.profile-settings form{grid-template-columns:1fr}.profile-stats{grid-template-columns:1fr 1fr}.profile-shell{padding-top:1.5rem}.profile-identity h1{font-size:1.8rem}}