:root{--lime:#b7ff00;--pink:#ff1493;--blue:#00c8ff;--bg:#06060a;--panel:#101019;--text:#fff;--muted:#bdbdd0}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;font-family:Arial,Helvetica,sans-serif;background:radial-gradient(circle at top left,rgba(183,255,0,.18),transparent 28%),radial-gradient(circle at bottom right,rgba(255,20,147,.2),transparent 32%),var(--bg);color:var(--text)}
.card,.desk{width:min(960px,calc(100% - 28px));margin:28px auto;padding:24px;background:rgba(16,16,25,.94);border:2px solid rgba(183,255,0,.35);border-radius:24px;box-shadow:0 0 40px rgba(183,255,0,.14)}
.card{max-width:460px}
.brand{font-weight:900;font-size:34px;color:var(--lime);text-shadow:0 0 12px rgba(183,255,0,.55)}
.brand span{color:var(--pink)}
h1{margin:.35em 0}
p{color:var(--muted)}
label{display:block;margin:18px 0 0;font-weight:900}
input{width:100%;margin-top:7px;padding:15px;border-radius:14px;border:1px solid #34344a;background:#08080d;color:var(--text);font-size:17px}
button{margin-top:18px;padding:13px 15px;border:0;border-radius:12px;background:var(--lime);color:#050505;font-weight:900;cursor:pointer}
button.secondary{background:#1d1d2a;color:var(--text);border:1px solid #39394f}
#status{color:var(--lime);font-weight:900}
header{display:flex;justify-content:space-between;gap:16px;align-items:center;flex-wrap:wrap}
.buttons{display:flex;gap:10px;flex-wrap:wrap}
table{width:100%;margin-top:18px;border-collapse:collapse}
th,td{padding:12px;border-bottom:1px solid #2d2d40;text-align:left}
th{color:var(--lime);text-transform:uppercase;font-size:13px;letter-spacing:.08em}
.current {
  outline: 2px solid #00ffff;
  background: rgba(0,255,255,.08);
}
.badge{padding:5px 10px;border-radius:99px;background:#222;font-weight:900}
.badge.waiting {
  color: var(--lime);
}

.badge.current {
  color: #00ffff !important;
  text-shadow: 0 0 8px #00ffff;
}

.badge.done {
  color: var(--pink) !important;
}
.controls{display:flex;gap:8px;flex-wrap:wrap}
.controls button{margin:0;padding:8px 10px;font-size:13px}
@media(max-width:700px){
  .desk{padding:14px;width:calc(100% - 14px)}
  .brand{font-size:26px}
  header{display:block}
  .buttons{margin-top:10px}
  table,thead,tbody,tr,td{display:block;width:100%}
  thead{display:none}
  tr{
    margin:14px 0;
    padding:12px;
    border:1px solid #333;
    border-radius:16px;
    background:#11111a;
  }
  td{
    display:flex;
    justify-content:space-between;
    gap:12px;
    border-bottom:1px solid #2d2d40;
    padding:10px 4px;
  }
  td:nth-child(1)::before{content:"Queue #";font-weight:900;color:var(--lime)}
  td:nth-child(2)::before{content:"Name";font-weight:900;color:var(--lime)}
  td:nth-child(3)::before{content:"Song";font-weight:900;color:var(--lime)}
  td:nth-child(4)::before{content:"Artist";font-weight:900;color:var(--lime)}
  td:nth-child(5)::before{content:"Status";font-weight:900;color:var(--lime)}
  td:nth-child(6){display:block}
  td:nth-child(6)::before{content:"Controls";display:block;font-weight:900;color:var(--lime);margin-bottom:8px}
  .controls button{margin:4px;width:calc(50% - 10px)}
}
tr.current,
tr.current td {
  outline-color: #00ffff !important;
  background: rgba(0, 255, 255, 0.12) !important;
}

tr.current .badge,
.badge.current {
  color: #00ffff !important;
  text-shadow: 0 0 10px #00ffff !important;
}

.badge.done {
  color: #ff1493 !important;
  text-shadow: 0 0 10px #ff1493 !important;
}

.tips{
    margin-top:20px;
    padding-top:20px;
    border-top:1px solid #33334a;
    text-align:center;
}

.tips h3{
    color:var(--lime);
    margin-bottom:12px;
}

.venmo-label{
    color:#00cfff;
    font-size:14px;
    font-weight:900;
    letter-spacing:2px;
    text-align:center;
    margin-bottom:10px;
    text-shadow:0 0 10px #00cfff;
}

.tip-amounts{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:6px;
    margin-bottom:12px;
}

.tip-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:15px;
    border-radius:12px;
    text-decoration:none;
    font-weight:900;
    font-size:18px;
    box-sizing:border-box;
}

.tip-amounts .tip-btn{
   width:auto !important;
   margin-bottom:0 !important;
   min-width:0 !important;
   font-size: 12px !important;
   padding:12px 8px !important;
   text-align:center;

}

.tip-amounts .venmo{
    box-shadow:none !important;
    background:#11111a !important;
    border:1px solid var(--lime) !important;
    color:#ffffff !important;
}

.venmo{
    display:block;
    background:linear-gradient(90deg,#00cfff,#42d4ff);
    color:#fff !important;
    text-align:center;
    box-shadow:0 0 25px #00cfff;
    border:1px solid #7fe8ff;
    font-size:20px;
    font-weight:900;

}

.zelle-box{
    background:linear-gradient(90deg,#6d1ed4,#8b2fff);
    color:white;
    padding:14px;
    border-radius:12px;
    font-weight:700;
    box-shadow:0 0 20px rgba(139,47,255,.5);
}