body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #f8f9fa; margin: 0; padding: 20px; color: #333; }
.container { max-width: 650px; background: #ffffff; padding: 25px; border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); margin: auto; }
h2, h3 { color: #0056b3; margin-top: 0; }
.form-group { margin-bottom: 15px; }
.form-group label { display: block; margin-bottom: 6px; font-weight: 600; font-size: 14px; }
.form-control { width: 100%; padding: 10px; box-sizing: border-box; border: 1px solid #ced4da; border-radius: 6px; font-size: 14px; }
.btn { padding: 10px 18px; background: #0056b3; color: white; border: none; border-radius: 6px; cursor: pointer; text-decoration: none; display: inline-block; font-size: 14px; font-weight: 600; }
.btn:hover { background: #004085; }
.btn-success { background: #28a745; }
.btn-success:hover { background: #218838; }
.btn-danger { background: #dc3545; }
.atm-card { width: 340px; height: 190px; background: linear-gradient(135deg, #1e3c72, #2a5298); color: white; border-radius: 14px; padding: 20px; box-shadow: 0 6px 15px rgba(0,0,0,0.2); position: relative; margin: 15px 0; }
.card-number { font-size: 19px; letter-spacing: 3px; margin-top: 25px; font-family: monospace; font-weight: bold; }
table { width: 100%; border-collapse: collapse; margin-top: 15px; font-size: 13px; }
table th, table td { border: 1px solid #dee2e6; padding: 10px; text-align: left; }
table th { background-color: #f1f3f5; }
.alert { padding: 12px; border-radius: 6px; margin-bottom: 15px; font-size: 14px; }
.alert-success { background: #d4edda; color: #155724; }
.alert-danger { background: #f8d7da; color: #721c24; }