:root {
    --primary: #1a1a1a;
    --accent: #f1c40f; /* Yellow Plate */
    --blue: #00247d;
    --success: #27ae60;
    --danger: #e74c3c;
}

body { font-family: 'Inter', sans-serif; margin: 0; background: #f9f9f9; color: #333; }
.container { max-width: 800px; margin: 0 auto; padding: 0 20px; }

/* Navbar */
.navbar { background: white; padding: 15px 0; border-bottom: 1px solid #ddd; }
.logo { font-weight: 900; font-size: 1.4rem; }
.logo span { color: var(--success); }

/* Hero */
.hero { background: #fff; padding: 60px 0; text-align: center; border-bottom: 1px solid #eee; }
.search-area { display: flex; justify-content: center; gap: 10px; margin-top: 30px; flex-wrap: wrap; }

/* The Search Plate */
.plate-box {
    display: flex;
    background: var(--accent);
    border: 3px solid #333;
    border-radius: 8px;
    overflow: hidden;
    height: 50px;
}
.uk-strip { background: var(--blue); color: white; padding: 10px 5px; font-size: 10px; font-weight: bold; }
#vrm-input { border: none; background: transparent; font-size: 1.8rem; font-weight: 800; width: 180px; text-align: center; outline: none; text-transform: uppercase; }

.btn-search { background: var(--primary); color: white; border: none; padding: 0 30px; border-radius: 8px; font-weight: bold; cursor: pointer; transition: 0.3s; }
.btn-search:hover { background: #444; }

/* Results Card */
.results-card { background: white; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); margin-top: 40px; overflow: hidden; animation: slideIn 0.5s ease; }
@keyframes slideIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

.vehicle-header { display: flex; align-items: center; padding: 30px; background: #fcfcfc; gap: 20px; border-bottom: 1px solid #eee; }
.plate-display { background: var(--accent); border: 2px solid #333; border-radius: 5px; display: flex; font-weight: 900; }
.uk-side { background: var(--blue); color: white; padding: 8px 4px; font-size: 8px; }
#res-vrm { margin: 0; padding: 5px 15px; font-size: 1.5rem; }

.status-row { display: flex; gap: 15px; padding: 20px 30px; }
.badge { padding: 8px 15px; border-radius: 5px; font-weight: bold; font-size: 0.8rem; background: #eee; }
.badge.success { background: #dff0d8; color: #3c763d; }
.badge.danger { background: #f2dede; color: #a94442; }

.data-grid { display: grid; grid-template-columns: 1fr 1fr; padding: 30px; gap: 20px; }
.data-item label { font-size: 0.7rem; color: #999; text-transform: uppercase; display: block; }
.data-item p { margin: 5px 0 0; font-weight: bold; font-size: 1.1rem; }