/* ByteBOT design system — shared by public pages and the authenticated panel. */
:root {
  color-scheme: dark;
  --bg: #070910;
  --card: #101522;
  --elev: #141b2a;
  --bd: rgba(154, 174, 211, .14);
  --bd-h: rgba(113, 160, 255, .38);
  --t: #f2f5fc;
  --t2: #a5b0c4;
  --t3: #78859b;
  --t4: #566277;
  --ac: #4f8cff;
  --ac-h: #79aaff;
  --ac-m: rgba(79, 140, 255, .14);
  --cy: #42d8e7;
  --ok: #40c995;
  --er: #ef737a;
  --wn: #e7b85e;
  --r: 10px;
  --r-lg: 16px;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  --page-width: 1180px;
  --focus: 0 0 0 3px rgba(79, 140, 255, .28);
  --plasma: #5a1ce9;
  --electric: #1c5ae9;
  --signal: #e91c5a;
  --display: "Tektur", Inter, ui-sans-serif, system-ui, sans-serif;
  --mono: "Space Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
}

html { background: var(--bg); scroll-behavior: smooth; scrollbar-gutter: stable; }
body { color: var(--t); font-family: var(--sans); background: radial-gradient(ellipse at 78% -20%, rgba(28,90,233,.19), transparent 43%), radial-gradient(ellipse at 8% 38%, rgba(90,28,233,.09), transparent 42%), repeating-linear-gradient(135deg,rgba(150,175,225,.018) 0 1px,transparent 1px 5px), repeating-linear-gradient(45deg,rgba(0,0,0,.18) 0 1px,transparent 1px 5px), linear-gradient(180deg,#080b14,#07090f 46%,#090c15) !important; background-attachment: scroll !important; }
::selection { background: rgba(79, 140, 255, .35); }
:focus-visible { outline: 2px solid var(--ac-h) !important; outline-offset: 3px; box-shadow: var(--focus); }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
img { max-width: 100%; }

/* Shared public navigation, typography, controls and footer. */
.nav .bar, .pubnav, .top {
  background: rgba(10, 14, 23, .9) !important;
  border-color: var(--bd) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, .22) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.nav .bar { border-radius: 14px !important; }
.nav .links a, .pubnav .links a, .top nav a { transition: color .16s ease, background .16s ease; }
.nav .links a:hover, .pubnav .links a:hover, .top nav a:hover { color: var(--t) !important; background: rgba(255,255,255,.055); }
.brand { color: var(--t); }
.bb-logo { border-radius: 9px; }
.btn {
  min-height: 40px;
  border-radius: 10px !important;
  font-weight: 600 !important;
  transition: color .16s ease, background .16s ease, border-color .16s ease, transform .16s ease, box-shadow .16s ease !important;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: #397bf1 !important; border-color: rgba(133, 174, 255, .45) !important; box-shadow: 0 6px 18px rgba(40, 102, 224, .2) !important; }
.btn-primary:hover { background: #4c8aff !important; box-shadow: 0 8px 22px rgba(40, 102, 224, .28) !important; }
.btn-secondary { background: rgba(255,255,255,.045) !important; border-color: var(--bd) !important; color: var(--t) !important; }
.btn-secondary:hover { background: rgba(255,255,255,.08) !important; border-color: var(--bd-h) !important; }
.btn-danger { border-color: rgba(239,115,122,.3) !important; }
.input, .select, .textarea, input, select, textarea {
  border-color: var(--bd);
  border-radius: 9px;
  background-color: rgba(12, 17, 28, .92);
  color: var(--t);
}
.input:focus, .select:focus, .textarea:focus, input:focus, select:focus, textarea:focus { border-color: var(--ac) !important; box-shadow: var(--focus); }
footer, .pfoot, .foot { border-color: var(--bd) !important; color: var(--t3) !important; }
footer a, .pfoot a, .foot a { color: var(--t2); }
footer a:hover, .pfoot a:hover, .foot a:hover { color: var(--t); }

/* Product control panel shell. */
.sidebar {
  width: 248px !important;
  padding: 19px 14px !important;
  gap: 4px !important;
  background: #0a0e17 !important;
  border-right: 1px solid var(--bd) !important;
  box-shadow: 10px 0 34px rgba(0,0,0,.12);
}
.sidebar .brand { padding: 8px 10px 18px !important; margin-bottom: 7px !important; font-size: 14px; }
.sidebar .nav {
  min-height: 40px !important;
  height: auto !important;
  padding: 0 11px !important;
  border: 1px solid transparent;
  border-radius: 9px !important;
  color: var(--t2) !important;
}
.sidebar .nav svg { width: 16px !important; height: 16px !important; color: var(--t3); }
.sidebar .nav:hover { color: var(--t) !important; background: rgba(255,255,255,.045) !important; }
.sidebar .nav.active { color: var(--t) !important; background: rgba(79,140,255,.13) !important; border-color: rgba(79,140,255,.2) !important; box-shadow: none !important; }
.sidebar .nav.active svg { color: var(--ac-h); }
.main { max-width: 1480px !important; padding: 38px clamp(20px, 4vw, 58px) 76px !important; }
.head { margin-bottom: 27px !important; }
.head h1 { font-size: clamp(25px, 3vw, 34px) !important; letter-spacing: -.04em !important; }
.head p { max-width: 680px; line-height: 1.65; }
.card, .stat, .ticket, .cmd {
  background: linear-gradient(150deg, rgba(255,255,255,.035), rgba(255,255,255,.012)), var(--card) !important;
  border: 1px solid var(--bd) !important;
  border-radius: 13px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.1);
}
.card:hover, .stat:hover, .ticket:hover, .cmd:hover { border-color: var(--bd-h) !important; }
.stat { padding: 19px !important; }
.stat-value { letter-spacing: -.045em; }
.grid { gap: 15px !important; }
.table-wrap { border: 1px solid var(--bd); border-radius: 12px; background: rgba(12,17,27,.62); }
table { min-width: 580px; }
th { background: rgba(255,255,255,.025); }
td, th { border-color: var(--bd) !important; }
.ticket { padding: 16px !important; }
.toast { border-radius: 11px !important; box-shadow: 0 18px 48px rgba(0,0,0,.35); }
.menu-toggle { border-radius: 11px !important; background: #121a29 !important; box-shadow: 0 8px 24px rgba(0,0,0,.22); }
.sidebar-scrim { display: none; }
.skip-link { position: fixed; top: 10px; left: 10px; z-index: 200; padding: 10px 14px; border: 1px solid var(--bd-h); border-radius: 9px; background: #111827; color: var(--t); transform: translateY(-160%); transition: transform .16s ease; }
.skip-link:focus { transform: translateY(0); }
.main:focus, main:focus { outline: none; }
.nav.scrolled .bar, .pubnav.scrolled { box-shadow: 0 12px 36px rgba(0,0,0,.32) !important; }
.fc-top { display:flex; min-width:0; align-items:center; justify-content:space-between; gap:12px; }
.home-page .fc-top .fi { margin-bottom: 0; }
.fc-category { display:inline-flex; max-width:calc(100% - 52px); justify-content:flex-end; padding:4px 8px; border:1px solid var(--bd); border-radius:999px; color:var(--t3); font-size:10px; line-height:1.35; text-align:right; overflow-wrap:anywhere; }
.fc-empty { display:grid; justify-items:center; gap:10px; }
.fc-empty > svg { width:25px; height:25px; color:var(--t3); }
.fc-empty strong { color:var(--t); font-size:15px; }
.fc-empty span { color:var(--t3); }

/* Editorial/legal and developer pages use the same calm surface and grid. */
.page { max-width: 960px !important; padding-top: 112px !important; }
.page h1, body > .wrap > main > h1 { font-size: clamp(32px, 5vw, 48px) !important; letter-spacing: -.05em !important; }
.doc h2 { margin-top: 34px !important; }
.doc p, .doc li { line-height: 1.8 !important; }
.top { min-height: 66px; }
.top .wrap { width: min(var(--page-width), calc(100% - 40px)); }
.card, .callout, .codebox, .output { box-shadow: 0 12px 36px rgba(0,0,0,.12); }
.section, .page section { scroll-margin-top: 90px; }

/* Landing page: left-led product story + a restrained, real-time console preview. */
.home-page .nav .bar { max-width: 1200px; }
.home-page .hero { padding: 143px 0 66px !important; text-align: left !important; }
.home-page .hero::after { width: 760px; height: 360px; opacity: .56; filter: blur(38px); }
.home-page .hero > .wrap {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  align-items: center;
  column-gap: clamp(28px, 5vw, 72px);
}
.home-page .hero .pill,
.home-page .hero h1,
.home-page .hero .lead,
.home-page .hero .cta-row,
.home-page .hero-proof { grid-column: 1; }
.home-page .hero .pill { justify-self: start; }
.home-page h1.title { max-width: 610px; margin: 22px 0 0 !important; font-size: clamp(43px, 5.1vw, 68px) !important; line-height: 1.03 !important; }
.home-page .grad { background: linear-gradient(100deg, #f6f8fd 0%, #b8d2ff 66%, #70cde5 100%); background-clip: text; -webkit-background-clip: text; }
.home-page .lead { max-width: 550px; margin: 20px 0 0 !important; font-size: clamp(15px, 1.35vw, 17px) !important; line-height: 1.75 !important; }
.home-page .cta-row { justify-content: flex-start !important; margin-top: 27px !important; }
.home-page .btn-lg { min-height: 48px; }
.hero-proof { display: flex; gap: 17px; flex-wrap: wrap; margin-top: 23px; color: var(--t3); font-size: 11.5px; }
.hero-proof span { display: inline-flex; align-items: center; gap: 7px; }
.hero-proof svg { width: 14px; height: 14px; color: var(--cy); }
.home-page .win {
  grid-column: 2;
  grid-row: 1 / span 5;
  width: 100%;
  max-width: none !important;
  margin: 0 !important;
  border-radius: 14px !important;
  border-color: rgba(154,174,211,.2) !important;
  background: #0e131c !important;
  box-shadow: 0 32px 80px rgba(0,0,0,.34), 0 0 0 1px rgba(255,255,255,.025) inset !important;
}
.home-page .win-body { min-height: 338px; }
.home-page .explorer { background: #0c1119; }
.home-page .status, .home-page .tabs2 { border-color: rgba(154,174,211,.13); }
.home-page .stats { margin-top: 18px; gap: 12px; }
.home-page .stat { padding: 20px 21px !important; }
.home-page .stat .v { font-size: clamp(27px, 3vw, 38px); }
.home-page .sec { padding-top: 108px; }
.home-page .eyebrow { color: #83aef5; letter-spacing: .12em; }
.home-page .sec-h { letter-spacing: -.045em; }
.home-page .sec-p { line-height: 1.7; }
.home-page .fb { gap: clamp(30px, 5vw, 68px); }
.home-page .vis { background: #0e131c; border-color: var(--bd); border-radius: 14px; }
.home-page .fc { background: #101622; border-color: var(--bd); border-radius: 13px; }
.home-page .fc:hover { background: #131c2b; border-color: var(--bd-h); transform: translateY(-2px); }
.home-page .fc::before { display: block; }
.home-page .fi { background: rgba(79,140,255,.1); border-color: rgba(110,157,247,.2); color: #8bb5ff; }
.home-page .plan { background: #101520; border-color: var(--bd); border-radius: 16px; }
.home-page .plan.pop { background: #111a2a; border-color: rgba(113,160,255,.4); box-shadow: 0 14px 40px rgba(0,0,0,.18); }
.home-page .plan.pop::before { display: none; }
.home-page .badge-pop { background: #397bf1; }
.home-page .faq details { background: rgba(16,21,32,.84); border-radius: 12px; }
.home-page .faq details[open] { background: rgba(79,140,255,.075); }
.home-page .cta { background: linear-gradient(125deg, rgba(79,140,255,.1), transparent 60%), #101520; border-color: var(--bd); border-radius: 18px; box-shadow: none; }
.home-page .pulse-btn { animation: none !important; }
.home-page footer { margin-top: 90px; }

/* Smaller screens: keep navigation, filters, forms, and dashboard usable. */
@media (max-width: 1100px) {
  .sidebar { width: 236px !important; }
  .main { margin-left: 236px !important; padding-left: 26px !important; padding-right: 26px !important; }
  .home-page .hero > .wrap { column-gap: 28px; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); }
  .home-page h1.title { font-size: clamp(42px,5vw,59px) !important; }
  .home-page .win-body { grid-template-columns: 155px minmax(0,1fr); }
}
@media (max-width: 1200px) {
  .home-page .nav .links { display: none; }
  .home-page .burger { display: inline-flex; }
  .home-page .mobile-open .links { display: flex; position: absolute; top: 67px; left: 0; right: 0; flex-direction: column; gap: 3px; margin: 0; padding: 10px; border: 1px solid var(--bd); border-radius: 12px; background: #0d121d; box-shadow: 0 18px 48px rgba(0,0,0,.32); }
  .home-page .mobile-open .links a { padding: 11px 12px; }
}
@media (max-width: 900px) {
  .sidebar { transform: none !important; }
  .main { margin-left: 236px !important; }
  .home-page .hero { padding-top: 122px !important; }
  .home-page .hero > .wrap { grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); column-gap: 22px; }
  .home-page .win-body { grid-template-columns: 1fr; }
  .home-page .explorer { display: none; }
  .home-page .code { font-size: 11px; }
}
@media (max-width: 960px) {
  .home-page .win-body { grid-template-columns: minmax(0,1fr); }
  .home-page .explorer { display: none; }
  .home-page .editor { grid-column: 1; width: 100%; }
  .home-page .code { width: 100%; }
  .home-page .code .empty { justify-content: center; }
}
@media (max-width: 820px) {
  .sidebar { z-index: 80 !important; width: min(300px, 86vw) !important; transform: translateX(-105%) !important; transition: transform .2s ease; }
  .sidebar.open { transform: translateX(0) !important; box-shadow: 24px 0 60px rgba(0,0,0,.42); }
  .sidebar-scrim { display: block; position: fixed; inset: 0; z-index: 75; padding: 0; border: 0; background: rgba(1,4,10,.65); opacity: 0; pointer-events: none; transition: opacity .18s ease; }
  .sidebar-scrim.visible { opacity: 1; pointer-events: auto; }
  .main { margin-left: 0 !important; padding: 70px 18px 54px !important; }
  .menu-toggle { position: fixed; top: 14px; right: 14px; z-index: 90 !important; }
  .g2, .g3, .g4 { grid-template-columns: 1fr !important; }
  .head { align-items: flex-start !important; }
  .head h1 { font-size: 26px !important; }
  .picker { max-width: 100%; flex-wrap: wrap; }
  .picker .select { max-width: min(100%, 340px); }
  .grid { gap: 12px !important; }
  .table-wrap { max-width: calc(100vw - 36px); }
  .pubnav .in { padding: 0 16px; }
  .page { padding: 90px 18px 36px !important; }
  .home-page .hero { padding: 112px 0 38px !important; }
  .home-page .hero > .wrap { grid-template-columns: minmax(0,1fr); row-gap: 0; }
  .home-page .hero .pill, .home-page .hero h1, .home-page .hero .lead, .home-page .hero .cta-row, .home-page .hero-proof, .home-page .win { grid-column: 1; grid-row: auto; }
  .home-page h1.title { font-size: clamp(40px, 10vw, 59px) !important; margin-top: 20px !important; }
  .home-page .lead { margin-top: 16px !important; }
  .hero-proof { gap: 10px 14px; margin-top: 18px; }
  .home-page .win { margin-top: 30px !important; }
  .home-page .win-body { min-height: 0; }
  .home-page .code { min-height: 225px; max-height: 280px; padding: 12px; font-size: 10px; }
  .home-page .code .log-line { grid-template-columns: 55px 45px minmax(0,1fr); gap: 5px; }
  .home-page .tabs2 button { font-size: 9px; padding: 6px; }
  .home-page .console-select { display: block; max-width: 118px; }
  .home-page .tabs2 [data-feed-filter]:not(.run) { display: none; }
  .home-page .status { gap: 8px; padding: 0 9px; font-size: 9px; }
  .home-page .stats { margin-top: 12px; }
  .home-page .sec { padding-top: 76px; }
  .home-page .fb { grid-template-columns: 1fr; gap: 22px; margin-top: 72px; }
  .home-page .fb.flip .fb-t { order: 0; }
  .home-page .fgrid, .home-page .plans { grid-template-columns: 1fr; }
  .home-page .feature-tools { display: block; }
  .home-page .feature-results { margin-top: 9px; text-align: right; }
  .home-page .ftabs { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; padding: 2px 1px 8px; }
  .home-page .ftab { flex: 0 0 auto; }
  .home-page footer .wrap { align-items: flex-start; flex-direction: column; }
  .home-page footer nav { gap: 10px 16px; }
}
@media (max-width: 390px) {
  .home-page .nav { padding: 0 10px; }
  .home-page .nav .bar { gap: 8px; padding-left: 10px; }
  .home-page .nav .brand { gap: 7px; font-size: 13px; }
  .home-page .nav .r { gap: 5px; }
  .home-page .nav .r .btn-primary { min-height: 36px; padding: 0 10px; font-size: 11px; }
  .home-page .burger { width: 34px; height: 36px; }
  .home-page .stats { gap: 8px; }
  .home-page .stat { padding: 15px 13px !important; }
  .home-page .stat .l { align-items: flex-start; flex-direction: column; gap: 5px; }
  .home-page .win-top { padding: 0 9px; }
  .home-page .console-connection { font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Industrial glass, precision bevels and responsive depth lighting. */
body :is(h1,h2,h3,.stat-value,.cmd .n) { font-family: var(--display); }
body :is(.cmd,.code,.mono,code,pre,.mono-label) { font-family: var(--mono); }
.home-page .hero { isolation: isolate; }
.home-page .hero > .wrap { position: relative; z-index: 1; }
.home-page h1.title, .home-page .sec-h, .head h1, .page h1, .top + .wrap > .hero h1 {
  background: linear-gradient(115deg,#f8faff 0%,#c4cee0 38%,#91baff 70%,#d6c3ff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 2px 0 rgba(255,255,255,.035),0 10px 30px rgba(28,90,233,.16);
}
.home-page h1.title { font-family: var(--display); text-shadow: 0 1px 0 rgba(255,255,255,.12),0 5px 18px rgba(28,90,233,.2); }
.home-page .grad { background-image: linear-gradient(105deg,#fff 0%,#c8d4ed 34%,#8bbaff 62%,#63d9eb 84%,#bda1ff 100%); }
.home-page .win, .home-page .vis, .home-page .fc, .home-page .plan,
.card, .stat, .ticket, .cmd, .callout, .codebox, .output, .glass, .feature {
  position: relative;
  border-color: rgba(160,181,224,.23) !important;
  box-shadow: 0 24px 58px -36px rgba(0,0,0,.98),0 2px 0 rgba(255,255,255,.07) inset,0 -1px 0 rgba(90,28,233,.2) inset,0 0 0 1px rgba(255,255,255,.018);
  -webkit-backdrop-filter: blur(18px) saturate(138%);
  backdrop-filter: blur(18px) saturate(138%);
}
.home-page .fc, .cmd {
  overflow: hidden;
  background-image: repeating-linear-gradient(135deg,rgba(160,190,255,.018) 0 1px,transparent 1px 7px),linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.01) 58%),linear-gradient(120deg,rgba(90,28,233,.075),transparent 47%);
  box-shadow: 0 18px 38px -26px rgba(0,0,0,.95),0 2px 0 rgba(255,255,255,.075) inset,0 -1px 0 rgba(28,90,233,.22) inset,0 0 0 1px rgba(255,255,255,.02);
}
.home-page .fc::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(360px circle at var(--mx,50%) var(--my,0%),rgba(86,147,255,.19),transparent 60%),linear-gradient(135deg,rgba(255,255,255,.045),transparent 30%);
  opacity: 0; transition: opacity .28s ease;
}
.home-page .fc:hover::before { opacity: 1; }
.home-page .fc::after, .cmd::after {
  content: ""; position: absolute; top: 0; left: 13px; right: 13px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg,transparent,rgba(131,168,255,.72),transparent); opacity: .6;
}
.home-page .fc:nth-child(3n+2)::after, .cmd:nth-child(3n+2)::after { background: linear-gradient(90deg,transparent,rgba(135,82,255,.85),transparent); }
.home-page .fc:nth-child(3n)::after, .cmd:nth-child(3n)::after { background: linear-gradient(90deg,transparent,rgba(233,28,90,.72),transparent); }
.home-page .fi { box-shadow: 0 1px 0 rgba(255,255,255,.12) inset,0 5px 14px rgba(28,90,233,.18); }
.home-page .plan { background-image: linear-gradient(145deg,rgba(255,255,255,.06),rgba(255,255,255,.01) 50%),linear-gradient(120deg,rgba(90,28,233,.055),transparent 50%); }
.home-page .plan.pop { border-color: rgba(122,144,255,.55); box-shadow: 0 26px 62px -35px rgba(28,90,233,.5),0 2px 0 rgba(255,255,255,.11) inset,0 -1px 0 rgba(90,28,233,.26) inset; }
.home-page .faq details { border: 1px solid rgba(160,181,224,.18); box-shadow: 0 9px 24px -16px rgba(0,0,0,.85),0 1px 0 rgba(255,255,255,.035) inset; }
.home-page .cta { background-image: radial-gradient(ellipse at 12% 0%,rgba(90,28,233,.18),transparent 44%),linear-gradient(140deg,rgba(255,255,255,.055),transparent 52%); box-shadow: 0 30px 65px -42px rgba(28,90,233,.68),0 2px 0 rgba(255,255,255,.065) inset,0 -1px 0 rgba(90,28,233,.2) inset; }
.home-page .win, .home-page .fc, .home-page .plan, .card, .stat, .ticket, .cmd, .vis, .glass, .feature {
  transform-style: preserve-3d;
  transition: border-color .24s ease,box-shadow .24s ease,background-color .24s ease,transform .22s cubic-bezier(.2,.72,.2,1) !important;
}
.btn, .menu-toggle, .codehead button {
  box-shadow: 0 1px 0 rgba(255,255,255,.19) inset,0 -3px 0 rgba(0,0,0,.23) inset,0 7px 16px rgba(0,0,0,.24);
  transition: transform .13s ease,box-shadow .18s ease,filter .18s ease,background .18s ease !important;
}
.btn-primary { background: linear-gradient(180deg,#4383ff 0%,#2459ce 100%) !important; border-color: rgba(133,174,255,.58) !important; box-shadow: 0 1px 0 rgba(255,255,255,.3) inset,0 -3px 0 rgba(18,48,120,.6) inset,0 7px 18px rgba(28,90,233,.32),0 0 22px rgba(90,28,233,.2) !important; }
.btn-primary:hover { background: linear-gradient(180deg,#65a0ff 0%,#326ce9 100%) !important; box-shadow: 0 1px 0 rgba(255,255,255,.36) inset,0 -3px 0 rgba(18,48,120,.45) inset,0 10px 26px rgba(28,90,233,.4),0 0 26px rgba(90,28,233,.3) !important; }
.btn-secondary:hover { box-shadow: 0 1px 0 rgba(255,255,255,.16) inset,0 -2px 0 rgba(0,0,0,.35) inset,0 0 20px rgba(90,28,233,.16); }
.btn:active, .menu-toggle:active, .codehead button:active { transform: translateY(2px) scale(.985) !important; box-shadow: 0 1px 0 rgba(255,255,255,.09) inset,0 3px 9px rgba(0,0,0,.24) inset !important; }
.bb-tilt { --bb-rx: 0deg; --bb-ry: 0deg; --bb-lx: 50%; --bb-ly: 0%; }
.bb-tilt:hover {
  transform: perspective(1100px) rotateX(var(--bb-rx)) rotateY(var(--bb-ry)) translate3d(0,-3px,5px) !important;
  border-color: rgba(128,165,255,.54) !important;
  box-shadow: 0 32px 70px -35px rgba(0,0,0,.98),0 2px 0 rgba(255,255,255,.09) inset,0 -1px 0 rgba(90,28,233,.28) inset,0 0 28px rgba(28,90,233,.1) !important;
  z-index: 2;
}
.bb-tilt::before { background-position: var(--bb-lx) var(--bb-ly); }
.home-page .hero::after { background: radial-gradient(ellipse at 42% 44%,rgba(28,90,233,.26),transparent 52%),radial-gradient(ellipse at 78% 24%,rgba(90,28,233,.2),transparent 48%); filter: blur(44px); }
.home-page .hero::before { content:"";position:absolute;inset:0;pointer-events:none;z-index:0;background:radial-gradient(ellipse at 51% 48%,transparent 24%,rgba(4,6,13,.35) 100%); }
.bb-cosmos { position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.82; }
.home-page .hero-proof span, .home-page .eyebrow, .home-page .pill, .home-page .fc-category { font-family: var(--mono); }
.home-page .hero-proof span { font-size:10px;letter-spacing:-.025em; }
.sidebar, .menu-toggle { box-shadow: 0 18px 46px -24px rgba(0,0,0,.9),1px 0 0 rgba(255,255,255,.05) inset; }
.input:focus, .select:focus, .textarea:focus, input:focus, select:focus, textarea:focus { box-shadow: var(--focus),0 0 20px rgba(28,90,233,.1); }
/* Translucent blur on every select/input forces repeated large-area repaints,
   especially on dashboard multi-selects. Keep fields opaque and crisp. */
.input, .select, .textarea, input, select, textarea { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
@media (hover: none), (prefers-reduced-motion: reduce) { .bb-tilt:hover { transform: none !important; } }

/* Premium plan center: clear status, accessible filters and a catalog that has
   a visible loading/empty state even when the guild API is unavailable. */
.premium-hero { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(240px,.8fr); gap:26px; align-items:center; padding:clamp(22px,3vw,34px)!important; overflow:hidden; position:relative; background:radial-gradient(ellipse at 4% 0%,rgba(90,28,233,.2),transparent 47%),radial-gradient(ellipse at 90% 100%,rgba(28,90,233,.17),transparent 48%),linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.012)),var(--card)!important; }
.premium-hero::after { content:""; position:absolute; width:250px;height:250px;right:24%;top:-180px;border:1px solid rgba(124,157,255,.13);border-radius:50%;box-shadow:0 0 0 24px rgba(124,157,255,.025),0 0 0 50px rgba(124,157,255,.018);pointer-events:none; }
.premium-hero-copy,.premium-current { position:relative;z-index:1; }
.premium-eyebrow { display:flex;align-items:center;gap:8px;color:#9bbcff;font:700 10px/1.3 var(--mono);letter-spacing:.09em; }
.premium-eyebrow svg { width:15px;height:15px;color:#ba9aff; }
.premium-hero h2 { margin:12px 0 8px;font:700 clamp(23px,3vw,34px)/1.12 var(--display);letter-spacing:-.035em;background:linear-gradient(100deg,#f6f8fd,#b8d2ff 68%,#8d9fff);background-clip:text;-webkit-background-clip:text;color:transparent;text-shadow:0 8px 28px rgba(79,140,255,.14); }
.premium-hero-copy>p { max-width:670px;margin:0;color:var(--t2);font-size:13px;line-height:1.75; }
.premium-hero-actions { display:flex;flex-wrap:wrap;gap:10px;margin-top:20px; }
.premium-hero-actions .btn { display:inline-flex;align-items:center;gap:8px; }
.premium-hero-actions svg { width:15px;height:15px; }
.premium-current { display:grid;gap:8px;padding:20px;border:1px solid rgba(143,169,230,.2);border-radius:14px;background:linear-gradient(145deg,rgba(12,17,29,.86),rgba(12,18,31,.56));box-shadow:0 12px 32px rgba(0,0,0,.19),0 1px rgba(255,255,255,.06) inset; }
.premium-current-label { color:var(--t3);font:700 9px/1.4 var(--mono);letter-spacing:.1em; }
.premium-current strong { color:var(--t);font:700 24px/1.1 var(--display);letter-spacing:.02em; }
.premium-current>span:nth-of-type(2) { color:var(--t2);font-size:11.5px;line-height:1.55; }
.premium-current-mark { display:flex;align-items:center;gap:6px;margin-top:3px;color:#85d9ba;font-size:10px; }
.premium-current-mark svg { width:14px;height:14px; }
.premium-stats { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:14px 0; }
.premium-stats .stat { min-width:0; }
.premium-stats .stat-value { font-size:20px; }
.premium-stat-note { margin-top:7px;color:var(--t3);font-size:10px;line-height:1.45; }
.premium-included,.premium-catalog,.premium-contact { margin-top:14px; }
.premium-section-heading { display:flex;align-items:flex-start;justify-content:space-between;gap:18px; }
.premium-section-heading .card-sub { max-width:760px;margin:6px 0 0;line-height:1.6; }
.premium-section-chip { flex:none;display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border:1px solid var(--bd);border-radius:999px;background:rgba(255,255,255,.025);color:var(--t2);font-size:10px; }
.premium-section-chip svg { width:13px;height:13px;color:var(--cy); }
.premium-base-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:16px; }
.premium-base-grid>div { display:flex;align-items:center;gap:10px;min-width:0;padding:12px;border:1px solid rgba(154,174,211,.12);border-radius:10px;background:rgba(6,10,18,.27); }
.premium-base-grid>div>svg { flex:none;width:17px;height:17px;color:#86adff; }
.premium-base-grid span { display:grid;gap:3px;min-width:0; }
.premium-base-grid b { color:var(--t);font-size:11px; }
.premium-base-grid small { color:var(--t3);font-size:9.5px;line-height:1.4; }
.premium-catalog-tools { display:flex;align-items:center;justify-content:space-between;gap:14px;margin:18px 0 14px; }
.premium-search { display:flex;align-items:center;gap:9px;width:min(100%,390px);min-height:40px;padding:0 12px;border:1px solid var(--bd);border-radius:10px;background:rgba(7,11,19,.63); }
.premium-search:focus-within { border-color:var(--ac);box-shadow:var(--focus); }
.premium-search svg { flex:none;width:15px;height:15px;color:var(--t3); }
.premium-search input { min-width:0;width:100%;padding:9px 0;border:0!important;outline:0!important;background:transparent!important;box-shadow:none!important;color:var(--t);font-size:11px; }
.premium-search input::placeholder { color:var(--t4); }
.premium-filters { display:flex;flex-wrap:wrap;gap:6px; }
.premium-filter { min-height:34px;padding:0 12px;border:1px solid var(--bd);border-radius:8px;background:rgba(255,255,255,.025);color:var(--t2);font-size:10px;font-weight:600;cursor:pointer;transition:all .16s ease; }
.premium-filter:hover { border-color:var(--bd-h);color:var(--t); }
.premium-filter.active { border-color:rgba(102,151,255,.5);background:rgba(79,140,255,.16);color:#d5e4ff;box-shadow:0 0 16px rgba(28,90,233,.1) inset; }
.premium-load-note { display:flex;align-items:flex-start;gap:8px;margin:0 0 12px;padding:10px 12px;border:1px solid rgba(231,184,94,.2);border-radius:9px;background:rgba(231,184,94,.055);color:#e5c987;font-size:10.5px;line-height:1.55; }
.premium-load-note[hidden],.premium-no-results[hidden] { display:none; }
.premium-feature-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px; }
.premium-feature { display:grid;grid-template-columns:auto minmax(0,1fr);gap:11px;min-width:0;padding:14px;border:1px solid var(--bd);border-radius:11px;background:linear-gradient(140deg,rgba(255,255,255,.028),rgba(255,255,255,.008)),rgba(8,12,21,.56);transition:transform .17s ease,border-color .17s ease,box-shadow .17s ease; }
.premium-feature:hover { transform:translateY(-2px);border-color:var(--bd-h);box-shadow:0 10px 25px rgba(0,0,0,.2); }
.premium-feature.is-unlocked { border-color:rgba(64,201,149,.24); }
.premium-feature.is-locked { border-color:rgba(231,184,94,.17); }
.premium-feature.is-unknown { border-color:rgba(154,174,211,.14); }
.premium-feature-icon { display:grid;place-items:center;width:34px;height:34px;border:1px solid rgba(255,255,255,.055);border-radius:10px;background:rgba(255,255,255,.035);color:#8eb3ff; }
.premium-feature-icon svg { width:16px;height:16px; }
.premium-feature-main { min-width:0; }
.premium-feature-titleline { display:flex;align-items:center;flex-wrap:wrap;gap:7px;min-width:0; }
.premium-feature-title { color:var(--t);font-size:11px;font-weight:700; }
.premium-feature-tier,.premium-feature-status { display:inline-flex;align-items:center;gap:4px;padding:3px 6px;border:1px solid rgba(154,174,211,.15);border-radius:999px;color:#b9c8e6;font:700 8px/1 var(--mono);text-transform:uppercase;letter-spacing:.035em; }
.premium-feature-tier.pro { border-color:rgba(231,184,94,.18);background:rgba(231,184,94,.08);color:#f2ce7b; }
.premium-feature-tier.basic { border-color:rgba(79,140,255,.2);background:rgba(79,140,255,.08);color:#9bbcff; }
.premium-feature-status.on { border-color:rgba(64,201,149,.2);background:rgba(64,201,149,.08);color:#8be0bd; }
.premium-feature-status.off { border-color:rgba(231,184,94,.16);background:rgba(231,184,94,.06);color:#e5c987; }
.premium-feature-status.unknown { color:var(--t3); }
.premium-feature-desc { margin:7px 0 0;color:var(--t3);font-size:10px;line-height:1.55; }
.premium-feature-foot { display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:9px;padding-top:8px;border-top:1px solid rgba(154,174,211,.09);color:var(--t4);font-size:9px; }
.premium-feature-foot span { display:flex;align-items:center;gap:5px; }
.premium-feature-foot svg { width:12px;height:12px; }
.premium-loading,.premium-no-results { display:grid;justify-items:center;gap:8px;grid-column:1/-1;min-height:132px;padding:24px;border:1px dashed var(--bd);border-radius:11px;color:var(--t3);text-align:center; }
.premium-loading svg,.premium-no-results svg { width:20px;height:20px;color:#8eb3ff; }
.premium-no-results b { color:var(--t2);font-size:12px; }
.premium-no-results span { font-size:10px; }
.premium-contact { display:flex;align-items:center;gap:14px;padding:16px!important; }
.premium-contact-icon { flex:none;display:grid;place-items:center;width:38px;height:38px;border:1px solid rgba(79,140,255,.2);border-radius:11px;background:rgba(79,140,255,.08);color:#9bbcff; }
.premium-contact-icon svg { width:18px;height:18px; }
.premium-contact>div:nth-child(2) { flex:1;min-width:0; }
.premium-contact b { font-size:11px; }
.premium-contact p { margin:4px 0 0;color:var(--t3);font-size:10px;line-height:1.5; }
.premium-contact>.btn { flex:none;display:inline-flex;align-items:center;gap:7px; }
.premium-contact>.btn svg { width:14px;height:14px; }
.pc-ship-options { display:grid;grid-template-columns:minmax(0,1.4fr) minmax(240px,1fr);align-items:end;gap:14px;padding:14px;border:1px solid rgba(79,140,255,.16);border-radius:11px;background:linear-gradient(135deg,rgba(79,140,255,.055),rgba(255,255,255,.012)); }
.pc-ship-options .field { margin:0;min-width:0; }
.pc-ship-random { display:flex;align-items:flex-start;gap:10px;min-height:50px;padding:12px;border:1px solid var(--bd);border-radius:9px;background:rgba(6,10,18,.3);cursor:pointer; }
.pc-ship-random input { flex:none;width:16px;height:16px;margin-top:1px;accent-color:var(--ac); }
.pc-ship-random span { display:grid;gap:4px; }
.pc-ship-random b { color:var(--t);font-size:10.5px; }
.pc-ship-random small { color:var(--t3);font-size:9.5px;line-height:1.55; }
@media(max-width:850px) { .premium-hero { grid-template-columns:1fr; }.premium-current { max-width:unset; }.premium-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }.premium-base-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) { .premium-section-heading,.premium-catalog-tools { align-items:stretch;flex-direction:column; }.premium-section-chip { align-self:flex-start; }.premium-filters { width:100%; }.premium-filter { flex:1; }.premium-feature-grid { grid-template-columns:1fr; }.premium-contact { align-items:flex-start;flex-wrap:wrap; }.premium-contact>.btn { width:100%;justify-content:center; }.premium-hero-actions>.btn { flex:1;justify-content:center; } }
@media(max-width:700px) { .pc-ship-options { grid-template-columns:1fr; } }
@media(prefers-reduced-motion:reduce) { .premium-feature,.premium-filter { transition:none; }.premium-feature:hover { transform:none; } }