/* ░░░░░ Links Azul — by Aviate Roster ░░░░░
   Brand-aligned (dark + #3B82F6 + Plus Jakarta Sans), with a JetBrains Mono
   "cockpit/instrument" accent. Refined-minimal, not maximalist. */

:root {
  --bg:            #0A0E1A;
  --bg-section:    #0F1320;
  --surface:       #141828;
  --surface-alt:   #1A2236;
  --surface-hover: rgba(255,255,255,.045);
  --text:          #E2E8F0;
  --text-muted:    #94A3B8;
  --text-faint:    #5E7A99;
  --primary:       #3B82F6;
  --primary-hover: #60A5FA;
  --border:        rgba(255,255,255,.07);
  --border-hover:  rgba(255,255,255,.16);
  --ring:          rgba(59,130,246,.45);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-full: 9999px;
  --font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --header-h: 56px;
  --dock-h: 64px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }  /* class display rules must not override the hidden attribute */
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + var(--dock-h) + 12px); -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
::selection { background: rgba(59,130,246,.3); }

/* ── Atmosphere ── */
.bg-atmosphere {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(900px 500px at 78% -8%, rgba(59,130,246,.12), transparent 60%),
    radial-gradient(700px 600px at 5% 8%, rgba(59,130,246,.06), transparent 55%);
}
.bg-atmosphere::after {
  content: ""; position: absolute; inset: 0; opacity: .025;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Header ── */
.site-header {
  position: sticky; top: 0; z-index: 40;
  padding: 0 max(16px, env(safe-area-inset-left));
  background: rgba(10,14,26,.72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--border);
}
/* Inner column matches the search/content width (720px centered) so header
   elements don't sit at the screen extremities on desktop. */
.header-inner {
  max-width: 720px; margin: 0 auto; height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.header-actions { display: flex; align-items: center; gap: 10px; flex: none; }
.early-access-cta {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .82rem; font-weight: 600; color: #fff; white-space: nowrap;
  padding: 8px 16px; border-radius: var(--radius-full); background: var(--primary);
  box-shadow: 0 2px 12px rgba(59,130,246,.25);
  transition: background .15s ease, transform .15s ease;
}
.early-access-cta:hover { background: var(--primary-hover); transform: translateY(-1px); }
.early-access-cta:active { transform: translateY(0); }
.brand { display: inline-flex; align-items: center; gap: 9px; }
.brand-mark { display: block; }
.brand-name { font-weight: 800; font-size: 1.06rem; letter-spacing: -.02em; }
.brand-name-accent { color: var(--primary); }
.install-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .8rem; font-weight: 600; color: var(--primary-hover);
  padding: 7px 12px; border-radius: var(--radius-full);
  border: 1px solid rgba(59,130,246,.35); background: rgba(59,130,246,.08);
  transition: background .15s ease, transform .15s ease;
}
.install-btn:hover { background: rgba(59,130,246,.16); }
.install-btn:active { transform: scale(.96); }

/* ── Search dock ── */
.search-dock {
  position: sticky; top: var(--header-h); z-index: 35;
  padding: 12px max(16px, env(safe-area-inset-left));
}
/* Progressive blur: the backdrop-filter layer is masked so the blur AND the dark
   overlay fade out smoothly below the bar (no hard edge). Extends past the dock
   so the fade lands on the content. The search pill sits above it (z-index). */
.search-dock::before {
  content: ""; position: absolute; inset: 0; bottom: -30px; z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(10,14,26,.92) 30%, rgba(10,14,26,.5) 66%, rgba(10,14,26,0) 100%);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 52%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 52%, transparent 100%);
}
.search-wrap {
  position: relative; z-index: 1;
  max-width: 720px; margin: 0 auto;
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-full); padding: 0 14px; height: 48px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.search-wrap:focus-within { border-color: var(--primary); box-shadow: 0 0 0 4px var(--ring); }
.search-glyph { color: var(--text-faint); flex: none; }
.search-wrap:focus-within .search-glyph { color: var(--primary-hover); }
#search {
  flex: 1; min-width: 0; height: 100%; border: none; outline: none;
  background: none; color: var(--text); font-size: 1rem; font-weight: 500;
}
#search::placeholder { color: var(--text-faint); }
#search::-webkit-search-cancel-button { display: none; }
.kbd-hint {
  font-family: var(--mono); font-size: .68rem; font-weight: 500;
  color: var(--text-muted); padding: 3px 7px; border-radius: 6px;
  border: 1px solid var(--border); background: var(--surface-alt); flex: none;
}
.search-clear { color: var(--text-faint); display: flex; padding: 4px; border-radius: 50%; }
.search-clear:hover { color: var(--text); background: var(--surface-hover); }

/* ── Content ── */
.content {
  max-width: 720px; margin: 0 auto;
  padding: 8px max(16px, env(safe-area-inset-left)) 40px;
}

/* Rails (Seus atalhos / Mais acessados) */
.rail-section { margin: 18px 0 6px; animation: rise .5s both; }
.rail-title {
  font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-muted); font-family: var(--mono);
  display: flex; align-items: center; gap: 7px; margin-bottom: 10px; padding-left: 2px;
}
.rail-icon { color: var(--primary-hover); font-family: var(--font); }
.rail {
  display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 6px; margin: 0 -4px; scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail-card {
  scroll-snap-align: start; flex: 0 0 auto;
  display: flex; flex-direction: column; gap: 6px; min-width: 140px; max-width: 200px;
  padding: 12px 14px; border-radius: var(--radius-md);
  background: var(--surface); border: 1px solid var(--border);
  transition: border-color .15s ease, transform .15s ease, background .15s ease;
}
.rail-card:hover { border-color: var(--border-hover); transform: translateY(-2px); }
.rail-card:active { transform: translateY(0); }
.rail-rank { font-family: var(--mono); font-size: .72rem; color: var(--primary-hover); font-weight: 700; }
.rail-card-title { font-size: .9rem; font-weight: 600; line-height: 1.25; }

/* Category */
.category {
  margin-top: 26px;
  /* Skip rendering off-screen categories during scroll (big perf win, no visual
     change). contain-intrinsic-size reserves height so the scrollbar is stable. */
  content-visibility: auto;
  contain-intrinsic-size: auto 360px;
}
.category-head {
  display: flex; align-items: center; gap: 9px; margin-bottom: 8px; padding-left: 2px;
}
.cat-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; box-shadow: 0 0 10px currentColor; }
.category-name { font-size: 1.02rem; font-weight: 800; letter-spacing: -.015em; }
.category-count { font-family: var(--mono); font-size: .72rem; color: var(--text-faint); margin-left: auto; }

/* Link list */
.link-list { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: rgba(255,255,255,.012); }
.link-row {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 14px 14px; border-bottom: 1px solid var(--border);
  transition: background .14s ease;
}
.link-row:last-child { border-bottom: none; }
.link-row:hover, .link-row:focus-visible { background: var(--surface-hover); outline: none; }
.link-row:focus-visible { box-shadow: inset 0 0 0 2px var(--ring); }
.row-accent { width: 3px; align-self: stretch; border-radius: 2px; flex: none; opacity: .65; }
.row-body { flex: 1; min-width: 0; }
.row-title { font-size: .95rem; font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.row-badge {
  font-family: var(--mono); font-size: .62rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  padding: 2px 6px; border-radius: 5px; color: var(--text-muted);
  border: 1px solid var(--border); background: var(--surface-alt);
}
.row-new {
  color: #34D399; border-color: rgba(16,185,129,.4); background: rgba(16,185,129,.14);
  text-transform: uppercase;
}
.row-sub { font-size: .76rem; color: var(--text-faint); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-icon { color: var(--text-faint); flex: none; transition: transform .18s ease, color .15s ease; }
.link-row:hover .row-icon.ext { transform: translate(2px,-2px); color: var(--primary-hover); }
.row-icon.chev { transition: transform .25s ease; }
.link-row[aria-expanded="true"] .row-icon.chev { transform: rotate(180deg); color: var(--primary-hover); }
.row-share {
  flex: none; color: var(--text-faint); padding: 7px; border-radius: 50%;
  opacity: 0; transition: opacity .15s ease, color .15s ease, background .15s ease;
}
.link-row:hover .row-share, .row-share:focus-visible { opacity: 1; }
.row-share:hover { color: var(--primary-hover); background: var(--surface-hover); }
@media (hover: none) { .row-share { opacity: .8; } }

/* Guide accordion */
.guide-panel { overflow: hidden; height: 0; transition: height .28s ease; background: rgba(0,0,0,.18); }
.guide-inner { padding: 4px 16px 18px 30px; }
.guide-intro { font-size: .88rem; color: var(--text-muted); margin: 8px 0 14px; }
.guide-sec { margin-bottom: 14px; animation: rise .35s both; }
.guide-sec-title { font-size: .76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--primary-hover); margin-bottom: 6px; }
.guide-bullets { list-style: none; display: flex; flex-direction: column; gap: 5px; }
.guide-bullets li { font-size: .87rem; color: var(--text); padding-left: 16px; position: relative; }
.guide-bullets li::before { content: "›"; position: absolute; left: 2px; color: var(--text-faint); }
.copy-chip {
  display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: .82rem;
  padding: 4px 9px; border-radius: 7px; background: var(--surface-alt); border: 1px solid var(--border);
  color: var(--text); transition: border-color .15s ease, background .15s ease;
}
.copy-chip:hover { border-color: var(--primary); background: rgba(59,130,246,.1); }
.copy-chip svg { color: var(--text-faint); }
.guide-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.guide-btn {
  display: inline-flex; align-items: center; gap: 7px; font-size: .84rem; font-weight: 600;
  padding: 9px 14px; border-radius: var(--radius-full);
}
.guide-btn.primary { background: var(--primary); color: #fff; }
.guide-btn.primary:hover { background: var(--primary-hover); }
.guide-btn.ghost { border: 1px solid var(--border-hover); color: var(--text-muted); }
.guide-btn.ghost:hover { color: var(--text); border-color: var(--primary); }
.guide-source { font-size: .74rem; color: var(--text-faint); margin-top: 12px; }
.guide-source a { color: var(--primary-hover); text-decoration: underline; text-underline-offset: 2px; }

/* Empty state */
.empty-state { text-align: center; padding: 60px 20px; color: var(--text-muted); }
.empty-state svg { color: var(--text-faint); margin-bottom: 16px; opacity: .6; }
.empty-state p { font-size: .95rem; }
.text-btn { color: var(--primary-hover); font-weight: 600; font-size: .9rem; margin-top: 10px; text-decoration: underline; text-underline-offset: 3px; }

/* Skeleton */
.skeleton { display: flex; flex-direction: column; gap: 10px; padding-top: 24px; }
.sk-row { height: 56px; border-radius: var(--radius-md); background: linear-gradient(90deg, var(--surface) 25%, var(--surface-alt) 50%, var(--surface) 75%); background-size: 200% 100%; animation: shimmer 1.3s infinite; }

/* Footer */
.site-footer { max-width: 720px; margin: 0 auto; padding: 32px max(16px, env(safe-area-inset-left)) calc(40px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); margin-top: 20px; }
.footer-cta {
  display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center;
  padding: 26px; border-radius: var(--radius-lg); margin-bottom: 28px;
  background: linear-gradient(135deg, rgba(59,130,246,.1), rgba(59,130,246,.03));
  border: 1px solid rgba(59,130,246,.22);
}
.footer-cta-text { font-size: 1.05rem; font-weight: 600; }
.cta-pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 0 24px; border-radius: var(--radius-full);
  background: var(--primary); color: #fff; font-weight: 600; font-size: .95rem;
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
  box-shadow: 0 4px 20px rgba(59,130,246,.25);
}
.cta-pill:hover { background: var(--primary-hover); transform: translateY(-1px); }
.cta-pill:active { transform: translateY(0); }
.footer-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; justify-content: center; }
.footer-logo-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; opacity: .85; }
.footer-logo-link:hover { opacity: 1; }
.footer-tagline { font-size: .82rem; color: var(--text-faint); }
.footer-badge { display: inline-block; transition: transform .15s ease; }
.footer-badge:hover { transform: scale(1.04); }
.footer-fine { font-size: .72rem; color: var(--text-faint); text-align: center; margin-top: 20px; line-height: 1.6; }

/* ── Command palette ── */
.palette { position: fixed; inset: 0; z-index: 80; display: flex; align-items: flex-start; justify-content: center; padding: 12vh 16px 16px; }
.palette-backdrop { position: absolute; inset: 0; background: rgba(5,8,16,.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: fade .15s ease; }
.palette-box {
  position: relative; width: 100%; max-width: 560px; background: var(--surface);
  border: 1px solid var(--border-hover); border-radius: var(--radius-lg);
  box-shadow: 0 24px 70px rgba(0,0,0,.6); overflow: hidden; animation: pop .18s ease;
}
.palette-search { display: flex; align-items: center; gap: 11px; padding: 14px 16px; border-bottom: 1px solid var(--border); color: var(--text-faint); }
#paletteInput { flex: 1; min-width: 0; border: none; outline: none; background: none; color: var(--text); font-size: 1.05rem; font-family: var(--font); }
.palette-list { list-style: none; max-height: 56vh; overflow-y: auto; padding: 6px; }
.palette-opt { display: flex; align-items: center; gap: 11px; padding: 11px 12px; border-radius: var(--radius-md); cursor: pointer; }
.palette-opt[aria-selected="true"] { background: rgba(59,130,246,.14); }
.palette-opt .po-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.palette-opt .po-title { font-size: .92rem; font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette-opt .po-cat { font-family: var(--mono); font-size: .68rem; color: var(--text-faint); }
.palette-empty { padding: 28px; text-align: center; color: var(--text-faint); font-size: .9rem; }

/* ── Toast ── */
.toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  z-index: 90; background: var(--surface-alt); border: 1px solid var(--border-hover);
  color: var(--text); font-size: .88rem; font-weight: 500; padding: 11px 18px;
  border-radius: var(--radius-full); box-shadow: 0 8px 30px rgba(0,0,0,.45);
  animation: toastIn .2s ease;
}

/* Search-hidden helpers */
[data-hidden="true"] { display: none !important; }

/* Animations */
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop { from { opacity: 0; transform: translateY(-8px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes shimmer { to { background-position: -200% 0; } }
@keyframes toastIn { from { opacity: 0; transform: translateX(-50%) translateY(8px); } to { opacity: 1; transform: translateX(-50%); } }

/* Staggered load for first categories */
/* Entrance animation only for the above-the-fold categories. Off-screen ones
   skip it so content-visibility doesn't replay it as a reveal during scroll. */
#catalog .category:nth-child(-n+4) { animation: rise .5s both; }
#catalog .category:nth-child(1) { animation-delay: .04s; }
#catalog .category:nth-child(2) { animation-delay: .08s; }
#catalog .category:nth-child(3) { animation-delay: .12s; }
#catalog .category:nth-child(4) { animation-delay: .16s; }

@media (min-width: 680px) {
  :root { --header-h: 60px; }
  .brand-name { font-size: 1.14rem; }
  .row-share { padding: 8px; }
}