:root { color-scheme:dark; --bg:#121418; --panel:#1a1e24; --border:#2a3039; --muted:#929cab; --text:#edf1f7; --accent:#aec9ff; }
* { box-sizing:border-box; }
body { margin:0; color:var(--text); background:var(--bg); font:14px/1.5 Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
a { color:inherit; text-decoration:none; }
button,input,select { font:inherit; }
button { color:inherit; cursor:pointer; }
button,a,input,select { -webkit-tap-highlight-color:transparent; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
.topbar,main,footer { width:min(100% - 48px,1040px); margin:auto; }
.topbar { display:flex; align-items:center; justify-content:space-between; height:80px; border-bottom:1px solid var(--border); }
.brand { display:flex; gap:8px; align-items:center; font-weight:800; font-size:18px; }
.brand img { border-radius:8px; }
.brand b { margin-left:4px; font-weight:500; letter-spacing:2px; font-size:10px; color:#a7b1c1; }
.client-link { font-size:12px; color:var(--muted); }
.client-link:hover { color:var(--text); }
main { padding-top:36px; }
.page-title { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:32px; }
h1 { margin:0; font-size:28px; letter-spacing:-.9px; font-weight:650; }
.secondary,.primary { border-radius:7px; padding:10px 14px; font-size:12px; font-weight:600; }
.secondary { border:1px solid #394250; background:#20262f; }
.secondary:hover { background:#2a3340; }
.primary { background:var(--accent); border:0; color:#152642; }
.page-title button { white-space:nowrap; }
.page-title button span { margin-left:14px; }
.sponsors-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; gap:12px; }
.sponsors-heading h2 { font-size:13px; font-weight:600; margin:0; }
.sponsors-heading>span { font-size:10px; color:#8c97a8; }
.sponsor-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.sponsor-slot { display:flex; flex-direction:column; gap:23px; padding:18px; background:#1c2330; border:1px solid #354257; border-radius:9px; text-align:left; }
.sponsor-slot:hover { border-color:#8099bf; background:#222d3f; }
.slot-top { display:flex; justify-content:space-between; align-items:center; gap:5px; font-size:9px; letter-spacing:1px; color:#9babc2; }
.ad-label { font-size:9px; letter-spacing:0; font-weight:400; background:#2a3445; color:#b7c8e2; border-radius:4px; padding:3px 6px; }
.sponsor-slot strong { font-size:18px; font-weight:550; letter-spacing:-.3px; }
.slot-bottom { display:flex; justify-content:space-between; font-size:11px; color:#94a7c3; }
.slot-bottom b { font-size:15px; font-weight:400; }
#catalogo { margin-top:38px; scroll-margin-top:20px; }
.catalog-toolbar { display:flex; align-items:center; justify-content:space-between; gap:10px; border-bottom:1px solid var(--border); margin-bottom:20px; }
.catalog-toolbar nav { display:flex; gap:26px; }
.nav { background:none; border:0; border-bottom:2px solid transparent; color:var(--muted); font-size:12px; padding:0 0 13px; }
.nav.active { color:var(--text); border-color:var(--accent); }
.nav span { font-size:10px; margin-left:4px; color:#8897ae; }
#result-count { font-size:10px; color:#7e8b9f; padding-bottom:13px; white-space:nowrap; }
.tools { display:flex; gap:12px; }
.search { display:flex; align-items:center; gap:12px; border:1px solid var(--border); border-radius:7px; padding:0 13px; background:#191e25; flex:1; min-width:0; }
.search:focus-within { border-color:#819cc6; }
.search svg { width:16px; fill:none; stroke:#8a96a8; stroke-width:1.6; flex-shrink:0; }
.search input { background:none; border:0; color:var(--text); height:42px; width:100%; min-width:0; outline:none; font-size:12px; }
.search input::placeholder { color:#7e8b9e; }
kbd { font-size:10px; color:#6f7e93; border:1px solid #37404e; border-radius:3px; padding:0 5px; }
.sort select { height:44px; border:1px solid var(--border); background:#191e25; border-radius:7px; color:#9facbf; font-size:11px; padding:0 12px; }
.categories { display:flex; flex-wrap:wrap; gap:7px; margin-top:13px; }
.category { background:none; border:1px solid #2a313b; border-radius:5px; color:#8f9aac; padding:5px 10px; font-size:10px; }
.category.active { background:#28374d; color:#c5d8f8; border-color:#415777; }
.category:hover { color:var(--text); }
.demo-note { font-size:10px; color:#768499; margin:22px 0 10px; }
.server-list { border:1px solid var(--border); border-radius:9px; overflow:hidden; }
.server-list:empty { display:none; }
.server-row { display:flex; align-items:center; gap:16px; position:relative; background:#191d24; padding:17px 20px; }
.server-row+.server-row { border-top:1px solid var(--border); }
.server-row:hover { background:#1e252f; }
.server-icon { display:grid; place-items:center; width:43px; height:43px; flex-shrink:0; border:1px solid #3a4b5e; border-radius:8px; color:#b4cceb; background:#273445; font-size:22px; }
.row-copy { min-width:0; flex:1; }
.row-title { display:flex; align-items:center; gap:9px; }
.row-title h3 { font-size:14px; font-weight:600; margin:0; }
.row-title h3 button { border:0; background:none; padding:0; font-weight:600; text-align:left; }
.row-title h3 button:after { content:""; position:absolute; inset:0; z-index:1; }
.demo-pill { font-size:8px; color:#718097; border:1px solid #35404f; padding:1px 4px; border-radius:3px; }
.row-copy p { font-size:11px; color:#8996aa; margin:4px 0 0; }
.row-mode { font-size:10px; color:#a0adc0; background:#252d39; border-radius:4px; padding:5px 9px; }
.save { position:relative; z-index:2; width:33px; height:33px; background:none; border:1px solid #313b4b; border-radius:6px; color:#a1b1ca; font-size:19px; flex-shrink:0; }
.save:hover,.save[aria-pressed=true] { background:#344660; color:#d1e0fa; }
.row-arrow { font-size:15px; color:#70839e; margin-left:2px; }
.empty { padding:45px 20px; text-align:center; border:1px dashed #354256; border-radius:8px; }
.empty h3 { font-size:16px; }
.empty p { color:var(--muted); font-size:12px; }
footer { display:flex; justify-content:space-between; gap:15px; padding:25px 0; margin-top:35px; border-top:1px solid var(--border); color:#697689; font-size:10px; }
dialog { padding:0; width:calc(100% - 32px); max-width:480px; border:1px solid #45556d; border-radius:10px; background:#1c232d; color:var(--text); }
dialog::backdrop { background:#080d16cf; }
.close { position:absolute; right:12px; top:12px; width:30px; height:30px; border:0; border-radius:5px; color:#bbc9df; background:#101722; font-size:22px; z-index:1; }
.modal-body,.detail-body { padding:32px; }
.modal-body h2,.detail-body h2 { font-size:24px; margin:10px 0 18px; letter-spacing:-.5px; }
.modal-body p,.detail-body p { color:#a0adc0; font-size:13px; line-height:1.8; }
.modal-body .primary { margin-top:12px; }
.detail-art { display:none; }
.eyebrow { color:#889bb9; font-size:9px; letter-spacing:1px; }
.detail-body dl { display:grid; grid-template-columns:1fr 1fr; gap:18px; border-top:1px solid #394458; padding-top:18px; }
.detail-body dt { font-size:10px; color:#7f90aa; }
.detail-body dd { font-size:12px; margin:4px 0 0; }
.detail-note { padding:12px; background:#253042; border-radius:6px; }
.detail-save { width:100%; }
.toast { position:fixed; bottom:20px; left:50%; transform:translateX(-50%); padding:12px 16px; border-radius:7px; color:#14223a; background:#c5d8f8; font-size:12px; opacity:0; pointer-events:none; z-index:3; max-width:90vw; }
.toast.visible { opacity:1; }
.sr-only,.skip:not(:focus) { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
.skip:focus { position:fixed; top:5px; left:5px; z-index:10; background:white; color:black; padding:10px; }
[hidden] { display:none!important; }
@media(max-width:640px) {
  .topbar,main,footer { width:calc(100% - 32px); }
  .topbar { height:66px; }
  .client-link { font-size:10px; }
  .brand b { font-size:8px; letter-spacing:1px; }
  main { padding-top:25px; }
  .page-title { flex-wrap:wrap; gap:14px; margin-bottom:26px; }
  h1 { font-size:25px; }
  .page-title .secondary { font-size:10px; padding:8px 10px; }
  .sponsors-heading>span { font-size:9px; }
  .sponsor-grid { grid-template-columns:1fr; gap:8px; }
  .sponsor-slot { display:grid; grid-template-columns:1fr auto; padding:13px 15px; gap:10px; }
  .slot-top { grid-column:1/-1; font-size:8px; }
  .sponsor-slot strong { font-size:15px; }
  .slot-bottom { font-size:10px; gap:18px; align-items:center; }
  #catalogo { margin-top:28px; }
  .catalog-toolbar nav { gap:18px; }
  .nav { font-size:11px; }
  .tools { flex-wrap:wrap; }
  .search { flex-basis:100%; }
  .sort select { height:34px; font-size:10px; }
  .server-row { padding:14px 12px; gap:11px; }
  .server-icon { width:35px; height:35px; font-size:19px; }
  .row-title h3 { font-size:13px; }
  .row-copy p { font-size:10px; max-width:210px; }
  .row-mode { display:none; }
  .row-arrow { display:none; }
  footer { font-size:9px; }
}
@media(prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; } }