/* Grande polish layer: loads last on every page so the whole site moves, sizes and looks the same way. */
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth}
::selection{background:var(--blue);color:#fff}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:8px}

/* thin dark scrollbars everywhere */
*{scrollbar-width:thin;scrollbar-color:#2f2f2f transparent}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#2a2a2a;border-radius:10px;border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:#3a3a3a;background-clip:content-box;border:3px solid transparent}

/* icons: Lucide, drawn at a readable size with a steady stroke */
svg.gi{flex:none;display:block}
svg[stroke="currentColor"]{stroke-linecap:round;stroke-linejoin:round}
.aside .anav a svg,.aside .anav .off svg,.anav a svg,.anav .off svg{width:22px;height:22px;stroke-width:2}
.aitem svg,.ami svg,.mmb svg,.mmi svg,.pmenu button svg{width:20px;height:20px;stroke-width:2}
.fmenu svg,.fm svg{stroke-width:2}
.nav a svg,.mnav a svg{stroke-width:2}
button svg,a svg{vertical-align:middle}

/* one easing for everything that opens, closes or hovers */
a,button,.aitem,.ami,.mmb,.mmi,.card,.acard,.pcard,.plsrv,.bigbtn,.abtn,.btn{transition-timing-function:var(--ease)}
.amenu,.amn,.mmenu,.fmenu,.pf-pop,.ovs-m,.dtp-pop,.nmenu,.cloudm,.bellm,.pmenu{transition-timing-function:var(--ease)}

/* shared surfaces */
.acard,.plsec,.pllog,.plcard{border-color:var(--b1);border-radius:var(--r-lg)}
.amenu,.amn{background:var(--s1);border-color:var(--b2);border-radius:var(--r-lg);box-shadow:var(--shadow-pop)}
.aitem:hover,.ami:hover{background:var(--s3)}

/* buttons feel the same: gentle lift on hover, press on click */
.btn,.abtn,.bigbtn,.cbtn,.dbtn,.dbtn2,.xbtn,.runbtn{will-change:transform}
.btn:active,.abtn:active,.bigbtn:active,.cbtn:active,.dbtn:active,.dbtn2:active{transform:translateY(1px) scale(.99)}

/* the primary action is always Grande blue */
.btn-blue,.abtn.blue,.cbtn,.dbtn2,.runbtn{background-color:var(--blue)}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
.anav svg:not(.chev){width:22px;height:22px;stroke-width:2}

/* ---- loading screen: the Grande logo animation (no bar) ---- */
#loader{background:#121110;gap:0}
#loader img{width:240px;height:240px;display:block}
#loader .lbar{display:none}

/* ---- header: the tab you are on is white, the rest grey ---- */
.links>a.cur,.dd>button.cur{color:var(--text)}

/* ---- icons are easier to see: bigger, stroke 2, brighter ---- */
.ico{width:44px;height:44px;color:#f4f4f4}
.ico svg{width:24px;height:24px;stroke-width:2}
.menu.feat .ico,.menu.res .ico{width:44px;height:44px}
body .anav a svg,body .anav .off svg,body .anav button svg:not(.chev),.aside .anav a svg{width:24px;height:24px;stroke-width:2;color:#e8e8e8}
body .anav .off svg{color:#a8a8a8}
body .anav a.on svg{color:var(--blue)}
body .side .si svg{width:22px;height:22px;stroke-width:2;color:#e0e0e0}
body .side .si.on svg{color:var(--blue)}
.aitem svg,.ami svg{width:22px;height:22px}
.dbtn svg,.dbtn2 svg,.abtn svg{width:18px;height:18px;stroke-width:2.1}

/* ---- dashboard: learn-more link under My Servers ---- */
.dash-learn{display:inline-flex;align-items:center;gap:6px;margin-top:16px;color:var(--muted);font:500 14px/1.4 "Manrope",system-ui,sans-serif;text-decoration:none}
.dash-learn b{color:var(--blue);font-weight:600}
.dash-learn svg{color:var(--blue);transition:transform .25s var(--ease)}
.dash-learn:hover svg{transform:translateX(3px)}

/* ---- icons: thicker stroke everywhere, bigger in docs + Moderator Panel ---- */
svg[stroke="currentColor"]{stroke-width:2.25}
body .side .si svg{width:24px;height:24px;stroke-width:2.25}
.ico svg{width:26px;height:26px;stroke-width:2.25}
.menu.feat .ico,.menu.res .ico{width:46px;height:46px}
body .anav a svg,body .anav .off svg,body .anav button svg:not(.chev),.aside .anav a svg{width:26px;height:26px;stroke-width:2.25}
.mp .bigbtn svg{stroke-width:2.25}
.mp details.ac>summary svg,.mp .mmb svg,.mp .pmenu svg,.mp .sdis svg{stroke-width:2.25}