/* ───────────────────────────────────────────
   Board selector wizard — high contrast + animations
   ─────────────────────────────────────────── */
.device-row {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:0.5rem;
  margin-top:0.5rem;
}

.btn-board-wizard {
  border-radius:999px;
  border:1px solid #888;
  padding:0.45rem 1rem;
  font-size:0.9rem;
  background:var(--card);
  color:var(--fg);
  cursor:pointer;
  transition:background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.btn-board-wizard:hover {
  filter:brightness(1.1);
  transform:translateY(-1px);
}

/* dialog background */
dialog#boardWizard {
  border:none;
  border-radius:18px;
  padding:0;
  max-width:700px;
  width:92vw;
  background:#111 !important;
  color:#fff !important;
  box-shadow:0 25px 60px rgba(0,0,0,0.85);
}

html[data-theme="light"] dialog#boardWizard {
  background:#fff !important;
  color:#111 !important;
  box-shadow:0 20px 50px rgba(15,23,42,0.18);
}

/* backdrop */
dialog#boardWizard::backdrop {
  background:rgba(0,0,0,0.65);
  animation:boardWizard-backdrop-fade 0.18s ease-out;
}

/* animate content on open */
dialog#boardWizard[open] .board-wizard-inner {
  animation:boardWizard-pop-in 0.22s ease-out;
  transform-origin:top center;
}

.board-wizard-inner {
  padding:1.8rem 2rem 1.4rem;
}

.board-wizard-header {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  margin-bottom:1.2rem;
}

.board-wizard-header h2 {
  margin:0;
  font-size:1.3rem;
  font-weight:700;
  color:#fff;
}

.board-wizard-subtitle {
  font-size:0.95rem;
  color:#ddd !important;
  margin-top:0.3rem;
}

html[data-theme="light"] .board-wizard-subtitle {
  color:#444 !important;
}

.board-wizard-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(160px,1fr));
  gap:1rem;
  margin-top:0.5rem;
}

.board-card {
  border-radius:14px;
  padding:0.9rem 1rem;
  background:#1a1a1a !important;
  border:1px solid #333 !important;
  color:#fff !important;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  gap:0.4rem;
  font-size:0.95rem;
  transition:
    transform 0.18s cubic-bezier(0.19, 1, 0.22, 1),
    box-shadow 0.18s ease,
    border-color 0.18s ease,
    background-color 0.18s ease,
    filter 0.18s ease;
}

.board-card:hover {
  background:#222 !important;
  border-color:#3b82f6 !important;
  box-shadow:0 10px 26px rgba(59,130,246,0.4);
  transform:translateY(-4px) scale(1.01);
}

.board-card:focus-visible {
  outline:2px solid #60a5fa;
  outline-offset:2px;
}

.board-card-title {
  font-weight:600;
  font-size:1rem;
  color:#fff;
}

.board-card-tag {
  display:inline-block;
  padding:0.18rem 0.55rem;
  border-radius:999px;
  font-size:0.75rem;
  border:1px solid #3b82f6 !important;
  background:#1e3a8a !important;
  color:#b3d7ff !important;
  animation:boardWizard-tag-pulse 2.8s ease-in-out infinite;
}

.board-card-desc {
  font-size:0.85rem;
  color:#ddd !important;
  line-height:1.4;
}

/* light mode variants */
html[data-theme="light"] .board-card {
  background:#fff !important;
  border-color:#ddd !important;
  color:#111 !important;
}

html[data-theme="light"] .board-card:hover {
  background:#f4f8ff !important;
  border-color:#3b82f6 !important;
  box-shadow:0 10px 24px rgba(59,130,246,0.24);
}

html[data-theme="light"] .board-card-tag {
  background:#e0ecff !important;
  border-color:#93c5fd !important;
  color:#1d4ed8 !important;
}

/* footer */
.board-wizard-footer {
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:1rem;
  margin-top:1.3rem;
  font-size:0.85rem;
  color:#ccc !important;
}

.board-wizard-footer span {
  text-align:right;
}

.board-wizard-footer button {
  border-radius:999px;
  border:none;
  padding:0.45rem 1.1rem;
  cursor:pointer;
  font-size:0.9rem;
  background:#333;
  color:#fff;
  transition:background-color 0.16s ease, transform 0.16s ease;
}

.board-wizard-footer button:hover {
  background:#444;
  transform:translateY(-1px);
}

html[data-theme="light"] .board-wizard-footer button {
  background:#e5e5e5;
  color:#111;
}

html[data-theme="light"] .board-wizard-footer button:hover {
  background:#d4d4d4;
}

/* keyframes */
@keyframes boardWizard-pop-in {
  0% {
    opacity:0;
    transform:translateY(12px) scale(0.97);
  }
  100% {
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

@keyframes boardWizard-backdrop-fade {
  0% { opacity:0; }
  100% { opacity:1; }
}

@keyframes boardWizard-tag-pulse {
  0% {
    box-shadow:0 0 0 0 rgba(59,130,246,0.0);
    transform:scale(1);
  }
  50% {
    box-shadow:0 0 0 6px rgba(59,130,246,0.25);
    transform:scale(1.03);
  }
  100% {
    box-shadow:0 0 0 0 rgba(59,130,246,0.0);
    transform:scale(1);
  }
}