:root{
  --bg:#06040f;
  --panel:rgba(0,0,0,.38);
  --border:rgba(255,255,255,.12);
  --text:#fff;
  --muted:rgba(255,255,255,.65);
  --purple:rgba(190,60,255,.75);
  --cyan:rgba(62,243,255,.55);
  --yellow:#ffe600;
}
.admin-bg{
  background:
    radial-gradient(900px 600px at 15% -10%, rgba(190,60,255,.25), transparent 55%),
    radial-gradient(900px 600px at 110% 10%, rgba(62,243,255,.17), transparent 60%),
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px),
    var(--bg);
  background-size: auto, auto, 100% 6px, 6px 100%, auto;
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.panel{
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
  backdrop-filter: blur(8px);
}
.brand{letter-spacing:1px; font-weight:800; color: var(--yellow);}
.muted{color: var(--muted);}
.grid{display:grid; grid-template-columns: 1fr 1fr; gap: 10px;}
@media (max-width: 992px){ .grid{grid-template-columns:1fr;} }
.field span{display:block; font-size: 11px; color: rgba(255,255,255,.6); margin-bottom: 6px;}
.form-control{
  background: rgba(0,0,0,.25) !important;
  
  border: 1px solid rgba(255,255,255,.14) !important;
  color: #fff !important;
  border-radius: 12px !important;
}
.form-control:focus{box-shadow:none !important; border-color: rgba(190,60,255,.55) !important;}
textarea.form-control{
  background: rgba(0,0,0,.25) !important;
  resize:none; overflow:hidden; min-height: 44px;}
.btn-purple{
  border: 1px solid rgba(255,255,255,.14);
  color:#fff;
}
.btn-purple:hover{filter:brightness(1.05); color:#fff;}
.chk{display:flex; align-items:center; gap:10px; height:44px; width:44px; position:relative; flex:0 0 44px;}
.chk input{ position:absolute; inset:0; width:44px; height:44px; opacity:0; cursor:pointer; pointer-events:auto; }
.chk-ui{cursor:pointer; 
  width: 44px; height: 26px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  position: relative; display:inline-block;
}
.chk-ui::after{
  content:""; width: 20px; height: 20px; border-radius: 999px;
  position:absolute; top:50%; left:3px; transform: translateY(-50%);
  transition: all .18s ease;
}
.chk input:checked + .chk-ui{cursor:pointer; border-color: rgba(255,230,0,.55); background: rgba(255,230,0,.18);}
.chk input:checked + .chk-ui::after{ left: 21px; background: rgba(255,230,0,.75); box-shadow: 0 0 16px rgba(255,230,0,.35); }
.past-card{border: 1px solid rgba(255,255,255,.12); border-radius: 16px; padding: 12px; margin-bottom: 10px;}
.past-media{display:flex; gap:10px; flex-wrap:wrap;}
.thumb{width: 90px; height: 90px; border-radius: 14px; border: 1px solid rgba(255,255,255,.12); overflow:hidden; position:relative; }
.thumb img, .thumb video{width:100%;height:100%;object-fit:cover;}
.badge-video{position:absolute; left:8px; bottom:6px; font-size:10px; padding:2px 6px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px;}

/* Full cover background for admin/login */
.admin-bg{
  background-image: url('img/admin-bg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.form-control::placeholder{color: rgba(255,255,255,.45) !important;}
select.form-control{appearance:auto;}

.form-select{background: rgba(0,0,0,.25) !important; border:1px solid rgba(255,255,255,.14)!important; color:#fff!important; border-radius:12px!important;}

.hint{
  margin-top: 6px;
  font-size: 12px;
  color: rgba(255,255,255,.58);
}

/* DJ lineup + Sponsors mobile layout */
.dj-grid{grid-template-columns: 90px 140px 1fr 1.3fr auto; gap:10px; align-items:end;}
.sponsor-grid{grid-template-columns: 90px 1fr auto; gap:10px; align-items:end;}

@media (max-width: 720px){
  .dj-grid{grid-template-columns: 1fr;}
  .sponsor-grid{grid-template-columns: 1fr;}
  .dj-grid .chk, .sponsor-grid .chk{height:44px;}
  .dj-grid .d-flex, .sponsor-grid .d-flex{justify-content:flex-start !important;}
}


/* Admin top action buttons: prevent horizontal scroll on mobile */
.admin-actions{display:flex; gap:12px; align-items:center; flex-wrap:wrap;}
.admin-actions .btn{white-space:nowrap;}
@media (max-width: 520px){
  .admin-actions{display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:12px; width:100%;}
  .admin-actions .btn{width:100%; white-space:normal;}
  .admin-actions #save{grid-column: 1 / -1;}
}