:root{
  --bg:#0f1115;
  --panel:#141822;
  --muted:#22273a;
  --text:#e6e9ef;
  --acc:#5de4c7;
  --acc2:#89ddff;
  --danger:#ff6b6b;
}
*{box-sizing:border-box}
body.dark{background:var(--bg); color:var(--text); font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Cantarell, Noto Sans, Ubuntu, Arial, 'Apple Color Emoji','Segoe UI Emoji'; margin:0}
a{color:var(--acc2); text-decoration:none}
.container{max-width:1100px; margin: 20px auto; padding: 0 16px}
.topbar{display:flex; align-items:center; gap:16px; background:var(--panel); padding:10px 16px; border-bottom:1px solid var(--muted)}
.brand{font-weight:700}
.nav a{margin-right:12px}
.nav .right{margin-left:auto}
.dropdown{position:relative; display:inline-block}
.dropdown-menu{display:none; position:absolute; background:var(--panel); border:1px solid var(--muted); padding:8px; min-width:180px; z-index:10}
.dropdown:hover .dropdown-menu{display:block}
.btn{background:var(--acc); color:#001717; border:none; padding:8px 12px; border-radius:10px; cursor:pointer; font-weight:600; box-shadow: 0 2px 0 rgba(0,0,0,.2)}
.btn.small{padding:6px 10px; font-size:12px; border-radius:8px}
.btn.secondary{background:var(--acc2); color:#001018}
.btn.danger{background:var(--danger); color:#1a0000}
.card{background:var(--panel); border:1px solid var(--muted); border-radius:16px; padding:16px; margin-bottom:16px; box-shadow: 0 8px 30px rgba(0,0,0,.15)}
.card.inner{background:transparent; border-color:var(--muted)}
.grid{display:grid; gap:12px}
.grid.cols-2{grid-template-columns: 1fr 1fr}
.grid.cols-3{grid-template-columns: repeat(3, 1fr)}
.gap{gap:16px}
.row{display:flex; align-items:center; gap:10px}
.spacer{flex:1}
input, textarea, select{background:#101420; color:var(--text); border:1px solid var(--muted); border-radius:10px; padding:8px}
label{display:block; font-size:12px; opacity:.8}
.dropzone{border:1px dashed var(--acc2); padding:16px; border-radius:12px; text-align:center}
.preview{max-width:100%; margin-top:12px; border:1px solid var(--muted); border-radius:12px
}
.pill{border:1px solid var(--muted); border-radius:12px; padding:8px 10px; display:flex; gap:10px; align-items:center; justify-content:space-between}
.pill.disabled{opacity:.5}
.link{color:var(--acc2); cursor:pointer}
.hidden{display:none}
.footer{opacity:.6; font-size:12px; text-align:center; padding:24px}
.challenge{border:1px solid var(--muted); border-radius:12px; padding:10px}
.challenge img{max-width:100%; border-radius:8px; border:1px solid var(--muted)}
.challenge .score{background:#0b1220; border:1px solid var(--muted); border-radius:8px; padding:2px 6px}
.qr-grid{display:grid; grid-template-columns: repeat(29, 18px); gap:2px; margin:8px 0}
.qr-cell{width:18px; height:18px; border:1px solid #1b2333; background:#0b1020; cursor:pointer}
.qr-cell.on{background:#e6e9ef}
.svg-graph, .spectrum-svg{background:#0b1020; border:1px solid var(--muted); border-radius:12px; min-height:220px; padding:10px}
.topbar .btn{margin-left:8px}


.stage { position: relative; width: 100%; }
.stage img.preview { display:block; width:100%; height:auto; }

.sq-overlay { position:absolute; border:2px solid #8aa0ff; box-shadow: 0 0 0 9999px rgba(0,0,0,.25) inset; }
.sq-overlay.hidden { display:none; }
.sq-grid { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.sq-line { stroke:#8aa0ff; stroke-width:1; opacity:.75; }

.sq-handle { position:absolute; width:12px; height:12px; background:#ffd166; border:2px solid #1c1f2a; border-radius:50%; cursor:nwse-resize; }
.sq-handle.tl { left:-7px; top:-7px; }
.sq-handle.tr { right:-7px; top:-7px; cursor:nesw-resize; }
.sq-handle.br { right:-7px; bottom:-7px; }
.sq-handle.bl { left:-7px; bottom:-7px; cursor:nesw-resize; }



/*test*/


/* Layout fixes */
.nav{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  width:100%;
}

.nav a{
  margin-right:0;
}

.nav .right{
  margin-left:auto;
}

.row{
  flex-wrap:wrap;
}

input,
textarea,
select{
  max-width:100%;
}

textarea{
  min-height:90px;
  resize:vertical;
}

.card{
  overflow:hidden;
}

.pill{
  flex-wrap:wrap;
}

code{
  background:#0b1020;
  border:1px solid var(--muted);
  border-radius:8px;
  padding:3px 6px;
  color:var(--acc2);
  word-break:break-all;
}

.muted-text{
  opacity:.75;
  font-size:14px;
}

/* Admin page */
.admin-user-row,
.admin-chal-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  border:1px solid var(--muted);
  border-radius:12px;
  padding:10px;
  margin-bottom:10px;
  background:#101420;
}

.admin-user-main,
.admin-chal-main{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}

.admin-user-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.admin-chal-row.disabled{
  opacity:.5;
}

.toggle{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  opacity:1;
}

.toggle input{
  width:18px;
  height:18px;
}

@media (max-width: 850px){
  .grid.cols-2,
  .grid.cols-3{
    grid-template-columns:1fr;
  }

  .topbar{
    align-items:flex-start;
    flex-direction:column;
  }

  .nav .right{
    margin-left:0;
  }

  .admin-user-row,
  .admin-chal-row{
    align-items:stretch;
    flex-direction:column;
  }

  .admin-user-actions{
    justify-content:flex-start;
  }
}




/*test2*/

.admin-invite-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:10px;
  margin-bottom:10px;
  border:1px solid var(--muted);
  border-radius:12px;
  background:#101420;
}

@media (max-width:850px){
  .admin-invite-row{
    flex-direction:column;
    align-items:flex-start;
  }
}


.admin-clock-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  border:1px solid var(--muted);
  border-radius:10px;
  padding:8px 10px;
  margin-top:8px;
  background:#101420;
}