@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap");
*{box-sizing:border-box}html,body{margin:0;padding:0;font-family:Roboto,Segoe UI,Arial,sans-serif;background:linear-gradient(180deg,#0b1020,#141b35);color:#eef2ff}a{color:inherit;text-decoration:none}
body{min-height:100vh}
.app-shell{min-height:100vh;display:flex;flex-direction:column}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:18px 26px;border-bottom:1px solid rgba(255,255,255,.08);backdrop-filter:blur(12px);background:rgba(9,13,26,.72);position:sticky;top:0;z-index:20}
.brand{display:flex;gap:14px;align-items:center}.brand-mark{width:52px;height:52px;border-radius:18px;background:linear-gradient(135deg,#7968ff,#3fd3ff);display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;box-shadow:0 14px 34px rgba(67,99,255,.32);overflow:hidden}.brand-title{font-size:1.1rem;font-weight:700}.brand-subtitle{font-size:.88rem;color:#9aa4c4}
.logo-large{width:76px;height:76px;margin:0 auto 14px auto;border-radius:24px;background:linear-gradient(135deg,#7968ff,#3fd3ff);display:flex;align-items:center;justify-content:center;font-size:1.8rem;font-weight:800;overflow:hidden}
.logo-image-holder{padding:0;background:transparent!important}.logo-image{width:100%;height:100%;object-fit:contain;display:block}
.topnav{display:flex;gap:10px;flex-wrap:wrap}.topnav a{padding:10px 14px;border-radius:12px;background:rgba(255,255,255,.05)}.topnav a:hover{background:rgba(255,255,255,.11)}
.page-content{padding:24px;flex:1}
.container{width:min(1180px,100%);margin:0 auto}
.card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:24px;padding:24px;box-shadow:0 16px 42px rgba(0,0,0,.22)}
.card + .card{margin-top:20px}
.card h1,.card h2,.card h3{margin-top:0}
.grid{display:grid;gap:20px}.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.stat{padding:18px;border-radius:20px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07)}.stat-label{color:#9aa4c4;font-size:.92rem}.stat-value{font-size:2rem;font-weight:800;margin-top:8px}
.btn{border:0;border-radius:16px;padding:12px 18px;font-size:1rem;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;background:linear-gradient(135deg,#7968ff,#3fd3ff);color:#fff;box-shadow:0 12px 30px rgba(67,99,255,.28)}
.btn:hover{transform:translateY(-1px)}
.btn-secondary{background:rgba(255,255,255,.08);box-shadow:none}.btn-danger{background:linear-gradient(135deg,#ff5b72,#ff8a45)}.btn-success{background:linear-gradient(135deg,#27c77a,#44d0aa)}
.form-group{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}label{font-weight:700}input[type=text],input[type=password],input[type=number],input[type=file],select,textarea{width:100%;padding:14px 16px;border-radius:16px;border:1px solid rgba(255,255,255,.1);background:rgba(7,10,22,.55);color:#fff;outline:none}textarea{min-height:120px;resize:vertical}input[type=file]{padding:12px}
.form-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.table-wrap{overflow:auto}.table{width:100%;border-collapse:collapse}.table th,.table td{text-align:left;padding:14px;border-bottom:1px solid rgba(255,255,255,.08)}.table th{color:#9aa4c4;font-size:.9rem}
.badge{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.09);font-size:.85rem}
.badge-active{background:rgba(39,199,122,.18);color:#8ef0bf}.badge-stopped{background:rgba(255,138,69,.18);color:#ffc089}
.flash{margin:0 auto 18px auto;width:min(1180px,calc(100% - 48px));padding:14px 18px;border-radius:18px}.flash-success{background:rgba(39,199,122,.18);border:1px solid rgba(39,199,122,.35)}.flash-error{background:rgba(255,91,114,.18);border:1px solid rgba(255,91,114,.35)}
.login-wrapper,.pin-wrapper{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px}
.login-card,.pin-card{width:min(460px,100%);padding:28px;border-radius:28px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.09);box-shadow:0 22px 48px rgba(0,0,0,.26)}
.center{text-align:center}.muted{color:#9aa4c4}
.pin-display{margin:18px 0;padding:18px;border-radius:22px;background:rgba(0,0,0,.24);font-size:2rem;letter-spacing:.35em;text-align:center;font-weight:800}
.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.key{padding:18px;border-radius:20px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.07);font-size:1.3rem;font-weight:800;color:#fff;cursor:pointer}.key:hover{background:rgba(255,255,255,.12)}
.vote-options{display:grid;gap:14px;margin-top:18px}.vote-option{display:flex;gap:14px;align-items:center;padding:16px 18px;border-radius:20px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09);cursor:pointer}.vote-option:hover{background:rgba(255,255,255,.11)}.vote-letter{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#7968ff,#3fd3ff);display:flex;align-items:center;justify-content:center;font-weight:800}
.timer{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.08);font-weight:700}.timer.danger{background:rgba(255,91,114,.18);color:#ffadb8}
.poll-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;flex-wrap:wrap}
.projection-body{background:radial-gradient(circle at top,#1b2452 0%,#0a1123 52%,#070d1b 100%)}.projection-wrap{min-height:100vh;padding:24px;display:flex;align-items:center;justify-content:center}
.projection-card{width:min(1400px,100%);padding:38px;border-radius:34px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)}.projection-title{font-size:2.4rem;margin:10px 0 18px 0}.projection-question{font-size:2.1rem;font-weight:800;line-height:1.25}
.projection-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:24px}.projection-option{padding:18px;border-radius:22px;background:rgba(255,255,255,.07);font-size:1.2rem;border:1px solid rgba(255,255,255,.08)}
.chart-wrap{margin-top:24px;padding:18px;border-radius:24px;background:rgba(0,0,0,.18)}canvas{max-width:100%}
.empty-state{padding:36px;text-align:center;color:#c9d3f0}
.inline-actions{display:flex;gap:10px;flex-wrap:wrap}
.option-row{display:grid;grid-template-columns:60px 1fr;gap:12px;align-items:center;margin-bottom:10px}.option-letter-badge{display:flex;justify-content:center;align-items:center;height:48px;border-radius:16px;background:rgba(255,255,255,.08);font-weight:800}
.subtitle{margin-top:-8px;color:#9aa4c4}.divider{height:1px;background:rgba(255,255,255,.08);margin:18px 0}
.small{font-size:.92rem}.strong{font-weight:800}code{font-size:.9rem;color:#d9dbff}
@media (max-width: 860px){.grid-2,.grid-3,.projection-options{grid-template-columns:1fr}.topbar{padding:14px 16px}.page-content{padding:16px}.projection-title{font-size:1.6rem}.projection-question{font-size:1.45rem}}

.brand{gap:18px}.brand-text{display:flex;flex-direction:column}
.brand-mark.logo-image-holder,.logo-large.logo-image-holder{background:none!important;box-shadow:none!important;border-radius:0!important;padding:0!important;overflow:visible!important}
.brand-mark.logo-image-holder{width:min(360px,42vw);height:66px;display:flex;align-items:center;justify-content:flex-start}
.logo-large.logo-image-holder{width:min(680px,100%);height:auto;display:block;margin:0 auto 18px auto}
.logo-large.logo-image-holder .logo-image{height:auto;max-height:180px;object-fit:contain}
.brand-mark.logo-image-holder .logo-image{width:auto;height:100%;object-fit:contain;display:block}
.pin-card{width:min(430px,100%);padding:24px}
.pin-display{margin:14px 0;padding:14px;border-radius:18px;font-size:1.75rem}
.keypad-compact{gap:10px}.keypad-compact .key{padding:14px;border-radius:18px;font-size:1.15rem}
.key-fn{font-size:1rem}
.vote-option{color:#fff}.vote-option *{color:inherit}
.vote-option-large{padding:18px 20px;min-height:96px}
.vote-letter-large{width:72px;height:72px;font-size:2rem;flex:0 0 72px}
.vote-option-title{font-size:1.28rem;color:#fff}.vote-option-subtitle{font-size:1rem;color:rgba(255,255,255,.82)}
.vote-options-large{gap:16px}
.timer-large{font-size:2rem;padding:14px 24px;font-weight:900;min-width:190px;justify-content:center}
.timer-center{margin:18px auto 0 auto}
.participant-poll-top h1{font-size:2rem;margin-bottom:12px}
.participant-status-card,.participant-poll-card{max-width:920px;margin:0 auto}
.vote-done-card{text-align:center}
.projection-card .logo-large.logo-image-holder{margin-bottom:14px}
.projection-stats-panel{display:flex;justify-content:center;gap:34px;flex-wrap:wrap;margin:18px 0 24px 0;padding:16px 22px;border-radius:22px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);font-size:1.2rem}
.projection-stats-panel-result{margin-top:18px}
.stats-label{color:#c9d3f0;font-weight:600}.stats-value-inline{font-size:1.8rem;font-weight:900;color:#fff}
.projection-question-wrap{margin-top:10px}
.projection-timer{font-size:2.4rem}
.projection-option{font-size:1.45rem;color:#fff}
.chart-wrap{min-height:740px}
@media (max-width: 860px){
  .brand-mark.logo-image-holder{width:min(240px,55vw);height:48px}
  .logo-large.logo-image-holder .logo-image{max-height:120px}
  .timer-large{font-size:1.5rem;padding:12px 18px}
  .projection-stats-panel{gap:16px;font-size:1rem}
  .stats-value-inline{font-size:1.4rem}
  .vote-letter-large{width:58px;height:58px;font-size:1.5rem;flex-basis:58px}
  .vote-option-title{font-size:1.08rem}
}


/* v4 refinements */
.container > .grid + .card,
.container > .card + .grid,
.container > .grid + .grid{margin-top:20px}

.admin-logo.logo-image-holder{
  width:min(200px,24vw);
  max-width:200px;
  height:auto;
  display:block;
  margin:0;
}
.admin-logo.logo-image-holder .logo-image{
  width:100%;
  height:auto;
  max-width:200px;
  object-fit:contain;
  display:block;
}

.pin-logo.logo-image-holder{
  width:min(200px,70vw);
  max-width:200px;
  height:auto;
  display:block;
  margin:0 auto 18px auto;
}
.pin-logo.logo-image-holder .logo-image{
  width:100%;
  height:auto;
  max-width:200px;
  object-fit:contain;
  display:block;
}

.projection-logo.logo-image-holder{
  width:min(400px,80vw);
  max-width:400px;
  height:auto;
  display:block;
  margin:0 auto 14px auto;
}
.projection-logo.logo-image-holder .logo-image{
  width:100%;
  height:auto;
  max-width:400px;
  object-fit:contain;
  display:block;
}

@media (max-width: 860px){
  .admin-logo.logo-image-holder{width:min(160px,38vw);max-width:160px}
  .pin-logo.logo-image-holder{width:min(180px,60vw);max-width:180px}
  .projection-logo.logo-image-holder{width:min(260px,70vw);max-width:260px}
}


/* v5 refinements */
html,body,button,input,select,textarea{font-family:'Roboto',Segoe UI,Arial,sans-serif!important}
.card,.login-card,.pin-card,.stat,.btn,input[type=text],input[type=password],input[type=number],input[type=file],select,textarea,.flash,.key,.pin-display,.vote-option,.projection-card,.projection-option,.chart-wrap,.option-letter-badge,.projection-stats-panel{border-radius:8px!important}
.login-wrapper,.pin-wrapper{width:100%;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.pin-wrapper [data-participant-root]{width:min(740px,100%)!important;margin-left:auto!important;margin-right:auto!important;display:flex;justify-content:center;align-items:center;flex-direction:column}
.pin-card{margin-left:auto!important;margin-right:auto!important}
.admin-login-logo.logo-image-holder{width:min(200px,70vw)!important;max-width:200px!important;height:auto!important;display:block!important;margin:0 auto 18px auto!important}
.admin-login-logo.logo-image-holder .logo-image{width:100%!important;height:auto!important;max-width:200px!important;object-fit:contain!important;display:block!important}
.icon-btn{width:38px;height:34px;padding:0!important;border-radius:8px!important;font-size:1rem;line-height:1;box-shadow:none!important}
.group-actions{display:flex;gap:6px;align-items:center;flex-wrap:nowrap}
.projection-empty-icon{width:74px;height:74px;margin:22px auto 18px auto;border-radius:8px;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;font-size:2rem;border:1px solid rgba(255,255,255,.1)}
.projection-empty-title{font-size:2.2rem;font-weight:900;margin:0 0 10px 0}
.projection-empty-text{font-size:1.3rem;max-width:760px;margin:0 auto;color:#c9d3f0;line-height:1.45}
.projection-pin-card{text-align:center;min-height:520px;display:flex;flex-direction:column;justify-content:center;align-items:center}
.projection-pin-label{font-size:1.6rem;color:#c9d3f0;font-weight:700;margin-top:18px}
.projection-pin-value{font-size:clamp(4rem,13vw,9rem);font-weight:900;letter-spacing:.08em;line-height:1;margin:18px 0;color:#fff;text-shadow:0 18px 42px rgba(0,0,0,.35)}
.projection-pin-note{font-size:1.35rem;color:#c9d3f0}
@media (max-width:860px){.admin-login-logo.logo-image-holder{width:min(180px,60vw)!important;max-width:180px!important}}


/* Oprava v5: logo bez podkladového pozadí */
.logo-image-holder,
.brand-mark.logo-image-holder,
.logo-large.logo-image-holder,
.admin-logo.logo-image-holder,
.admin-login-logo.logo-image-holder,
.pin-logo.logo-image-holder,
.projection-logo.logo-image-holder{
  background: transparent !important;
  background-color: transparent !important;
}

.logo-image-holder .logo-image{
  background: transparent !important;
}


/* Drobné opravy po v5 */
.grid > .card + .card{margin-top:0!important}
.grid{align-items:start}
.projection-qr-card{text-align:center;min-height:560px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.projection-qr-title{font-size:clamp(2rem,4vw,3.8rem);font-weight:900;margin:18px 0 22px 0;color:#fff}
.projection-qr-box{width:min(420px,70vw);height:min(420px,70vw);background:#fff;border-radius:8px;padding:18px;display:flex;align-items:center;justify-content:center;box-shadow:0 22px 60px rgba(0,0,0,.28)}
.projection-qr-image{width:100%;height:100%;object-fit:contain;display:block}
.projection-qr-url{font-size:clamp(1.4rem,2.5vw,2.4rem);font-weight:900;margin-top:22px;color:#fff;letter-spacing:.02em}
.projection-qr-note{font-size:1.3rem;color:#c9d3f0;margin-top:10px}
@media (max-width:860px){.projection-qr-box{width:min(320px,78vw);height:min(320px,78vw);padding:14px}.projection-qr-note{font-size:1.05rem}}


/* v7: responzivní projekční grafy */
.projection-wrap{
  padding:clamp(10px,2vw,24px);
}
.projection-card{
  padding:clamp(18px,3vw,38px)!important;
}
.projection-card .projection-title{
  font-size:clamp(1.7rem,3.1vw,2.4rem);
}
.projection-card .projection-question{
  font-size:clamp(1.35rem,2.6vw,2.1rem);
}
.chart-wrap{
  width:100%;
  height:clamp(340px,58vh,740px);
  min-height:0!important;
  padding:clamp(10px,1.4vw,18px)!important;
  overflow:hidden;
}
.chart-wrap canvas{
  width:100%!important;
  height:100%!important;
  display:block;
}
.vote-option-subtitle{
  display:none!important;
}
@media (max-height:720px){
  .projection-logo.logo-image-holder{width:min(300px,70vw);max-width:300px;margin-bottom:8px}
  .projection-stats-panel{margin:10px 0 14px 0;padding:10px 14px;gap:18px}
  .stats-value-inline{font-size:1.35rem}
  .chart-wrap{height:clamp(300px,52vh,520px)}
}
@media (max-width:860px){
  .chart-wrap{height:clamp(300px,52vh,560px)}
}


/* v8: projekční stránka se musí vejít i na nižší rozlišení, např. 1280×800 */
.projection-body{
  height:100vh;
  overflow:hidden;
}
.projection-wrap{
  min-height:0!important;
  height:100vh!important;
  padding:clamp(8px,1.4vw,18px)!important;
  align-items:stretch!important;
}
[data-projection-root]{
  width:100%!important;
  max-width:1400px!important;
  height:100%!important;
  margin:0 auto!important;
  min-height:0!important;
}
.projection-card{
  max-height:100%!important;
  overflow:hidden!important;
}
.projection-result-card{
  height:100%!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:flex-start!important;
  padding:clamp(14px,2vh,28px) clamp(18px,2.2vw,38px)!important;
}
.projection-result-card .projection-logo.logo-image-holder{
  width:min(360px,30vw)!important;
  max-width:360px!important;
  margin-bottom:clamp(4px,1vh,10px)!important;
}
.projection-result-card .projection-logo.logo-image-holder .logo-image{
  max-height:clamp(58px,10vh,92px)!important;
}
.projection-result-card .badge{
  padding:4px 10px!important;
  font-size:clamp(.72rem,1.5vh,.9rem)!important;
}
.projection-result-card .projection-title{
  font-size:clamp(1.55rem,4vh,2.35rem)!important;
  line-height:1.08!important;
  margin:clamp(6px,1.2vh,12px) 0 clamp(8px,1.4vh,14px) 0!important;
}
.projection-result-card .projection-question{
  font-size:clamp(1.35rem,3.2vh,2rem)!important;
  line-height:1.12!important;
  margin:0!important;
}
.projection-result-card .projection-stats-panel{
  flex:0 0 auto!important;
  margin:clamp(10px,1.7vh,16px) 0 clamp(12px,1.8vh,18px) 0!important;
  padding:clamp(8px,1.5vh,13px) clamp(12px,1.6vw,18px)!important;
  gap:clamp(16px,3vw,34px)!important;
  font-size:clamp(.9rem,2vh,1.15rem)!important;
}
.projection-result-card .stats-value-inline{
  font-size:clamp(1.2rem,3.2vh,1.8rem)!important;
}
.projection-result-card .chart-wrap{
  flex:1 1 auto!important;
  height:auto!important;
  min-height:240px!important;
  margin-top:0!important;
  padding:clamp(8px,1.3vw,14px)!important;
}
.projection-result-card .chart-wrap canvas{
  width:100%!important;
  height:100%!important;
}
@media (max-height:800px){
  .projection-result-card{padding:12px 28px!important}
  .projection-result-card .projection-logo.logo-image-holder{width:min(300px,28vw)!important;margin-bottom:4px!important}
  .projection-result-card .projection-logo.logo-image-holder .logo-image{max-height:72px!important}
  .projection-result-card .projection-title{font-size:2rem!important;margin:8px 0 10px 0!important}
  .projection-result-card .projection-question{font-size:1.65rem!important}
  .projection-result-card .projection-stats-panel{margin:10px 0 12px 0!important;padding:9px 14px!important}
  .projection-result-card .chart-wrap{min-height:260px!important}
}
@media (max-height:680px){
  .projection-result-card .projection-logo.logo-image-holder{width:min(240px,24vw)!important}
  .projection-result-card .projection-logo.logo-image-holder .logo-image{max-height:54px!important}
  .projection-result-card .badge{display:none!important}
  .projection-result-card .projection-title{font-size:1.55rem!important;margin:5px 0 6px 0!important}
  .projection-result-card .projection-question{font-size:1.3rem!important}
  .projection-result-card .projection-stats-panel{font-size:.9rem!important;margin:7px 0 9px 0!important;padding:7px 10px!important}
  .projection-result-card .stats-value-inline{font-size:1.2rem!important}
  .projection-result-card .chart-wrap{min-height:220px!important}
}