/* styles.css */
/* Ported 1:1 from prototypes/topguilds/styles.css (approved design, brand/topguilds-design-v1). Edit here from now on. */
@font-face{font-family:Orbitron;src:url('/fonts/orbitron-latin.woff2') format('woff2');font-weight:500 900;font-display:swap}
@font-face{font-family:Inter;src:url('/fonts/inter-latin.woff2') format('woff2');font-weight:400 700;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F,U+2190-21FF}
@font-face{font-family:Inter;src:url('/fonts/inter-cyrillic.woff2') format('woff2');font-weight:400 700;font-display:swap;unicode-range:U+0400-052F}
@font-face{font-family:Rubik;src:url('/fonts/rubik-hebrew.woff2') format('woff2');font-weight:400 700;font-display:swap;unicode-range:U+0590-05FF,U+200C-2010,U+20AA,U+FB1D-FB4F}
@font-face{font-family:Rubik;src:url('/fonts/rubik-cyrillic.woff2') format('woff2');font-weight:400 700;font-display:swap;unicode-range:U+0400-052F}
:root{--bg:#0b1020;--surface:#11182b;--raised:#18203c;--text:#f4f7ff;--muted:#a3aed3;--line:#27314b;--cyan:#18d7ff;--violet:#8a4dff;--green:#3ce0a0;--display:Orbitron,Rubik,system-ui,sans-serif;--ui:Inter,Rubik,system-ui,sans-serif;color-scheme:dark;font-family:var(--ui);background:var(--bg);color:var(--text);font-synthesis:none}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-block-start:100px}body{margin:0;min-inline-size:320px;line-height:1.6}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button{color:inherit}button,select,input{border-radius:8px}button:disabled{cursor:default}button,a{touch-action:manipulation}a{color:inherit;text-decoration:none}button{border:0;background:none}img{display:block;max-inline-size:100%;object-fit:cover}svg{flex-shrink:0}h1,h2,h3,p{margin:0}h1,h2,h3{line-height:1.28}h1,h2,h3,.brand{font-family:var(--display)}button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--cyan);outline-offset:5px}::selection{background:#683fc4;color:white}[hidden]{display:none!important}.container{inline-size:min(1360px,calc(100% - 96px));margin-inline:auto}.icon{inline-size:22px;block-size:22px}.crest{inline-size:42px;block-size:42px;color:var(--cyan)}.directional{transition:transform .2s}[dir=rtl] .directional{transform:scaleX(-1)}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.skip{position:absolute;z-index:100;inset-block-start:-100px;inset-inline-start:20px;background:var(--cyan);color:var(--bg);padding:12px 20px;border-radius:8px}.skip:focus{inset-block-start:12px}.eyebrow{display:flex;align-items:center;gap:10px;color:var(--cyan);font-size:11px;letter-spacing:.13em;font-weight:600;text-transform:uppercase}.btn{min-block-size:44px;display:inline-flex;align-items:center;justify-content:center;gap:18px;padding:12px 22px;border-radius:7px;font-size:14px;font-weight:600;transition:background .18s,box-shadow .18s,transform .18s;line-height:1.35}.primary{background:var(--cyan);color:#061321}.primary:hover{background:#6ce7ff;box-shadow:0 4px 28px #18d7ff22;transform:translateY(-1px)}.ghost{border:1px solid #394567;background:transparent}.ghost:hover{background:#18203c;border-color:#66799f}.icon-btn{inline-size:44px;block-size:44px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line)}.text-link{display:inline-flex;align-items:center;gap:12px;color:var(--cyan);font-size:14px;white-space:nowrap;padding-block:10px}.text-link:hover{text-decoration:underline;text-underline-offset:5px}
/* Navigation */
.header{position:sticky;inset-block-start:0;z-index:30;background:#0b1020ed;backdrop-filter:blur(20px);border-block-end:1px solid #27314ba6}.nav-inner{min-block-size:76px;inline-size:min(1460px,calc(100% - 80px));margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:28px}.brand{display:inline-flex;gap:13px;align-items:center;white-space:nowrap;font-size:23px;font-weight:800;letter-spacing:-.03em}.brand .crest{inline-size:35px;block-size:40px}.desktop-nav{display:flex;gap:32px;align-self:stretch;align-items:stretch;margin-inline-start:auto;margin-inline-end:auto}.desktop-nav a{position:relative;display:flex;align-items:center;gap:5px;font-size:13px;font-weight:500;color:var(--muted)}.desktop-nav a:hover,.desktop-nav a.nav-active{color:var(--text)}.nav-active:after{content:'';position:absolute;inset-block-end:-1px;inset-inline:0;block-size:2px;background:var(--cyan)}.pro-spark{inline-size:4px;block-size:4px;background:var(--cyan);border-radius:50%;align-self:center;margin-block-end:13px}.nav-actions{display:flex;align-items:center;gap:12px}.nav-actions .btn{font-size:12px;min-block-size:40px;padding:10px 16px;gap:20px}.language-picker{position:relative;font-size:12px;z-index:2}.language-picker summary{display:flex;align-items:center;gap:8px;cursor:pointer;list-style:none;min-block-size:44px;padding-inline:5px}.language-picker summary::-webkit-details-marker{display:none}.language-picker .icon{inline-size:17px;block-size:17px;color:var(--muted)}.chevron{font-size:17px;color:var(--muted)}.language-menu{position:absolute;inset-block-start:100%;inset-inline-end:0;background:var(--surface);padding:6px;border:1px solid var(--line);border-radius:8px;min-inline-size:90px;box-shadow:0 12px 30px #0005}.language-menu a{display:block;padding:8px 12px;border-radius:4px}.language-menu a:hover,.language-menu [aria-current=true]{color:var(--cyan);background:var(--raised)}.menu-toggle{display:none}.mobile-nav{padding:16px 24px;border-block-start:1px solid var(--line)}.mobile-nav a{display:block;padding:10px}
/* Search-first hero: HTML stays separate from the background artwork. */
.hero{position:relative;isolation:isolate;min-block-size:640px;display:flex;align-items:flex-start;overflow:hidden;text-align:center;background:#080f1f}.hero-art{position:absolute;z-index:-2;inset:0;background:url('/img/hero-1920.webp') center center/cover no-repeat}.hero-art:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#0b10201a 50%,#0b102066 85%,var(--bg))}.hero-content{padding-block:86px 90px}.hero-eyebrow{justify-content:center;font-size:10px;letter-spacing:.19em;color:#b0bedb;margin-block-end:26px}.hero-eyebrow span{inline-size:5px;block-size:5px;background:var(--cyan);border-radius:50%;box-shadow:0 0 10px #18d7ff70}.hero h1{font-size:clamp(34px,4.25vw,66px);font-weight:800;letter-spacing:-.04em;line-height:1.26;text-shadow:0 4px 25px #070d1fe0}.hero-last{position:relative;display:inline-block}.hero-last:after{content:'';position:absolute;inset-block-end:-10px;inset-inline-end:7%;inline-size:45%;block-size:4px;background:linear-gradient(90deg,#18d7ffcc,#8a4dffcc);border-radius:80% 15% 60% 10%;transform:rotate(-1deg)}.hero-sub{font-size:16px;color:#b7c2e0;max-inline-size:640px;margin:30px auto 0;line-height:1.7}.search{display:flex;align-items:center;inline-size:min(760px,100%);margin:36px auto 0;min-block-size:62px;border:1px solid #8493be;border-radius:8px;background:#11182be6;overflow:hidden;box-shadow:0 10px 40px #0003}.search>.icon{margin-inline:22px 16px;inline-size:24px;block-size:24px;color:#bbc9ed}.search input{flex:1;inline-size:0;min-inline-size:0;background:none;border:0;color:var(--text);outline-offset:-4px;block-size:60px;font-size:14px;padding-inline:0 16px}.search input::placeholder{color:#9ba8c7}.search button{display:flex;align-items:center;gap:18px;align-self:stretch;flex-shrink:0;padding-inline:26px;border-radius:0;background:var(--cyan);color:#061321;font-weight:650;font-size:14px}.search button:hover{background:#6ce7ff}.search button .icon{inline-size:19px}.try{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;align-items:center;margin-block-start:17px;font-size:12px;color:var(--muted)}.try button{color:#9ec6eb;padding:5px 0;text-decoration:underline;text-underline-offset:4px}.try button:hover{color:var(--cyan)}.separator{opacity:.5}.hero-browse{display:inline-flex;align-items:center;gap:10px;font-size:12px;color:#b4bfdd;margin-block-start:24px;padding:8px}.hero-browse:hover{color:var(--cyan)}.hero-browse .icon{inline-size:17px}.hero-caption{position:absolute;inset-block-end:18px;inset-inline-end:36px;display:flex;align-items:center;gap:7px;font-size:10px;color:#8d99b9}.preview-dot{inline-size:5px;block-size:5px;border-radius:50%;background:#8a4dff}
/* Directory */
.section{padding-block:80px}.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;margin-block-end:32px}.section-heading .eyebrow{margin-block-end:13px}.section-heading h2{font-size:clamp(24px,2.3vw,34px);font-weight:700;letter-spacing:-.035em}.section-heading p{color:var(--muted);font-size:14px;margin-block-start:12px}.demo-label{font-size:11px;color:#94a1c2;white-space:nowrap;align-self:flex-start;padding-block-start:5px}.filter-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;border-block-end:1px solid var(--line);padding-block-end:0}.tabs{display:flex;gap:26px;align-self:stretch}.tabs button{padding:14px 0 17px;border-radius:0;color:var(--muted);font-size:13px;display:flex;align-items:center;gap:7px;position:relative;white-space:nowrap}.tabs .icon{inline-size:15px;block-size:15px}.tabs [aria-pressed=true]{color:var(--cyan)}.tabs [aria-pressed=true]:after{content:'';position:absolute;inset-block-end:-1px;inset-inline:0;block-size:2px;background:var(--cyan)}.tabs button:hover{color:var(--text)}.selects{display:flex;gap:10px;padding-block-end:12px}select{background:#0c1325;border:1px solid #354160;color:#c6d0e7;min-block-size:40px;padding:9px 10px;font-size:12px;max-inline-size:100%}.results-meta{display:flex;align-items:center;justify-content:space-between;min-block-size:51px;font-size:11px;color:#94a2c6}.results-meta button{display:flex;align-items:center;gap:6px;color:var(--cyan);font-size:11px;padding:5px}.results-meta .icon{inline-size:13px;block-size:13px}.server-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.server-card{border:1px solid var(--line);border-radius:10px;background:linear-gradient(145deg,#151e34,#10172a);overflow:hidden;transition:border-color .2s,transform .2s,box-shadow .2s;min-inline-size:0}.server-card:hover{border-color:#415579;transform:translateY(-4px);box-shadow:0 14px 35px #03061366}.card-media{position:relative;aspect-ratio:1.92;overflow:hidden}.card-media>img{inline-size:100%;block-size:100%;transition:transform .5s}.server-card:hover .card-media>img{transform:scale(1.035)}.bookmark{position:absolute;inset-block-start:12px;inset-inline-end:12px;border-color:#8192b64d;background:#071225bb;backdrop-filter:blur(12px);inline-size:36px;block-size:36px;border-radius:7px;color:#e4edff}.bookmark .icon{inline-size:18px;block-size:18px}.bookmark:hover,.bookmark[aria-pressed=true]{color:var(--cyan);border-color:var(--cyan)}.bookmark[aria-pressed=true] .icon{fill:#18d7ff22}.card-body{position:relative;padding:28px 19px 19px}.guild-avatar{position:absolute;inset-block-start:-29px;inset-inline-start:19px;display:flex;align-items:center;justify-content:center;inline-size:48px;block-size:48px;border:2px solid #8697be;border-radius:9px;background:#0b1020;box-shadow:0 3px 12px #0005}.guild-avatar .icon{inline-size:27px;block-size:27px}.amber{color:#ffbd60}.violet{color:#b18aff}.cyan{color:var(--cyan)}.card-body h3{font-size:18px;letter-spacing:-.03em;margin-block-end:9px;overflow-wrap:anywhere}.card-description{font-size:12px;color:#b7c5e4;min-block-size:40px;line-height:1.65}.tags{display:flex;gap:7px;flex-wrap:wrap;margin-block:13px}.tags span{font-size:11px;background:#1c2b49;border:1px solid #334567;border-radius:4px;padding:3px 9px;color:#c8dbff;line-height:1.6}.counts{display:flex;align-items:center;flex-wrap:wrap;gap:8px 18px;font-size:11px;color:#c8d3ea}.counts>span{display:flex;align-items:center;gap:7px}.counts .icon{inline-size:17px;block-size:17px;color:#9fb5e2}.online-dot{inline-size:7px;block-size:7px;border-radius:50%;background:var(--green)}.activity{display:flex;gap:9px;align-items:center;margin-block:13px 17px;color:#9eafd2;font-size:11px;min-block-size:24px}.activity .icon{inline-size:17px;block-size:17px}.card-cta{inline-size:100%;background:#18d7ff;color:#071325;min-block-size:39px;padding:10px;font-size:12px;gap:10px;border-radius:5px}.card-cta .icon{inline-size:17px;block-size:17px}.card-cta:hover{background:#6ce7ff}.browse-more{display:flex;justify-content:flex-end;margin-block-start:23px}.browse-more .text-link{color:#c4cfec;font-size:12px}.empty{text-align:center;padding-block:70px}.empty>.icon{inline-size:40px;block-size:40px;color:var(--cyan);margin-block-end:14px}.empty p{color:var(--muted);margin-block:14px 25px;max-inline-size:480px;margin-inline:auto}
/* Category accordion */
.categories-section{padding-block-start:30px;padding-block-end:90px}.category-grid{display:flex;gap:12px;min-block-size:370px}.category-tile{position:relative;flex:1;min-inline-size:0;overflow:hidden;border:1px solid var(--line);border-radius:7px;text-align:start;padding:0;isolation:isolate;transition:flex .4s,border-color .25s;min-block-size:370px}.category-tile.featured-category{flex:2.5}.category-tile>img{position:absolute;z-index:-2;inset:0;inline-size:100%;block-size:100%;transition:transform .5s;object-position:center}.category-shade{position:absolute;z-index:-1;inset:0;background:linear-gradient(180deg,#0b102000 20%,#0b102033 45%,#0b1020e6 85%,#0b1020)}.category-copy{position:absolute;inset-inline:17px;inset-block-end:24px;display:flex;flex-direction:column;gap:9px}.category-copy>.icon{color:#bac9e6;inline-size:25px;block-size:25px}.category-copy strong{font-family:var(--display);font-size:17px;line-height:1.35;overflow-wrap:anywhere}.featured-category .category-copy strong{font-size:26px}.category-caption{color:#b9c6e5;font-size:12px}.category-arrow{position:absolute;inset-inline-end:20px;inset-block-end:26px;color:var(--cyan);opacity:0}.featured-category{border-block-end:3px solid var(--cyan)}.featured-category .category-arrow{opacity:1}.category-tile:hover>img{transform:scale(1.05)}.category-tile:hover{border-color:#18d7ff77}.category-tile:focus-visible{outline-offset:3px}
/* Community events */
.events-wrap{background:linear-gradient(130deg,#10182b,#0d1425);border-block:1px solid #1c2740}.events-layout{display:grid;grid-template-columns:1.1fr 1fr;gap:44px}.featured-event{position:relative;min-block-size:390px;border-radius:8px;overflow:hidden;border:1px solid #344364;isolation:isolate}.featured-event>img{position:absolute;inset:0;inline-size:100%;block-size:100%;z-index:-2}.event-shade{position:absolute;inset:0;background:linear-gradient(180deg,#080d1b05 15%,#080d1be6);z-index:-1}.featured-event-copy{padding:30px;position:absolute;inset-block-end:0;inset-inline:0}.featured-event-copy .eyebrow{color:#9cb3e8;font-size:11px;letter-spacing:.08em;margin-block-end:10px}.featured-event h3{font-size:22px;letter-spacing:-.03em;max-inline-size:470px}.featured-event p{margin-block:10px 22px;font-size:14px;color:#c3cfeb}.featured-event .btn{font-size:12px;min-block-size:41px;padding:12px 18px}.agenda{display:flex;flex-direction:column;justify-content:center}.event-row{padding:20px 0;display:grid;grid-template-columns:78px 1fr 72px 20px;gap:18px;align-items:center;border-radius:0;border-block-end:1px solid #2b3650;text-align:start;inline-size:100%}.event-row:first-child{padding-block-start:4px}.event-row:hover .event-description strong{color:var(--cyan)}.event-date{display:flex;flex-direction:column;gap:5px;border-inline-end:1px solid var(--line);padding-inline-end:10px;block-size:100%;justify-content:center}.event-date strong{font-size:12px}.event-date span{font-size:13px;color:#9badd5}.event-description{display:flex;flex-direction:column;gap:6px}.event-description strong{font-family:var(--display);font-size:17px;line-height:1.35;transition:color .2s}.event-description>span{color:var(--muted);font-size:12px}.event-row>img{inline-size:72px;block-size:72px;border-radius:6px}.event-row>.icon{color:var(--cyan);inline-size:19px}.schedule-note{font-size:11px;color:#91a3cb;display:flex;gap:10px;align-items:center;margin-block-start:24px}.schedule-note .icon{inline-size:17px;block-size:17px}
/* Shared membership */
.pro-section{display:grid;grid-template-columns:.9fr 1.3fr;gap:30px;align-items:center;padding-block:95px}.pro-copy .eyebrow{font-size:10px;flex-wrap:wrap}.pro-label{color:#9b9ac7;letter-spacing:0;font-size:10px;border:1px solid #443763;border-radius:4px;padding:2px 7px;text-transform:none}.pro-copy h2{font-size:clamp(30px,3.3vw,48px);line-height:1.2;letter-spacing:-.04em;margin-block:22px}.pro-copy h2>span{color:#c8d8ff}.pro-copy>p{font-size:15px;max-inline-size:390px;color:#b5c2df;line-height:1.8}.pro-copy ul{list-style:none;padding:0;display:grid;gap:14px;margin-block:25px 29px}.pro-copy li{display:flex;align-items:center;gap:13px;font-size:14px}.pro-copy li .icon{color:var(--cyan);inline-size:19px;block-size:19px}.pro-art{position:relative;min-inline-size:0}.pro-art:before{content:'';position:absolute;inset:10%;background:#5440dd1a;filter:blur(50px)}.pro-art img{position:relative;inline-size:100%;block-size:auto;mix-blend-mode:screen}
/* Closing and footer */
.closing{text-align:center;position:relative;padding-block:50px 100px;overflow:hidden}.closing>.container{position:relative;z-index:1}.closing .crest{inline-size:47px;block-size:52px;margin-block-end:24px}.closing h2{font-size:clamp(26px,3.2vw,46px);letter-spacing:-.04em;line-height:1.3}.closing p{color:#b4c0de;font-size:14px;margin-block:22px 29px}.closing .btn{min-inline-size:220px}.closing-note{display:block;color:#8e9dbf;font-size:11px;margin-block-start:15px}.horizon{position:absolute;inset-block-end:-160px;inset-inline:8%;block-size:190px;border-radius:50%;border-block-start:2px solid #23c9fd;box-shadow:0 -6px 24px #168ff13d,20px -3px 40px #8a4dff38;background:linear-gradient(180deg,#306bc811,transparent)}.footer{border-block-start:1px solid var(--line);padding-block:52px 0;background:#090f1e}.footer-grid{display:grid;grid-template-columns:1.35fr 1fr 1fr 1fr;gap:50px;padding-block-end:45px}.footer .brand{font-size:23px}.footer .brand .crest{inline-size:35px}.footer p{font-size:12px;color:#95a4ca;margin-block-start:12px}.footer h3{font-family:var(--ui);font-size:13px;font-weight:600;margin-block-end:14px}.footer-grid>div>a:not(.brand),.footer-grid button{display:block;color:#98a8d0;font-size:12px;line-height:2.5;padding:0;text-align:start}.footer-grid>div>a:hover,.footer-grid button:hover{color:var(--cyan)}.footer-bottom{border-block-start:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;padding-block:22px;gap:20px}.footer-bottom p{margin:0;font-size:10px}.footer-bottom nav{display:flex;gap:18px;font-size:11px;color:#9aabcf}.footer-bottom [aria-current=true]{color:var(--cyan)}
/* All overlays live at body level. */
dialog{position:fixed;background:#111a2f;color:var(--text);border:1px solid #3b4a6c;border-radius:14px;padding:38px;inline-size:min(540px,calc(100% - 36px));max-block-size:90dvh;overflow:auto;box-shadow:0 24px 100px #0009}dialog::backdrop{background:#030713cc;backdrop-filter:blur(7px)}.dialog-close{position:absolute;z-index:3;inset-inline-end:14px;inset-block-start:14px;inline-size:34px;block-size:34px;background:#0b1020cc}.dialog-close .icon{inline-size:18px}.dialog-mark{display:block;margin-block-end:22px}dialog .eyebrow{margin-block-end:16px}dialog h2{font-size:27px;letter-spacing:-.03em;margin-block-end:20px;padding-inline-end:12px}dialog p{color:#b5c4e3;font-size:14px;line-height:1.8;margin-block:16px 24px}dialog .btn{margin-block-start:10px}dialog .tags{margin-block:16px}dialog .counts{font-size:12px}.dialog-note{font-size:12px!important;color:#96a7cd!important;border-block-start:1px solid var(--line);padding-block-start:20px}.detail-image{margin:-38px -38px 28px;block-size:210px;overflow:hidden}.detail-image img{inline-size:100%;block-size:100%}#listing-form{display:grid;gap:15px;margin-block-start:24px}#listing-form label{display:grid;gap:8px;font-size:12px;color:#c5d3ed}#listing-form input,#listing-form select{inline-size:100%;min-block-size:44px;background:#0b1224;border:1px solid #3c4c70;color:var(--text);padding:10px 12px}.listing-preview{padding:24px;border:1px solid #354567;border-radius:9px;margin-block:22px;background:#0b1428}.listing-preview h3{overflow-wrap:anywhere}.listing-preview p{overflow-wrap:anywhere;margin-block-end:0}.toast{position:fixed;z-index:100;inset-block-end:24px;inset-inline-start:50%;transform:translateX(-50%);background:#162a39;border:1px solid #277779;border-radius:8px;box-shadow:0 8px 30px #0008;padding:14px 22px;font-size:13px;max-inline-size:calc(100% - 32px)}[dir=rtl] .toast{transform:translateX(50%)}
/* Responsive: keep content and actions readable rather than shrinking the desktop. */
@media(min-width:1500px){.hero{min-block-size:700px}.hero-content{padding-block-start:110px}.hero-sub{font-size:17px}.category-grid,.category-tile{min-block-size:410px}}
@media(max-width:1100px){.container{inline-size:calc(100% - 56px)}.nav-inner{inline-size:calc(100% - 48px);gap:20px}.desktop-nav{gap:20px}.brand{font-size:20px}.nav-actions{gap:8px}.login{display:none}.hero h1{font-size:49px}.hero{min-block-size:610px}.hero-content{padding-block-start:82px}.server-grid{gap:16px}.card-body{padding-inline:15px}.card-body h3{font-size:15px}.counts{gap:8px;font-size:10px}.activity{font-size:10px}.category-grid{gap:8px}.category-tile.featured-category{flex:1.65}.category-copy{inset-inline:12px}.category-copy strong{font-size:15px}.featured-category .category-copy strong{font-size:22px}.category-caption{font-size:11px}.category-arrow{display:none}.events-layout{gap:26px}.event-row{grid-template-columns:63px 1fr 55px 16px;gap:12px}.event-row>img{inline-size:55px;block-size:60px}.event-description strong{font-size:14px}.event-description>span{font-size:11px}.featured-event h3{font-size:19px}.pro-section{gap:12px}.footer-grid{gap:24px}.selects select{font-size:11px}.tabs{gap:21px}.tabs button{font-size:12px}}
@media(max-width:800px){.container{inline-size:calc(100% - 40px)}.nav-inner{inline-size:calc(100% - 40px);min-block-size:68px;gap:14px}.desktop-nav{display:none}.nav-actions{margin-inline-start:auto}.menu-toggle{display:flex;inline-size:38px;block-size:38px}.nav-add{display:none!important}.brand{font-size:20px}.brand .crest{inline-size:30px;block-size:35px}.hero{min-block-size:600px}.hero-content{padding-block:80px 70px}.hero h1{font-size:42px}.hero-sub{font-size:15px;max-inline-size:520px}.hero-art{background-size:auto 100%}.hero-art:after{background:linear-gradient(180deg,#0b102033,#0b102044 70%,var(--bg))}.hero-eyebrow{font-size:9px}.hero-caption{inset-inline-end:20px}.section{padding-block:58px}.section-heading h2{font-size:27px}.section-heading p{font-size:13px}.filter-bar{flex-direction:column;align-items:stretch;gap:10px}.tabs{justify-content:space-between;gap:20px}.selects{padding-block:10px 14px}.selects label{flex:1}.selects select{inline-size:100%;font-size:12px}.server-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.card-body h3{font-size:17px}.card-description{min-block-size:42px}.counts{font-size:11px}.activity{font-size:11px}.categories-section{padding-block-start:20px}.category-grid{display:grid;grid-template-columns:repeat(3,1fr);min-block-size:0;gap:12px}.category-tile{min-block-size:245px}.category-copy strong,.featured-category .category-copy strong{font-size:19px}.featured-category .category-caption{display:none}.category-copy{inset-inline:18px;inset-block-end:20px}.category-tile.featured-category{border-block-end:1px solid var(--line)}.section-heading>.text-link{font-size:11px}.events-layout{grid-template-columns:1fr;gap:26px}.featured-event{min-block-size:380px}.featured-event h3{font-size:25px}.event-row{grid-template-columns:80px 1fr 80px 20px;padding-block:20px;gap:20px}.event-description strong{font-size:18px}.event-description>span{font-size:13px}.event-row>img{inline-size:80px;block-size:75px}.pro-section{grid-template-columns:1fr;gap:16px;padding-block:65px}.pro-copy{max-inline-size:600px}.pro-copy h2{font-size:40px}.pro-copy>p{max-inline-size:520px}.pro-art{max-inline-size:650px;margin-inline:auto;inline-size:100%}.closing{padding-block:25px 70px}.closing h2{font-size:34px}.footer-grid{grid-template-columns:repeat(3,1fr);gap:35px 20px}.footer-grid>div:first-child{grid-column:1/-1}.footer-bottom p{max-inline-size:70%}}
@media(max-width:520px){.hero{min-block-size:610px}.hero-content{padding-block-start:70px}.hero h1{font-size:32px;line-height:1.35;letter-spacing:-.04em}.hero-sub{font-size:13px;margin-block-start:26px;max-inline-size:330px}.hero-eyebrow{font-size:8px;letter-spacing:.12em;margin-block-end:23px}.search{position:relative;display:grid;grid-template-columns:40px 1fr;min-block-size:0;overflow:visible;border:0;background:transparent;box-shadow:none;gap:0;margin-block-start:27px}.search>.icon{z-index:1;margin:0;justify-self:center;inline-size:20px;grid-column:1;grid-row:1;margin-inline-start:10px}.search input{inline-size:100%;grid-column:1/-1;grid-row:1;border:1px solid #6c7b9e;border-radius:7px;block-size:53px;background:#10182b;padding-inline:47px 12px;font-size:12px}.search button{grid-column:1/-1;grid-row:2;min-block-size:47px;margin-block-start:10px;border-radius:6px;justify-content:center;font-size:13px}.try{gap:9px;font-size:10px;margin-block-start:13px}.hero-browse{font-size:11px;margin-block-start:12px}.section{padding-block:43px}.section-heading{flex-wrap:wrap;gap:12px;margin-block-end:24px}.section-heading .eyebrow{font-size:9px}.section-heading h2{font-size:24px}.section-heading p{font-size:12px}.demo-label{font-size:10px}.tabs{gap:16px}.tabs button{font-size:11px;padding-block:12px}.tabs .icon{inline-size:14px}.server-grid{grid-template-columns:1fr;gap:22px}.card-media{aspect-ratio:1.9}.card-body{padding:28px 20px 20px}.card-body h3{font-size:19px}.card-description{font-size:13px;min-block-size:0}.tags{margin-block:14px}.counts{font-size:12px;gap:20px}.activity{font-size:12px;margin-block:15px 18px}.card-cta{min-block-size:44px;font-size:13px}.category-grid{grid-template-columns:repeat(2,1fr);gap:12px}.category-tile{min-block-size:230px}.category-copy strong,.featured-category .category-copy strong{font-size:17px}.category-copy>.icon{inline-size:24px;block-size:24px}.category-copy{inset-inline:15px;inset-block-end:18px}.category-grid .category-tile:nth-child(5)>img{object-position:75%}.featured-event{min-block-size:330px}.featured-event-copy{padding:22px}.featured-event h3{font-size:22px}.event-row{grid-template-columns:58px 1fr 54px 17px;gap:12px}.event-date strong{font-size:10px}.event-date span{font-size:12px}.event-description strong{font-size:14px}.event-description>span{font-size:11px}.event-row>img{inline-size:54px;block-size:60px}.schedule-note{font-size:10px}.pro-section{padding-block:55px}.pro-copy h2{font-size:39px}.pro-copy>p{font-size:14px}.pro-copy li{font-size:13px}.pro-art{margin-block:10px -12px}.closing{padding-block:20px 70px}.closing h2{font-size:28px}.closing p{font-size:13px;max-inline-size:300px;margin-inline:auto}.closing .crest{inline-size:40px;block-size:46px}.footer{padding-block-start:35px}.footer-grid{grid-template-columns:1fr 1fr;gap:28px 20px}.footer-grid>div:first-child{grid-column:auto}.footer .brand{font-size:18px;gap:7px}.footer .brand .crest{inline-size:24px}.footer p{font-size:11px}.footer h3{font-size:12px}.footer-grid>div>a:not(.brand),.footer-grid button{font-size:11px}.footer-bottom{align-items:flex-start}.footer-bottom p{font-size:9px}.footer-bottom nav{gap:12px;font-size:10px}dialog{padding:28px;max-block-size:88dvh}.detail-image{margin:-28px -28px 24px;block-size:180px}dialog h2{font-size:23px}dialog p{font-size:13px}.toast{font-size:12px;padding:12px 16px;inline-size:max-content}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}

/* Match the approved PRO scene: one continuous background, original card
   captions, connecting lines and shared-server strip; live HTML copy above it. */
.pro-section{position:relative;isolation:isolate;container-type:inline-size;display:flex;align-items:center;inline-size:100%;max-inline-size:1852px;aspect-ratio:1852/849;min-block-size:0;margin-inline:auto;padding-block:40px;padding-inline:0;overflow:hidden}
.pro-copy{position:relative;z-index:1;inline-size:29%;max-inline-size:none;margin-inline-start:5.6%}
.pro-copy h2{font-size:clamp(30px,3.25cqw,60px);line-height:1.18;margin-block:21px;letter-spacing:-.04em}
.pro-copy h2>span{color:var(--text)}
.pro-copy>p{font-size:clamp(13px,1.2cqw,22px);max-inline-size:460px;line-height:1.7}
.pro-copy ul{gap:17px;margin-block:27px 32px}
.pro-copy li{font-size:clamp(12px,1.1cqw,20px)}
.pro-copy .btn{min-inline-size:200px}
.pro-label{font-size:10px}
.pro-art{position:absolute;inset:0;z-index:-1;inline-size:100%;max-inline-size:none;margin:0;pointer-events:none}
.pro-art:before{display:none}
.pro-art img{inline-size:100%;block-size:100%;object-fit:cover;object-position:center;mix-blend-mode:normal}
.pro-art img{mask-image:linear-gradient(90deg,transparent 0%,#000 5%,#000 96%,transparent 100%),linear-gradient(180deg,transparent 0%,#000 9%,#000 93%,transparent 100%);mask-composite:intersect}
.pro-section:before{content:'';position:absolute;z-index:-2;inset-block:-30px;inset-inline:-10%;pointer-events:none;background:radial-gradient(ellipse at 77% 42%,#6837d51a,transparent 52%),radial-gradient(ellipse at 45% 69%,#00bddd0d,transparent 48%)}
.pro-section{overflow:clip}
@media(min-width:1500px){.pro-section{min-block-size:0;padding-block:60px}.pro-copy .btn{min-block-size:54px;min-inline-size:250px;font-size:16px}}
@media(min-width:801px){
 .category-tile{flex-basis:0px;transition:flex-grow .55s cubic-bezier(.2,.75,.2,1),flex-basis .55s cubic-bezier(.2,.75,.2,1),border-color .3s}
 .category-grid.is-interacting .category-tile{flex:1 1 0px;border-block-end:1px solid var(--line)}
 .category-grid.is-interacting .category-tile.is-expanded{flex:0 0 var(--expanded-width,46%);border-block-end:3px solid var(--cyan)}
 .category-grid.is-interacting .category-tile.is-expanded>img{object-fit:contain;transform:none}
 .category-grid.is-interacting .category-tile:not(.is-expanded) .category-copy{opacity:.72}
 .category-grid.is-interacting .category-tile:not(.is-expanded) .category-copy strong{font-size:13px}
 .category-grid.is-interacting .category-tile:not(.is-expanded) .category-caption,.category-grid.is-interacting .category-tile:not(.is-expanded) .category-arrow{opacity:0}
 .category-tile.is-expanded .category-copy strong{font-size:24px}
 .category-tile.is-expanded .category-arrow{opacity:1;display:block}
 .category-copy{transition:opacity .3s}
}
/* Stacking preserves all lettering in the artwork without mirroring logos. */
[dir=rtl] .pro-section{display:grid;grid-template-columns:.85fr 1.15fr;gap:20px;min-block-size:0;aspect-ratio:auto;padding-block:70px;padding-inline:48px}
[dir=rtl] .pro-copy{inline-size:100%;margin-inline:0}
[dir=rtl] .pro-art{position:relative;inset:auto;z-index:0;aspect-ratio:1.5}
[dir=rtl] .pro-art img{object-fit:cover;object-position:right center}
@media(max-width:1100px) and (min-width:801px){.pro-section{aspect-ratio:auto;min-block-size:550px}.pro-copy{inline-size:32%;margin-inline-start:3%}.pro-copy h2{font-size:32px}.pro-copy>p{font-size:13px}.pro-copy li{font-size:12px}.pro-copy ul{gap:12px}.pro-art img{object-fit:fill}}
@media(max-width:800px){
 .pro-section,[dir=rtl] .pro-section{display:flex;flex-direction:column;gap:20px;padding:55px 20px 35px;min-block-size:0;aspect-ratio:auto;background:#0b1020}
 .pro-copy,[dir=rtl] .pro-copy{inline-size:100%;max-inline-size:600px;margin-inline:auto}
 .pro-copy h2{font-size:42px;line-height:1.2}.pro-copy>p{font-size:15px}.pro-copy li{font-size:14px}
 .pro-art,[dir=rtl] .pro-art{position:relative;inset:auto;z-index:0;inline-size:100%;max-inline-size:650px;aspect-ratio:1.5;margin-inline:auto;overflow:hidden}
 .pro-art img{object-fit:cover;object-position:right center}
}
@media(max-width:520px){.pro-copy h2{font-size:39px}.pro-copy>p{font-size:14px}.pro-copy .btn{min-inline-size:200px}}

@media(max-width:800px){.hero-art{background-image:url('/img/hero-1280.webp')}}
@media(max-width:520px){.hero-art{background-image:url('/img/hero-768.webp')}}

/* experience.css */
/* Ported 1:1 from prototypes/topguilds/experience.css (second visual pass). */
/* A second visual pass on the approved TopGuilds direction. */
:root { --ease-out: cubic-bezier(.16,1,.3,1); }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
.counts, .event-date { font-variant-numeric: tabular-nums; }
.btn:active, .world-choice:active { transform: translateY(1px) scale(.985); }
.header { background: #0b1020d9; }
.scroll-progress { position: absolute; inset-block-end: -1px; inset-inline: 0; block-size: 1px; background: var(--cyan); transform: scaleX(var(--scroll-progress,0)); transform-origin: left; pointer-events: none; }
[dir=rtl] .scroll-progress { transform-origin: right; }
.desktop-nav a:after { content: ''; position: absolute; inset-block-end: -1px; inset-inline: 0; block-size: 2px; background: var(--cyan); transform: scaleX(0); transition: transform .35s var(--ease-out); }
.desktop-nav a.nav-active:after { transform: scaleX(1); }

/* The artwork moves independently from the readable search interface. */
.hero { min-block-size: 740px; background: var(--bg); }
.hero-art { inset: -12px; transform: translate3d(var(--scene-x,0px),var(--scene-y,0px),0); transition: transform .7s var(--ease-out); }
.hero-art:after { background: linear-gradient(180deg,#060d1b14 20%,#0b10201a 60%,var(--bg) 99%); }
.hero:not([data-world=all]) .hero-art:after { background: radial-gradient(ellipse at 50% 38%,#060c1ddd 12%,#060c1d70 63%,#060c1d33),linear-gradient(180deg,#0b10201a 40%,var(--bg) 99%); }
.world-backdrop { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; opacity: 0; transform: scale(1.04); transition: opacity .7s ease,transform 1.5s var(--ease-out); object-position: center 45%; }
.world-backdrop.is-active { opacity: 1; transform: scale(1); }
.hero-content { padding-block: 92px 154px; }
.hero h1 { font-size: clamp(42px,4.7vw,72px); line-height: 1.16; letter-spacing: -.045em; }
.hero-last { color: #d9f6ff; }
.hero-last:after { inline-size: 26%; inset-inline-end: 3%; block-size: 2px; inset-block-end: -15px; box-shadow: 0 0 19px #18d7ff55; }
.hero-sub { margin-block-start: 34px; max-inline-size: 580px; color: #bfcee6; }
.hero-eyebrow { margin-block-end: 28px; }
.hero-eyebrow span { box-shadow: 0 0 0 5px #18d7ff12,0 0 16px #18d7ff88; }
.search { margin-block-start: 30px; padding: 6px; min-block-size: 70px; border: 1px solid #9ab8d066; border-radius: 12px; background: #0d172be8; backdrop-filter: blur(20px); box-shadow: 0 18px 65px #02091c88,inset 0 1px #e0f5ff14; transition: border-color .25s,box-shadow .25s; }
.search:focus-within { border-color: var(--cyan); box-shadow: 0 0 0 4px #18d7ff12,0 20px 70px #02091c88; }
.search input { block-size: 52px; }
.search button { border-radius: 7px; padding-inline: 24px; }
.search-shortcut { display: grid; place-items: center; min-inline-size: 25px; block-size: 26px; margin-inline-end: 16px; border: 1px solid #5c6a894d; border-radius: 5px; color: #8e9fbd; font: 12px var(--ui); }
.hero-browse { color: #c5d9ee; }
.hero-caption { inset-block-end: 86px; }
.hero-atmosphere { position: absolute; inset: 0; pointer-events: none; z-index: -1; overflow: hidden; }
.hero-atmosphere i { position: absolute; inline-size: 2px; block-size: 2px; border-radius: 50%; background: #a9e7ff; box-shadow: 0 0 8px #32d5ff; opacity: .5; }
.hero-atmosphere i:nth-child(4n+1) { inset-inline-start: 14%; inset-block-start: 31%; }
.hero-atmosphere i:nth-child(4n+2) { inset-inline-start: 78%; inset-block-start: 62%; }
.hero-atmosphere i:nth-child(4n+3) { inset-inline-start: 8%; inset-block-start: 70%; }
.hero-atmosphere i:nth-child(4n) { inset-inline-start: 90%; inset-block-start: 21%; }
.hero-atmosphere i:nth-child(n+5) { margin-inline-start: 4%; margin-block-start: 5%; }
.hero-atmosphere i:nth-child(n+9) { margin-inline-start: -5%; margin-block-start: 15%; }
@media(prefers-reduced-motion:no-preference) {
 .hero-atmosphere i { animation: drift 7s ease-in-out infinite alternate; }
 .hero-atmosphere i:nth-child(3n) { animation-delay: -4s; animation-duration: 9s; }
 .hero-atmosphere i:nth-child(3n+1) { animation-delay: -2s; }
 @keyframes drift { from { opacity: .15; transform: translateY(8px); } to { opacity: .8; transform: translateY(-14px); } }
}

/* The world selector is both a scene control and a directory filter. */
.world-dock { position: relative; z-index: 2; max-inline-size: 1180px; margin-block-start: -59px; }
.world-dock-heading { display: flex; justify-content: space-between; gap: 16px; margin-block-end: 16px; color: #dce8f9; font-size: 11px; }
.world-dock-heading>span:first-child { font-weight: 600; }
.world-dock-heading>span:last-child { color: #8fa4c4; }
.world-choices { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.world-choice { position: relative; isolation: isolate; min-inline-size: 0; display: grid; grid-template-columns: 58px 1fr 16px; gap: 13px; align-items: center; padding: 14px; text-align: start; background: #101a2ce8; border: 1px solid #35445b; border-radius: 11px; box-shadow: 0 14px 34px #030a1d55,inset 0 1px #d0e8ff09; transition: transform .35s var(--ease-out),border-color .3s,background .3s; overflow: hidden; }
.world-choice[aria-pressed=true] { border-color: #51d8e8; background: #112a38eb; }
.world-choice[aria-pressed=true]:after { content: ''; position: absolute; inset-block-end: 0; inset-inline: 25%; block-size: 2px; background: var(--cyan); box-shadow: 0 0 15px #18d7ff; }
.world-thumb { position: relative; display: grid; place-items: center; inline-size: 58px; block-size: 61px; border-radius: 6px; overflow: hidden; background: #071122; }
.world-thumb img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; opacity: .65; transition: transform .6s var(--ease-out),opacity .4s; }
.world-thumb>.icon { position: relative; inline-size: 23px; block-size: 23px; color: white; filter: drop-shadow(0 2px 6px #030918); }
.world-choice-copy { display: flex; flex-direction: column; gap: 4px; min-inline-size: 0; }
.world-choice-copy strong { font-size: 13px; font-weight: 600; line-height: 1.4; }
.world-choice-copy>span { font-size: 10px; color: #9caecc; line-height: 1.5; }
.world-choice>.icon { inline-size: 16px; color: #86aac0; }
.world-choice:hover { transform: translateY(-4px); border-color: #79bbd1; }
.world-choice:hover .world-thumb img { opacity: .9; transform: scale(1.12); }

/* A distinct lead community gives the directory an editorial hierarchy. */
.discovery { padding-block-start: 92px; }
.section-heading h2 { font-size: clamp(26px,2.5vw,38px); letter-spacing: -.045em; }
.section-heading .eyebrow { font-size: 10px; letter-spacing: .19em; }
.demo-label { display: inline-flex; align-items: center; gap: 8px; border: 1px solid #35415c80; border-radius: 5px; padding: 6px 9px; }
.demo-label:before { content: ''; inline-size: 4px; block-size: 4px; background: #849bbd; border-radius: 50%; }
.filter-bar { border-block-end-color: #41526c66; }
.tabs button { transition: color .2s; }
.server-card { position: relative; isolation: isolate; display: flex; flex-direction: column; border-color: #34415a; border-radius: 13px; background: linear-gradient(145deg,#162139,#0d1628); box-shadow: 0 12px 30px #03091b22; }
.card-media { aspect-ratio: 1.65; flex-shrink: 0; }
.card-media:after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg,transparent 60%,#14203566); }
.bookmark { z-index: 2; }
.card-body { flex: 1; display: flex; flex-direction: column; padding: 29px 22px 22px; }
.card-body .card-cta { margin-block-start: auto; }
.card-body h3 { font-size: 19px; }
.guild-avatar { inline-size: 49px; block-size: 49px; border-radius: 11px; border-color: #8da5c2; box-shadow: 0 5px 18px #02091680; }
.card-description { font-size: 12px; }
.card-cta { min-block-size: 42px; border: 1px solid #4d728a; background: #152a3b; color: #d4edff; transition: background .25s,border-color .25s; }
.card-cta:hover { background: #1e3b4c; border-color: #7dd8ed; }
.card-cta:hover .directional { translate: 4px; }
[dir=rtl] .card-cta:hover .directional { translate: -4px; }
.spotlight-label { display: none; }
.server-card:before,.world-choice:before,.featured-event:before { content: ''; position: absolute; z-index: 3; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; background: radial-gradient(420px circle at var(--pointer-x,50%) var(--pointer-y,20%),#67dcff13,transparent 70%); transition: opacity .4s; }
.server-card:hover:before,.world-choice:hover:before,.featured-event:hover:before { opacity: 1; }
@media(min-width:1101px) {
 .server-grid.is-featured { grid-template-columns: 1.3fr 1fr 1fr; }
 .is-featured .spotlight-card { min-block-size: 526px; justify-content: flex-end; border-color: #588f9d; }
 .is-featured .spotlight-card .card-media { position: absolute; inset: 0; aspect-ratio: auto; }
 .is-featured .spotlight-card .card-media:after { background: linear-gradient(180deg,#08132700 12%,#08132712 28%,#081327f2 67%,#081327 100%); }
 .is-featured .spotlight-card .card-media img { object-position: 52% center; }
 .is-featured .spotlight-card .card-body { flex: 0; padding-block: 30px 22px; padding-inline: 30px; pointer-events: none; }
 .is-featured .spotlight-card .card-body button { pointer-events: auto; }
 .is-featured .spotlight-card .guild-avatar { position: static; margin-block-end: 18px; }
 .is-featured .spotlight-card h3 { font-size: 32px; }
 .is-featured .spotlight-card .card-description { font-size: 14px; min-block-size: 0; }
 .is-featured .spotlight-card .activity { margin-block: 16px 24px; }
 .is-featured .spotlight-card .card-cta { background: var(--cyan); color: #061321; border-color: var(--cyan); }
 .is-featured .spotlight-label { position: absolute; z-index: 1; inset-block-start: 18px; inset-inline-start: 20px; display: flex; align-items: center; gap: 7px; padding: 5px 9px; border: 1px solid #b9f4ff66; border-radius: 5px; background: #081a2baa; backdrop-filter: blur(10px); color: #e0f9ff; font-size: 10px; }
 .spotlight-label .icon { inline-size: 14px; block-size: 14px; }
}
.category-tile { border-radius: 12px; }
.category-grid .category-copy>.icon { padding: 6px; inline-size: 34px; block-size: 34px; border: 1px solid #d2ebff33; border-radius: 8px; background: #0b142966; backdrop-filter: blur(10px); }
.events-wrap { position: relative; background: radial-gradient(ellipse at 8% 30%,#172e494d,transparent 60%),#0e1627; }
.featured-event { border-radius: 14px; min-block-size: 420px; }
.featured-event>img { transition: transform 1s var(--ease-out); }
.featured-event:hover>img { transform: scale(1.035); }
.featured-event h3 { font-size: 29px; }
.event-date { border: 1px solid #3f526c; border-radius: 8px; padding: 12px 6px; text-align: center; background: #18243a; }
.event-row { transition: background .25s; }
.event-row:hover { background: #1d30444d; }
.event-row>img { border-radius: 9px; }
.closing { padding-block: 95px 110px; }
.closing:before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 100%,#17374b66,transparent 60%); pointer-events: none; }
.closing h2 { font-size: clamp(32px,3.8vw,58px); }
.closing .crest { filter: drop-shadow(0 0 28px #18d7ff44); }

/* Content stays visible without JS or when reduced motion is requested. */
@media(prefers-reduced-motion:no-preference) {
 .reveal { opacity: 0; translate: 0 22px; transition: opacity .7s ease,translate .9s var(--ease-out),transform .35s var(--ease-out); transition-delay: var(--reveal-delay,0ms); }
 .reveal.is-visible { opacity: 1; translate: 0 0; }
}
@media(max-width:1100px) {
 .world-dock { inline-size: calc(100% - 56px); }
 .world-choice { grid-template-columns: 40px 1fr; gap: 10px; padding: 12px; }
 .world-thumb { inline-size: 40px; block-size: 54px; }
 .world-choice>.icon { display: none; }
 .world-choice-copy strong { font-size: 12px; }
 .hero h1 { font-size: 53px; }
}
@media(max-width:800px) {
 .hero { min-block-size: 690px; }
 .hero-content { padding-block: 82px 140px; }
 .hero h1 { font-size: 44px; }
 .hero-caption { inset-block-end: 72px; }
 .hero-atmosphere { display: none; }
 .world-dock { inline-size: calc(100% - 40px); margin-block-start: -45px; }
 .world-choices { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
 .world-choice { grid-template-columns: 48px 1fr 16px; }
 .world-thumb { inline-size: 48px; block-size: 48px; }
 .world-choice>.icon { display: block; }
 .world-choice-copy strong { font-size: 13px; }
 .discovery { padding-block-start: 64px; }
 .section-heading h2 { font-size: 29px; }
 .card-media { aspect-ratio: 1.9; }
 .featured-event h3 { font-size: 25px; }
 .closing { padding-block: 65px 85px; }
}
@media(max-width:520px) {
 .hero { min-block-size: 660px; }
 .hero-content { padding-block: 65px 115px; }
 .hero h1 { font-size: 35px; line-height: 1.23; }
 .hero-sub { font-size: 13px; margin-block-start: 30px; }
 .hero-art { inset: 0; background-position: 20% center; }
 .hero[data-world=all] .hero-art:after { background: linear-gradient(180deg,#08122588,#081225c4 43%,#0b102077 75%,var(--bg)); }
 .hero-eyebrow { font-size: 8px; letter-spacing: .12em; }
 .hero-caption { display: none; }
 .search { padding: 0; border: 0; background: none; box-shadow: none; backdrop-filter: none; overflow: visible; }
 .search:focus-within { box-shadow: none; }
 .search input { block-size: 54px; border-color: #6d91aa; background: #0d172bf2; }
 .search button { border-radius: 7px; min-block-size: 48px; }
 .search-shortcut { display: none; }
 .world-dock { margin-block-start: -46px; }
 .world-dock-heading { font-size: 11px; margin-block-end: 12px; }
 .world-dock-heading>span:last-child { display: none; }
 .world-choice { grid-template-columns: 36px 1fr; gap: 9px; padding: 10px; border-radius: 9px; }
 .world-thumb { inline-size: 36px; block-size: 47px; }
 .world-choice>.icon { display: none; }
 .world-choice-copy strong { font-size: 11px; }
 .world-choice-copy>span { font-size: 9px; }
 .world-thumb>.icon { inline-size: 19px; block-size: 19px; }
 .discovery { padding-block-start: 55px; }
 .section-heading h2 { font-size: 26px; }
 .card-body { padding-inline: 20px; }
 .card-description { font-size: 13px; }
 .card-cta { min-block-size: 45px; }
 .featured-event { min-block-size: 350px; }
 .featured-event h3 { font-size: 23px; }
 .event-date { padding: 9px 3px; }
 .closing h2 { font-size: 30px; }
}
@media(prefers-reduced-motion:reduce) {
 .hero-art,.world-backdrop { transform: none!important; }
 .reveal { opacity: 1; translate: none; }
}

/* Comfortable desktop scale, especially on wide monitors. */
@media(min-width:1101px) {
 .nav-inner { min-block-size: 88px; }
 .brand { font-size: 27px; }
 .brand .crest { inline-size: 40px; block-size: 45px; }
 .desktop-nav { gap: 34px; }
 .desktop-nav a { font-size: 15px; }
 .nav-actions .btn { font-size: 14px; min-block-size: 46px; padding-inline: 19px; }
 .language-picker { font-size: 14px; }
 .language-picker .icon { inline-size: 19px; block-size: 19px; }
 .hero { min-block-size: 800px; }
 .hero-content { padding-block: 94px 160px; }
 .hero h1 { font-size: clamp(60px,4.9vw,88px); }
 .hero-eyebrow { font-size: 12px; }
 .hero-sub { font-size: 19px; max-inline-size: 710px; }
 .search { inline-size: min(860px,100%); min-block-size: 78px; }
 .search input { font-size: 16px; block-size: 62px; }
 .search button { font-size: 16px; padding-inline: 28px; }
 .search-shortcut { min-inline-size: 29px; block-size: 30px; font-size: 14px; }
 .try { font-size: 14px; }
 .hero-browse { font-size: 15px; }
 .hero-caption { font-size: 12px; }
 .world-dock-heading { font-size: 13px; }
 .world-choice { grid-template-columns: 62px 1fr 18px; padding: 16px; gap: 14px; }
 .world-thumb { inline-size: 62px; block-size: 68px; }
 .world-choice-copy strong { font-size: 15px; }
 .world-choice-copy>span { font-size: 12px; }
 .section-heading h2 { font-size: clamp(34px,2.8vw,44px); }
 .section-heading p { font-size: 17px; }
 .section-heading .eyebrow { font-size: 12px; }
 .demo-label { font-size: 13px; padding: 7px 11px; }
 .tabs { gap: 31px; }
 .tabs button { font-size: 15px; padding-block: 17px 20px; }
 .tabs .icon { inline-size: 18px; block-size: 18px; }
 .selects select { font-size: 14px; min-block-size: 46px; padding-inline: 13px; }
 .results-meta { font-size: 13px; min-block-size: 58px; }
 .results-meta button { font-size: 13px; }
 .card-body { padding-block: 36px 24px; padding-inline: 24px; }
 .card-body h3 { font-size: 22px; }
 .card-description { font-size: 15px; min-block-size: 50px; }
 .guild-avatar { inline-size: 56px; block-size: 56px; inset-block-start: -30px; }
 .guild-avatar .icon { inline-size: 31px; block-size: 31px; }
 .tags { gap: 8px; margin-block: 16px; }
 .tags span { font-size: 12px; padding: 4px 10px; }
 .counts { font-size: 13px; gap: 8px 16px; }
 .activity { font-size: 13px; margin-block: 17px 22px; }
 .counts .icon,.activity .icon { inline-size: 19px; block-size: 19px; }
 .card-cta { min-block-size: 49px; font-size: 15px; }
 .is-featured .spotlight-card { min-block-size: 610px; }
 .is-featured .spotlight-card .card-body { padding-block-end: 24px; }
 .is-featured .spotlight-card h3 { font-size: 38px; }
 .is-featured .spotlight-card .card-description { font-size: 17px; }
 .is-featured .spotlight-label { font-size: 12px; padding: 6px 11px; }
 .browse-more .text-link,.text-link { font-size: 15px; }
 .category-grid,.category-tile { min-block-size: 430px; }
 .category-copy { inset-inline: 20px; inset-block-end: 28px; gap: 12px; }
 .category-copy strong { font-size: 21px; }
 .featured-category .category-copy strong { font-size: 30px; }
 .category-caption { font-size: 14px; }
 .category-tile.is-expanded .category-copy strong { font-size: 29px; }
 .category-grid.is-interacting .category-tile:not(.is-expanded) .category-copy strong { font-size: 15px; }
 .featured-event { min-block-size: 470px; }
 .featured-event h3 { font-size: 33px; }
 .featured-event p { font-size: 17px; }
 .featured-event-copy .eyebrow { font-size: 13px; }
 .featured-event .btn { min-block-size: 49px; font-size: 15px; padding-inline: 23px; }
 .event-row { grid-template-columns: 90px 1fr 84px 24px; gap: 20px; padding-block: 23px; }
 .event-row>img { inline-size: 84px; block-size: 84px; }
 .event-date strong { font-size: 14px; }
 .event-date span { font-size: 15px; }
 .event-description strong { font-size: 20px; }
 .event-description>span { font-size: 14px; }
 .schedule-note { font-size: 13px; }
 .closing p { font-size: 18px; }
 .closing .btn { min-block-size: 54px; min-inline-size: 250px; font-size: 16px; }
 .closing-note { font-size: 13px; }
 .footer .brand { font-size: 26px; }
 .footer h3 { font-size: 16px; }
 .footer p,.footer-grid>div>a:not(.brand),.footer-grid button { font-size: 14px; }
 .footer-bottom p { font-size: 12px; }
 .footer-bottom nav { font-size: 14px; }
 dialog { inline-size: min(620px,calc(100% - 48px)); padding: 42px; }
 dialog h2 { font-size: 32px; }
 dialog p { font-size: 16px; }
 dialog .btn { min-block-size: 49px; font-size: 16px; }
 dialog .counts { font-size: 14px; }
 .dialog-note { font-size: 14px!important; }
 .detail-image { margin: -42px -42px 30px; block-size: 240px; }
 #listing-form label { font-size: 14px; }
 #listing-form input,#listing-form select { min-block-size: 49px; font-size: 16px; }
 .toast { font-size: 15px; }
}
@media(min-width:1600px) {
 .container { inline-size: min(1680px,calc(100% - 144px)); }
 .nav-inner { inline-size: min(1800px,calc(100% - 120px)); min-block-size: 96px; }
 .brand { font-size: 32px; }
 .brand .crest { inline-size: 44px; block-size: 50px; }
 .desktop-nav a { font-size: 18px; }
 .nav-actions .btn,.language-picker { font-size: 16px; }
 .nav-actions .btn { min-block-size: 50px; }
 .hero { min-block-size: 870px; }
 .hero-content { padding-block-start: 104px; }
 .hero-sub { font-size: 21px; max-inline-size: 790px; }
 .search { inline-size: 940px; }
 .search input,.search button { font-size: 18px; }
 .world-dock { max-inline-size: 1440px; }
 .world-dock-heading { font-size: 15px; }
 .world-choice { grid-template-columns: 76px 1fr 20px; padding: 18px; gap: 18px; }
 .world-thumb { inline-size: 76px; block-size: 74px; }
 .world-choice-copy strong { font-size: 18px; }
 .world-choice-copy>span { font-size: 14px; }
 .discovery { padding-block-start: 108px; }
 .section-heading h2 { font-size: 48px; }
 .section-heading p { font-size: 19px; }
 .tabs button,.selects select { font-size: 16px; }
 .results-meta,.demo-label { font-size: 14px; }
 .server-grid { gap: 28px; }
 .card-body h3 { font-size: 25px; }
 .card-description,.is-featured .spotlight-card .card-description { font-size: 18px; }
 .tags span { font-size: 15px; }
 .counts,.activity { font-size: 16px; }
 .card-cta { font-size: 17px; min-block-size: 54px; }
 .category-grid,.category-tile { min-block-size: 470px; }
 .category-copy strong { font-size: 25px; }
 .featured-category .category-copy strong { font-size: 35px; }
 .category-caption { font-size: 16px; }
 .events-layout { gap: 56px; }
 .featured-event { min-block-size: 510px; }
 .featured-event h3 { font-size: 38px; }
 .event-description strong { font-size: 23px; }
 .event-description>span { font-size: 16px; }
 .schedule-note { font-size: 15px; }
 .footer h3 { font-size: 18px; }
 .footer p,.footer-grid>div>a:not(.brand),.footer-grid button { font-size: 16px; }
 .footer-bottom p { font-size: 14px; }
 /* Keep the approved PRO artwork at its own composition width. */
 .pro-section.container { inline-size: 100%; }
}

/* site.css */
/* TopGuilds pages beyond the prototype: lists, server page, chips, breadcrumbs, pagination, forms, dashboard, notices.
   Same tokens (styles.css :root), logical properties only (RTL), dark theme. */

/* Links-as-tabs (the prototype used buttons with aria-pressed) */
.tabs a{padding:14px 0 17px;color:var(--muted);font-size:13px;display:flex;align-items:center;gap:7px;position:relative;white-space:nowrap}
.tabs a:hover{color:var(--text)}
.tabs [aria-current=true]{color:var(--cyan)}
.tabs [aria-current=true]:after{content:'';position:absolute;inset-block-end:-1px;inset-inline:0;block-size:2px;background:var(--cyan)}
.discovery .filter-bar{margin-block-end:24px}
.list-section .filter-bar{margin-block-end:8px}
.results-meta{margin:0}

/* Whole card is one link (stretched); the save button stays above it */
.server-card{position:relative}
.card-link{color:inherit}
.card-link::after{content:'';position:absolute;inset:0;z-index:1}
.card-link:focus-visible{outline:none}
.server-card:has(.card-link:focus-visible){outline:2px solid var(--cyan);outline-offset:3px}
.bookmark{z-index:2}
.card-cta{pointer-events:none}
img.guild-avatar{object-fit:cover;padding:0}
.verified-label{inset-block-start:12px;inset-inline-start:12px;background:#0b2a2acc;border-color:#2c8f7c;color:#9ff3d6}
.verified-label .icon{inline-size:14px;block-size:14px}

/* Breadcrumbs */
.breadcrumbs{padding-block:22px 0;font-size:12px;color:var(--muted)}
.breadcrumbs ol{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}
.breadcrumbs li:not(:last-child)::after{content:'/';margin-inline-start:6px;opacity:.5}
.breadcrumbs a:hover{color:var(--cyan)}
.breadcrumbs [aria-current]{color:var(--text)}

/* Headings for list / content pages */
.list-section{padding-block-start:34px}
.list-title,.page-title{font-size:clamp(26px,3vw,42px);font-weight:800;letter-spacing:-.035em;line-height:1.2}
.page-title{margin-block:14px 16px}
.section-title{font-size:clamp(20px,2vw,28px);margin-block-end:22px}
.lead{color:#b7c2e0;font-size:16px;line-height:1.75;max-inline-size:720px}
.muted{color:var(--muted)}
.small{font-size:12px}
.narrow{max-inline-size:900px}
.section.narrow{padding-block:50px}

/* Chips (taxonomy links) */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:9px;padding:7px 12px;border:1px solid #334567;border-radius:6px;background:#141d33;color:#c8dbff;font-size:13px;line-height:1.4;transition:border-color .18s,color .18s}
.chip:hover{border-color:var(--cyan);color:var(--text)}
.chip-count{font-size:11px;color:#8fa0c8}
.browse-section{display:grid;gap:34px;padding-block:20px 70px}
.browse-title{font-size:18px;margin-block-end:14px;letter-spacing:-.02em}

/* Inline search on list pages */
.search-inline{margin:0;inline-size:min(460px,100%);min-block-size:48px}
.search-inline input{block-size:46px}
.search-inline button{padding-inline:18px}

/* Pagination */
.pagination{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin-block-start:40px}
.pagination ol{display:flex;gap:6px;list-style:none;margin:0;padding:0}
.pagination li>*{display:inline-flex;align-items:center;justify-content:center;min-inline-size:40px;min-block-size:40px;border:1px solid var(--line);border-radius:7px;font-size:13px}
.pagination li a:hover{border-color:#66799f}
.pagination [aria-current=page]{border-color:var(--cyan);color:var(--cyan)}
.pagination .gap{border:0;color:var(--muted);min-inline-size:20px}
.icon.flip{transform:scaleX(-1)}
[dir=rtl] .icon.flip{transform:none}

/* Server page */
.server-page{padding-block:22px 10px}
.server-hero{position:relative}
.server-banner{position:relative;aspect-ratio:3.6;min-block-size:180px;border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.server-banner>img{inline-size:100%;block-size:100%}
.server-banner-shade{position:absolute;inset:0;background:linear-gradient(180deg,#0b102000 30%,#0b1020e6)}
.server-head{position:relative;display:flex;align-items:flex-end;gap:22px;margin-block-start:-58px;padding-inline:28px;flex-wrap:wrap}
.server-head .guild-avatar.server-avatar{position:static;inline-size:96px;block-size:96px;border-radius:16px;flex-shrink:0}
.server-head .guild-avatar.server-avatar .icon{inline-size:46px;block-size:46px}
.server-head-copy{flex:1;min-inline-size:240px}
.server-head h1{font-size:clamp(26px,3.2vw,44px);letter-spacing:-.035em;line-height:1.15}
.server-tagline{color:#c3cde8;font-size:16px;margin-block-start:8px}
.server-facts{display:flex;flex-wrap:wrap;gap:8px 22px;list-style:none;padding:0;margin:14px 0 0;font-size:13px;color:#c8d3ea}
.server-facts li{display:flex;align-items:center;gap:8px}
.server-facts .icon{inline-size:18px;block-size:18px;color:#9fb5e2}
.server-facts a:hover{color:var(--cyan)}
.server-actions{display:flex;gap:10px;align-items:center;padding-block-end:6px}
.join-btn{min-inline-size:180px;font-size:15px}
.server-actions [aria-pressed=true]{border-color:var(--cyan);color:var(--cyan)}
.verified-note{display:flex;align-items:center;gap:10px;margin:18px 28px 0;font-size:13px;color:#9ff3d6}
.verified-note .icon{color:#3ce0a0}
.server-layout{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(260px,1fr);gap:48px;padding-block:44px 20px}
.server-section h2{font-size:20px;margin-block-end:16px}
.prose{color:#d5ddf1;font-size:15px;line-height:1.8;overflow-wrap:anywhere}
.prose p+p,.prose ul{margin-block-start:14px}
.prose ul{padding-inline-start:22px}
.prose li+li{margin-block-start:6px}
.server-side{display:grid;gap:26px;align-content:start;padding:24px;border:1px solid var(--line);border-radius:12px;background:#10172a}
.server-side h3{font-family:var(--ui);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-block-end:10px}
.link-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.link-list a{display:inline-flex;align-items:center;gap:9px;color:#c8dbff;font-size:14px}
.link-list a:hover{color:var(--cyan)}
.link-list .icon{inline-size:17px;block-size:17px}
.server-report a{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}
.server-report a:hover{color:#ff9d9d}
.server-report .icon{inline-size:15px;block-size:15px}
.closing.compact{padding-block:30px 90px}
.closing.compact h2{font-size:clamp(22px,2.4vw,34px)}

/* Steps + modes (Add your server) */
.steps{list-style:none;margin:34px 0;padding:0;display:grid;gap:18px}
.steps li{display:flex;gap:18px;align-items:flex-start;padding:20px;border:1px solid var(--line);border-radius:10px;background:#10172a}
.steps h3{font-size:16px;margin-block-end:6px}
.steps p{color:var(--muted);font-size:14px}
.step-num{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;inline-size:36px;block-size:36px;border-radius:50%;background:#18d7ff1f;color:var(--cyan);font-weight:700}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:18px}
.mode-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-block-end:18px}
.mode-card{padding:24px;border:1px solid var(--line);border-radius:12px;background:#10172a}
.mode-card.mode-bot{border-color:#5a3fa8;background:linear-gradient(145deg,#1a1538,#10172a)}
.mode-card h3{font-size:18px;margin-block-end:8px}
.mode-card p{color:var(--muted);font-size:14px;margin-block-end:14px}
.mode-card ul,.bot-panel ul{list-style:none;padding:0;margin:0;display:grid;gap:9px;font-size:14px}
.mode-card li,.bot-panel li{display:flex;gap:9px;align-items:flex-start}
.mode-card li .icon,.bot-panel li .icon{inline-size:18px;block-size:18px;color:var(--cyan);margin-block-start:3px}

/* Guidelines */
.prose-page h2{font-size:20px;margin-block:34px 12px}
.prose-page p{color:#c9d2ea;line-height:1.8}
.rules{display:grid;gap:10px;padding-inline-start:22px;color:#c9d2ea;line-height:1.7}

/* Notices */
.notice{display:flex;align-items:center;gap:12px;padding:14px 18px;border-radius:9px;margin-block:18px;font-size:14px}
.notice.ok{background:#0f2b28;border:1px solid #2c8f7c;color:#b8f5df}
.notice.warn{background:#2d1b1f;border:1px solid #8f3b47;color:#ffd0d6}
.notice .icon{inline-size:20px;block-size:20px}

/* Forms */
.form{display:grid;gap:22px}
.field{display:grid;gap:8px;font-size:14px;font-weight:600}
.field small,.fieldset small{font-weight:400;font-size:12px;color:var(--muted)}
.field small.error,.fieldset small.error,small.error{color:#ff9daa}
.field input,.field textarea,.field select,.link-row input,.link-row select{inline-size:100%;background:#0e1527;border:1px solid #33405f;color:var(--text);padding:11px 13px;font-size:14px;font-weight:400;line-height:1.5}
.field textarea{resize:vertical;min-block-size:150px}
.field input:focus,.field textarea:focus,.field select:focus,.link-row input:focus,.link-row select:focus{outline:2px solid var(--cyan);outline-offset:1px}
.has-error input,.has-error textarea,.has-error select{border-color:#c1495b}
.fieldset{border:1px solid var(--line);border-radius:10px;padding:16px 18px 18px;margin:0;display:grid;gap:14px}
.fieldset legend{padding-inline:6px;font-size:14px;font-weight:600}
.fieldset.has-error{border-color:#c1495b}
.check-group h3{font-family:var(--ui);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-block-end:8px}
.checks{display:flex;flex-wrap:wrap;gap:8px}
.check{display:inline-flex;align-items:center;gap:8px;font-size:13px;cursor:pointer}
.checks .check{padding:6px 11px;border:1px solid #334567;border-radius:6px;background:#141d33}
.checks .check:has(input:checked){border-color:var(--cyan);background:#0f2a3a}
.check input{accent-color:var(--cyan);inline-size:16px;block-size:16px;margin:0}
.radio{display:flex;align-items:center;gap:10px;padding-block:6px;font-size:14px;cursor:pointer}
.radio input{accent-color:var(--cyan)}
.link-row{display:grid;grid-template-columns:150px minmax(0,1fr);gap:8px}
.consent{align-items:flex-start;font-size:14px;line-height:1.6;padding:14px 16px;border:1px solid #334567;border-radius:9px;background:#10172a}
.consent input{margin-block-start:4px}
.consent.has-error{border-color:#c1495b}
.form-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.danger{color:#ffb3bd;border-color:#6b2f3a}
.danger:hover{background:#2d1b1f;border-color:#c1495b}

/* Dashboard */
.dash-list{list-style:none;padding:0;margin:30px 0;display:grid;gap:10px}
.dash-row{display:flex;align-items:center;gap:16px;padding:14px 18px;border:1px solid var(--line);border-radius:10px;background:#10172a}
.dash-row .guild-avatar,.dash-head .guild-avatar{position:static;inline-size:40px;block-size:40px;font-weight:700;border-radius:10px}
.dash-head .guild-avatar{inline-size:56px;block-size:56px}
.dash-row-copy{flex:1;display:flex;flex-direction:column;gap:4px;min-inline-size:0}
.dash-row-copy strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.state-badge{align-self:flex-start;font-size:11px;font-weight:600;padding:2px 9px;border-radius:20px;border:1px solid #3a4768;color:#c8d3ea}
.state-published{border-color:#2c8f7c;color:#9ff3d6;background:#0f2b28}
.state-pending{border-color:#8a6d2a;color:#ffe2a0;background:#2b2412}
.state-hidden,.state-rejected,.state-removed,.state-banned{border-color:#8f3b47;color:#ffd0d6;background:#2d1b1f}
.back-link{margin-block-end:10px}
.dash-head{display:flex;align-items:center;gap:18px;margin-block-end:10px}
.dash-head .page-title{margin:0}
.dash-layout{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(280px,1fr);gap:36px;margin-block-start:24px;align-items:start}
.dash-side{display:grid;gap:18px;position:sticky;inset-block-start:96px}
.panel{padding:20px;border:1px solid var(--line);border-radius:12px;background:#10172a}
.panel h2{font-size:18px;margin-block:8px 10px}
.panel p{font-size:14px;color:#c3cde8}
.muted-panel p{color:var(--muted)}
.bot-panel{border-color:#5a3fa8;background:linear-gradient(145deg,#1a1538,#10172a)}
.bot-panel ul{margin-block:14px 18px}
.status-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-block-end:10px}
.status-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:16px 0}
.status-facts dt{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.status-facts dd{margin:2px 0 0;font-size:16px;font-weight:600}
.status-actions{display:grid;gap:10px}
.status-actions form{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.status-actions .btn{flex:1}
.problems{margin:10px 0 0;padding-inline-start:20px;font-size:13px;color:#ffd0d6;display:grid;gap:4px}
.logout-form{margin-block-start:10px}

/* Footer headings are h2 here (one h1 per page, no skipped levels) */
.footer-heading{font-family:var(--ui);font-size:13px;font-weight:600;margin-block-end:14px}

/* Error page */
.error-page{text-align:center;padding-block:90px}
.error-page .crest{margin-inline:auto;margin-block-end:18px;inline-size:48px;block-size:52px}
.error-page .eyebrow{justify-content:center}
.error-page .lead{margin-inline:auto}
.error-page .cta-row{justify-content:center;margin-block-start:28px}

@media(max-width:1100px){.server-layout,.dash-layout{grid-template-columns:1fr}.dash-side{position:static}}
@media(max-width:800px){.mode-grid{grid-template-columns:1fr}.server-head{padding-inline:14px;margin-block-start:-44px}.server-head .guild-avatar.server-avatar{inline-size:76px;block-size:76px}.server-actions{inline-size:100%}.join-btn{flex:1}.verified-note{margin-inline:14px}.section-heading{flex-wrap:wrap}.search-inline{inline-size:100%}}
@media(max-width:520px){.link-row{grid-template-columns:1fr}.server-banner{aspect-ratio:2.2}.pagination .btn{flex:1}}

/* discover.css */
/* Discover (/servers/ + every clean list page): hero with search, mood chips, category rail, filter panel (sticky
   sidebar → bottom drawer on phones), results bar, pills, grid / compact list. Uses theme.css tokens. */

/* ── Hero ── */
.discover-hero { position: relative; overflow: hidden; padding-block: 8px 34px; }
.discover-glow { position: absolute; inset: -40% -10% auto; block-size: 520px; background: radial-gradient(closest-side, rgba(108, 139, 255, .22), transparent), radial-gradient(400px 220px at 75% 60%, rgba(255, 95, 180, .10), transparent); filter: blur(10px); pointer-events: none; }
.discover-hero .container { position: relative; }
.discover-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 520px); gap: 32px; align-items: end; margin-block-start: 22px; }
.discover-head h1 { font-size: clamp(30px, 4vw, 54px); font-weight: 800; letter-spacing: -.04em; line-height: 1.08; margin-block: 12px 10px; background: linear-gradient(180deg, #fff 30%, #b9c6f5); -webkit-background-clip: text; background-clip: text; color: transparent; }
.discover-intro { color: var(--muted); font-size: 15px; max-inline-size: 560px; }
.discover-search { margin: 0; inline-size: 100%; min-block-size: 56px; }
.discover-search input { block-size: 54px; }

/* ── Moods ── */
.moods { display: flex; gap: 10px; overflow-x: auto; padding-block: 4px 18px; scrollbar-width: none; mask-image: linear-gradient(90deg, #000 92%, transparent); }
.moods::-webkit-scrollbar { display: none; }
.mood { --c: var(--cyan); flex: none; display: inline-flex; align-items: center; gap: 9px; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line-strong); background: rgba(129, 151, 214, .06); font-size: 13px; font-weight: 600; color: #d6e0ff; transition: transform .2s var(--ease), border-color .2s, background .2s, box-shadow .2s; }
.mood .icon { inline-size: 17px; block-size: 17px; color: var(--c); }
.mood:hover { transform: translateY(-2px); border-color: var(--c); box-shadow: 0 8px 24px color-mix(in srgb, var(--c) 22%, transparent); }
.mood.is-on { background: color-mix(in srgb, var(--c) 18%, transparent); border-color: var(--c); color: #fff; box-shadow: 0 0 0 1px var(--c) inset, 0 10px 30px color-mix(in srgb, var(--c) 25%, transparent); }
.mood-trending { --c: #ff8a3d; }
.mood-busy { --c: var(--green); }
.mood-fresh { --c: var(--amber); }
.mood-verified { --c: #5ef0c4; }
.mood-cozy { --c: var(--pink); }
.mood-huge { --c: var(--violet); }

/* ── Category rail ── */
.cat-rail { display: grid; grid-auto-flow: column; grid-auto-columns: 150px; gap: 12px; overflow-x: auto; padding-block: 2px 22px; scroll-snap-type: x proximity; scrollbar-width: thin; }
.cat-card { position: relative; scroll-snap-align: start; block-size: 112px; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); isolation: isolate; transition: transform .3s var(--ease), border-color .3s, box-shadow .3s; }
.cat-card > img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; z-index: -2; transition: transform .6s var(--ease), filter .3s; filter: saturate(.85) brightness(.8); }
.cat-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(7, 11, 24, .1), rgba(7, 11, 24, .88)); }
.cat-copy { position: absolute; inset-inline: 12px; inset-block-end: 10px; display: grid; gap: 1px; }
.cat-copy .icon { inline-size: 20px; block-size: 20px; color: var(--cyan); margin-block-end: 4px; }
.cat-copy strong { font-size: 13px; line-height: 1.25; }
.cat-copy small { font-size: 11px; color: #aebbe3; }
.cat-card:hover { transform: translateY(-3px); border-color: rgba(34, 220, 255, .5); }
.cat-card:hover > img { transform: scale(1.08); filter: saturate(1) brightness(.95); }
.cat-card.is-on { border-color: transparent; box-shadow: 0 0 0 2px var(--cyan), 0 12px 30px rgba(34, 220, 255, .25); }
.cat-card.is-on > img { filter: saturate(1.1) brightness(1); }

/* ── Layout: sticky filter panel + results ── */
.discover-layout { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 28px; align-items: start; padding-block-end: 70px; }
.filters { position: sticky; inset-block-start: 92px; max-block-size: calc(100dvh - 110px); overflow-y: auto; overscroll-behavior: contain; padding: 18px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); backdrop-filter: var(--blur); box-shadow: var(--shadow-1); scrollbar-width: thin; }
.filters-head { display: flex; align-items: center; justify-content: space-between; margin-block-end: 12px; }
.filters-head h2 { font-size: 16px; display: flex; align-items: center; gap: 8px; }
.filters-close { display: none; }
.count-badge { display: inline-grid; place-items: center; min-inline-size: 20px; block-size: 20px; padding-inline: 6px; border-radius: 999px; background: var(--accent); color: #050a1a; font: 700 11px/1 var(--ui); }

.switches { display: grid; gap: 8px; margin-block-end: 8px; }
.switch { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px; border-radius: 14px; border: 1px solid var(--line); background: rgba(129, 151, 214, .04); cursor: pointer; transition: border-color .2s, background .2s; }
.switch:hover { border-color: var(--line-strong); }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch-track { position: relative; inline-size: 38px; block-size: 22px; border-radius: 999px; background: #232d50; transition: background .25s var(--ease); }
.switch-track::after { content: ''; position: absolute; inset-block-start: 3px; inset-inline-start: 3px; inline-size: 16px; block-size: 16px; border-radius: 50%; background: #b6c1e6; transition: transform .25s var(--ease), background .25s; }
.switch input:checked + .switch-track { background: var(--accent); }
.switch input:checked + .switch-track::after { transform: translateX(16px); background: #fff; }
[dir=rtl] .switch input:checked + .switch-track::after { transform: translateX(-16px); }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--cyan); outline-offset: 3px; }
.switch:has(input:checked) { border-color: rgba(34, 220, 255, .4); background: var(--accent-soft); }
.switch-copy { display: grid; line-height: 1.3; }
.switch-copy strong { font-size: 13px; }
.switch-copy small { font-size: 11px; color: var(--muted); }

.facet { border-block-start: 1px solid var(--line); }
.facet summary { display: flex; align-items: center; justify-content: space-between; padding-block: 14px; cursor: pointer; list-style: none; font-size: 13px; font-weight: 700; letter-spacing: .02em; }
.facet summary::-webkit-details-marker { display: none; }
.facet-chevron { inline-size: 18px; block-size: 18px; color: var(--muted); transition: transform .25s var(--ease); }
.facet[open] .facet-chevron { transform: rotate(180deg); }
.facet-body { padding-block-end: 14px; }
.opts { display: grid; gap: 2px; }
.opts-scroll { max-block-size: 240px; overflow-y: auto; padding-inline-end: 4px; }
.opt { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 10px; cursor: pointer; font-size: 13px; transition: background .15s; }
.opt:hover { background: rgba(129, 151, 214, .08); }
.opt input { accent-color: var(--cyan); inline-size: 16px; block-size: 16px; margin: 0; }
.opt-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opt-count { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.opt.is-empty { opacity: .45; }
.opt:has(input:checked) { background: var(--accent-soft); color: #fff; }
.chip-checks { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-check { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--line); background: rgba(129, 151, 214, .06); font-size: 12px; cursor: pointer; transition: border-color .2s, background .2s; }
.chip-check input { position: absolute; opacity: 0; pointer-events: none; }
.chip-check small { color: var(--muted); font-size: 10px; }
.chip-check:hover { border-color: var(--line-strong); }
.chip-check:has(input:checked) { background: var(--accent); color: #050a1a; border-color: transparent; font-weight: 600; }
.chip-check:has(input:focus-visible) { outline: 2px solid var(--cyan); outline-offset: 2px; }
.segmented { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; padding: 4px; border-radius: 14px; background: rgba(8, 13, 30, .7); border: 1px solid var(--line); }
.seg { position: relative; cursor: pointer; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span { display: grid; place-items: center; gap: 1px; padding: 7px 2px; border-radius: 10px; font-size: 11px; font-weight: 600; color: #c3cde8; text-align: center; line-height: 1.2; transition: background .2s, color .2s; }
.seg small { font-size: 10px; font-weight: 500; color: var(--muted); }
.seg input:checked + span { background: var(--accent); color: #050a1a; }
.seg input:checked + span small { color: rgba(5, 10, 26, .7); }
.seg input:focus-visible + span { outline: 2px solid var(--cyan); }
.seg-hint { margin-block-start: 8px; }
.filters-foot { display: flex; gap: 8px; padding-block-start: 12px; border-block-start: 1px solid var(--line); }
.filters-foot .btn { flex: 1; padding-inline: 10px; font-size: 13px; }
.discover-js .filters-apply { display: none; }

/* ── Results bar + pills ── */
.discover-results { min-inline-size: 0; transition: opacity .2s; }
.is-loading .discover-results { opacity: .55; pointer-events: none; }
.results-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-block-end: 14px; }
.results-count { margin: 0; font-size: 14px; color: var(--muted); }
.results-count strong { color: var(--text); font-size: 18px; font-family: var(--display); margin-inline-end: 4px; }
.results-tools { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; }
.filters-open { display: none; }
.sort-select { position: relative; display: flex; align-items: center; }
.sort-select .icon { position: absolute; inset-inline-start: 12px; inline-size: 16px; block-size: 16px; color: var(--muted); pointer-events: none; }
.sort-select select { appearance: none; min-block-size: 42px; padding: 0 34px 0 36px; border-radius: 12px; border: 1px solid var(--line-strong); background: rgba(129, 151, 214, .06) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239aa7cf' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center; color: var(--text); font-size: 13px; font-weight: 600; cursor: pointer; }
[dir=rtl] .sort-select select { background-position: left 12px center; padding: 0 36px 0 34px; }
.sort-select select option { background: var(--surface-solid); }
.view-switch { display: flex; padding: 3px; gap: 2px; border-radius: 12px; border: 1px solid var(--line-strong); background: rgba(129, 151, 214, .06); }
.view-switch a { display: grid; place-items: center; inline-size: 36px; block-size: 34px; border-radius: 9px; color: var(--muted); transition: background .2s, color .2s; }
.view-switch a .icon { inline-size: 18px; block-size: 18px; }
.view-switch a.is-on { background: var(--accent-soft); color: var(--text); }
.surprise { min-block-size: 42px; padding: 0 16px; gap: 8px; border: 1px solid rgba(255, 95, 180, .45); background: linear-gradient(120deg, rgba(255, 95, 180, .16), rgba(143, 91, 255, .16)); color: #ffd6ec; font-size: 13px; }
.surprise .icon { inline-size: 18px; block-size: 18px; transition: transform .5s var(--ease); }
.surprise:hover { border-color: var(--pink); box-shadow: 0 8px 30px rgba(255, 95, 180, .25); transform: translateY(-1px); }
.surprise:hover .icon { transform: rotate(180deg); }
.surprise[aria-disabled=true] { opacity: .4; pointer-events: none; }
.pill-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-block-end: 18px; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px 6px 12px; border-radius: 999px; background: var(--accent-soft); border: 1px solid rgba(34, 220, 255, .35); font-size: 12px; font-weight: 600; color: #e3ecff; transition: border-color .2s, background .2s; }
[dir=rtl] .pill { padding: 6px 12px 6px 8px; }
.pill .icon { inline-size: 14px; block-size: 14px; opacity: .7; }
.pill:hover { border-color: #ff8aa8; background: rgba(255, 95, 140, .16); }
.pill-clear { font-size: 12px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; padding: 6px; }
.pill-clear:hover { color: var(--text); }

/* grid: 3 columns beside the panel */
.discover-results .server-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.discover-empty { border: 1px dashed var(--line-strong); border-radius: var(--r-lg); padding: 50px 24px; background: rgba(129, 151, 214, .03); }
.discover-empty .pill-bar { justify-content: center; margin-block: 0 20px; }

/* ── Compact list ── */
.server-list { display: grid; gap: 10px; }
.server-row { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr) auto auto 40px; align-items: center; gap: 16px; padding: 14px 16px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); backdrop-filter: blur(10px); transition: border-color .25s, transform .25s var(--ease), background .25s; }
.server-row:hover { border-color: rgba(34, 220, 255, .45); transform: translateX(4px); background: rgba(26, 36, 66, .8); }
[dir=rtl] .server-row:hover { transform: translateX(-4px); }
.server-row .guild-avatar { position: static; inline-size: 56px; block-size: 56px; }
.row-main h2 { font-size: 16px; display: flex; align-items: center; gap: 8px; line-height: 1.3; }
.row-main p { color: var(--muted); font-size: 13px; margin-block: 3px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-main .tags { margin-block: 8px 0; }
.row-verified .icon { inline-size: 16px; block-size: 16px; color: #5ef0c4; }
.row-stats { display: grid; gap: 4px; font-size: 12px; color: var(--muted); text-align: end; }
.row-stats span { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.row-stats strong { color: var(--text); font-size: 14px; }
.row-rank { font-family: var(--display); font-size: 13px; color: #7f8db8; min-inline-size: 42px; text-align: center; }
.server-row .bookmark { position: relative; inset: auto; z-index: 2; }

/* related clean pages under Discover */
.discover-page .browse-section { padding-block-start: 0; }

@media (max-width: 1280px) { .discover-results .server-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 980px) {
  .discover-head { grid-template-columns: 1fr; gap: 18px; }
  .discover-layout { grid-template-columns: 1fr; }
  .filters-open { display: inline-flex; gap: 8px; }
  /* phones / tablets: the panel is a bottom drawer (only with JS; without JS it stays inline above the results) */
  .discover-js .filters { position: fixed; z-index: 60; inset: auto 0 0 0; max-block-size: 86dvh; border-radius: 22px 22px 0 0; transform: translateY(105%); background: rgba(12, 18, 38, .97); padding-block-end: max(18px, env(safe-area-inset-bottom)); }
  .discover-anim .filters { transition: transform .35s var(--ease); } /* only after the first frame: no slide-away flash on load */
  .discover-js .filters-close { display: inline-flex; }
  .discover-js .filters-apply { display: inline-flex; }
  .discover-js .filters-foot { position: sticky; inset-block-end: -18px; background: rgba(12, 18, 38, .97); padding-block: 12px; margin-inline: -18px; padding-inline: 18px; }
  body.drawer-open .filters { transform: none !important; }
  body.drawer-open { overflow: hidden; }
  body.drawer-open::after { content: ''; position: fixed; inset: 0; z-index: 55; background: rgba(3, 6, 16, .6); backdrop-filter: blur(4px); }
  .results-count { order: 2; flex-basis: 100%; }
}
@media (max-width: 640px) {
  .discover-results .server-grid { grid-template-columns: 1fr; }
  .results-tools { margin-inline-start: 0; inline-size: 100%; }
  .surprise span { display: none; }
  .sort-select { flex: 1; }
  .sort-select select { inline-size: 100%; }
  .server-row { grid-template-columns: 48px minmax(0, 1fr) 36px; }
  .server-row .guild-avatar { inline-size: 48px; block-size: 48px; }
  .row-stats, .row-rank { display: none; }
  .cat-rail { grid-auto-columns: 128px; }
  .cat-card { block-size: 96px; }
}
@media (prefers-reduced-motion: reduce) { .discover-js .filters, .switch-track::after, .server-row, .cat-card, .cat-card > img { transition: none; } }

/* View Transitions: results cross-fade, cards keep their place */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; }

/* discovery.css */
/* Discovery lists (/servers/new/, /servers/trending/): switcher tabs, numbered card grid with a "why" line per card,
   "how trending works" note. Reuses the Discover hero (discover.css) and theme.css tokens; logical properties only. */
.disc-hero .eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-block-start: 22px; }
.disc-hero .eyebrow .icon { inline-size: 16px; block-size: 16px; color: var(--amber); }
.disc-hero h1 { font-size: clamp(30px, 4vw, 54px); font-weight: 800; letter-spacing: -.04em; line-height: 1.08; margin-block: 12px 10px; }
.disc-switch { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 20px; }
.disc-tab { display: inline-flex; align-items: center; min-block-size: 40px; padding: 8px 18px; border-radius: 999px; border: 1px solid var(--line-strong, var(--line)); font-size: 13px; font-weight: 600; color: #d6e0ff; transition: border-color .2s, background .2s; }
.disc-tab:hover { border-color: var(--cyan); }
.disc-tab.is-on { background: color-mix(in srgb, var(--cyan) 16%, transparent); border-color: var(--cyan); color: #fff; }
.disc-results { padding-block-start: 24px; }
.disc-grid { list-style: none; padding: 0; margin: 0; }
.disc-item { display: flex; flex-direction: column; gap: 10px; min-inline-size: 0; }
.disc-item > .server-card { flex: 1; }
.disc-why { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0; }
.disc-why li { font-size: 12px; padding: 3px 10px; border-radius: 999px; background: rgba(255, 138, 61, .12); border: 1px solid rgba(255, 138, 61, .35); color: #ffd2b3; }
.disc-when { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); margin: 0; }
.disc-when .icon { inline-size: 14px; block-size: 14px; }
.disc-how { margin-block-start: 40px; padding: 20px 22px; border: 1px solid var(--line); border-radius: 14px; background: rgba(129, 151, 214, .05); }
.disc-how h2 { font-size: 16px; margin-block-end: 8px; }
.disc-how p { color: var(--muted); font-size: 14px; margin: 0; }
@media (max-width: 1100px) { .disc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .disc-grid { grid-template-columns: 1fr; } }

/* pages.css */
/* Phase 2 surfaces: votes, PRO badge + page accents, dashboard PRO panel, pricing (/pro/). Uses theme.css tokens. */

/* ── PRO badge ── */
.pro-badge { display: inline-flex; align-items: center; margin-inline-start: 10px; padding: 3px 9px; border-radius: 999px; background: linear-gradient(120deg, #ffd36e, #ff8a3d 50%, #ff5fb4); color: #1a0d05; font: 800 11px/1 var(--display); letter-spacing: .08em; vertical-align: middle; box-shadow: 0 4px 18px rgba(255, 138, 61, .35); }
.pro-badge.sm { margin-inline-start: 8px; padding: 2px 7px; font-size: 9px; }

/* ── Accent palettes (TG_ACCENTS keys) ── */
.accent-cyan { --a1: #22dcff; --a2: #6c8bff; }
.accent-violet { --a1: #8f5bff; --a2: #ff5fb4; }
.accent-pink { --a1: #ff5fb4; --a2: #ffb35c; }
.accent-amber { --a1: #ffc152; --a2: #ff7a45; }
.accent-green { --a1: #3ce0a0; --a2: #22dcff; }
.accent-red { --a1: #ff5468; --a2: #8f5bff; }
.accent-gold { --a1: #f5d06f; --a2: #c98b2b; }
.accent-ice { --a1: #b8f1ff; --a2: #7aa7ff; }
.accent-none { --a1: #2b3763; --a2: #121a31; }
.server-page[class*="accent-"] .server-banner { box-shadow: 0 0 0 1px color-mix(in srgb, var(--a1) 55%, transparent), 0 30px 80px color-mix(in srgb, var(--a1) 22%, transparent); }
.server-page[class*="accent-"] .server-head h1 { background: linear-gradient(100deg, #fff 20%, var(--a1) 70%, var(--a2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.server-page[class*="accent-"] .server-head h1 .pro-badge { -webkit-text-fill-color: #1a0d05; }
.server-page[class*="accent-"] .join-btn { background: linear-gradient(120deg, var(--a1), var(--a2)); }
.server-page[class*="accent-"] .server-side { border-color: color-mix(in srgb, var(--a1) 35%, transparent); }
.server-page[class*="accent-"] .server-avatar { border-color: var(--a1); box-shadow: 0 0 0 4px color-mix(in srgb, var(--a1) 25%, transparent), 0 10px 30px rgba(0, 0, 0, .5); }

/* ── Votes ── */
.server-actions { flex-wrap: wrap; }
.vote-form { display: contents; }
.vote-btn { gap: 9px; border: 1px solid rgba(255, 95, 180, .5); background: linear-gradient(120deg, rgba(255, 95, 180, .18), rgba(143, 91, 255, .18)); color: #ffe0f0; min-block-size: 46px; }
.vote-btn .icon { inline-size: 18px; block-size: 18px; color: var(--pink); transition: transform .3s var(--ease); }
.vote-btn:hover { border-color: var(--pink); box-shadow: 0 10px 30px rgba(255, 95, 180, .3); transform: translateY(-1px); }
.vote-btn:hover .icon { transform: scale(1.25); }
.vote-btn.is-voted { opacity: .75; cursor: default; }
.vote-btn.is-voted .icon { fill: var(--pink); }
.vote-count { padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, .1); font-size: 12px; font-variant-numeric: tabular-nums; }
.btn.icon-only { padding: 0; inline-size: 46px; min-block-size: 46px; }
.server-page > .notice { margin-block-start: 0; }

/* ── Dashboard PRO panel ── */
.pro-panel { position: relative; overflow: hidden; border-color: rgba(255, 179, 92, .45); background: linear-gradient(150deg, rgba(255, 138, 61, .16), rgba(143, 91, 255, .14) 60%, rgba(19, 27, 51, .7)); }
.pro-panel::before { content: ''; position: absolute; inset-block-start: -60px; inset-inline-end: -60px; inline-size: 160px; block-size: 160px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 179, 92, .35), transparent); pointer-events: none; }
.pro-panel .eyebrow { background: linear-gradient(120deg, #ffd36e, #ff5fb4); -webkit-background-clip: text; background-clip: text; }
.pro-panel ul { list-style: none; padding: 0; margin: 12px 0 16px; display: grid; gap: 8px; font-size: 14px; }
.pro-panel li { display: flex; gap: 8px; }
.pro-panel li .icon { inline-size: 18px; block-size: 18px; color: #ffc152; flex: none; }
.pro-ctas { display: grid; gap: 8px; margin-block-end: 8px; }
.accent-form fieldset { border: 0; padding: 0; margin: 12px 0; }
.accent-form legend { font-size: 13px; font-weight: 600; margin-block-end: 10px; }
.swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.swatch { position: relative; inline-size: 38px; block-size: 38px; border-radius: 12px; background: linear-gradient(135deg, var(--a1), var(--a2)); cursor: pointer; border: 2px solid transparent; transition: transform .2s var(--ease); }
.swatch input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.swatch:hover { transform: translateY(-2px); }
.swatch:has(input:checked) { border-color: #fff; box-shadow: 0 0 0 3px var(--a1); }
.swatch:has(input:focus-visible) { outline: 2px solid var(--cyan); outline-offset: 3px; }

/* ── Pricing ── */
.pricing-hero { text-align: center; padding-block: 40px 30px; }
.pricing-hero .eyebrow { justify-content: center; }
.pricing-hero .page-title { font-size: clamp(32px, 5vw, 64px); }
.pricing-hero .lead { margin-inline: auto; }
.fair-note { display: inline-flex; align-items: center; gap: 10px; margin-block-start: 18px; padding: 10px 16px; border-radius: 999px; border: 1px solid rgba(60, 224, 160, .35); background: rgba(60, 224, 160, .08); color: #b8f5df; font-size: 13px; }
.fair-note .icon { inline-size: 18px; block-size: 18px; color: var(--green); }
.plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; padding-block-end: 30px; }
.plan-card { position: relative; display: flex; flex-direction: column; padding: 30px 26px 26px; border-radius: 24px; border: 1px solid var(--line); background: var(--surface); backdrop-filter: var(--blur); box-shadow: var(--shadow-1); transition: transform .3s var(--ease), box-shadow .3s; }
.plan-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.plan-card.is-featured { border-color: transparent; background: linear-gradient(var(--surface-solid), var(--surface-solid)) padding-box, linear-gradient(140deg, #ffd36e, #ff5fb4, #8f5bff) border-box; border: 2px solid transparent; box-shadow: 0 30px 90px rgba(255, 95, 180, .18); }
.plan-ribbon { position: absolute; inset-block-start: -13px; inset-inline-start: 50%; translate: -50% 0; padding: 5px 14px; border-radius: 999px; background: linear-gradient(120deg, #ffd36e, #ff5fb4); color: #1a0d05; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
[dir=rtl] .plan-ribbon { translate: 50% 0; }
.plan-card h2 { font-size: 22px; }
.plan-tagline { color: var(--muted); font-size: 14px; margin-block: 6px 18px; min-block-size: 42px; }
.plan-price { display: flex; align-items: baseline; gap: 8px; }
.plan-price strong { font: 800 46px/1 var(--display); letter-spacing: -.03em; }
.plan-price span { color: var(--muted); font-size: 14px; }
.plan-yearly { color: #8fe6c4; font-size: 12px; margin-block: 6px 20px; min-block-size: 18px; }
.plan-card ul { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 11px; font-size: 14px; flex: 1; }
.plan-card li { display: flex; gap: 10px; align-items: flex-start; }
.plan-card li .icon { inline-size: 18px; block-size: 18px; color: var(--cyan); flex: none; margin-block-start: 2px; }
.plan-card.is-featured li .icon { color: #ffc152; }
.plan-cta { inline-size: 100%; }
.compare-wrap { overflow-x: auto; border-radius: 20px; border: 1px solid var(--line); background: var(--surface); }
.compare { inline-size: 100%; border-collapse: collapse; min-inline-size: 640px; }
.compare th, .compare td { padding: 14px 18px; text-align: center; border-block-end: 1px solid var(--line); font-size: 14px; }
.compare thead th { font-family: var(--display); font-size: 13px; letter-spacing: .02em; background: rgba(129, 151, 214, .06); position: sticky; inset-block-start: 0; }
.compare thead th:nth-child(3) { color: #ffd36e; }
.compare tbody th { text-align: start; display: grid; gap: 3px; font-weight: 400; }
.compare tbody th small { color: var(--muted); font-size: 12px; }
.compare tbody tr:last-child > * { border-block-end: 0; }
.compare tbody tr:hover { background: rgba(129, 151, 214, .04); }
.compare .yes .icon { inline-size: 20px; block-size: 20px; color: var(--green); }
.compare .no { color: #56617f; }
.compare .val { font-size: 12px; color: #c3cde8; }
.compare td:nth-child(3) { background: rgba(255, 179, 92, .04); }
.faq { border-block-end: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-block: 18px; cursor: pointer; list-style: none; font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.faq[open] .facet-chevron { transform: rotate(180deg); }
.faq p { color: #c3cde8; padding-block-end: 18px; line-height: 1.75; }
@media (max-width: 980px) { .plan-grid { grid-template-columns: 1fr; max-inline-size: 520px; margin-inline: auto; } }

/* content.css */
/* Long-form pages: legal documents + guides (table of contents, readable prose, guide cards). Uses theme.css tokens. */
.doc-layout { padding-block: 30px 70px; }
.doc-head { max-inline-size: 820px; margin-block-end: 30px; }
.doc-head .page-title { font-size: clamp(30px, 4.4vw, 54px); }
.guide-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--muted); font-size: 13px; margin-block-start: 14px; }
.guide-meta .icon { inline-size: 16px; block-size: 16px; }
.doc-grid { display: grid; grid-template-columns: 240px minmax(0, 760px); gap: 48px; align-items: start; }
.toc { position: sticky; inset-block-start: 100px; padding: 18px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); backdrop-filter: var(--blur); font-size: 13px; }
.toc-title { font-weight: 700; margin-block-end: 10px; color: var(--text); }
.toc ol { margin: 0; padding-inline-start: 18px; display: grid; gap: 8px; color: var(--muted); }
.toc a:hover { color: var(--cyan); }
.prose-doc { font-size: 16px; line-height: 1.85; color: #d3dbf2; }
.prose-doc h2 { font-size: clamp(20px, 2.2vw, 26px); color: var(--text); margin-block: 42px 14px; scroll-margin-block-start: 100px; letter-spacing: -.02em; }
.prose-doc h3 { font-size: 18px; color: var(--text); margin-block: 26px 10px; scroll-margin-block-start: 100px; }
.prose-doc p { margin-block: 0 16px; }
.prose-doc ul, .prose-doc ol { margin-block: 0 18px; padding-inline-start: 24px; display: grid; gap: 8px; }
.prose-doc li::marker { color: var(--cyan); }
.prose-doc a { color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(34, 220, 255, .4); }
.prose-doc a:hover { text-decoration-color: var(--cyan); }
.prose-doc strong { color: #fff; }
.prose-doc blockquote { margin: 0 0 18px; padding: 14px 18px; border-inline-start: 3px solid var(--violet); border-radius: 0 14px 14px 0; background: rgba(143, 91, 255, .08); }
[dir=rtl] .prose-doc blockquote { border-radius: 14px 0 0 14px; }
.legal-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 40px; padding-block-start: 24px; border-block-start: 1px solid var(--line); }
.legal-nav a { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); font-size: 13px; color: #c8d3ea; }
.legal-nav a[aria-current=page] { background: var(--accent-soft); border-color: rgba(34, 220, 255, .4); color: #fff; }
.guides-hero { padding-block: 40px 20px; }
.guide-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; padding-block-end: 60px; }
.guide-card { border-radius: 22px; border: 1px solid var(--line); background: linear-gradient(160deg, rgba(26, 36, 66, .72), rgba(12, 18, 36, .72)); transition: transform .3s var(--ease), border-color .3s, box-shadow .3s; }
.guide-card:hover { transform: translateY(-4px); border-color: rgba(34, 220, 255, .45); box-shadow: var(--shadow-2); }
.guide-link { display: flex; flex-direction: column; gap: 10px; padding: 24px; block-size: 100%; }
.guide-kicker { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
.guide-kicker .icon { inline-size: 16px; block-size: 16px; color: var(--cyan); }
.guide-card h2 { font-size: 19px; line-height: 1.3; letter-spacing: -.02em; }
.guide-card p { color: var(--muted); font-size: 14px; flex: 1; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 11px; }
.footer-legal a { color: #9aabcf; }
.footer-legal a:hover { color: var(--cyan); }
@media (max-width: 1100px) { .doc-grid { grid-template-columns: 1fr; } .toc { position: static; } .guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .guide-grid { grid-template-columns: 1fr; } }

/* listcopy.css */
/* List page copy (docs/specs/topguilds.md §19): hand-written body + FAQ under the Discover grid on clean list pages.
   Theme tokens only, logical properties only (RTL safe). Typography of the body comes from .prose-doc (content.css). */
.listcopy { display: grid; gap: clamp(28px, 4vw, 48px); grid-template-columns: minmax(0, 1fr); padding-block: clamp(32px, 5vw, 56px) 8px; border-block-start: 1px solid var(--line); }
@media (min-width: 980px) { .listcopy { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; } }
.listcopy-body { max-inline-size: 72ch; }
.listcopy-body > h2:first-child { margin-block-start: 0; }
.listcopy-faq { display: grid; gap: 10px; align-content: start; }
.listcopy-faq-title { font-size: clamp(20px, 2.2vw, 26px); letter-spacing: -.02em; margin-block: 0 8px; color: var(--text); }
.listcopy-qa { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; transition: border-color .2s ease; }
.listcopy-qa[open], .listcopy-qa:hover { border-color: color-mix(in srgb, var(--cyan) 45%, var(--line)); }
.listcopy-qa summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 14px; padding-inline: 18px; cursor: pointer; list-style: none; }
.listcopy-qa summary::-webkit-details-marker { display: none; }
.listcopy-qa summary:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: 14px; }
.listcopy-qa h3 { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.45; color: var(--text); }
.listcopy-chevron { flex: none; inline-size: 18px; block-size: 18px; color: var(--muted); transition: transform .2s ease; }
.listcopy-qa[open] .listcopy-chevron { transform: rotate(180deg); }
.listcopy-answer { padding-block: 0 14px; padding-inline: 18px; font-size: 15px; line-height: 1.7; color: var(--muted); }
.listcopy-answer p { margin-block: 0 10px; }
.listcopy-answer p:last-child { margin-block-end: 0; }
.discover-intro a { color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .listcopy-qa, .listcopy-chevron { transition: none; } }

/* theme.css */
/* TopGuilds theme v2 — loaded last, upgrades every page: aurora backdrop + fine grain, glass surfaces, gradient
   hairlines, a cyan→violet accent, softer radii, deeper shadows, glowing focus. Same palette family as the approved
   prototype (cyan #18d7ff, violet #8a4dff on midnight). Logical properties only (RTL). */
:root {
  --bg: #070b18;
  --bg-2: #0b1124;
  --surface: rgba(19, 27, 51, .62);
  --surface-solid: #121a31;
  --raised: rgba(30, 41, 74, .72);
  --line: rgba(129, 151, 214, .16);
  --line-strong: rgba(129, 151, 214, .3);
  --text: #f3f6ff;
  --muted: #9aa7cf;
  --cyan: #22dcff;
  --violet: #8f5bff;
  --pink: #ff5fb4;
  --green: #3ce0a0;
  --amber: #ffc152;
  --accent: linear-gradient(120deg, #22dcff 0%, #6c8bff 50%, #a35bff 100%);
  --accent-soft: linear-gradient(120deg, rgba(34, 220, 255, .16), rgba(143, 91, 255, .16));
  --glow-cyan: 0 0 0 1px rgba(34, 220, 255, .35), 0 8px 32px rgba(34, 220, 255, .18);
  --shadow-1: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 10px 30px rgba(2, 6, 20, .45);
  --shadow-2: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 24px 60px rgba(2, 6, 20, .6);
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --blur: saturate(140%) blur(18px);
  --ease: cubic-bezier(.2, .8, .2, 1);
}

/* ── Backdrop: aurora + grain (fixed, behind everything) ── */
html { background: var(--bg); }
body {
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(143, 91, 255, .16), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, rgba(34, 220, 255, .10), transparent 60%),
    radial-gradient(800px 700px at 50% 120%, rgba(108, 139, 255, .10), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
::selection { background: #6b3ff0; color: #fff; }
* { scrollbar-width: thin; scrollbar-color: #2b3763 transparent; }

/* ── Typography polish ── */
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
.eyebrow { background: var(--accent); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: .16em; }
.eyebrow .icon, .eyebrow span:not(.pro-label) { -webkit-text-fill-color: initial; }
.list-title, .page-title, .section-heading h2 { letter-spacing: -.035em; }

/* ── Focus: one glowing ring everywhere ── */
:where(a, button, input, select, textarea, summary, label):focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 8px; box-shadow: 0 0 0 6px rgba(34, 220, 255, .14); }

/* ── Header: glass bar with a gradient hairline ── */
.header { background: rgba(7, 11, 24, .66); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border-block-end: 0; }
.header::after { content: ''; position: absolute; inset-inline: 0; inset-block-end: 0; block-size: 1px; background: linear-gradient(90deg, transparent, rgba(34, 220, 255, .45), rgba(143, 91, 255, .45), transparent); }
.desktop-nav { gap: 6px; }
.desktop-nav a { padding-inline: 14px; border-radius: 999px; margin-block: 18px; transition: background .2s var(--ease), color .2s; }
.desktop-nav a:hover { background: rgba(129, 151, 214, .1); }
.desktop-nav a.nav-active { background: var(--accent-soft); color: var(--text); }
.desktop-nav a.nav-active::after, .nav-active:after { display: none; }
.language-menu { background: rgba(14, 20, 40, .92); backdrop-filter: var(--blur); border-color: var(--line-strong); border-radius: var(--r-md); }

/* ── Buttons ── */
.btn { border-radius: 12px; transition: transform .2s var(--ease), box-shadow .25s var(--ease), background .25s, border-color .25s, color .2s; }
.primary { background: var(--accent); color: #050a1a; position: relative; overflow: hidden; box-shadow: 0 6px 24px rgba(76, 140, 255, .25); }
.primary::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%); transform: translateX(-120%); transition: transform .7s var(--ease); }
.primary:hover { background: var(--accent); box-shadow: 0 10px 36px rgba(76, 140, 255, .4); transform: translateY(-1px); }
.primary:hover::after { transform: translateX(120%); }
.primary:active { transform: translateY(0) scale(.98); }
.ghost { background: rgba(129, 151, 214, .06); border: 1px solid var(--line-strong); backdrop-filter: blur(8px); }
.ghost:hover { background: rgba(129, 151, 214, .14); border-color: rgba(34, 220, 255, .5); }
.icon-btn { border-radius: 12px; border-color: var(--line-strong); background: rgba(129, 151, 214, .05); }
.text-link { color: var(--cyan); }
.search button { background: var(--accent); color: #050a1a; }
.search button:hover { background: var(--accent); filter: brightness(1.08); }
.search { border-radius: var(--r-md); border-color: var(--line-strong); background: rgba(12, 18, 38, .78); backdrop-filter: var(--blur); box-shadow: var(--shadow-2); transition: border-color .2s, box-shadow .2s; }
.search:focus-within { border-color: rgba(34, 220, 255, .65); box-shadow: var(--shadow-2), var(--glow-cyan); }
.search input:focus-visible { outline: none; box-shadow: none; }

/* ── Cards: glass, gradient border on hover, softer CTA ── */
.server-card { border-radius: var(--r-lg); border: 1px solid var(--line); background: linear-gradient(160deg, rgba(26, 36, 66, .72), rgba(12, 18, 36, .72)); backdrop-filter: blur(10px); box-shadow: var(--shadow-1); transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s; isolation: isolate; }
.server-card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--accent); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .35s var(--ease); pointer-events: none; z-index: 2; }
.server-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-2), 0 0 40px rgba(108, 139, 255, .14); border-color: transparent; }
.server-card:hover::before { opacity: 1; }
.card-media { aspect-ratio: 2; }
.card-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(10, 15, 32, .85)); pointer-events: none; }
.guild-avatar { border-radius: 14px; border: 2px solid rgba(255, 255, 255, .18); box-shadow: 0 6px 20px rgba(0, 0, 0, .5); background: #0b1124; z-index: 1; }
.tags span { background: rgba(129, 151, 214, .1); border-color: var(--line); border-radius: 999px; padding-inline: 10px; color: #cfdcff; }
.card-cta { background: transparent; color: var(--cyan); border: 1px solid rgba(34, 220, 255, .35); border-radius: 12px; transition: background .25s var(--ease), color .25s; }
.server-card:hover .card-cta { background: var(--accent); color: #050a1a; border-color: transparent; }
.online-dot { background: var(--green); box-shadow: 0 0 0 3px rgba(60, 224, 160, .18); animation: tg-pulse 2.4s ease-in-out infinite; }
@keyframes tg-pulse { 50% { box-shadow: 0 0 0 6px rgba(60, 224, 160, 0); } }
.spotlight-label, .verified-label { border-radius: 999px; backdrop-filter: blur(10px); }
.bookmark { border-radius: 12px; }

/* ── Chips, panels, sections ── */
.chip { border-radius: 999px; border-color: var(--line); background: rgba(129, 151, 214, .07); transition: border-color .2s, background .2s, transform .2s var(--ease); }
.chip:hover { border-color: rgba(34, 220, 255, .55); background: var(--accent-soft); transform: translateY(-1px); }
.panel, .server-side, .steps li, .mode-card, .dash-row, .fieldset, .consent { border-radius: var(--r-lg); border-color: var(--line); background: var(--surface); backdrop-filter: var(--blur); box-shadow: var(--shadow-1); }
.mode-card.mode-bot, .bot-panel { background: linear-gradient(150deg, rgba(143, 91, 255, .22), rgba(19, 27, 51, .7)); border-color: rgba(143, 91, 255, .45); }
.server-banner { border-radius: var(--r-lg); border-color: var(--line); box-shadow: var(--shadow-2); }
.category-tile { border-radius: var(--r-lg); }
.state-badge { border-radius: 999px; }
.notice { border-radius: var(--r-md); backdrop-filter: var(--blur); }
.field input, .field textarea, .field select, .link-row input, .link-row select { border-radius: 12px; background: rgba(8, 13, 30, .7); border-color: var(--line-strong); transition: border-color .2s, box-shadow .2s; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: rgba(34, 220, 255, .7); box-shadow: var(--glow-cyan); }
.pagination li > * { border-radius: 12px; border-color: var(--line); background: rgba(129, 151, 214, .05); }
.pagination [aria-current=page] { background: var(--accent); color: #050a1a; border-color: transparent; }

/* ── Footer: gradient hairline + glow ── */
.footer { background: linear-gradient(180deg, rgba(7, 11, 24, 0), rgba(7, 11, 24, .9) 30%); border-block-start: 0; position: relative; }
.footer::before { content: ''; position: absolute; inset-inline: 10%; inset-block-start: 0; block-size: 1px; background: linear-gradient(90deg, transparent, rgba(34, 220, 255, .4), rgba(143, 91, 255, .4), transparent); }
.toast { border-radius: var(--r-md); background: rgba(14, 30, 44, .9); backdrop-filter: var(--blur); border-color: rgba(34, 220, 255, .4); }

@media (prefers-reduced-motion: reduce) {
  .online-dot { animation: none; }
  .primary::after { display: none; }
}

/* wow.css */
/* "Wow" layer: aurora hero, live stats, just-bumped ticker, podium, card tilt + glare, shrinking header, PRO rings,
   glowing CTA. Every animation stops with prefers-reduced-motion or the toolbar's "Stop animations" (a11y.css). */

/* ── Hero aurora ── */
.aurora { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; mix-blend-mode: screen; opacity: .55; }
.aurora span { position: absolute; inline-size: 46vw; block-size: 46vw; border-radius: 50%; filter: blur(80px); animation: tg-drift 22s ease-in-out infinite alternate; }
.aurora span:nth-child(1) { inset-block-start: -18vw; inset-inline-start: -8vw; background: radial-gradient(closest-side, rgba(34, 220, 255, .55), transparent); }
.aurora span:nth-child(2) { inset-block-start: -10vw; inset-inline-end: -10vw; background: radial-gradient(closest-side, rgba(143, 91, 255, .6), transparent); animation-duration: 26s; animation-delay: -6s; }
.aurora span:nth-child(3) { inset-block-end: -24vw; inset-inline-start: 30vw; background: radial-gradient(closest-side, rgba(255, 95, 180, .35), transparent); animation-duration: 30s; animation-delay: -12s; }
@keyframes tg-drift { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(6vw, 3vw, 0) scale(1.15); } 100% { transform: translate3d(-4vw, -2vw, 0) scale(.95); } }
.hero h1 { background: linear-gradient(180deg, #fff 35%, #c7d3ff); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 6px 30px rgba(7, 13, 31, .9)); }
.hero-last::after { animation: tg-sheen 6s ease-in-out infinite; background-size: 200% 100%; }
@keyframes tg-sheen { 50% { background-position: 100% 0; } }

/* ── Live stats ── */
.hero-stats { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 26px 0 0; }
.hero-stats li { display: flex; align-items: baseline; gap: 8px; padding: 10px 18px; border-radius: 999px; border: 1px solid rgba(129, 151, 214, .25); background: rgba(8, 13, 30, .55); backdrop-filter: blur(12px); }
.hero-stats strong { display: inline-block; text-align: center; font: 800 20px/1 var(--display); background: var(--accent); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.hero-stats span { font-size: 12px; color: #c3cde8; }

/* ── Just-bumped ticker ── */
.ticker { position: relative; display: flex; align-items: center; gap: 0; border-block: 1px solid var(--line); background: linear-gradient(90deg, rgba(34, 220, 255, .06), rgba(143, 91, 255, .06)); overflow: hidden; }
.ticker-label { position: relative; z-index: 2; flex: none; display: flex; align-items: center; gap: 8px; padding: 14px 20px; font: 700 12px/1 var(--ui); letter-spacing: .12em; text-transform: uppercase; color: #ffb36b; background: linear-gradient(90deg, var(--bg) 70%, transparent); }
.ticker-label .icon { inline-size: 18px; block-size: 18px; color: #ff8a3d; }
.ticker-viewport { flex: 1; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.ticker-track { display: flex; gap: 10px; inline-size: max-content; list-style: none; margin: 0; padding: 10px 0; animation: tg-ticker 48s linear infinite; }
.ticker:hover .ticker-track, .ticker:focus-within .ticker-track { animation-play-state: paused; }
[dir=rtl] .ticker-track { animation-name: tg-ticker-rtl; }
@keyframes tg-ticker { to { transform: translateX(-50%); } }
@keyframes tg-ticker-rtl { to { transform: translateX(50%); } }
.ticker-track a { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 999px; border: 1px solid var(--line); background: rgba(19, 27, 51, .7); white-space: nowrap; font-size: 13px; transition: border-color .2s, background .2s; }
[dir=rtl] .ticker-track a { padding: 6px 6px 6px 14px; }
.ticker-track a:hover { border-color: rgba(34, 220, 255, .55); background: rgba(26, 36, 66, .9); }
.ticker-track .guild-avatar.ticker-avatar { position: static; inline-size: 30px; block-size: 30px; border-radius: 50%; border-width: 1px; }
.ticker-track .guild-avatar .icon { inline-size: 16px; block-size: 16px; }
.ticker-name { max-inline-size: 180px; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.ticker-online { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; }

/* ── Podium ── */
.podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: end; gap: 18px; list-style: none; padding: 30px 0 0; margin: 0; }
.podium-spot { display: grid; gap: 0; }
.podium-card { position: relative; display: grid; justify-items: center; gap: 8px; padding: 34px 20px 22px; text-align: center; border-radius: 24px 24px 0 0; border: 1px solid var(--line); border-block-end: 0; background: linear-gradient(180deg, rgba(26, 36, 66, .85), rgba(12, 18, 36, .9)); transition: transform .35s var(--ease); isolation: isolate; }
.podium-card:hover { transform: translateY(-6px); }
.podium-card strong { font-size: 17px; line-height: 1.3; }
.podium-tagline { color: var(--muted); font-size: 13px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.podium-stats { display: flex; gap: 14px; font-size: 12px; color: #c8d3ea; }
.podium-stats > span { display: inline-flex; align-items: center; gap: 5px; }
.podium-stats .icon { inline-size: 15px; block-size: 15px; }
.podium .guild-avatar.podium-avatar { position: static; inline-size: 76px; block-size: 76px; border-radius: 22px; }
.podium .guild-avatar.podium-avatar .icon { inline-size: 36px; block-size: 36px; }
.podium-medal { position: absolute; inset-block-start: -18px; display: grid; place-items: center; inline-size: 40px; block-size: 40px; border-radius: 50%; font: 800 17px/1 var(--display); color: #1a0d05; box-shadow: 0 8px 24px rgba(0, 0, 0, .5); }
.podium-base { display: grid; place-items: center; font: 800 54px/1 var(--display); color: rgba(255, 255, 255, .1); border-radius: 0 0 18px 18px; border: 1px solid var(--line); border-block-start: 0; }
.place-1 .podium-base { block-size: 120px; background: linear-gradient(180deg, rgba(255, 211, 110, .22), rgba(255, 211, 110, .04)); }
.place-2 .podium-base { block-size: 84px; background: linear-gradient(180deg, rgba(200, 214, 240, .18), rgba(200, 214, 240, .03)); }
.place-3 .podium-base { block-size: 60px; background: linear-gradient(180deg, rgba(255, 150, 90, .18), rgba(255, 150, 90, .03)); }
.place-1 .podium-medal { background: linear-gradient(135deg, #fff1b8, #ffd36e 40%, #c98b2b); }
.place-2 .podium-medal { background: linear-gradient(135deg, #ffffff, #c8d6f0 50%, #7d8aa8); }
.place-3 .podium-medal { background: linear-gradient(135deg, #ffd2b0, #ff965a 50%, #9c4f22); }
.place-1 .podium-card { border-color: transparent; }
.place-1 .podium-card::before { content: ''; position: absolute; inset: -1px -1px 0; z-index: -1; border-radius: inherit; padding: 2px 2px 0; background: conic-gradient(from var(--spin, 0deg), #ffd36e, #ff5fb4, #8f5bff, #22dcff, #ffd36e); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: tg-spin 6s linear infinite; }
.place-1 .podium-card::after { content: ''; position: absolute; inset: 20% 10% auto; block-size: 60%; z-index: -2; background: radial-gradient(closest-side, rgba(255, 211, 110, .25), transparent); filter: blur(20px); }
@property --spin { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes tg-spin { to { --spin: 360deg; } }

/* ── Card tilt + glare (app.js sets --rx / --ry / --gx / --gy) ── */
.server-card { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0)); }
.server-card:hover { --lift: -6px; transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift)); }
.server-card .card-media::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; background: radial-gradient(400px circle at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, .22), transparent 45%); transition: opacity .3s; }
.server-card:hover .card-media::before { opacity: 1; }

/* ── Header shrinks on scroll ── */
/* the header keeps its height (no layout shift); scrolling only deepens its shadow */
.is-scrolled .header { box-shadow: 0 10px 40px rgba(0, 0, 0, .35); }

/* ── PRO avatar ring + glowing CTA ── */
.server-page.is-pro .server-avatar { position: relative; }
.server-page.is-pro .server-head .guild-avatar.server-avatar { outline: 2px solid transparent; box-shadow: 0 0 0 3px #0b1124, 0 0 0 6px rgba(255, 179, 92, .8), 0 0 40px rgba(255, 138, 61, .45); }
.closing .btn.primary { animation: tg-glow 3.2s ease-in-out infinite; }
@keyframes tg-glow { 50% { box-shadow: 0 10px 50px rgba(108, 139, 255, .55), 0 0 0 6px rgba(143, 91, 255, .15); } }

@media (max-width: 800px) {
  .podium { grid-template-columns: 1fr; align-items: stretch; }
  .podium-spot.place-1 { order: -1; }
  .podium-base { display: none; }
  .podium-card { border-radius: 24px; border-block-end: 1px solid var(--line); }
  .hero-stats li { padding: 8px 14px; }
  .ticker-label span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .aurora span, .ticker-track, .place-1 .podium-card::before, .closing .btn.primary, .hero-last::after { animation: none !important; }
  .ticker-viewport { overflow-x: auto; }
  .server-card { transform: none !important; }
}
.a11y-still .ticker-viewport { overflow-x: auto; }
.a11y-still .server-card { transform: none !important; }

/* card.css */
/* Server card v2 (views/ui.js card()): category-coloured cover, badges, avatar ring, tags, stats + Join.
   Overrides the prototype's .server-card rules; loaded after wow.css (tilt / glare still apply). */
.card-v2 { --c1: #22dcff; --c2: #6c8bff; display: flex; flex-direction: column; border-radius: 22px; overflow: hidden; }
.cat-gaming { --c1: #ffb35c; --c2: #ff5f6d; }
.cat-creative { --c1: #22dcff; --c2: #8f5bff; }
.cat-education { --c1: #ffd36e; --c2: #3ce0a0; }
.cat-music { --c1: #ff5fb4; --c2: #8f5bff; }
.cat-tech { --c1: #3ce0a0; --c2: #22dcff; }
.cat-anime { --c1: #ff7ac6; --c2: #7aa7ff; }
.cat-community { --c1: #8f5bff; --c2: #22dcff; }
.cat-entertainment { --c1: #ff8a3d; --c2: #ff5fb4; }
.cat-creators { --c1: #ff5468; --c2: #ffb35c; }
.cat-roleplay { --c1: #b98bff; --c2: #ff5fb4; }
.cat-social { --c1: #5ef0c4; --c2: #6c8bff; }

/* cover */
.card-cover { position: relative; aspect-ratio: 2.6; overflow: hidden; isolation: isolate; background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--c1) 55%, #0b1124), transparent 60%), radial-gradient(120% 140% at 100% 100%, color-mix(in srgb, var(--c2) 50%, #0b1124), transparent 60%), #0e1530; }
.card-cover .cover-img, .card-cover .cover-art { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.card-cover .cover-art { opacity: .35; mix-blend-mode: luminosity; filter: saturate(.6); }
.card-cover.has-banner .cover-img { opacity: 1; }
.cover-glyph { position: absolute; inset-block-start: 50%; inset-inline-end: -6%; translate: 0 -50%; color: color-mix(in srgb, var(--c1) 70%, #fff); opacity: .28; z-index: 1; pointer-events: none; }
[dir=rtl] .cover-glyph { inset-inline-end: auto; inset-inline-start: -6%; }
.cover-glyph .icon { inline-size: 150px; block-size: 150px; stroke-width: 1.1; }
.cover-shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(7, 11, 24, 0) 25%, rgba(10, 15, 32, .94)), linear-gradient(125deg, color-mix(in srgb, var(--c1) 38%, transparent), color-mix(in srgb, var(--c2) 26%, transparent) 70%); pointer-events: none; }
.card-cover.has-banner .cover-shade { background: linear-gradient(180deg, rgba(7, 11, 24, 0) 35%, rgba(10, 15, 32, .94)); }
.server-card.card-v2:hover .cover-img, .server-card.card-v2:hover .cover-art { transform: scale(1.06); }
.card-v2 .card-media, .card-v2 .card-cta, .card-v2 > .card-body > .guild-avatar:not(.card-avatar) { display: none; }
.cover-badges { position: absolute; z-index: 2; inset-block-start: 12px; inset-inline-start: 12px; display: flex; gap: 6px; align-items: center; }
.rank-badge { padding: 4px 9px; border-radius: 999px; background: rgba(7, 11, 24, .72); border: 1px solid rgba(255, 255, 255, .18); backdrop-filter: blur(8px); font: 700 11px/1 var(--display); color: #fff; }
.cover-badges .pro-badge { margin: 0; }
.verified-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px 4px 6px; border-radius: 999px; background: rgba(9, 40, 34, .8); border: 1px solid rgba(94, 240, 196, .45); color: #b9fbe6; font-size: 11px; font-weight: 600; backdrop-filter: blur(8px); }
.verified-chip .icon { inline-size: 14px; block-size: 14px; color: #5ef0c4; }
.card-v2 .bookmark { inset-block-start: 10px; inset-inline-end: 10px; z-index: 3; }

/* body */
.card-v2 .card-body { position: relative; display: flex; flex-direction: column; gap: 12px; flex: 1; padding: 0 18px 16px; }
.card-head { display: flex; align-items: flex-end; gap: 12px; margin-block-start: -28px; position: relative; z-index: 2; }
.card-v2 .guild-avatar.card-avatar { position: static; flex: none; inline-size: 60px; block-size: 60px; border-radius: 18px; border: 3px solid #0d1430; background: #0d1430; box-shadow: 0 0 0 1px color-mix(in srgb, var(--c1) 70%, transparent), 0 10px 26px rgba(0, 0, 0, .55); }
.card-v2 .guild-avatar.card-avatar .icon { inline-size: 28px; block-size: 28px; color: var(--c1); }
.card-v2.is-pro .guild-avatar.card-avatar { box-shadow: 0 0 0 2px #ffb35c, 0 0 24px rgba(255, 138, 61, .45); }
.card-titles { min-inline-size: 0; padding-block-end: 2px; }
.card-v2 h2, .card-v2 h3 { font-size: 16px; line-height: 1.25; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0; }
.card-sub { font-size: 12px; color: var(--muted); margin-block-start: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-v2 .card-description { margin: 0; color: #c3cde8; font-size: 13.5px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-block-size: 42px; }
.card-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.card-tags span { font-size: 11px; padding: 3px 9px; border-radius: 999px; color: color-mix(in srgb, var(--c1) 45%, #e8eeff); background: color-mix(in srgb, var(--c1) 12%, transparent); border: 1px solid color-mix(in srgb, var(--c1) 28%, transparent); }
.card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-block-start: auto; padding-block-start: 12px; border-block-start: 1px solid var(--line); }
.card-stats { display: flex; gap: 14px; font-size: 12px; color: var(--muted); }
.card-stats > span { display: inline-flex; align-items: center; gap: 5px; }
.card-stats b { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.card-stats .icon { inline-size: 15px; block-size: 15px; }
.card-join { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; font-size: 12px; font-weight: 700; color: #050a1a; background: linear-gradient(120deg, var(--c1), var(--c2)); box-shadow: 0 6px 18px color-mix(in srgb, var(--c1) 30%, transparent); transition: transform .2s var(--ease), box-shadow .2s; }
.card-join .icon { inline-size: 14px; block-size: 14px; }
.card-join:hover { transform: translateY(-1px); box-shadow: 0 10px 26px color-mix(in srgb, var(--c1) 45%, transparent); }
.server-card.card-v2:hover { border-color: color-mix(in srgb, var(--c1) 55%, transparent); box-shadow: var(--shadow-2), 0 0 40px color-mix(in srgb, var(--c1) 16%, transparent); }
.server-card.card-v2::before { background: linear-gradient(140deg, var(--c1), var(--c2)); }
.card-v2.spotlight-card { grid-column: auto; }

/* analytics.css */
/* Owner analytics page (views/analytics.js): KPI tiles, SVG charts, bar lists, funnel, peer bars, locked PRO cards. */
.analytics { padding-block: 26px 70px; }
.an-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-block-end: 22px; }
.an-head .page-title { margin-block: 8px; }
.an-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.range-tabs { gap: 4px; padding: 4px; border-radius: 14px; border: 1px solid var(--line); background: rgba(129, 151, 214, .05); }
.range-tabs a { padding: 8px 14px; border-radius: 10px; font-size: 13px; }
.range-tabs a::after { display: none !important; }
.range-tabs a[aria-current=true] { background: var(--accent); color: #050a1a; }
.range-tabs .is-locked { color: #7d88aa; display: inline-flex; align-items: center; gap: 5px; }
.range-tabs .is-locked .icon { inline-size: 13px; block-size: 13px; }
.kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-block-end: 18px; }
.kpi { display: grid; gap: 4px; padding: 16px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); backdrop-filter: var(--blur); }
.kpi-label { font-size: 12px; color: var(--muted); }
.kpi strong { font: 800 26px/1.1 var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.delta { font-size: 12px; font-weight: 700; }
.delta.up { color: #5ef0c4; }
.delta.down { color: #ff8aa0; }
.an-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.an-grid > :first-child { grid-column: 1 / -1; }
.an-panel h2 { font-size: 16px; margin-block-end: 12px; }
.chart { margin: 0; }
.chart svg { inline-size: 100%; block-size: auto; display: block; overflow: visible; }
.chart .grid { stroke: rgba(129, 151, 214, .14); stroke-width: 1; }
.chart .axis { fill: #8b97bd; font-size: 11px; font-family: var(--ui); }
.chart .empty-note { fill: #8b97bd; font-size: 14px; font-family: var(--ui); }
.chart-legend { display: flex; flex-wrap: wrap; gap: 14px; list-style: none; padding: 0; margin: 0 0 10px; font-size: 12px; color: #c3cde8; }
.chart-legend li { display: inline-flex; align-items: center; gap: 6px; }
.chart-table { margin-block-start: 10px; font-size: 12px; }
.chart-table summary { cursor: pointer; color: var(--muted); }
.table-scroll { max-block-size: 260px; overflow: auto; margin-block-start: 8px; }
.chart-table table { inline-size: 100%; border-collapse: collapse; }
.chart-table th, .chart-table td { padding: 6px 10px; border-block-end: 1px solid var(--line); text-align: start; font-variant-numeric: tabular-nums; }
.bar-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.bar-list li { display: grid; grid-template-columns: minmax(0, 150px) 1fr auto; align-items: center; gap: 10px; font-size: 13px; }
.bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-svg { inline-size: 100%; block-size: 10px; display: block; }
.bar-svg .bar-bg { fill: rgba(129, 151, 214, .12); }
.bar-list b { font-variant-numeric: tabular-nums; }
.funnel { list-style: none; padding: 0; margin: 0 0 10px; display: grid; gap: 12px; }
.funnel li { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; }
.funnel .funnel-bar { grid-column: 1 / -1; }
.funnel .funnel-bar .bar-svg { block-size: 14px; }
.funnel strong { font: 800 20px/1 var(--display); }
.funnel span:last-child { color: var(--muted); font-size: 13px; }
.peers { display: grid; gap: 12px; }
.peer-row { display: grid; grid-template-columns: 130px 1fr; gap: 12px; align-items: center; font-size: 13px; }
.peer-bars { display: grid; gap: 6px; }
.peer-bar { display: grid; grid-template-columns: 1fr 60px; align-items: center; gap: 8px; }
.peer-bar b { font-variant-numeric: tabular-nums; text-align: end; }
.locked { position: relative; overflow: hidden; min-block-size: 220px; border-radius: 20px; border: 1px solid rgba(255, 179, 92, .35); background: var(--surface); }
.locked-blur { position: absolute; inset: 20px; display: grid; gap: 14px; filter: blur(6px); opacity: .5; }
.locked-blur span { block-size: 14px; border-radius: 7px; background: linear-gradient(90deg, rgba(34, 220, 255, .5), rgba(143, 91, 255, .3)); }
.locked-blur span:nth-child(2) { inline-size: 70%; }
.locked-blur span:nth-child(3) { inline-size: 45%; }
.locked-blur span:nth-child(4) { inline-size: 25%; }
.locked-copy { position: relative; display: grid; justify-items: center; gap: 8px; padding: 34px 24px; text-align: center; }
.locked-copy .icon { inline-size: 26px; block-size: 26px; color: #ffc152; }
.locked-copy h3 { font-size: 16px; }
.locked-copy p { color: var(--muted); font-size: 13px; max-inline-size: 320px; }
.locked-copy .pro-ctas { grid-template-columns: auto auto; }
.analytics-link { inline-size: 100%; margin-block: 4px 12px; gap: 8px; }
.analytics-link .icon { inline-size: 18px; block-size: 18px; }
@media (max-width: 1100px) { .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } .an-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bar-list li { grid-template-columns: minmax(0, 100px) 1fr auto; } .peer-row { grid-template-columns: 1fr; } .locked-copy .pro-ctas { grid-template-columns: 1fr; } }

/* events.css */
/* /events/ timeline + the server page's "Upcoming events" (src/views/events.js, docs/specs/topguilds.md §3).
   Theme v2 tokens from theme.css; logical properties only (RTL); motion only with prefers-reduced-motion: no-preference. */

.ev-hero { padding-block-end: 28px; }
.ev-hero .eyebrow .icon, .ev-server-section .eyebrow .icon { inline-size: 15px; block-size: 15px; }
.ev-hero .lead { max-inline-size: 720px; }
.ev-note { display: flex; align-items: center; gap: 10px; margin-block-start: 18px; color: var(--muted); font-size: 13px; }
.ev-note .icon { inline-size: 17px; block-size: 17px; color: var(--cyan); }

/* ── filters ── */
.ev-toolbar { display: grid; gap: 12px; padding-block: 18px; border-block: 1px solid var(--line); }
.ev-filter-row { display: flex; flex-wrap: wrap; gap: 8px; }
.ev-filter {
  display: inline-flex; align-items: center; min-block-size: 40px; padding: 8px 14px; border: 1px solid var(--line);
  border-radius: 999px; background: var(--surface); color: var(--text); font-size: 13px; line-height: 1.3;
}
.ev-filter:hover { border-color: var(--line-strong); }
.ev-filter.is-on { border-color: var(--cyan); color: var(--cyan); background: var(--accent-soft); }
.ev-count { margin-block: 22px 8px; color: var(--muted); font-size: 13px; }

/* ── timeline ── */
.ev-timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 34px; padding-block-end: 20px; }
.ev-day { position: relative; padding-inline-start: 0; }
.ev-day-head { display: flex; align-items: center; gap: 14px; font-size: 18px; margin-block-end: 16px; }
.ev-day-label { display: flex; flex-direction: column; gap: 2px; }
.ev-day-label small { color: var(--cyan); font-family: inherit; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.ev-day-badge {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; inline-size: 56px; block-size: 56px;
  flex: none; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface-solid); line-height: 1.1;
}
.ev-day-badge b { font-size: 20px; }
.ev-day-badge small { color: var(--muted); font-size: 11px; text-transform: uppercase; }
.ev-day-list { display: grid; gap: 14px; margin-inline-start: 28px; padding-inline-start: 41px; border-inline-start: 1px solid var(--line); }

/* ── event card ── */
.ev-card {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 260px); gap: 20px; padding: 20px 22px;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-1);
}
.ev-card::before {
  content: ''; position: absolute; inset-block-start: 28px; inset-inline-start: -47px; inline-size: 11px; block-size: 11px;
  border-radius: 50%; background: var(--bg); border: 2px solid var(--cyan);
}
.ev-card.is-live { border-color: rgba(60, 224, 160, .5); }
.ev-card.is-live::before { border-color: var(--green); background: var(--green); }
.ev-card:hover { border-color: var(--line-strong); }
.ev-main { min-inline-size: 0; display: grid; gap: 10px; align-content: start; }
.ev-title { font-size: 19px; letter-spacing: -.02em; overflow-wrap: anywhere; }
.ev-desc { color: #c3cfeb; font-size: 14px; line-height: 1.65; overflow-wrap: anywhere; }
.ev-date-line { color: var(--cyan); font-size: 13px; font-weight: 600; }
.ev-live { display: inline-flex; align-items: center; gap: 8px; justify-self: start; padding: 3px 10px; border-radius: 999px; background: rgba(60, 224, 160, .12); color: var(--green); font-size: 12px; font-weight: 600; }
.ev-live i { inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--green); }
.ev-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; color: #c8d3ea; font-size: 13px; }
.ev-facts li { display: inline-flex; align-items: center; gap: 7px; }
.ev-facts .icon { inline-size: 16px; block-size: 16px; color: var(--muted); }
.ev-zone { color: var(--muted); }
.ev-time[data-local] { text-decoration: underline dotted; text-underline-offset: 3px; text-decoration-color: var(--line-strong); }
.ev-side { display: grid; gap: 14px; align-content: space-between; min-inline-size: 0; }
.ev-server { display: flex; align-items: center; gap: 12px; min-inline-size: 0; padding: 10px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-solid); }
.ev-server:hover { border-color: var(--cyan); }
.ev-card .guild-avatar.ev-avatar { position: static; inline-size: 40px; block-size: 40px; flex: none; border-width: 1px; box-shadow: none; }
.ev-card .guild-avatar.ev-avatar .icon { inline-size: 22px; block-size: 22px; }
.ev-server-copy { display: grid; min-inline-size: 0; }
.ev-server-copy strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-server-copy small { color: var(--muted); font-size: 12px; }
.ev-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.ev-btn { min-block-size: 40px; padding: 9px 14px; gap: 10px; font-size: 13px; }
.ev-btn .icon, .ev-cal .icon { inline-size: 16px; block-size: 16px; }
.ev-cal { gap: 8px; font-size: 13px; }

/* ── empty + CTA ── */
.ev-empty { border: 1px dashed var(--line-strong); border-radius: var(--r-lg); margin-block: 10px; padding-inline: 20px; }
.ev-empty .cta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.ev-how-card {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding: 28px;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--accent-soft);
}
.ev-how-card .section-title { margin-block-end: 8px; }
.ev-how-card p { max-inline-size: 640px; }

/* ── server page block ── */
.ev-server-section .ev-day-list { margin-inline-start: 0; padding-inline-start: 0; border: 0; }
.ev-server-section .ev-card { grid-template-columns: minmax(0, 1fr); }
.ev-server-section .ev-card::before { content: none; }
.ev-dated { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 14px; align-items: start; }
.ev-server-links { display: flex; flex-wrap: wrap; gap: 4px 18px; }

@media (prefers-reduced-motion: no-preference) {
  .ev-card, .ev-filter, .ev-server { transition: border-color .18s var(--ease), background-color .18s var(--ease); }
  .ev-card.is-live .ev-live i { animation: ev-pulse 1.6s var(--ease) infinite; }
  @keyframes ev-pulse { 50% { opacity: .35; } }
}

@media (max-width: 800px) {
  .ev-card, .ev-server-section .ev-card { grid-template-columns: minmax(0, 1fr); padding: 16px; }
  .ev-day-list { margin-inline-start: 6px; padding-inline-start: 22px; }
  .ev-card::before { inset-inline-start: -29px; }
  .ev-dated { grid-template-columns: minmax(0, 1fr); }
  .ev-dated > .ev-day-badge { display: none; }
}

/* badge.css */
/* Badge embed panel on the owner dashboard (src/views/badge.js, docs/specs/topguilds.md §3 Backlinks): one <details>
   per badge style with a preview on a light well (badges are dark: shows how they sit on a typical site) and read-only code boxes. Theme tokens from
   theme.css, logical properties only (RTL). */
.badge-panel { display: grid; gap: 12px; }
.badge-panel h2 { margin-block: 4px 0; }
.badge-panel > p { margin: 0; }
.badge-style { border: 1px solid var(--line); border-radius: var(--r-md); background: rgba(7, 11, 24, .35); }
.badge-style > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-block: 10px; padding-inline: 14px; cursor: pointer; font-weight: 600; font-size: 14px; list-style: none; }
.badge-style > summary::-webkit-details-marker { display: none; }
.badge-style > summary::after { content: ''; border-inline: 5px solid transparent; border-block-start: 6px solid var(--muted); margin-inline-start: 4px; transition: transform .2s var(--ease); }
.badge-style[open] > summary::after { transform: rotate(180deg); }
.badge-style > summary .muted { margin-inline-start: auto; font-weight: 400; font-variant-numeric: tabular-nums; }
.badge-style[open] > summary { border-block-end: 1px solid var(--line); }
.badge-preview { display: flex; justify-content: center; align-items: center; padding-block: 18px; padding-inline: 12px; margin: 12px; border-radius: var(--r-sm); background: radial-gradient(400px 120px at 50% 0, rgba(143, 91, 255, .12), transparent 70%), #f1f4fb; overflow-x: auto; }
.badge-preview img { display: block; max-inline-size: 100%; block-size: auto; }
.badge-code { display: grid; gap: 6px; margin-inline: 12px; margin-block-end: 12px; }
.badge-code-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.badge-code-head label { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.badge-copy { min-block-size: 32px; padding-block: 4px; padding-inline: 10px; font-size: 13px; gap: 6px; }
.badge-copy .icon { inline-size: 14px; block-size: 14px; }
.badge-copy.is-copied { border-color: var(--green); color: var(--green); }
.badge-snippet { inline-size: 100%; resize: vertical; min-block-size: 0; padding-block: 10px; padding-inline: 12px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: #0a1020; color: var(--text); font: 12px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace; text-align: start; word-break: break-all; white-space: pre-wrap; }
.badge-snippet:focus { border-color: var(--cyan); }
@media (prefers-reduced-motion: reduce) { .badge-style > summary::after { transition: none; } }

/* gallery.css */
/* TopGuilds PRO listing gallery (docs/specs/topguilds.md §5, §8): the public strip on the server page and the six
   URL + alt rows of the dashboard editor. Theme tokens, logical properties only (RTL), no motion unless allowed. */

/* ── Server page ─────────────────────────────────────── */
.server-gallery { margin-block-start: 28px; }
.gallery-strip { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 12px; }
.gallery-item figure { margin: 0; display: grid; gap: 8px; }
.gallery-link { display: block; overflow: hidden; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); aspect-ratio: 16 / 10; }
.gallery-link img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.gallery-link:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.gallery-item figcaption { font-size: 13px; line-height: 1.5; color: var(--muted); overflow-wrap: anywhere; }
@media (prefers-reduced-motion: no-preference) {
  .gallery-link img { transition: transform .3s var(--ease); }
  .gallery-link:hover img, .gallery-link:focus-visible img { transform: scale(1.03); }
}
/* narrow screens: a horizontal, swipeable strip instead of a tall column */
@media (max-width: 520px) {
  .gallery-strip { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: inline mandatory; padding-block-end: 6px; }
  .gallery-item { scroll-snap-align: start; }
}

/* ── Dashboard editor ────────────────────────────────── */
.gallery-fieldset .pro-badge { margin-inline-start: 6px; vertical-align: middle; }
.gallery-fieldset .gallery-upsell { color: var(--amber); }
.gallery-row { display: grid; grid-template-columns: 24px minmax(0, 3fr) minmax(0, 2fr); gap: 8px; align-items: center; }
.gallery-row-n { font-size: 12px; font-weight: 700; color: var(--muted); text-align: center; font-variant-numeric: tabular-nums; }
.gallery-row input { inline-size: 100%; background: var(--surface-solid, var(--bg-2)); border: 1px solid var(--line-strong); border-radius: var(--r-sm); color: var(--text); padding: 11px 13px; font-size: 14px; line-height: 1.5; }
.gallery-row input:focus { outline: 2px solid var(--cyan); outline-offset: 1px; }
@media (max-width: 520px) {
  .gallery-row { grid-template-columns: 24px minmax(0, 1fr); }
  .gallery-row input + input { grid-column: 2; }
}

/* serverplus.css */
/* Richer server page (docs/specs/topguilds.md §19): "At a glance" facts + members sparkline, the FAQ written from the
   listing data and the "Listing updated" line. Theme tokens from theme.css, logical properties only (RTL), motion only
   when allowed. The sparkline is styled through classes: no inline style attributes (CSP). */

/* ── At a glance ─────────────────────────────────────── */
.server-glance { margin-block-end: 28px; }
.glance-spark { margin: 0 0 16px; display: grid; gap: 6px; }
.glance-spark .spark { display: block; inline-size: 100%; max-inline-size: 520px; block-size: auto; overflow: visible; }
.glance-spark figcaption { font-size: 12px; color: var(--muted); }
.spark-line { stroke: var(--cyan); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.spark-area { fill: var(--cyan); fill-opacity: .12; stroke: none; }
.spark-dot { fill: var(--cyan); stroke: var(--bg, #0b1020); stroke-width: 2; }
.glance-spark.is-down .spark-line, .glance-spark.is-down .spark-dot { stroke: var(--pink); }
.glance-spark.is-down .spark-dot, .glance-spark.is-down .spark-area { fill: var(--pink); }
.glance-spark.is-down .spark-dot { stroke: var(--bg, #0b1020); }

.glance-grid { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: 10px; }
.glance-cell { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-md, 12px); background: var(--surface); display: grid; gap: 4px; align-content: start; }
.glance-cell dt { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.glance-cell dd { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.glance-value { font-size: 18px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.glance-chip { display: inline-flex; align-items: center; padding-block: 2px; padding-inline: 8px; border-radius: 999px; font-size: 12px; line-height: 1.5; border: 1px solid var(--line); color: var(--muted); unicode-bidi: plaintext; }
.glance-chip.is-up { color: var(--green); border-color: rgba(60, 224, 160, .35); }
.glance-chip.is-down { color: var(--pink); border-color: rgba(255, 95, 180, .35); }
.glance-asof { margin-block-start: 10px; font-size: 12px; color: var(--muted); }

/* ── FAQ ─────────────────────────────────────────────── */
.server-faq { margin-block-start: 28px; display: grid; gap: 14px; }
.server-faq h2 { margin-block-end: 2px; overflow-wrap: anywhere; }
.faq-item { padding-block: 14px; padding-inline: 16px; border: 1px solid var(--line); border-radius: var(--r-md, 12px); background: var(--surface); }
.faq-item h3 { font-size: 16px; margin: 0 0 6px; overflow-wrap: anywhere; }
.faq-item p { margin: 0; line-height: 1.65; color: var(--text); overflow-wrap: anywhere; }
.faq-item a { color: var(--cyan); text-decoration: underline; text-underline-offset: 2px; }

/* ── Listing updated ─────────────────────────────────── */
.server-updated { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 12px; color: var(--muted); }
.server-updated .icon { inline-size: 15px; block-size: 15px; flex: none; }

@media (prefers-reduced-motion: no-preference) {
  .faq-item a { transition: color .2s var(--ease, ease); }
}
@media (max-width: 520px) {
  .glance-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .glance-value { font-size: 16px; }
}

/* a11y.css */
/* Accessibility toolbar + cookie notice, and the accessibility modes (classes on <html> set by prefs.js / a11y.js).
   Loaded after theme.css so the modes win. */
.a11y-fab { position: fixed; z-index: 70; inset-block-end: 18px; inset-inline-start: 18px; display: grid; place-items: center; inline-size: 52px; block-size: 52px; border-radius: 50%; background: var(--accent); color: #050a1a; box-shadow: 0 10px 30px rgba(76, 140, 255, .4); transition: transform .2s var(--ease); }
.a11y-fab:hover { transform: scale(1.06); }
.a11y-fab .icon { inline-size: 28px; block-size: 28px; stroke-width: 2; }
.a11y-panel { position: fixed; z-index: 71; inset-block-end: 82px; inset-inline-start: 18px; inline-size: min(340px, calc(100% - 36px)); padding: 18px; border-radius: 20px; border: 1px solid var(--line-strong); background: rgba(12, 18, 38, .97); backdrop-filter: var(--blur); box-shadow: var(--shadow-2); }
.a11y-head { display: flex; align-items: center; justify-content: space-between; margin-block-end: 12px; }
.a11y-head h2 { font-family: var(--ui); font-size: 16px; }
.a11y-head .icon-btn { inline-size: 36px; block-size: 36px; }
.a11y-size { display: grid; grid-template-columns: 1fr 44px 58px 44px; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 14px; background: rgba(129, 151, 214, .08); margin-block-end: 10px; font-size: 13px; }
.a11y-size button { min-block-size: 40px; border-radius: 10px; border: 1px solid var(--line-strong); font-weight: 700; }
.a11y-size button:disabled { opacity: .35; }
.a11y-size output { text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.a11y-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.a11y-opt { display: grid; justify-items: center; gap: 6px; padding: 12px 8px; min-block-size: 74px; border-radius: 14px; border: 1px solid var(--line); background: rgba(129, 151, 214, .05); font-size: 12px; font-weight: 600; text-align: center; }
.a11y-opt[aria-pressed=true] { border-color: var(--cyan); background: var(--accent-soft); color: #fff; }
.a11y-ico { inline-size: 22px; block-size: 22px; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; opacity: .9; }
.a11y-ico-contrast { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20Zm0 1.5a8.5 8.5 0 1 1 0 17 8.5 8.5 0 0 1 0-17Z'/%3E%3C/svg%3E"); }
.a11y-ico-font { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 20 10 4h2l6 16h-2.4l-1.6-4.5H7.9L6.3 20Zm4.6-6.6h4.7L11 6.8Z'/%3E%3C/svg%3E"); }
.a11y-ico-links { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M10 14a4 4 0 0 0 6 0l3-3a4 4 0 0 0-6-6l-1 1M14 10a4 4 0 0 0-6 0l-3 3a4 4 0 0 0 6 6l1-1M4 22h16'/%3E%3C/svg%3E"); }
.a11y-ico-spacing { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M4 5h16M4 12h16M4 19h16'/%3E%3C/svg%3E"); }
.a11y-ico-still { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='6' y='5' width='4' height='14' rx='1'/%3E%3Crect x='14' y='5' width='4' height='14' rx='1'/%3E%3C/svg%3E"); }
.a11y-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-block-start: 12px; }
.a11y-foot .btn { min-block-size: 38px; padding: 8px 14px; font-size: 13px; }
.a11y-foot .text-link { font-size: 12px; }

.cookie-bar { position: fixed; z-index: 69; inset-block-end: 18px; inset-inline: 84px 18px; margin-inline: auto; max-inline-size: 760px; display: flex; align-items: center; gap: 16px; padding: 14px 16px 14px 20px; border-radius: 18px; border: 1px solid var(--line-strong); background: rgba(12, 18, 38, .96); backdrop-filter: var(--blur); box-shadow: var(--shadow-2); font-size: 13px; color: #d3dbf2; }
.cookie-bar p { flex: 1; }
.cookie-bar a { color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; }
.cookie-bar .btn { flex: none; min-block-size: 40px; padding: 8px 20px; }
.consent-done .cookie-bar { display: none !important; }
@media (max-width: 640px) { .cookie-bar { inset-inline: 12px; inset-block-end: 80px; flex-direction: column; align-items: stretch; } }

/* ── Modes ── */
.a11y-text-1 body { zoom: 1.1; }
.a11y-text-2 body { zoom: 1.22; }
.a11y-text-3 body { zoom: 1.35; }
.a11y-contrast { --bg: #000; --surface: #0b0b0b; --surface-solid: #0b0b0b; --raised: #151515; --text: #fff; --muted: #e6e9f5; --line: #9aa3c7; --line-strong: #d0d6f0; --cyan: #5ff0ff; }
.a11y-contrast body { background: #000 !important; }
.a11y-contrast body::before, .a11y-contrast .hero-atmosphere, .a11y-contrast .discover-glow { display: none !important; }
.a11y-contrast * { text-shadow: none !important; backdrop-filter: none !important; }
.a11y-contrast .server-card, .a11y-contrast .panel, .a11y-contrast .filters, .a11y-contrast .server-row, .a11y-contrast .plan-card, .a11y-contrast .guide-card, .a11y-contrast .chip, .a11y-contrast .tags span { background: #0b0b0b !important; border-color: #d0d6f0 !important; }
.a11y-contrast .card-description, .a11y-contrast .muted, .a11y-contrast p { color: #f2f4fb !important; }
.a11y-contrast .eyebrow, .a11y-contrast .discover-head h1, .a11y-contrast .server-head h1 { background: none !important; color: #5ff0ff !important; -webkit-text-fill-color: currentColor !important; }
.a11y-font body, .a11y-font body * { font-family: Arial, 'Rubik', system-ui, sans-serif !important; letter-spacing: .01em !important; }
.a11y-links a:not(.btn) { text-decoration: underline !important; text-underline-offset: 3px !important; text-decoration-thickness: 2px !important; }
.a11y-links a:not(.btn):hover, .a11y-links a:not(.btn):focus { background: #ffe066 !important; color: #000 !important; }
.a11y-spacing body { line-height: 1.9 !important; letter-spacing: .04em !important; word-spacing: .12em !important; }
.a11y-spacing p, .a11y-spacing li { line-height: 2 !important; }
.a11y-still *, .a11y-still *::before, .a11y-still *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }