/* IRAKUSA API — фирменный стиль шлюза (с 31.10.2026).
   Подключается последним в <head> каждой страницы (/, /chat, /account) и
   перекрывает их переменные: страницы свёрстаны на --accent/--card/--line, поэтому
   новый цвет и фон доезжают до всех элементов без правки их стилей.
   Мотивы — из логотипа и ролика IRAKUSA: изумрудный неон на чёрном, буква I с
   листьями крапивы (イラクサ), линии со светящимися точками, дуга по кольцу,
   блик по надписи, споры-частицы. Движение гаснет при prefers-reduced-motion.
   Источник: deploy/api-docs/assets/irakusa/ → /var/www/api-docs/assets/irakusa/
   (nginx: location ^~ /assets/, кеш 30 дней — при правке менять ?v= в ссылках). */

@font-face{font-family:Unbounded;font-weight:400 800;font-display:swap;src:url(unbounded-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:400 800;font-display:swap;src:url(unbounded-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --bg-top:#04110b;--bg-bottom:#010403;--glow:rgba(46,229,157,.16);
  --card:rgba(9,26,18,.58);--card-2:rgba(28,64,46,.34);--line:rgba(110,255,185,.13);
  --text:#eaf6ef;--muted:#9db8aa;--dim:#6a877a;
  --accent:#2ee59d;--accent-ink:#02150c;--ok:#5cf0b0;--warn:#f3c55b;--bad:#ff6f7d;
  --code-bg:#020906;
  --neon:#3dffa8;--neon-soft:rgba(61,255,168,.55);--silver:#d7e2dc;
  --display:Unbounded,Manrope,"Segoe UI",sans-serif;
  scrollbar-color:rgba(61,255,168,.25) transparent;
}
::selection{background:rgba(46,229,157,.35);color:#fff}

body{
  background:
    radial-gradient(1100px 620px at 50% -14%,rgba(46,229,157,.17),transparent 66%),
    radial-gradient(620px 420px at 100% 32%,rgba(46,229,157,.06),transparent 70%),
    radial-gradient(560px 520px at 0% 86%,rgba(46,229,157,.05),transparent 70%),
    linear-gradient(180deg,var(--bg-top),var(--bg-bottom) 58%);
  background-color:var(--bg-bottom);background-attachment:fixed;
}
a{color:#8affc9}
a:hover{color:#c4ffe3}

/* ── шрифт заголовков ─────────────────────────────────────────────────────── */
h1,h2,.ik-display{font-family:var(--display);letter-spacing:-.01em}
h1{font-weight:700;font-size:clamp(24px,3.5vw,36px);line-height:1.18}
h2,.step-h h2,.why h2,.card h2{font-weight:600;font-size:clamp(16px,1.9vw,18px);letter-spacing:0}
.dash-card b{font-family:var(--display);font-weight:600;font-size:16.5px;line-height:1.3}

/* ── марка в шапке: эмблема с дугой по кольцу + IRAKUSA ✦ API ─────────────── */
.ik-brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--text);min-width:0}
.ik-brand:hover{color:var(--text)}
.ik-mark{position:relative;flex:none;width:48px;height:48px;display:grid;place-items:center}
.ik-mark img{width:44px;height:auto;mix-blend-mode:screen;position:relative;z-index:1;
  filter:drop-shadow(0 0 6px rgba(61,255,168,.35))}
.ik-mark::before{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid rgba(61,255,168,.16)}
.ik-mark::after{content:"";position:absolute;inset:-1px;border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0 62%,rgba(61,255,168,.15) 75%,var(--neon) 92%,transparent 93%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1.5px));
          mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1.5px));
  filter:drop-shadow(0 0 3px var(--neon));animation:ik-orbit 6s linear infinite}
.ik-name{display:flex;flex-direction:column;gap:4px;min-width:0}
.ik-word{display:flex;align-items:center;gap:8px;line-height:1}
.ik-word b{font:700 19px/1 var(--display);letter-spacing:.2em;
  background:linear-gradient(105deg,transparent 42%,rgba(200,255,228,.98) 50%,transparent 58%) no-repeat,
             linear-gradient(180deg,#ffffff 10%,#b8c7bf 95%);
  background-size:300% 100%,100% 100%;background-position:160% 0,0 0;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:ik-sheen 7s ease-in-out 1.2s infinite}
.ik-word i{font:500 10.5px/1 "JetBrains Mono",ui-monospace,monospace;font-style:normal;letter-spacing:.18em;color:var(--neon);
  padding:4px 6px 3px 8px;border:1px solid rgba(61,255,168,.4);border-radius:6px;background:rgba(61,255,168,.07);
  text-shadow:0 0 8px rgba(61,255,168,.6)}
.ik-word .star{color:var(--neon);font-size:10px;text-shadow:0 0 6px var(--neon),0 0 14px var(--neon);animation:ik-twinkle 3.4s ease-in-out infinite}
.ik-name small{font-size:12px;color:var(--dim);font-weight:600;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── навигация ─────────────────────────────────────────────────────────────── */
nav.top a,header nav a{transition:border-color .2s,box-shadow .2s,background .2s}
nav.top a:hover,header nav a:hover{border-color:rgba(61,255,168,.5);box-shadow:0 0 18px -6px var(--neon)}
nav.top a[aria-current=page],header nav a[aria-current=page]{background:rgba(46,229,157,.13);border-color:var(--neon-soft);
  color:#dfffee;box-shadow:inset 0 0 12px rgba(61,255,168,.12),0 0 16px -8px var(--neon)}

/* ── неоновая линия со светящимися точками (как в ролике) ─────────────────── */
.ik-rule{display:flex;align-items:center;gap:14px;margin:0 0 22px;color:var(--dim);
  font:500 12px/1 "Yu Gothic UI","Hiragino Sans","Noto Sans JP",sans-serif;letter-spacing:.6em}
.ik-rule i{flex:1;height:1px;position:relative;
  background:linear-gradient(90deg,transparent,rgba(61,255,168,.55));transform-origin:left center;
  animation:ik-draw 1.4s cubic-bezier(.2,.7,.2,1) .2s backwards}
.ik-rule i:last-child{background:linear-gradient(270deg,transparent,rgba(61,255,168,.55));transform-origin:right center}
.ik-rule i::after{content:"";position:absolute;top:-2.5px;right:-3px;width:6px;height:6px;border-radius:50%;
  background:#c8ffe4;box-shadow:0 0 5px 1px var(--neon),0 0 16px 4px rgba(61,255,168,.45);
  animation:ik-twinkle 3.2s ease-in-out 1.6s infinite}
.ik-rule i:last-child::after{right:auto;left:-3px;animation-delay:2.4s}
.ik-rule span{flex:none;padding-left:.6em;opacity:.85}

/* ── первый экран инструкции: текст + живая эмблема ───────────────────────── */
.ik-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,300px);gap:24px;align-items:center;margin:0 0 24px}
.ik-kicker{display:flex;align-items:center;gap:10px;margin:0 0 12px;
  font:500 11.5px/1 "JetBrains Mono",ui-monospace,monospace;letter-spacing:.28em;text-transform:uppercase;color:var(--neon);
  text-shadow:0 0 10px rgba(61,255,168,.45)}
.ik-kicker::before{content:"";width:28px;height:1px;background:linear-gradient(90deg,transparent,var(--neon))}
.ik-hero .lead{margin-bottom:0}
.ik-emblem{position:relative;aspect-ratio:1;width:100%;max-width:300px;justify-self:end}
.ik-emblem video,.ik-emblem img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;mix-blend-mode:screen;
  -webkit-mask:radial-gradient(closest-side,#000 74%,transparent 100%);mask:radial-gradient(closest-side,#000 74%,transparent 100%)}
.ik-emblem::before{content:"";position:absolute;inset:8%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(46,229,157,.22),transparent 70%);filter:blur(18px);animation:ik-breathe 5s ease-in-out infinite}
.ik-emblem.small{max-width:150px;margin:0 auto 6px;justify-self:center}
.ik-emblem.small video{-webkit-mask:radial-gradient(closest-side,#000 58%,transparent 82%);mask:radial-gradient(closest-side,#000 58%,transparent 82%)}

/* ── карточки: стекло, неоновая кромка сверху ─────────────────────────────── */
.card,.login,aside{position:relative;
  background:linear-gradient(180deg,rgba(14,38,27,.62),rgba(4,14,9,.62));
  border-color:var(--line);
  box-shadow:inset 0 1px 0 rgba(150,255,205,.05),0 22px 60px -28px rgba(0,0,0,.9)}
.card::before,.login::before{content:"";position:absolute;left:22px;right:22px;top:-1px;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(61,255,168,.55),transparent)}
a.dash-card{background:linear-gradient(160deg,rgba(46,229,157,.14),rgba(5,18,12,.7) 60%);border-color:rgba(61,255,168,.35);
  transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s,border-color .25s}
a.dash-card:hover{transform:translateY(-2px);border-color:var(--neon-soft);box-shadow:0 0 0 1px rgba(61,255,168,.15),0 18px 50px -18px rgba(46,229,157,.45)}
.dash-card .go{color:var(--neon);text-shadow:0 0 12px rgba(61,255,168,.4)}
.dash-card .ico{filter:drop-shadow(0 0 10px rgba(61,255,168,.35))}

/* ── кнопки, номера шагов, поля ───────────────────────────────────────────── */
button.primary,.btn.primary{position:relative;overflow:hidden;
  background:linear-gradient(180deg,#63f5bb,#1ccb84);color:var(--accent-ink);border-color:transparent;
  box-shadow:0 0 0 1px rgba(61,255,168,.35),0 10px 28px -10px rgba(46,229,157,.7)}
button.primary::after,.btn.primary::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;pointer-events:none;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);transition:left .6s}
button.primary:hover::after,.btn.primary:hover::after{left:120%}
.num{background:radial-gradient(circle at 35% 30%,#8affc9,#1ccb84);color:var(--accent-ink);
  box-shadow:0 0 0 3px rgba(61,255,168,.12),0 0 16px rgba(61,255,168,.45)}
input[type=text],input[type=password],select,textarea{transition:border-color .2s,box-shadow .2s}
input[type=text]:focus,input[type=password]:focus,select:focus{border-color:var(--neon-soft);box-shadow:0 0 0 3px rgba(61,255,168,.12)}
.chip[aria-pressed=true]{box-shadow:inset 0 0 14px rgba(61,255,168,.12),0 0 18px -8px var(--neon)}
.code pre,.pre pre{color:#d6f5e6}
footer{letter-spacing:.02em}
/* чат: линия под шапкой тоньше, выдвижное меню на телефоне — непрозрачное */
.shell .ik-rule{margin:0 0 10px}
@media (max-width:820px){aside.open{background:linear-gradient(180deg,#0a2117,#03100a)}.shell .ik-rule{display:none}}

/* ── споры крапивы: частицы, всплывающие по краям экрана ──────────────────── */
.ik-spores{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.ik-spores i{position:absolute;bottom:-12px;width:3px;height:3px;border-radius:50%;background:#b8ffdc;opacity:0;
  box-shadow:0 0 6px 1px rgba(61,255,168,.85);animation:ik-rise 16s linear infinite}
.ik-spores i:nth-child(1){left:4%;animation-duration:17s;animation-delay:-2s}
.ik-spores i:nth-child(2){left:9%;animation-duration:22s;animation-delay:-9s;transform:scale(.7)}
.ik-spores i:nth-child(3){left:15%;animation-duration:19s;animation-delay:-14s}
.ik-spores i:nth-child(4){left:22%;animation-duration:25s;animation-delay:-5s;transform:scale(.6)}
.ik-spores i:nth-child(5){left:31%;animation-duration:21s;animation-delay:-17s;transform:scale(.8)}
.ik-spores i:nth-child(6){left:44%;animation-duration:28s;animation-delay:-11s;transform:scale(.6)}
.ik-spores i:nth-child(7){left:58%;animation-duration:24s;animation-delay:-3s;transform:scale(.7)}
.ik-spores i:nth-child(8){left:67%;animation-duration:18s;animation-delay:-12s}
.ik-spores i:nth-child(9){left:76%;animation-duration:23s;animation-delay:-7s;transform:scale(.8)}
.ik-spores i:nth-child(10){left:84%;animation-duration:20s;animation-delay:-15s}
.ik-spores i:nth-child(11){left:91%;animation-duration:26s;animation-delay:-1s;transform:scale(.6)}
.ik-spores i:nth-child(12){left:96%;animation-duration:19s;animation-delay:-10s;transform:scale(.9)}

/* ── появление страницы: шапка, линия, первый экран — по очереди ──────────── */
/* backwards, а не both: transform после анимации должен исчезнуть, иначе
   выдвижное меню чатов (position:fixed) встанет относительно блока, а не экрана. */
/* В чате — только шапка: окно чата появляется после проверки ключа, ему не ждать. */
.wrap>*,.shell>header{animation:ik-rise-in .7s cubic-bezier(.2,.7,.2,1) backwards}
.wrap>*:nth-child(2){animation-delay:.08s}
.wrap>*:nth-child(3){animation-delay:.16s}
.wrap>*:nth-child(4){animation-delay:.24s}
.wrap>*:nth-child(n+5){animation-delay:.3s}

@keyframes ik-orbit{to{transform:rotate(360deg)}}
@keyframes ik-sheen{0%{background-position:160% 0,0 0}38%,100%{background-position:-60% 0,0 0}}
@keyframes ik-twinkle{0%,100%{opacity:.55;transform:scale(.85)}50%{opacity:1;transform:scale(1.15)}}
@keyframes ik-draw{from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:1}}
@keyframes ik-breathe{0%,100%{opacity:.7;transform:scale(.96)}50%{opacity:1;transform:scale(1.04)}}
@keyframes ik-rise{0%{opacity:0;translate:0 0}12%{opacity:.75}85%{opacity:.35}100%{opacity:0;translate:24px -108vh}}
@keyframes ik-rise-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

@media (max-width:760px){
  .ik-hero{grid-template-columns:1fr;gap:6px}
  .ik-emblem{order:-1;max-width:210px;justify-self:center;margin-top:-6px}
  .ik-word b{font-size:16px;letter-spacing:.16em}
  .ik-mark{width:42px;height:42px}.ik-mark img{width:38px}
  .ik-name small{display:none}
  .ik-kicker{font-size:10px;letter-spacing:.16em;gap:8px}.ik-kicker::before{width:16px}
  .ik-spores i:nth-child(n+7){display:none}
}
@media (prefers-reduced-motion:reduce){
  .ik-mark::after,.ik-word b,.ik-word .star,.ik-rule i,.ik-rule i::after,.ik-emblem::before,.ik-spores i,
  .wrap>*,.shell>header{animation:none}
  .ik-spores{display:none}
  a.dash-card:hover{transform:none}
}