/* The BecTech bar, shared by the home page and every app site.
   Every page draws it the same size and in the same place, so it can stay put
   while the page underneath changes. On app sites a second glass bubble sits
   behind it and slides out below with that site's own buttons. */
:root { --bt-nav-h: 64px; --bt-row-h: 56px; }
@media (max-width: 860px) { :root { --bt-nav-h: 58px; --bt-row-h: 54px; } }

.bt-wrap {
  position: fixed; z-index: 2147483600; top: 16px; left: 0; right: 0;
  display: flex; justify-content: center; padding: 0 16px; pointer-events: none;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  line-height: normal; letter-spacing: normal; -webkit-font-smoothing: antialiased;
}
.bt-wrap *, .bt-wrap *::before, .bt-wrap *::after { box-sizing: border-box; }
.bt-stack { position: relative; width: min(560px, 100%); }

/* Both glass pieces: the tint layer is the CSS glass. Once liquidGL is running
   (.bt-lg), the tint thins out and the WebGL lens does the bending. */
.bt-nav, .bt-sub { border-radius: 22px; box-shadow: 0 10px 30px rgba(0,0,0,.12); background: none; }
.bt-tint {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: rgba(255,255,255,.62);
  -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.55);
  transition: background .35s, box-shadow .35s;
}
.bt-lg .bt-tint { background: rgba(255,255,255,.58); -webkit-backdrop-filter: none; backdrop-filter: none; }
.bt-dark .bt-tint { background: rgba(28,28,32,.62); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.bt-dark.bt-lg .bt-tint { background: rgba(28,28,32,.6); }

.bt-nav {
  position: relative; z-index: 2; pointer-events: auto;
  display: flex; align-items: center; gap: 6px;
  height: var(--bt-nav-h); padding: 0 10px 0 22px; width: 100%;
}
/* liquidGL turns off clicks on the glass element itself, so turn them back on for its contents */
.bt-nav > :not(.bt-tint), .bt-row { position: relative; pointer-events: auto; }

.bt-brand {
  font-weight: 800; font-size: 22px; letter-spacing: -.03em;
  text-decoration: none; margin-right: auto; white-space: nowrap; color: #0b0b0c;
  transition: color .35s;
}
.bt-brand span { color: #6b6c72; transition: color .35s; }
.bt-btn {
  font: inherit; font-weight: 700; font-size: 15px; color: #0b0b0c; flex: none;
  height: 44px; padding: 0 16px; border-radius: 22px; border: 0; margin: 0;
  background: rgba(0,0,0,.06); cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  transition: background .25s, color .35s, transform .2s, border-radius .35s cubic-bezier(.2,.8,.2,1);
}
/* Round at rest, rounded square on hover */
.bt-btn:hover, .bt-btn[aria-expanded="true"] { background: rgba(0,0,0,.12); border-radius: 11px; color: #0b0b0c; }
.bt-btn:active { transform: scale(.96); }
.bt-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.bt-btn .bt-chev { width: 12px; height: 12px; transition: transform .25s; }
.bt-btn[aria-expanded="true"] .bt-chev { transform: rotate(180deg); }
.bt-yt { padding: 0 14px; }
.bt-yt svg { width: 28px; height: 20px; display: block; }

/* In glass mode the buttons are frosted too, so they stay readable over dark pictures */
.bt-lg .bt-btn { background: rgba(255,255,255,.62); box-shadow: inset 0 0 0 1px rgba(0,0,0,.07); }
.bt-lg .bt-btn:hover, .bt-lg .bt-btn[aria-expanded="true"] { background: rgba(255,255,255,.86); }
.bt-dark .bt-brand, .bt-dark .bt-btn, .bt-dark .bt-btn:hover { color: #fff; }
.bt-dark .bt-brand span { color: #a3a4aa; }
.bt-dark .bt-btn, .bt-dark.bt-lg .bt-btn { background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.bt-dark .bt-btn:hover, .bt-dark .bt-btn[aria-expanded="true"], .bt-dark.bt-lg .bt-btn:hover { background: rgba(255,255,255,.2); }

/* The app's own bubble: sits behind the bar at the same size, then grows down.
   With liquidGL it's the one glass lens for both, so the strip under the bar's
   rounded corners is glass too. Its tint starts just above the bar's bottom edge,
   so it fills those corners without doubling up behind the bar. */
.bt-sub {
  position: absolute; z-index: 1; left: 0; right: 0; top: 0;
  height: var(--bt-nav-h); pointer-events: none; box-shadow: none;
  transition: height .6s cubic-bezier(.2,.9,.25,1.12), box-shadow .3s ease;
}
.bt-sub > .bt-tint {
  top: calc(var(--bt-nav-h) - 24px); border-top-left-radius: 0; border-top-right-radius: 0;
  box-shadow: none; opacity: 0; transition: opacity .25s ease, background .35s;
}
.bt-sub.open { height: calc(var(--bt-nav-h) + var(--bt-row-h)); box-shadow: 0 10px 30px rgba(0,0,0,.12), inset 0 0 0 1px rgba(255,255,255,.55); }
.bt-dark .bt-sub.open { box-shadow: 0 10px 30px rgba(0,0,0,.12), inset 0 0 0 1px rgba(255,255,255,.14); }
.bt-sub.open > .bt-tint { opacity: 1; }
.bt-row {
  position: absolute; left: 0; right: 0; bottom: 0; height: var(--bt-row-h);
  display: flex; align-items: center; gap: 6px; padding: 0 10px 6px;
  overflow-x: auto; scrollbar-width: none;
  opacity: 0; transform: translateY(-8px); pointer-events: none;
  transition: opacity .3s ease, transform .4s cubic-bezier(.2,.8,.2,1);
}
.bt-row::-webkit-scrollbar { display: none; }
/* Faded edges where there are more buttons to scroll to */
.bt-row.bt-more-right { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
.bt-row.bt-more-left { -webkit-mask-image: linear-gradient(90deg, transparent, #000 36px); mask-image: linear-gradient(90deg, transparent, #000 36px); }
.bt-row.bt-more-left.bt-more-right { -webkit-mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 36px), transparent); }
.bt-row.bt-dragging { cursor: grabbing; user-select: none; }
.bt-row.bt-dragging .bt-btn { pointer-events: none; }
.bt-app {
  margin: 0 auto 0 12px; padding-right: 8px; flex: none; white-space: nowrap;
  font-weight: 800; font-size: 22px; letter-spacing: -.03em; color: #6b6c72;
  transition: color .35s;
}
.bt-dark .bt-app { color: #a3a4aa; }
.bt-sub.show-row .bt-row { opacity: 1; transform: none; pointer-events: auto; }

/* Apps dropdown */
.bt-menu {
  position: absolute; z-index: 3; top: calc(var(--bt-nav-h) + 10px); left: 50%;
  transform: translate(-50%, -6px) scale(.98);
  width: min(360px, calc(100vw - 32px)); max-height: calc(100svh - var(--bt-nav-h) - 60px); overflow-y: auto;
  padding: 8px; border-radius: 22px;
  background: rgba(255,255,255,.94);
  -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6);
  box-shadow: 0 24px 60px rgba(0,0,0,.22), inset 0 0 0 1px rgba(255,255,255,.6);
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease, transform .25s cubic-bezier(.2,.8,.2,1), top .4s cubic-bezier(.2,.8,.2,1);
}
.bt-wrap.bt-has-row .bt-menu { top: calc(var(--bt-nav-h) + var(--bt-row-h) + 10px); }
.bt-menu.open { opacity: 1; pointer-events: auto; transform: translate(-50%, 0) scale(1); }
.bt-menu a {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px; border-radius: 14px; text-decoration: none;
  font-weight: 700; font-size: 16px; color: #0b0b0c;
}
.bt-menu a:hover, .bt-menu a:focus-visible { background: rgba(0,0,0,.06); outline: none; }
.bt-menu a[aria-current="page"] { background: rgba(0,0,0,.04); }
.bt-ico {
  width: 34px; height: 34px; border-radius: 9px; flex: none; object-fit: cover;
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
}
.bt-ico.bt-blank { background: #ececee; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }
.bt-menu small { display: block; font-weight: 600; font-size: 13px; color: #6b6c72; }

@media (max-width: 860px) {
  .bt-nav { padding: 0 8px 0 18px; }
  .bt-nav, .bt-sub { border-radius: 19px; }
  .bt-brand { font-size: 20px; }
  .bt-btn { height: 42px; padding: 0 13px; font-size: 14px; border-radius: 21px; }
  .bt-row { padding: 0 8px 6px; }
  .bt-app { margin-left: 10px; font-size: 20px; }
}

/* ---- Plain look (shadcn/ui style) for browsers that can't run liquidGL smoothly ---- */
.bt-plain .bt-nav, .bt-plain .bt-sub.open { box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 8px 24px -8px rgba(0,0,0,.12); }
.bt-plain .bt-tint, .bt-plain.bt-lg .bt-tint {
  background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: inset 0 0 0 1px #e4e4e7;
}
.bt-plain .bt-sub > .bt-tint { box-shadow: inset 1px 0 0 #e4e4e7, inset -1px 0 0 #e4e4e7, inset 0 -1px 0 #e4e4e7; }
.bt-plain .bt-brand { color: #09090b; }
.bt-plain .bt-brand span, .bt-plain .bt-app { color: #71717a; }
.bt-plain .bt-btn {
  height: 36px; padding: 0 12px; border-radius: 8px; font-weight: 600; font-size: 14px;
  background: #f4f4f5; color: #18181b;
}
.bt-plain .bt-btn:hover, .bt-plain .bt-btn[aria-expanded="true"] { background: #e4e4e7; border-radius: 8px; color: #18181b; }
.bt-plain .bt-yt { padding: 0 10px; }
.bt-plain .bt-menu {
  background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; border-radius: 12px;
  box-shadow: 0 0 0 1px #e4e4e7, 0 10px 30px -10px rgba(0,0,0,.2);
}
.bt-plain .bt-menu a { border-radius: 8px; }
.bt-plain .bt-menu a:hover, .bt-plain .bt-menu a:focus-visible { background: #f4f4f5; }
.bt-plain .bt-menu small { color: #71717a; }
.bt-plain.bt-dark .bt-tint { background: #09090b; box-shadow: inset 0 0 0 1px #27272a; }
.bt-plain.bt-dark .bt-sub > .bt-tint { box-shadow: inset 1px 0 0 #27272a, inset -1px 0 0 #27272a, inset 0 -1px 0 #27272a; }
.bt-plain.bt-dark .bt-brand, .bt-plain.bt-dark .bt-btn, .bt-plain.bt-dark .bt-btn:hover { color: #fafafa; }
.bt-plain.bt-dark .bt-brand span, .bt-plain.bt-dark .bt-app { color: #a1a1aa; }
.bt-plain.bt-dark .bt-btn { background: #27272a; }
.bt-plain.bt-dark .bt-btn:hover, .bt-plain.bt-dark .bt-btn[aria-expanded="true"] { background: #3f3f46; }

/* On app sites: hide the site's own top bar, and leave room for ours when jumping to a section */
html.bt-site #topbar, html.bt-site header.topbar { display: none !important; }
html.bt-site { scroll-padding-top: calc(16px + var(--bt-nav-h) + var(--bt-row-h) + 12px); }

@media (prefers-reduced-motion: reduce) {
  .bt-sub, .bt-row, .bt-menu { transition: none; }
}