/* Layout: одна колонка — табло вылетов, видео командира, посадочный талон с опросником. Стили меняются атрибутом data-style на body, всё берётся из токенов */
:root{
  --bg:#FFF6E0; --ink:#1B1A3A; --muted:#6B6880; --card:#FFFFFF; --line:#EADFC4; --field:#FFFCF4;
  --accent:#FF4D6D; --accent2:#FFC22E; --accent3:#1F9E86; --on-accent:#FFFFFF; --on-accent2:#1B1A3A;
  --panel:#1B1A3A; --on-panel:#FFFFFF; --on-panel-muted:#C9C6E4; --panel-hl:#FFC22E; --status:#5BE3A8;
  --err:#C0153A;
  --bw:2px; --radius:20px; --hard:8px 8px 0 var(--ink); --hard-sm:5px 5px 0 var(--ink);
  --num-color:var(--ink); --num-shadow:6px 6px 0 var(--accent2),12px 12px 0 var(--accent);
  --video-bg:radial-gradient(circle at 30% 30%,#FFD86B 0 18%,transparent 19%),radial-gradient(circle at 75% 65%,#7FE3CF 0 22%,transparent 23%),linear-gradient(160deg,#FF8FA3,#FF4D6D);
  --f-display:"Unbounded","Arial Black",system-ui,sans-serif; --display-w:800; --display-style:normal;
  --f-body:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-hand:"Caveat","Comic Sans MS",cursive; --hand-size:40px;
  --f-mono:"JetBrains Mono",ui-monospace,"Courier New",monospace;
  --tag-rot:-2deg;
  color-scheme:light;
}
body[data-style="elegant"]{
  --bg:#15131C; --ink:#F2E8D5; --muted:#A79F8F; --card:#1E1B27; --line:#3A3445; --field:#1A1722;
  --accent:#C9A45C; --accent2:#C9A45C; --accent3:#9F8BD0; --on-accent:#15131C; --on-accent2:#15131C;
  --panel:#211D2B; --on-panel:#F2E8D5; --on-panel-muted:#A79F8F; --panel-hl:#C9A45C; --status:#C9A45C;
  --err:#F08C8C;
  --bw:1px; --radius:4px; --hard:none; --hard-sm:none;
  --num-color:#C9A45C; --num-shadow:none;
  --video-bg:radial-gradient(circle at 50% 40%,#3A2F4F 0,#15131C 70%);
  --f-display:"Cormorant Garamond",Georgia,"Times New Roman",serif; --display-w:500; --display-style:normal;
  --f-hand:"Marck Script","Cormorant Garamond",cursive; --hand-size:38px;
  --tag-rot:0deg;
  color-scheme:dark;
}
body[data-style="tender"]{
  --bg:#FBF2EF; --ink:#4A3640; --muted:#8C7780; --card:#FFFFFF; --line:#EFD9D6; --field:#FFF9F7;
  --accent:#C2627A; --accent2:#F4D3C4; --accent3:#6F9466; --on-accent:#FFFFFF; --on-accent2:#4A3640;
  --panel:#F4E1DC; --on-panel:#4A3640; --on-panel-muted:#8C7780; --panel-hl:#C2627A; --status:#4F7A47;
  --err:#B23A55;
  --bw:1px; --radius:28px; --hard:0 14px 40px rgba(217,121,143,.18); --hard-sm:0 8px 22px rgba(217,121,143,.28);
  --num-color:#D9798F; --num-shadow:none;
  --video-bg:radial-gradient(circle at 25% 25%,#FFFFFF 0 10%,transparent 11%),radial-gradient(circle at 80% 70%,#DCE9D6 0 24%,transparent 25%),linear-gradient(160deg,#F9DCE2,#F1C6B8);
  --f-display:"Playfair Display",Georgia,serif; --display-w:700; --display-style:italic;
  --f-hand:"Marck Script","Caveat",cursive; --hand-size:38px;
  --tag-rot:0deg;
  color-scheme:light;
}
body[data-style="party"]{
  --bg:#120B2E; --ink:#F4F1FF; --muted:#A99FD6; --card:#1C1342; --line:#3B2E78; --field:#170F38;
  --accent:#FF3DBB; --accent2:#2DE2FF; --accent3:#B6FF3D; --on-accent:#120B2E; --on-accent2:#120B2E;
  --panel:#0B061F; --on-panel:#F4F1FF; --on-panel-muted:#A99FD6; --panel-hl:#2DE2FF; --status:#B6FF3D;
  --err:#FF7A9C;
  --bw:2px; --radius:14px; --hard:0 0 0 2px var(--accent),0 0 28px rgba(255,61,187,.45); --hard-sm:0 0 22px rgba(255,61,187,.6);
  --num-color:#F4F1FF; --num-shadow:0 0 12px #FF3DBB,0 0 34px #FF3DBB,0 0 60px #2DE2FF;
  --video-bg:radial-gradient(circle at 20% 30%,rgba(255,61,187,.7) 0,transparent 40%),radial-gradient(circle at 80% 70%,rgba(45,226,255,.6) 0,transparent 45%),#120B2E;
  --f-display:"Russo One","Arial Black",sans-serif; --display-w:400; --display-style:normal;
  --f-hand:"Russo One",sans-serif; --hand-size:28px;
  --tag-rot:-2deg;
  color-scheme:dark;
}

*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.55;padding-inline:16px;padding-block:0 48px;transition:background .4s,color .4s}
.wrap{max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:28px}

/* панель примера */
.demo{margin-top:12px;background:var(--panel);color:var(--on-panel);border:var(--bw) solid var(--line);border-radius:12px;padding:12px 14px;font-size:13px;display:flex;flex-direction:column;gap:10px}
.demo .row{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.demo .lbl{font-weight:700;color:var(--panel-hl);margin-right:4px;min-width:4.5em}
.demo button{font:inherit;font-size:13px;border:1px solid var(--on-panel-muted);background:transparent;color:var(--on-panel);border-radius:999px;padding:3px 11px;cursor:pointer}
.demo button[aria-pressed="true"]{background:var(--panel-hl);color:var(--panel);border-color:var(--panel-hl)}
.demo button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.demo small{color:var(--on-panel-muted)}

/* герой */
.hero{padding-top:8px}
.flightno{font-family:var(--f-mono);font-weight:700;font-size:13px;letter-spacing:.14em;color:var(--accent2);margin:0 0 10px;display:flex;align-items:center;gap:8px}
body[data-style="tender"] .flightno,body:not([data-style]) .flightno,body[data-style="bright"] .flightno{color:var(--accent)}
.flightno svg{flex:none}
.flightno svg path{fill:currentColor}
.hello{font-family:var(--f-hand);font-size:var(--hand-size);color:var(--accent);line-height:1.15;margin:0;text-wrap:balance}
.big{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-top:12px}
.num{font-family:var(--f-display);font-weight:var(--display-w);font-style:var(--display-style);font-size:clamp(110px,34vw,180px);line-height:.82;letter-spacing:-.04em;color:var(--num-color);text-shadow:var(--num-shadow)}
.big p{margin:0 0 6px;font-family:var(--f-display);font-style:var(--display-style);font-weight:var(--display-w);font-size:20px;line-height:1.2;max-width:13ch;text-wrap:balance}
.lead{margin:22px 0 0;font-size:18px;max-width:34ch}
canvas#conf{position:fixed;inset:0;pointer-events:none;z-index:5}

/* табло вылетов */
.board{background:var(--panel);color:var(--on-panel);border:var(--bw) solid var(--line);border-radius:var(--radius);padding:16px;font-family:var(--f-mono);display:flex;flex-direction:column;gap:12px}
.board h2{margin:0;font-size:12px;letter-spacing:.16em;color:var(--on-panel-muted);font-weight:700;display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}
.status{color:var(--status);animation:blink 1.4s steps(2,start) infinite}
@keyframes blink{to{visibility:hidden}}
.rows{display:grid;gap:0}
.r{display:grid;grid-template-columns:7.5em 1fr;gap:10px;padding:9px 0;border-top:1px dashed var(--line);align-items:baseline}
.r .k{font-size:11px;letter-spacing:.12em;color:var(--on-panel-muted);text-transform:uppercase}
.r .v{font-size:16px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;min-width:0;overflow-wrap:anywhere}
.r .v.hl{color:var(--panel-hl)}
.cd{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.cd div{background:var(--card);border:1px solid var(--line);border-radius:8px;text-align:center;padding:8px 2px}
body[data-style="tender"] .cd div{background:#FFFFFF}
.cd b{display:block;font-size:clamp(22px,7vw,32px);font-variant-numeric:tabular-nums;line-height:1.1;color:var(--ink)}
.cd span{font-size:10px;letter-spacing:.1em;color:var(--muted);text-transform:uppercase}
.btns{display:flex;flex-wrap:wrap;gap:10px}
.btn{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-body);font-weight:700;font-size:14px;text-decoration:none;color:var(--ink);background:var(--field);border:var(--bw) solid var(--accent);border-radius:999px;padding:7px 14px;cursor:pointer}
.board .btn{background:transparent;color:var(--on-panel);border-color:var(--panel-hl)}
body[data-style="elegant"] .btn{border-radius:2px}
.btn:hover{background:var(--accent2);color:var(--on-accent2);border-color:var(--accent2)}
.btn:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* видео */
.video{position:relative;aspect-ratio:9/16;max-width:100%;border-radius:var(--radius);overflow:hidden;background:var(--video-bg);border:calc(var(--bw) + 1px) solid var(--line);box-shadow:var(--hard)}
body:not([data-style]) .video,body[data-style="bright"] .video{border-color:var(--ink)}
body[data-style="elegant"] .video{border-color:var(--accent)}
.video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.video.playing .ph,.video.playing .nameTag{display:none}
.demo select{font:inherit;font-size:13px;background:var(--panel);color:var(--on-panel);border:1px solid var(--on-panel-muted);border-radius:8px;padding:4px 8px;max-width:100%}
.video .ph{background:linear-gradient(transparent 55%,rgba(0,0,0,.45));position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px;color:#FFFFFF;text-align:center;padding:20px}
body[data-style="tender"] .video .ph{color:var(--ink)}
.play{width:78px;height:78px;border-radius:50%;background:var(--card);border:var(--bw) solid var(--ink);display:grid;place-items:center;cursor:pointer;box-shadow:var(--hard-sm)}
.play:focus-visible{outline:3px solid var(--accent2);outline-offset:3px}
.play svg{margin-left:6px}
.play path{fill:var(--accent)}
.video .note{font-size:14px;max-width:26ch}
.nameTag{position:absolute;left:16px;right:16px;bottom:16px;background:var(--accent2);color:var(--on-accent2);border:var(--bw) solid var(--ink);border-radius:calc(var(--radius) * .7);padding:8px 12px;font-family:var(--f-hand);font-size:calc(var(--hand-size) * .78);line-height:1.15;text-align:center;transform:rotate(var(--tag-rot))}
body[data-style="elegant"] .nameTag{background:transparent;color:var(--accent);border-color:var(--accent)}

/* посадочный талон */
h2.sec{font-family:var(--f-display);font-weight:var(--display-w);font-style:var(--display-style);font-size:28px;margin:0 0 4px;text-wrap:balance}
.sub{margin:0 0 16px;color:var(--muted)}
.pass{position:relative;background:var(--card);border:var(--bw) solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--hard)}
body:not([data-style]) .pass,body[data-style="bright"] .pass{border-color:var(--ink)}
.pass-head{background:var(--accent);color:var(--on-accent);display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 18px;font-family:var(--f-mono);font-weight:700;font-size:12px;letter-spacing:.14em;flex-wrap:wrap}
.pass-head b{font-size:16px;letter-spacing:.08em}
.pass-info{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 12px;padding:18px}
.pi{min-width:0}
.pi .k{font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;color:var(--muted);text-transform:uppercase}
.pi .v{font-family:var(--f-mono);font-weight:700;font-size:17px;line-height:1.25;text-transform:uppercase;overflow-wrap:anywhere}
.pi.name{grid-column:1/-1}
.pi.name .v{font-family:var(--f-display);font-weight:var(--display-w);font-style:var(--display-style);font-size:24px;text-transform:none;color:var(--accent)}
.route{grid-column:1/-1;display:flex;align-items:center;gap:10px;font-family:var(--f-mono);font-weight:700}
.route .city{font-size:26px;line-height:1}
.route .city small{display:block;font-size:10px;letter-spacing:.12em;color:var(--muted);font-weight:500;margin-top:4px}
.route .line{flex:1;min-width:30px;border-top:2px dotted var(--muted);position:relative;height:0}
.route .line svg{position:absolute;left:50%;top:-11px;transform:translateX(-50%);background:var(--card);padding:0 4px;box-sizing:content-box}
.route .line svg path{fill:var(--accent)}
.perf{position:relative;height:0;border-top:2px dashed var(--line);margin:0 18px}
.perf::before,.perf::after{content:"";position:absolute;top:-14px;width:26px;height:26px;border-radius:50%;background:var(--bg);border:var(--bw) solid var(--line)}
body:not([data-style]) .perf::before,body:not([data-style]) .perf::after,body[data-style="bright"] .perf::before,body[data-style="bright"] .perf::after{border-color:var(--ink)}
.perf::before{left:-34px}
.perf::after{right:-34px}

form{display:flex;flex-direction:column;gap:18px;padding:22px 18px 20px}
fieldset{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;min-width:0}
legend,label.q{font-weight:700;padding:0;margin-bottom:6px}
.qk{display:block;font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;color:var(--muted);text-transform:uppercase;font-weight:500}
.choices{display:flex;flex-wrap:wrap;gap:8px}
.choices input{position:absolute;opacity:0;pointer-events:none}
.choices label{border:var(--bw) solid var(--line);border-radius:999px;padding:8px 14px;cursor:pointer;font-weight:600;background:var(--field)}
body:not([data-style]) .choices label,body[data-style="bright"] .choices label{border-color:var(--ink)}
body[data-style="elegant"] .choices label{border-radius:2px}
.choices input:checked+label{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.choices input:focus-visible+label{outline:3px solid var(--accent2);outline-offset:2px}
input[type=text],textarea{font:inherit;width:100%;border:var(--bw) solid var(--line);border-radius:calc(var(--radius) * .6);padding:10px 12px;background:var(--field);color:var(--ink)}
input[type=text]:focus,textarea:focus{outline:none;border-color:var(--accent)}
::placeholder{color:var(--muted);opacity:.8}
.check{display:flex;gap:10px;align-items:flex-start;font-weight:600}
.check input{width:20px;height:20px;accent-color:var(--accent);margin-top:2px;flex:none}
.send{font-family:var(--f-display);font-weight:var(--display-w);font-style:var(--display-style);font-size:19px;background:var(--accent);color:var(--on-accent);border:var(--bw) solid var(--accent);border-radius:calc(var(--radius) * .8);padding:14px;cursor:pointer;box-shadow:var(--hard-sm);transition:transform .1s}
body:not([data-style]) .send,body[data-style="bright"] .send{border-color:var(--ink)}
body[data-style="elegant"] .send{letter-spacing:.08em;text-transform:uppercase;font-size:17px;font-weight:700}
.send:active{transform:translate(2px,2px)}
.send:focus-visible{outline:3px solid var(--accent2);outline-offset:3px}
.err{color:var(--err);font-weight:700;font-size:14px;margin:0}

/* после регистрации */
.done{padding:22px 18px 20px;display:flex;flex-direction:column;gap:14px;position:relative}
.stamp{align-self:flex-start;font-family:var(--f-mono);font-weight:700;font-size:20px;letter-spacing:.12em;color:var(--status);border:3px solid var(--status);border-radius:8px;padding:6px 14px;transform:rotate(-6deg);animation:stampIn .45s cubic-bezier(.2,1.6,.4,1) both}
.stamp.no{color:var(--err);border-color:var(--err)}
body:not([data-style]) .stamp:not(.no),body[data-style="bright"] .stamp:not(.no){color:var(--accent3);border-color:var(--accent3)}
@keyframes stampIn{from{transform:rotate(-6deg) scale(2.2);opacity:0}to{transform:rotate(-6deg) scale(1);opacity:1}}
.done h3{font-family:var(--f-display);font-weight:var(--display-w);font-style:var(--display-style);margin:0;font-size:24px}
.done p{margin:0}
.barcode{display:block;width:100%;height:56px}
.barcode rect{fill:var(--ink)}
.done pre{white-space:pre-wrap;font-family:var(--f-mono);font-size:13px;background:var(--field);border:1px solid var(--line);border-radius:12px;padding:12px;margin:0;overflow-wrap:anywhere}

.album{border:var(--bw) dashed var(--muted);border-radius:var(--radius);padding:18px;display:flex;gap:14px;align-items:center}
.album .ic{width:56px;height:56px;flex:none;border-radius:calc(var(--radius) * .6);background:var(--accent2);display:grid;place-items:center}
.album .ic path{fill:var(--on-accent2)}
.album p{margin:0}
footer{text-align:center;color:var(--muted);font-size:13px;font-family:var(--f-mono);letter-spacing:.06em}
@media (max-width:420px){.pass-info{grid-template-columns:1fr 1fr}}
@media (prefers-reduced-motion:reduce){canvas#conf{display:none}body{transition:none}.status,.stamp{animation:none}}
.album a.btn{margin-top:10px}
.video .nov{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;color:#fff;font-weight:700}
body[data-style="tender"] .video .nov,body[data-style="bright"] .video .nov{color:var(--ink)}

[hidden]{display:none!important}