/* ===== Koda Plugins — Dark Aurora (3 columns, wider & cleaner) ===== */
:root{
  --bg:#0A0E14; --bg2:#0C1118; --card:#0E141C; --text:#E9EEF5; --muted:#94A3B8; --border:rgba(255,255,255,.07);
  --brand-purple:#A93AFF; --brand-gold:#F2C94C; --brand-ink:#0D1320;
  --accent:var(--brand-purple); --accent2:var(--brand-gold);
  --glow: 0 10px 40px rgba(169,58,255,.15), 0 6px 24px rgba(242,201,76,.10);
  --radius:18px; --ease: cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box} html,body{height:100%}
body{ margin:0; font-family: ui-monospace,"JetBrains Mono","Fira Code","SFMono-Regular",Menlo,Consolas,monospace;
  letter-spacing:.2px; color:var(--text);
  background: radial-gradient(1200px 800px at 5% -10%, rgba(169,58,255,.10), transparent 60%),
             radial-gradient(1200px 800px at 110% 10%, rgba(242,201,76,.10), transparent 60%), var(--bg);
  line-height:1.6;
}
.bg-noise{ position:fixed; inset:0; pointer-events:none;
  background-image: repeating-radial-gradient(circle at 0 0, rgba(255,255,255,.02), rgba(255,255,255,.02) 1px, transparent 1px, transparent 2px);
  opacity:.15; mix-blend-mode:soft-light; }
.aurora{ position:fixed; inset:-20vh -10vw auto -10vw; height:55vh; z-index:-1;
  background: radial-gradient(800px 480px at 18% 15%, rgba(169,58,255,.22), transparent 60%),
             radial-gradient(900px 520px at 82% 20%, rgba(242,201,76,.18), transparent 60%),
             radial-gradient(600px 360px at 50% 5%, rgba(132,224,255,.10), transparent 60%);
  filter: blur(8px) saturate(110%); pointer-events:none; }
.site-header{ max-width:1320px; margin:32px auto 12px; padding:0 16px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.brand{display:flex; align-items:center; gap:16px}
.titles h1{margin:0; font-size:clamp(1.4rem, 1.1rem + 1.2vw, 2rem); letter-spacing:.4px}
.subtitle{margin:.35rem 0 0; color:var(--muted)}
.links{display:flex; gap:14px}
.nav-link{ color:var(--text); text-decoration:none; opacity:.9; padding:8px 12px; border:1px solid var(--border); border-radius:12px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)); backdrop-filter: blur(4px); }
.nav-link:hover{opacity:1; border-color:rgba(255,255,255,.18)}
.grid{ max-width:1320px; margin:16px auto; padding:0 16px 32px; display:grid; gap:22px; grid-template-columns:1fr; }
@media (min-width: 900px){ .grid{ grid-template-columns: 1fr 1fr; } }
@media (min-width: 1200px){ .grid{ grid-template-columns: 1fr 1fr 1fr; } }
.card{ background: linear-gradient(180deg, rgba(255,255,255,.02), transparent 40%),
                   radial-gradient(1200px 800px at 50% -60%, rgba(255,255,255,.03), transparent 60%), var(--card);
  border:1px solid var(--border); border-radius:var(--radius); padding:20px; box-shadow:var(--glow);
  position:relative; overflow:hidden; transform:translateZ(0);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease), background .28s var(--ease);

  display: flex;
  flex-direction: column;
}
.card::before{ content:""; position:absolute; inset:-1px; border-radius:calc(var(--radius) + 1px);
  background: conic-gradient(from 180deg, rgba(169,58,255,.22), rgba(242,201,76,.14), transparent 40% 100%);
  opacity:0; pointer-events:none; transition:opacity .35s var(--ease), filter .35s var(--ease); filter: blur(18px) saturate(110%); }
.card::after{ content:""; position:absolute; inset:0;
  background: radial-gradient(220px 140px at var(--mx,50%) var(--my,0%), rgba(255,255,255,.06), rgba(255,255,255,0) 60%);
  opacity:0; pointer-events:none; transition:opacity .3s var(--ease); }
.card:hover{ transform:translateY(-6px); border-color:rgba(255,255,255,.16) } .card:hover::before{opacity:1} .card:hover::after{opacity:1}
.card.is-left{ --ringA: rgba(169,58,255,.22); --ringB: rgba(242,201,76,.12); }
.card.is-mid{ --ringA: rgba(132,224,255,.20); --ringB: rgba(169,58,255,.12); }
.card.is-right{ --ringA: rgba(242,201,76,.22); --ringB: rgba(169,58,255,.12); }
.card.is-left::before{ background: conic-gradient(from 200deg, var(--ringA), var(--ringB), transparent 42% 100%); }
.card.is-mid::before{ background: conic-gradient(from 270deg, var(--ringA), var(--ringB), transparent 42% 100%); }
.card.is-right::before{ background: conic-gradient(from 340deg, var(--ringA), var(--ringB), transparent 42% 100%); }
.card h2{margin:.35rem 0 .25rem; font-weight:800; letter-spacing:.2px}
.muted{color:var(--muted); margin-top:0; font-size:.86rem;}
.actions{display:flex; gap:12px; flex-wrap:wrap; margin:16px 0 6px}
.btn{ font-size:.8rem; display:inline-flex; align-items:center; gap:8px; text-decoration:none; padding:10px 16px; border-radius:999px;
  border:1px solid var(--border); color:var(--text); transition: transform .1s var(--ease), border-color .2s var(--ease), box-shadow .25s var(--ease), background-position .4s var(--ease);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02)); cursor:pointer; }
.btn:hover{transform: translateY(-1px); border-color: rgba(255,255,255,.18)} .btn.primary{ background:linear-gradient(135deg, var(--brand-purple), var(--brand-gold));
  background-size:160% 160%; border-color:rgba(169,58,255,.45); color:white; font-weight:100; box-shadow:0 10px 26px rgba(169,58,255,.25), 0 6px 18px rgba(242,201,76,.18); }
.btn.primary:hover{ background-position:80% 20%; filter:saturate(1.05) }
.btn.ghost{ background:linear-gradient(180deg, #0D1219, #0B0F15); border-color: rgba(255,255,255,.10); }
.btn.disabled{ opacity:.55; filter:saturate(.7) grayscale(.2); pointer-events:none; }
.btn.copy::after{ content:"Скопировать"; font-size:.72rem; opacity:.7 } .btn.copy.copied{ color:#0B0E14; background:linear-gradient(135deg, #7CFC8A, #F2C94C); border-color:rgba(242,201,76,.55) }
.btn.copy.copied::after{ content:"Скопировано" }
/* Code list */ .code-list{ display:flex; flex-direction:column; gap:12px; margin:12px 0 10px }
.code-row{ display:grid; grid-template-columns: 1fr auto; gap:10px; align-items:center }
.code-row pre{ margin:0; padding:12px 14px; background: linear-gradient(180deg, #0D1219, #0B0F15); border:1px solid var(--border); border-radius:12px; overflow:auto }
.code-row pre code{ font-family: ui-monospace,"JetBrains Mono","Fira Code","SFMono-Regular",Menlo,Consolas,monospace; font-size:.85rem }
.subtle-actions{ display:flex; gap:10px; flex-wrap:wrap; margin:8px 0 2px }
code{background:rgba(255,255,255,.06); padding:.2em .5em; border-radius:8px}
.site-footer{ max-width:1320px; margin:6px auto 40px; padding:0 16px; text-align:center; color:var(--muted); border-top:1px dashed var(--border); padding-top:18px; }

.card-foot {
  margin-top: auto;
  padding-top: 16px;
}
small{
  font-size: 11px;
}

@media (prefers-reduced-motion: reduce){ .card, .btn{ transition:none !important; } .card::after, .card::before{ display:none } }