:root{--bg-main:#0f172a;--bg-card-draft:#1e293b;--bg-card-locked:#181e29;--border-draft:#3b82f6;--border-locked:#64748b;--text-main:#f8fafc;--text-muted:#94a3b8;--accent-draft:#3b82f6;--accent-locked:#ef4444}body{background-color:var(--bg-main);color:var(--text-main);margin:0;padding:2rem;font-family:Inter,system-ui,-apple-system,sans-serif}.app-container{max-width:900px;margin:0 auto}.note-form{background:#1e293b;border:1px solid #334155;border-radius:12px;margin-bottom:2.5rem;padding:1.5rem;box-shadow:0 4px 6px -1px #0000001a}.note-form input,.note-form textarea{color:#fff;box-sizing:border-box;background:#0f172a;border:1px solid #334155;border-radius:8px;width:100%;margin-bottom:1rem;padding:.75rem}.note-form button{color:#fff;cursor:pointer;background:#2563eb;border:none;border-radius:8px;padding:.75rem 1.5rem;font-weight:600;transition:all .2s}.note-form button:hover{background:#1d4ed8}.note-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.25rem;display:grid}.note-card{border-left:5px solid;border-radius:12px;flex-direction:column;justify-content:space-between;padding:1.25rem;transition:transform .2s,box-shadow .2s;display:flex;position:relative}.note-card.status-draft{background:var(--bg-card-draft);border-color:var(--border-draft);box-shadow:0 4px 12px #3b82f614}.note-card.status-draft:hover{transform:translateY(-2px);box-shadow:0 6px 16px #3b82f626}.note-card.status-locked{background:var(--bg-card-locked);border-color:var(--border-locked);opacity:.8}.card-header{justify-content:space-between;align-items:center;margin-bottom:.75rem;display:flex}.badge{letter-spacing:.5px;border-radius:6px;padding:.25rem .5rem;font-size:.7rem;font-weight:700}.badge-draft{color:#60a5fa;background:#3b82f633;border:1px solid #3b82f666}.badge-locked{color:#f87171;background:#ef444433;border:1px solid #ef444466}.card-title{color:#f1f5f9;margin:0 0 .5rem;font-size:1.1rem}.card-body{color:var(--text-muted);flex-grow:1;margin-bottom:1.25rem;font-size:.9rem;line-height:1.5}.card-actions{border-top:1px solid #334155;gap:.5rem;padding-top:.75rem;display:flex}.card-actions button{color:#f8fafc;cursor:pointer;background:#334155;border:none;border-radius:6px;flex:1;padding:.5rem;font-size:.8rem;font-weight:600;transition:all .2s}.card-actions button:hover:not(:disabled){background:#475569}.card-actions button:disabled{color:#475569;cursor:not-allowed;opacity:.5;background:#1e293b}