:root {
  --bg:#05050d;
  --panel:#101225;
  --text:#f8fafc;
  --muted:#9ca3b8;
  --line:rgba(255,255,255,.11);
  --purple:#8b5cf6;
  --cyan:#06b6d4;
  --green:#22c55e;
  --shadow:0 28px 80px rgba(0,0,0,.5);
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0;
  min-height:100vh;
  color:var(--text);
  font-family:Rajdhani,system-ui,sans-serif;
  background:
    radial-gradient(circle at 12% 0,rgba(139,92,246,.22),transparent 34%),
    radial-gradient(circle at 92% 10%,rgba(6,182,212,.16),transparent 28%),
    linear-gradient(180deg,var(--bg),#070817 55%,var(--bg));
  overflow-x:hidden;
}
body::before {
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:linear-gradient(to bottom,black,transparent 80%);
}
a { color:inherit; text-decoration:none; }
button,input,textarea { font:inherit; }
button { color:inherit; }
.shell { width:min(1180px,calc(100% - 32px)); margin:auto; }
.topbar { position:sticky; top:0; z-index:30; border-bottom:1px solid rgba(139,92,246,.23); background:rgba(5,5,13,.86); backdrop-filter:blur(18px); }
.nav { min-height:74px; display:flex; align-items:center; justify-content:space-between; gap:18px; }
.brand { display:flex; align-items:center; gap:12px; min-width:0; }
.brand img { width:48px; height:48px; object-fit:contain; filter:drop-shadow(0 0 16px rgba(139,92,246,.55)); }
.brand strong { display:block; font:800 .86rem Orbitron,sans-serif; letter-spacing:.7px; background:linear-gradient(180deg,#fff,#d8b4fe 54%,#7dd3fc); -webkit-background-clip:text; background-clip:text; color:transparent; }
.brand small { display:block; margin-top:3px; color:var(--muted); letter-spacing:2px; font-weight:700; }
.navlinks { display:flex; align-items:center; gap:10px; }
.button,.navlinks a { display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1px solid var(--line); border-radius:13px; padding:.72rem .95rem; font-weight:800; background:rgba(255,255,255,.05); transition:.2s ease; cursor:pointer; }
.button:hover,.navlinks a:hover { transform:translateY(-2px); border-color:rgba(125,211,252,.35); }
.button.primary { border:0; background:linear-gradient(135deg,var(--purple),var(--cyan)); box-shadow:0 12px 30px rgba(124,58,237,.25); }
.hero { padding:72px 0 54px; display:grid; grid-template-columns:1.04fr .96fr; gap:34px; align-items:center; }
.eyebrow { display:inline-flex; align-items:center; gap:9px; margin-bottom:16px; padding:.46rem .72rem; border:1px solid rgba(6,182,212,.25); border-radius:999px; background:rgba(6,182,212,.08); color:#a5f3fc; font-weight:900; letter-spacing:.7px; }
.eyebrow i { width:8px; height:8px; border-radius:50%; background:#4ade80; box-shadow:0 0 14px #22c55e; }
.hero h1 { margin:0 0 18px; font:900 clamp(2.5rem,6vw,5.2rem)/.98 Orbitron,sans-serif; letter-spacing:-2.4px; background:linear-gradient(180deg,#fff,#e9d5ff 48%,#7dd3fc); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero h1 span { display:block; }
.lead { max-width:720px; margin:0 0 24px; color:#cbd5e1; font-size:1.12rem; line-height:1.65; }
.actions,.trust { display:flex; flex-wrap:wrap; gap:11px; }
.trust { margin-top:22px; }
.trust span { padding:.48rem .68rem; border:1px solid var(--line); border-radius:999px; background:rgba(255,255,255,.04); color:#cbd5e1; font-weight:700; }
.art { position:relative; min-height:430px; display:flex; align-items:center; justify-content:center; padding:18px; border:1px solid rgba(255,255,255,.13); border-radius:30px; overflow:hidden; background:linear-gradient(145deg,rgba(139,92,246,.16),rgba(6,182,212,.08)); box-shadow:var(--shadow); }
.art img { display:block; width:100%; height:100%; max-height:394px; object-fit:contain; object-position:center; }
.art::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,transparent 52%,rgba(5,5,13,.45)); }
.catalog { padding:40px 0 80px; }
.heading { display:flex; align-items:end; justify-content:space-between; gap:22px; margin-bottom:24px; }
.heading h2,.support h2 { margin:0 0 8px; font:800 clamp(1.8rem,4vw,3.2rem) Orbitron,sans-serif; }
.heading p,.support p { margin:0; color:var(--muted); font-size:1.02rem; line-height:1.6; }
.toolbar { display:flex; gap:12px; flex-wrap:wrap; margin:0 0 22px; }
.toolbar[hidden],.count[hidden],.empty[hidden] { display:none!important; }
.search { flex:1; min-width:230px; }
.search input { width:100%; padding:.83rem 1rem; border:1px solid var(--line); border-radius:14px; outline:0; color:#fff; background:rgba(255,255,255,.055); }
.filters { display:flex; gap:8px; flex-wrap:wrap; }
.filter { border:1px solid var(--line); border-radius:999px; padding:.7rem .85rem; color:#cbd5e1; background:rgba(255,255,255,.045); font-weight:800; cursor:pointer; }
.filter.active { color:#fff; border-color:transparent; background:linear-gradient(135deg,var(--purple),var(--cyan)); }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.card { overflow:hidden; border:1px solid var(--line); border-radius:23px; background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.025)),var(--panel); box-shadow:0 18px 48px rgba(0,0,0,.28); transition:.23s ease; }
.card:hover { transform:translateY(-5px); border-color:rgba(6,182,212,.3); }
.visual { position:relative; height:205px; overflow:hidden; background:linear-gradient(135deg,rgba(139,92,246,.3),rgba(6,182,212,.16)); }
.visual img { width:100%; height:100%; object-fit:cover; }
.badge { position:absolute; z-index:2; top:13px; padding:.36rem .55rem; border-radius:999px; font-size:.78rem; font-weight:900; backdrop-filter:blur(8px); }
.status { left:13px; background:rgba(7,12,25,.75); border:1px solid rgba(255,255,255,.16); }
.category { right:13px; background:rgba(6,182,212,.18); border:1px solid rgba(6,182,212,.3); color:#cffafe; }
.card-body { padding:18px; }
.kicker { margin:0 0 4px; color:#a5f3fc; font-weight:900; letter-spacing:1px; font-size:.8rem; }
.card-body h3 { margin:0 0 9px; font:800 1.06rem Orbitron,sans-serif; }
.description { min-height:70px; margin:0; color:#cbd5e1; line-height:1.5; }
.chips { display:flex; flex-wrap:wrap; gap:7px; margin:14px 0; }
.chip { padding:.28rem .48rem; border:1px solid var(--line); border-radius:8px; background:rgba(255,255,255,.04); color:#dbeafe; font-size:.8rem; font-weight:700; }
.release { display:flex; gap:10px; align-items:center; margin:14px 0; padding:12px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.035); }
.release i { width:10px; height:10px; border-radius:50%; background:#f59e0b; box-shadow:0 0 12px currentColor; }
.release.ready i { background:var(--green); }
.release small { display:block; color:var(--muted); font-weight:700; }
.release strong { display:block; margin-top:2px; }
.card-actions { display:flex; gap:9px; }
.card-actions .button { flex:1; }
.button[aria-disabled="true"] { opacity:.55; pointer-events:none; }
.empty { padding:56px 22px; border:1px dashed rgba(125,211,252,.24); border-radius:26px; text-align:center; background:rgba(255,255,255,.025); }
.empty .icon { font-size:2.2rem; color:#a5f3fc; }
.empty h3 { margin:12px 0 8px; font:800 1.2rem Orbitron,sans-serif; }
.empty p { max-width:620px; margin:auto; color:var(--muted); font-size:1.02rem; }
.count { font:800 1rem Orbitron,sans-serif; color:#a5f3fc; }
.support { margin-bottom:68px; padding:28px; border:1px solid rgba(139,92,246,.22); border-radius:26px; background:linear-gradient(135deg,rgba(139,92,246,.13),rgba(6,182,212,.07)); }
.footer { padding:22px 0 34px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; color:var(--muted); }
.footer strong { color:#fff; }
#bonny-launcher { position:fixed; top:50%; right:max(10px,env(safe-area-inset-right)); bottom:auto; transform:translateY(-50%); z-index:999999; display:flex; align-items:center; gap:10px; min-height:72px; padding:8px 15px 8px 8px; border:1px solid rgba(34,211,238,.55); border-radius:999px 0 0 999px; color:#fff; background:linear-gradient(135deg,rgba(20,22,47,.98),rgba(8,13,29,.99)); box-shadow:0 18px 52px rgba(0,0,0,.7),0 0 32px rgba(6,182,212,.35); cursor:pointer; }
#bonny-launcher img { width:58px; height:64px; object-fit:contain; filter:drop-shadow(0 0 10px rgba(139,92,246,.7)) drop-shadow(0 0 8px rgba(6,182,212,.55)); }
#bonny-launcher span { font:800 .95rem Orbitron,sans-serif; white-space:nowrap; }
#bonny-panel { position:fixed; top:50%; right:max(94px,calc(78px + env(safe-area-inset-right))); transform:translateY(-50%); z-index:1000000; width:min(410px,calc(100vw - 120px)); height:min(620px,calc(100dvh - 30px)); min-height:390px; overflow:hidden; border:1px solid rgba(139,92,246,.42); border-radius:26px; background:linear-gradient(180deg,rgba(11,13,30,.995),rgba(5,7,18,.995)); box-shadow:0 28px 90px rgba(0,0,0,.75),0 0 42px rgba(139,92,246,.18); display:grid; grid-template-rows:auto 1fr auto auto; }
#bonny-panel[hidden] { display:none; }
.bonny-head { display:flex; align-items:center; gap:11px; padding:14px 15px; border-bottom:1px solid rgba(255,255,255,.1); background:linear-gradient(135deg,rgba(139,92,246,.16),rgba(6,182,212,.08)); }
.bonny-head img { width:50px; height:50px; flex:0 0 50px; border-radius:50%; object-fit:cover; object-position:center; border:2px solid rgba(34,211,238,.72); box-shadow:0 0 0 3px rgba(139,92,246,.16),0 0 18px rgba(34,211,238,.26); }
.bonny-head-copy { min-width:0; flex:1; }
.bonny-head strong { display:block; font:800 .92rem Orbitron,sans-serif; }
.bonny-head small { display:block; margin-top:3px; color:#a5f3fc; font-weight:700; }
.bonny-close { width:38px; height:38px; border:1px solid rgba(255,255,255,.12); border-radius:12px; background:rgba(255,255,255,.05); font-size:1.3rem; cursor:pointer; }
.bonny-messages { overflow-y:auto; padding:16px; scrollbar-width:thin; scrollbar-color:rgba(125,211,252,.45) transparent; }
.bonny-msg { max-width:88%; margin:0 0 11px; padding:11px 13px; border-radius:16px; line-height:1.45; white-space:pre-wrap; overflow-wrap:anywhere; }
.bonny-msg.bot { border:1px solid rgba(125,211,252,.17); border-bottom-left-radius:5px; background:rgba(255,255,255,.06); color:#e5e7eb; }
.bonny-msg.user { margin-left:auto; border-bottom-right-radius:5px; background:linear-gradient(135deg,#7c3aed,#0891b2); color:#fff; }
.bonny-msg.typing { width:62px; color:#a5f3fc; }
.bonny-quick { display:flex; gap:8px; overflow-x:auto; padding:8px 12px 10px; border-top:1px solid rgba(255,255,255,.08); }
.bonny-quick button { flex:0 0 auto; border:1px solid rgba(125,211,252,.24); border-radius:999px; padding:8px 11px; color:#dff9ff; background:rgba(6,182,212,.08); font-weight:800; cursor:pointer; }
.bonny-form { display:grid; grid-template-columns:1fr auto; gap:8px; padding:11px; border-top:1px solid rgba(255,255,255,.09); background:rgba(2,4,13,.82); }
.bonny-form textarea { width:100%; min-height:44px; max-height:120px; resize:none; border:1px solid rgba(255,255,255,.13); border-radius:14px; padding:11px 12px; outline:none; color:#fff; background:rgba(255,255,255,.055); }
.bonny-send { align-self:end; min-width:64px; height:44px; border:0; border-radius:13px; color:#fff; background:linear-gradient(135deg,var(--purple),var(--cyan)); font-weight:900; cursor:pointer; }
.bonny-send:disabled { opacity:.55; cursor:wait; }
@media(max-width:920px) { .hero { grid-template-columns:1fr; padding-top:35px; } .art { order:-1; min-height:330px; padding:16px; } .art img { max-height:298px; } .grid { grid-template-columns:repeat(2,1fr); } }
@media(max-width:640px) { .shell { width:min(100% - 22px,1180px); } .nav { min-height:66px; flex-wrap:wrap; padding:10px 0; } .brand small { display:none; } .brand strong { font-size:.68rem; } .navlinks { width:100%; justify-content:flex-end; } .navlinks a:first-child { display:none; } .hero { padding:28px 0 42px; text-align:center; gap:24px; } .hero h1 { font-size:2.55rem; letter-spacing:-1.5px; } .lead { font-size:1rem; } .eyebrow,.actions,.trust { justify-content:center; } .art { min-height:250px; padding:12px; } .art img { max-height:226px; } .heading { display:block; } .grid { grid-template-columns:1fr; } .support { text-align:center; } .footer { display:block; text-align:center; } .footer p { margin:8px 0; } #bonny-launcher { right:max(5px,env(safe-area-inset-right)); min-height:62px; padding:6px 11px 6px 6px; } #bonny-launcher img { width:50px; height:56px; } #bonny-launcher span { font-size:.78rem; } #bonny-panel { left:8px; right:8px; top:50%; width:auto; height:min(78dvh,680px); transform:translateY(-50%); border-radius:22px; } }
@media(max-width:360px) { #bonny-launcher { min-height:56px; padding-right:9px; } #bonny-launcher img { width:44px; height:50px; } #bonny-launcher span { font-size:.69rem; } #bonny-panel { left:5px; right:5px; height:min(82dvh,660px); } }
@media(max-height:560px) { #bonny-panel { height:calc(100dvh - 16px); min-height:0; } .bonny-quick { display:none; } }