/* SmartBoard styles - dark aesthetic */
#sb-pages .page-item { display:flex;gap:8px;align-items:center;padding:6px;border-radius:6px;cursor:pointer; }
#sb-pages .page-item:hover { background:rgba(255,255,255,0.02); }
#sb-pages .page-thumb { width:84px;height:60px;border-radius:4px;overflow:hidden;border:1px solid rgba(255,255,255,0.03);background:#060812;display:flex;align-items:center;justify-content:center; }
#sb-pages .page-meta { font-size:12px;color:var(--text-muted); }
#sb-pages .page-item.active { outline:2px solid rgba(255,255,255,0.04); }
#sb-canvas { touch-action: none; cursor: crosshair; background:transparent; display:block; }

/* Fullscreen mode: make smartboard occupy full viewport */
#section-smartboard.sb-fullscreen-mode {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  margin: 0 !important;
  z-index: 99999 !important;
  background: var(--bg) !important;
  display: flex;
  align-items: stretch;
  justify-content: center;
}
#section-smartboard.sb-fullscreen-mode .card {
  width: 100%;
  height: 100%;
  border-radius: 0;
  display: flex;
  flex-direction: column;
}
#sb-pages { transition: all 220ms ease; }
#sb-pages.horizontal { display:flex; flex-direction:row; height:140px; overflow:auto; }
#sb-pages .page-item { min-width:100%; }
#sb-pages .page-item .page-thumb canvas { width:120px; height:75px; }
#sb-pages-orient { margin-left:12px; }