:root{
  --bg:#f7f7f9;
  --card:#ffffff;
  --text:#111827;
  --muted:#6b7280;
  --border:#e5e7eb;
  --shadow:0 10px 30px rgba(0,0,0,.06);
  --accent:#c00000;
  --radius:16px;
  --max:1100px;
  --font:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
}

*{box-sizing:border-box}

body{
  margin:0;
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
}

a{
  text-decoration: none;
}

/* Soft top-left gradient only */
body::before{
  content:"";
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:360px;
  background:
    radial-gradient(
      780px 320px at 0% 0%,
      rgba(192,0,0,0.18),
      rgba(192,0,0,0.00) 72%
    );
  z-index:-1;
  pointer-events:none;
}

.wrap{
  max-width:var(--max);
  margin:0 auto;
  padding:16px;
}

header{margin-bottom:12px}

.brand{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
}

.brand img{
  width:260px;
  height:45px;
  max-width:100%;
  height:auto;
}

h1{margin:0;font-size:20px}
.subtitle{margin:0;font-size:13px;color:var(--muted)}

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

.spacer{height:16px}

.top{padding:14px}

.controls{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.search{
  position:relative;
  flex:1 1 210px;
  max-width:520px;
}

.search input{
  width:100%;
  padding:12px 12px 12px 40px;
  border-radius:999px;
  border:1px solid var(--border);
  outline:none;
  transition:border-color .18s ease, box-shadow .18s ease;
}

.search input:focus{
  border-color:rgba(192,0,0,.45);
  box-shadow:0 0 0 3px rgba(192,0,0,.14);
}

.search .icon{
  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-50%);
  width:18px;
  color:var(--muted);
}

.quickzones{
  display:flex;
  gap:8px;
  justify-content:center;
}

/* Buttons – no vertical movement */
.pill{
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(192,0,0,.25);
  background:rgba(192,0,0,.06);
  color: #9B0000;
  cursor:pointer;
  transition:background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.pill:hover{
  background:rgba(192,0,0,.12);
  border-color:rgba(192,0,0,.45);
}

.pill:focus{
  outline:none;
  box-shadow:0 0 0 3px rgba(192,0,0,.14);
}

.list{
  max-height:70vh;
  overflow-y:auto;
}

/* States – no lateral movement */
.row{
  padding:12px 14px;
  border-bottom:1px solid var(--border);
  cursor:pointer;
  transition:background .18s ease;
}

.row:hover{
  background:rgba(192,0,0,.08);
}

.row:focus{
  outline:none;
  box-shadow:0 0 0 3px rgba(192,0,0,.14);
}

/* Disabled states (Alaska, Hawaii, etc.) */
.row[style*="opacity"]{
  opacity:.4 !important;
  cursor:default !important;
}

.row[style*="opacity"]:hover{
  background:transparent !important;
}

.seo{
  padding:14px;
  font-size:14px;
  color:var(--muted);
}

.seo strong{color:var(--text)}

@media (prefers-reduced-motion: reduce){
  .row,.pill,.search input{
    transition:none !important;
  }
}
