:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #f3f6ff;
  background: #0d111b;
  line-height: 1.45;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 15% 0, #243963 0, #111827 34%, #0d111b 70%); }
.shell { width: min(1180px, calc(100% - 36px)); margin: auto; padding: 24px 0 54px; }
.topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 48px; }
.brand { display: flex; align-items: center; gap: 12px; font-size: 22px; }
.brand small { display: block; color: #8290ad; font-size: 12px; font-weight: 500; }
.cube { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, #8b5cf6, #22d3ee); box-shadow: 0 8px 30px #5b3fd955; }
.card { background: #151c2aee; border: 1px solid #2a3853; border-radius: 20px; padding: 24px; box-shadow: 0 24px 80px #0004; }
.login-card { max-width: 500px; margin: 100px auto; }
.eyebrow { margin: 0 0 8px; color: #70e1ff; font-size: 12px; letter-spacing: .14em; font-weight: 800; }
.muted, .hint { color: #8d9ab3; }
.hint { font-size: 12px; }
.hero-row, .card-title { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.hero-row { margin-bottom: 26px; }
.bandwidth-card { margin-bottom: 20px; }
.bandwidth-row { display: flex; align-items: flex-end; gap: 16px; }
.bandwidth-row label { width: 220px; margin-top: 12px; }
.bandwidth-row .primary { margin-top: 0; white-space: nowrap; }
.bandwidth-row .message { min-height: 0; margin: 0 0 10px; }
h1 { font-size: 38px; line-height: 1.1; margin: 0 0 10px; }
h2 { font-size: 19px; margin: 0; }
.grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 20px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
label { display: block; color: #b9c4da; font-size: 13px; margin: 15px 0 0; }
input, select, textarea { display: block; width: 100%; margin-top: 7px; border-radius: 10px; border: 1px solid #334563; background: #0e1523; color: #f3f6ff; padding: 11px 12px; font: inherit; }
textarea { resize: vertical; }
.check { display: flex; align-items: center; gap: 8px; }
.check input { width: auto; margin: 0; }
.uploads { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 18px 0; }
.file { background: #0f1726; border: 1px dashed #3b5275; border-radius: 12px; padding: 12px; color: #c8d4e7; }
.file input { border: 0; padding: 0; margin-top: 8px; }
.primary, .ghost, .publish, .rollback, .retire { border: 0; border-radius: 10px; padding: 11px 16px; font: inherit; cursor: pointer; }
.primary { color: #07111c; background: linear-gradient(135deg, #74e4ff, #a78bfa); font-weight: 800; margin-top: 18px; }
.ghost { color: #bed0ef; background: #202d43; }
.publish { color: #08131d; background: #69e1aa; padding: 7px 11px; font-size: 12px; }
.rollback { color: #f8d899; background: #443720; padding: 7px 11px; font-size: 12px; }
.retire { color: #ffb0b0; background: #4a2630; padding: 7px 11px; font-size: 12px; }
.hidden { display: none; }
.error, .message { min-height: 20px; color: #ff8b9e; margin-top: 12px; }
.message { color: #7ee7bb; }
.status-pill { font-size: 12px; color: #a8b9d3; background: #1a2940; border: 1px solid #335276; border-radius: 999px; padding: 9px 13px; }
.status-pill i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #63e6be; margin-right: 7px; }
.release { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #26334b; padding: 15px 0; gap: 10px; }
.release-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.release:first-child { border-top: 0; }
.release b { display: block; }
.release span { display: block; color: #8190a9; font-size: 12px; margin-top: 3px; }
.release .ok { color: #71e3b1; white-space: nowrap; }
.releases { margin-top: 12px; }
@media (max-width: 850px) {
  .grid { grid-template-columns: 1fr; }
  .login-card { margin: 50px auto; }
  .hero-row { align-items: flex-start; flex-direction: column; }
  .uploads, .two { grid-template-columns: 1fr; }
  .bandwidth-row { align-items: stretch; flex-direction: column; gap: 8px; }
  .bandwidth-row label { width: 100%; }
  h1 { font-size: 32px; }
}