:root{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#111827;background-color:#f8fafc;line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}body{margin:0;min-height:100vh;background-color:#e2e8f0}#root{width:100%;min-height:100vh}.app{margin:0 auto;min-height:100vh;padding:2.5rem clamp(1rem,4vw,4rem);display:flex;flex-direction:column;gap:1.5rem;background:linear-gradient(135deg,#f5f7fa,#e4ecf7);color:#1f2933;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}.app-header{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}.app-header h1{margin:0;font-size:clamp(2rem,5vw,3rem);font-weight:700}.app-header p{margin:.25rem 0 0;color:#52606d;max-width:32rem}.workspace{display:grid;grid-template-columns:minmax(240px,1fr) minmax(440px,2fr);gap:1.5rem;flex:1;min-height:440px}.sidebar{background:#ffffffd1;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);padding:1.5rem;border-radius:18px;box-shadow:#1f293314 0 6px 24px;display:flex;flex-direction:column;gap:1rem}.sidebar h2{margin:0;font-size:1.1rem;text-transform:uppercase;letter-spacing:.08em;color:#50627a}.note-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.65rem}.note-list li{display:grid;grid-template-columns:auto 30px;align-items:stretch;border-radius:12px;background:#ffffffb8;border:1px solid transparent;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}.note-list li:hover{transform:translate(4px);box-shadow:#1f29331f 0 8px 18px}.note-list li.active{border-color:#2563eb;box-shadow:#2563eb26 0 10px 20px}.note-toggle{border:none;background:transparent;padding:.9rem 1rem;text-align:left;display:flex;flex-direction:column;gap:.4rem;cursor:pointer;color:inherit}.note-title{font-size:.98rem;font-weight:600;color:#1f2933}.note-updated{font-size:.8rem;color:#627184}.remove-note{border:none;background:transparent;font-size:1.5rem;color:#94a3b8;cursor:pointer;transition:color .18s ease}.remove-note:hover{color:#f87171}.editor{background:#ffffffe6;border-radius:18px;padding:1.75rem;box-shadow:#0f172a1f 0 16px 42px;display:flex;align-items:stretch;position:relative;overflow:hidden}.editor:before{content:"";position:absolute;top:-20%;right:35%;bottom:60%;left:-20%;background:linear-gradient(135deg,#2563eb47,#0ea5e91a);pointer-events:none}.editor-panel{position:relative;z-index:1;width:100%;display:flex;flex-direction:column;gap:1.25rem}.field{display:flex;flex-direction:column;gap:.6rem;color:#52606d}.field>span{font-size:.9rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:#4b5563}.field input,.field textarea{font:inherit;padding:.85rem 1rem;border-radius:12px;border:1px solid rgba(148,163,184,.5);background:#fffffff2;color:inherit;box-shadow:inset 0 2px 6px #0f172a0d;transition:border-color .18s ease,box-shadow .18s ease}.field input:focus,.field textarea:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 3px #2563eb33}.field textarea{resize:vertical;min-height:220px}.meta{display:flex;gap:1.5rem;flex-wrap:wrap;font-size:.82rem;color:#627184}.meta strong{color:#334155}.actions{display:flex;justify-content:flex-end;gap:1rem;flex-wrap:wrap}.actions button{padding:.85rem 1.4rem;border-radius:999px;border:none;cursor:pointer;font-weight:600;letter-spacing:.02em;transition:transform .18s ease,box-shadow .18s ease}.actions button:hover{transform:translateY(-2px)}.primary{background:linear-gradient(120deg,#2563eb,#4f46e5);color:#fff;box-shadow:#2563eb59 0 12px 18px}.primary:hover{box-shadow:#2563eb73 0 16px 28px}.secondary{background:#fff;color:#1f2933;border:1px solid rgba(148,163,184,.5);box-shadow:#0f172a14 0 10px 20px}.secondary:hover{border-color:#94a3b8}.status-banner{align-self:flex-start;padding:.7rem 1.2rem;border-radius:999px;background:#2563eb1a;color:#1d4ed8;font-weight:600;letter-spacing:.02em}.status-banner.success{background:#10b98124;color:#047857}.status-banner.error{background:#f8717129;color:#b91c1c}.empty-state{position:relative;z-index:1;margin:auto;text-align:center;padding:4rem 3rem;border-radius:18px;background:#ffffffd9;box-shadow:#0f172a14 0 30px 60px;max-width:28rem;display:grid;gap:1.2rem}.empty-state h2{margin:0;font-size:1.9rem}.empty-state p{margin:0;color:#52606d}.footer{text-align:center;font-size:.85rem;color:#64748b;padding-top:1.5rem}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0f172a5c;display:flex;align-items:center;justify-content:center;padding:1.5rem;z-index:30}.modal-dialog{width:min(420px,100%);background:#fff;border-radius:16px;padding:2rem;box-shadow:#0f172a40 0 25px 60px;display:grid;gap:1.2rem}.modal-dialog h3{margin:0;font-size:1.5rem}.modal-subtitle{margin:0;color:#64748b;font-size:.95rem}.modal-form{display:grid;gap:1rem}.modal-form label{display:grid;gap:.5rem;font-weight:600;color:#475569}.modal-form input{font:inherit;padding:.8rem 1rem;border-radius:12px;border:1px solid rgba(148,163,184,.6);background:#f8fafce6;transition:border-color .18s ease,box-shadow .18s ease}.modal-form input:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 3px #2563eb2e}.modal-error{color:#dc2626;font-size:.85rem}.modal-actions{display:flex;justify-content:flex-end;gap:.75rem}.modal-actions button{min-width:110px}.danger{background:linear-gradient(120deg,#dc2626,#b91c1c);color:#fff;box-shadow:#b91c1c52 0 12px 28px}.danger:hover{box-shadow:#dc262661 0 18px 34px}@media (max-width: 920px){.workspace{grid-template-columns:1fr}.sidebar{flex-direction:row;overflow-x:auto}.note-list{flex-direction:row;gap:.75rem}.note-list li{min-width:220px;grid-template-columns:1fr}}@media (max-width: 640px){.app{padding:1.5rem}.app-header{flex-direction:column;align-items:flex-start}.editor{padding:1.2rem}.meta{flex-direction:column;gap:.75rem}.actions{flex-direction:column;align-items:stretch}}