:root{
  --bg: #070a0e;
  --panel: #0b1017;
  --panel2: #0f1722;
  --text: #e7eef6;
  --muted: #9fb3c8;
  --steel: #a8bfd6;
  --line: rgba(167, 199, 224, 0.12);

  --accent: #f28c28;     /* basketball orange */
  --accent2: #ffb058;
  --danger: #ff4d4d;

  --shadow: 0 16px 40px rgba(0,0,0,0.55);
  --radius: 18px;

  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

*{ box-sizing: border-box; }
html, body{ height:100%; }
body{
  margin:0;
  font-family: var(--sans);
  color: var(--text);
  background:
    radial-gradient(1200px 600px at 20% 0%, rgba(242,140,40,0.12), transparent 65%),
    radial-gradient(900px 500px at 80% 10%, rgba(168,191,214,0.10), transparent 60%),
    linear-gradient(180deg, #05070a, var(--bg));
}

.topbar{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(7,10,14,0.75);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  padding: 14px 18px 10px;
}

.topbarHead{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.brand{
  display:flex;
  align-items:center;
  gap: 14px;
}

.logoWrap{
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
}
.logoImg{
  width: 64px;
  height: 64px;
  display:block;
}

.brandText{ display:flex; flex-direction:column; gap:4px; }
.brandTitle{
  font-family: Impact, Haettenschweiler, "Arial Black", var(--sans);
  letter-spacing: 3px;
  font-size: 24px;
  line-height: 1.1;
  text-transform: uppercase;
  background: linear-gradient(90deg, #f28c28 0%, #ffcf7a 40%, #a8bfd6 100%);
  -webkit-background-clip: text;
  color: transparent;
  text-shadow: 0 0 25px rgba(242,140,40,0.25);
}

.warningTag{
  border: 1px solid rgba(255,77,77,0.7);
  color: #ffd7d7;
  background: linear-gradient(180deg, rgba(255,77,77,0.18), rgba(10,14,20,0.9));
  padding: 10px 14px;
  border-radius: 14px;
  font-weight: 900;
  letter-spacing: 0.9px;
  text-align: center;
  text-transform: uppercase;
  box-shadow: 0 8px 22px rgba(0,0,0,0.35);
}

.tabs{
  margin-top: 12px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

.tabBtn{
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(15,23,34,0.9), rgba(11,16,23,0.9));
  color: var(--text);
  padding: 10px 12px;
  border-radius: 999px;
  cursor:pointer;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
  font-weight: 800;
  letter-spacing: .8px;
  font-size: 12px;
}
.tabBtn:hover{
  transform: translateY(-1px);
  border-color: rgba(242,140,40,0.4);
  box-shadow: 0 10px 18px rgba(0,0,0,0.35);
}
.tabBtn.active{
  border-color: rgba(242,140,40,0.65);
  box-shadow: 0 0 0 3px rgba(242,140,40,0.14);
}

.wrap{
  max-width: 1200px;
  margin: 18px auto 60px;
  padding: 0 18px;
}

.panel{ display:none; }
.panel.active{ display:block; }

.grid2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 980px){
  .grid2{ grid-template-columns: 1fr; }
}

.card{
  background: linear-gradient(180deg, rgba(15,23,34,0.78), rgba(11,16,23,0.9));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
}

.cardTitle{
  font-family: Impact, Haettenschweiler, "Arial Black", var(--sans);
  letter-spacing: 1.6px;
  font-size: 14px;
  color: var(--steel);
  margin-bottom: 12px;
  text-transform: uppercase;
}
.smallTitle{ margin-top: 4px; font-size: 13px; }

.hr{
  height: 1px;
  background: var(--line);
  margin: 14px 0;
}

.row{ margin: 10px 0; }
.rowSplit{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.label{
  display:block;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
  letter-spacing: 0.4px;
}

.labelRow{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
}
.labelRow .label{ margin-bottom: 0; }

.countPill{
  border: 1px solid rgba(167,199,224,0.3);
  background: rgba(167,199,224,0.12);
  color: var(--steel);
  padding: 6px 10px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .6px;
}

.input, .select, .textarea{
  width:100%;
  border-radius: 14px;
  border: 1px solid rgba(167,199,224,0.18);
  background: rgba(10,14,20,0.65);
  color: var(--text);
  padding: 10px 12px;
  outline: none;
}
.input:focus, .select:focus, .textarea:focus{
  border-color: rgba(242,140,40,0.65);
  box-shadow: 0 0 0 3px rgba(242,140,40,0.12);
}

.textarea{
  resize: vertical;
  min-height: 90px;
}
.mono{ font-family: var(--mono); }

.btn{
  border: 1px solid rgba(167,199,224,0.18);
  background: linear-gradient(180deg, rgba(20,28,40,0.95), rgba(10,14,20,0.95));
  color: var(--text);
  padding: 10px 12px;
  border-radius: 14px;
  cursor:pointer;
  font-weight: 900;
  letter-spacing: 0.6px;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease, filter .12s ease;
  user-select:none;
}
.btn:hover{
  transform: translateY(-1px);
  border-color: rgba(242,140,40,0.45);
  box-shadow: 0 10px 18px rgba(0,0,0,0.35);
}
.btn:active{
  transform: translateY(0px);
  filter: brightness(0.98);
}
.btn.primary{
  border-color: rgba(242,140,40,0.65);
  background: linear-gradient(180deg, rgba(242,140,40,0.85), rgba(188,94,22,0.88));
  color: #100a04;
}
.btn.ghost{
  background: transparent;
}
.btn.danger{
  border-color: rgba(255,77,77,0.65);
  background: linear-gradient(180deg, rgba(255,77,77,0.20), rgba(10,14,20,0.95));
}

.fileBtn{
  position: relative;
  overflow: hidden;
}
.fileBtn input[type="file"]{
  position:absolute;
  inset:0;
  opacity:0;
  cursor:pointer;
}

.metaBox{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px dashed rgba(167,199,224,0.20);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-line;
}

.hint{
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(242,140,40,0.18);
  background: rgba(242,140,40,0.07);
  color: #f6e7d7;
  font-size: 12px;
  line-height: 1.35;
}

.pillRow{ display:flex; gap:10px; flex-wrap:wrap; }
.pill{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(167,199,224,0.18);
  background: rgba(10,14,20,0.45);
  color: var(--muted);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .5px;
}
.pill input{ transform: scale(1.1); }

.list{
  display:flex;
  flex-direction: column;
  gap: 10px;
}
.listItem{
  border: 1px solid rgba(167,199,224,0.16);
  background: rgba(10,14,20,0.45);
  border-radius: 14px;
  padding: 10px 12px;
  display:flex;
  gap: 10px;
  align-items:center;
  justify-content: space-between;
}
.badge{
  font-family: var(--mono);
  font-size: 12px;
  color: var(--steel);
  border: 1px solid rgba(167,199,224,0.18);
  padding: 6px 10px;
  border-radius: 999px;
}
.small{
  font-size: 12px;
  color: var(--muted);
}
.right{ display:flex; gap:10px; align-items:center; }

.playList{
  display:flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}
.playLine{
  border: 1px solid rgba(167,199,224,0.16);
  background: rgba(10,14,20,0.45);
  border-radius: 14px;
  padding: 10px 12px;
}
.playLineHead{
  display:flex;
  justify-content: space-between;
  gap: 10px;
  align-items:center;
  margin-bottom: 6px;
}
.playLinePlain{ color: var(--text); font-weight: 900; }
.playLineCode{ color: var(--muted); font-family: var(--mono); font-size: 12px; margin-top: 6px; }

.canvasWrap{
  border: 1px solid rgba(167,199,224,0.16);
  background: rgba(0,0,0,0.22);
  border-radius: var(--radius);
  overflow:hidden;
}
canvas{ width:100%; height:auto; display:block; }

.stat{ display:flex; flex-direction:column; gap:6px; }
.statLabel{ font-size: 12px; color: var(--muted); letter-spacing: .4px; }
.statValue{
  font-family: Impact, Haettenschweiler, "Arial Black", var(--sans);
  letter-spacing: 2px;
  font-size: 20px;
  color: var(--accent2);
}

.hidden{ display:none !important; }

.customBuilder{
  border: 1px dashed rgba(242,140,40,0.35);
  border-radius: 14px;
  padding: 12px;
  background: rgba(242,140,40,0.05);
  margin: 12px 0;
}
.customFieldsList{
  display:flex;
  flex-direction: column;
  gap: 10px;
}
.customFieldRow{
  border: 1px solid rgba(167,199,224,0.2);
  background: rgba(10,14,20,0.55);
  border-radius: 12px;
  padding: 10px 12px;
  display:grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items:center;
}
.customFieldLabel{
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}
.customFieldControls{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}
.customFieldRow .pill{
  border-color: rgba(167,199,224,0.25);
}

.accordion{
  border: 1px solid rgba(167,199,224,0.18);
  border-radius: 12px;
  background: rgba(10,14,20,0.35);
  padding: 10px 12px;
}
.accordion summary{
  cursor: pointer;
  font-weight: 900;
  letter-spacing: 0.8px;
  color: var(--steel);
  outline:none;
}
.accordion[open]{
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.accordion summary::-webkit-details-marker{ display:none; }
.accordion summary::after{
  content: "▸";
  float: right;
  transition: transform .12s ease;
}
.accordion[open] summary::after{ transform: rotate(90deg); }

.overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  display:flex;
  align-items:center;
  justify-content: center;
  padding: 18px;
  z-index: 200;
}
.overlayInner{
  width: min(1100px, 100%);
  background: linear-gradient(180deg, rgba(15,23,34,0.95), rgba(5,7,10,0.95));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(0,0,0,0.55);
  padding: 14px;
}
.overlayHead{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.overlayTitle{
  font-family: Impact, Haettenschweiler, "Arial Black", var(--sans);
  letter-spacing: 1.6px;
  font-size: 14px;
  color: var(--steel);
}
.overlayCanvas canvas{ width:100%; height:auto; display:block; }