body.dark .note-card,body.dark .note-card *{color:#eaeaea}body.dark .note-card-body,body.dark .note-card p{color:#d6d6d6}body.dark .note-card-1{border-left-color:#6c8cff;background:linear-gradient(180deg,#1e243cf2,#121212e6)}body.dark .note-card-2{border-left-color:#10b981;background:linear-gradient(180deg,#14372df2,#121212e6)}body.dark .note-card-3{border-left-color:#f59e0b;background:linear-gradient(180deg,#3c2d0ff2,#121212e6)}body.dark .note-card-4{border-left-color:#ef4444;background:linear-gradient(180deg,#3c1414f2,#121212e6)}body.dark .note-card{box-shadow:0 10px 24px #00000073}*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;color:#222}.page-shell{position:relative;min-height:100vh;overflow:hidden}.bg-video{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;filter:brightness(.75) saturate(.9)}.page-shell:after{content:"";position:fixed;inset:0;background:#0000008c;z-index:-1}.home-page{max-width:900px;margin:30px auto;padding:24px;background:#ffffffeb;border-radius:20px;border:1px solid rgba(255,255,255,.6);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.home-header{position:relative}.home-title{margin:0 0 10px;font-size:1.8rem;font-weight:700;text-align:center}.home-error{margin:10px 0 0;color:#b00020;text-align:center}.top-actions{display:flex;justify-content:center;gap:10px;margin:12px 0 0}.theme-toggle,.music-toggle{padding:8px 12px;border:none;border-radius:8px;cursor:pointer;font-weight:600}.theme-toggle{background:#4f6ef7;color:#fff}.music-toggle{background:#111;color:#fff}.theme-toggle:hover,.music-toggle:hover{opacity:.9}.app-note{margin:16px auto 20px;max-width:720px;font-size:.95rem;line-height:1.5;color:#444;text-align:center;background:#ffffffd9;padding:12px 16px;border-radius:12px}.create-note{margin-bottom:24px}.create-note-form{display:flex;flex-direction:column;gap:10px}.create-note-input{width:100%;padding:10px 12px;border:1px solid #cfd6df;border-radius:8px;background:#fff}.create-note-input:focus{outline:none;border-color:#6c8cff}.create-note-btn{align-self:flex-start;padding:10px 18px;border-radius:8px;border:none;background:linear-gradient(135deg,#6c8cff,#4f6ef7);color:#fff;cursor:pointer;font-weight:600}.create-note-btn:hover{opacity:.95}.create-note-error{margin-top:8px;color:#b00020}.note-list{display:flex;flex-direction:column;gap:18px}.note-list-empty{opacity:.75;text-align:center}.note-card{width:100%;border-radius:14px;padding:16px;box-shadow:0 8px 20px #00000014}.note-card-title{margin:0 0 6px;font-size:1.1rem;font-weight:700}.note-card-body{margin:0 0 10px;white-space:pre-wrap;color:#444}.note-card-1{border-left:6px solid #4f6ef7;background:linear-gradient(180deg,#fff,#f5f8ff)}.note-card-2{border-left:6px solid #10b981;background:linear-gradient(180deg,#fff,#f1fff9)}.note-card-3{border-left:6px solid #f59e0b;background:linear-gradient(180deg,#fff,#fff9ed)}.note-card-4{border-left:6px solid #ef4444;background:linear-gradient(180deg,#fff,#fff1f1)}.note-input,.note-textarea{width:100%;padding:10px 12px;border-radius:8px;border:1px solid #cfd6df;margin-bottom:8px;background:#fff}.note-input:focus,.note-textarea:focus{outline:none;border-color:#6c8cff}.note-card-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}.btn{padding:8px 14px;border-radius:8px;border:none;background:#4f6ef7;color:#fff;cursor:pointer;font-size:.9rem;font-weight:600}.btn:hover{opacity:.9}.btn-ghost{background:transparent;color:#4f6ef7}.btn-danger{background:#dc2626;color:#fff}.btn-danger:hover{opacity:.9}button:disabled{opacity:.6;cursor:not-allowed}.note-card-error{margin:6px 0 0;color:#b00020;font-size:.85rem}.app-footer{margin-top:32px;padding-top:14px;border-top:1px solid #ddd;font-size:.85rem;color:#555;text-align:center}.app-footer a{color:#4f6ef7;text-decoration:none;font-weight:600}.app-footer a:hover{text-decoration:underline}body.dark{color:#eaeaea}body.dark .home-page{background:#141414e6;border-color:#ffffff1f}body.dark .app-note{background:#141414d9;color:#ddd}body.dark .create-note-input,body.dark .note-input,body.dark .note-textarea{background:#2a2a2a;color:#eaeaea;border-color:#444}body.dark .note-card-body{color:#ccc}body.dark .btn-ghost{color:#6c8cff}body.dark .music-toggle{background:#eee;color:#111}body.dark .app-footer{border-top-color:#ffffff1f;color:#bbb}