/* Colorful responsive design using CSS Grid + Flex, no external frameworks */
:root{
  --bg:#0f1724;
  --card:#0b1220;
  --accent:#ff6b6b;
  --accent-2:#6b8bff;
  --muted: #99a0b3;
  --glass: rgba(255,255,255,0.04);
  --radius: 12px;
  --gap: 16px;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}

*{box-sizing:border-box}
body{margin:0;background:linear-gradient(180deg,#071026 0%, #071a2b 100%);color:#e6eef8;min-height:100vh;-webkit-font-smoothing:antialiased}
.wrap{max-width:1100px;margin:0 auto;padding:20px}

/* Header */
.site-header{background:linear-gradient(90deg,var(--accent),var(--accent-2));padding:12px 0;border-bottom-left-radius:16px;border-bottom-right-radius:16px;box-shadow:0 8px 30px rgba(10,10,10,0.4)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between}
.brand{font-weight:800;color:#fff;text-decoration:none;font-size:1.2rem}
.nav a{margin-left:8px;text-decoration:none}

/* Buttons */
.btn{display:inline-block;padding:8px 12px;border-radius:10px;background:transparent;color:inherit;border:none;cursor:pointer;font-weight:600}
.btn-primary{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#071022;box-shadow:0 8px 30px rgba(107,139,255,0.12)}
.btn-outline{background:transparent;border:1px solid rgba(255,255,255,0.08);padding:8px 14px;border-radius:10px;color:inherit}
.small{font-size:0.9rem}
.muted{color:var(--muted)}

/* Hero / search */
.main-grid{display:grid;grid-template-columns:1fr 420px;gap:var(--gap);margin-top:20px}
.hero{padding:20px;border-radius:16px;background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));box-shadow:0 10px 40px rgba(2,6,23,0.6)}
.hero h1{margin:0 0 6px;font-size:1.5rem}
.lead{margin:0 0 12px;color:var(--muted)}

/* Search form */
.search-form .fields{display:flex;gap:8px;margin-bottom:10px}
.search-form input{flex:1;padding:10px;border-radius:10px;border:1px solid rgba(255,255,255,0.06);background:transparent;color:inherit}
.controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap}

/* Results panel */
.results-panel{padding:16px;border-radius:12px;background:var(--card);box-shadow:0 8px 30px rgba(2,6,23,0.6)}
.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.results{display:grid;grid-template-columns:1fr;gap:12px}

/* Card */
.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:12px;border-radius:12px;border:1px solid rgba(255,255,255,0.03)}
.card-glow{box-shadow:0 12px 40px rgba(107,139,255,0.08)}

/* Unit card */
.unit-card{display:flex;flex-direction:column;padding:12px;background:linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-radius:10px}
.unit-card .small{color:var(--muted)}

/* Responsive */
@media(max-width:1000px){ .main-grid{grid-template-columns:1fr} .results-panel{order:2} .hero{order:1} }
@media(max-width:600px){
  .wrap{padding:12px}
  .search-form .fields{flex-direction:column}
  .brand{font-size:1rem}
  .btn{padding:8px 10px;font-size:0.95rem}
}

/* Auth / admin styles */
.auth-card{max-width:420px;margin:60px auto;padding:20px;background:var(--card);border-radius:12px}
.alert{background:#ffefef;color:#6b1b1b;padding:10px;border-radius:8px;margin-bottom:8px}

/* Misc */
.results .row{display:flex;align-items:center;justify-content:space-between}
.stats{display:flex;gap:8px;flex-wrap:wrap}