:root {
  --blue: #0073E7; --navy: #061530; --ink: #0E1A2B; --sky: #EAF3FE; --paper: #fff;
  --cyan: #22D3EE; --danger: #E5484D; --benign: #2F9E6B; --muted: #5B6B80;
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); }
[hidden] { display: none !important; }
.btn { font: inherit; font-weight: 700; border: 0; border-radius: 16px; padding: 18px 24px;
  color: #fff; background: var(--blue); cursor: pointer; }
.btn:disabled { opacity: .5; }
.danger { background: var(--danger); }
.benign { background: var(--benign); }
.muted { color: var(--muted); }
.disclaimer { font-size: 14px; color: var(--muted); }

/* телефон */
.phone main { min-height: 100svh; display: flex; flex-direction: column; justify-content: center;
  padding: 24px 20px calc(24px + env(safe-area-inset-bottom)); text-align: center; }
.phone h1 { font-size: 28px; margin: 0 0 12px; }
.phone .row { display: flex; gap: 16px; margin-top: 24px; }
.phone .row .btn { flex: 1; }
.phone .big { font-size: 26px; padding: 28px 0; }
.phone .huge { display: block; width: 100%; font-size: 30px; padding: 0; height: 30svh;
  margin-top: 16px; }
.net { position: fixed; left: 0; right: 0; bottom: 0; margin: 0; padding: 10px;
  background: var(--ink); color: #fff; text-align: center; }

/* большой экран */
.screen { background: var(--navy); color: #fff; overflow: hidden; }
.screen main > section { height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3vh; }
.screen .brand { font-size: 6vh; font-weight: 800; }
.screen .brand b { color: var(--blue); }
.screen .qr { height: 48vh; background: #fff; padding: 1.5vh; border-radius: 2vh; }
.screen .lead { font-size: 4vh; }
.screen .count { font-weight: 800; color: var(--cyan); }
.screen .demo { display: flex; gap: 4vw; }
.screen .demo .btn { font-size: 5vh; padding: 3vh 5vw; }
.screen .disclaimer { font-size: 2.2vh; color: #9fb3cc; }
#s-slide { position: relative; background: #000; }
#slide-img { max-width: 100vw; max-height: 100vh; object-fit: contain; }
.hud { position: absolute; left: 0; right: 0; top: 0; display: flex; justify-content: space-between;
  align-items: center; padding: 2vh 3vw; font-size: 4vh; font-weight: 700;
  background: linear-gradient(rgba(6, 21, 48, .85), transparent); }
#slide-timer { font-size: 7vh; color: var(--cyan); }
#results { width: 86vw; display: grid; gap: 2vh; }
.res-row h3 { margin: 0 0 .6vh; font-size: 3vh; }
.res-line { display: grid; grid-template-columns: 14vw 1fr; align-items: center; font-size: 2.4vh;
  margin-bottom: .6vh; }
.bar { position: relative; height: 3vh; background: rgba(255, 255, 255, .12); border-radius: 1vh;
  overflow: hidden; }
.bar span { position: absolute; top: 0; bottom: 0; left: 0; background: var(--blue); }
.bar em { position: absolute; right: 1vh; top: 0; line-height: 3vh; font-style: normal;
  font-weight: 700; }
.sum { display: grid; grid-template-columns: repeat(2, auto); gap: 2vh 4vw; font-size: 4vh; }
.sum b { color: var(--cyan); }

/* пульт */
.admin main { max-width: 760px; margin: 0 auto; padding: 16px; }
.admin .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px; margin: 12px 0; }
.admin .btn { padding: 14px 10px; font-size: 16px; }
.admin .warn { background: var(--danger); }
.admin table { width: 100%; border-collapse: collapse; }
.admin td, .admin th { border-bottom: 1px solid var(--sky); padding: 6px; text-align: left; }
.admin input { font: inherit; padding: 12px; border: 1px solid #c5d3e3; border-radius: 10px; }