/* Паспорт болельщика (/passport/) — страница сайта с собственной тёмной
   витриной: шапка, подвал, метрика и og-теги приходят из общего шаблона
   (build_passport), а этот файл оформляет только <main class="passport-shell">.
   Три темы карточки (VIP / Трибуна / ББШ) рисуются в SVG из passport.js;
   здесь — каркас витрины, анкета и 3D-переворот карты. Все правила скоупятся
   под .passport-shell, чтобы не спорить с сайтовым бандлом (и наоборот). */
.passport-shell{color-scheme:dark;--pp-bg:#071321;--pp-line:#294058;--pp-text:#f4f7fb;--pp-muted:#afc0d1;--pp-blue:#69c9ff;--pp-amber:#efc77f;position:relative;background:radial-gradient(ellipse 48% 38% at 85% 3%,rgba(13,98,174,.30),transparent 85%),radial-gradient(ellipse 32% 30% at 0% 60%,rgba(229,165,69,.09),transparent 90%),#071321;color:var(--pp-text);font-family:Inter,"Segoe UI",Roboto,system-ui,-apple-system,Arial,sans-serif;line-height:1.45}
.passport-shell:before{content:"";position:absolute;inset:0;z-index:0;opacity:.12;pointer-events:none;background:repeating-linear-gradient(90deg,transparent 0px,transparent 125px,#b6dbff 126px,transparent 127px)}
.passport-shell *{box-sizing:border-box}
.passport-shell button,.passport-shell input,.passport-shell select{font:inherit}
.passport-shell button{cursor:pointer}
.passport-shell button:focus-visible,.passport-shell input:focus-visible,.passport-shell select:focus-visible,.passport-shell a:focus-visible{outline:3px solid #6fcfff;outline-offset:3px}
.passport-shell a{color:inherit;text-decoration:none}
.passport-shell .shell{position:relative;z-index:1;max-width:1430px;margin:0 auto;padding:0 28px 70px}
.passport-shell .back-row{padding:19px 0 0}
.passport-shell .toplink{font-size:13px;color:#bed0dd;display:inline-flex;gap:7px;align-items:center}
.passport-shell .toplink:hover{color:white}
.passport-shell .passport-hero{padding:38px 0 26px;max-width:1050px}
.passport-shell .kicker{display:flex;gap:10px;align-items:center;color:#eac27e;letter-spacing:.20em;font-size:11px;font-weight:800;text-transform:uppercase;margin-bottom:14px}
.passport-shell .kicker:before{content:"";width:28px;height:1px;background:#eac27e}
.passport-shell h1{margin:0;font-family:inherit;font-size:clamp(46px,6.2vw,88px);line-height:.94;letter-spacing:-.072em;font-weight:920;color:var(--pp-text)}
.passport-shell h1 span{color:#82cef6}
.passport-shell .lede{margin:20px 0 0;color:#b6c6d8;font-size:clamp(15px,1.5vw,18px);max-width:66ch}
.passport-shell .workspace{display:grid;grid-template-columns:minmax(340px,.8fr) minmax(580px,1.45fr);gap:25px;align-items:start;margin-top:17px}
.passport-shell .editor,.passport-shell .gallery{background:rgba(13,26,43,.89);border:1px solid rgba(148,196,239,.17);border-radius:26px;box-shadow:0 20px 80px rgba(0,0,0,.16)}
.passport-shell .editor{padding:23px}
.passport-shell .gallery{padding:24px 25px 28px;position:sticky;top:16px;overflow:hidden}
.passport-shell .section-title{font-size:13px;color:#eec980;letter-spacing:.18em;text-transform:uppercase;margin:0 0 8px;font-weight:800}
.passport-shell h2{font-family:inherit;font-size:24px;letter-spacing:-.04em;margin:0 0 6px;color:var(--pp-text)}
.passport-shell .editor-intro{color:var(--pp-muted);font-size:13px;margin:0 0 19px}
.passport-shell .field-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 12px}
.passport-shell .field{display:flex;flex-direction:column;gap:6px;min-width:0}
.passport-shell .field.full{grid-column:1/-1}
.passport-shell label{font-size:12px;font-weight:650;color:#c6d8e7}
.passport-shell input,.passport-shell select{width:100%;background:#091728;border:1px solid #2a425a;border-radius:11px;min-height:43px;padding:10px 11px;color:#eef6ff;font-size:13px}
.passport-shell input[aria-invalid="true"]{border-color:#e8906d}
.passport-shell input::placeholder{color:#8294a8}
.passport-shell select option{background:#0c1b2c;color:white}
.passport-shell .field-note{font-size:11px;color:#859aae;margin-top:0}
.passport-shell .editor-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:20px;padding-top:16px;border-top:1px solid rgba(255,255,255,.1)}
.passport-shell .reset{font-size:12px;background:none;border:0;color:#9fb6c8;padding:5px}
.passport-shell .reset:hover{color:#fff}
.passport-shell .local-note{font-size:11px;color:#8098ac;margin:0}
.passport-shell .design-header{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:14px}
.passport-shell .gallery-sub{font-size:13px;color:#aebfd0;margin:0}
.passport-shell .switcher{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:13px 0 18px}
.passport-shell .skin-btn{border:1px solid rgba(255,255,255,.13);border-radius:13px;padding:12px 9px 11px;background:#0a1728;text-align:left;display:flex;align-items:center;gap:11px;min-width:0;transition:border-color .2s,background .2s,transform .2s;color:var(--pp-text)}
.passport-shell .skin-btn:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.5)}
.passport-shell .skin-btn[aria-pressed="true"]{border-color:#b6defe;background:#15324a;box-shadow:0 0 0 1px rgba(168,221,255,.1)}
.passport-shell .skin-chip{width:39px;height:44px;border-radius:7px;display:flex;align-items:end;justify-content:end;position:relative;overflow:hidden;flex:none}
.passport-shell .skin-chip:before{content:"";position:absolute;top:5px;left:5px;width:18px;height:18px;border:2px solid currentColor;border-radius:50%;opacity:.75}
.passport-shell .skin-chip:after{content:"";position:absolute;bottom:7px;left:5px;width:29px;height:3px;background:currentColor;opacity:.65}
.passport-shell .skin-chip.vip{background:linear-gradient(125deg,#050a12,#263b53 64%,#0b1524);color:#d2e0e9}
.passport-shell .skin-chip.tribune{background:linear-gradient(135deg,#006ded 50%,#f0f6ff 50%);color:#57f1ff}
.passport-shell .skin-chip.bbsh{background:linear-gradient(130deg,#071525 58%,#dfb366 58%);color:#88cffa}
.passport-shell .skin-name{display:block;font-size:13px;font-weight:800;color:#f2f6fa;white-space:nowrap}
.passport-shell .skin-desc{display:block;font-size:11px;color:#99afc3;margin-top:2px;white-space:nowrap}
.passport-shell .card-stage{min-height:430px;display:grid;place-items:center;padding:39px 21px;background:radial-gradient(circle at 55% 15%,rgba(91,159,217,.11),transparent 50%),repeating-radial-gradient(circle at 75% 34%,transparent 0,transparent 76px,rgba(170,213,255,.045) 77px,transparent 79px),linear-gradient(130deg,#07101c,#0b1a2b 64%,#122338);border:1px solid rgba(177,221,255,.13);border-radius:19px;position:relative;overflow:hidden}
.passport-shell .card-stage:after{content:"";position:absolute;bottom:12%;left:22%;width:57%;height:14%;border-radius:50%;background:#01060b;opacity:.5;filter:blur(30px);transform:rotate(-5deg);pointer-events:none}
.passport-shell .passport{width:min(100%,710px);aspect-ratio:960/600;perspective:1600px;z-index:1}
.passport-shell .passport-inner{position:relative;width:100%;height:100%;transition:transform .75s cubic-bezier(.2,.72,.18,1);transform-style:preserve-3d;transform:rotate(-4deg) rotateX(3deg)}
.passport-shell .passport.flipped .passport-inner{transform:rotateY(180deg) rotate(4deg) rotateX(3deg)}
.passport-shell .card-side{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:3.1%/5%;overflow:hidden;background:#101c2a;box-shadow:0 35px 60px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.16),inset 0 1px 0 rgba(255,255,255,.17)}
.passport-shell .card-side.back{transform:rotateY(180deg)}
.passport-shell .card-side svg{display:block;width:100%;height:100%}
.passport-shell .preview-foot{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center;margin-top:17px}
.passport-shell .preview-actions{display:flex;gap:8px;flex-wrap:wrap}
.passport-shell .btn{border-radius:11px;padding:11px 15px;font-size:13px;font-weight:750;border:1px solid rgba(255,255,255,.17);background:#1a3045;color:#f2f7fc;display:inline-flex;align-items:center;justify-content:center;gap:7px;transition:background .2s,transform .2s}
.passport-shell .btn:hover{background:#23435e;transform:translateY(-1px)}
.passport-shell .btn.primary{border-color:#8ad6ff;background:linear-gradient(115deg,#9adeff,#5db5ed);color:#082139}
.passport-shell .btn.primary:hover{background:#b4e7ff}
.passport-shell .btn:disabled{opacity:.6;cursor:wait}
/* «Скачать PNG» — основная кнопка; «Обе стороны» живёт в маленьком меню
   под стрелкой, чтобы на телефоне не разрасталась панель кнопок. */
.passport-shell .download-group{position:relative;display:inline-flex;gap:2px}
.passport-shell .download-caret{padding:11px 10px;border-top-left-radius:0;border-bottom-left-radius:0}
.passport-shell .download-group .btn.primary:first-child{border-top-right-radius:0;border-bottom-right-radius:0}
.passport-shell .download-menu{position:absolute;top:calc(100% + 6px);right:0;z-index:5;background:#0d1d30;border:1px solid rgba(148,196,239,.3);border-radius:13px;padding:7px;box-shadow:0 18px 50px rgba(0,0,0,.5);min-width:230px}
.passport-shell .download-menu[hidden]{display:none}
.passport-shell .download-menu .btn{width:100%}
.passport-shell .view-note{font-size:11px;color:#92abbf}
.passport-shell .details{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;padding-top:20px;margin-top:20px;border-top:1px solid rgba(255,255,255,.1)}
.passport-shell .archetype-name{font-family:inherit;font-size:24px;line-height:1.1;font-weight:860;letter-spacing:-.045em;margin:0 0 7px;color:var(--pp-text)}
.passport-shell .archetype-description{font-size:13px;color:#afc1d0;max-width:52ch;margin:0}
.passport-shell .archetype-note{font-size:12px;color:#8fa3b5;max-width:52ch;margin:7px 0 0}
.passport-shell .archetype-note[hidden]{display:none}
.passport-shell .meta-pills{display:flex;flex-direction:column;align-items:end;gap:8px;flex:none}
.passport-shell .pill{border-radius:20px;padding:6px 11px;font-size:11px;font-weight:800;letter-spacing:.02em;background:rgba(128,207,255,.10);border:1px solid rgba(126,209,255,.22);color:#bce9ff}
.passport-shell .pill.amber{color:#f4d398;border-color:rgba(241,208,151,.23);background:rgba(241,208,151,.06)}
.passport-shell .disclaimer{font-size:11px;color:#97aabc;margin:15px 0 0}
.toast{position:fixed;bottom:23px;left:50%;transform:translate(-50%,30px);opacity:0;pointer-events:none;background:#e4f3ff;color:#09243b;border-radius:999px;padding:11px 20px;z-index:100;box-shadow:0 14px 50px #0008;font-size:13px;font-weight:700;transition:opacity .2s,transform .2s}
.toast.show{opacity:1;transform:translate(-50%,0)}
/* На одной колонке анкета идёт первой: заполняешь — и сразу под ней живая
   карточка, а не наоборот (не скроллить мимо превью, чтобы начать). */
@media(max-width:1180px){.passport-shell .workspace{grid-template-columns:1fr}.passport-shell .gallery{position:static}.passport-shell .editor{order:1}.passport-shell .gallery{order:2}.passport-shell .editor .field-grid{grid-template-columns:repeat(3,1fr)}.passport-shell .editor .field.full{grid-column:span 2}}
@media(max-width:700px){.passport-shell .shell{padding:0 13px 55px}.passport-shell .back-row{padding-top:12px}.passport-shell .passport-hero{padding:26px 6px 20px}.passport-shell h1{font-size:clamp(47px,10vw,66px)}.passport-shell .lede{margin-top:14px}.passport-shell .workspace{gap:14px}.passport-shell .editor,.passport-shell .gallery{padding:16px;border-radius:19px}.passport-shell .editor .field-grid{grid-template-columns:1fr 1fr}.passport-shell .editor .field.full{grid-column:1/-1}.passport-shell .card-stage{min-height:auto;padding:36px 12px}.passport-shell .switcher{gap:6px}.passport-shell .skin-btn{padding:9px 7px;gap:6px}.passport-shell .skin-chip{width:23px;height:33px}.passport-shell .skin-chip:before{width:10px;height:10px}.passport-shell .skin-chip:after{width:13px}.passport-shell .skin-name{font-size:11px}.passport-shell .skin-desc{font-size:9px}.passport-shell .preview-foot{align-items:stretch;flex-direction:column}.passport-shell .preview-actions{display:grid;grid-template-columns:1fr 1fr}.passport-shell .preview-actions .btn{font-size:11px;padding:10px 7px}.passport-shell .download-group{display:flex}.passport-shell .download-group .btn.primary:first-child{flex:1}.passport-shell .details{flex-direction:column}.passport-shell .meta-pills{flex-direction:row;align-items:start}.passport-shell .view-note{margin:0}.passport-shell .design-header{margin:0}}
@media(max-width:380px){.passport-shell .editor .field-grid{grid-template-columns:1fr}.passport-shell .preview-actions{grid-template-columns:1fr}.passport-shell .skin-desc{display:none}.passport-shell .skin-btn{justify-content:center}.passport-shell .card-stage{padding:25px 10px}.passport-shell .editor .field.full{grid-column:1}}
@media(prefers-reduced-motion:reduce){.passport-shell *,.passport-shell *:before,.passport-shell *:after{animation:none!important;transition:none!important}.passport-shell .passport-inner{transform:none}.passport-shell .passport.flipped .passport-inner{transform:rotateY(180deg)}}