/* =========================
   palapka – global styles
   ========================= */

/* Branding & palette */
:root {
  --palapka-primary: #0071e3;
  --palapka-primary-hover: #0a84ff;

  /* Apple-like palette */
  --apple-blue:#007AFF;
  --apple-gray:#8E8E93;
  --apple-light-gray:#F2F2F7;
  --apple-card-bg:#FFFFFF;
  --apple-dark-gray:#1C1C1E;
}
body.dark { --apple-card-bg:#2C2C2E; }

.palapka-logo, .navbar-item strong{
  font-weight:600; margin-left:8px; color:var(--palapka-primary)!important;
}

/* Buttons */
.button.is-palapka{
  background-color:var(--palapka-primary); color:#fff; border-radius:999px;
  transition:all .2s ease;
}
.button.is-palapka:hover{
  background-color:var(--palapka-primary-hover);
  transform:translateY(-1px);
  box-shadow:0 4px 8px rgba(0,113,227,.3);
}

/* Flash messages */
.flash-message{ animation:fadeIn .3s ease-in-out; margin:1rem auto; max-width:800px; }
@keyframes fadeIn{ from{opacity:0; transform:translateY(-8px);} to{opacity:1; transform:translateY(0);} }
.fade-out{ opacity:0; transition:opacity .5s ease-in-out; }

.flash-messages .notification{
  border-radius:12px; padding:1.25rem 1.5rem;
  box-shadow:0 8px 20px rgba(0,0,0,.05);
  border:1px solid rgba(0,0,0,.05);
  font-size:1.05rem; backdrop-filter:blur(8px);
  background:rgba(255,255,255,.65);
  transition:all .3s ease-in-out;
  color:#1d1d1f; /* výchozí barva textu na světlém pozadí */
}

/* Kategorie (přepíší Bulmu) */
.flash-messages .notification.is-success{ background:rgba(0,200,100,.15); color:#006f3c; border-color:rgba(0,200,100,.25); }
.flash-messages .notification.is-warning{ background:rgba(255,200,0,.15); color:#8a6d00; border-color:rgba(255,200,0,.35); }
.flash-messages .notification.is-danger,
.flash-messages .notification.is-error{ background:rgba(255,80,80,.15); color:#a60000; border-color:rgba(255,80,80,.28); }
.flash-messages .notification.is-info{ background:rgba(0,122,255,.12); color:#0b5394; border-color:rgba(0,122,255,.25); }

/* Section offset (fixed navbar) */
.section{ padding-top:5rem; }


/* =========================
   QUIZ LIST – page layout
   ========================= */

.quiz-app-container{
  max-width:1080px;
  margin:0 auto 56px;
  padding:0 14px;
}

/* ---- Favorites (Netflix scroller) ---- */
.favorites-top{ margin:6px 0 12px; position:relative; }
.favorites-top h3{
  font-size:.95rem; font-weight:600; color:#111;
  border-bottom:1px solid rgba(0,0,0,.06);
  padding-bottom:8px; margin:0 0 6px;
}
.favorites-top-grid{
  display:flex; gap:10px;
  overflow-x:auto; overflow-y:hidden;
  padding:10px 2px 6px;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  cursor:grab;
}
.favorites-top-grid.dragging{ cursor:grabbing; }

/* scrollbar jen při hoveru */
.favorites-top-grid{ -ms-overflow-style:none; scrollbar-width:none; }
.favorites-top-grid::-webkit-scrollbar{ height:0; }
.favorites-top-grid:hover::-webkit-scrollbar{ height:8px; }
.favorites-top-grid::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.18); border-radius:999px; }

/* fade okraje scrolleru (uprav top: podle výšky nadpisu) */
.favorites-top::before,
.favorites-top::after{
  content:""; position:absolute; top:38px;
  width:24px; height:calc(100% - 38px);
  pointer-events:none; z-index:2;
}
.favorites-top::before{
  left:0;  background:linear-gradient(to right, var(--apple-card-bg,#fff), rgba(255,255,255,0));
}
.favorites-top::after{
  right:0; background:linear-gradient(to left,  var(--apple-card-bg,#fff), rgba(255,255,255,0));
}
body.dark .favorites-top::before{
  background:linear-gradient(to right, var(--apple-card-bg,#2C2C2E), rgba(44,44,46,0));
}
body.dark .favorites-top::after{
  background:linear-gradient(to left,  var(--apple-card-bg,#2C2C2E), rgba(44,44,46,0));
}

.fav-card{
  flex:0 0 auto; width:220px; scroll-snap-align:start;
  position:relative;
  background:#fff; border:1px solid rgba(0,0,0,.08);
  border-radius:12px; padding:10px 10px 8px;
  transition:transform .12s ease, border-color .12s ease;
}
.fav-card:hover{ transform:translateY(-1px); border-color:rgba(0,0,0,.18); }
.fav-card h5{ margin:0 0 6px; font-size:.95rem; font-weight:600; color:#111; }
.fav-card .meta-row{ display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.fav-card .meta-badge{ display:inline-flex; align-items:center; gap:6px; font-size:.8rem; color:#6b7280; background:transparent; padding:0; }

/* pilulka – počet otázek (OBLÍBENÉ) */
.fav-card > .count-pill{
  position:absolute; top:8px; right:8px;
  padding:2px 6px; min-width:auto;
  font-size:.68rem; font-weight:600; line-height:1.2;
  color:#374151; background:rgba(0,0,0,.04);
  border:1px solid rgba(0,0,0,.08); border-radius:999px;
  box-shadow:none; z-index:5;
}
body.dark .fav-card > .count-pill{
  color:#e5e7eb; background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.18);
}

/* obtížnost + téma (oblíbené) */
.fav-card .badge-obtiznost{ font-size:.72rem; font-weight:600; padding:2px 6px; border-radius:6px; }
.badge-obtiznost.easy{   background:rgba(52,199,89,.12);  color:#1f9d49; }
.badge-obtiznost.medium{ background:rgba(255,204,0,.14); color:#b38900; }
.badge-obtiznost.hard{   background:rgba(255,59,48,.12); color:#c12a22; }
.fav-card .tema-pill{ font-size:.72rem; padding:2px 6px; border-radius:999px; background:rgba(0,0,0,.04); }

/* gradient: obtížnost -> bílá (oblíbené) */
.fav-card.tint-easy{   background-image:linear-gradient(180deg, rgba(52,199,89,.10) 0%, #fff 70%); }
.fav-card.tint-medium{ background-image:linear-gradient(180deg, rgba(255,204,0,.12) 0%, #fff 70%); }
.fav-card.tint-hard{   background-image:linear-gradient(180deg, rgba(255,59,48,.10) 0%, #fff 70%); }
body.dark .fav-card.tint-easy{   background-image:linear-gradient(180deg, rgba(52,199,89,.16) 0%, var(--apple-card-bg) 72%); }
body.dark .fav-card.tint-medium{ background-image:linear-gradient(180deg, rgba(255,204,0,.18) 0%, var(--apple-card-bg) 72%); }
body.dark .fav-card.tint-hard{   background-image:linear-gradient(180deg, rgba(255,59,48,.16) 0%, var(--apple-card-bg) 72%); }

/* ---- Filters ---- */
.main-filters{
  position:sticky; top:84px; z-index:5;
  background:#fff; border:1px solid rgba(0,0,0,.06);
  border-radius:14px; padding:10px 12px; box-shadow:none;
}
.filter-row{ display:grid; align-items:center; gap:10px; grid-template-columns:1fr auto; margin-bottom:8px; }
.filter-row:last-child{ margin-bottom:0; }

.segmented{ display:inline-flex; border:1px solid rgba(0,0,0,.08); border-radius:999px; overflow:hidden; background:rgba(0,0,0,.03); }
.seg-btn{ padding:6px 12px; font-size:.9rem; border:0; background:transparent; cursor:pointer; }
.seg-btn.active{ background:var(--apple-blue); color:#fff; }
.seg-btn:not(.active):hover{ background:rgba(0,0,0,.04); }

.filter-right{ display:flex; align-items:center; gap:10px; justify-self:end; }
.results-pill{ background:rgba(0,0,0,.06); border-radius:999px; padding:6px 10px; font-size:.85rem; font-weight:600; }
.clear-btn{ background:transparent; border:1px solid rgba(0,0,0,.1); border-radius:10px; padding:6px 10px; font-size:.85rem; cursor:pointer; }
.clear-btn:hover{ background:rgba(0,0,0,.04); }

.search-wrap{ position:relative; }
.search-wrap i{ position:absolute; left:10px; top:50%; transform:translateY(-50%); opacity:.55; }
.search-wrap input{
  width:100%; min-width:260px; padding:8px 10px 8px 34px;
  border:1px solid rgba(0,0,0,.08); border-radius:10px; background:#fff;
}
.search-wrap input:focus{ outline:none; border-color:var(--apple-blue); }

.select-wrap{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.select-wrap label{ display:flex; flex-direction:column; gap:4px; font-size:.78rem; color:#6b7280; }
.select-wrap select{
  min-width:170px; padding:8px 10px;
  border:1px solid rgba(0,0,0,.08); border-radius:10px; background:#fff;
}

/* a11y focus */
.seg-btn:focus-visible,
.clear-btn:focus-visible,
.select-wrap select:focus-visible,
.search-wrap input:focus-visible{
  outline:2px solid var(--apple-blue);
  outline-offset:2px;
}

/* ---- Cards grid (results) ---- */
.quiz-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:12px;
}
.quiz-card{
  position:relative; overflow:hidden;
  background:#fff; border:1px solid rgba(0,0,0,.08);
  border-radius:14px; padding:12px 12px 10px; box-shadow:none;
  transition:transform .15s ease, border-color .15s ease, background .15s ease;
  cursor:pointer;
}
.quiz-card:hover{ transform:translateY(-1px); border-color:rgba(0,0,0,.18); }
.quiz-card h4{
  margin:0 0 6px; font-size:.98rem; font-weight:600; color:#111;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.meta-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:6px; }
.meta-badge{ background:transparent!important; color:#6b7280; padding:0!important; border-radius:0!important; font-size:.82rem; display:inline-flex; align-items:center; gap:6px; }

/* Obtížnost tečka */
.diff-dot{ width:7px; height:7px; border-radius:50%; margin-right:6px; }
.diff-dot.easy{ background:#34C759; } .diff-dot.medium{ background:#FFCC00; } .diff-dot.hard{ background:#FF3B30; }

/* pilulka – počet otázek (VÝSLEDKY) */
.quiz-card > .count-pill{
  position:absolute; top:8px; right:8px;
  padding:2px 8px; min-width:26px; text-align:center;
  font-size:.72rem; font-weight:600; line-height:1.4;
  color:#374151; background:rgba(0,0,0,.04);
  border:1px solid rgba(0,0,0,.08); border-radius:999px;
  z-index:3;
}
body.dark .quiz-card > .count-pill{
  color:#e5e7eb; background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.18);
}

/* gradient: obtížnost -> bílá (výsledky) */
.quiz-card.tint-easy{   background-image:linear-gradient(180deg, rgba(52,199,89,.12) 0%, #fff 70%); }
.quiz-card.tint-medium{ background-image:linear-gradient(180deg, rgba(255,204,0,.14) 0%, #fff 70%); }
.quiz-card.tint-hard{   background-image:linear-gradient(180deg, rgba(255,59,48,.12) 0%, #fff 70%); }
body.dark .quiz-card.tint-easy{   background-image:linear-gradient(180deg, rgba(52,199,89,.18) 0%, var(--apple-card-bg) 72%); }
body.dark .quiz-card.tint-medium{ background-image:linear-gradient(180deg, rgba(255,204,0,.20) 0%, var(--apple-card-bg) 72%); }
body.dark .quiz-card.tint-hard{   background-image:linear-gradient(180deg, rgba(255,59,48,.18) 0%, var(--apple-card-bg) 72%); }

/* End marker + pagination hide */
.end-marker{ display:none; text-align:center; margin:18px 0 8px; color:#6b7280; }
.pagination-controls{ display:none !important; }

/* Misc */
.icon-left{ margin-right:8px; }
.is-big-button{ transform:scale(1.33); transition:transform .3s ease; }
.play-action .action-icon{ font-size:2.5rem; margin-bottom:12px; transition:transform .4s ease; }
.play-action:hover .rotating-icon{ transform:rotate(360deg); }

/* favorites – drag scroll kurzor */
.favorites-top-grid{
  cursor: grab;
  user-select: none;
}
.favorites-top-grid.is-dragging{
  cursor: grabbing;
}
/* Cookie banner */
.cookie-banner{
  position: fixed;
  left: 16px; right: 16px; bottom: 16px;
  z-index: 1000;
  background: #f5f5f7;
  color:#1d1d1f;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,.12);
  padding: .85rem 1rem;
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}
.cookie-banner .cb-text{ flex: 1 1 auto; font-size: .9rem; line-height: 1.3; }
.cookie-banner .cb-buttons{ display:flex; gap:.5rem; }
@media (min-width: 768px){
  .cookie-banner{ left: auto; right: 24px; bottom:24px; width: 520px; }
}

/* =========================
   RESULTS – Session detail
   ========================= */

:root{
  --res-ok: #34C759;
  --res-par: #FFCC00;
  --res-bad: #FF3B30;
  --res-line: rgba(0,0,0,.06);
  --res-card: var(--apple-card-bg, #fff);
}

.results-wrap{
  max-width: 1100px;
  margin: 0 auto;
}

/* top panel (souhrn + akce) */
.results-panel{
  background: var(--res-card);
  border: 1px solid var(--res-line);
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(2,12,27,.06);
  padding: 1rem;
}

.results-top{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem 1rem;
  align-items:center;
  justify-content:space-between;
  margin:.5rem 0 1rem;
}

/* chips */
.results-chips{ display:flex; gap:.5rem .6rem; flex-wrap:wrap; }
.chip{
  display:inline-flex; align-items:center; gap:.35rem;
  background:#f7f9fe;
  border:1px solid var(--res-line);
  padding:.28rem .65rem;
  border-radius:999px;
  font-size:.92rem;
}
.chip.ok{ background:rgba(52,199,89,.12);  border-color:rgba(52,199,89,.25); }
.chip.par{ background:rgba(255,204,0,.14); border-color:rgba(255,204,0,.35); }
.chip.bad{ background:rgba(255,59,48,.12); border-color:rgba(255,59,48,.25); }
.chip.primary{ background:rgba(0,113,227,.10); border-color:rgba(0,113,227,.28); }

/* actions */
.results-actions{
  display:flex; flex-wrap:wrap; gap:.5rem;
}
.results-actions .input{
  min-width: 220px;
}
.results-actions .button.is-light{
  border:1px solid var(--res-line);
}

/* start info */
.startbox{
  display:flex; flex-wrap:wrap; gap:.6rem 1rem;
  align-items:center; justify-content:space-between;
  margin:.6rem 0 1rem;
}

/* filtr */
.results-filters{
  display:flex; gap:.6rem; align-items:center; flex-wrap:wrap;
  margin:.4rem 0 .8rem;
}
.results-filters .input{
  flex:1 1 280px; min-width:220px;
  background:#fff; border:1px solid var(--res-line);
  border-radius:12px;
}

/* seznam žáků */
.students{ display:flex; flex-direction:column; gap:.6rem; margin:.6rem 0; }

details.student{
  border:1px solid var(--res-line);
  border-radius:12px; background:#fff;
}
details.student > summary{
  display:flex; align-items:center; justify-content:space-between; gap:.8rem;
  padding:.65rem .8rem; cursor:pointer; list-style:none;
}
details.student > summary::-webkit-details-marker{ display:none; }
details.student[open]{ box-shadow:0 12px 28px rgba(2,12,27,.06); }
details.student[open] > summary{ border-bottom:1px dashed var(--res-line); }

.student .summary-left{
  display:flex; align-items:center; gap:.55rem; font-weight:700;
}
.student .summary-right{
  display:flex; align-items:center; gap:.45rem; flex-wrap:wrap;
}

/* odpovědi tabulky */
.answers{ padding:.6rem .8rem 1rem; }
.answers table{ width:100%; border-collapse:collapse; }
.answers th, .answers td{
  padding:.45rem .5rem; border-bottom:1px solid #f0f2f6; vertical-align:top; text-align:left;
}
.answers thead th{ background:#fbfcff; }

.answers tr.ok td{      background:rgba(52,199,89,.07); }
.answers tr.partial td{ background:rgba(255,204,0,.10); }
.answers tr.bad td{     background:rgba(255,59,48,.08); }
.answers .spravna{ font-weight:600; color:#374151; }
.answers td.center{ text-align:center; }

.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* titulek */
.results-title{
  color: var(--palapka-primary);
  font-size: 1.6rem;
  font-weight: 700;
  margin: .2rem 0 1rem;
}

/* malé badge pro písmeno volby */
.tag-key{
  display:inline-block; padding:.12rem .4rem; border-radius:6px;
  background:#eef2ff; color:#374151; font-size:.78rem;
}

/* responsivita */
@media (max-width: 720px){
  .results-actions{ width:100%; }
}

/* --- Sticky footer --- */
html, body { height: 100%; }
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main.site-main {
  flex: 1 0 auto;
  padding-top: 4rem; /* kvůli fixed navbaru, uprav podle skutečné výšky */
}

footer.footer {
  margin-top: auto;
}

/* Kompenzace dvojitého odsazení pod fixed navbar */
main.site-main { 
  /* tohle už máš – nechej jak je */
  /* padding-top: 4rem; */
}

/* 1) Zmenšíme horní padding sekce v base (je hned pod main) */
main.site-main > section.section {
  padding-top: 0.75rem;   /* jemná mezera místo 3rem od Bulmy */
}

/* 2) Pokud je uvnitř ještě druhá .section (jako na Kontakt), 
      potlačíme její horní odsazení úplně */
main.site-main > section.section .section {
  padding-top: 0; 
  margin-top: 0;}

/* =========================
   ICEBREAKER – kompaktnější verze
   ========================= */

.icebreaker-box{
  border: none;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(250,250,252,0.96));
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  padding: 14px 16px 14px;
  margin: 10px auto 0;
  max-width: 600px;                 /* menší šířka */
  animation: ib-enter .35s ease-out both;
  color: #0b0d12;
}
@media (prefers-color-scheme: dark){
  .icebreaker-box{
    background: linear-gradient(180deg, rgba(22,22,24,0.96), rgba(18,18,20,0.96));
    box-shadow: 0 3px 10px rgba(0,0,0,0.4);
    color: #e9ecf1;
  }
}

/* jemný „glow“ okraj – decentní */
.icebreaker-box::before{
  content:"";
  position:absolute; inset:0;
  border-radius:12px;
  padding:1px;
  background: linear-gradient(135deg, rgba(0,113,227,.05), rgba(0,0,0,0));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events:none;
}

.ib-title{
  text-align:center;
  font-weight: 700;
  letter-spacing: .15px;
  font-size: 1rem;
  opacity: .9;
  margin-bottom: 6px;
  font-family: "SF Pro Display","Inter",system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,sans-serif;
}

.ib-question{
  display:flex;
  gap:.4rem;
  align-items:flex-start;
  justify-content:center;
  text-align:center;
  flex-wrap:wrap;
  margin: 8px auto 6px;
  line-height: 1.35;
  max-width: 60ch;
}

.ib-label{
  font-weight:600;
  opacity:.75;
  font-size: .95rem;
}

.ib-text{
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
  font-weight: 700;
  letter-spacing: .15px;
  text-wrap: balance;
  hyphens: auto;
}

.ib-text::before,
.ib-text::after{
  content:"“";
  opacity:.25;
}
.ib-text::after{ content:"”"; }

.ib-meta{
  display:flex;
  align-items:center;
  justify-content:center;
  margin-top:8px;
  font-size:.8rem;
  opacity:.7;
  gap:.5rem;
}
.ib-tag{
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(0,0,0,.05);
}
@media (prefers-color-scheme: dark){
  .ib-tag{ background: rgba(255,255,255,.08); }
}
.ib-source{ font-style: italic; }

@keyframes ib-enter{
  from{ opacity:0; transform: translateY(6px) scale(.995); }
  to{ opacity:1; transform: translateY(0) scale(1); }
}

/* =========================
   SMARTBOX – Hand Session UI
   ========================= */
.sb-title { display:flex; align-items:center; gap:.6rem; }
.sb-header { display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom: .75rem; }
.sb-back { border-radius: 999px; }

.sb-card{
  background: var(--apple-card-bg,#fff);
  border:1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(2,12,27,.06);
}
.sb-card__body{ padding:1.1rem 1.1rem 1.2rem; }

.sb-qr { max-width: 360px; margin: 0 auto; }
.sb-qr .image { border-radius: 12px; overflow: hidden; border:1px solid rgba(0,0,0,.06); background:#fff; }

.sb-meta { display:flex; justify-content:center; }
.sb-pill{
  display:inline-flex; align-items:center; gap:.5rem;
  background:rgba(0,0,0,.05);
  border:1px solid rgba(0,0,0,.08);
  border-radius:999px; padding:.35rem .75rem; font-weight:600;
}
body.dark .sb-pill{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.18); }

.sb-join .input{ border-radius: 999px; }
.sb-join .button{ border-radius: 999px; }

/* Ovládání */
.sb-controls{ display:flex; flex-direction:column; gap:.9rem; margin-bottom:.6rem; }
.sb-controls__buttons{ display:flex; flex-wrap:wrap; gap:.5rem; }

/* Stav kola */
.sb-statebox{
  display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;
  border:1px dashed rgba(0,0,0,.1); border-radius:12px; padding:.5rem .65rem; margin:.3rem 0 1rem;
  background: rgba(0,0,0,.02);
}
body.dark .sb-statebox{ background: rgba(255,255,255,.03); }
.sb-state-label{ color:#6b7280; font-size:.95rem; }
.sb-state-value{
  font-weight:700; padding:.12rem .5rem; border-radius:999px; border:1px solid transparent;
}
.sb-state-value.open{ color:#1f9d49; background: rgba(52,199,89,.12); border-color: rgba(52,199,89,.25); }
.sb-state-value.locked{ color:#b38900; background: rgba(255,204,0,.14); border-color: rgba(255,204,0,.35); }
.sb-state-note{ color:#6b7280; }

/* Pořadí přihlášených – kompaktní grid */
.sb-order-list{
  list-style:none; padding:0; margin:0;
  display:grid; gap:.5rem;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.sb-order-item{
  display:flex; align-items:center; gap:.6rem;
  border:1px solid rgba(0,0,0,.08); border-radius:12px; padding:.5rem .65rem;
  background:#fff;
}
body.dark .sb-order-item{ background: var(--apple-card-bg,#2C2C2E); }
.sb-order-item .num{
  width:24px; height:24px; border-radius:999px; display:inline-grid; place-items:center;
  font-weight:700; background:rgba(0,0,0,.06); color:#111; font-size:.9rem;
}
body.dark .sb-order-item .num{ background: rgba(255,255,255,.10); color:#e5e7eb; }
.sb-order-item .name{ font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Nepřihlášení – chips wrap */
.sb-notraised-list{
  list-style:none; padding:0; margin:0;
  display:flex; flex-wrap:wrap; gap:.45rem .5rem;
}
.sb-chip{
  border:1px solid rgba(0,0,0,.08); border-radius:999px; padding:.25rem .6rem; background:#fff; font-size:.9rem;
}
body.dark .sb-chip{ background: var(--apple-card-bg,#2C2C2E); }

/* Připojení žáci – people grid */
.sb-participants-grid{
  list-style:none; padding:0; margin:0;
  display:grid; gap:.55rem;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.sb-person{
  display:flex; align-items:center; gap:.6rem;
  border:1px solid rgba(0,0,0,.08); border-radius:12px; padding:.45rem .6rem; background:#fff;
}
body.dark .sb-person{ background: var(--apple-card-bg,#2C2C2E); }
.sb-person .avatar{
  width:32px; height:32px; border-radius:999px; display:inline-grid; place-items:center; font-weight:800; color:#fff;
  background: var(--sb-avatar, var(--palapka-primary));
  font-size:.85rem; letter-spacing:.2px;
}
.sb-person .label{
  font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width: 100%;
}

/* Animace při změně (příchozí hlas/uživatel) */
@keyframes popIn { from { opacity:0; transform: translateY(4px) scale(.98); } to { opacity:1; transform: translateY(0) scale(1); } }
.pop-in { animation: popIn .18s ease-out both; }

/* Responsivní zmenšení „karetní“ hustoty */
@media (max-width: 780px){
  .sb-order-list { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .sb-participants-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

/* =========================
   SMARTBOX – Poll Session
   ========================= */
.sb-title { display:flex; align-items:center; gap:.6rem; }
.sb-header { display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom: .75rem; }
.sb-back { border-radius: 999px; }

.sb-card{
  background: var(--apple-card-bg,#fff);
  border:1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(2,12,27,.06);
}
.sb-card__body{ padding:1.1rem 1.1rem 1.2rem; }

.sb-qr { max-width: 360px; margin: 0 auto; }
.sb-qr .image { border-radius: 12px; overflow: hidden; border:1px solid rgba(0,0,0,.06); background:#fff; }

.sb-meta { display:flex; justify-content:center; }
.sb-pill{
  display:inline-flex; align-items:center; gap:.5rem;
  background:rgba(0,0,0,.05);
  border:1px solid rgba(0,0,0,.08);
  border-radius:999px; padding:.35rem .75rem; font-weight:600;
}
body.dark .sb-pill{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.18); }

.sb-join .input{ border-radius: 999px; }
.sb-join .button{ border-radius: 999px; }

/* Poll rows container */
.sb-tally { margin-top:.5rem; }
.poll-rows { display:flex; flex-direction:column; gap:.55rem; }

/* Single poll row */
.poll-row{
  border:1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  background: #fff;
  padding: .55rem .7rem .65rem;
  box-shadow: 0 8px 18px rgba(2,12,27,.05);
}
body.dark .poll-row{ background: var(--apple-card-bg,#2C2C2E); }

.poll-row .left{
  display:flex; align-items:center; gap:.55rem; margin-bottom:.35rem;
}
.keypill{
  display:inline-grid; place-items:center;
  width:26px; height:26px; border-radius:999px;
  font-weight:800; font-size:.9rem; color:#fff;
  background: var(--palapka-primary, #0071e3);
  box-shadow: 0 3px 10px rgba(0,113,227,.25) inset, 0 1px 0 rgba(255,255,255,.35);
}
.label{ font-weight:700; letter-spacing:.2px; }

.poll-row .right{
  display:flex; align-items:center; gap:.5rem; margin:.15rem 0 .45rem; color:#6b7280;
}
.count{ font-weight:800; color:#111; }
body.dark .count{ color:#e5e7eb; }
.percent{ font-variant-numeric: tabular-nums; opacity:.8; }

/* Meter bar */
.meter{
  height:12px; border-radius:999px; background:#eef2fa;
  overflow:hidden; border:1px solid rgba(0,0,0,.06);
}
.meter > span{
  display:block; height:100%;
  background: linear-gradient(90deg, var(--palapka-primary,#0071e3), var(--palapka-primary-hover,#0a84ff));
  transform-origin:left center;
  width:0%;
}

/* Inbound animation */
@keyframes popIn { from { opacity:0; transform: translateY(4px) scale(.98); } to { opacity:1; transform: translateY(0) scale(1); } }
.pop-in { animation: popIn .18s ease-out both; }

/* Bump when value increases */
@keyframes bump {
  0% { transform: scale(1); box-shadow: 0 8px 18px rgba(2,12,27,.05); }
  35% { transform: scale(1.01); box-shadow: 0 10px 22px rgba(2,12,27,.10); }
  100% { transform: scale(1); box-shadow: 0 8px 18px rgba(2,12,27,.05); }
}
.poll-row.bump { animation: bump .35s ease-out; }

/* Smaller on mobile */
@media (max-width: 760px){
  .poll-row { padding:.5rem .6rem; }
  .keypill { width:24px; height:24px; font-size:.85rem; }
  .meter { height:10px; }
}

/* Admin theme tokens (fix pro var(--primary-color) atd.) */
:root{
  --primary-color: var(--palapka-primary, #0071e3);
  --primary-color-dark: var(--palapka-primary-hover, #0a84ff);
  --border-color: rgba(0,0,0,.12);
  --text-secondary: #6b7280;
  --table-header-bg: #fbfcff;
}

/* Dark režim */
body.dark{
  --border-color: rgba(255,255,255,.18);
  --text-secondary: #9ca3af;
  --table-header-bg: #1f2937;
}

/* Čitelnost nadpisu + ikon v adminu */
.admin-title{ color:#0b0d12; }
body.dark .admin-title{ color:#e5e7eb; }

/* Odkazy v adminu (třeba „Zpět na administraci“) */
.admin-wrapper a{ color: var(--primary-color, #0071e3); }
.admin-wrapper a:hover{ text-decoration: underline; }

/* (nepovinné, ale sjednotí to vzhled, kdyby inline styl někde chyběl) */
.admin-login-form .button{
  background: var(--primary-color,#0071e3);
  border-color: var(--primary-color,#0071e3);
  color:#fff;
}
.admin-login-form .button:hover,
.admin-login-form .button:focus{
  background: var(--primary-color-dark,#0a84ff);
}

/* --- SmartBox – mobilní UX vylepšení --- */
.sb-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}
.sb-header .sb-title { margin:0; line-height:1.2; }
.sb-header .sb-back { white-space:nowrap; }

/* QR – garantovaný čtverec všude (mobil i desktop) */
.sb-qr-box {
  width: clamp(220px, 28vw, 360px); /* mobil menší, desktop rozumný */
  aspect-ratio: 1 / 1;             /* držíme kostku */
  margin: 0 auto;
  display: block;
  position: relative;
}
.sb-qr-box img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;              /* žádná deformace */
  image-rendering: pixelated;       /* ostré hrany QR i při škálování */
  display: block;
}

/* „Stack“ chování pro vstup + tlačítko kopírování */
.sb-join {
  display:flex;
  flex-direction:column;
}
.sb-join .control .input { height: 46px; }

/* Ovládací prvky – na mobilu pod sebou, full width */
.sb-field-stack {
  display:flex;
  flex-direction:column;
  gap:8px;
}
.sb-buttons-stack {
  display:grid;
  gap:8px;
}
.sb-buttons-stack form { width:100%; }
.sb-buttons-stack .button { width:100%; }

/* Stavový řádek – čitelnější a zalamovatelný */
.sb-statebox {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  background: rgba(0,0,0,0.03);
  border-radius:12px;
  margin: 10px 0 16px;
}
.sb-state-label { font-weight:600; }
.sb-state-note { opacity:.8; }

/* Seznamy: přehledné odsazení a scroll, ať se mobil „neudusí“ */
.sb-order-list,
.sb-notraised-list {
  margin: 8px 0 0;
  padding-left: 18px;
  max-height: 38vh;
  overflow:auto;
}

/* Grid účastníků – responsivní */
.sb-participants-grid {
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:8px;
  margin-top:8px;
}
@media (min-width: 480px) {
  .sb-participants-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 769px) {
  .sb-participants-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Karty – trochu „air“ a dotykové cíle */
.sb-card { border:none; border-radius:18px; box-shadow:0 6px 20px rgba(0,0,0,.06); }
.sb-card__body { padding:16px; }
.sb-pill {
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(0,0,0,.06);
}

/* Drobnosti pro lepší čitelnost na touch zařízeních */
input.input, button.button { font-size:16px; } /* zabrání iOS auto-zoomu při focusu */
.mt-2-mobile { margin-top: 8px; }

/* Zmenšení hlavního titulku na menších displejích */
@media (max-width: 480px) {
  .sb-header .sb-title { font-size:1.1rem; }
}