:root{--bg:#0b1020;--card:#151c2f;--card2:#1d2740;--text:#f8fafc;--muted:#9ca3af;--accent:#8b5cf6;--danger:#dc2626;--border:#2b3858}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at top,#202a49 0,#0b1020 45%);color:var(--text);font-family:Inter,Segoe UI,Arial,sans-serif;min-height:100vh}
button,input,textarea{font:inherit}.app-shell{max-width:720px;margin:auto;min-height:100vh;padding:18px 14px 110px}
.topbar,.admin-header{display:flex;align-items:center;justify-content:space-between;gap:16px}.topbar h1,.admin-header h1{margin:0;font-size:2rem}.topbar p,.admin-header p{margin:3px 0;color:var(--muted)}
.connection{border:1px solid var(--border);background:#111827;color:white;padding:10px 13px;border-radius:999px}.dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:#ef4444;margin-right:7px}.connection.connected .dot{background:#22c55e}
.card,.menu-card,.admin-card{background:rgba(21,28,47,.95);border:1px solid var(--border);border-radius:18px;box-shadow:0 10px 30px rgba(0,0,0,.18)}
.dimmers{padding:15px;margin:22px 0 15px}.slider-row{display:grid;grid-template-columns:80px 1fr 48px;align-items:center;gap:10px;margin:11px 0}.slider-row label{font-size:.85rem;font-weight:800}.slider-row output{text-align:right;color:var(--muted)}
input[type=range]{width:100%;accent-color:var(--accent)}
.menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.menu-card{min-height:104px;color:white;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;font-size:1rem}.menu-card span{font-size:2rem}
.panel{margin-top:15px;padding:14px}.hidden{display:none!important}.panel-title{display:flex;justify-content:space-between;align-items:center}.panel-title h2{margin:4px 0 12px}.close-panel{background:none;border:0;color:white;font-size:1.2rem}
.color-headings,.colors-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.color-headings{text-align:center;font-size:.75rem;font-weight:800;color:var(--muted);margin-bottom:9px}.colors-grid{align-items:stretch}.color-btn{aspect-ratio:1/1;border-radius:16px;border:3px solid transparent;font-weight:800;min-width:0;padding:4px}.color-btn.active{border-color:white;box-shadow:0 0 0 2px var(--accent)}
.choice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.choice-grid.two-columns{grid-template-columns:1fr 1fr}.choice-btn{min-height:105px;border:1px solid var(--border);border-radius:15px;background:var(--card2);color:white;font-weight:800;padding:10px}.choice-btn.active{outline:3px solid var(--accent)}.choice-btn img{display:block;width:52px;height:52px;object-fit:contain;margin:0 auto 8px;filter:drop-shadow(0 2px 5px #000)}
.status{padding:15px;margin-top:15px}.status small{display:block;color:var(--muted);margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.actionbar{position:fixed;bottom:0;left:0;right:0;display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:8px;padding:12px max(12px,calc((100vw - 720px)/2 + 14px));background:rgba(5,8,17,.93);backdrop-filter:blur(14px);z-index:5}.actionbar button{height:58px;border-radius:14px;border:1px solid var(--border);background:#1d2740;color:white;font-weight:900}.actionbar .danger{background:#7f1d1d}.actionbar button.active{background:var(--accent)}.actionbar .danger.active{background:#ef4444}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.72);display:flex;align-items:center;justify-content:center;padding:20px;z-index:10}.modal-box{max-width:420px;background:#151c2f;border:1px solid var(--border);border-radius:20px;padding:22px}.modal-box button{width:100%;margin-top:10px;padding:13px;border-radius:12px;border:1px solid var(--border)}
.primary{background:var(--accent)!important;color:white;border:0!important}.login-shell{min-height:100vh;display:grid;place-items:center;padding:20px}.login-card{width:min(420px,100%);background:var(--card);padding:25px;border-radius:18px;border:1px solid var(--border)}.login-card input{width:100%;padding:13px;border-radius:10px;border:1px solid var(--border);margin:8px 0 14px}.login-card button{width:100%;padding:13px;border-radius:10px}.login-card a{display:block;text-align:center;color:#c4b5fd;margin-top:14px}.error{background:#7f1d1d;padding:10px;border-radius:10px}
.admin-shell{max-width:1180px;margin:auto;padding:22px}.admin-header{margin-bottom:20px}.button-link{display:inline-block;color:white;text-decoration:none;background:var(--card2);padding:10px 13px;border-radius:10px;margin-left:8px}.admin-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:15px}.tab{padding:11px 15px;border-radius:10px;background:var(--card2);border:1px solid var(--border);color:white}.tab.active{background:var(--accent)}.admin-card{padding:18px;margin-bottom:15px}.editor-row{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:8px;margin:8px 0;align-items:center}.editor-row input,.editor-row select,.admin-card textarea{width:100%;background:#0f172a;color:white;border:1px solid var(--border);border-radius:8px;padding:9px}.admin-card textarea{min-height:520px;font-family:Consolas,monospace}.subcard{background:#10182a;border:1px solid var(--border);border-radius:12px;padding:12px;margin:10px 0}.subcard h3{margin:0 0 10px}.sticky-save{position:sticky;bottom:10px;background:#10182a;border:1px solid var(--border);padding:12px;border-radius:12px;display:flex;gap:12px;align-items:center}.sticky-save button,.admin-card button{padding:10px 14px;border-radius:9px;border:1px solid var(--border);background:var(--card2);color:white}
@media(max-width:600px){.choice-grid{grid-template-columns:1fr 1fr}.admin-header{align-items:flex-start;flex-direction:column}.editor-row{grid-template-columns:1fr 1fr}.topbar h1{font-size:1.7rem}}
.section-title {
  margin: 0 0 14px;
  font-size: 1rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.status-label {
  display: block;
  margin-bottom: 5px;
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 20;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 18px;

  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(6px);
}

.popup-panel {
  width: min(620px, 100%);
  max-height: calc(100vh - 130px);
  overflow-y: auto;

  padding: 18px;

  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;

  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

body.popup-open {
  overflow: hidden;
}

#strobeBtn,
#blackoutBtn,
#speedBtn,
.menu-card,
.choice-btn,
.color-btn {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}

#strobeBtn {
  touch-action: none;
}

button img,
button span {
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

.stop-movement-btn {
  width: 100%;
  min-height: 54px;
  margin-top: 14px;

  border: 1px solid #ef4444;
  border-radius: 14px;

  color: white;
  background: #7f1d1d;

  font-weight: 900;
  font-size: 1rem;

  user-select: none;
  -webkit-user-select: none;
}

.stop-movement-btn:active {
  background: #dc2626;
}

.command-header,
.command-row {
  display: grid;
  grid-template-columns: 90px 90px 1fr 42px;
  gap: 8px;
  align-items: center;
}

.command-header {
  margin: 10px 0 5px;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 900;
  text-transform: uppercase;
}

.command-row {
  margin-bottom: 7px;
}

.command-row input {
  width: 100%;
}

.delete-command {
  height: 38px;
  padding: 0 !important;
  color: white;
  background: #7f1d1d !important;
}