:root{
  --bg:#141317; --surf:#1E1D22; --surf2:#26252B; --edge:#332F38;
  --red:#EC1C22; --red-hi:#FF3B41; --white:#FDFDFD; --dim:#8E8B96; --dim2:#5E5A66;
  --ui:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --serif:Georgia,"Times New Roman",serif;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{background:var(--bg);color:var(--white);font-family:var(--ui);
  -webkit-font-smoothing:antialiased;overscroll-behavior:none}
button{font-family:inherit;color:inherit;border:none;background:none;cursor:pointer}
button:focus-visible{outline:2px solid var(--red);outline-offset:2px}
img{display:block}
.hidden{display:none!important}

/* ---------- TURYSTA ---------- */
#app{height:100dvh;display:flex;flex-direction:column}
/* Na komputerze aplikacja trzyma szerokosc telefonu - inaczej kadry zdjec
   rozjezdzaja sie i podglad nie pokazuje tego, co zobaczy grupa. */
@media (min-width:620px) and (min-height:620px){
  body{background:#0A0A0C}
  #app{width:430px;margin:0 auto;border-left:1px solid #26252B;border-right:1px solid #26252B}
}
.exit{margin-top:1.4vh;font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  color:var(--dim2);text-decoration:underline;text-underline-offset:4px;padding:8px}

/* Ekran wejscia: wszystko ma sie zmiescic bez przewijania, a napisy czytaja seniorzy. */
.gate{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2.2vh;padding:2.5vh 20px;max-width:430px;margin:0 auto;width:100%;overflow:hidden}
.gate .baba{width:min(250px,64vw);max-height:17vh;object-fit:contain;flex:0 0 auto}
.gate .lead{font-size:clamp(17px,2.9vh,22px);color:#FFFFFF;text-align:center;line-height:1.4;
  font-weight:500}
.gslots{display:flex;gap:9px}
.gslot{width:min(52px,13vw);height:min(64px,8.5vh);border-radius:10px;background:var(--surf2);
  border:1px solid var(--edge);display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:clamp(24px,4vh,30px);transition:border-color .15s}
.gslot.on{border-color:var(--red)}
.gslot.bad{border-color:var(--red);background:#2b1c1e}
.gkeys{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%;max-width:300px}
.gkey{background:var(--surf2);border:1px solid var(--edge);border-radius:12px;
  padding:min(19px,2.3vh) 0;font-family:var(--mono);font-size:clamp(20px,3.2vh,25px)}
.gkey:active{background:#332f38}
.err{font-size:12px;color:var(--red-hi);text-align:center;min-height:16px}
.shake{animation:shk .32s ease}
@keyframes shk{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}

/* Powitanie czytaja tez seniorzy w autokarze: biel zamiast szarosci, duze litery.
   Rozmiary sa zalezne od wysokosci ekranu, zeby calosc miescila sie bez przewijania
   zarowno na wysokim iPhonie, jak i na krotkim telefonie sprzed lat. */
.hello{height:100%;padding:2.2vh 18px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;overflow:hidden;max-width:460px;margin:0 auto}
.hello .word{width:min(148px,36vw);opacity:.92;flex:0 0 auto}
.hello .por{width:min(96px,13vh);height:min(96px,13vh);border-radius:50%;object-fit:cover;
  margin-top:1.6vh;border:2px solid var(--edge);flex:0 0 auto}
.hello h1{font-family:var(--serif);font-weight:400;color:#fff;margin-top:1.6vh;
  font-size:clamp(23px,4.2vh,31px)}
.hb{color:#fff;margin-top:1.9vh;line-height:1.42;font-size:clamp(13.5px,2.3vh,18px)}
.hb b{color:#fff;font-weight:750}
.hbye{font-family:var(--serif);color:var(--red-hi);margin-top:2.2vh;
  font-size:clamp(16px,2.9vh,23px)}
.wait{margin-top:2.4vh;display:flex;align-items:center;gap:9px;flex:0 0 auto;
  font-family:var(--mono);font-size:11px;letter-spacing:.11em;color:var(--dim)}
.pip{width:9px;height:9px;border-radius:50%;background:var(--red);flex:0 0 9px;
  animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.2}50%{opacity:1}}

.dark{height:100%;background:#000;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:18px;padding:30px;text-align:center}
.dark p{font-family:var(--serif);font-size:32px;color:#8C8894;text-align:center;line-height:1.35}
.dark .czekaj{font-family:var(--ui);font-size:44px;font-weight:800;letter-spacing:.02em;
  color:#B4AFBC;line-height:1}
.dark .s2{font-family:var(--ui);font-size:22px;color:#6B6674;margin-top:14px;line-height:1.35}
.dark .pip{width:20px;height:20px;flex:0 0 20px}

.slide{height:100%;display:flex;flex-direction:column;background:#0B0B0D;position:relative}
.sart{flex:1;display:flex;gap:3px;padding:3px;overflow:hidden;min-height:0}
.sart.col{flex-direction:column}
.sart .cell{flex:1;border-radius:6px;overflow:hidden;background:#1a191e;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:10px;color:var(--dim2)}
.sart .cell img{width:100%;height:100%;object-fit:cover}
.sart .cell.fit{background:#0B0B0D}
.sart .cell.fit img{object-fit:contain}
.scap{padding:15px 17px 20px;border-top:1px solid #201F24;flex:0 0 auto}
.scap p{font-size:15px;color:#C9C6D0;line-height:1.5}
.sygcorner{position:absolute;top:10px;right:11px;width:24px;opacity:.45}

.fin{height:100%;padding:22px 20px 26px;display:flex;flex-direction:column;overflow-y:auto;
  max-width:440px;margin:0 auto;width:100%}
.head{display:flex;align-items:flex-start;gap:15px}
.fin h1{font-family:var(--serif);font-size:26px;font-weight:400;line-height:1.22;flex:1}
.fin .por{width:96px;height:96px;flex:0 0 96px;border-radius:50%;object-fit:cover;
  border:2px solid var(--edge)}
.fb2{font-size:14px;line-height:1.55;color:#C9C6D0;margin-top:14px}
.sig{margin-top:14px;padding-top:12px;border-top:1px solid #262429}
.sig .nm{font-family:var(--serif);font-size:16px}
.sig .role{font-size:14px;color:var(--dim);margin-top:5px}
.sig .mt{display:inline-block;margin-top:9px;font-size:14px;font-weight:650;color:var(--red-hi);
  text-decoration:underline;text-underline-offset:4px}
.acts{margin-top:18px;padding-bottom:8px;display:flex;flex-direction:column;gap:9px}
.act{border:1px solid #2E2C34;border-radius:12px;padding:12px 14px;
  display:flex;flex-direction:row;align-items:center;gap:13px;
  text-decoration:none;color:var(--white);width:100%}
.act .ico{flex:0 0 54px;width:54px;height:54px;display:flex;align-items:center;justify-content:center}
.act .ico img{width:100%;height:100%;object-fit:contain}
.act.f .ico img{width:105%;height:105%}
/* Google musi stac na bialym tle, wiec kafel ma te sama szerokosc,
   a znak w srodku jest o padding mniejszy - tak wychodzi rowna optyka. */
.act .ico.chip{background:#fff;border-radius:11px;padding:6px}
.act .txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;text-align:center}
.act .lab{font-size:14px;font-weight:650;line-height:1.25}
.act .sub{font-size:11.5px;line-height:1.35;opacity:.85}
.act.g{background:var(--red);border-color:var(--red)}
.act.f{background:#1877F2;border-color:#1877F2}
.act.v{background:#0B0B0D;border:2px solid #FFFFFF;color:#29B6F0}
.act.v .sub{color:#7FD3F5;opacity:1}
.act.mt{background:transparent;border-color:var(--red);color:var(--white)}
.act.mt .lab{color:var(--red-hi)}
.voxlogo{width:186px;max-width:62%;margin-top:9px;display:block}
/* Zdjecie w calosci, bez przycinania - zmiesci sie, bo lista miast jest zwarta. */
.voxhead{width:100%;height:auto;border-radius:11px;margin-top:12px;display:block}
.act .stars{color:#FFC530;letter-spacing:.06em}
.act.q{padding:12px;font-size:13px;opacity:.85}
/* Ekran audioprzewodnikow ma zmiescic 6 miast bez przewijania,
   dlatego zdjecie jest niskie, a odstepy policzone pod najkrotsze telefony. */
.voxscreen{padding:16px 18px 18px;justify-content:flex-start}
.voxscreen h1{margin-top:2px}
.voxlist{display:flex;flex-direction:column;gap:6px;margin-top:13px}
.vox{display:flex;align-items:center;gap:10px;width:100%;background:var(--surf2);
  border:1px solid #2E2C34;border-radius:10px;padding:12px 14px;font-size:15px;
  text-decoration:none;color:var(--white)}
/* Strzalka jak w znaku VoxTravel, zwrocona w prawo - sygnal, ze odnosnik prowadzi dalej. */
.vox .vgo{margin-left:auto;flex:0 0 11px;width:11px;height:13px;fill:#29B6F0}
.back{color:var(--dim);font-size:12.5px;font-family:var(--mono);padding:0 0 14px;text-align:left}
.exp{align-items:center;justify-content:center;text-align:center}
.exp .word{width:180px;margin-top:26px;opacity:.9}
.bar{width:88px;height:3px;background:#2A282F;border-radius:2px;margin-top:28px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--red);animation:fill 2s linear forwards}
@keyframes fill{from{width:0}to{width:100%}}
.offline{position:fixed;left:0;right:0;bottom:0;background:#2b1c1e;color:#E39A9D;
  font-family:var(--mono);font-size:10.5px;text-align:center;padding:7px;letter-spacing:.05em}

/* ---------- PANEL ---------- */
.wrap{max-width:470px;margin:0 auto;padding:16px 14px 40px}
.brand{display:flex;align-items:center;justify-content:center;padding:2px 0 16px}
.brand img{height:26px;opacity:.95}
.card{background:var(--surf);border:1px solid var(--edge);border-radius:15px;padding:16px}
.crumb{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--red);margin-bottom:12px}
.lead2{font-size:13px;color:var(--dim);line-height:1.5;margin-bottom:13px}
.row{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:var(--surf2);
  border:1px solid var(--edge);border-radius:11px;padding:14px;font-size:15px;margin-bottom:7px}
.row .meta{margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--dim);white-space:nowrap}
.row.done{opacity:.45}
.pslots{display:flex;gap:8px;margin:16px 0 8px;justify-content:center}
.pslot{width:38px;height:50px;border-radius:9px;background:var(--surf2);border:1px solid var(--edge);
  display:flex;align-items:center;justify-content:center;font-size:22px}
.pslot.on{border-color:var(--red)}
.pslot.bad{border-color:var(--red);background:#2b1c1e}
.keys{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.key{background:var(--surf2);border:1px solid var(--edge);border-radius:11px;padding:16px 0;
  font-family:var(--mono);font-size:19px}
.key:active{background:#332f38}
.codebox{display:flex;flex-direction:column;align-items:center;gap:4px;
  background:var(--surf2);border:1px solid var(--red);border-radius:13px;
  padding:15px 12px 17px;margin-bottom:15px}
.codebox .cl{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim)}
.codebox .cv{font-family:var(--mono);font-size:52px;line-height:1;color:var(--red);
  letter-spacing:.14em;font-weight:700}
.codebar{display:flex;align-items:baseline;gap:9px;margin-bottom:11px}
.codebar span{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim)}
.codebar b{font-family:var(--mono);font-size:34px;color:var(--red);letter-spacing:.12em}
.codebar{width:100%;text-align:left;flex-wrap:wrap;align-items:baseline}
.codebar em,.codebox em{font-family:var(--mono);font-size:9px;letter-spacing:.1em;
  color:var(--dim2);font-style:normal;width:100%;margin-top:3px}
.codefull{position:fixed;inset:0;z-index:99;background:#0A0A0C;display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:14px}
.codefull span{font-family:var(--mono);font-size:13px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dim)}
.codefull b{font-family:var(--mono);font-size:23vw;line-height:1;color:var(--red);
  letter-spacing:.1em;font-weight:700}
.codefull i{font-family:var(--mono);font-size:11px;color:var(--dim2);font-style:normal;
  letter-spacing:.1em;margin-top:20px}
.scode{font-family:var(--mono);font-size:27px;color:var(--red);letter-spacing:.16em}
.smeta{font-size:12px;color:var(--dim);line-height:1.45;margin-top:5px}
.sescard{display:flex;flex-direction:column;width:100%;text-align:left;background:var(--surf2);
  border:1px solid var(--red);border-radius:13px;padding:15px;margin-bottom:9px}
.now{display:flex;align-items:baseline;gap:11px;padding-bottom:12px;margin-bottom:12px;
  border-bottom:1px solid var(--edge)}
.now .idx{font-family:var(--mono);font-size:27px;color:var(--red);line-height:1}
.now .ttl{font-size:16px;font-weight:600;line-height:1.25}
.now .of{font-family:var(--mono);font-size:11px;color:var(--dim);margin-left:auto}
.state{font-family:var(--mono);font-size:10px;letter-spacing:.05em;margin-bottom:12px;
  padding:8px 11px;border-radius:8px;display:inline-block}
.state.off{background:#2b2226;color:#E39A9D}
.state.on{background:#1c2b20;color:#8FCF9B}
.drive{display:flex;gap:10px}
.bk{flex:0 0 78px;border:1px solid var(--edge);border-radius:12px;color:var(--dim);font-size:13px}
.bk[disabled]{opacity:.35}
.nx{flex:1;background:var(--red);border-radius:12px;padding:24px 10px;font-size:19px;font-weight:650}
.nx:active{background:var(--red-hi)}
.row2{display:flex;gap:10px;margin-top:10px}
.hold,.leave{flex:1;border:1px solid var(--edge);border-radius:12px;padding:15px;font-size:13.5px}
.hold.on{background:var(--white);color:#1a191d;border-color:var(--white);font-weight:700}
.sync{display:flex;align-items:center;gap:9px;margin-top:14px;font-family:var(--mono);
  font-size:11px;color:var(--dim)}
.dot{width:8px;height:8px;border-radius:50%;background:#8FCF9B}
.dot.bad{background:var(--red)}
.seclabel{font-family:var(--mono);font-size:9px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--dim2);margin:16px 0 8px}
.tiles{display:flex;flex-direction:column;gap:6px}
.tile{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:var(--surf2);
  border:1px solid var(--edge);border-radius:10px;padding:12px}
.tile .tn{font-family:var(--mono);font-size:10px;color:var(--dim2);flex:0 0 12px}
.tile .tt{font-size:13.5px;line-height:1.25}
.tile.on{border-color:var(--red);background:#2b1c1e}
.tile.on .tn{color:var(--red)}
.tile.past{opacity:.4}
.primary{width:100%;background:var(--red);border-radius:12px;padding:16px;font-size:16px;
  font-weight:650;margin-top:16px}
.ghost{width:100%;border:1px solid var(--edge);border-radius:12px;padding:14px;font-size:13.5px;
  color:var(--dim);margin-top:10px}
.ghost.armed{border-color:var(--red);color:var(--white)}
.chk{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:var(--surf2);
  border:1px solid var(--edge);border-radius:11px;padding:14px;font-size:15px;margin-bottom:7px}
.chk .box{width:20px;height:20px;border-radius:6px;border:1.5px solid var(--dim2);flex:0 0 20px;
  display:flex;align-items:center;justify-content:center;font-size:13px}
.chk.on{border-color:var(--red)}
.chk.on .box{background:var(--red);border-color:var(--red)}
.tk{margin-top:12px;font-size:12px;line-height:1.45;color:#8FCF9B;background:#1c2b20;
  border-radius:9px;padding:11px}
.msg{margin-top:14px;font-size:15px;line-height:1.5;color:#E39A9D;background:#2b1c1e;
  border-radius:11px;padding:14px}
.hint{font-family:var(--mono);font-size:10px;color:var(--dim2);text-align:center;margin-top:14px}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}

/* ---------- EKRAN LOGOWANIA (mobile first) ---------- */
.lg{min-height:80dvh;display:flex;flex-direction:column;justify-content:center;
  padding:8px 4px 30px}
.lg .syg{width:54px;margin:0 auto 18px;opacity:.95}
.lg h1{font-family:var(--serif);font-size:25px;font-weight:400;text-align:center;line-height:1.25}
.lg .sub{font-size:14px;color:var(--dim);text-align:center;line-height:1.5;margin-top:9px}
.lg label{font-family:var(--ui);font-size:13px;letter-spacing:0;text-transform:none;
  color:var(--dim);margin:20px 0 7px}
.lg input{font-size:17px;padding:16px 14px;border-radius:12px}
.lg input:focus{border-color:var(--red)}
.lg .primary{margin-top:24px;padding:18px;font-size:17px;border-radius:13px}
.lg .msg{font-size:14px;padding:14px}

/* ---------- WIDEO I ODTWARZACZ AUDIO ---------- */
.sart .vid{width:100%;height:100%;object-fit:cover;display:block}
.sart.audio{position:relative;padding:0}
.audiobg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.45}
.audiobg.blank{background:radial-gradient(circle at 50% 40%,#1d2b1f,#0B0B0D 70%)}

/* Zielen z logo Baby, na czarnym tle, z biala obwodka - czytelne w sloncu. */
.player{position:absolute;left:0;right:0;bottom:0;top:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:16px;padding:20px}
.pbtn{width:78px;height:78px;border-radius:50%;background:#0B0B0D;border:3px solid #FFFFFF;
  display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.pbtn svg{width:34px;height:34px;fill:#7DC24B}
.pbtn.play{width:104px;height:104px;background:#7DC24B;border-color:#fff}
.pbtn.play svg{width:46px;height:46px;fill:#0B0B0D;margin-left:5px}
.pbtn.stop svg{fill:#fff}
.player{flex-direction:row;flex-wrap:wrap;align-content:center}

/* Wariant z grafika: odtwarzacz jest paskiem pod obrazem, nie nakladka.
   Dzieki temu tekst na grafice zostaje w pelni czytelny. */
.player.pasek{position:static;flex:0 0 auto;flex-direction:row;flex-wrap:nowrap;
  align-items:center;gap:13px;padding:12px 15px;background:#0B0B0D;
  border-top:1px solid #201F24}
.player.pasek .pbtn{width:56px;height:56px;border-width:2px}
.player.pasek .pbtn svg{width:24px;height:24px}
.player.pasek .pbtn.play{width:68px;height:68px}
.player.pasek .pbtn.play svg{width:30px;height:30px;margin-left:3px}
.player.pasek .pbar{flex:1 1 auto;max-width:none;margin:0}
.player.pasek .ptime{flex:0 0 auto;font-size:14px}
.pbar{flex:1 0 100%;height:8px;background:rgba(255,255,255,.22);border-radius:6px;overflow:hidden;
  max-width:280px;margin-top:6px}
.pbar i{display:block;height:100%;width:0;background:#7DC24B;transition:width .2s linear}
.ptime{flex:1 0 100%;text-align:center;font-family:var(--mono);font-size:15px;color:#fff}

/* Telefon w poziomie: zdjecie ma zajac caly ekran, bez ramki i bez waskiej kolumny. */
@media (orientation:landscape) and (max-height:619px){
  .slide .sart{padding:0;gap:0}
  .sart .cell{border-radius:0}
  .slide:not(.land) .sart.one .cell img{object-fit:contain}
  .slide.land .scap{position:absolute;left:0;right:0;bottom:0;border:0;
    padding:34px 22px 10px;background:linear-gradient(transparent,rgba(0,0,0,.78))}
  .slide.land .scap p{font-size:14px;color:#F1EFF4}
}