*{box-sizing:border-box}body{margin:0;background:#eef0f2;color:#20252b;font-family:Cairo,sans-serif;overflow-x:hidden}body:before{content:"";position:fixed;inset:0;pointer-events:none;background-image:linear-gradient(#8b949e18 1px,transparent 1px),linear-gradient(90deg,#8b949e18 1px,transparent 1px);background-size:65px 65px;mask-image:linear-gradient(#000,transparent 90%)}.glow{position:fixed;border-radius:50%;filter:blur(100px);pointer-events:none;opacity:.15}.g1{width:420px;height:300px;background:#9da5ad;top:-80px;left:-180px;animation:g1 9s infinite alternate}.g2{width:400px;height:300px;background:#c5cbd1;top:35%;right:-180px;animation:g2 11s infinite alternate}.g3{width:300px;height:240px;background:#b5bcc3;bottom:-100px;left:25%;opacity:.1}@keyframes g1{to{transform:translate(140px,100px);opacity:.3}}@keyframes g2{to{transform:translate(-100px,-70px);opacity:.28}}.particles{position:fixed;inset:0;pointer-events:none;background-image:radial-gradient(circle,#fff 0 1px,transparent 1.6px),radial-gradient(circle,#ff4757 0 1px,transparent 1.7px);background-size:180px 180px,270px 270px;background-position:20px 30px,90px 120px;opacity:.3;animation:p 25s linear infinite}@keyframes p{to{background-position:180px 160px,-20px 0}}.page{width:min(900px,100%);margin:auto;position:relative;z-index:2;padding:22px 18px 35px}.hero{text-align:center}.hero-image{width:min(480px,88vw);height:min(480px,88vw);max-height:480px;margin:auto;border-radius:32px;overflow:hidden;position:relative;border:1px solid #c4c9ce;background:#e5e7e9;box-shadow:0 25px 70px #5d667020,0 0 45px #aeb6be30}.hero-image img{width:100%;height:100%;display:block}.image-shine{position:absolute;inset:-50%;background:linear-gradient(115deg,transparent 42%,#fff1 50%,transparent 58%);animation:shine 6s linear infinite}@keyframes shine{from{transform:translateX(-35%) rotate(8deg)}to{transform:translateX(35%) rotate(8deg)}}.brand{font:800 62px Orbitron,sans-serif;letter-spacing:7px;margin-top:26px;text-shadow:0 0 24px #7d879222}.roles{font:600 11px Orbitron,sans-serif;letter-spacing:2.8px;color:#68717b}.roles i{padding:0 7px;color:#737b83}.hero-symbols{display:flex;justify-content:center;align-items:center;gap:17px;margin:21px 0 17px;color:#30363d}.hero-symbols b{width:4px;height:4px;border-radius:50%;background:#e93646;box-shadow:0 0 12px #ff3045}.hero-symbols span{font-size:23px}.description{color:#69737d;line-height:1.95;font-size:13px;margin:0 auto 20px;max-width:720px}.visit{display:inline-flex;align-items:center;gap:12px;border:1px solid #c1c6cb;border-radius:30px;padding:9px 25px;background:#ffffffcc;box-shadow:0 0 25px #7a838c15}.visit strong{font:700 18px Orbitron}.visit small{font:700 8px Orbitron;letter-spacing:2px;color:#8792a1}.visit span{color:#e23b4a}.section-title{display:flex;align-items:center;gap:10px;margin:38px 0 14px}.section-title>span{font:600 9px Orbitron;color:#e24a58}.section-title h2{margin:0;font-size:19px}.section-title:after{content:"";height:1px;flex:1;background:linear-gradient(90deg,#303947,transparent)}.socials{display:grid;grid-template-columns:repeat(6,1fr);gap:9px}.social{height:118px;text-decoration:none;color:#20252b;border:1px solid #d0d4d8;border-radius:17px;background:linear-gradient(145deg,#ffffff,#e9ebed);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;position:relative;overflow:hidden;transition:.3s}.social:after{content:"";position:absolute;width:90px;height:90px;border-radius:50%;filter:blur(30px);bottom:-55px;opacity:.12;transition:.3s}.social:hover{transform:translateY(-5px);border-color:#9da5ad;box-shadow:0 15px 35px #56606b22}.social:hover:after{opacity:.45}.social b{font-size:12px}.social small{font-size:8px;color:#737f8e}.app-icon{height:42px;font:700 31px Arial;display:grid;place-items:center}.app-icon svg{width:34px;height:34px;fill:currentColor}.igsvg{fill:none!important;stroke:currentColor;stroke-width:1.8}.igsvg .dot{fill:currentColor;stroke:none}.youtube-icon{color:#20252b}.youtube:after{background:#ff2438}.xapp:after{background:#fff}.instagram:after{background:#ff4c9b}.tiktok:after{background:#20e7e7}.kick:after{background:#4cff78}.discord:after{background:#7289da}.kick .app-icon{color:#4cff78}.discord .app-icon{color:#7289da}.disabled{opacity:.75}.support{display:flex;align-items:center;gap:14px;text-decoration:none;color:#20252b;border:1px solid #414c5d;border-radius:17px;background:linear-gradient(105deg,#d9dde0,#f9fafb,#d9dde0);background-size:220%;padding:15px 18px;margin:22px 0 3px;box-shadow:0 0 35px #708cff0e;animation:sup 7s ease infinite}.support>span{font:38px Arial}.support div{flex:1}.support strong{display:block;font-size:18px}.support small{color:#7b848d;font-size:9px}.support>b{font-size:22px;color:#93a0b2}@keyframes sup{50%{background-position:100%}}.server{display:flex;align-items:center;gap:15px;min-height:100px;margin-bottom:10px;padding:14px 17px;border:1px solid #cbd0d5;border-radius:18px;background:linear-gradient(110deg,#ffffff,#e9ebed);color:#20252b;text-decoration:none;position:relative;overflow:hidden;transition:.3s}.server:hover{transform:translateY(-4px);border-color:#637188;box-shadow:0 14px 35px #56606b22}.server:after{content:"";position:absolute;width:190px;height:150px;right:-100px;top:-70px;border-radius:50%;background:#9ca5ae25;filter:blur(40px);animation:server 5s ease-in-out infinite alternate}@keyframes server{to{transform:translate(-60px,45px)}}.server-logo{width:62px;height:62px;flex:0 0 62px;border-radius:15px;display:grid;place-items:center;position:relative;z-index:1;background:linear-gradient(145deg,#d9dde0,#f5f6f7);font:800 14px Orbitron;box-shadow:0 0 25px #7b858f22}.server-logo svg{width:33px;height:33px;fill:currentColor}.discord-bg{background:#5865f2;box-shadow:0 0 30px #5865f255}.server-copy{position:relative;z-index:1;flex:1}.server-copy strong{display:block;font-size:16px}.server-copy small{display:block;color:#7b848d;font-size:10px;margin-top:3px}.server em{position:relative;z-index:1;font-style:normal;font-size:10px;color:#4d565f;border:1px solid #4a576a;padding:8px 10px;border-radius:10px;white-space:nowrap}.shop-logo{font-size:28px}.contact{position:relative;overflow:hidden;text-align:center;margin-top:24px;padding:29px 20px;border:1px solid #c8cdd2;border-radius:20px;background:linear-gradient(135deg,#ffffff,#e7e9eb);box-shadow:0 20px 55px #56606b22}.contact-light{position:absolute;width:240px;height:180px;border-radius:50%;left:-100px;bottom:-100px;background:#e42d421c;filter:blur(55px)}.eyebrow{font:600 8px Orbitron;letter-spacing:2px;color:#d45763}.contact h2{margin:6px 0;font-size:21px}.contact p{color:#69737d;font-size:12px;line-height:1.9;margin:0 auto 18px;max-width:620px}.contact>a{display:inline-block;text-decoration:none;color:#20252b;background:#30363d;border:1px solid #9ca4ac;border-radius:12px;padding:10px 18px;font-size:11px}.contact>a b{margin-right:12px}footer{text-align:center;border-top:1px solid #cdd2d6;margin-top:27px;padding-top:22px;color:#68717b}footer strong{font:800 27px Orbitron;letter-spacing:3px;color:#20252b}footer p{font-size:10px;margin:6px}footer small{font:600 7px Orbitron;letter-spacing:1.7px;color:#7a838b}
@media(max-width:700px){.page{padding:16px 13px 28px}.hero-image{width:88vw;height:88vw;border-radius:26px}.brand{font-size:48px;margin-top:21px}.roles{font-size:8px;letter-spacing:1.8px}.hero-symbols{gap:12px;margin:17px 0}.hero-symbols span{font-size:20px}.description{font-size:12px}.visit{padding:8px 20px}.socials{grid-template-columns:repeat(3,1fr);gap:7px}.social{height:106px;border-radius:15px}.social b{font-size:10px}.social small{font-size:7px}.app-icon{height:35px}.app-icon svg{width:30px;height:30px}.section-title h2{font-size:17px}.support{padding:13px}.support strong{font-size:16px}.support small{font-size:8px}.server{min-height:92px;padding:12px}.server-logo{width:55px;height:55px;flex-basis:55px}.server-copy strong{font-size:14px}.server-copy small{font-size:9px}.server em{font-size:8px;padding:7px 8px}.contact{padding:25px 16px}.contact h2{font-size:19px}}@media(max-width:390px){.socials{gap:5px}.social{height:98px}.server em{display:none}}

/* V9 light theme: Discord remains Discord blue, everything else stays neutral. */
.discord .app-icon{color:#5865f2}.discord-bg{background:#5865f2!important;color:#fff!important;box-shadow:0 0 28px #5865f244!important}
.discord-bg svg{fill:#fff}
.server,.social{box-shadow:0 12px 32px rgba(60,68,76,.08),inset 0 1px rgba(255,255,255,.8)}
.social:hover{box-shadow:0 16px 38px rgba(60,68,76,.14),0 0 24px rgba(130,140,150,.16)}
.support{color:#20252b;border-color:#bfc5ca}
.support>span,.support>b{color:#4b535b}
.hero-image{background:#f7f8f9}
.contact{background:linear-gradient(135deg,#fff,#e8eaec);border-color:#c7ccd1}
.contact a{background:#343a40;color:#fff}

/* V10 — neutral silver pulse around social cards */
.social{
  isolation:isolate;
  box-shadow:0 10px 28px rgba(50,58,66,.08), 0 0 0 1px rgba(145,153,161,.08);
}
.social:before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:18px;
  padding:1px;
  background:conic-gradient(from 0deg, transparent 0 55%, rgba(115,124,133,.55) 68%, transparent 78% 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:.28;
  animation:silverPulse 5s linear infinite;
  pointer-events:none;
}
.social:after{
  width:120px;height:120px;
  bottom:-75px;
  background:#8c959d;
  opacity:.07;
  filter:blur(32px);
}
@keyframes silverPulse{
  0%{transform:rotate(0deg);opacity:.18}
  50%{opacity:.5}
  100%{transform:rotate(360deg);opacity:.18}
}
.social:hover:before{opacity:.7;animation-duration:2.5s}

/* V11: visible neutral silver glow + moving background particles */
.social:before{
  opacity:.38;
  filter:drop-shadow(0 0 5px rgba(125,133,141,.35));
  animation:silverPulse 4.2s linear infinite;
}
.social{
  animation:cardBreath 3.8s ease-in-out infinite;
}
.social:nth-child(2){animation-delay:.35s}.social:nth-child(3){animation-delay:.7s}
.social:nth-child(4){animation-delay:1.05s}.social:nth-child(5){animation-delay:1.4s}
.social:nth-child(6){animation-delay:1.75s}
@keyframes cardBreath{
  0%,100%{box-shadow:0 10px 28px rgba(50,58,66,.08),0 0 0 1px rgba(145,153,161,.08)}
  50%{box-shadow:0 13px 32px rgba(50,58,66,.12),0 0 18px rgba(130,138,146,.18)}
}
.server:before{
  content:"";position:absolute;inset:-1px;border-radius:19px;
  background:linear-gradient(90deg,transparent,#9aa2aa66,transparent);
  background-size:200% 100%;opacity:.35;animation:serverShine 5s linear infinite;
  pointer-events:none;
}
@keyframes serverShine{to{background-position:-200% 0}}

/* V12 — polish */
.loader{position:fixed;inset:0;background:#eef0f2;z-index:9999;display:grid;place-items:center;align-content:center;gap:16px;transition:opacity .55s,visibility .55s}
.loader.hide{opacity:0;visibility:hidden}
.loader-logo{font:800 58px Orbitron,sans-serif;letter-spacing:7px;color:#20252b;text-shadow:0 8px 25px #59636c25}
.loader-line{width:150px;height:2px;background:#c9ced3;overflow:hidden;border-radius:9px}
.loader-line i{display:block;width:45%;height:100%;background:#626b74;animation:loadLine 1s ease-in-out infinite}
@keyframes loadLine{0%{transform:translateX(-180%)}100%{transform:translateX(350%)}}
.theme-toggle{position:fixed;z-index:20;top:16px;left:16px;width:38px;height:38px;border:1px solid #c2c8cd;border-radius:50%;background:#fff;color:#3d454c;box-shadow:0 7px 22px #58616b18;font-size:17px;cursor:pointer}
.quick-stats{display:flex;justify-content:center;gap:9px;margin:20px 0 4px}
.quick-stat{min-width:125px;text-align:center;border:1px solid #cbd0d5;background:#ffffffc9;border-radius:14px;padding:8px 14px;box-shadow:0 8px 22px #59636c0c}
.quick-stat span{font:700 17px Orbitron;color:#30373e}
.quick-stat small{font:600 7px Orbitron;letter-spacing:1.7px;color:#7b848d;display:block;margin-top:2px}
.server-wrap{position:relative}
.server-wrap .server{margin-bottom:0}
.copy-discord{display:block;margin:-3px 0 10px auto;border:1px solid #c5cbd0;background:#fff;color:#4d555d;border-radius:9px;padding:6px 10px;font:600 9px Cairo;cursor:pointer;transition:.25s}
.copy-discord:hover{background:#f0f2f3;transform:translateY(-1px)}
.social,.server,.support,.contact{--mx:50%;--my:50%}
.social:after,.server:after,.support:after,.contact:after{background:radial-gradient(circle at var(--mx) var(--my),rgba(115,124,133,.18),transparent 28%)!important;opacity:1!important;filter:none!important;inset:0!important;width:auto!important;height:auto!important;border-radius:inherit;pointer-events:none;transition:background .12s}
.social:hover,.server:hover{box-shadow:0 16px 38px rgba(60,68,76,.14),0 0 24px rgba(130,138,146,.15)}
.dark body{background:#111418;color:#edf0f2}
.dark body:before{opacity:.35}
.dark .loader{background:#111418}.dark .loader-logo{color:#edf0f2}.dark .loader-line{background:#343a40}.dark .loader-line i{background:#d7dce0}
.dark .theme-toggle{background:#20252b;color:#fff;border-color:#454c53}
.dark .hero-image{background:#181c20;border-color:#555d65}.dark .social,.dark .server,.dark .support,.dark .contact{background:linear-gradient(145deg,#1b2025,#12161a);border-color:#3b434a;color:#edf0f2}
.dark .social small,.dark .server-copy small,.dark .support small,.dark .description{color:#9ca5ad}
.dark .quick-stat{background:#1b2025;border-color:#3b434a}.dark .quick-stat span{color:#edf0f2}
.dark .copy-discord{background:#20252b;color:#fff;border-color:#4b535a}
.dark .contact{background:linear-gradient(135deg,#1b2025,#111519)}
@media(max-width:700px){.theme-toggle{top:10px;left:10px;width:34px;height:34px}.quick-stat{min-width:112px}.copy-discord{margin-top:4px}}

/* V13 — Dark mode is the default */
:root{color-scheme:dark}
body{background:#07090d;color:#edf0f2}
body:before{opacity:.35}
.loader{background:#0b0e12;color:#edf0f2}
.loader-logo{color:#edf0f2}
.loader-line{background:#2d333a}.loader-line i{background:#e1e5e8}
.theme-toggle{background:#1a1f24;color:#fff;border-color:#414950}
.hero-image{background:#12161b;border-color:#4a5158;box-shadow:0 25px 70px #000b,0 0 55px #bfc6cc12}
.brand{color:#edf0f2}
.roles{color:#9da6ae}
.description{color:#9aa3ab}
.section-title h2{color:#edf0f2}
.social,.server,.support,.contact{background:linear-gradient(145deg,#171c21,#0e1216);border-color:#343b42;color:#edf0f2}
.social small,.server-copy small,.support small{color:#8c969f}
.social:hover,.server:hover{border-color:#68727b;box-shadow:0 16px 38px rgba(0,0,0,.45),0 0 24px rgba(190,198,205,.11)}
.copy-discord{background:#20252a;color:#fff;border-color:#4a535b}
.contact{background:linear-gradient(135deg,#171c21,#0d1115)}
.contact>a{background:#edf0f2;color:#20252b;border-color:#edf0f2}
footer{border-color:#282f35;color:#7e8992}
footer strong{color:#edf0f2}
footer small{color:#657079}
.discord-toast{
  position:fixed;z-index:9998;left:50%;bottom:28px;transform:translate(-50%,18px);
  min-width:180px;padding:12px 18px;border:1px solid #59636c;border-radius:14px;
  background:#171c21ee;backdrop-filter:blur(14px);box-shadow:0 14px 40px #0008;
  text-align:center;opacity:0;transition:.3s;pointer-events:none
}
.discord-toast.show{opacity:1;transform:translate(-50%,0)}
.discord-toast strong{display:block;color:#fff;font-size:13px}
.discord-toast span{display:block;color:#aeb6bd;font:600 11px Orbitron;margin-top:3px}
.discord-copy{cursor:pointer}
.discord-copy .app-icon{color:#7289da}
@media(max-width:700px){.discord-toast{bottom:24px}}
/* Explicit light mode when user toggles it */
:root:not(.dark){color-scheme:light}
:root:not(.dark) body{background:#eef0f2;color:#20252b}
:root:not(.dark) body:before{opacity:.12}
:root:not(.dark) .loader{background:#eef0f2}.loader.hide{opacity:0;visibility:hidden}
:root:not(.dark) .loader-logo{color:#20252b}:root:not(.dark) .loader-line{background:#c9ced3}:root:not(.dark) .loader-line i{background:#626b74}
:root:not(.dark) .theme-toggle{background:#fff;color:#3d454c;border-color:#c2c8cd}
:root:not(.dark) .hero-image{background:#f7f8f9;border-color:#c4c9ce;box-shadow:0 25px 70px #5d667020,0 0 45px #aeb6be30}
:root:not(.dark) .brand{color:#20252b}:root:not(.dark) .roles{color:#68717b}:root:not(.dark) .description{color:#69737d}
:root:not(.dark) .section-title h2{color:#20252b}
:root:not(.dark) .social,:root:not(.dark) .server,:root:not(.dark) .support,:root:not(.dark) .contact{background:linear-gradient(145deg,#fff,#e9ebed);border-color:#d0d4d8;color:#20252b}
:root:not(.dark) .social small,:root:not(.dark) .server-copy small,:root:not(.dark) .support small{color:#7b848d}
:root:not(.dark) .contact{background:linear-gradient(135deg,#fff,#e8eaec)}
:root:not(.dark) .contact>a{background:#343a40;color:#fff}
:root:not(.dark) footer{border-color:#cdd2d6;color:#68717b}:root:not(.dark) footer strong{color:#20252b}

/* V14 — premium motion */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .75s cubic-bezier(.22,.61,.36,1),transform .75s cubic-bezier(.22,.61,.36,1)}
.reveal.visible{opacity:1;transform:none}
.social.reveal,.server.reveal{opacity:1;transform:none}
.back-top{
  position:fixed;z-index:30;right:17px;bottom:17px;width:42px;height:42px;
  border:1px solid #4a535b;border-radius:50%;background:#171c21;color:#fff;
  box-shadow:0 10px 30px #0008;cursor:pointer;opacity:0;visibility:hidden;
  transform:translateY(12px);transition:.3s;font-size:20px
}
.back-top.show{opacity:1;visibility:visible;transform:none}
.hero-image{transition:background .35s,box-shadow .35s}
@media(max-width:700px){.back-top{right:12px;bottom:12px;width:38px;height:38px}}
:root:not(.dark) .back-top{background:#fff;color:#30363d;border-color:#c3c9ce;box-shadow:0 10px 28px #59636c22}
@media(prefers-reduced-motion:reduce){
  .reveal{transition:none;opacity:1;transform:none}
}

/* V15 — premium 3D cards, cursor and share */
.social,.server,.support,.contact{
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0);
  transition:transform .22s ease,box-shadow .3s,border-color .3s;
  will-change:transform;
}
.social:before,.server:before,.support:before,.contact:before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(205,211,216,.14),transparent 34%);
  opacity:.9;
}
.custom-cursor{
  position:fixed;z-index:10001;width:9px;height:9px;border-radius:50%;
  background:#dfe4e8;box-shadow:0 0 14px rgba(220,226,231,.65);
  pointer-events:none;transform:translate(-50%,-50%);
  transition:width .2s,height .2s,box-shadow .2s,background .2s;
  mix-blend-mode:difference;
}
.custom-cursor.active{width:27px;height:27px;background:transparent;border:1px solid #dfe4e8;box-shadow:0 0 20px rgba(220,226,231,.45)}
.share-site{
  position:fixed;z-index:30;top:16px;left:62px;width:38px;height:38px;border-radius:50%;
  border:1px solid #414950;background:#1a1f24;color:#fff;box-shadow:0 7px 22px #0005;
  cursor:pointer;font-size:18px;transition:.25s
}
.share-site:hover{transform:translateY(-2px);box-shadow:0 10px 26px #0007}
:root:not(.dark) .share-site{background:#fff;color:#3d454c;border-color:#c2c8cd;box-shadow:0 7px 22px #58616b18}
@media(pointer:coarse){.custom-cursor{display:none}}
@media(max-width:700px){.share-site{top:10px;left:52px;width:34px;height:34px}}

/* V16 reliability: never leave the page blank if JS is delayed/blocked */
.loader{animation:loaderAutoHide .9s ease 1.35s forwards}
@keyframes loaderAutoHide{to{opacity:0;visibility:hidden;pointer-events:none}}
.reveal{opacity:1;transform:none}
.reveal.visible{opacity:1;transform:none}

@keyframes premiumEnter{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.hero{animation:premiumEnter .75s ease both}
.social-section,.support,.contact,footer{animation:premiumEnter .75s ease both}
.social-section{animation-delay:.08s}.support{animation-delay:.16s}.contact{animation-delay:.24s}footer{animation-delay:.32s}

/* V17 — polish only, no layout redesign */
.status-bar{
  position:relative;z-index:4;width:fit-content;max-width:calc(100% - 30px);
  margin:4px auto 12px;padding:7px 13px;border:1px solid #343b42;
  border-radius:999px;background:#12171bde;backdrop-filter:blur(12px);
  color:#9ca5ad;font:500 8px Cairo;box-shadow:0 8px 24px #0004;
  display:flex;align-items:center;gap:7px
}
.status-bar strong{font:700 8px Orbitron;color:#dfe4e8;letter-spacing:1px}
.status-dot{width:6px;height:6px;border-radius:50%;background:#bfc6cc;box-shadow:0 0 9px #dce2e6;animation:statusBlink 1.8s ease-in-out infinite}
.status-sep{opacity:.4}
@keyframes statusBlink{50%{opacity:.35;transform:scale(.72)}}
.copy-site{
  position:fixed;z-index:30;top:16px;left:108px;width:38px;height:38px;border-radius:50%;
  border:1px solid #414950;background:#1a1f24;color:#fff;box-shadow:0 7px 22px #0005;
  cursor:pointer;font-size:16px;transition:.25s
}
.copy-site:hover{transform:translateY(-2px);box-shadow:0 10px 26px #0007}
.social.pressed,.server.pressed,.support.pressed,.contact>a.pressed{
  transform:perspective(900px) scale(.985) rotateX(1deg)!important;
  box-shadow:0 5px 16px #0006,0 0 20px rgba(205,212,218,.18)!important
}
:root:not(.dark) .status-bar{background:#ffffffd9;border-color:#c8cdd2;color:#69737d;box-shadow:0 8px 24px #59636c18}
:root:not(.dark) .status-bar strong{color:#30363d}
:root:not(.dark) .copy-site{background:#fff;color:#3d454c;border-color:#c2c8cd;box-shadow:0 7px 22px #58616b18}
@media(max-width:700px){
  .status-bar{font-size:7px;padding:6px 10px;margin-top:2px}
  .status-bar strong{font-size:7px}
  .copy-site{top:10px;left:94px;width:34px;height:34px}
}

body.leaving:after{
  content:"S6X";position:fixed;inset:0;z-index:99999;background:#07090d;
  color:#fff;display:grid;place-items:center;font:800 42px Orbitron;letter-spacing:6px;
  animation:leaveFlash .42s ease forwards;pointer-events:none
}
@keyframes leaveFlash{from{opacity:0}35%{opacity:1}to{opacity:0}}

/* V18 FIX — preserve V17 design, only clean the utility area */
.status-bar{
  position:relative!important;
  top:auto!important;left:auto!important;
  margin:8px auto 16px!important;
  width:max-content!important;
  min-width:120px;
  justify-content:center;
}
.utility-row{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  margin:10px auto 22px;
}
.utility-btn{
  width:38px;height:38px;
  border-radius:50%;
  border:1px solid #414950;
  background:#171c21;
  color:#edf0f2;
  box-shadow:0 8px 22px #0005;
  cursor:pointer;
  font-size:16px;
  transition:transform .25s,box-shadow .25s,border-color .25s;
}
.utility-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 28px #0007;
  border-color:#68727b;
}
:root:not(.dark) .utility-btn{
  background:#fff;color:#3d454c;border-color:#c2c8cd;
  box-shadow:0 8px 22px #58616b18;
}
@media(max-width:700px){
  .utility-row{margin:8px auto 20px;gap:8px}
  .utility-btn{width:35px;height:35px;font-size:15px}
}
/* Cancel V17 fixed top-left placement without affecting behavior. */
.share-site,.copy-site{
  position:static!important;
  top:auto!important;left:auto!important;
  width:auto!important;height:auto!important;
  border:0!important;background:none!important;
  box-shadow:none!important;padding:0!important;
}

/* V19 — clean compact header controls */
.status-bar{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:9px!important;
  min-width:0!important;
  width:max-content!important;
  padding:6px 9px 6px 12px!important;
  margin:8px auto 16px!important;
  border-radius:999px!important;
  background:#11161bdf!important;
  border:1px solid #3a4249!important;
  box-shadow:0 8px 26px #0005, inset 0 1px 0 #ffffff0a!important;
  backdrop-filter:blur(14px)!important;
}
.status-bar strong{
  font-size:8px!important;
  letter-spacing:1.4px!important;
}
.status-divider{
  width:1px;height:18px;background:#424a51;opacity:.65;margin:0 1px;
}
.status-action{
  width:28px;height:28px;
  display:grid;place-items:center;
  border:0;border-left:1px solid transparent;
  border-radius:50%;
  background:#1b2126;
  color:#cbd1d5;
  box-shadow:inset 0 0 0 1px #343c43,0 4px 12px #0004;
  cursor:pointer;
  font:600 15px/1 Arial,sans-serif;
  transition:transform .2s,background .2s,box-shadow .2s,color .2s;
}
.status-action:hover{
  transform:translateY(-1px);
  background:#252c32;
  color:#fff;
  box-shadow:inset 0 0 0 1px #68727b,0 6px 16px #0006;
}
.status-action:active{transform:scale(.94)}
.status-dot{flex:0 0 auto!important}
:root:not(.dark) .status-bar{
  background:#ffffffdf!important;
  border-color:#c8ced3!important;
  box-shadow:0 8px 26px #59636c18,inset 0 1px 0 #ffffff!important;
}
:root:not(.dark) .status-divider{background:#c5cbd0}
:root:not(.dark) .status-action{
  background:#f1f3f4;color:#4a535b;
  box-shadow:inset 0 0 0 1px #d0d5d9,0 4px 12px #58616b16;
}
:root:not(.dark) .status-action:hover{background:#e6e9eb;color:#20262b}
@media(max-width:700px){
  .status-bar{margin-top:7px!important;margin-bottom:15px!important;gap:7px!important;padding:5px 7px 5px 10px!important}
  .status-bar strong{font-size:7px!important}
  .status-action{width:27px;height:27px;font-size:14px}
}

/* V20 — final micro-polish for header controls */
.status-action{
  background:transparent!important;
  box-shadow:none!important;
  border:1px solid transparent!important;
  color:#b8c0c6!important;
  font-weight:400!important;
  font-size:17px!important;
}
.status-action:hover{
  background:#ffffff08!important;
  border-color:#505960!important;
  color:#f1f3f5!important;
  box-shadow:0 0 14px #ffffff10!important;
}
.status-action:active{transform:scale(.92)}
.status-bar{gap:8px!important}
.status-divider{opacity:.4!important}
@media(max-width:700px){
  .status-action{font-size:16px!important}
}

/* V21 — subtle header icons + clear online state */
.status-action svg{
  width:16px;height:16px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.45;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:.82;
}
.status-action:hover svg{opacity:1}
.status-dot{
  background:#42e36b!important;
  box-shadow:0 0 8px rgba(66,227,107,.65),0 0 14px rgba(66,227,107,.22)!important;
  animation:onlinePulse 1.8s ease-in-out infinite!important;
}
@keyframes onlinePulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.55;transform:scale(.82)}
}

/* V22 — dark mode only */
html,body{background:#090d11!important;color:#edf1f4!important}
:root:not(.dark) .status-bar,
:root:not(.dark) .status-action,
:root:not(.dark) .utility-btn{background:#11161b!important;color:#edf1f4!important;border-color:#3a4249!important;box-shadow:0 8px 26px #0005!important}
:root:not(.dark) .status-divider{background:#424a51!important}