*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:#0b0c10;color:#eef2f7}
a{text-decoration:none;color:inherit}.muted{color:#a6adbb}
.container{max-width:1200px;margin:0 auto;padding:20px}main.container{padding-bottom:48px}
.card{background:#111318;border:1px solid #1f2128;border-radius:14px;padding:16px;margin:16px 0;box-shadow:0 6px 14px rgba(0,0,0,.35)}
.card h1{margin:0 0 10px 0}
.row{display:flex;gap:12px;margin-bottom:10px}.row>div{flex:1}
label{display:block;margin-bottom:6px;color:#a6adbb;font-size:.9rem}
input,select{width:100%;padding:10px;border:1px solid #2b2f39;border-radius:10px;background:#0f1117;color:#fff}
input[disabled]{opacity:.7}
.btn{display:inline-block;padding:8px 14px;border-radius:10px;border:1px solid #2b2f39;background:#19212e;color:#fff;cursor:pointer}
.btn:hover{border-color:#3a4455}
.btn.primary{background:linear-gradient(135deg,#ef4444,#f59e0b);border:none}
.tools{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.grid{display:grid;gap:14px}.grid.cols-2{grid-template-columns:repeat(2,1fr)}.grid.cols-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:1000px){.grid.cols-3{grid-template-columns:repeat(2,1fr)}}@media (max-width:640px){.grid.cols-3,.grid.cols-2{grid-template-columns:1fr}}
footer{margin-top:40px;border-top:1px solid #1f2128;color:#9aa4b2}.badge{background:#19212e;padding:5px 10px;border-radius:999px;font-size:.85rem}

/* top nav */
.quick-admin{position:fixed;top:12px;right:12px;z-index:50;display:flex;gap:8px;align-items:center;background:#0f1116cc;border:1px solid #ffffff22;border-radius:999px;padding:6px 10px;backdrop-filter:blur(6px)}
.quick-admin a{padding:6px 10px;border-radius:999px;border:1px solid #ffffff22}
.quick-admin a:hover{border-color:#ffffff44}

/* catalogue */
.catalog-brand-grid{display:grid;gap:12px;grid-template-columns:repeat(5,1fr)}
@media (max-width:1280px){.catalog-brand-grid{grid-template-columns:repeat(4,1fr)}}
@media (max-width:1000px){.catalog-brand-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:700px){.catalog-brand-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:420px){.catalog-brand-grid{grid-template-columns:1fr}}
.catalog-brand-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:16px;min-height:120px;border-radius:14px;text-align:center;background:linear-gradient(180deg,#0f1117 0%, #0b0c10 100%);border:1px solid #1f222a;box-shadow:0 8px 20px rgba(0,0,0,.25);transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease}
.catalog-brand-card:hover{transform:translateY(-3px);border-color:#2b2f39;box-shadow:0 14px 28px rgba(0,0,0,.35)}
.catalog-brand-title{font-weight:700;letter-spacing:.2px;color:#e8eaee;font-size:.98rem}
.catalog-brand-badge{width:54px;height:54px;border-radius:12px;display:grid;place-items:center;background:radial-gradient(60% 60% at 50% 40%, #ff784e 0%, #ff4d4d 60%, #d43b3b 100%);color:white;font-weight:800;font-size:1.05rem;letter-spacing:.5px;box-shadow:0 6px 14px rgba(255,77,77,.25), inset 0 0 0 2px rgba(255,255,255,.12)}
.catalog-model-card{background:#10131a;border:1px solid #20242e;border-radius:14px;padding:14px;box-shadow:0 8px 20px rgba(0,0,0,.25)}
.catalog-model-card .model-head{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.catalog-model-card .pill{background:#18202b;border:1px solid #2a3342;border-radius:999px;padding:4px 10px;font-size:.78rem;color:#c8d3e1}

/* car detail */
.car-detail{display:grid;grid-template-columns:2fr 1fr;gap:16px}
@media (max-width:900px){.car-detail{grid-template-columns:1fr}}
.car-gallery-main{background:#0f1117;border:1px solid #1f2128;border-radius:12px;display:grid;place-items:center;min-height:280px}
.car-gallery-main img{max-width:100%;max-height:420px;border-radius:12px}
.car-thumbs{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.car-thumbs img{width:96px;height:64px;object-fit:cover;border-radius:8px;border:1px solid #1f2128;cursor:pointer;opacity:.9}
.car-thumbs img:hover{opacity:1}
.car-specs{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:500px){.car-specs{grid-template-columns:1fr}}
.spec{background:#0f1117;border:1px solid #1f2128;border-radius:10px;padding:10px}
.spec-label{font-size:.8rem;color:#9aa4b2}
.spec-value{font-weight:700;margin-top:2px}

/* ===== Status banner (Open/Closed) ===== */
.status-banner{
  position: relative;
  display:flex; align-items:center; gap:12px;
  padding:14px 16px;
  border-radius:14px;
  border:1px solid transparent;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 8px 28px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04);
  margin: 6px 0 18px;
}
.status-banner .dot{
  width:14px; height:14px; border-radius:50%;
  box-shadow: 0 0 0 4px rgba(255,255,255,.06) inset, 0 0 16px currentColor;
}
.status-banner .title{
  font-weight:800; letter-spacing:.2px; font-size:1.02rem;
}
.status-banner .hint{
  margin-left:auto; color:#aab4c0; font-size:.9rem;
  display:flex; align-items:center; gap:8px;
  opacity:.9;
}

/* OPEN */
.status-open{
  border-color:#1f7a3b;
  background:
    radial-gradient(40% 60% at 8% 10%, rgba(27, 196, 94,.18), transparent 60%),
    linear-gradient(180deg, rgba(13,44,26,.65), rgba(12,28,20,.55));
  color:#d7ffe7;
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
}
.status-open .dot{ color:#2ce07e; background:#2ce07e; }
.status-open .pulse{ box-shadow:0 0 0 0 rgba(44,224,126,.5); animation:pulseGreen 2s infinite; }
@keyframes pulseGreen { from{box-shadow:0 0 0 0 rgba(44,224,126,.48)} to{box-shadow:0 0 0 20px rgba(44,224,126,0)} }

/* CLOSED */
.status-closed{
  border-color:#7a1f1f;
  background:
    radial-gradient(40% 60% at 8% 10%, rgba(255,77,77,.18), transparent 60%),
    linear-gradient(180deg, rgba(47,12,12,.65), rgba(28,12,12,.55));
  color:#ffe1e1;
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
}
.status-closed .dot{ color:#ff5454; background:#ff5454; }
.status-closed .pulse{ box-shadow:0 0 0 0 rgba(255,84,84,.48); animation:pulseRed 2s infinite; }
@keyframes pulseRed { from{box-shadow:0 0 0 0 rgba(255,84,84,.48)} to{box-shadow:0 0 0 20px rgba(255,84,84,0)} }

/* small helper for icon chip */
.icon-chip{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:8px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
}