html, body{margin:0;padding:0;}

/* --- Stability: prevent horizontal nudge when content height changes --- */
html{
  /* Reserve space for the vertical scrollbar to avoid content width shifts */
  scrollbar-gutter: stable;
}
@supports not (scrollbar-gutter: stable) {
  html{ overflow-y: scroll; } /* Fallback for older engines */
}
/* Avoid accidental horizontal jitter due to subpixel overflows */
body{ overflow-x: hidden; }


:root{
  --control-h: 38px;
  --bg:#0e1117;
  --bg-soft:#12161f;
  --text:#e6edf3;
  --muted:#a9b3c1;
  --accent1:#4f7cff;
  --accent2:#7a5cff;
  --accent3:#b445ff;
  --border:#1a2130;
  --border-strong:#0a0d13;
  --chip:#151a22;
  --chip-border:#20283a;
  --shadow-hi: rgba(255,255,255,0.05);
  --shadow-lo: rgba(0,0,0,0.6);
}

/* Light theme overrides */
:root[data-theme="light"]{
  --control-h: 38px;
  --bg:#f6f8fb;
  --bg-soft:#ffffff;
  --text:#0b1220;
  --muted:#495266;
  --accent1:#4f7cff;
  --accent2:#7a5cff;
  --accent3:#b445ff;
  --border:#dbe2ee;
  --border-strong:#cfd8e8;
  --chip:#f3f6fb;
  --chip-border:#e3e9f4;
  --shadow-hi: rgba(255,255,255,0.9);
  --shadow-lo: rgba(0,0,0,0.10);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:14px/1.5 "TASA Explorer", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;}

/* Global container keeps inner content aligned */
.container{max-width:1100px;margin:0 auto;padding:22px}

/* Full-width sticky header */
.site-header{
  position: sticky; top:0; z-index:30; width:100%;
  background: color-mix(in oklab, var(--bg) 100%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border-strong);
}
.header-inner{ display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; align-items:center; padding-top:12px; padding-bottom:10px; }

.brand-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.brand {
  margin: 0;
  font-size: 31.6px;
  letter-spacing: .5px;
  line-height: 1;
  display: inline-flex;   /* título e selo lado a lado */
  align-items: center;    /* centraliza verticalmente */
  gap: 6px;               /* espaço entre título e beta */
}

.brand-gradient {
  background: linear-gradient(90deg, var(--accent1), var(--accent2), var(--accent3));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  /* Logo: blur-to-focus + passing shine */
  /* Two background layers: [shine sweep] over [brand gradient] */
  background-image:
    linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 45%, rgba(255,255,255,0) 60%),
    linear-gradient(90deg, var(--accent1), var(--accent2), var(--accent3));
  background-size: 22% 100%, 100% 100%;
  background-position: -40% 0, 0 0;
  background-repeat: no-repeat;
  animation: logoFocus .85s ease-out 0s both, logoShine 1.1s ease-in-out .9s both;
  will-change: filter, opacity, background-position;
}

.byline {
  font-size: 12px;
  color: var(--muted);
}

.byline .bylink {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dashed var(--muted);
  opacity: .85;
}

.byline .bylink:hover {
  opacity: 1;
}

/* Selo BETA */
.beta-badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--accent1), var(--accent2), var(--accent3));
  color: #fff;
  transform: translateY(4px); 
}

.beta-badge .beta-icon {
  width: 10px;
  height: 10px;
  fill: currentColor;
}

.controls{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.mono{font-family:"TASA Explorer", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;}
input[type="search"], select{
  background: var(--bg-soft); color: var(--text); border: 1px solid var(--border);
  height: var(--control-h); padding: 0 12px; border-radius: 14px; outline: none; min-width: 220px;
  box-shadow: -3px -3px 6px var(--shadow-hi), 5px 5px 10px var(--shadow-lo);
  font-family:"TASA Explorer", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
select{min-width:180px}
.control-group{display:flex;gap:8px;align-items:center}
.toggle{
  background:var(--bg-soft); color:var(--text); border:1px solid var(--border);
  height: var(--control-h); padding: 0 12px; border-radius:14px; cursor:pointer;
  box-shadow: -3px -3px 6px var(--shadow-hi), 5px 5px 10px var(--shadow-lo);
  display:inline-flex; align-items:center; justify-content:center;
}
.toggle:active{ transform: translateY(1px); }

/* Categories & grid */
.category{margin:18px 0}
.category h2{margin:12px 4px;font-size:20px;color:#cfe7ff;opacity:.9}

/* Category heading icon */
.category h2 { display:flex; align-items:center; gap:8px; }
.cat-ico{ font-size:20px; line-height:1; display:inline-flex; align-items:center; justify-content:center; }

:root[data-theme="light"] .category h2{ color:#354f7a; opacity:0.9; }

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}

/* Cards */
.card{
  background: var(--bg-soft);
  border: 1px solid var(--border-strong);
  border-radius: 18px;
  padding: 12px;
  min-height: 90px;
  box-shadow:-3px -3px 6px var(--shadow-hi), 5px 5px 10px var(--shadow-lo);
  transition: transform .08s ease, box-shadow .12s ease;
}
.card:hover{ transform: translateY(-2px); box-shadow:-4px -4px 8px var(--shadow-hi), 6px 6px 12px var(--shadow-lo); }

.card .title-line{ position:relative; padding-right:28px; min-height:22px; margin:0 0 4px 0; font-size:15px; font-weight:700; letter-spacing:.2px; display:flex; align-items:center; gap:8px; white-space:normal; overflow:visible; text-overflow:clip; }
.title-line .paren{ font-weight:400; opacity:.9; }
.card .subtitle{ margin:0 0 8px 0; font-size:12px; color: var(--muted); font-weight:400; }

.card .actions{ display:none; }
.card .btn, .card .visit, .btn{
  display:inline-block; padding:6px 10px; border-radius:12px;
  border:none; background: #0f1520; color: var(--text);
  text-decoration:none; font-size:12px; margin:0;
  box-shadow: -2px -2px 4px var(--shadow-hi), 3px 3px 6px var(--shadow-lo);
  transition: transform .12s ease, box-shadow .12s ease, background .2s ease;
}
:root[data-theme="light"] .card .btn, :root[data-theme="light"] .card .visit, :root[data-theme="light"] .btn{ background:#e7eaf3; color:#182033; }
.card .btn:hover, .card .visit:hover, .btn:hover{
  transform: translateY(-1px) scale(1.02);
  background: linear-gradient(90deg,var(--accent1),var(--accent2));
  box-shadow: -3px -3px 6px var(--shadow-hi), 5px 5px 10px var(--shadow-lo);
}

/* Favicons */
.favicon{ width:20px; height:20px; flex:0 0 20px; border-radius:6px; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; background: var(--bg); border:1px solid var(--border); box-shadow: inset -1px -1px 2px var(--shadow-hi), inset 1px 1px 2px var(--shadow-lo); }
.favicon img{ width:100%; height:100%; display:block }

/* Dark theme: white background behind favicons for better contrast */
:root[data-theme="dark"] .favicon{
  background: #ffffff;
}

.favicon.fallback{ font-size:10px; color:var(--muted); }

/* Footer */
.footer{
  margin:28px 0 10px; opacity:.95; font-size:13px; text-align:center;
  border-top:1px solid var(--border-strong); padding-top:16px;
}
.footer-inner{ display:flex; flex-direction:column; gap:10px; align-items:center }
.footer-actions{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center }
.footer .btn.linkedin { 
  background:#0A66C2; 
  color:#fff; 
}
.btn.linkedin:hover{ 
  background: linear-gradient(90deg,#0A66C2,#5b8bd6); 
}

.footer .btn.share { 
  background:#b445ff; 
  color:#fff; 
}
.btn.share:hover{ 
  background: linear-gradient(90deg,#0A66C2,#5b8bd6); 
}

.footer-count {
  opacity:.8;
  font-size:12px;
  border-bottom: 1px solid var(--border-strong);
  padding-bottom: 10px;
  margin-bottom: 10px;
  width: 100%;
  text-align: center;
}

kbd{ background:#101725; padding:2px 6px; border-radius:6px; border:1px solid #2e3a4f; font-size:11px; }
:root[data-theme="light"] kbd{ background:#e8eefb; border-color:#d5dff2; color:#1a2a45; }

@media (max-width:600px){ .container{padding:16px} .brand{font-size:20px} }


/* Extra spacing between subtitle and action button */
.card .actions{ margin-top: 8px; }

/* Card entry animation */
@keyframes cardIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.card{ opacity: 0; animation: cardIn .28s ease both; }


/* Extra spacing between title and link buttons */
.card .actions{ margin-top: 14px; }

/* Ensure gradient hover in light theme too */
:root[data-theme="light"] .card .btn:hover,
:root[data-theme="light"] .card .visit:hover,
:root[data-theme="light"] .btn:hover{
  background: linear-gradient(90deg,var(--accent1),var(--accent2));
}

/* Identity font on buttons */
.btn, .visit{ font-family: "TASA Explorer", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* Footer project name bold already <strong>; just ensure style inherits */
.footer .proj-name{ font-weight: 700; }


/* Info tooltip */
.info{ position: relative; }
.info-btn{ display:inline-flex; align-items:center; justify-content:center; }
.tooltip{
  position:absolute; top:110%; right:0;
  min-width: 260px; max-width: 320px;
  background: var(--bg-soft); color: var(--text);
  border:1px solid var(--border); border-radius:12px;
  padding:10px 12px;
  box-shadow: -4px -4px 8px var(--shadow-hi), 6px 6px 12px var(--shadow-lo);
  font-size:12px; line-height:1.4;
  font-family:"TASA Explorer", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  opacity:0; transform: translateY(-4px);
  transition: opacity .15s ease, transform .15s ease;
  z-index: 40; pointer-events: none;
}
.info:hover .tooltip, .info:focus-within .tooltip{
  opacity:1; transform: translateY(0); pointer-events: auto;
}
.tooltip strong{ display:block; margin-bottom:6px; font-weight:700; }


/* Improve select arrow spacing and custom arrow */
select{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  padding-right: 34px; /* room for arrow */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='%23e6edf3'><path d='M7 10l5 5 5-5H7z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 16px center;
}
:root[data-theme="light"] select{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='%230b1220'><path d='M7 10l5 5 5-5H7z'/></svg>");
}

/* Increase spacing before action buttons a bit more */
.card .actions{ margin-top: 12px; }

/* Ensure hover gradient active in light theme as well */
:root[data-theme="light"] .btn:hover,
:root[data-theme="light"] .visit:hover{
  background: linear-gradient(90deg,var(--accent1),var(--accent2));
}

/* Share button and toggles use brand mono font */
.btn, .toggle, .visit, .mono{
  font-family:"TASA Explorer", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
}

/* Info tooltip */
.toggle.info{ padding:8px 10px; }
.infotooltip{
  position:absolute; right:0; top:100%; transform: translateY(8px);
  background: var(--bg-soft); color: var(--text); border:1px solid var(--border);
  box-shadow: -3px -3px 6px var(--shadow-hi), 5px 5px 10px var(--shadow-lo);
  border-radius: 12px; padding:10px 12px; min-width: 260px; max-width: 320px; text-align:left; white-space:pre-wrap;
  display:none; z-index:50;
  font-size:12px; line-height:1.4;
}
.control-group{ position: relative; } /* anchor for tooltip */
.control-group:hover #infoTip[aria-hidden="false"]{ display:block; }


/* Unified control sizes for identity */
:root{
  --ctrl-h: 38px;
  --ctrl-radius: 14px;
  --ctrl-pad-x: 12px;
  --ctrl-arrow-x: 16px;
}
.controls .mono,
.controls .toggle,
.controls select{
  font-family:"TASA Explorer", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.controls input[type="search"]{
  height: var(--ctrl-h);
  padding: 0 var(--ctrl-pad-x);
  border-radius: var(--ctrl-radius);
  display:inline-flex; align-items:center;
}
.controls select{
  height: var(--ctrl-h);
  line-height: var(--ctrl-h);
  padding: 0 calc(var(--ctrl-pad-x) + 22px) 0 var(--ctrl-pad-x);
  border-radius: var(--ctrl-radius);
  background-position: right var(--ctrl-arrow-x) center;
}
.controls .toggle{
  height: var(--ctrl-h);
  padding: 0 var(--ctrl-pad-x);
  border-radius: var(--ctrl-radius);
  display:inline-flex; align-items:center; justify-content:center;
}


/* Featured star badge */
.title-line{ display:flex; align-items:center; gap:8px; }
.featured-star{ position:absolute; right:0; top:0;
  margin-left:auto;
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:8px;
  font-size:12px; line-height:1;
  color:#ffd34d;
  border:1px solid var(--border-strong);
  background: var(--bg-soft);
  box-shadow: inset 1px 1px 2px var(--shadow-lo), inset -1px -1px 2px var(--shadow-hi);
}
:root[data-theme="light"] .featured-star{ position:absolute; right:0; top:0; color:#e0a800; }


/* Back-to-top button */
#toTopBtn{
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: 44px; height: 44px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--bg-soft);
  color: var(--text);
  display: grid; place-items: center;
  box-shadow:-4px -4px 8px var(--shadow-hi), 6px 6px 12px var(--shadow-lo);
  cursor: pointer;
  opacity: 0; pointer-events: none; transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease, box-shadow .18s ease, background .18s ease;
  z-index: 50;
}
#toTopBtn svg{ width: 18px; height: 18px; fill: currentColor; }
#toTopBtn.show{ opacity: 0.95; pointer-events: auto; transform: translateY(0); }
#toTopBtn:hover{
  background: linear-gradient(90deg,var(--accent1),var(--accent2),var(--accent3));
  color: #fff;
  box-shadow:-2px -2px 6px var(--shadow-hi), 4px 4px 10px var(--shadow-lo);
}

/* Toast */
#toast{
  position: fixed;
  left: 50%;
  bottom: 84px;
  transform: translate(-50%, 20px);
  background: var(--bg-soft);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 14px;
  box-shadow:-4px -4px 8px var(--shadow-hi), 6px 6px 12px var(--shadow-lo);
  opacity: 0; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 50;
}
#toast.show{ opacity: 0.98; pointer-events: auto; transform: translate(-50%, 0); }





/* Ajuste do ícone das âncoras */




/* Botão de âncora na identidade do site */
.cat-anchor {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  margin-left:8px;
  border-radius:10px;
  border:1px solid var(--border);
  background: var(--bg-soft);
  color: var(--text);
  box-shadow:-3px -3px 6px var(--shadow-hi), 4px 4px 8px var(--shadow-lo);
  transition: background .18s ease, color .18s ease, transform .15s ease, box-shadow .15s ease;
  cursor:pointer;
}
.cat-anchor:hover {
  background: linear-gradient(90deg,var(--accent1),var(--accent2),var(--accent3));
  color:#fff;
  transform: translateY(-1px);
  box-shadow:-2px -2px 5px var(--shadow-hi), 3px 3px 7px var(--shadow-lo);
}
.cat-anchor svg {
  width:14px;
  height:14px;
  display:block;
}



/* === Microtooltips for toggle buttons (theme & language) === */
.controls .toggle{ position: relative; }

/* Tooltip bubble */
.controls .toggle::after{
  content: attr(aria-label);
  position: absolute;
  top: calc(100% + 8px);  /* expand downward */
  left: 50%;
  transform: translate(-50%, -4px);
  background: var(--bg-soft);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px 8px;
  font-size: 11px;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: -3px -3px 6px var(--shadow-hi), 5px 5px 10px var(--shadow-lo);
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
  z-index: 60;
}

/* Tooltip arrow */
.controls .toggle::before{
  content: "";
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  width: 8px; height: 8px;
  background: var(--bg-soft);
  border-left: 1px solid var(--border);
  border-top: 1px solid var(--border);
  rotate: 45deg;
  box-shadow: -2px -2px 3px var(--shadow-hi);
  opacity: 0;
  transition: opacity .15s ease;
  z-index: 59;
}

/* Show on hover or keyboard focus */
.controls .toggle:hover::after,
.controls .toggle:focus-visible::after{
  opacity: 1;
  transform: translate(-50%, 0);
}
.controls .toggle:hover::before,
.controls .toggle:focus-visible::before{
  opacity: 1;
}

/* Only show for buttons with an aria-label (prevents empty tooltips) */
.controls .toggle[aria-label=""]::after,
.controls .toggle[aria-label=""]::before{
  display: none;
}


/* Categories gradient titles */
.category h2 .cat-title{
  background: linear-gradient(90deg,var(--accent1),var(--accent2),var(--accent3));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
:root[data-theme="light"] .category h2 .cat-title{
  background: linear-gradient(90deg,var(--accent1),var(--accent2),var(--accent3));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}



body.side-open .sidepush{ width: var(--side-w-open); }
/* ===== Side Push Sidebar ===== */
/* Sidebar arrow toggle button */
.side-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width: 36px; height: 36px; border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-soft); color: var(--text); cursor:pointer;
  box-shadow: -2px -2px 4px var(--shadow-hi), 3px 3px 6px var(--shadow-lo);
  font-size: 16px; line-height: 1;
}
.side-toggle:active{ transform: translateY(1px); }
.sidepush-top{ display:flex !important; }

:root{
  --side-w-closed: 68px;
  --side-w-open: 248px;
  --side-bg: color-mix(in oklab, var(--bg) 85%, black 15%);
  --side-border: var(--border-strong);
}
.sidepush{
  position: fixed; inset: 0 auto 0 0;
  width: var(--side-w-closed); background: var(--side-bg);
  border-right: 1px solid var(--side-border);
  z-index: 50;
  display: flex; flex-direction: column;
  transition: width .22s ease;
  box-shadow: 0 0 0 1px var(--border-strong);
}
.sidepush-top{
  position: sticky; top: 0;
  display:flex; align-items:center; gap:10px;
  height: 56px; padding: 0 12px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in oklab, var(--side-bg) 92%, transparent);
  backdrop-filter: blur(4px);
}
.sidepush-title{
  font-weight:700; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  opacity:.85;
}
.hamburger{
  display:inline-flex; align-items:center; justify-content:center;
  width: 36px; height: 36px; border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-soft); color: var(--text); cursor:pointer;
  box-shadow: -2px -2px 4px var(--shadow-hi), 3px 3px 6px var(--shadow-lo);
}
.hamburger:active{ transform: translateY(1px); }

/* Scroll area and dark scrollbar */
.sidepush-scroll{
  overflow: auto; padding: 10px 8px 16px; flex: 1 1 auto;
}
.sidepush-scroll::-webkit-scrollbar{ width: 10px; }
.sidepush-scroll::-webkit-scrollbar-track{ background: color-mix(in oklab, var(--side-bg) 80%, black 20%); }
.sidepush-scroll::-webkit-scrollbar-thumb{ background: color-mix(in oklab, var(--bg) 40%, white 5%); border-radius: 8px; }
.sidepush-scroll{ scrollbar-color: color-mix(in oklab, var(--bg) 40%, white 5%) color-mix(in oklab, var(--side-bg) 80%, black 20%); scrollbar-width: thin; }

.sidepush-menu{ list-style:none; margin:8px 0 0; padding:0; display:flex; flex-direction:column; gap:4px; }
.sidepush-item{
  display:flex; align-items:center; gap:10px;
  height: 40px; padding: 0 10px;
  border-radius: 12px; cursor:pointer;
  color: var(--text); text-decoration:none;
  border: 1px solid transparent;
}
.sidepush-item .ico{ width: 18px; height: 18px; display:inline-flex; align-items:center; justify-content:center; opacity:.9; }
.sidepush-item .label{ font-size: 13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sidepush-item:hover{
  background: color-mix(in oklab, var(--bg) 86%, var(--accent1) 4%);
  border-color: var(--border);
}
.sidepush-item.active{ background: color-mix(in oklab, var(--bg) 80%, var(--accent2) 6%); border-color: var(--border); }

/* Push effect */
.push-wrap{ margin-left: 0; transition: margin-left .22s ease; }
body.side-open 
body.side-open /* When closed, hide labels; when open, show labels */
.sidepush .label{ display:none; }
body.side-open .side-open 

/* Keep main content centered by compensating left gutter */
.push-wrap .container{ max-width: 1100px; margin-left: auto; margin-right: auto; }

@media (max-width: 800px){
  :root{ --side-w-open: 84vw; }
}


/* Material Symbols */


/* Hide sidebar brand when expanded */
body.side-open .sidepush-title{ display:none; }


/* Remove sidebar top bar (title + hamburger) */
/* removed: sidebar top was hidden */

/* Consistent anchor offset under sticky header */
section.category{ scroll-margin-top: 90px; }

/* removed: desktop force-open; now controlled by body.side-open */ body  }

/* Sidebar collapsed/expanded label visibility and width */
.sidepush .label{ display:none; }
/* removed duplicate closed width */
body.side-open 
body.side-open 

body.side-open 

body.side-open /* removed stray open width */

body.side-open .sidepush .label{ display:inline; }

body.side-open .push-wrap{ margin-left: var(--side-w-open); }


/* === FIXES 2025-09-10: Sidepush responsive, arrow button effect removed, lighter light theme === */

/* Lighter sidebar in light theme (near white) */
:root[data-theme="light"] {
  /* very light neutral background close to white */
  --side-bg: color-mix(in oklab, white 96%, #e7ecf4 4%);
  --side-border: color-mix(in oklab, #cfd7e4 80%, #000 20%);
}

/* Ensure variables exist and adapt on small screens */
:root {
  --side-w-closed: 68px;
  --side-w-open: 248px;
}
@media (max-width: 800px) {
  :root { --side-w-open: 84vw; }
}

/* Sidebar base + open width */
.sidepush{
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--side-w-closed);
  background: var(--side-bg);
  border-right: 1px solid var(--side-border);
  z-index: 50;
  display: flex;
  flex-direction: column;
  transition: width .22s ease;
}
body.side-open .sidepush{ width: var(--side-w-open); }

/* Push content to the right when open; snap back when closed */
.push-wrap{ margin-left: var(--side-w-closed); transition: margin-left .22s ease; }
body.side-open .push-wrap{ margin-left: var(--side-w-open); }

/* Show/hide labels correctly based on state */
.sidepush .label{ display:none; }
body.side-open .sidepush .label{ display:inline; }

/* Remove any "press" wobble on the arrow toggle */
.side-toggle{ transition: none; }
.side-toggle:active{ transform: none; }

/* Extra safety: prevent the arrow from rotating or shifting on hover */
.side-toggle:hover{ transform: none; }


/* === 2025-09-10 Responsive sidebar with media queries (desktop push, mobile overlay) === */

/* Desktop defaults already set above. Adjust open width on medium screens */
@media (max-width: 1024px) {
  :root { --side-w-open: min(44vw, 320px); }
}

/* Mobile: switch to overlay (no push) */
@media (max-width: 768px) {
  /* disable body push on mobile */
  .push-wrap{ margin-left: var(--side-w-closed); transition: margin-left .22s ease; }
body.side-open .push-wrap{ margin-left: var(--side-w-open); }

  /* Drawer behavior via translateX */
  .sidepush{
    width: min(92vw, 360px);
    transform: translateX(-100%);
    transition: transform .22s ease;
    box-shadow: none;
  }
  body.side-open .sidepush{
    transform: translateX(0);
    box-shadow: 0 0 0 1px var(--side-border), 0 18px 44px rgba(0,0,0,.28);
  }

  /* Avoid layout jank while closed */
  body:not(.side-open) .sidepush{ will-change: transform; }

  /* Prevent background scroll when open */
  body.side-open{ overflow: hidden; }

  /* Backdrop/scrim shown only on mobile */
  .side-scrim{
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
    z-index: 45; /* below sidebar (50), above content */
  }
  body.side-open .side-scrim{
    opacity: 1;
    pointer-events: auto;
  }

  /* Keep labels visible inside the open drawer */
  .sidepush .label{ display: none; }
  body.side-open .sidepush .label{ display: inline; }
}

/* Hide scrim by default on larger screens */
.side-scrim{ display: none; }

/* Motion safety */
@media (prefers-reduced-motion: reduce){
  .sidepush, .side-scrim, .push-wrap{ transition: none !important; }
}


/* === 2025-09-10 Tablet portrait = overlay (menu "some"), landscape = push === */

/* Portrait tablets up to 1024px use overlay like mobile */
@media (max-width: 1024px) and (orientation: portrait) {
  /* no push on portrait tablet */
  .push-wrap{ margin-left: var(--side-w-closed); transition: margin-left .22s ease; }
body.side-open .push-wrap{ margin-left: var(--side-w-open); }

  .sidepush{
    width: min(92vw, 380px);
    transform: translateX(-100%);
    transition: transform .22s ease;
    box-shadow: none;
  }
  body.side-open .sidepush{
    transform: translateX(0);
    box-shadow: 0 0 0 1px var(--side-border), 0 18px 44px rgba(0,0,0,.28);
  }

  /* scrim active in portrait tablet */
  .side-scrim{
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
    z-index: 45;
  }
  body.side-open .side-scrim{
    opacity: 1;
    pointer-events: auto;
  }

  /* labels only when open */
  .sidepush .label{ display: none; }
  body.side-open .sidepush .label{ display: inline; }
}

/* Remove visual border from the toggle arrow; keep focus outline for a11y */
.side-toggle{
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}
.side-toggle:focus-visible{ outline: 2px solid var(--side-border); outline-offset: 2px; }






/* === 2025-09-10: Updated gradients with lighter/rosier tones === */
.sidepush{
  background:
    linear-gradient(to bottom, rgba(30,40,60,0.45), rgba(40,30,40,0.45)),
    var(--side-bg);
}

:root[data-theme="light"] .sidepush{
  background:
    linear-gradient(to bottom, rgba(100,160,255,0.20), rgba(230,90,150,0.20)),
    var(--side-bg);
}
/* === end gradients === */



/* Sombra leve nos ícones da barra lateral */
.cat-ico {
  text-shadow: 1px 1px 2px rgba(0,0,0,0.4);
}


/* Ícones da barra lateral */
.ico {
  text-shadow: 1px 1px 2px rgba(0,0,0,0.6);
}
:root[data-theme="light"] .ico {
  text-shadow: 1px 1px 2px rgba(150,150,150,0.4);
}


/* === 2025-09-11: Sidebar selected item styled like .controls (neumorphic) === */
.sidepush-menu .sidepush-item.active{
  background: var(--bg-soft);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: -3px -3px 6px var(--shadow-hi), 5px 5px 10px var(--shadow-lo);
  transform: translateY(0); /* keep steady */
}
.sidepush-menu .sidepush-item.active .label{ opacity: 1; }
.sidepush-menu .sidepush-item:focus-visible{
  outline: 2px solid var(--border);
  outline-offset: 2px;
  border-radius: 12px;
}


/* === 2025-09-11: Neumorphism fine-tune (large blocks) ===
   Goal: light & shadow a bit closer (smaller offset/blur) on big surfaces.
   Small elements keep current values. */
input[type="search"],
select{
  box-shadow: -2px -2px 4px var(--shadow-hi), 3px 3px 6px var(--shadow-lo);
}

.card{
  box-shadow: -2px -2px 4px var(--shadow-hi), 3px 3px 6px var(--shadow-lo);
}
.card:hover{
  box-shadow: -3px -3px 6px var(--shadow-hi), 5px 5px 10px var(--shadow-lo);
}

.sidepush-menu .sidepush-item.active{
  box-shadow: -2px -2px 4px var(--shadow-hi), 3px 3px 6px var(--shadow-lo);
}

/* Keep tooltip/btn etc. as-is (small items) */

@keyframes logoFocus{
  0% { filter: blur(10px); opacity: 0; }
  100% { filter: blur(0); opacity: 1; }
}

@keyframes logoShine{
  0% { background-position: -60% 0, 0 0; }
  100% { background-position: 160% 0, 0 0; }
}


/* --- Fix unwanted left white space introduced by previous patch --- */
html, body {
  margin-left: 0 !important;
  padding-left: 0 !important;
}


/* Tighten space between footer lead and bookmark/share note */
.footer-lead{ margin: 0 0 4px 0; }
.footer-note{ margin: 2px 0 0 0; }

/* Separator next to counter */
.footer-count .sep{ margin: 0 6px; opacity: .6; }

/* PWA install button */
.pwa-install{position:fixed;right:16px;bottom:16px;padding:.6rem .9rem;border-radius:14px;border:1px solid rgba(0,0,0,.12);box-shadow:0 8px 24px rgba(0,0,0,.12);background:color-mix(in srgb, Canvas 96%, transparent);color:CanvasText;cursor:pointer;z-index:9999}
@media (prefers-color-scheme: dark){
  .pwa-install{border-color: rgba(255,255,255,.18);background:color-mix(in srgb, Canvas 88%, transparent)}
}

/* === 2025-09-11 FIX: remove left gap when sidebar overlays on small screens === */
@media (max-width: 768px){
  .push-wrap,
  body.side-open .push-wrap{
    margin-left: 0 !important; /* content should not be pushed on mobile overlay */
  }
}
@media (max-width: 1024px) and (orientation: portrait){
  .push-wrap,
  body.side-open .push-wrap{
    margin-left: 0 !important; /* portrait tablets use overlay, no left gap */
  }
}

/* Brand link: keep text gradient on inner span and neutralize link styles */
.brand a,
.brand .brand-link{
  text-decoration: none;
  color: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.brand .brand-link:focus-visible{
  outline: 2px solid var(--accent2);
  outline-offset: 2px;
}




/* === Superbar toggle icons (mobile only) === */
@media (max-width: 720px){
  .superbar-toggle{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
  }
  .superbar-toggle .icon-burger{
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    width: 18px;
    height: 16px;
  }
  .superbar-toggle .icon-burger i{
    display: block;
    width: 100%;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
  }
  .superbar-toggle .icon-close{
    display: none;
    font-size: 20px;
    line-height: 1;
  }
  /* When menu is open, swap icons */
  .superbar.is-open .icon-burger,
  .superbar.open .icon-burger{ display: none; }
  .superbar.is-open .icon-close,
  .superbar.open .icon-close{ display: inline-block; }
  /* Hide any legacy arrow if present */
  .superbar-toggle .arrow{ display: none !important; }
}
/* ===== Super-bar (multi-library tabs) ===== */
.superbar{
  position: sticky;
  top: 0;
  z-index: 50; /* above site-header */
  width: 100%;
  /* slightly subtler than themes: mix bg with 100% and transparent to soften */
  background: color-mix(in oklab, var(--bg) 100%, transparent);
}

.superbar-list{
  /* 8 equal columns, no gaps, full-bleed */
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;
}

.superbar-item{ /* flat: no borders, no shadows, no bevel */
  min-height: 37px;
}

.superbar-item a{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  text-decoration: none;
  /* Typography inherits 100% from project */
  font: inherit;
  color: var(--text);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 6px 8px;
  opacity: .92; /* subtle presence */
}

/* Active tab highlighted (still flat) */
.superbar-item.active a,
.superbar-item a[aria-current="page"]{
  opacity: 1;
  font-weight: 700;
}

/* Fixed colors per tab: discrete steps from accent1 -> accent2 (8 blocks) */
:root{
  --lib1: var(--accent1);
  --lib2: color-mix(in oklab, var(--accent1) 86%, var(--accent2) 14%);
  --lib3: color-mix(in oklab, var(--accent1) 72%, var(--accent2) 28%);
  --lib4: color-mix(in oklab, var(--accent1) 58%, var(--accent2) 42%);
  --lib5: color-mix(in oklab, var(--accent1) 42%, var(--accent2) 58%);
  --lib6: color-mix(in oklab, var(--accent1) 28%, var(--accent2) 72%);
  --lib7: color-mix(in oklab, var(--accent1) 14%, var(--accent2) 86%);
  --lib8: var(--accent2);
}

/* Assign blocks without gaps; the color of one ends where the other begins */
.superbar-item:nth-child(1){ background: var(--lib1); }
.superbar-item:nth-child(2){ background: var(--lib2); }
.superbar-item:nth-child(3){ background: var(--lib3); }
.superbar-item:nth-child(4){ background: var(--lib4); }
.superbar-item:nth-child(5){ background: var(--lib5); }
.superbar-item:nth-child(6){ background: var(--lib6); }
.superbar-item:nth-child(7){ background: var(--lib7); }

/* Improve contrast for light & dark automatically */
:root[data-theme="light"] .superbar-item a{ color: #0b1220; }
:root[data-theme="dark"]  .superbar-item a{ color: #ffffff; }

/* Ensure the site header sits below the superbar yet remains sticky */
.site-header{ top: 0; z-index: 40; }

@media (max-width: 720px){
  .superbar-item{ min-height: 39px; }
  .superbar-item a{ padding: 4px 6px; }
}


/* Ensure superbar not hidden behind sidebar and adapts with sidebar states */
body {
  padding-top: calc(37px + var(--header-offset, 0px));
}
.layout-has-sidebar .superbar {
  left: 0;
  width: 100%;
  position: fixed;
}


/* Superbar adapts to sidebar width (expanded/collapsed) */
.superbar{
  left: var(--sidepush-w, 0px);
  width: calc(100% - var(--sidepush-w, 0px));
}



/* Responsive superbar dropdown for narrow screens */
@media (max-width: 600px){
  .superbar-list{
    display: none;
    flex-direction: column;
    width: 100%;
  }
  .superbar.open .superbar-list{
    display: flex;
  }
  .superbar-toggle{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    cursor: pointer;
    background: var(--lib1);
    color: var(--text);
  }
  .superbar-toggle span.arrow{
    display:inline-block;
    transform: rotate(0deg);
    transition: transform 0.2s ease;
  }
  .superbar.open .superbar-toggle span.arrow{
    transform: rotate(90deg);
  }
}



/* ===== Super-bar (v2) adjustments ===== */
:root{ --superbar-h: 29px; } /* +3px from previous 34px */

.superbar{
  position: fixed; /* always fixed at the very top */
  top: 0;
  left: 0;
  right: 0;
  z-index: 9000; /* above sidebar and header */
}

/* Ensure layout accounts for the fixed bar height */
body{ padding-top: var(--superbar-h); }

/* Sidebars (expanded or collapsed) should start below the superbar */
.sidepush, .sidebar, .site-sidebar{
  top: var(--superbar-h) !important;
}

/* Grid list keeps 8 equal tabs, no gaps. Height increased by +3px via min-height */
.superbar-list{
  grid-template-columns: repeat(7, 1fr);
}

.superbar-item{ min-height: calc(var(--superbar-h)); }

.superbar-item a{
  height: calc(var(--superbar-h));
}

/* Compact toggle for small screens */
.superbar-toggle{
  display: none;
  position: relative;
  width: 100%;
  height: var(--superbar-h);
  padding: 0 12px;
  background: transparent;
  border: 0;
  font: inherit;
  color: var(--text);
  text-align: left;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.superbar-toggle .chevron{
  display: inline-block;
  transition: transform .2s ease;
}

/* When open */
.superbar.is-open .superbar-toggle .chevron{ transform: rotate(90deg); }

@media (max-width: 720px){
  .superbar-toggle{ display: flex; }
  .superbar-list{
    display: none;
    position: fixed;
    top: var(--superbar-h);
    left: 0;
    right: 0;
    z-index: 8999;
    /* vertical menu (no gaps) */
    grid-template-columns: 1fr !important;
  }
  .superbar.is-open .superbar-list{ display: grid; }
  .superbar-item{ min-height: 40px; }
  .superbar-item a{ height: 40px; justify-content: flex-start; padding: 0 16px; }
}

/* Ensure header below bar doesn't hide; if header is sticky, offset it */
.site-header{ position: sticky; top: var(--superbar-h); z-index: 8000; }



/* === Super-bar full-bleed fix === */
html, body {
  margin: 0 !important;
  padding: 0;
}
.superbar {
  left: 0 !important;
  right: 0 !important;
  margin: 0 !important;
  width: 100vw !important;
}



/* ===== Super-bar (v2.1) full-bleed fix ===== */
.superbar{
  left: 0 !important;
  right: 0 !important;
  width: 100vw !important;      /* occupy entire viewport width */
  margin: 0 !important;         /* kill any inherited spacing */
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.superbar-list{
  margin: 0 !important;
  padding: 0 !important;
}

.superbar-item{
  margin: 0 !important;
}

/* Mobile dropdown: ensure full width as well */
@media (max-width: 720px){
  .superbar.is-open .superbar-list{
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
  }
}



/* === Super-bar v3 full-bleed fix === */
html, body{
  margin: 0;
  padding: 0;
}
.superbar{
  left: 0;
  right: 0;
  width: 100vw; /* ensure full viewport width */
}
body{ padding-top: var(--superbar-h); }



/* ===== Super-bar (v2.1) edge-hug fix ===== */
html, body{
  margin: 0 !important; /* kill default UA margin to avoid top-left gap */
}

.superbar{
  left: 0;
  right: 0;
  top: 0;
  margin: 0;
}

.superbar, .superbar-list{
  border: 0;
  margin: 0;
  padding-inline: 0;
}

.superbar-list{
  width: 100%;
}

/* Ensure the dropdown list on mobile also aligns flush with viewport edges */
@media (max-width: 720px){
  .superbar-list{
    left: 0;
    right: 0;
  }
}



/* ===== Super-bar active item highlight ===== */
.superbar-item.active a,
.superbar-item a[aria-current="page"]{
  outline: 2px solid rgba(255,255,255,0.8);
  outline-offset: -2px;
  box-shadow: inset 0 -3px 0 rgba(255,255,255,0.8);
  font-weight: 700;
}
:root[data-theme="light"] .superbar-item.active a{
  outline: 2px solid rgba(0,0,0,0.4);
  box-shadow: inset 0 -3px 0 rgba(0,0,0,0.4);
}



/* ===== Super-bar active item highlight ===== */
.superbar-item.active a,
.superbar-item a[aria-current="page"],
.superbar-item a[aria-current="true"]{
  outline: 2px solid var(--text);
  outline-offset: -2px;
  font-weight: 700;
  filter: brightness(1.15);
  /* subtle glow for dark mode */
  box-shadow: 0 0 6px rgba(0,0,0,0.15);
  transition: outline-color 0.2s ease, filter 0.2s ease;
}



/* ===== Super-bar active item darker highlight ===== */
.superbar-item.active,
.superbar-item a[aria-current="page"] {
  filter: brightness(0.85); /* subtle darker highlight */
}

.superbar-item.active a,
.superbar-item a[aria-current="page"] {
  font-weight: 700;
  opacity: 1;
}



/* ===== Super-bar active item darker highlight ===== */
.superbar-item.active,
.superbar-item a[aria-current="page"]{
  filter: brightness(85%); /* darker to stand out */
}



/* ===== Super-bar active item darker highlight ===== */
.superbar-item.active{
  filter: brightness(85%); /* subtle darker shade of its own background */
}
.superbar-item.active a{
  opacity: 1;
  font-weight: 700;
}


/* === Fix: remove inner line/outline on selected Superbar tab === */
.superbar-item.active a,
.superbar-item a[aria-current="page"],
.superbar-item a[aria-current="true"]{
  outline: none !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
  border: none !important;
}



/* === Super-bar ACTIVE tab: vertical gradient that blends into site background === */
/* Remove previous darkening so the gradient is visible */
.superbar-item.active,
.superbar-item a[aria-current="page"]{
  filter: none !important;
}

/* Base: ensure flat, no outlines/borders for active link */
.superbar-item.active a,
.superbar-item a[aria-current="page"],
.superbar-item a[aria-current="true"]{
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
  opacity: 1;
  font-weight: 700;
}

/* Per-tab gradient: from its solid band color at top to a mix with the page background at bottom */
.superbar-item.active:nth-child(1){ 
  background: linear-gradient(to bottom, var(--lib1) 0%, color-mix(in oklab, var(--lib1) 20%, var(--bg) 80%) 100%) !important; 
}
.superbar-item.active:nth-child(2){ 
  background: linear-gradient(to bottom, var(--lib2) 0%, color-mix(in oklab, var(--lib2) 20%, var(--bg) 80%) 100%) !important; 
}
.superbar-item.active:nth-child(3){ 
  background: linear-gradient(to bottom, var(--lib3) 0%, color-mix(in oklab, var(--lib3) 20%, var(--bg) 80%) 100%) !important; 
}
.superbar-item.active:nth-child(4){ 
  background: linear-gradient(to bottom, var(--lib4) 0%, color-mix(in oklab, var(--lib4) 20%, var(--bg) 80%) 100%) !important; 
}
.superbar-item.active:nth-child(5){ 
  background: linear-gradient(to bottom, var(--lib5) 0%, color-mix(in oklab, var(--lib5) 20%, var(--bg) 80%) 100%) !important; 
}
.superbar-item.active:nth-child(6){ 
  background: linear-gradient(to bottom, var(--lib6) 0%, color-mix(in oklab, var(--lib6) 20%, var(--bg) 80%) 100%) !important; 
}
.superbar-item.active:nth-child(7){ 
  background: linear-gradient(to bottom, var(--lib7) 0%, color-mix(in oklab, var(--lib7) 20%, var(--bg) 80%) 100%) !important; 
}
.superbar-item.active:nth-child(8){ 
  background: linear-gradient(to bottom, var(--lib8) 0%, color-mix(in oklab, var(--lib8) 20%, var(--bg) 80%) 100%) !important; 
}

/* Light theme: boost contrast slightly by biasing toward lighter bg */
:root[data-theme="light"] .superbar-item.active:nth-child(1){
  background: linear-gradient(to bottom, var(--lib1) 0%, color-mix(in oklab, var(--lib1) 10%, var(--bg) 90%) 100%) !important;
}
:root[data-theme="light"] .superbar-item.active:nth-child(2){
  background: linear-gradient(to bottom, var(--lib2) 0%, color-mix(in oklab, var(--lib2) 10%, var(--bg) 90%) 100%) !important;
}
:root[data-theme="light"] .superbar-item.active:nth-child(3){
  background: linear-gradient(to bottom, var(--lib3) 0%, color-mix(in oklab, var(--lib3) 10%, var(--bg) 90%) 100%) !important;
}
:root[data-theme="light"] .superbar-item.active:nth-child(4){
  background: linear-gradient(to bottom, var(--lib4) 0%, color-mix(in oklab, var(--lib4) 10%, var(--bg) 90%) 100%) !important;
}
:root[data-theme="light"] .superbar-item.active:nth-child(5){
  background: linear-gradient(to bottom, var(--lib5) 0%, color-mix(in oklab, var(--lib5) 10%, var(--bg) 90%) 100%) !important;
}
:root[data-theme="light"] .superbar-item.active:nth-child(6){
  background: linear-gradient(to bottom, var(--lib6) 0%, color-mix(in oklab, var(--lib6) 10%, var(--bg) 90%) 100%) !important;
}
:root[data-theme="light"] .superbar-item.active:nth-child(7){
  background: linear-gradient(to bottom, var(--lib7) 0%, color-mix(in oklab, var(--lib7) 10%, var(--bg) 90%) 100%) !important;
}
:root[data-theme="light"] .superbar-item.active:nth-child(8){
  background: linear-gradient(to bottom, var(--lib8) 0%, color-mix(in oklab, var(--lib8) 10%, var(--bg) 90%) 100%) !important;
}


/* === 2025-09-16: Superbar active item — solid background + gradient text (matches brand) === */
/* Solid background in both themes (dark: #0e1117, light: #f6f8fb via var(--bg)) */
.superbar-item.active{
  background: var(--bg) !important;
}

/* Gradient text like .brand-gradient */
.superbar-item.active a{
  background-image:
    linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.0) 45%, rgba(255,255,255,0) 60%),
    linear-gradient(90deg, var(--accent1), var(--accent2), var(--accent3));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  opacity: 1;
  font-weight: 700;
}

/* Ensure non-active items keep normal text color */
.superbar-item:not(.active) a{
  -webkit-text-fill-color: initial;
  color: var(--text);
  background-image: none;
}


/* === 2025-09-16: Superbar hover effect === */
.superbar-item:hover {
  filter: brightness(1.2);
  transition: filter 0.2s ease;
}


/* === 2025-09-16: Superbar active item rounded bottom corners === */
.superbar-item.active {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}


/* === 2025-09-16: Superbar neighbor rounding around active item === */
/* Configurable radius */
:root { --superbar-radius: 10px; }

/* Ensure items don't show square bleed through rounded edges */
.superbar-item { 
  border-radius: 0; 
  background-clip: padding-box;
}

/* Active item gets rounded bottom corners */
.superbar-item.active{
  border-bottom-left-radius: var(--superbar-radius);
  border-bottom-right-radius: var(--superbar-radius);
}

/* Right neighbor of the active item: round bottom-left corner */
.superbar-item.active + .superbar-item{
  border-bottom-left-radius: var(--superbar-radius);
}

/* Left neighbor of the active item: round bottom-right corner
   Uses :has() for previous-sibling selection (supported in modern browsers). */
.superbar-item:has(+ .superbar-item.active){
  border-bottom-right-radius: var(--superbar-radius);
}


/* === 2025-09-16: Superbar ACTIVE item — remove any background gradients and use site background === */
/* Scope strictly to the currently active superbar item */
.superbar-item.active{
  /* flat background matching the site theme */
  background: var(--bg) !important; /* dark: #0e1117, light: #f6f8fb */
  background-image: none !important;
  filter: none !important;
}

/* Keep gradient text on the active item's label (already set elsewhere) */
.superbar-item.active a{
  /* do not touch text styles here; ensure no box effects sneak in */
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* Neighbor rounding behavior
   - Large screens: keep current neighbor rounding (no change)
   - Small screens (collapsed menu): disable rounding on neighbors only */
@media (max-width: 720px){
  .superbar-item.active + .superbar-item{
    border-bottom-left-radius: 0 !important;
  }
  .superbar-item:has(+ .superbar-item.active){
    border-bottom-right-radius: 0 !important;
  }
  /* Do NOT change the active item's own rounding */
}

/* Ensure non-active items do not inherit any stray backgrounds */
.superbar-item:not(.active){
  background-image: none;
}


/* === 2025-09-16 PATCH 2: Strict superbar active item fixes === */

/* Explicitly target light/dark themes */
html[data-theme='dark'] .superbar-item.active {
  background-color: #0e1117 !important;
  background-image: none !important;
}
html[data-theme='light'] .superbar-item.active {
  background-color: #f6f8fb !important;
  background-image: none !important;
}

/* Remove any pseudo-element gradient decorations */
.superbar-item.active::before,
.superbar-item.active::after {
  background: none !important;
  background-image: none !important;
}

/* Keep text gradient as is: do not override text-color */

/* Remove neighbor rounding in collapsed menu (max-width 720px) without :has */
@media (max-width: 720px){
  .superbar-item.active {
    border-radius: inherit !important; /* keep its own rounding */
  }
  .superbar-item.active + .superbar-item,
  .superbar-item.active + .superbar-item + .superbar-item {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
  }
  .superbar-item.active,
  .superbar-item.active ~ .superbar-item {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }
}


/* === 2025-09-16 PATCH 3: Nuke all active-item gradients and fix small-screen rounding === */

/* 1) Kill any per-tab gradient rules that use :nth-child on the active item */
.superbar-item.active:nth-child(1),
.superbar-item.active:nth-child(2),
.superbar-item.active:nth-child(3),
.superbar-item.active:nth-child(4),
.superbar-item.active:nth-child(5),
.superbar-item.active:nth-child(6),
.superbar-item.active:nth-child(7),
.superbar-item.active:nth-child(8),
.superbar-item.active:nth-child(n){
  background: var(--bg) !important;
  background-color: var(--bg) !important;
  background-image: none !important;
  filter: none !important;
}

/* Theme-accurate flat backgrounds */
html[data-theme='dark'] .superbar-item.active,
html[data-theme='dark'] .superbar-item.active:nth-child(n){
  background: #0e1117 !important;
  background-color: #0e1117 !important;
}
html[data-theme='light'] .superbar-item.active,
html[data-theme='light'] .superbar-item.active:nth-child(n){
  background: #f6f8fb !important;
  background-color: #f6f8fb !important;
}

/* Ensure no decorative layers survive */
.superbar-item.active::before,
.superbar-item.active::after{
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* 2) Small screens: disable rounding on neighbors (and only neighbors) reliably */
@media (max-width: 720px){
  /* Remove any inherited neighbor rounding rules by resetting all, then restore the active */
  .superbar-item{ border-radius: 0 !important; }
  .superbar-item.active{ border-radius: var(--superbar-radius) !important; }

  /* Extra safety: explicitly zero the immediate prev/next corners */
  .superbar-item.active + .superbar-item{ border-radius: 0 !important; }
  .superbar-item:has(+ .superbar-item.active){ border-radius: 0 !important; }
}

/* Do NOT touch gradient text styles on the active link; those are defined elsewhere */


/* === 2025-09-16 FINAL PATCH: Zero active-item own border-radius on small screens === */
@media (max-width: 720px){
  /* Force the active item itself to have square corners */
  .superbar-item.active{
    border-radius: 0 !important;
  }
}


/* === 2025-09-16 PATCH 4: Small-screen rounding stays ONLY on the active tab itself === */
@media (max-width: 720px){
  /* Zero any rounding on items and common children to avoid "migration" */
  .superbar-item,
  .superbar-item > a,
  .superbar-item > button,
  .superbar-item > span,
  .superbar-item > div{
    border-radius: 0 !important;
  }

  /* Keep rounding solely on the active item and mirror it to its direct child (anchor/button) */
  .superbar-item.active{
    border-radius: var(--superbar-radius) !important;
    overflow: hidden;                 /* prevents neighbor paint bleed */
    background-clip: padding-box;     /* confines background to own box */
    isolation: isolate;               /* isolates stacking context */
  }
  .superbar-item.active > a,
  .superbar-item.active > button,
  .superbar-item.active > span,
  .superbar-item.active > div{
    border-radius: inherit !important;
  }

  /* Belt-and-suspenders: make sure any following siblings are perfectly square */
  .superbar-item.active + .superbar-item,
  .superbar-item.active ~ .superbar-item{
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }
}


/* === 2025-09-16 PATCH 5: FORCE no-gradient on active tab + container-level small-screen rounding fix === */

/* Absolute specificity and theme-accurate, placed last */
html[data-theme='dark'] .superbar .superbar-list > li.superbar-item.active{
  background: #0e1117 !important;
  background-color: #0e1117 !important;
  background-image: none !important;
  filter: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
html[data-theme='light'] .superbar .superbar-list > li.superbar-item.active{
  background: #f6f8fb !important;
  background-color: #f6f8fb !important;
  background-image: none !important;
  filter: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

/* Ensure the active item never picks up color from nth-child blocks */
.superbar .superbar-list > li.superbar-item.active:nth-child(n){
  background: var(--bg) !important; /* will be overridden by theme rules above */
  background-image: none !important;
}

/* Safety: kill any pseudo-layer visuals on the active item */
.superbar .superbar-list > li.superbar-item.active::before,
.superbar .superbar-list > li.superbar-item.active::after{
  content: none !important;
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* MOBILE: stop rounding migration at the container level */
@media (max-width: 720px){
  .superbar, .superbar-list{
    border-radius: 0 !important;
    overflow: visible !important; /* avoid clipping illusions */
  }
  .superbar .superbar-list > li.superbar-item{ 
    border-radius: 0 !important; 
  }
  /* Only the active LI keeps the rounding; its direct child mirrors it */
  .superbar .superbar-list > li.superbar-item.active{
    border-radius: var(--superbar-radius) !important;
    overflow: hidden;
    background-clip: padding-box;
    isolation: isolate;
  }
  .superbar .superbar-list > li.superbar-item.active > *{
    border-radius: inherit !important;
  }
  /* All non-active descendants strictly square */
  .superbar .superbar-list > li.superbar-item:not(.active),
  .superbar .superbar-list > li.superbar-item:not(.active) *{
    border-radius: 0 !important;
  }
}


/* === 2025-09-16 PATCH 6: Super menu text color per theme === */
html[data-theme='light'] .superbar .superbar-list > li.superbar-item > a{
  color: #f6f8fb !important; /* light text on light theme for contrast */
}
html[data-theme='dark'] .superbar .superbar-list > li.superbar-item > a{
  color: #0e1117 !important; /* dark text on dark theme for contrast */
}


/* === 2025-09-16 PATCH 7: Superbar text bold === */
.superbar .superbar-list > li.superbar-item > a{
  font-weight: 600 !important; /* semi-bold for stronger visual weight */
}


/* Make entire card act as the "Acesse" button */
.card.card-link{
  transition: transform 120ms ease, box-shadow 120ms ease, background 160ms ease, color 120ms ease;
  display:block;
  text-decoration:none;
  color: inherit;
  cursor: pointer;
}

/* Hover/Focus: adopt the old button gradient and a subtle expansion */
\1
  transform: translateY(-2px) scale(1.015);
  box-shadow: -4px -4px 8px var(--shadow-hi), 6px 6px 12px var(--shadow-lo);
  outline: none;
}

/* Keep title/subtitle readable when gradient is active */
.card.card-link:hover .subtitle,
.card.card-link:focus-visible .subtitle{
  color: rgba(255,255,255,0.92);
}

/* Disabled state (items without URL) */
.card[aria-disabled="true"]{
  opacity: .6;
  cursor: not-allowed;
}


/* Reduced card size to match title proportions */
.card{
  padding: 14px 16px;
  font-size: 0.95rem;
}
.card .title-line{
  font-size: 1rem;
}
.card .subtitle{
  font-size: 0.85rem;
}


/* Press effect on active (mobile tap) */
.card.card-link:active{
  transform: translateY(-1px) scale(0.995);
}

/* Light theme: make text white on hover/focus */
:root[data-theme='light'] .card.card-link:hover,
:root[data-theme='light'] .card.card-link:focus-visible {
  color: #fff;
}
:root[data-theme='light'] .card.card-link:hover .subtitle,
:root[data-theme='light'] .card.card-link:focus-visible .subtitle {
  color: rgba(255,255,255,0.92);
}


/* Press effect on mobile/touch */
.card.card-link:active{
  transform: translateY(0) scale(0.995);
  box-shadow: 0 2px 6px var(--shadow-lo);
}


/* On LIGHT theme, make text white over the gradient on hover/focus for better contrast */
:root[data-theme="light"] .card.card-link:hover,
:root[data-theme="light"] .card.card-link:focus-visible{
  color: #fff;
}
:root[data-theme="light"] .card.card-link:hover .subtitle,
:root[data-theme="light"] .card.card-link:focus-visible .subtitle{
  color: rgba(255,255,255,0.92);
}


/* Reduce card size for better proportion with titles */
.card.card-link{
  padding: 0.75rem 1rem;
  font-size: 0.95rem;
}

/* Press effect for mobile tap */
.card.card-link:active{
  transform: translateY(-1px) scale(0.995);
  transition: transform 0.1s ease-in-out;
}

/* Light theme: white text on hover */
body[data-theme='light'] .card.card-link:hover,
body[data-theme='light'] .card.card-link:focus-visible{
  color: #fff;
}


/* === Cards: compact sizing & interactions === */

/* 1) Compact card size so they feel proportional to titles */
.card{
  padding: 10px;            /* was 12px */
  min-height: 74px;         /* down from 90px for tighter layout */
}

/* Slightly compact title/subtitle spacing */
.card .title-line{ margin-bottom: 4px; }
.card .subtitle{ margin-bottom: 6px; }

/* 2) Mobile/press feedback on tap */
.card.card-link:active{
  transform: translateY(0) scale(0.995);
  box-shadow:-2px -2px 5px var(--shadow-hi), 4px 4px 9px var(--shadow-lo);
  transition: transform .04s ease, box-shadow .06s ease;
}

/* 3) Light theme: force white text on hover/focus so the gradient reads like a button */
:root[data-theme="light"] .card.card-link:hover,
:root[data-theme="light"] .card.card-link:focus-visible{
  color: #fff;
}
:root[data-theme="light"] .card.card-link:hover .title-line,
:root[data-theme="light"] .card.card-link:hover .subtitle,
:root[data-theme="light"] .card.card-link:focus-visible .title-line,
:root[data-theme="light"] .card.card-link:focus-visible .subtitle{
  color: #fff;
}

/* Ensure favicon and any inline icons don't get dimmed on hover */
:root[data-theme="light"] .card.card-link:hover .favicon,
:root[data-theme="light"] .card.card-link:focus-visible .favicon{
  filter: none;
}


/* === Card size adjustment === */
.card.card-link {
  padding: 0.6rem 1rem;
  min-height: auto;
  height: auto;
  border-radius: 8px;
}

/* Make cards appear more line-like */
.card.card-link .title-line,
.card.card-link .subtitle {
  line-height: 1.2;
}

/* === Press effect for mobile === */
.card.card-link:active {
  transform: scale(0.995);
  transition: transform 0.08s ease-out;
}

/* === Light theme hover: white text === */
:root[data-theme="light"] .card.card-link:hover,
:root[data-theme="light"] .card.card-link:focus-visible {
  color: #fff;
}
:root[data-theme="light"] .card.card-link:hover .subtitle,
:root[data-theme="light"] .card.card-link:focus-visible .subtitle {
  color: rgba(255,255,255,0.92);
}


/* === Slimmer card layout: proportionate to titles; more like lines === */
.card.card-link{
  padding: 8px 12px;
  min-height: 48px;
}
.card .title-line{ min-height: 0; }
.card .subtitle{ margin: 2px 0 0; }

/* === Press effect for touch/active === */
.card.card-link:active{
  transform: translateY(0) scale(0.995);
  box-shadow: -2px -2px 4px var(--shadow-hi), 4px 4px 8px var(--shadow-lo);
  transition: transform .06s ease-out, box-shadow .06s ease-out;
}

/* === Light theme: make text white on hover/focus for better contrast === */
[data-theme="light"] .card.card-link:hover,
[data-theme="light"] .card.card-link:focus-visible{
  color: #fff;
}


/* === Tweak: slightly smaller card height/padding === */
.card.card-link{
  padding: 6px 10px;
  min-height: 38px;
}

/* === Ensure hover gradient is preserved and vivid === */
.card.card-link:hover,
.card.card-link:focus-visible{
  background: linear-gradient(90deg,var(--accent1),var(--accent2),var(--accent3));
  color: #fff;
}


/* === Final tweak: tighten vertical spacing inside card for harmony === */
.card.card-link{
  padding-top: 4px;
  padding-bottom: 4px;
}
.card .title-line{ margin: 0; }
.card .subtitle{ margin: 0; }


/* === Harmonize internal spacing: reduce excess bottom margins === */
.card .title-line{
  margin: 0 0 2px 0;
}
.card .subtitle{
  margin: 0;
}


/* === Symmetric card spacing === */
.card.card-link{
  padding: 6px 8px; /* equal top/bottom for perfect symmetry */
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.card .title-line,
.card .subtitle{
  margin: 0; /* remove all internal margins */
}

/* Category separator line with site gradient */
.category-sep{
  height: 2px;
  width: 100%;
  margin: 14px 4px 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent1), var(--accent2), var(--accent3));
  opacity: .9;
}


/* === Mobile full-width cards ===
   Make cards occupy the full available width (with container padding) on small screens.
   Keeps the existing design untouched on larger breakpoints. */
@media (max-width: 640px){
  .grid{
    /* Force a single column that stretches across the container */
    grid-template-columns: 1fr !important;
  }
  .card{
    width: 100% !important;
    max-width: none !important;
  }
  /* Ensure comfortable margins while allowing cards to visually reach the screen edges */
  .container{
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}


/* Footer emphasis weights */
.footer .proj-name{ font-weight: 800; }
.footer .bverse-strong{ font-weight: 800; }

/* BiblioVerse button in footer with brand gradient */
.btn.bverse{
  background: linear-gradient(90deg, var(--accent1), var(--accent2), var(--accent3));
  color: #fff;
}
.btn.bverse:hover{
  transform: translateY(-1px) scale(1.02);
  box-shadow: -3px -3px 6px var(--shadow-hi), 5px 5px 10px var(--shadow-lo);
}


/* --- Performance & stability additions (2025-09-18) --- */

/* Reserve header/superbar space to prevent CLS */
.superbar{min-height:29px}
.site-header{min-height:64px}

/* Sidebar width CSS var default in case JS hasn't run yet */
:root{ --sidepush-w: 0px; }

/* Avoid layout thrash while building categories */
.category{content-visibility:auto; contain-intrinsic-size: 320px;}
.grid .card{content-visibility:auto; contain: layout paint style; contain-intrinsic-size: 120px 320px;}

/* Tooltips should never push layout */
.infotooltip{position:absolute}

/* Respect reduced motion for cheap animations */
@media (prefers-reduced-motion: reduce){
  *{animation: none !important; transition: none !important;}
}

/* Prevent late webfont swap from shifting layout */
html{font-size-adjust: 0.5;}