/* Нишевый FunPay — дизайн-система. Токены и компоненты один в один с сайтом
   nisheviy-freelance.tech: фон #08090C, акцент #B26BFF, Unbounded для
   заголовков, Manrope для текста, JetBrains Mono для служебных подписей.
   Ни одного внешнего ресурса: шрифты лежат рядом. */

@font-face{font-family:'Unbounded';font-weight:700;font-display:swap;src:url(fonts/unbounded-700-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Unbounded';font-weight:700;font-display:swap;src:url(fonts/unbounded-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Unbounded';font-weight:800;font-display:swap;src:url(fonts/unbounded-800-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Unbounded';font-weight:800;font-display:swap;src:url(fonts/unbounded-800-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Unbounded';font-weight:900;font-display:swap;src:url(fonts/unbounded-900-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Unbounded';font-weight:900;font-display:swap;src:url(fonts/unbounded-900-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';font-weight:400;font-display:swap;src:url(fonts/manrope-400-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Manrope';font-weight:400;font-display:swap;src:url(fonts/manrope-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';font-weight:500;font-display:swap;src:url(fonts/manrope-500-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Manrope';font-weight:500;font-display:swap;src:url(fonts/manrope-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';font-weight:600;font-display:swap;src:url(fonts/manrope-600-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Manrope';font-weight:600;font-display:swap;src:url(fonts/manrope-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';font-weight:700;font-display:swap;src:url(fonts/manrope-700-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Manrope';font-weight:700;font-display:swap;src:url(fonts/manrope-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'JetBrains Mono';font-weight:400;font-display:swap;src:url(fonts/jetbrainsmono-400-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'JetBrains Mono';font-weight:400;font-display:swap;src:url(fonts/jetbrainsmono-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'JetBrains Mono';font-weight:500;font-display:swap;src:url(fonts/jetbrainsmono-500-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'JetBrains Mono';font-weight:500;font-display:swap;src:url(fonts/jetbrainsmono-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'JetBrains Mono';font-weight:700;font-display:swap;src:url(fonts/jetbrainsmono-700-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'JetBrains Mono';font-weight:700;font-display:swap;src:url(fonts/jetbrainsmono-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --bg:#08090C;--bg2:#0A0C11;--bg3:#0E1017;--panel:rgba(255,255,255,.012);--panel2:rgba(255,255,255,.028);
  --line:rgba(255,255,255,.08);--line2:rgba(255,255,255,.16);
  --text:#E9EBF2;--muted:#9198A8;--dim:#5E6575;--dimmer:#3E4452;
  --acc:#B26BFF;--acc2:#C990FF;--acc3:#7C3AED;--cyan:#38C9F2;--gold:#F2C64E;--pink:#FF3DD8;--ok:#5BE39A;--bad:#FF6B6B;
  --head:'Unbounded','Segoe UI',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
  --body:'Manrope','Segoe UI',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
  --mono:'JetBrains Mono','Cascadia Mono',Consolas,ui-monospace,'SF Mono',Menlo,monospace;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);overflow-x:clip}
html{scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:rgba(178,107,255,.35) #08090C}
body{font-family:var(--body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;line-height:1.6}
::selection{background:rgba(178,107,255,.4);color:#fff}
a{color:var(--muted);text-decoration:none;transition:color .3s ease}
a:hover{color:var(--acc)}
button,input,select,textarea{font:inherit;color:inherit}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:10px}
img{max-width:100%}

/* ── типографика ── */
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--dim)}
.mono.b{color:var(--muted)}
.h1{margin:0;font-family:var(--head);font-weight:900;font-size:clamp(40px,9vw,120px);line-height:1.02;letter-spacing:-.01em;text-wrap:balance}
.h2{margin:0;font-family:var(--head);font-weight:800;font-size:clamp(28px,4.6vw,58px);line-height:1.06;letter-spacing:-.01em;text-wrap:balance}
.h3{margin:0;font-family:var(--head);font-weight:700;font-size:clamp(17px,1.6vw,22px);line-height:1.3;letter-spacing:-.01em}
.lead{margin:0;font-size:clamp(15px,1.3vw,18px);line-height:1.65;color:var(--muted);text-wrap:pretty}
.grad{background:linear-gradient(90deg,#B26BFF 0%,#8E92FA 45%,#38C9F2 100%);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ── логотип ── */
@keyframes logoGlow{from{filter:drop-shadow(0 0 2px rgba(178,107,255,.28))}to{filter:drop-shadow(0 0 9px rgba(178,107,255,.8)) drop-shadow(0 0 20px rgba(255,61,216,.32))}}
.logo{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.logo img{display:block;flex:none;border-radius:22%;animation:logoGlow 3.6s ease-in-out infinite alternate}
.logo b{color:var(--acc);font-weight:500}

/* ── кнопки ── */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:14px 24px;border-radius:999px;border:1px solid var(--line2);background:rgba(255,255,255,.03);color:var(--text);font-family:var(--head);font-weight:700;font-size:13px;letter-spacing:.01em;cursor:pointer;text-decoration:none;transition:transform .6s var(--ease),box-shadow .5s ease,border-color .3s ease,background .3s ease,color .3s ease;-webkit-tap-highlight-color:transparent;white-space:nowrap}
.btn:hover{border-color:rgba(178,107,255,.6);color:#fff;transform:translateY(-2px);box-shadow:0 0 34px rgba(178,107,255,.18)}
.btn.primary{border-color:rgba(255,255,255,.25);background:linear-gradient(135deg,#C990FF 0%,#B26BFF 45%,#7C3AED 110%);color:#140724;box-shadow:0 0 50px rgba(178,107,255,.32),0 10px 40px rgba(0,0,0,.45)}
.btn.primary:hover{color:#140724;box-shadow:0 0 90px rgba(178,107,255,.55),0 14px 50px rgba(0,0,0,.5)}
.btn.primary .shine{position:absolute;inset:0;border-radius:999px;overflow:clip;pointer-events:none}
.btn.primary .shine i{position:absolute;top:-40%;bottom:-40%;width:32%;left:-45%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);animation:shine 3.6s ease-in-out infinite}
@keyframes shine{0%{left:-45%}55%,100%{left:135%}}
.btn.off,.btn.primary.off{cursor:not-allowed;pointer-events:none;border:1px dashed var(--line2);background:rgba(255,255,255,.03);color:var(--muted);box-shadow:none;transform:none}
.dl-note{margin:14px auto 0;max-width:34ch;color:var(--muted);font-size:11px;letter-spacing:.08em;text-transform:none;line-height:1.5}
.btn.sm{padding:9px 16px;font-size:12px}
.btn.xs{padding:6px 12px;font-size:11px;border-radius:10px;font-family:var(--mono);letter-spacing:.06em;text-transform:none;font-weight:500}
.btn.ghost{border-color:transparent;background:transparent;color:var(--muted)}
.btn.ghost:hover{background:rgba(255,255,255,.04);box-shadow:none;transform:none}
.btn.danger{border-color:rgba(255,107,107,.35);color:#ffb3b3}
.btn.danger:hover{border-color:#FF6B6B;box-shadow:0 0 30px rgba(255,107,107,.18)}
.btn.tg{gap:10px}
.btn:disabled{opacity:.45;cursor:default;transform:none;box-shadow:none}

/* ── карточки ── */
.card{border:1px solid var(--line);border-radius:24px;background:linear-gradient(180deg,var(--panel2),rgba(255,255,255,.006));padding:clamp(20px,3vw,32px);transition:border-color .35s ease,transform .6s var(--ease),box-shadow .5s ease}
.card:hover{border-color:var(--line2)}
.card.glow{border-color:rgba(178,107,255,.4);box-shadow:0 0 0 1px rgba(178,107,255,.15),0 30px 80px rgba(178,107,255,.08)}
.tag{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:6px 12px;white-space:nowrap}
.tag.acc{color:var(--acc);border-color:rgba(178,107,255,.35)}
.tag.cyan{color:var(--cyan);border-color:rgba(56,201,242,.35)}
.tag.gold{color:var(--gold);border-color:rgba(242,198,78,.35)}
.tag.ok{color:var(--ok);border-color:rgba(91,227,154,.35)}
.tag.bad{color:var(--bad);border-color:rgba(255,107,107,.35)}
.dot{width:6px;height:6px;border-radius:50%;background:var(--acc);box-shadow:0 0 12px rgba(178,107,255,.9);animation:blinkDot 1.7s ease infinite}
.dot.ok{background:var(--ok);box-shadow:0 0 12px rgba(91,227,154,.9)}
.dot.bad{background:var(--bad);box-shadow:0 0 12px rgba(255,107,107,.9)}
.dot.gold{background:var(--gold);box-shadow:0 0 12px rgba(242,198,78,.9)}
@keyframes blinkDot{50%{opacity:.2}}
.hr{border:0;border-top:1px solid var(--line);margin:0}

/* ── формы ── */
.field{display:flex;flex-direction:column;gap:7px}
.field label,.label{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.input,.select,.textarea{width:100%;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.025);color:var(--text);transition:border-color .25s ease,background .25s ease;font-size:14px}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:rgba(178,107,255,.6);background:rgba(178,107,255,.05)}
.input.code{font-family:var(--mono);font-size:22px;letter-spacing:.22em;text-align:center;text-transform:uppercase}
.textarea{min-height:90px;resize:vertical}
/* карточка пачки в панели: длинные названия лотов обрезаем, карточка не разъезжается */
.card .chips.lots{max-height:132px;overflow:auto}
.card .chips.lots .tag{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.select option,.select optgroup{background:#0F1118;color:#E9EBF2}
.select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:36px}
.check{display:inline-flex;align-items:center;gap:10px;cursor:pointer;color:var(--muted);font-size:14px}
.check input{width:18px;height:18px;accent-color:var(--acc)}

/* ── сетка ── */
.wrap{max-width:1240px;margin:0 auto;padding:0 clamp(20px,5vw,64px)}
.grid{display:grid;gap:18px}
.grid.c2{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.grid.c3{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.grid.c4{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.between{justify-content:space-between}
.stack{display:flex;flex-direction:column;gap:12px}

/* ── таблицы ── */
.table{width:100%;border-collapse:collapse;font-size:13px}
.table th{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);font-weight:500;white-space:nowrap}
.table td{padding:12px;border-bottom:1px solid rgba(255,255,255,.05);vertical-align:top}
.table tr:hover td{background:rgba(255,255,255,.018)}
.table .num{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:18px}
.key{font-family:var(--mono);font-size:13px;letter-spacing:.06em;color:var(--acc2);white-space:nowrap}
@media(max-width:760px){.table{min-width:640px}}

/* ── тосты ── */
.toasts{position:fixed;right:18px;bottom:18px;display:flex;flex-direction:column;gap:10px;z-index:90}
.toast{padding:12px 16px;border-radius:14px;border:1px solid var(--line2);background:#12141B;color:var(--text);font-size:13px;box-shadow:0 20px 60px rgba(0,0,0,.5);animation:toastIn .4s var(--ease)}
.toast.err{border-color:rgba(255,107,107,.5)}
.toast.ok{border-color:rgba(91,227,154,.4)}
@keyframes toastIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ── аккордеон FAQ — один в один с основным сайтом ──
   <details> держит ответ в DOM всегда: краулер и ИИ-ассистент читают текст из исходного HTML. Высоту раскрытия
   анимирует скрипт внизу страницы; атрибут open ставится первым — если анимация сорвётся, текст всё равно виден. */
.qa-list{display:flex;flex-direction:column;gap:10px}
.qa{border:1px solid rgba(255,255,255,.08);border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,.006));overflow:clip;transition:border-color .35s ease,background .35s ease}
.qa:hover{border-color:rgba(255,255,255,.16)}
.qa[open]{border-color:rgba(178,107,255,.32);background:linear-gradient(180deg,rgba(178,107,255,.05),rgba(255,255,255,.008))}
.qa>summary{display:flex;align-items:center;gap:18px;cursor:pointer;padding:clamp(17px,2vw,23px) clamp(18px,2.4vw,28px);list-style:none;-webkit-tap-highlight-color:transparent}
.qa>summary::-webkit-details-marker{display:none}
.qa>summary:focus-visible{outline:2px solid #B26BFF;outline-offset:-2px;border-radius:16px}
.qa>summary h3{flex:1;min-width:0;margin:0;font-family:var(--head);font-weight:700;font-size:clamp(15px,1.45vw,19px);line-height:1.4;letter-spacing:-.01em;color:var(--text);text-wrap:pretty;transition:color .3s ease}
.qa:hover>summary h3{color:#fff}
.qa[open]>summary h3{color:#CDA2FF}
.qa-i{flex:0 0 auto;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1px solid rgba(255,255,255,.12);color:#9198A8;transition:transform .45s cubic-bezier(.22,1,.36,1),color .3s ease,border-color .3s ease}
.qa:hover .qa-i{color:#E9EBF2;border-color:rgba(255,255,255,.24)}
.qa[open] .qa-i{transform:rotate(180deg);color:#B26BFF;border-color:rgba(178,107,255,.4)}
.qa-a{overflow:hidden;will-change:height}
.qa-a.anim{transition:height .38s cubic-bezier(.22,1,.36,1)}
.qa-a>p{margin:0;padding:0 clamp(18px,2.4vw,28px) clamp(19px,2.2vw,26px);font-size:clamp(14px,1.15vw,16px);line-height:1.7;color:var(--muted);text-wrap:pretty;transform-origin:top}
.qa[open] .qa-a>p{animation:qaIn .44s cubic-bezier(.22,1,.36,1) both}
@keyframes qaIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.qa-a.anim{transition:none}.qa[open] .qa-a>p{animation:none}.qa-i{transition:none}}

/* ── анимации ── */
@keyframes glowBreathe{from{transform:translate(-50%,-50%) scale(.9);opacity:.65}to{transform:translate(-50%,-50%) scale(1.08);opacity:1}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes rise{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulseRing{0%{box-shadow:0 0 0 0 rgba(178,107,255,.55)}70%{box-shadow:0 0 0 10px rgba(178,107,255,0)}100%{box-shadow:0 0 0 0 rgba(178,107,255,0)}}
[data-reveal]{opacity:0;transform:translateY(38px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
[data-reveal].in{opacity:1;transform:none}
.spin{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.2);border-top-color:var(--acc);border-radius:50%;animation:spin .8s linear infinite}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}html{scroll-behavior:auto!important}[data-reveal]{opacity:1;transform:none}}
/* ?noanim — стоп-кадр для скриншотов и проверок */
body.noanim *,body.noanim *::before,body.noanim *::after{animation:none!important;transition:none!important}
body.noanim [data-reveal]{opacity:1;transform:none}