:root{--bg:#f7f9fb;--card:#fff;--accent:#0366d6}
*{box-sizing:border-box;font-family:Inter,Segoe UI,Arial,sans-serif}
body{background:var(--bg);margin:0;padding:20px;color:#0b1220}
.container{max-width:900px;margin:0 auto}
header{display:flex;justify-content:space-between;align-items:center}
h1{margin:0;font-size:1.4rem}
.create,.list{background:var(--card);padding:16px;border-radius:8px;margin-top:16px;box-shadow:0 1px 3px rgba(0,0,0,0.06)}
label{display:block;margin:8px 0}
input{width:100%;padding:8px;border:1px solid #dbe6f3;border-radius:6px}
.row{margin-top:8px}
button{background:var(--accent);color:#fff;border:none;padding:8px 12px;border-radius:6px;cursor:pointer}
button:hover{opacity:0.95}
.msg{margin-top:8px;color:#cc0000}
.record{padding:8px;border-bottom:1px solid #f1f5f9}
.record:last-child{border-bottom:none}
.modal{position:fixed;inset:0;background:rgba(0,0,0,0.4);display:flex;align-items:center;justify-content:center}
.modal.hidden{display:none}
.modal-content{background:#fff;padding:20px;border-radius:8px;max-width:480px}