:root{
  --bg:#0b1220;
  --card:#121b2f;
  --text:#e8eefc;
  --muted:#aab6d6;
  --border:rgba(255,255,255,.12);
  --yellow:#ffd84d;
  --green:#38d86a;
}
*{box-sizing:border-box}
body{margin:0;background:linear-gradient(180deg,#070b14,#0b1220);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial}
.wrap{max-width:980px;margin:0 auto;padding:18px}
.header{display:flex;gap:12px;align-items:center;justify-content:space-between;margin-bottom:14px}
h1{margin:0;font-size:20px}
.sub{font-size:12px;color:var(--muted);margin-top:4px}
.panel{background:rgba(18,27,47,.9);border:1px solid var(--border);border-radius:14px;padding:14px;margin-bottom:12px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
label{color:var(--muted);font-size:12px}
select{background:#0f1730;color:var(--text);border:1px solid var(--border);border-radius:10px;padding:8px}
.counts{margin-left:auto;color:var(--muted);font-size:12px}
.payouts{margin-top:10px;color:var(--muted);font-size:12px;line-height:1.6}
.btn{background:#1f2b4e;border:1px solid var(--border);color:var(--text);border-radius:10px;padding:8px 10px;cursor:pointer}
.btn:hover{filter:brightness(1.1)}
.btn2{background:#203a6a}
.auth{display:flex;gap:8px;align-items:center}
.meBox{font-size:12px;color:var(--muted);padding:6px 10px;border:1px solid var(--border);border-radius:999px}
.hidden{display:none !important}

.legend{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.pill{font-size:12px;border-radius:999px;padding:6px 10px;border:1px solid var(--border)}
.pill.avail{background:rgba(255,255,255,.05)}
.pill.pending{background:rgba(255,216,77,.18)}
.pill.paid{background:rgba(56,216,106,.16)}
.pill.mine{outline:2px solid rgba(120,160,255,.6)}

.grid{display:grid;grid-template-columns:repeat(10,1fr);gap:8px}
.grid11 {
  display: grid;
  grid-template-columns: repeat(11, minmax(0, 1fr));
  gap: 8px; /* match your existing gap */
}

.hdr {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  border-radius: 10px;
  background: rgba(255,255,255,0.08);
  min-height: 56px; /* should match square height roughly */
}

.hdr.corner {
  background: transparent;
}

.cell{
  min-height:54px;
  border-radius:12px;
  border:1px solid var(--border);
  padding:8px;
  background:rgba(255,255,255,.04);
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  flex-direction:column;
  cursor:pointer;
  position:relative;
}
.cell small{color:rgba(255,255,255,.55);font-size:11px}
.cell .name{font-size:12px;line-height:1.2}

.cell.available{background:rgba(255,255,255,.04)}
.cell.pending{background:rgba(255,216,77,.28); border-color:rgba(255,216,77,.45)}
.cell.paid{background:rgba(56,216,106,.22); border-color:rgba(56,216,106,.45)}

.cell.mine::after{
  content:"";
  position:absolute; inset:-2px;
  border-radius:14px;
  border:2px solid rgba(120,160,255,.75);
  box-shadow:0 0 18px rgba(120,160,255,.25);
  pointer-events:none;
}

.hint{margin-top:10px;color:var(--muted);font-size:12px}

.modal{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;padding:14px}
.modalCard{width:min(520px,100%);background:var(--card);border:1px solid var(--border);border-radius:14px;padding:12px}
.modalHead{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.x{background:transparent;border:0;color:var(--muted);font-size:18px;cursor:pointer}
input{
  width:100%;margin:8px 0;
  background:#0f1730;color:var(--text);
  border:1px solid var(--border);border-radius:10px;padding:10px
}
.formRow{display:grid;grid-template-columns:1fr 1fr; gap:10px}
/* ===== Multi-select squares UI ===== */
.actions-row{
  display:flex;
  gap:10px;
  align-items:center;
  margin-top:10px;
  flex-wrap:wrap;
}
.selected-count{
  opacity:.9;
  font-weight:600;
}
.btn.secondary{
  opacity:.9;
}
.btn:disabled{
  opacity:.45;
  cursor:not-allowed;
}

/* A "selected but not yet submitted" square highlight */
.sq.selected{
  outline: 3px solid rgba(255,255,255,.55);
  box-shadow: 0 0 0 3px rgba(0,0,0,.25) inset, 0 0 18px rgba(255,255,255,.15);
  transform: translateY(-1px);
}
/* Selected (multi-select) */
.selected {
  outline: 3px solid rgba(255,255,255,.55);
  box-shadow: 0 0 0 3px rgba(0,0,0,.25) inset, 0 0 18px rgba(255,255,255,.15);
  transform: translateY(-1px);
}
.payRow {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}