.wrap{
    max-width:1100px; margin: clamp(16px,3vw,36px) auto;
    display:grid; gap:20px;
    grid-template-columns: 1fr minmax(280px, 340px);
    padding: 0 16px;
  }
  @media (max-width: 980px){
    .wrap{ grid-template-columns: 1fr; }
  }

  .panel, .board{
    background: var(--panel); border:1px solid rgba(255,255,255,.06);
    border-radius: var(--radius); box-shadow: var(--shadow);
    backdrop-filter: blur(10px);
  }

  /* dark mode — neprůhledné karty pro lepší čitelnost */
  [data-theme="dark"]{ --panel: rgba(15,22,34,0.95); }
  [data-theme="dark"] .panel, [data-theme="dark"] .board{
    border: 1px solid rgba(255,255,255,.08);
    backdrop-filter: none; /* vypne glass blur, ať nic neprosvítá */
  }

  header.panel{
    padding:18px 20px;
    display:flex; align-items:center; justify-content:space-between; gap:12px;
  }
  header .title{
    display:flex; align-items:center; gap:12px;
  }
  .logo{
    width:36px; aspect-ratio:1/1; border-radius:12px;
    background: radial-gradient(120% 120% at 30% 20%, var(--accent2), transparent 60%),
                linear-gradient(135deg, rgba(96,165,250,.25), rgba(34,211,238,.08));
    box-shadow: 0 0 30px rgba(34,211,238,.25), inset 0 0 30px rgba(96,165,250,.15);
  }
  h1{margin:0; font-size: clamp(18px,2.2vw,22px); font-weight:650; letter-spacing:.4px}
  .score{
    display:flex; gap:14px; align-items:center; font-variant-numeric: tabular-nums;
  }
  .badge{
    padding:6px 10px; border-radius:999px; font-size:14px;
    background: rgba(96,165,250,.12); border:1px solid rgba(96,165,250,.35);
    box-shadow: inset 0 0 25px rgba(96,165,250,.08);
  }

/* moderní přepínač light/dark */
.theme-toggle{
  display:inline-flex; align-items:center; cursor:pointer; user-select:none;
}
.theme-toggle input{ display:none; }
.theme-toggle .track{
  position:relative; width:64px; height:32px; border-radius:999px;
  background: linear-gradient(180deg, rgba(96,165,250,.16), rgba(34,211,238,.08));
  border:1px solid rgba(255,255,255,.12);
  box-shadow: 0 6px 18px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.06);
  transition: background .2s ease, border-color .2s ease;
  display:flex; align-items:center; justify-content:space-between;
  padding: 0 8px;
}
.theme-toggle .icon{ font-size:14px; opacity:.8; }
.theme-toggle .thumb{
  position:absolute; top:3px; left:3px; width:26px; height:26px; border-radius:50%;
  background: #fff; box-shadow: 0 6px 16px rgba(0,0,0,.35);
  transition: transform .22s ease;
}

/* stav DARK (zaškrtnuté) – palec vpravo */
.theme-toggle input:checked + .track .thumb{
  transform: translateX(32px);
}

/* světlý režim – světlejší „kolejnice“ */
[data-theme="light"] .theme-toggle .track{
  background:#e9effa; border-color: rgba(0,0,0,.08);
}
[data-theme="light"] .theme-toggle .thumb{
  background:#fff; box-shadow: 0 4px 12px rgba(0,0,0,.18);
}

  .board{ padding:18px; display:grid; gap:14px; }
  .grid{
    aspect-ratio:1/1; width:100%;
    display:grid; grid-template-columns: repeat(9,1fr); grid-template-rows: repeat(9,1fr);
    border-radius:12px; overflow:hidden; border:1px solid rgba(255,255,255,.06);
    background: var(--grid);
  }
  .cell{
    position:relative;
    display:flex; align-items:center; justify-content:center;
    border:1px solid rgba(255,255,255,.06);
    background: var(--cell);
    font-weight:600; font-size: clamp(16px, 2.2vw, 22px);
    cursor:pointer; user-select:none;
    transition: transform var(--speed) ease, background var(--speed) ease, box-shadow var(--speed) ease, color var(--speed) ease;
  }
  .cell.prefilled{ color:#c8d4e6; cursor:default; background: #10223a; }
  .cell:hover{ transform: translateY(-1px); }
  .cell.selected{ outline:2px solid rgba(96,165,250,.65); z-index:2; }
  .cell.highlight{ background: #10233b; }
  /* barevné zvýraznění shodných čísel */
  .cell.same{ /* základ: neřeší barvu textu, jen podbarvení */
    text-shadow: 0 0 14px rgba(96,165,250,.25);
  }
  /* dark palette */
  .cell.same-1{ background: rgba(244,63,94,.22); }   /* rose */
  .cell.same-2{ background: rgba(249,115,22,.22); }  /* orange */
  .cell.same-3{ background: rgba(234,179,8,.22); }   /* yellow */
  .cell.same-4{ background: rgba(132,204,22,.22); }  /* lime */
  .cell.same-5{ background: rgba(16,185,129,.22); }  /* emerald */
  .cell.same-6{ background: rgba(6,182,212,.22); }   /* cyan */
  .cell.same-7{ background: rgba(236,72,153,.35); }
  .cell.same-8{ background: rgba(139,92,246,.22); }  /* violet */
  .cell.same-9{ background: rgba(236,72,153,.22); }  /* pink */

  /* light palette */
  [data-theme="light"] .cell.same-1{ background:#ffe4e6; }
  [data-theme="light"] .cell.same-2{ background:#ffedd5; }
  [data-theme="light"] .cell.same-3{ background:#fef9c3; }
  [data-theme="light"] .cell.same-4{ background:#ecfccb; }
  [data-theme="light"] .cell.same-5{ background:#d1fae5; }
  [data-theme="light"] .cell.same-6{ background:#cffafe; }
  [data-theme="light"] .cell.same-7{ background:rgba(219,39,119,.25); }
  [data-theme="light"] .cell.same-8{ background:#ede9fe; }
  [data-theme="light"] .cell.same-9{ background:#fce7f3; }
  .cell.error{ background:#2a1114; box-shadow: inset 0 0 0 2px rgba(248,113,113,.5); color:#fecaca; }

  /* při zvýraznění bloku ještě o něco víc vystoupí */
  .cell.highlight{ background:#0f2440; }

  /* silnější mřížka 3x3 */
  .grid > .cell:nth-child(3n){ border-right:3px solid rgba(96,165,250,.35); }
  .grid > .cell:nth-child(n+19):nth-child(-n+27),
  .grid > .cell:nth-child(n+46):nth-child(-n+54){ border-bottom:3px solid rgba(96,165,250,.35); }

  .numpad{
    display:grid; grid-template-columns: repeat(9,1fr); gap:10px;
    margin-bottom: 10px;
  }
  .nbtn{
    padding:10px 0; text-align:center; border-radius:12px;
    background: #111b2b; border:1px solid rgba(255,255,255,.08);
    cursor:pointer; transition: transform var(--speed), box-shadow var(--speed), background var(--speed);
    font-weight:600; color: var(--text);
  }
  .nbtn:hover{ transform: translateY(-1px); box-shadow: 0 8px 24px rgba(0,0,0,.25); }
  .nbtn:active{ transform: translateY(0); }
  .controls{
    display:flex; flex-wrap:wrap; gap:10px; margin-top:4px;
  }
  .btn{
    padding:10px 14px; border-radius:12px; border:1px solid rgba(255,255,255,.1);
    background: linear-gradient(180deg, rgba(96,165,250,.16), rgba(34,211,238,.08));
    cursor:pointer; font-weight:600; color: var(--text);
    transition: transform var(--speed), box-shadow var(--speed), opacity var(--speed);
  }
  .btn:hover{ transform: translateY(-1px); box-shadow: 0 10px 30px rgba(34,211,238,.15); }
  .btn.secondary{ background: #111b2b; }
  .btn.danger{ background: linear-gradient(180deg, rgba(248,113,113,.2), rgba(190,24,93,.12)); border-color: rgba(248,113,113,.3); }

  /* zaručí čitelnost textu v selectu a jeho menu */
  select.btn{ color: var(--text); }
  select.btn option{ color:#111; background:#fff; }

  .sidebar.panel{ padding:18px; }
  .sidebar h2{ margin: 6px 0 10px; font-size:18px }
  .sidebar p, .sidebar li{ color: var(--muted); line-height:1.6; }
  .kpi{
    display:grid; grid-template-columns: 1fr 1fr; gap:10px; margin-bottom:10px;
  }
  .chip{
    padding:10px 12px; border-radius:12px; background:#0f1828; border:1px solid rgba(255,255,255,.07);
    display:flex; align-items:center; justify-content:space-between; font-variant-numeric: tabular-nums;
  }
  [data-theme="light"] .chip{
    background:#ffffff;
    border:1px solid rgba(0,0,0,.06);
  }
  .chip .val{ color:var(--accent2); font-weight:700; }

  .footer{
    margin-top:4px; font-size:12px; color:#8c99ad; text-align:center;
  }

  @keyframes drift{
    0%{ transform: translate3d(0,0,0) scale(1); }
    100%{ transform: translate3d(2%, -2%, 0) scale(1.02); }
  }
  /* malé animované glow kolem výběru/nápovědy */
  @keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(96,165,250,.55); }
    100% { box-shadow: 0 0 0 18px rgba(96,165,250,0); }
  }
  .pulse{ animation: pulse .9s ease-out; }