/* Каталог скиллов — peai.su · собственный дизайн */
:root{
  --bg:#f6f4ef;
  --bg-soft:#efece4;
  --card:#ffffff;
  --card-2:#faf9f6;
  --ink:#1d1b16;
  --ink-soft:#5c574c;
  --ink-faint:#8a8577;
  --line:#e4e0d5;
  --line-strong:#d4cfc0;
  --accent:#5b52e0;
  --accent-soft:rgba(91,82,224,.09);
  --accent-line:rgba(91,82,224,.25);
  --green:#2f9e63;   --green-bg:rgba(47,158,99,.1);
  --amber:#c07f10;   --amber-bg:rgba(192,127,16,.1);
  --blue:#2f6fd0;    --blue-bg:rgba(47,111,208,.1);
  --violet:#7a4fd3;  --violet-bg:rgba(122,79,211,.1);
  --rose:#c2417c;    --rose-bg:rgba(194,65,124,.1);
  --cyan:#0e8fa3;    --cyan-bg:rgba(14,143,163,.1);
  --shadow:0 1px 2px rgba(29,27,22,.05), 0 8px 24px -12px rgba(29,27,22,.12);
  --shadow-lift:0 2px 4px rgba(29,27,22,.06), 0 16px 40px -16px rgba(29,27,22,.2);
  --r-lg:18px; --r-md:12px; --r-sm:8px;
}
[data-theme="dark"]{
  --bg:#14131a;
  --bg-soft:#1b1a23;
  --card:#1e1d27;
  --card-2:#232230;
  --ink:#eceaf2;
  --ink-soft:#a8a4b8;
  --ink-faint:#77738a;
  --line:#2c2b3a;
  --line-strong:#3a394e;
  --accent:#8f88ff;
  --accent-soft:rgba(143,136,255,.12);
  --accent-line:rgba(143,136,255,.3);
  --green:#5fd397;  --green-bg:rgba(95,211,151,.12);
  --amber:#f0b95a;  --amber-bg:rgba(240,185,90,.12);
  --blue:#6ea8ff;   --blue-bg:rgba(110,168,255,.12);
  --violet:#b49aff; --violet-bg:rgba(180,154,255,.12);
  --rose:#ff7ab8;   --rose-bg:rgba(255,122,184,.12);
  --cyan:#4fd0e8;   --cyan-bg:rgba(79,208,232,.12);
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 28px -14px rgba(0,0,0,.5);
  --shadow-lift:0 2px 6px rgba(0,0,0,.35), 0 20px 44px -18px rgba(0,0,0,.6);
}
[hidden]{display:none !important}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Inter","SF Pro Text","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.55;
  font-size:15px;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
button{font:inherit;cursor:pointer}
code{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.85em}
::selection{background:var(--accent-soft)}

/* ── фон ─────────────────────────────── */
.bg-decor{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5}
[data-theme="dark"] .blob{opacity:.22}
.blob-a{width:520px;height:520px;left:-160px;top:-160px;background:radial-gradient(circle,rgba(91,82,224,.35),transparent 70%)}
.blob-b{width:460px;height:460px;right:-120px;top:-80px;background:radial-gradient(circle,rgba(192,127,16,.28),transparent 70%)}
.blob-c{width:560px;height:560px;left:35%;top:44%;background:radial-gradient(circle,rgba(47,158,99,.2),transparent 70%)}

/* ── шапка ───────────────────────────── */
.topbar{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.topbar-in{
  max-width:1200px;margin:0 auto;padding:0 20px;
  display:flex;align-items:center;gap:18px;height:60px;
}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);font-weight:700}
.brand:hover{text-decoration:none}
.brand-mark{
  width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--accent),#9a5fe0);color:#fff;
  box-shadow:0 4px 12px -4px var(--accent-line);
}
.brand-text{display:flex;flex-direction:column;line-height:1.15;font-size:14.5px}
.brand-text small{font-weight:500;font-size:11px;color:var(--ink-faint);letter-spacing:.04em}
.topnav{display:flex;gap:4px;margin-left:8px}
.topnav a{
  color:var(--ink-soft);padding:7px 12px;border-radius:999px;font-size:13.5px;font-weight:500;
}
.topnav a:hover{background:var(--accent-soft);color:var(--ink);text-decoration:none}
.topbar-actions{margin-left:auto;display:flex;align-items:center;gap:10px}
.icon-btn{
  width:36px;height:36px;border-radius:10px;border:1px solid var(--line);
  background:var(--card);color:var(--ink-soft);display:grid;place-items:center;
  transition:color .15s,border-color .15s;
}
.icon-btn:hover{color:var(--ink);border-color:var(--line-strong)}
#themeBtn .ic-moon,[data-theme="dark"] #themeBtn .ic-sun{display:none}
[data-theme="dark"] #themeBtn .ic-moon{display:block}

.btn{
  display:inline-flex;align-items:center;gap:8px;border-radius:12px;
  padding:9px 16px;font-weight:600;font-size:14px;border:1px solid transparent;
  transition:transform .12s,box-shadow .12s,background .15s,border-color .15s;
}
.btn:active{transform:translateY(1px)}
.btn-primary{
  background:var(--accent);color:#fff;
  box-shadow:0 6px 16px -6px var(--accent-line);
}
.btn-primary:hover{filter:brightness(1.06);text-decoration:none}
.btn-ghost{background:var(--card);border-color:var(--line);color:var(--ink-soft)}
.btn-ghost:hover{color:var(--ink);border-color:var(--line-strong);text-decoration:none}
.btn-ghost.danger{color:var(--rose)}
.btn-sm{padding:7px 13px;font-size:13px}

/* ── герой ───────────────────────────── */
.hero{padding:56px 20px 8px}
.hero-in{max-width:1200px;margin:0 auto;text-align:center}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;margin:0 0 14px;
  padding:6px 14px;border-radius:999px;
  background:var(--accent-soft);border:1px solid var(--accent-line);
  color:var(--accent);font-weight:600;font-size:12.5px;letter-spacing:.02em;
}
.hero h1{
  margin:0;font-size:clamp(30px,5vw,46px);line-height:1.12;
  font-weight:800;letter-spacing:-.02em;
}
.hero-sub{max-width:640px;margin:16px auto 0;color:var(--ink-soft);font-size:16px}
.hero-sub b{color:var(--ink)}
.hero-note{margin:14px auto 0;font-size:12.5px;color:var(--ink-faint);max-width:640px}
.stats{
  margin:30px auto 0;display:flex;justify-content:center;gap:12px;flex-wrap:wrap;
}
.stat{
  min-width:128px;padding:14px 20px;border-radius:var(--r-lg);
  background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);
  display:flex;flex-direction:column;align-items:center;gap:2px;
}
.stat-val{font-size:26px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat-label{font-size:12px;color:var(--ink-faint);font-weight:500}
.c-green{color:var(--green)} .c-amber{color:var(--amber)} .c-blue{color:var(--blue)} .c-violet{color:var(--violet)}
.hero-index{margin:14px 0 0;font-size:12px;color:var(--ink-faint)}

/* ── контролы ────────────────────────── */
.controls{padding:26px 20px 0}
.controls-in{max-width:1200px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.search-box{
  display:flex;align-items:center;gap:10px;
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:12px 16px;box-shadow:var(--shadow);color:var(--ink-faint);
  transition:border-color .15s,box-shadow .15s;
}
.search-box:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.search-box input{
  flex:1;border:0;outline:0;background:transparent;color:var(--ink);
  font-size:15.5px;min-width:0;
}
.search-box input::placeholder{color:var(--ink-faint)}
.q-clear{
  border:0;background:var(--bg-soft);color:var(--ink-soft);
  width:24px;height:24px;border-radius:50%;font-size:15px;line-height:1;
}
.control-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.select-wrap{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:0 6px 0 12px;height:38px;font-size:13px;color:var(--ink-faint);
}
.select-wrap select{
  border:0;outline:0;background:transparent;color:var(--ink);
  font:inherit;font-weight:600;height:100%;max-width:200px;
  appearance:none;-webkit-appearance:none;padding-right:22px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%238a8577' stroke-width='1.6' stroke-linecap='round' d='m1 1 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 8px center;
}
.pill-count{
  min-width:19px;height:19px;padding:0 5px;border-radius:999px;
  background:var(--accent);color:#fff;font-size:11.5px;font-weight:700;
  display:grid;place-items:center;
}
.src-pills{display:flex;gap:8px;flex-wrap:wrap}
.src-pill{
  display:inline-flex;align-items:center;gap:7px;
  border-radius:999px;padding:6px 13px;font-size:13px;font-weight:600;
  background:var(--card);border:1px solid var(--line);color:var(--ink-soft);
  transition:all .13s;
}
.src-pill:hover{border-color:var(--line-strong);color:var(--ink)}
.src-pill.active{color:#fff;border-color:transparent}
.src-pill .cnt{font-weight:500;font-size:11.5px;opacity:.75}

/* ── раскладка ───────────────────────── */
.layout{
  max-width:1200px;margin:22px auto 0;padding:0 20px 60px;
  display:grid;grid-template-columns:260px minmax(0,1fr);gap:26px;align-items:start;
}
.sidebar{
  position:sticky;top:84px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:16px;box-shadow:var(--shadow);max-height:calc(100vh - 108px);overflow:auto;
}
.side-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.side-head h2{margin:0;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-faint)}
#sideClose{display:none}
.cat-list{display:flex;flex-direction:column;gap:2px}
.cat-item{
  display:flex;align-items:center;gap:9px;width:100%;text-align:left;
  border:0;background:transparent;color:var(--ink-soft);
  padding:8px 10px;border-radius:10px;font-size:13.5px;font-weight:500;
}
.cat-item:hover{background:var(--bg-soft);color:var(--ink)}
.cat-item.active{background:var(--accent-soft);color:var(--accent);font-weight:700}
.cat-item .ci-ico{width:20px;text-align:center;flex:none}
.cat-item .ci-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cat-item .ci-count{
  font-size:11px;color:var(--ink-faint);font-variant-numeric:tabular-nums;
  background:var(--bg-soft);border-radius:999px;padding:1px 7px;flex:none;
}
.cat-item.active .ci-count{background:transparent;color:var(--accent)}

.results-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px;min-height:22px}
.results-bar p{margin:0;font-size:13.5px;color:var(--ink-faint)}
.results-bar p b{color:var(--ink);font-variant-numeric:tabular-nums}
.view-note{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-faint)}
.spinner{
  width:14px;height:14px;border-radius:50%;flex:none;
  border:2px solid var(--line-strong);border-top-color:var(--accent);
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── карточки ────────────────────────── */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.card{
  position:relative;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:16px 16px 14px 20px;box-shadow:var(--shadow);
  display:flex;flex-direction:column;gap:10px;overflow:hidden;
  cursor:pointer;
  transition:box-shadow .15s,transform .15s,border-color .15s;
}
.card::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:var(--src-color,var(--accent));
}
.card:hover{box-shadow:var(--shadow-lift);transform:translateY(-2px);border-color:var(--line-strong)}
.card-top{display:flex;align-items:flex-start;gap:10px}
.card-ico{
  width:38px;height:38px;border-radius:12px;flex:none;display:grid;place-items:center;
  font-size:18px;background:var(--bg-soft);border:1px solid var(--line);
}
.card-h{min-width:0;flex:1}
.card-name{
  margin:0;font-size:15.5px;font-weight:700;letter-spacing:-.01em;
  overflow-wrap:anywhere;
}
.card-name mark,.card-desc mark{background:var(--accent-soft);color:var(--accent);border-radius:3px;padding:0 1px}
.badge{
  display:inline-flex;align-items:center;gap:5px;margin-top:4px;
  padding:2px 9px;border-radius:999px;font-size:11px;font-weight:700;
  border:1px solid var(--badge-line,transparent);background:var(--badge-bg,transparent);color:var(--badge-color,var(--ink-soft));
}
.card-desc{
  margin:0;color:var(--ink-soft);font-size:13.5px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.card.open .card-desc{-webkit-line-clamp:unset;overflow:visible}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{
  border:0;background:var(--bg-soft);color:var(--ink-soft);
  padding:3px 10px;border-radius:999px;font-size:11.5px;font-weight:600;
}
.chip:hover{color:var(--accent);background:var(--accent-soft)}
.chip.cat{background:var(--accent-soft);color:var(--accent)}
.chip.plat{background:transparent;border:1px dashed var(--line-strong)}
.meta-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:4px 12px;
  border-top:1px dashed var(--line);padding-top:10px;
}
.meta-row{display:flex;gap:6px;font-size:12px;min-width:0}
.meta-row dt{color:var(--ink-faint);flex:none}
.meta-row dd{margin:0;color:var(--ink);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.install-row{
  display:flex;align-items:stretch;gap:0;
  border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--bg-soft);
}
.install-row code{
  flex:1;min-width:0;padding:8px 10px;white-space:nowrap;overflow-x:auto;
  color:var(--ink);scrollbar-width:none;
}
.install-row code::-webkit-scrollbar{display:none}
.copy-btn{
  border:0;border-left:1px solid var(--line);
  background:var(--card);color:var(--ink-soft);
  display:flex;align-items:center;gap:6px;padding:0 12px;font-size:12px;font-weight:600;flex:none;
}
.copy-btn:hover{color:var(--accent)}
.copy-btn.ok{color:var(--green)}
.card-extra{
  display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s ease;
}
.card.open .card-extra{grid-template-rows:1fr}
.card-extra-in{overflow:hidden;display:flex;flex-direction:column;gap:12px}
.extra-block .x-title{
  display:block;font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.07em;color:var(--ink-faint);margin-bottom:6px;
}
.extra-block p{margin:0;font-size:13px;color:var(--ink-soft);white-space:pre-line}
.req-row{display:flex;align-items:baseline;gap:8px;font-size:12.5px;margin-bottom:4px}
.req-row .rk{
  flex:none;font-size:10.5px;font-weight:700;color:var(--ink-faint);
  background:var(--bg-soft);border-radius:5px;padding:1px 6px;text-transform:uppercase;
}
.req-row code{color:var(--ink);background:var(--bg-soft);border-radius:5px;padding:1px 6px;margin-right:6px;display:inline-block}
.card-links{display:flex;gap:14px;flex-wrap:wrap;border-top:1px dashed var(--line);padding-top:10px}
.card-links a{font-size:13px;font-weight:600}

/* ── состояния ───────────────────────── */
.empty,.error{
  text-align:center;padding:70px 20px;border:1px dashed var(--line-strong);
  border-radius:var(--r-lg);color:var(--ink-soft);background:var(--card);
}
.empty-icon{font-size:34px;margin-bottom:6px}
.empty h3,.error h3{margin:0 0 6px;color:var(--ink)}
.empty p,.error p{margin:0 0 16px;font-size:13.5px}
.more-wrap{display:flex;justify-content:center;margin-top:22px}
#moreBtn{min-width:220px;justify-content:center}

/* ── футер ───────────────────────────── */
.footer{border-top:1px solid var(--line);background:var(--card);margin-top:20px}
.footer-in{
  max-width:1200px;margin:0 auto;padding:36px 20px 12px;
  display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:30px;
}
.foot-title{margin:0 0 10px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-faint)}
.foot-text{margin:0;font-size:13px;color:var(--ink-soft);max-width:340px}
.foot-col a{display:block;font-size:13.5px;color:var(--ink-soft);margin-bottom:8px}
.foot-col a:hover{color:var(--accent)}
.foot-bottom{
  max-width:1200px;margin:0 auto;padding:14px 20px 26px;
  font-size:12px;color:var(--ink-faint);text-align:center;
}

/* ── мобильная версия ────────────────── */
@media (max-width: 920px){
  .layout{grid-template-columns:1fr}
  .sidebar{
    position:fixed;z-index:60;top:0;left:0;bottom:0;width:min(320px,86vw);
    border-radius:0;max-height:none;transform:translateX(-102%);
    transition:transform .22s ease;box-shadow:var(--shadow-lift);
  }
  .sidebar.open{transform:translateX(0)}
  #sideClose{display:grid}
  .side-backdrop{position:fixed;inset:0;z-index:55;background:rgba(15,14,20,.45);backdrop-filter:blur(2px)}
  .topnav{display:none}
  .grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
  .footer-in{grid-template-columns:1fr}
  .stat{min-width:105px;padding:12px 14px}
  .stat-val{font-size:21px}
}
@media (max-width: 560px){
  .brand-text small{display:none}
  .hero{padding-top:36px}
  .select-wrap span{display:none}
  .select-wrap{padding-left:10px}
}