/* controls.css
   Ovládací prvky – přepínače, tlačítka, velikost mřížky a jejich stavy. */
.controls{
  display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center; justify-content:space-between;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06);
  padding:12px 14px; border-radius:12px;
}
.left, .right{display:flex; gap:12px; align-items:center; flex-wrap:wrap}
label.switch{
  display:inline-flex; gap:10px; align-items:center; cursor:pointer; user-select:none;
  color:var(--muted); font-size:14px;
}
.switch input{appearance:none; width:42px; height:24px; border-radius:999px; position:relative; outline:none; border:1px solid #2b3250; background:#0e1430; transition:background .2s}
.switch input::after{
  content:""; position:absolute; left:2px; top:2px; width:18px; height:18px; border-radius:50%;
  background:#96a2c2; transition:left .2s ease, background .2s;
  box-shadow:0 1px 2px rgba(0,0,0,.4), 0 4px 10px rgba(0,0,0,.25) inset;
}
.switch input:checked{ background: linear-gradient(180deg, #13204a, #0f1a3a) }
.switch input:checked::after{ left:22px; background:var(--accent) }

.sizeCtrl{
  display:flex; gap:8px; align-items:center; color:var(--muted); font-size:14px;
  background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.06);
  padding:6px 10px; border-radius:10px;
}
.sizeCtrl input[type=number]{
  width:64px; padding:10px 8px; border-radius:8px; border:1px solid #2b3250; background:#0c0f1d; color:var(--ink)
}

button{
  background:linear-gradient(180deg, #223065, #1b2448);
  color:white; border:1px solid #3a4ea2; border-radius:10px; padding:10px 14px; font-weight:600;
  cursor:pointer; transition:transform .08s ease, filter .2s ease, background .2s;
}
button:hover{ filter:brightness(1.05) }
button:active{ transform:translateY(1px) }
.ghost{ background:transparent; border:1px solid #33406f; color:#cdd6f4 }
.danger{ background:linear-gradient(180deg, #5f1f2b, #3d1720); border-color:#8a3341 }