:root{--primary:#6d5efc;--primary-600:#5b4bdb;--primary-700:#4838b8;--accent:#22d3ee;--secondary:#ec4899;--grad-brand:linear-gradient(135deg, #7c5cff 0%, #6366f1 48%, #22d3ee 100%);--grad-soft:linear-gradient(135deg, #eef0ff 0%, #f5f0ff 100%);--bg:#f3f4fb;--surface:#fff;--surface-2:#f8f9ff;--border:#e6e8f2;--border-strong:#d5d8e8;--text:#1c2033;--text-soft:#43485c;--muted:#747a8c;--muted-2:#9aa0b2;--success:#10b981;--success-soft:#e7f8f1;--danger:#ef4444;--danger-soft:#fdecec;--warning:#f59e0b;--radius-sm:10px;--radius:16px;--radius-lg:24px;--radius-pill:999px;--shadow-xs:0 1px 2px #181c360f;--shadow-sm:0 4px 12px -4px #181c361f;--shadow-md:0 18px 40px -18px #4c36be59;--shadow-lg:0 30px 60px -24px #251b5c66;--ring:0 0 0 4px #6d5efc2e;--font-body:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--font-display:"Plus Jakarta Sans", var(--font-body);--transition:.2s cubic-bezier(.4, 0, .2, 1)}*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{min-height:100vh;color:var(--text);font-family:var(--font-body);background-color:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;background-image:radial-gradient(46rem 34rem at 8% -8%,#7c5cff29,#0000 62%),radial-gradient(40rem 32rem at 100% 0,#22d3ee24,#0000 58%),radial-gradient(48rem 40rem at 50% 118%,#ec48991a,#0000 60%);background-attachment:fixed;margin:0;font-size:16px;line-height:1.55}#root{flex-direction:column;min-height:100vh;display:flex}h1,h2,h3,h4{font-family:var(--font-display);color:var(--text);letter-spacing:-.02em;margin:0 0 .4em;line-height:1.2}p{margin:0 0 1em}a{color:var(--primary);transition:color var(--transition);text-decoration:none}a:hover{color:var(--primary-700)}button{cursor:pointer;font-family:inherit}input,textarea,button{font-family:inherit;font-size:1rem}img,svg{max-width:100%;display:block}::selection{background:#7c5cff38}:focus-visible{outline:2px solid var(--primary);outline-offset:2px}*{scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:var(--radius-pill);background-clip:content-box;border:3px solid #0000}::-webkit-scrollbar-thumb:hover{background:var(--muted-2);background-clip:content-box}.field{display:block}.field__label{color:var(--text-soft);justify-content:space-between;align-items:center;gap:1rem;margin-bottom:.4rem;font-size:.82rem;font-weight:600;display:flex}.field__count{color:var(--muted-2);font-variant-numeric:tabular-nums;font-size:.75rem;font-weight:500}.field__control{background:var(--surface);border:1.5px solid var(--border);transition:border-color var(--transition), box-shadow var(--transition);border-radius:12px;align-items:center;display:flex;position:relative}.field__control:focus-within{border-color:var(--primary);box-shadow:var(--ring)}.field__icon{color:var(--muted-2);place-items:center;padding-left:.85rem;display:grid}.field__control:focus-within .field__icon{color:var(--primary)}.field__input{color:var(--text);background:0 0;border:none;outline:none;flex:1;min-width:0;padding:.8rem .75rem}.field__input::placeholder{color:var(--muted-2)}.field__toggle{color:var(--muted);transition:color var(--transition);background:0 0;border:none;border-radius:10px;place-items:center;padding:.5rem .75rem;display:grid}.field__toggle:hover{color:var(--primary)}.field__textarea{border:1.5px solid var(--border);background:var(--surface);width:100%;color:var(--text);resize:vertical;min-height:120px;transition:border-color var(--transition), box-shadow var(--transition);border-radius:12px;outline:none;padding:.85rem;line-height:1.6}.field__textarea::placeholder{color:var(--muted-2)}.field__textarea:focus{border-color:var(--primary);box-shadow:var(--ring)}.app-splash{color:var(--muted);flex-direction:column;flex:1;justify-content:center;align-items:center;gap:1rem;font-weight:500;display:flex}.visually-hidden{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}}.auth{flex:1;justify-content:center;align-items:center;padding:clamp(1.25rem,4vw,3rem);display:flex}.auth__card{-webkit-backdrop-filter:blur(20px)saturate(160%);border-radius:var(--radius-lg);width:100%;max-width:980px;box-shadow:var(--shadow-lg);background:#ffffffc7;border:1px solid #ffffffbf;grid-template-columns:1.05fr 1fr;animation:.5s cubic-bezier(.22,1,.36,1) auth-rise;display:grid;overflow:hidden}@keyframes auth-rise{0%{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}.auth__aside{color:#fff;background:linear-gradient(150deg,#4b3bc4 0%,#6d5efc 45%,#22b8e0 120%);flex-direction:column;justify-content:center;padding:clamp(2rem,4vw,3rem);display:flex;position:relative;overflow:hidden}.auth__aside-glow{pointer-events:none;background:radial-gradient(circle,#ffffff59,#0000 65%);border-radius:50%;width:24rem;height:24rem;position:absolute;inset:-30% -20% auto auto}.auth__aside-logo{color:#fff;background:#ffffff2e;border:1px solid #ffffff59;border-radius:16px;place-items:center;width:52px;height:52px;margin-bottom:1.1rem;display:grid}.auth__aside-title{color:#fff;margin:0 0 .35rem;font-size:1.9rem}.auth__aside-text{color:#ffffffdb;max-width:30ch;margin-bottom:1.75rem}.auth__features{gap:.85rem;margin:0;padding:0;list-style:none;display:grid}.auth__features li{color:#fffffff2;align-items:center;gap:.65rem;font-size:.95rem;display:flex}.auth__tick{background:#ffffff38;border-radius:50%;flex-shrink:0;place-items:center;width:22px;height:22px;font-size:.72rem;font-weight:700;display:grid}.auth__form-panel{flex-direction:column;justify-content:center;padding:clamp(1.75rem,4vw,3rem);display:flex}.auth__badge{border-radius:var(--radius-pill);letter-spacing:.06em;text-transform:uppercase;color:var(--primary-700);background:#6d5efc1f;align-self:flex-start;margin-bottom:.85rem;padding:.3rem .75rem;font-size:.72rem;font-weight:700;display:inline-block}.auth__title{margin-bottom:.25rem;font-size:clamp(1.6rem,3.5vw,2rem)}.auth__subtitle{color:var(--muted);margin-bottom:1.5rem}.auth__form{gap:1rem;display:grid}.form-button{color:#fff;width:100%;font-family:var(--font-display);letter-spacing:.01em;background:var(--grad-brand);transition:transform var(--transition), box-shadow var(--transition), background-position var(--transition), opacity var(--transition);background-size:160% 160%;border:none;border-radius:12px;margin-top:.5rem;padding:.9rem 1rem;font-size:1rem;font-weight:700;box-shadow:0 14px 28px -14px #6d5efce6}.form-button:hover:not(:disabled){background-position:100%;transform:translateY(-2px);box-shadow:0 20px 34px -14px #6d5efcf2}.form-button:active:not(:disabled){transform:translateY(0)}.form-button:disabled{opacity:.75;cursor:progress}.auth__switch{text-align:center;color:var(--muted);margin:1.35rem 0 0;font-size:.92rem}.auth__switch a{font-weight:600}.error-alert{background-color:var(--danger-soft);color:#842029;border:1px solid #f5c2c7;border-radius:12px;justify-content:space-between;align-items:center;gap:10px;margin-bottom:1rem;padding:12px 14px;font-size:.9rem;animation:.3s auth-rise;display:flex}.alert-close{color:#842029;cursor:pointer;background:0 0;border:none;padding:0 4px;font-size:20px;font-weight:700;line-height:1}.alert-close:hover{opacity:.7}@media (width<=860px){.auth__card{grid-template-columns:1fr;max-width:460px}.auth__aside{display:none}}@media (width<=420px){.auth{padding:1rem}.auth__form-panel{padding:1.5rem 1.25rem}}.loading-container,.loader-container{justify-content:center;align-items:center;display:inline-flex}.loader{border:4px solid #6d5efc2e;border-top-color:var(--primary);border-radius:50%;width:44px;height:44px;animation:.8s linear infinite spin}.form-button .loader,.composer__submit .loader{border-width:2.5px;border-color:#fff #fff6 #fff6;width:20px;height:20px}@keyframes spin{to{transform:rotate(360deg)}}.notfound{flex:1;justify-content:center;align-items:center;padding:2rem 1.25rem;display:flex}.notfound__card{text-align:center;-webkit-backdrop-filter:blur(18px);border-radius:var(--radius-lg);width:100%;max-width:520px;box-shadow:var(--shadow-md);background:#ffffffb8;border:1px solid #ffffffb3;padding:clamp(2rem,6vw,3.25rem) clamp(1.5rem,5vw,3rem)}.notfound__code{font-family:var(--font-display);background:var(--grad-brand);color:#0000;-webkit-background-clip:text;background-clip:text;margin:0;font-size:clamp(5rem,22vw,8.5rem);font-weight:800;line-height:.9}.notfound__title{margin:.4em 0 .3em;font-size:clamp(1.4rem,4vw,1.9rem)}.notfound__text{color:var(--muted);max-width:38ch;margin:0 auto 1.75rem}.notfound__actions{flex-wrap:wrap;justify-content:center;gap:.75rem;display:flex}.notfound__btn{border-radius:var(--radius-pill);transition:transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition);justify-content:center;align-items:center;padding:.8rem 1.5rem;font-weight:600;display:inline-flex}.notfound__btn--primary{color:#fff;background:var(--grad-brand);box-shadow:var(--shadow-sm)}.notfound__btn--primary:hover{box-shadow:var(--shadow-md);color:#fff;transform:translateY(-2px)}.notfound__btn--ghost{color:var(--text-soft);background:var(--surface);border:1px solid var(--border)}.notfound__btn--ghost:hover{color:var(--primary);border-color:var(--primary);transform:translateY(-2px)}.note-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-xs);transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition);flex-direction:column;padding:1.15rem 1.15rem 1rem;animation:.35s cubic-bezier(.22,1,.36,1) both note-in;display:flex;position:relative;overflow:hidden}.note-card:before{content:"";background:var(--accent,var(--primary));width:5px;position:absolute;inset:0 auto 0 0}.note-card:hover{box-shadow:var(--shadow-md);border-color:color-mix(in srgb, var(--accent,var(--primary)) 40%, var(--border));transform:translateY(-4px)}@keyframes note-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.note-card__top{justify-content:space-between;align-items:center;margin-bottom:.75rem;display:flex}.note-card__badge{width:34px;height:34px;font-family:var(--font-display);color:var(--accent,var(--primary));background:color-mix(in srgb, var(--accent,var(--primary)) 14%, white);border-radius:11px;place-items:center;font-size:.95rem;font-weight:800;display:grid}.note-card__actions{align-items:center;gap:.25rem;display:flex}.note-card__action{width:34px;height:34px;color:var(--muted);opacity:0;transition:opacity var(--transition), color var(--transition), background var(--transition), transform var(--transition);background:0 0;border:none;border-radius:10px;place-items:center;display:grid;transform:translateY(-2px)}.note-card:hover .note-card__action,.note-card__action:focus-visible{opacity:1;transform:translateY(0)}.note-card__edit:hover{color:var(--primary);background:#6d5efc1f}.note-card__delete:hover{color:var(--danger);background:var(--danger-soft)}.note-card__title{overflow-wrap:anywhere;margin:0 0 .4rem;font-size:1.05rem}.note-card__content{color:var(--text-soft);overflow-wrap:anywhere;-webkit-line-clamp:6;-webkit-box-orient:vertical;margin:0;font-size:.92rem;line-height:1.6;display:-webkit-box;overflow:hidden}.note-card__foot{margin-top:auto;padding-top:.85rem}.note-card__date{color:var(--muted-2);letter-spacing:.02em;font-size:.76rem}.note-card__edited{color:var(--primary);font-size:.76rem;font-style:italic}@media (hover:none){.note-card__action{opacity:1;transform:none}}.modal{z-index:1000;-webkit-backdrop-filter:blur(6px);background:#16123273;justify-content:center;align-items:center;padding:1.25rem;animation:.2s modal-fade;display:flex;position:fixed;inset:0}.modal__card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);width:100%;max-width:540px;max-height:calc(100vh - 2.5rem);box-shadow:var(--shadow-lg);padding:clamp(1.25rem,4vw,1.85rem);animation:.3s cubic-bezier(.22,1,.36,1) modal-pop;overflow-y:auto}.modal__head{align-items:flex-start;gap:.85rem;margin-bottom:1.25rem;display:flex}.modal__head-icon{color:#fff;background:var(--grad-brand);border-radius:14px;flex-shrink:0;place-items:center;width:44px;height:44px;display:grid;box-shadow:0 10px 20px -10px #6d5efce6}.modal__head-text{flex:1;min-width:0}.modal__head-text h2{margin:0 0 .15rem;font-size:1.25rem}.modal__head-text p{color:var(--muted);margin:0;font-size:.88rem}.modal__close{color:var(--muted);transition:color var(--transition), background var(--transition);background:0 0;border:none;border-radius:8px;padding:0 4px;font-size:26px;line-height:1}.modal__close:hover{color:var(--danger);background:var(--danger-soft)}.modal__form{gap:1rem;display:grid}.modal__actions{justify-content:flex-end;gap:.75rem;margin-top:.35rem;display:flex}.modal__btn{min-width:130px;font-family:var(--font-display);transition:transform var(--transition), box-shadow var(--transition), background-position var(--transition), opacity var(--transition), color var(--transition);border:none;border-radius:12px;justify-content:center;align-items:center;gap:.5rem;padding:.75rem 1.25rem;font-weight:700;display:inline-flex}.modal__btn--ghost{color:var(--text-soft);background:var(--surface-2);border:1px solid var(--border)}.modal__btn--ghost:hover:not(:disabled){color:var(--primary);border-color:var(--primary)}.modal__btn--primary{color:#fff;background:var(--grad-brand);background-size:160% 160%;box-shadow:0 14px 26px -14px #6d5efce6}.modal__btn--primary:hover:not(:disabled){background-position:100%;transform:translateY(-2px);box-shadow:0 20px 32px -14px #6d5efcf2}.modal__btn:disabled{cursor:not-allowed;opacity:.55;box-shadow:none}@keyframes modal-fade{0%{opacity:0}to{opacity:1}}@keyframes modal-pop{0%{opacity:0;transform:translateY(14px)scale(.97)}to{opacity:1;transform:translateY(0)scale(1)}}@media (width<=480px){.modal{align-items:flex-end;padding:0}.modal__card{border-radius:var(--radius-lg) var(--radius-lg) 0 0;max-width:none;max-height:92vh;animation:.3s cubic-bezier(.22,1,.36,1) modal-sheet}.modal__actions{flex-direction:column-reverse}.modal__btn{width:100%}}@keyframes modal-sheet{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}.toast{z-index:9999;color:#fff;min-width:250px;max-width:min(360px,100vw - 40px);box-shadow:var(--shadow-lg);border-radius:14px;align-items:center;gap:.7rem;padding:.85rem .9rem .85rem 1rem;font-size:.9rem;font-weight:500;animation:.3s cubic-bezier(.22,1,.36,1) toast-in;display:flex;position:fixed;top:20px;right:20px;overflow:hidden}.toast--success{background:linear-gradient(135deg,#0f9d76,#10b981)}.toast--error{background:linear-gradient(135deg,#dc2626,#ef4444)}.toast__icon{background:#ffffff38;border-radius:50%;flex-shrink:0;place-items:center;width:28px;height:28px;display:grid}.toast__message{flex:1}.toast__close{color:#fff;opacity:.85;cursor:pointer;transition:opacity var(--transition);background:0 0;border:none;padding:0 2px;font-size:20px;line-height:1}.toast__close:hover{opacity:1}.toast__progress{transform-origin:0;background:#fff9;width:100%;height:3px;animation:3s linear forwards toast-progress;position:absolute;bottom:0;left:0}@keyframes toast-in{0%{opacity:0;transform:translate(24px)scale(.98)}to{opacity:1;transform:translate(0)scale(1)}}@keyframes toast-progress{0%{transform:scaleX(1)}to{transform:scaleX(0)}}@media (width<=480px){.toast{max-width:none;left:16px;right:16px}}.navbar{z-index:50;-webkit-backdrop-filter:blur(16px)saturate(160%);background:#ffffffb8;border-bottom:1px solid #e6e8f2e6;position:sticky;top:0}.navbar__inner{justify-content:space-between;align-items:center;gap:1rem;width:100%;max-width:1180px;margin:0 auto;padding:.75rem 1.25rem;display:flex}.navbar__brand{align-items:center;gap:.6rem;display:flex}.navbar__logo{color:#fff;background:var(--grad-brand);border-radius:12px;place-items:center;width:38px;height:38px;display:grid;box-shadow:0 8px 18px -8px #6d5efccc}.navbar__name{font-family:var(--font-display);letter-spacing:-.02em;font-size:1.2rem;font-weight:800}.navbar__actions{align-items:center;gap:.75rem;display:flex}.navbar__user{border-radius:var(--radius-pill);background:var(--surface-2);border:1px solid var(--border);align-items:center;gap:.5rem;max-width:220px;padding:.3rem .75rem .3rem .3rem;display:flex}.navbar__avatar{color:#fff;background:linear-gradient(135deg,#7c5cff,#22d3ee);border-radius:50%;flex-shrink:0;place-items:center;width:28px;height:28px;font-size:.82rem;font-weight:700;display:grid}.navbar__username{color:var(--text-soft);text-overflow:ellipsis;white-space:nowrap;font-size:.9rem;font-weight:600;overflow:hidden}.navbar__logout{border-radius:var(--radius-pill);color:var(--danger);background:var(--danger-soft);transition:background var(--transition), color var(--transition), transform var(--transition), box-shadow var(--transition);border:1px solid #0000;align-items:center;gap:.45rem;padding:.5rem .95rem;font-size:.9rem;font-weight:600;display:inline-flex}.navbar__logout:hover{color:#fff;background:var(--danger);transform:translateY(-1px);box-shadow:0 10px 20px -10px #ef4444e6}.navbar__logout:active{transform:translateY(0)}@media (width<=560px){.navbar__inner{padding:.65rem 1rem}.navbar__username{display:none}.navbar__user{background:0 0;border:none;padding:.3rem}.navbar__logout-label{display:none}.navbar__logout{justify-content:center;width:40px;height:40px;padding:.6rem}}.home{flex-direction:column;flex:1;display:flex}.home__main{width:100%;max-width:1180px;margin:0 auto;padding:clamp(1.5rem,4vw,2.75rem) clamp(1rem,4vw,1.75rem) 4rem}.home__hero{flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:1.5rem;margin-bottom:2rem;display:flex}.home__eyebrow{letter-spacing:.14em;text-transform:uppercase;color:var(--primary);margin:0 0 .4rem;font-size:.75rem;font-weight:700}.home__greeting{margin:0 0 .35rem;font-size:clamp(1.6rem,4vw,2.4rem)}.home__lede{max-width:52ch;color:var(--muted);margin:0}.home__stats{gap:.75rem;display:flex}.stat{border-radius:var(--radius);border:1px solid var(--border);-webkit-backdrop-filter:blur(12px);min-width:104px;box-shadow:var(--shadow-xs);text-align:center;background:#ffffffb8;padding:.9rem 1.1rem}.stat__value{font-family:var(--font-display);background:var(--grad-brand);color:#0000;-webkit-background-clip:text;background-clip:text;font-size:1.7rem;font-weight:800;line-height:1;display:block}.stat__label{color:var(--muted);letter-spacing:.04em;text-transform:uppercase;font-size:.78rem;font-weight:600}.home__grid{grid-template-columns:minmax(300px,360px) 1fr;align-items:start;gap:1.5rem;display:grid}.composer{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:1.5rem;position:sticky;top:88px}.composer__head{align-items:center;gap:.85rem;margin-bottom:1.25rem;display:flex}.composer__head h2{margin:0;font-size:1.15rem}.composer__head p{color:var(--muted);margin:0;font-size:.85rem}.composer__icon{color:#fff;background:var(--grad-brand);border-radius:14px;flex-shrink:0;place-items:center;width:44px;height:44px;display:grid;box-shadow:0 10px 20px -10px #6d5efce6}.composer__form{gap:1rem;display:grid}.composer__submit{color:#fff;width:100%;font-family:var(--font-display);background:var(--grad-brand);transition:transform var(--transition), box-shadow var(--transition), background-position var(--transition), opacity var(--transition);background-size:160% 160%;border:none;border-radius:12px;justify-content:center;align-items:center;gap:.5rem;padding:.85rem 1rem;font-weight:700;display:inline-flex;box-shadow:0 14px 26px -14px #6d5efce6}.composer__submit:hover:not(:disabled){background-position:100%;transform:translateY(-2px);box-shadow:0 20px 32px -14px #6d5efcf2}.composer__submit:disabled{cursor:not-allowed;opacity:.55;box-shadow:none}.notes{min-width:0}.notes__head{justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1rem;display:flex}.notes__head h2{margin:0;font-size:1.25rem}.notes__pill{border-radius:var(--radius-pill);color:var(--primary-700);background:#6d5efc1f;padding:.28rem .75rem;font-size:.78rem;font-weight:600}.notes__grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem;display:grid}.empty{text-align:center;border:1.5px dashed var(--border-strong);border-radius:var(--radius-lg);background:#ffffff80;padding:3rem 1.5rem}.empty__art{width:84px;height:84px;color:var(--primary);background:var(--grad-soft);border-radius:24px;place-items:center;margin:0 auto 1rem;display:grid}.empty h3{margin:0 0 .35rem;font-size:1.15rem}.empty p{max-width:34ch;color:var(--muted);margin:0 auto;font-size:.92rem}.skeleton{border-radius:var(--radius);background:var(--surface);border:1px solid var(--border);padding:1.25rem}.skeleton__line{background:linear-gradient(90deg, var(--surface-2) 25%, #eceefb 37%, var(--surface-2) 63%);background-size:400% 100%;border-radius:6px;height:12px;margin-bottom:.6rem;animation:1.4s infinite shimmer}.skeleton__line--title{width:55%;height:16px}.skeleton__line--short{width:40%;margin-bottom:0}@keyframes shimmer{0%{background-position:100% 0}to{background-position:0 0}}@media (width<=900px){.home__grid{grid-template-columns:1fr}.composer{position:static}}@media (width<=560px){.home__hero{align-items:flex-start}.home__stats{width:100%}.stat{flex:1}}