:root{
  --bg0:#06060a; --bg1:#0a0b12;
  --stroke: rgba(255,255,255,.12);
  --text:#eef1ff; --muted:#b6bdf8;
  --purple:#8b5cf6; --gold:#f5b301; --red:#ff3b6a; --cyan:#18f0ff;
  --radius:20px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color:var(--text);
  background:
    radial-gradient(1200px 650px at 50% -20%, rgba(139,92,246,.45), transparent 60%),
    radial-gradient(900px 600px at 18% 15%, rgba(24,240,255,.18), transparent 60%),
    radial-gradient(1000px 650px at 82% 10%, rgba(255,59,106,.18), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  overflow-x:hidden;
}
a{color:inherit}
.container{max-width:1020px;margin:0 auto;padding:22px}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px}
.logo{display:flex;align-items:center;gap:10px;font-weight:1000;letter-spacing:.8px}
.dot{
  width:12px;height:12px;border-radius:999px;
  background: conic-gradient(from 180deg, var(--cyan), var(--purple), var(--red), var(--gold), var(--cyan));
  box-shadow: 0 0 24px rgba(24,240,255,.3);
}
.pill{
  padding:8px 12px;border-radius:999px;border:1px solid var(--stroke);
  background: rgba(0,0,0,.25);
  color: var(--muted);
  font-size:12px;
  text-decoration:none;
  backdrop-filter: blur(10px);
}
.card{
  border:1px solid var(--stroke);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border-radius: var(--radius);
  padding:18px;
  box-shadow: 0 30px 90px rgba(0,0,0,.45);
  backdrop-filter: blur(10px);
}
.grid{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:860px){.grid{grid-template-columns:1.2fr .8fr}}
.h1{font-size:40px;font-weight:1000;line-height:1.02;margin:0 0 10px;letter-spacing:-.6px}
.h2{font-size:18px;font-weight:950;margin:0 0 10px}
.small{font-size:13px;color:var(--muted);line-height:1.55}
.hr{height:1px;background:rgba(255,255,255,.12);margin:14px 0}
.row{display:flex;gap:10px;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:12px 14px;border-radius:16px;border:1px solid var(--stroke);
  background: rgba(0,0,0,.25);
  cursor:pointer;text-decoration:none;font-weight:950;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.btn:hover{transform:translateY(-1px);border-color: rgba(255,255,255,.22)}
.btn.primary{background: rgba(139,92,246,.22);border-color: rgba(139,92,246,.55);box-shadow: 0 0 0 1px rgba(139,92,246,.1) inset, 0 24px 60px rgba(139,92,246,.14);}
.btn.ghost{background: rgba(255,255,255,.05)}
.btn.danger{background: rgba(255,59,106,.16);border-color: rgba(255,59,106,.5)}
.btn.ok{background: rgba(24,240,255,.12);border-color: rgba(24,240,255,.45)}
.btn.mini{padding:9px 10px;border-radius:14px;font-weight:950}
.input,textarea,select{
  width:100%; padding:12px 12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.35);
  color: var(--text);
  outline:none;
}
textarea{min-height:120px;resize:vertical}
.tiers{display:grid;grid-template-columns:1fr;gap:10px}
@media(min-width:560px){.tiers{grid-template-columns:repeat(3,1fr)}}
.tier{
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  border-radius:18px;
  padding:14px;
  cursor:pointer;
  transition: transform .12s ease, border-color .12s ease;
  position:relative;
  overflow:hidden;
}
.tier:hover{transform:translateY(-2px);border-color: rgba(255,255,255,.22)}
.tier .title{font-weight:1000;letter-spacing:.4px}
.tier .price{font-weight:1000;font-size:24px;margin-top:8px}
.tier .meta{font-size:12px;color:var(--muted);margin-top:6px;line-height:1.25}
.tier .radio{margin-top:10px;color:var(--muted);font-size:12px}
.tier.popular{outline:2px solid rgba(245,179,1,.65)}
.tier::before{
  content:""; position:absolute; inset:-40px;
  background: radial-gradient(500px 180px at 30% 20%, rgba(24,240,255,.18), transparent 60%),
              radial-gradient(600px 220px at 70% 30%, rgba(139,92,246,.18), transparent 60%);
  transform: rotate(-8deg); opacity:.7;
}
.tier > *{position:relative}
.tag{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 14px;border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.28);
  font-weight:1000;letter-spacing:.9px;
}
.tag .spark{width:8px;height:8px;border-radius:999px;background:var(--cyan);box-shadow:0 0 18px rgba(24,240,255,.35)}
.kv{display:grid;gap:8px}
.kv div{display:flex;justify-content:space-between;gap:12px;font-size:13px;color:var(--muted)}
.kv b{color:var(--text);font-weight:950}

/* PLAYER */
.player{height:100vh;display:flex;align-items:center;justify-content:center;padding:4vh 6vw}
.frame{
  width:100%; border-radius:28px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.45);
  box-shadow: 0 50px 140px rgba(0,0,0,.6);
  padding:5vh 5vw;
  position:relative; overflow:hidden;
}
.frame::before{
  content:""; position:absolute; inset:-2px;
  background:
    radial-gradient(900px 400px at 20% 10%, rgba(24,240,255,.18), transparent 55%),
    radial-gradient(900px 500px at 80% 20%, rgba(139,92,246,.22), transparent 60%),
    radial-gradient(900px 500px at 50% 120%, rgba(255,59,106,.18), transparent 60%);
  pointer-events:none;
}
.frame > *{position:relative}
.count{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.bigtime{font-weight:1100;font-size: clamp(46px, 6.4vw, 120px);letter-spacing:-1.4px}
.sub{font-weight:950;color:var(--muted);letter-spacing:1px}
.message{margin-top:3.5vh;font-weight:1100;line-height:1.06;font-size: clamp(44px, 4.9vw, 104px);letter-spacing:-.6px;white-space:pre-wrap}
.frame.secret .badgeTier{color: rgba(182,189,248,.95)}
.frame.secret .message{ text-shadow: 0 0 22px rgba(139,92,246,.12); }
.frame.spotlight{border-color: rgba(245,179,1,.55)}
.frame.spotlight .badgeTier{background: rgba(245,179,1,.18);border-color: rgba(245,179,1,.55)}
.frame.spotlight .message{text-shadow: 0 0 34px rgba(245,179,1,.28)}
.frame.bomb{border-color: rgba(255,59,106,.6)}
.frame.bomb .badgeTier{background: rgba(255,59,106,.18);border-color: rgba(255,59,106,.6)}
.frame.bomb .message{text-shadow: 0 0 44px rgba(255,59,106,.28)}
.flash{position:absolute;inset:0;background: radial-gradient(900px 500px at 50% 30%, rgba(255,59,106,.55), transparent 60%), linear-gradient(90deg, rgba(24,240,255,.12), transparent 30%, rgba(139,92,246,.12));opacity:0;pointer-events:none;}
.flash.on{animation: flash 650ms ease-out 1}
@keyframes flash{0%{opacity:0}12%{opacity:1}100%{opacity:0}}
.scanHint{position:absolute;right:20px;bottom:16px;font-size:12px;color:rgba(238,241,255,.75);padding:8px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background: rgba(0,0,0,.28);backdrop-filter: blur(10px);}

/* ADMIN PRO */
.chip{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background: rgba(0,0,0,.25);font-size:12px;color:rgba(238,241,255,.82);}
.chip.warn{border-color: rgba(245,179,1,.5); background: rgba(245,179,1,.12);}
.chip.bad{border-color: rgba(255,59,106,.5); background: rgba(255,59,106,.12);}
.tools{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.mini{padding:8px 10px;border-radius:14px}
.badgeNum{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:22px;padding:0 8px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background: rgba(0,0,0,.22);color:rgba(238,241,255,.9);font-size:12px;font-weight:950;}
.modalBack{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;padding:24px;}
.modal{width:min(720px, 96vw);border-radius:22px;border:1px solid rgba(255,255,255,.16);background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));box-shadow: 0 50px 140px rgba(0,0,0,.7);padding:18px;}
.modalBack.on{display:flex}
.modal .row{justify-content:flex-end}
kbd{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;font-size:12px;border:1px solid rgba(255,255,255,.14);border-bottom-color: rgba(255,255,255,.22);padding:3px 6px;border-radius:8px;background: rgba(0,0,0,.35);color: rgba(238,241,255,.9);}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{padding:8px 6px;border-top:1px solid rgba(255,255,255,.08);vertical-align:top}
th{color:var(--muted);text-align:left}


/* COUNTDOWN 30 — Malia style */
.countWrap{display:flex;flex-direction:column;gap:10px}
.countTitle{font-weight:1000;letter-spacing:1.6px;text-transform:uppercase;color:rgba(238,241,255,.9)}
.countHint{font-size:13px;color:rgba(182,189,248,.95)}
.numRow{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.bigNum{
  font-weight:1200;
  font-size:clamp(90px, 11vw, 210px);
  letter-spacing:-2.6px;
  line-height:.9;
  background:linear-gradient(90deg, rgba(24,240,255,.95), rgba(139,92,246,.95), rgba(255,59,106,.9), rgba(245,179,1,.95));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 22px rgba(24,240,255,.18));
  animation:hue 3.2s linear infinite, pulse 900ms ease-in-out infinite;
}
.smallNum{font-weight:1000;font-size:clamp(22px,2.2vw,34px);color:rgba(238,241,255,.82);letter-spacing:.6px}
@keyframes hue{0%{filter:drop-shadow(0 0 22px rgba(24,240,255,.18)) hue-rotate(0deg)}100%{filter:drop-shadow(0 0 22px rgba(24,240,255,.18)) hue-rotate(360deg)}}
@keyframes pulse{0%{transform:translateY(0) scale(1)}50%{transform:translateY(-2px) scale(1.02)}100%{transform:translateY(0) scale(1)}}
.ring{position:absolute;inset:-140px;border-radius:999px;border:1px solid rgba(255,255,255,.10);opacity:0;pointer-events:none}
.ring.on{animation:ring 900ms ease-out infinite}
@keyframes ring{0%{opacity:0;transform:scale(.92)}20%{opacity:.22}100%{opacity:0;transform:scale(1.08)}}


/* ROUND GRID */
.gridWrap{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:920px){.gridWrap{grid-template-columns:1.1fr .9fr}}
.panelTitle{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.slotGrid{
  display:grid;
  grid-template-columns:repeat(8, minmax(0,1fr));
  gap:8px;
}
@media(min-width:560px){.slotGrid{grid-template-columns:repeat(10, minmax(0,1fr));}}
.slot{
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.25);
  border-radius:14px;
  padding:8px 8px 10px;
  min-height:56px;
  cursor:pointer;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
  position:relative;
  overflow:hidden;
}
.slot:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.22)}
.slot .n{font-weight:1050;font-size:12px;opacity:.9}
.slot .t{font-size:10px;color:rgba(238,241,255,.72);margin-top:4px;line-height:1.1;max-height:26px;overflow:hidden}
.slot.empty .t{opacity:.55}
.slot.sel{outline:2px solid rgba(24,240,255,.55)}
.slot.taken{border-color: rgba(255,255,255,.2)}
.slot.taken::before{
  content:"";
  position:absolute;inset:-40px;
  background: radial-gradient(220px 90px at 30% 20%, rgba(139,92,246,.22), transparent 60%),
              radial-gradient(220px 90px at 70% 30%, rgba(24,240,255,.16), transparent 60%);
  transform: rotate(-6deg);
  opacity:.8;
}
.slot.taken > *{position:relative}
.slot.bomb{border-color: rgba(255,59,106,.55)}
.slot.spotlight{border-color: rgba(245,179,1,.55)}
.slot.secret{border-color: rgba(139,92,246,.45)}

.rowSel{outline:2px solid rgba(24,240,255,.45);border-radius:12px}
.helpNote{font-size:12px;color:rgba(182,189,248,.92);line-height:1.35}


/* DRAG + TOAST */
.slot.dragOver{outline:2px solid rgba(24,240,255,.75); box-shadow: 0 0 0 1px rgba(24,240,255,.15) inset;}
.slot.draggable{cursor:grab}
.slot.draggable:active{cursor:grabbing}
.toast{
  position:fixed; left:50%; bottom:22px; transform:translateX(-50%);
  padding:10px 14px; border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  color: rgba(238,241,255,.92);
  font-size:13px;
  box-shadow: 0 20px 60px rgba(0,0,0,.55);
  opacity:0; pointer-events:none;
  transition: opacity .18s ease, transform .18s ease;
}
.toast.on{opacity:1; transform:translateX(-50%) translateY(-2px);}
.rowDrag{outline:2px dashed rgba(182,189,248,.45); outline-offset:-6px;}
.btn.mini.purple{background: rgba(139,92,246,.18); border-color: rgba(139,92,246,.5);}


/* ADMIN FULL WIDTH OVERRIDES */
.container{max-width: 1440px;}
@media(min-width:1200px){.container{max-width: 1680px;}}
@media(min-width:1500px){.container{max-width: 1920px;}}
table td, table th{padding:12px 12px;}


/* ===== SUBMIT: MALIA MOBILE HYPER VIBE (V11) ===== */
.submitWrap{position:relative}
.submitBg{
  position:fixed; inset:0; z-index:-1;
  background:
    radial-gradient(800px 420px at 20% 10%, rgba(255,59,106,.55), transparent 55%),
    radial-gradient(700px 380px at 85% 20%, rgba(24,240,255,.45), transparent 55%),
    radial-gradient(900px 520px at 60% 85%, rgba(139,92,246,.55), transparent 55%),
    linear-gradient(180deg, rgba(6,10,20,1), rgba(0,0,0,1));
  animation:bgDrift 8s ease-in-out infinite alternate;
}
@keyframes bgDrift{
  0%{filter:hue-rotate(0deg) saturate(1.2)}
  100%{filter:hue-rotate(18deg) saturate(1.6)}
}
.submitHero{
  padding:18px 16px 10px;
}
.submitTitle{
  font-weight:1200;
  font-size:clamp(34px, 8.6vw, 56px);
  line-height:.95;
  letter-spacing:-1.2px;
  text-transform:uppercase;
}
.submitTitle .pop{
  background:linear-gradient(90deg, rgba(255,59,106,1), rgba(245,179,1,1), rgba(24,240,255,1), rgba(139,92,246,1));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 22px rgba(255,59,106,.18));
  animation:popHue 2.4s linear infinite;
}
@keyframes popHue{0%{filter:drop-shadow(0 0 22px rgba(255,59,106,.18)) hue-rotate(0deg)}100%{filter:drop-shadow(0 0 22px rgba(255,59,106,.18)) hue-rotate(360deg)}}
.submitSubtitle{
  margin-top:10px;
  font-size:15px;
  color:rgba(238,241,255,.9);
  line-height:1.45;
}
.submitChips{
  display:flex; gap:10px; flex-wrap:wrap;
  margin-top:14px;
}
.submitChip{
  border:1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.34);
  backdrop-filter: blur(10px);
  border-radius:999px;
  padding:10px 12px;
  font-weight:950;
  letter-spacing:.2px;
  font-size:12px;
  color:rgba(238,241,255,.92);
  display:inline-flex; align-items:center; gap:8px;
}
.submitChip .pulseDot{
  width:9px;height:9px;border-radius:999px;
  background:rgba(255,59,106,.95);
  box-shadow:0 0 0 0 rgba(255,59,106,.45);
  animation:dotPulse 1.2s ease-in-out infinite;
}
@keyframes dotPulse{
  0%{box-shadow:0 0 0 0 rgba(255,59,106,.0)}
  50%{box-shadow:0 0 0 10px rgba(255,59,106,.18)}
  100%{box-shadow:0 0 0 0 rgba(255,59,106,.0)}
}
.submitPanel{
  margin:12px 16px 18px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.38);
  backdrop-filter: blur(12px);
  border-radius:22px;
  padding:14px;
  box-shadow: 0 24px 80px rgba(0,0,0,.55);
}
.tierStack{display:flex; flex-direction:column; gap:10px;}
.tierBtn{
  width:100%;
  text-align:left;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.28);
  border-radius:18px;
  padding:14px 14px 12px;
  position:relative;
  overflow:hidden;
  transition:transform .12s ease, border-color .12s ease, background .12s ease;
}
.tierBtn:hover{transform:translateY(-1px); border-color: rgba(255,255,255,.22)}
.tierBtn.on{outline:2px solid rgba(24,240,255,.55); border-color: rgba(24,240,255,.45)}
.tierBtn::before{
  content:"";
  position:absolute; inset:-60px;
  background: radial-gradient(260px 120px at 10% 20%, rgba(255,59,106,.26), transparent 60%),
              radial-gradient(240px 120px at 90% 20%, rgba(24,240,255,.20), transparent 60%),
              radial-gradient(260px 120px at 60% 90%, rgba(139,92,246,.22), transparent 60%);
  transform: rotate(-6deg);
  opacity:.8;
}
.tierBtn > *{position:relative}
.tierRow{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.tierName2{font-weight:1150;font-size:18px;letter-spacing:.3px;text-transform:uppercase}
.tierPrice2{font-weight:1200;font-size:22px;letter-spacing:-.2px}
.tierDesc2{margin-top:6px;font-size:13px;color:rgba(238,241,255,.86);line-height:1.35}
.tierMeta2{margin-top:6px;font-size:12px;color:rgba(182,189,248,.92)}
.bigLabel{
  font-weight:1100;
  font-size:16px;
  letter-spacing:.2px;
  margin-top:12px;
}
.bigTextarea{
  width:100%;
  min-height:132px;
  resize:none;
  border-radius:18px;
  padding:14px 14px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.35);
  color: rgba(238,241,255,.95);
  font-size:16px;
  line-height:1.35;
}
.bigTextarea:focus{outline:none; border-color: rgba(24,240,255,.45); box-shadow:0 0 0 4px rgba(24,240,255,.10)}
.submitCTA{
  width:100%;
  border-radius:18px;
  padding:16px 16px;
  font-weight:1200;
  font-size:18px;
  letter-spacing:.6px;
  text-transform:uppercase;
}
.submitFine{
  margin-top:10px;
  font-size:12px;
  color:rgba(182,189,248,.9);
  line-height:1.35;
}
.nameToggle{
  margin-top:12px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.22);
  border-radius:18px;
  padding:12px;
}
.nameToggle b{font-weight:1100}
.nameInput{
  margin-top:10px;
}
.kbdHint{
  font-size:12px;color:rgba(238,241,255,.82);
  display:flex;justify-content:space-between;gap:10px;margin-top:8px;
}
.kbdHint .count{font-weight:1000}