* { margin:0; padding:0; box-sizing:border-box; font-family:Arial; }
body { background:#0d0d0d; color:#fff; display:flex; justify-content:center; align-items:center; min-height:100vh; padding:20px; }
.box { background:#1a1a1a; border:1px solid #333; border-radius:12px; padding:30px; width:100%; max-width:550px; }
h2 { color:#4da6ff; text-align:center; margin-bottom:20px; }
input { width:100%; padding:12px; margin:6px 0; background:#0d0d0d; border:1px solid #333; border-radius:8px; color:#fff; outline:none; }
input:focus { border-color:#4da6ff; }
button { width:100%; padding:12px; background:#4da6ff; color:#fff; border:none; border-radius:8px; font-weight:bold; cursor:pointer; margin:6px 0; }
button:hover { background:#3d8ce0; }
.row { display:flex; gap:8px; margin:10px 0; }
.row input { flex:1; }
.row button { width:auto; padding:12px 20px; }
#err { color:#ff4444; text-align:center; margin-top:8px; }
#msg { font-size:13px; margin:5px 0; }
.tbl { max-height:350px; overflow-y:auto; border-radius:8px; margin-top:10px; }
table { width:100%; border-collapse:collapse; }
th { color:#4da6ff; padding:10px; text-align:left; border-bottom:2px solid #333; font-size:12px; }
td { padding:8px 10px; border-bottom:1px solid #222; font-size:13px; color:#ccc; }
.btn-del { background:transparent; color:#ff4444; border:1px solid #ff4444; padding:4px 10px; border-radius:6px; cursor:pointer; font-size:11px; }
.btn-del:hover { background:#ff4444; color:#fff; }
#total { text-align:center; color:#666; margin-top:12px; font-size:12px; }