:root{
  color-scheme:dark;
  --bg:#020609;
  --bg2:#061117;
  --panel:#071820;
  --panel2:#0b2029;
  --steel:#9db2bc;
  --steel2:#e1edf1;
  --muted:#7e959f;
  --cyan:#24d9ff;
  --cyan2:#0f819d;
  --cyanSoft:rgba(36,217,255,.16);
  --red:#ff4d3f;
  --red2:#962c25;
  --redSoft:rgba(255,77,63,.14);
  --line:rgba(145,177,190,.23);
  --lineStrong:rgba(164,200,214,.38);
  --gold:#d3b56f;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  color:#e8f2f6;
  font:14px/1.55 "Segoe UI",Candara,Arial,sans-serif;
  background:
    radial-gradient(900px 560px at 7% -2%,rgba(36,217,255,.11),transparent 67%),
    radial-gradient(900px 560px at 93% -2%,rgba(255,77,63,.085),transparent 67%),
    linear-gradient(180deg,#08141a 0,#020609 38%,#03090d 100%);
  overflow-x:hidden;
}
body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.24;
  background-image:
    linear-gradient(rgba(191,227,240,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(191,227,240,.018) 1px,transparent 1px);
  background-size:44px 44px;
  z-index:-2;
}
a{color:inherit}
button,input,select,textarea{font:inherit}
.sf-ambient{position:fixed;width:460px;height:460px;filter:blur(95px);opacity:.08;pointer-events:none;z-index:-1}
.sf-ambient-blue{left:-230px;top:30vh;background:#00bfff}
.sf-ambient-red{right:-230px;top:42vh;background:#ff3b2f}
.sf-scanlines{
  position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.14;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0,rgba(255,255,255,.018) 1px,transparent 1px,transparent 4px)
}
.sf-header{
  width:min(1240px,calc(100% - 36px));
  min-height:82px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  position:sticky;
  top:0;
  z-index:80;
  padding:10px 0;
  background:linear-gradient(180deg,rgba(2,7,10,.95),rgba(2,7,10,.78) 76%,transparent);
  backdrop-filter:blur(10px);
}
.sf-brand{display:block;text-decoration:none}
.sf-brand-compact{width:190px;min-width:150px}
.sf-brand img{display:block;width:100%;height:auto;filter:drop-shadow(0 8px 22px rgba(0,0,0,.55))}
.sf-nav{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:3px}
.sf-nav a{
  text-decoration:none;
  color:#8199a3;
  text-transform:uppercase;
  letter-spacing:.13em;
  font-size:10px;
  padding:10px 12px;
  border:1px solid transparent;
  transition:.18s ease
}
.sf-nav a:hover{color:#dcf5fb;border-color:rgba(36,217,255,.16);background:rgba(36,217,255,.035)}
main{width:min(1240px,calc(100% - 36px));margin:0 auto;padding:34px 0 72px}
.sf-frame{
  position:relative;
  border:1px solid var(--line);
  background:
    linear-gradient(135deg,rgba(255,255,255,.024),transparent 22%),
    linear-gradient(180deg,rgba(10,29,38,.94),rgba(4,12,17,.96));
  box-shadow:0 20px 70px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.022)
}
.sf-frame:before{
  content:"";
  position:absolute;
  left:-1px;right:-1px;top:-1px;
  height:1px;
  background:linear-gradient(90deg,var(--cyan),rgba(210,235,244,.34) 48%,var(--red));
  opacity:.76
}
.sf-hero{
  min-height:650px;
  padding:40px;
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(300px,.62fr);
  gap:34px;
  align-items:center;
  overflow:hidden
}
.sf-hero:after{
  content:"";
  position:absolute;
  inset:auto -180px -260px auto;
  width:600px;height:600px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,67,54,.12),transparent 67%);
  pointer-events:none
}
.sf-hero-copy{position:relative;z-index:2}
.sf-hero-logo-wrap{
  width:min(710px,100%);
  margin:-40px 0 -56px -18px;
  filter:drop-shadow(-12px 0 34px rgba(36,217,255,.14)) drop-shadow(12px 0 34px rgba(255,77,63,.10))
}
.sf-hero-logo{display:block;width:100%;height:auto}
.sf-eyebrow{
  display:flex;align-items:center;gap:9px;
  color:#8eb1bd;
  text-transform:uppercase;
  font-size:10px;
  font-weight:700;
  letter-spacing:.18em
}
.sf-dot{width:7px;height:7px;border-radius:50%;display:inline-block;background:#6a7980;box-shadow:0 0 12px rgba(255,255,255,.18)}
.sf-dot.live{background:#38e09d;box-shadow:0 0 12px rgba(56,224,157,.72)}
.sf-dot.offline{background:#ff5c50;box-shadow:0 0 12px rgba(255,92,80,.72)}
.sf-hero h1{
  margin:12px 0 8px;
  font-size:clamp(38px,5vw,68px);
  line-height:.98;
  letter-spacing:-.045em;
  color:#eff8fb;
  text-shadow:0 6px 25px rgba(0,0,0,.55)
}
.sf-lead,.sf-hero p{max-width:700px;color:#91a8b2;font-size:15px;line-height:1.72;margin:0}
.sf-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px}
.sf-btn,.sf-icon-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:0 16px;
  border:1px solid rgba(145,177,190,.25);
  background:rgba(4,14,19,.84);
  color:#bed1d9;
  text-decoration:none;
  text-transform:uppercase;
  font-size:10px;
  font-weight:700;
  letter-spacing:.11em;
  cursor:pointer;
  transition:.18s ease
}
.sf-btn:hover,.sf-icon-btn:hover{border-color:rgba(36,217,255,.48);color:white;background:rgba(15,58,72,.46)}
.sf-btn.primary{
  border-color:rgba(36,217,255,.48);
  background:linear-gradient(180deg,rgba(36,217,255,.22),rgba(6,69,88,.28));
  color:#d7f8ff;
  box-shadow:0 0 28px rgba(36,217,255,.08)
}
.sf-btn.disabled{opacity:.34;pointer-events:none}
.sf-hero-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px}
.sf-hero-tags span,.sf-feature-strip span{
  border:1px solid rgba(145,177,190,.14);
  background:rgba(4,14,19,.55);
  color:#718993;
  padding:6px 9px;
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.09em
}
.sf-steel-card{
  position:relative;
  overflow:hidden;
  border:1px solid var(--lineStrong);
  background:
    radial-gradient(260px 220px at 0% 0%,rgba(36,217,255,.10),transparent 70%),
    radial-gradient(260px 220px at 100% 100%,rgba(255,77,63,.08),transparent 70%),
    linear-gradient(180deg,rgba(11,31,40,.96),rgba(3,11,15,.97))
}
.sf-hero-status{padding:28px;min-height:390px;display:flex;flex-direction:column;justify-content:flex-end}
.sf-card-emblem{
  position:absolute;
  right:-40px;
  top:-34px;
  width:225px;
  opacity:.115;
  filter:saturate(.88) contrast(1.12);
  pointer-events:none
}
.sf-mini-title{
  position:relative;
  z-index:2;
  color:#6f8892;
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:9px
}
.sf-network-gauge{position:relative;z-index:2;display:flex;align-items:flex-end;gap:10px;margin:14px 0 28px}
.sf-network-gauge span{
  font-size:clamp(58px,7vw,90px);
  line-height:.8;
  font-weight:800;
  letter-spacing:-.06em;
  color:#e7f5f9;
  text-shadow:-7px 0 24px rgba(36,217,255,.10),7px 0 24px rgba(255,77,63,.08)
}
.sf-network-gauge small{color:#728a94;text-transform:uppercase;letter-spacing:.1em;font-size:9px;padding-bottom:7px}
.sf-hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid rgba(145,177,190,.14)}
.sf-hero-grid>div{padding:14px 0;border-bottom:1px solid rgba(145,177,190,.11)}
.sf-hero-grid>div:nth-child(odd){border-right:1px solid rgba(145,177,190,.11);padding-right:14px}
.sf-hero-grid>div:nth-child(even){padding-left:14px}
.sf-hero-grid strong{display:block;font-size:18px;color:#d8e7ec}
.sf-hero-grid span{display:block;margin-top:2px;color:#667f89;font-size:9px;text-transform:uppercase;letter-spacing:.08em}
.sf-section{padding-top:66px}
.sf-section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:17px}
.sf-kicker{display:block;color:#5f8794;text-transform:uppercase;letter-spacing:.18em;font-size:9px;font-weight:700}
.sf-section-heading h2{margin:3px 0 0;font-size:29px;letter-spacing:-.025em}
.sf-subtle{color:#617983;font-size:10px;text-transform:uppercase;letter-spacing:.08em}
.sf-stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:12px}
.sf-stat{
  position:relative;
  overflow:hidden;
  min-height:130px;
  padding:17px;
  border:1px solid rgba(145,177,190,.18);
  background:linear-gradient(180deg,rgba(8,25,33,.94),rgba(4,12,17,.96))
}
.sf-stat:before{
  content:"";
  position:absolute;
  left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,rgba(36,217,255,.68),rgba(255,255,255,.11),rgba(255,77,63,.48))
}
.sf-stat span{display:block;color:#718993;text-transform:uppercase;font-size:9px;letter-spacing:.1em}
.sf-stat strong{display:block;margin:11px 0 5px;font-size:30px;line-height:1;color:#e8f2f6}
.sf-stat em{display:block;color:#536b75;font-style:normal;font-size:10px}
.sf-two-col{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sf-three-col{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.sf-panel{padding:20px;min-height:260px}
.sf-panel-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px}
.sf-panel-head h3{margin:0;font-size:15px}
.sf-panel-head span{color:#607983;font-size:9px;text-transform:uppercase;letter-spacing:.08em}
.sf-server-list,.sf-presence-list{display:grid;gap:7px}
.sf-server-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto 88px 48px;
  align-items:center;
  gap:12px;
  min-height:58px;
  padding:10px 11px;
  border:1px solid rgba(145,177,190,.10);
  background:rgba(2,9,13,.48)
}
.sf-server-main strong{display:block;font-size:12px}
.sf-server-main span{display:block;color:#59727c;font-size:9px;margin-top:2px}
.sf-status-chip{
  padding:5px 7px;
  border:1px solid rgba(62,218,158,.25);
  background:rgba(62,218,158,.05);
  color:#62dca5;
  font-size:8px;
  letter-spacing:.08em
}
.sf-status-chip.off{border-color:rgba(255,91,79,.18);background:rgba(255,91,79,.04);color:#a96d68}
.sf-server-meta strong{display:block;font-size:12px;text-align:right}
.sf-server-meta span{display:block;color:#536c76;font-size:8px;text-transform:uppercase;text-align:right}
.sf-join-small{color:#a9eefd;text-decoration:none;font-size:9px;text-transform:uppercase}
.sf-presence-row{
  display:grid;
  grid-template-columns:minmax(110px,1fr) 1fr 1.15fr;
  gap:12px;
  align-items:center;
  min-height:44px;
  padding:8px 10px;
  border-bottom:1px solid rgba(145,177,190,.08)
}
.sf-presence-row strong{font-size:11px}
.sf-presence-row span{color:#657d87;font-size:10px}
.sf-empty{padding:24px;color:#5d7680;text-align:center;font-size:11px}
.sf-bars{display:grid;gap:9px}
.sf-bar{display:grid;grid-template-columns:minmax(90px,150px) 1fr 52px;align-items:center;gap:10px}
.sf-bar label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#78909a;font-size:10px}
.sf-bar-track{height:8px;background:rgba(145,177,190,.08);overflow:hidden}
.sf-bar-fill{height:100%;background:linear-gradient(90deg,rgba(36,217,255,.82),rgba(191,227,238,.42),rgba(255,77,63,.55));box-shadow:0 0 12px rgba(36,217,255,.15)}
.sf-bar strong{font-size:10px;text-align:right;color:#aec1c8}
.sf-copy-card{padding:22px;min-height:190px}
.sf-copy-card h3{margin:0 0 8px;font-size:16px}
.sf-copy-card p{margin:0;color:#718993;font-size:12px;line-height:1.65}
.sf-feature-strip{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;padding:13px;margin-top:12px}
.sf-heading-actions{display:flex;align-items:center;justify-content:flex-end;gap:12px}
.sf-updates-panel{padding:18px;min-height:240px}
.sf-updates-feed{display:grid;gap:11px}
.sf-update-entry{
  overflow:hidden;
  padding:16px;
  border:1px solid rgba(145,177,190,.14);
  border-left:2px solid rgba(36,217,255,.30);
  border-right:2px solid rgba(255,77,63,.22);
  background:linear-gradient(105deg,rgba(10,32,43,.72),rgba(3,11,16,.88) 62%,rgba(31,11,12,.55))
}
.sf-update-meta{display:flex;align-items:center;gap:10px;margin-bottom:11px}
.sf-update-avatar{width:36px;height:36px;flex:0 0 36px;border-radius:50%;object-fit:cover;background:#0c202a}
.sf-update-meta>div{display:flex;min-width:0;flex-direction:column}
.sf-update-meta strong{overflow:hidden;color:#dfeef3;font-size:12px;text-overflow:ellipsis;white-space:nowrap}
.sf-update-meta span{color:#607a85;font-size:9px;text-transform:uppercase;letter-spacing:.06em}
.sf-update-meta>a{margin-left:auto;color:#80cde3;font-size:9px;text-decoration:none;text-transform:uppercase;letter-spacing:.08em}
.sf-update-content{color:#a9bec7;font-size:12px;line-height:1.65;overflow-wrap:anywhere;white-space:pre-wrap}
.sf-update-content a{color:#67d6f2;text-decoration:none}.sf-update-content a:hover{text-decoration:underline}
.sf-update-media{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:9px;margin-top:13px}
.sf-update-media img,.sf-update-media video{display:block;width:100%;max-height:520px;border:1px solid rgba(145,177,190,.12);background:#02070a;object-fit:contain}
.sf-update-media img{cursor:zoom-in}
.sf-media-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.sf-media-card{
  display:block;
  position:relative;
  overflow:hidden;
  min-height:160px;
  border:1px solid rgba(145,177,190,.17);
  background:#030a0e
}
.sf-media-card:after{
  content:"VIEW";
  position:absolute;
  right:8px;bottom:8px;
  padding:5px 7px;
  background:rgba(1,7,10,.76);
  border:1px solid rgba(145,177,190,.16);
  color:#a8c0c9;
  font-size:8px;
  letter-spacing:.12em
}
.sf-media-card img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .3s ease,filter .3s ease}
.sf-media-card:hover img{transform:scale(1.025);filter:brightness(1.07)}
.sf-community-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.sf-community-card{display:flex;flex-direction:column;min-height:168px;padding:20px;text-decoration:none;transition:.18s ease}
.sf-community-card strong{font-size:17px}
.sf-community-card span{margin-top:8px;color:#758e98;font-size:11px;line-height:1.6}
.sf-community-card em{margin-top:auto;padding-top:18px;color:#9dc6d1;font-style:normal;font-size:9px;text-transform:uppercase;letter-spacing:.09em}
.sf-community-card:hover{border-color:rgba(36,217,255,.34);transform:translateY(-2px)}
.sf-footer{
  width:min(1240px,calc(100% - 36px));
  margin:0 auto;
  padding:22px 0 38px;
  display:flex;
  align-items:center;
  gap:14px;
  color:#607780;
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.1em
}
.sf-footer img{width:30px;height:30px;object-fit:contain;opacity:.72}
.sf-footer-line{height:1px;flex:1;background:linear-gradient(90deg,rgba(36,217,255,.25),rgba(145,177,190,.16),rgba(255,77,63,.2))}
.sf-footer a{text-decoration:none;color:#6c838d}.sf-footer a:hover{color:#bed3dc}
.sf-lightbox{position:fixed;inset:0;z-index:100;background:rgba(0,4,7,.92);display:grid;place-items:center;padding:44px}
.sf-lightbox[hidden]{display:none}
.sf-lightbox img{max-width:95vw;max-height:88vh;border:1px solid rgba(145,177,190,.3);box-shadow:0 20px 80px #000}
.sf-lightbox button{position:absolute;right:22px;top:18px;width:42px;height:42px;border:1px solid rgba(145,177,190,.25);background:#07151b;color:white;font-size:28px;cursor:pointer}

@media(max-width:1040px){
  .sf-community-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:980px){
  .sf-header{position:relative;flex-direction:column}
  .sf-brand-compact{width:min(250px,74vw)}
  .sf-nav{justify-content:center}
  .sf-hero{grid-template-columns:1fr;padding:28px;min-height:auto}
  .sf-hero-logo-wrap{margin:-26px auto -44px;width:min(690px,100%)}
  .sf-hero-status{min-height:320px}
  .sf-stat-grid{grid-template-columns:1fr 1fr}
  .sf-two-col,.sf-three-col{grid-template-columns:1fr}
	.sf-heading-actions{align-items:flex-end;flex-direction:column;gap:7px}
  .sf-media-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:680px){
  main{width:min(100% - 20px,1240px);padding-top:20px}
  .sf-header{width:min(100% - 20px,1240px)}
  .sf-nav{gap:0}
  .sf-nav a{padding:8px 7px;font-size:9px}
  .sf-stat-grid,.sf-community-grid,.sf-media-grid{grid-template-columns:1fr}
  .sf-server-row{grid-template-columns:1fr auto}
  .sf-server-meta{display:none}
  .sf-server-row>a,.sf-server-row>.sf-subtle{display:none}
  .sf-presence-row{grid-template-columns:1fr 1fr}
  .sf-presence-row span:last-child{display:none}
  .sf-hero{padding:20px}
  .sf-hero-logo-wrap{margin:-18px -8px -32px}
  .sf-hero h1{font-size:40px}
  .sf-section{padding-top:46px}
  .sf-section-heading{align-items:flex-start}
  .sf-footer{width:min(100% - 20px,1240px);flex-wrap:wrap}
  .sf-footer-line{order:3;flex-basis:100%}
}


/* V11 brand sizing corrections */
.sf-brand-mark{
  width:48px!important;
  height:48px;
  min-width:48px;
  display:block;
}
.sf-brand-mark img{
  width:48px!important;
  height:48px!important;
  object-fit:contain;
  border-radius:8px;
  filter:drop-shadow(-3px 0 10px rgba(36,217,255,.12)) drop-shadow(3px 0 10px rgba(255,77,63,.10));
}
.sf-hero{
  min-height:560px;
}
.sf-hero-logo-wrap{
  width:min(520px,74vw)!important;
  margin:-6px 0 -22px -6px!important;
}
.sf-hero-logo{
  width:100%;
  max-height:330px;
  object-fit:contain;
  object-position:left center;
}
.sf-card-emblem{
  width:122px!important;
  right:-19px!important;
  top:-18px!important;
  opacity:.075!important;
}
.sf-footer img{
  width:24px!important;
  height:24px!important;
}
@media(max-width:980px){
  .sf-brand-mark{width:44px!important;height:44px;min-width:44px}
  .sf-brand-mark img{width:44px!important;height:44px!important}
  .sf-hero-logo-wrap{
    width:min(455px,82vw)!important;
    margin:0 auto -18px!important;
  }
  .sf-hero-logo{max-height:285px}
}
@media(max-width:680px){
  .sf-hero-logo-wrap{
    width:min(360px,88vw)!important;
    margin:0 auto -12px!important;
  }
  .sf-hero-logo{max-height:225px}
}


/* ============================================================
   V12 BRAND LAYOUT
   Deliberate placement only:
   - square mark: top-left navigation
   - full logo: once, centered at top of homepage
   - compact logo: subpages only
   ============================================================ */

.sf-header{
  min-height:76px;
  padding:8px 0;
}

.sf-brand-mark{
  width:clamp(44px,4.2vw,58px)!important;
  height:clamp(44px,4.2vw,58px)!important;
  min-width:44px!important;
  flex:0 0 auto;
  display:flex!important;
  align-items:center;
  justify-content:center;
}

.sf-brand-mark img{
  display:block;
  width:100%!important;
  height:100%!important;
  object-fit:contain;
  border-radius:9px;
  filter:drop-shadow(0 6px 16px rgba(0,0,0,.45));
}

.sf-logo-masthead{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:4px 0 18px;
}

.sf-logo-masthead img{
  display:block;
  width:clamp(300px,41vw,520px);
  max-width:90vw;
  height:auto;
  object-fit:contain;
  filter:
    drop-shadow(-8px 0 24px rgba(36,217,255,.11))
    drop-shadow(8px 0 24px rgba(255,77,63,.08))
    drop-shadow(0 12px 24px rgba(0,0,0,.38));
}

.sf-hero{
  min-height:460px!important;
  padding:38px!important;
  align-items:center!important;
}

.sf-hero-copy{
  padding-top:0!important;
}

.sf-hero h1{
  margin-top:12px!important;
}

.sf-card-emblem{
  display:none!important;
}

.sf-footer img{
  display:none!important;
}

@media(max-width:980px){
  .sf-logo-masthead{
    padding:0 0 14px;
  }
  .sf-logo-masthead img{
    width:clamp(290px,58vw,460px);
  }
  .sf-hero{
    min-height:auto!important;
    padding:28px!important;
  }
}

@media(max-width:680px){
  .sf-brand-mark{
    width:44px!important;
    height:44px!important;
  }
  .sf-logo-masthead img{
    width:min(360px,88vw);
  }
  .sf-hero{
    padding:20px!important;
  }
}


/* ==============================================================
   V15 — LAUNCHER STEEL FLAME SKIN
   Geometry/content remain from the proven full website.
   This layer only skins it using the same language as the launcher:
   cyan left edge, red right edge, dark angled steel gradients,
   restrained inset glow, thin cyan→steel→red rails.
   ============================================================== */

:root{
  --sf-cyan:#19d2ff;
  --sf-red:#ff4639;
  --sf-steel:#afbdc5;
  --sf-line:rgba(135,165,179,.24);
}

body{
  background:
    radial-gradient(700px 420px at 78% -6%,rgba(0,198,255,.12),transparent 64%),
    radial-gradient(580px 420px at 32% 108%,rgba(255,48,34,.07),transparent 66%),
    linear-gradient(135deg,#020405 0%,#091117 42%,#030506 100%)!important;
}

/* Header branding */
.sf-brand-home{
  display:inline-flex;
  align-items:center;
  gap:11px;
  min-width:max-content;
  text-decoration:none;
}
.sf-brand-home img{
  display:block;
  width:clamp(44px,4vw,54px);
  height:clamp(44px,4vw,54px);
  object-fit:contain;
  border-radius:8px;
  filter:
    drop-shadow(0 0 10px rgba(25,210,255,.12))
    drop-shadow(0 5px 12px rgba(0,0,0,.55));
}
.sf-brand-home span{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:54px;
  color:#e5f0f5;
  font-size:17px;
  font-weight:800;
  letter-spacing:.055em;
  line-height:1;
  text-transform:uppercase;
}

/* Top navigation: no boxes. Launcher-style growing Steel Flame line. */
.sf-nav a{
  position:relative!important;
  overflow:visible!important;
  min-height:38px!important;
  padding:0 11px 8px!important;
  border:0!important;
  background:none!important;
  box-shadow:none!important;
  color:#7e939d!important;
}
.sf-nav a:before{
  content:none!important;
}
.sf-nav a:after{
  content:""!important;
  position:absolute!important;
  left:5%!important;
  right:5%!important;
  bottom:2px!important;
  height:2px!important;
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(25,210,255,.86) 18%,
      rgba(175,189,197,.50) 50%,
      rgba(255,70,57,.78) 82%,
      transparent 100%
    )!important;
  transform:scaleX(.10)!important;
  transform-origin:center!important;
  opacity:0!important;
  transition:transform .18s ease,opacity .18s ease,box-shadow .18s ease!important;
}
.sf-nav a:hover{
  color:#eef8fb!important;
  background:none!important;
  border:0!important;
  box-shadow:none!important;
  text-shadow:-3px 0 10px rgba(25,210,255,.12),3px 0 10px rgba(255,70,57,.08)!important;
}
.sf-nav a:hover:after,
.sf-nav a:focus-visible:after{
  transform:scaleX(1)!important;
  opacity:1!important;
  box-shadow:
    -8px 0 10px rgba(25,210,255,.16),
    8px 0 10px rgba(255,70,57,.12)!important;
}

/* Hero logo lives inside the original hero window. */
.sf-hero-main-logo{
  display:block;
  width:clamp(315px,35vw,455px);
  max-width:100%;
  height:auto;
  max-height:245px;
  margin:-10px 0 -12px -4px;
  object-fit:contain;
  object-position:left center;
  filter:
    drop-shadow(0 8px 20px rgba(0,0,0,.34))
    drop-shadow(-7px 0 18px rgba(25,210,255,.08))
    drop-shadow(7px 0 18px rgba(255,70,57,.06));
}

/* Launcher Steel Flame windows — preserve existing layout and dimensions. */
.sf-frame,
.sf-steel-card,
.sf-stat,
.sf-server-row,
.sf-community-card,
.sf-copy-card{
  border:1px solid rgba(142,169,181,.31)!important;
  border-left:2px solid rgba(25,210,255,.56)!important;
  border-right:2px solid rgba(255,70,57,.48)!important;
  border-radius:8px!important;
  background:
    linear-gradient(
      105deg,
      rgba(10,31,42,.96) 0%,
      rgba(6,17,23,.98) 34%,
      rgba(5,12,17,.99) 68%,
      rgba(29,11,12,.94) 100%
    )!important;
  box-shadow:
    inset 0 1px 0 rgba(226,241,248,.045),
    inset 9px 0 22px rgba(25,210,255,.025),
    inset -9px 0 22px rgba(255,70,57,.023),
    0 7px 18px rgba(0,0,0,.26)!important;
}
.sf-frame:before,
.sf-steel-card:before,
.sf-stat:before,
.sf-server-row:before,
.sf-community-card:before,
.sf-copy-card:before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  left:10px!important;
  right:10px!important;
  top:0!important;
  width:auto!important;
  height:1px!important;
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(25,210,255,.76) 18%,
      rgba(175,189,197,.42) 50%,
      rgba(255,70,57,.70) 82%,
      transparent 100%
    )!important;
  opacity:1!important;
  pointer-events:none!important;
}
.sf-frame:hover,
.sf-community-card:hover{
  border-left-color:rgba(25,210,255,.70)!important;
  border-right-color:rgba(255,70,57,.60)!important;
}

/* Public network has three cards after moving sidecars to Admin. */
.public-network-stats{
  grid-template-columns:repeat(3,1fr)!important;
}

/* Buttons mirror the launcher's pure-CSS Steel Flame controls. */
.sf-btn,
.sf-icon-btn{
  position:relative!important;
  overflow:hidden!important;
  border:1px solid rgba(127,158,173,.30)!important;
  border-left:2px solid rgba(25,210,255,.46)!important;
  border-right:2px solid rgba(255,70,57,.34)!important;
  border-radius:6px!important;
  background:
    linear-gradient(
      105deg,
      rgba(11,39,52,.96),
      rgba(6,18,24,.99) 54%,
      rgba(34,12,13,.94)
    )!important;
  color:#e5eef3!important;
  box-shadow:
    inset 0 1px 0 rgba(231,244,250,.045),
    0 4px 11px rgba(0,0,0,.22)!important;
}
.sf-btn:after,
.sf-icon-btn:after{
  content:""!important;
  position:absolute!important;
  left:14%!important;
  right:14%!important;
  bottom:0!important;
  height:1px!important;
  background:linear-gradient(90deg,transparent,var(--sf-cyan),rgba(175,189,197,.42),var(--sf-red),transparent)!important;
  opacity:.48!important;
  transition:left .16s ease,right .16s ease,opacity .16s ease!important;
}
.sf-btn:hover,
.sf-icon-btn:hover{
  color:#fff!important;
  transform:translateY(-1px)!important;
  background:
    linear-gradient(
      105deg,
      rgba(12,67,87,.98),
      rgba(7,28,37,.99) 54%,
      rgba(48,15,16,.96)
    )!important;
  border-left-color:rgba(25,210,255,.86)!important;
  border-right-color:rgba(255,70,57,.68)!important;
}
.sf-btn:hover:after,
.sf-icon-btn:hover:after{
  left:5%!important;
  right:5%!important;
  opacity:.92!important;
}

/* Server rows get the same clean CSS treatment as launcher V32/V33. */
.sf-server-row{
  background:
    linear-gradient(
      105deg,
      rgba(10,31,42,.96) 0%,
      rgba(6,17,23,.98) 34%,
      rgba(5,12,17,.99) 68%,
      rgba(29,11,12,.94) 100%
    )!important;
}
.sf-status-chip{
  border-color:rgba(87,220,155,.20)!important;
  background:rgba(47,180,119,.07)!important;
  color:#79ddb0!important;
}
.sf-status-chip.off{
  border-color:rgba(151,164,174,.12)!important;
  background:rgba(135,148,157,.045)!important;
  color:#7e8e96!important;
}

/* Media uses the same restrained edge language. */
.sf-media-card{
  border-left:2px solid rgba(25,210,255,.40)!important;
  border-right:2px solid rgba(255,70,57,.34)!important;
  border-radius:7px!important;
}
.sf-media-card:before{
  content:"";
  position:absolute;
  z-index:2;
  left:10px;
  right:10px;
  top:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(25,210,255,.72),rgba(175,189,197,.38),rgba(255,70,57,.66),transparent);
}

/* Footer line matches the launcher divider language. */
.sf-footer-line{
  background:linear-gradient(90deg,rgba(25,210,255,.28),rgba(175,189,197,.22),rgba(255,70,57,.24))!important;
}

/* Compact subpage branding remains modest. */
.sf-brand-compact{
  width:clamp(132px,15vw,170px)!important;
  min-width:120px!important;
}
.sf-brand-compact img{
  width:100%!important;
  height:auto!important;
  object-fit:contain!important;
}

@media(max-width:980px){
  .sf-hero-main-logo{
    width:clamp(290px,52vw,420px);
    margin:-8px auto -10px;
    object-position:center;
  }
}

@media(max-width:680px){
  .sf-brand-home span{
    font-size:14px;
    min-height:44px;
  }
  .sf-brand-home img{
    width:44px;
    height:44px;
  }
  .sf-hero-main-logo{
    width:min(345px,90vw);
  }
  .public-network-stats{
    grid-template-columns:1fr!important;
  }
}


/* ==============================================================
   V17 — MATCHED HTML/CSS LOGO FIX
   Exact sizes so the logo cannot expand from inherited rules.
   ============================================================== */

/* Top-left square icon + text */
.sf-brand-home{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:11px!important;
    width:auto!important;
    min-width:0!important;
    height:50px!important;
    text-decoration:none!important;
}

.sf-brand-home > img{
    display:block!important;
    flex:0 0 48px!important;
    width:48px!important;
    min-width:48px!important;
    max-width:48px!important;
    height:48px!important;
    min-height:48px!important;
    max-height:48px!important;
    object-fit:contain!important;
}

.sf-brand-home > span{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    height:48px!important;
    line-height:48px!important;
    margin:0!important;
    padding:0!important;
    font-size:17px!important;
    white-space:nowrap!important;
}

/* The full 1536x1024 Soul Elysium logo inside the hero. */
.sf-hero-main-logo{
    display:block!important;
    flex:none!important;

    width:325px!important;
    min-width:0!important;
    max-width:325px!important;

    height:auto!important;
    min-height:0!important;
    max-height:none!important;

    margin:0 0 14px 0!important;
    padding:0!important;

    object-fit:contain!important;
    object-position:left center!important;

    transform:none!important;
}

/* Protect the actual cache-busted hero image even if another generic image rule wins. */
.sf-hero-copy > img[src*="se-hero-logo"],
.sf-hero img[src*="se-hero-logo"]{
    width:325px!important;
    max-width:325px!important;
    height:auto!important;
    max-height:none!important;
}

/* Kill the old detached masthead selectors if an old rule remains in the cascade. */
.sf-logo-masthead,
.sf-hero-logo-wrap{
    display:none!important;
}

@media(max-width:680px){
    .sf-brand-home{
        height:44px!important;
    }
    .sf-brand-home > img{
        flex-basis:42px!important;
        width:42px!important;
        min-width:42px!important;
        max-width:42px!important;
        height:42px!important;
        min-height:42px!important;
        max-height:42px!important;
    }
    .sf-brand-home > span{
        height:42px!important;
        line-height:42px!important;
        font-size:14px!important;
    }
    .sf-hero-main-logo,
    .sf-hero-copy > img[src*="se-hero-logo"],
    .sf-hero img[src*="se-hero-logo"]{
        width:260px!important;
        max-width:260px!important;
        margin:0 auto 12px!important;
    }
}


/* ==============================================================
   V26 — FLAME STEEL PAGE CANVAS
   --------------------------------------------------------------
   Same restrained gradient family as the earlier background,
   but with the color order reversed:

       FLAME (deep ember red) -> STEEL -> (muted cyan) STEEL

   No black overlay.
   No opacity wash used to "darken" the colors.
   The colors themselves are simply lower-luminance / less saturated.
   ============================================================== */

html{
    background:#09090a!important;
}

body{
    background:
        /* FLAME — muted ember red on the left */
        radial-gradient(
            900px 620px at 4% 20%,
            #35100f 0%,
            #29100f 24%,
            #1c0d0e 45%,
            #111012 64%,
            transparent 80%
        ),

        /* STEEL — subdued cold cyan on the right */
        radial-gradient(
            900px 620px at 96% 72%,
            #0a303a 0%,
            #0a2730 24%,
            #0a1d24 45%,
            #0d1215 64%,
            transparent 80%
        ),

        /* Dark steel bridge through the whole page */
        linear-gradient(
            135deg,
            #0b0708 0%,
            #1c0d0e 20%,
            #171214 35%,
            #11171a 50%,
            #0d1b21 68%,
            #091319 84%,
            #07090b 100%
        )!important;

    background-color:#0d1012!important;
    background-attachment:fixed!important;
}

/*
   No ambient blur or dimming layer.
   The background is subdued by using restrained source colors.
*/
.sf-ambient{
    display:none!important;
    opacity:1!important;
    filter:none!important;
}

/* Keep just a faint launcher-like texture. */
body:before{
    opacity:.035!important;
}

.sf-scanlines{
    opacity:.025!important;
}

/* Header follows the Flame -> Steel direction without becoming bright. */
.sf-header{
    background:
        linear-gradient(
            105deg,
            rgba(25,10,11,.985) 0%,
            rgba(12,15,17,.965) 48%,
            rgba(6,22,28,.94) 76%,
            rgba(6,22,28,0) 100%
        )!important;
}

/* Unframed regions stay transparent so the page canvas remains visible. */
main,
.sf-section,
.store-shell{
    background:transparent!important;
}

#page-top{
    scroll-margin-top:0!important;
}

/* ==============================================================
   V35 — FLAME STEEL PAGE CANVAS
   Slightly darker source colors than V34.

   Header fix:
   The fade now sits ON TOP of the content below the sticky header
   and extends 72px downward. This creates a true visible blend
   instead of ending at the header's bottom edge.
   ============================================================== */

html{
    background:#010203!important;
}

body{
    background:
        /* Deep valley left-of-center */
        radial-gradient(
            820px 580px at 38% 42%,
            #010203 0%,
            #010203 26%,
            #030405 43%,
            transparent 66%
        ),

        /* Deep valley right-of-center */
        radial-gradient(
            880px 620px at 64% 60%,
            #010203 0%,
            #010203 27%,
            #030405 44%,
            transparent 68%
        ),

        /* FLAME — slightly darker ember red */
        radial-gradient(
            1020px 720px at 3% 18%,
            #0d0404 0%,
            #0b0404 23%,
            #080404 43%,
            #050506 61%,
            transparent 79%
        ),

        /* STEEL — slightly darker cold cyan */
        radial-gradient(
            1020px 720px at 97% 74%,
            #020d11 0%,
            #020b0f 23%,
            #03090c 43%,
            #050709 61%,
            transparent 79%
        ),

        /* Main Flame -> dark dip -> steel -> dark dip -> cyan bridge */
        linear-gradient(
            135deg,
            #020202 0%,
            #070303 15%,
            #080404 24%,
            #030304 34%,
            #010203 43%,
            #050708 51%,
            #020304 60%,
            #010203 67%,
            #040708 76%,
            #030607 86%,
            #010203 100%
        )!important;

    background-color:#040607!important;
    background-attachment:fixed!important;
}

.sf-ambient{
    display:none!important;
    opacity:1!important;
    filter:none!important;
}

body:before{
    opacity:.018!important;
}

.sf-scanlines{
    opacity:.010!important;
}

/*
   Header itself has no hard-edged painted block.
*/
.sf-header{
    position:sticky!important;
    background:transparent!important;
    box-shadow:none!important;
    overflow:visible!important;
    isolation:auto!important;
}

/*
   Solid header field.
   This layer covers the actual header area only.
*/
.sf-header:before{
    content:""!important;
    position:absolute!important;
    left:-40px!important;
    right:-40px!important;
    top:0!important;
    bottom:0!important;
    z-index:-1!important;
    pointer-events:none!important;

    background:
        linear-gradient(
            105deg,
            #0b0405 0%,
            #070708 48%,
            #031014 76%,
            #031014 100%
        )!important;
}

/*
   REAL DOWNWARD FADE.
   This is intentionally above the page content below the header.
   It starts opaque at the header edge and fades to fully transparent.
*/
.sf-header:after{
    content:""!important;
    display:block!important;
    position:absolute!important;
    left:-40px!important;
    right:-40px!important;
    top:100%!important;
    height:72px!important;
    z-index:1000!important;
    pointer-events:none!important;

    background:
        linear-gradient(
            to bottom,
            rgba(7,7,8,1) 0%,
            rgba(6,7,8,.92) 14%,
            rgba(5,7,8,.76) 32%,
            rgba(4,6,7,.54) 52%,
            rgba(3,5,6,.31) 70%,
            rgba(2,4,5,.13) 86%,
            rgba(2,4,5,0) 100%
        )!important;
}

/* Keep header contents above both background layers. */
.sf-header > *{
    position:relative!important;
    z-index:2!important;
}

main,
.sf-section,
.store-shell{
    background:transparent!important;
}

#page-top{
    scroll-margin-top:0!important;
}

/* Media library: thumbnails stay lightweight; players load only when opened. */
.sf-media-caption{position:absolute;bottom:0;left:0;right:0;padding:24px 12px 10px;background:linear-gradient(transparent,rgba(0,5,9,.95));color:#edfaff;font-weight:600;z-index:2;overflow-wrap:anywhere}
.sf-lightbox iframe{display:block;width:min(1100px,92vw,151.111vh);height:min(618.75px,51.75vw,85vh);border:1px solid #527684;background:#000}
.sf-lightbox [hidden]{display:none!important}
.admin-media-forms{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:20px 0}
.admin-media-forms form{display:grid;gap:12px;align-content:start}
.admin-media-list{display:grid;gap:16px}
.admin-media-row{display:grid;grid-template-columns:160px minmax(0,1fr);gap:16px;padding:16px;border:1px solid #294653;background:#08151d}
.admin-media-row img{width:160px;height:100px;object-fit:contain;background:#03080c}
.admin-media-row form{display:grid;gap:10px;min-width:0}
.admin-media-controls{display:flex;gap:8px;flex-wrap:wrap}
@media(max-width:650px){.admin-media-forms{grid-template-columns:1fr}.admin-media-row{grid-template-columns:1fr}.admin-media-row img{width:100%;height:150px}}

.sf-media-card{aspect-ratio:16/10;min-height:0}.sf-media-card:after{display:none}

.sf-media-galleries{display:grid;gap:28px}.sf-media-group{min-width:0}.sf-media-group h3{margin:0 0 14px}.sf-media-youtube{grid-template-columns:repeat(2,minmax(0,1fr))}.sf-media-youtube .sf-media-card{aspect-ratio:16/9}.sf-media-card img{position:absolute;inset:0}
@media(max-width:650px){.sf-media-youtube{grid-template-columns:1fr}.sf-lightbox{padding:12px}}