/* Портал q-vant — язык сайта К-ВАНТ (токены site.css, Onest + IBM Plex Mono self-host). */
:root{
  --bg:#F3F2F8; --surface:#FFFFFF; --panel:#F3F2F8;
  --ink:#181530;
  --dim:color-mix(in srgb, var(--ink) 55%, transparent);
  --faint:color-mix(in srgb, var(--ink) 42%, transparent);
  --line:color-mix(in srgb, var(--ink) 10%, transparent);
  --dark1:#1F1B3A; --dark2:#151132; --on-dark:#ECEAF8; --on-dark-dim:rgba(236,234,248,.66);
  --accent:#7466E4; --accent-hi:#978CF0;
  --r:32px; --r-sm:24px;
  --body:'Onest',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --ok:#5FBF9A; --danger:#C96A6A;
}
[data-theme="dark"]{
  --bg:#0F0D1D; --surface:#1A1633; --panel:#131024;
  --ink:#ECEAF8;
  --dark1:#221D44; --dark2:#131028;
  --accent:#8B7FF3; --accent-hi:#A79DF5;
}

*{ box-sizing:border-box; margin:0 }
[hidden]{ display:none !important }
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--body); font-size:17px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
main{ max-width:980px; margin:0 auto; padding:0 22px 80px }

.top{
  max-width:980px; margin:0 auto; padding:22px;
  display:flex; align-items:center; justify-content:space-between;
}
.brand{ display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:-.02em; font-size:19px }
.brand svg{ width:26px; height:26px; color:var(--accent); flex:none }
.brand .mono{ margin-left:2px }
.brand-text{ display:flex; align-items:center; gap:10px }
@media (max-width:600px){
  .brand-text{ flex-direction:column; align-items:flex-start; gap:2px; line-height:1.1 }
  .brand .mono{ margin-left:0 }
  .top{ padding:16px }
  .top-right{ gap:8px }
  .top .pill{ padding:10px 16px; font-size:14px }
}
.mono{
  font-family:var(--mono); font-size:11px; font-weight:500;
  text-transform:uppercase; letter-spacing:.14em; color:var(--faint);
}
.top-right{ display:flex; align-items:center; gap:12px }
.theme-btn{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--line);
  background:transparent; color:var(--dim); cursor:pointer;
  display:grid; place-items:center; flex:none;
}
.theme-btn svg{ width:17px; height:17px; display:none }
.theme-btn .ic-moon{ display:block }
[data-theme="dark"] .theme-btn .ic-moon{ display:none }
[data-theme="dark"] .theme-btn .ic-sun{ display:block }

h1{ font-size:clamp(34px,6vw,56px); line-height:1.05; letter-spacing:-.04em; font-weight:700; margin:26px 0 14px }
h1 .dim2{ color:color-mix(in srgb, var(--ink) 40%, transparent) }
.lead{ font-size:19px; color:var(--dim); max-width:640px }

.tile{
  background:var(--surface); border-radius:var(--r); padding:36px;
  margin-top:26px; box-shadow:0 8px 28px rgba(24,21,48,.06);
}
.tile-dark{
  background:
    radial-gradient(90% 70% at 80% 100%, rgba(116,102,228,.35), rgba(21,17,50,0) 70%),
    linear-gradient(160deg, var(--dark1) 0%, var(--dark2) 100%);
  color:var(--on-dark);
}
.tile h3{ font-size:26px; letter-spacing:-.03em; font-weight:700 }
.tile-dark h3{ color:#fff }
.tile p{ margin-top:10px; color:var(--dim) }
.tile-dark p{ color:var(--on-dark-dim) }
/* тёмная тема: акцентные плитки становятся СВЕТЛЫМИ — зеркало светлой темы,
   где акцент — тёмные плитки; рецепт тот же (лавандовый засвет поверх градиента 160°) */
[data-theme="dark"] .tile-dark{
  background:
    radial-gradient(90% 70% at 80% 100%, rgba(116,102,228,.30), rgba(246,244,252,0) 70%),
    linear-gradient(160deg, #F6F4FC 0%, #E7E3F8 100%);
  color:#181530;
}
[data-theme="dark"] .tile-dark h3{ color:#181530 }
[data-theme="dark"] .tile-dark p{ color:rgba(24,21,48,.62) }
.cols2{ display:grid; grid-template-columns:1fr 1fr; gap:26px }
@media (max-width:760px){ .cols2{ grid-template-columns:1fr } }

.code{
  background:linear-gradient(160deg, var(--dark1) 0%, var(--dark2) 100%);
  color:var(--on-dark); border-radius:18px; padding:18px 20px;
  font:13px/1.6 var(--mono); overflow-x:auto; margin-top:16px; white-space:pre;
}
.pill{
  display:inline-flex; align-items:center; gap:8px;
  border:0; border-radius:999px; padding:13px 24px; cursor:pointer;
  font-family:var(--body); font-weight:600; font-size:16px; text-decoration:none;
}
.pill-dark{ background:var(--dark1); color:var(--on-dark) }
.pill-dark:hover{ background:var(--accent); color:#fff }
.pill-accent{ background:var(--accent); color:#fff; box-shadow:0 8px 22px color-mix(in srgb, var(--accent) 32%, transparent) }
.pill-accent:hover{ background:var(--accent-hi) }
.pill-ghost{ background:var(--panel); color:var(--ink) }
.arrow-link{ color:var(--accent); font-weight:600; text-decoration:none }
.arrow-link:hover{ color:var(--accent-hi) }

/* форма отправителя */
label.f{ display:block; margin:18px 0 7px }
input[type=text], input[type=url], input[type=password], textarea{
  width:100%; font:16px var(--body); color:var(--ink);
  background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:13px 14px;
}
textarea{ min-height:96px; resize:vertical }
.kvrow{ display:grid; grid-template-columns:1fr 2fr auto; gap:10px; margin-top:10px }
.kvrow button{ border:0; background:var(--panel); color:var(--danger); border-radius:12px; width:44px; cursor:pointer; font-size:18px }
.actions{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-top:24px }
.result{
  margin-top:18px; padding:14px 18px; border-radius:14px; font-size:15.5px;
  background:var(--panel);
}
.result.ok{ color:var(--ink) }
.result.ok b{ color:var(--ok) }
.result.err b{ color:var(--danger) }
.enc-badge{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase }

footer{ max-width:980px; margin:60px auto 0; padding:22px; color:var(--faint); font-size:13.5px }

/* ── графическая библиотека (перенос приёмов сайта) ── */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:36px; margin-top:14px }
@media (max-width:760px){ .steps{ grid-template-columns:1fr } }
.step{ border-top:1px solid var(--line); padding-top:20px }
.step-num{ color:var(--accent) }
.step h4{ margin-top:12px; font-size:21px; font-weight:600; letter-spacing:-.02em }
.step p{ margin-top:8px; font-size:15.5px; color:var(--dim) }

.tile-dark{ position:relative; overflow:hidden }
.ring{ position:absolute; border-radius:50%; pointer-events:none }
.r1{ right:-110px; top:-110px; width:320px; height:320px; border:1px solid rgba(236,234,248,.16) }
.r2{ right:-50px; top:-50px; width:200px; height:200px; border:1px solid rgba(236,234,248,.1) }
[data-theme="dark"] .tile-dark .r1{ border-color:rgba(24,21,48,.13) }
[data-theme="dark"] .tile-dark .r2{ border-color:rgba(24,21,48,.09) }

.one-row{ display:flex; align-items:center; gap:28px }
.one{
  font-size:120px; line-height:.9; font-weight:700; letter-spacing:0; padding-right:.03em;
  background:linear-gradient(180deg,#FFFFFF 20%,var(--accent-hi) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
/* на светлой плитке тёмной темы белый градиент цифры невидим — тёмный к акценту
   (только background-image: шорткат background сбросил бы background-clip) */
[data-theme="dark"] .one{ background-image:linear-gradient(180deg,#37306B 15%,var(--accent) 100%) }
.tile-dark .arrow-link{ color:var(--accent-hi) }
[data-theme="dark"] .tile-dark .arrow-link{ color:#6A5BD8 }

.faq{ margin-top:44px }
.faq-list{ margin-top:10px }
.faq details{ border-top:1px solid var(--line) }
.faq details:last-child{ border-bottom:1px solid var(--line) }
.faq summary{
  list-style:none; cursor:pointer; position:relative;
  padding:20px 44px 20px 2px; font-size:19px; font-weight:600; letter-spacing:-.02em;
}
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{
  content:""; position:absolute; right:8px; top:50%; width:11px; height:11px;
  border-right:2px solid var(--faint); border-bottom:2px solid var(--faint);
  transform:translateY(-70%) rotate(45deg); transition:transform .25s ease;
}
.faq details[open] summary::after{ transform:translateY(-30%) rotate(225deg) }
/* анимация раскрытия — приём site.css/site.js дословно: JS ведёт height, CSS — плавность */
.faq .fa{ overflow:hidden; opacity:0; transition:height .3s ease, opacity .26s ease }
.faq details[open] .fa{ opacity:1 }
.faq details[data-closing] .fa{ opacity:0 }
.faq details[data-closing] summary::after{ transform:translateY(-70%) rotate(45deg) }
.faq .fa > p{ padding:0 44px 22px 2px; color:var(--dim); max-width:660px }
select{
  width:100%; font:16px var(--body); color:var(--ink);
  background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:13px 14px;
  -webkit-appearance:none; appearance:none;
}