/* AREX_DESIGN_CONSOLIDATION_V1
   Unified visual layer for AREX Monitoring.
   CSS-first: existing product/API markup remains authoritative.
*/

:root{
  --arex-d-bg:#080b0f;
  --arex-d-panel:#0f151c;
  --arex-d-panel-2:#121a22;
  --arex-d-panel-3:#161f29;
  --arex-d-line:#26323e;
  --arex-d-line-soft:rgba(255,255,255,.075);
  --arex-d-text:#f5f7f9;
  --arex-d-muted:#8997a8;
  --arex-d-muted-2:#647487;
  --arex-d-orange:#ff7900;
  --arex-d-orange-2:#ff9b3b;
  --arex-d-green:#41d983;
  --arex-d-shadow:0 16px 50px rgba(0,0,0,.24);
}

body.arex-design-v1{
  background:
    radial-gradient(900px 420px at 8% 0%,rgba(255,121,0,.065),transparent 58%),
    var(--arex-d-bg);
  color:var(--arex-d-text);
}

/* ---------- shared legacy shell ---------- */
body.arex-design-v1 header{
  background:rgba(7,10,14,.96);
  border-bottom:1px solid var(--arex-d-line-soft);
}

body.arex-design-v1 header .nav{
  max-width:1560px;
  min-height:72px;
  margin:0 auto;
  padding:0 30px;
  gap:28px;
}

body.arex-design-v1 header .nav .logo{
  display:flex;
  align-items:center;
  min-width:210px;
  margin-right:auto;
}

body.arex-design-v1 header .nav .logo img{
  display:block;
  width:190px;
  height:48px;
  object-fit:contain;
  object-position:left center;
}

body.arex-design-v1 header .nav > a:not(.logo){
  min-height:40px;
  display:inline-flex;
  align-items:center;
  padding:0 10px;
  border-radius:10px;
  color:#c3ccd7;
  font-size:13px;
  font-weight:850;
  transition:.18s ease;
}

body.arex-design-v1 header .nav > a:not(.logo):hover{
  color:#fff;
  background:rgba(255,121,0,.10);
}

body.arex-design-v1 header .nav > a.is-current{
  color:var(--arex-d-orange-2);
  background:rgba(255,121,0,.11);
}

/* ---------- main catalog: make rows denser and visually grouped ---------- */
body.arex-page-home .server{
  grid-template-columns:
    minmax(310px,2.15fr)
    minmax(175px,.92fr)
    112px
    90px
    100px
    auto !important;
  gap:13px !important;
  min-height:86px;
  padding:11px 13px !important;
  align-items:center;
}

body.arex-page-home .server-main{
  min-width:0;
  padding-right:8px;
}

body.arex-page-home .server-name strong,
body.arex-page-home .server-name strong a{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

body.arex-page-home .server .map-cell{
  min-width:0;
  gap:9px !important;
}

body.arex-page-home .server .map-cell img{
  box-shadow:0 5px 18px rgba(0,0,0,.22);
}

body.arex-page-home .server .players-cell,
body.arex-page-home .server .ping-cell,
body.arex-page-home .server .mode-cell{
  min-width:0;
}

body.arex-page-home .server-actions{
  justify-self:end;
  gap:6px !important;
  white-space:nowrap;
}

body.arex-page-home .server-actions button,
body.arex-page-home .server-actions a{
  min-height:38px;
  border-radius:9px;
}

body.arex-page-home .server:hover{
  background:
    linear-gradient(90deg,rgba(255,121,0,.035),transparent 34%),
    #111820;
}

/* ---------- old SEO pages: same visual language as modern monitor ---------- */
body.arex-page-seo main{
  max-width:1560px;
  padding:28px 30px 60px;
}

body.arex-page-seo .breadcrumb{
  margin:0 0 18px;
  color:#6f7f91;
  font-size:11px;
}

body.arex-page-seo h1{
  max-width:1050px;
  margin:0 0 10px;
  font-size:32px;
  letter-spacing:-.02em;
  line-height:1.12;
}

body.arex-page-seo .lead{
  max-width:980px;
  margin:0;
  color:#96a4b4;
  font-size:14px;
  line-height:1.58;
}

body.arex-page-seo .server-list{
  margin-top:20px;
  overflow:hidden;
  border:1px solid var(--arex-d-line);
  border-radius:16px;
  background:#0d1319;
  box-shadow:0 12px 34px rgba(0,0,0,.13);
}

body.arex-page-seo .server-list .server{
  grid-template-columns:minmax(300px,2fr) minmax(180px,.9fr) 105px 80px auto;
  gap:12px;
  min-height:78px;
  padding:11px 14px;
  border-color:#202b35;
  background:transparent;
}

body.arex-page-seo .server-list .server:hover{
  background:linear-gradient(90deg,rgba(255,121,0,.055),rgba(255,255,255,.018));
}

body.arex-page-seo .server .name{
  color:#f6f7f9;
  font-size:13px;
}

body.arex-page-seo .server .ip{
  margin-top:4px;
  color:#758599;
}

body.arex-page-seo .server .label{
  color:#637487;
}

body.arex-page-seo .server .value{
  color:#eef2f6;
}

body.arex-page-seo .server .button{
  justify-self:end;
  min-width:92px;
  text-align:center;
  border-color:#33404d;
  background:#111820;
}

body.arex-page-seo .server .button:hover{
  border-color:rgba(255,121,0,.55);
  color:#fff;
}

body.arex-page-seo .info-grid{
  gap:9px;
  margin-top:18px;
}

body.arex-page-seo .metric{
  position:relative;
  overflow:hidden;
  min-width:0;
  padding:15px;
  border-color:var(--arex-d-line);
  border-radius:13px;
  background:
    linear-gradient(145deg,rgba(255,121,0,.035),transparent 55%),
    var(--arex-d-panel);
}

body.arex-page-seo .metric::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:38px;
  height:2px;
  background:var(--arex-d-orange);
  opacity:.82;
}

body.arex-page-seo .metric strong{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:17px;
}

body.arex-page-seo .section{
  margin-top:18px;
  padding:18px;
  border-color:var(--arex-d-line);
  border-radius:15px;
  background:var(--arex-d-panel);
}

body.arex-page-seo .section h2{
  margin:0 0 8px;
  font-size:17px;
}

body.arex-page-seo .links{
  gap:7px;
  margin-top:13px;
}

body.arex-page-seo .links a{
  min-height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:9px;
}

body.arex-page-seo .links a.arex-primary-action{
  color:#111;
  border-color:var(--arex-d-orange);
  background:var(--arex-d-orange);
}

/* ---------- image-led map/server SEO hero ---------- */
.arex-page-map .arex-map-page-hero,
.arex-page-server-seo .arex-server-cover{
  position:relative;
  isolation:isolate;
  height:228px;
  margin:0 0 20px;
  overflow:hidden;
  border:1px solid var(--arex-d-line);
  border-radius:18px;
  background:
    radial-gradient(circle at 15% 20%,rgba(255,121,0,.15),transparent 34%),
    #0f151c;
  box-shadow:var(--arex-d-shadow);
}

.arex-page-map .arex-map-page-hero > img,
.arex-page-server-seo .arex-server-cover > img{
  position:absolute;
  inset:0;
  z-index:-2;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.78;
}

.arex-page-map .arex-map-page-hero::after,
.arex-page-server-seo .arex-server-cover::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(90deg,rgba(5,8,11,.94) 0%,rgba(5,8,11,.62) 46%,rgba(5,8,11,.24) 100%),
    linear-gradient(0deg,rgba(5,8,11,.86),transparent 64%);
}

.arex-design-hero-copy{
  position:absolute;
  left:24px;
  right:24px;
  bottom:22px;
  max-width:760px;
}

.arex-design-hero-copy small{
  display:block;
  margin-bottom:7px;
  color:var(--arex-d-orange-2);
  font-size:10px;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.arex-design-hero-copy strong{
  display:block;
  color:#fff;
  font-size:28px;
  line-height:1.08;
  text-shadow:0 2px 18px rgba(0,0,0,.45);
}

.arex-seo-map-thumb{
  width:64px;
  height:40px;
  flex:0 0 64px;
  object-fit:cover;
  border:1px solid rgba(255,255,255,.10);
  border-radius:7px;
  background:#0b1015;
}

body.arex-page-seo .server .arex-map-cell{
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0;
}

body.arex-page-seo .server .arex-map-cell > div{
  min-width:0;
}

body.arex-page-seo .server .arex-map-cell .value{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* ---------- rich live server page ---------- */
body.arex-page-live-server .arex-v22-server-hero{
  margin-top:16px;
  padding:20px;
  border:1px solid var(--arex-d-line);
  border-radius:18px;
  background:
    radial-gradient(560px 220px at 8% 0%,rgba(255,121,0,.12),transparent 64%),
    linear-gradient(145deg,#111821,#0d1319);
  box-shadow:0 18px 50px rgba(0,0,0,.19);
}

body.arex-page-live-server .arex-v22-server-top{
  gap:18px;
}

body.arex-page-live-server .arex-v22-stats{
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:9px;
}

body.arex-page-live-server .arex-v22-stat{
  min-height:74px;
  padding:12px;
  border:1px solid rgba(255,255,255,.075);
  border-radius:12px;
  background:rgba(5,9,13,.45);
}

body.arex-page-live-server .arex-v24-analytics,
body.arex-page-live-server .history-panel,
body.arex-page-live-server #historyPanel{
  border-radius:15px;
  box-shadow:0 10px 30px rgba(0,0,0,.10);
}

/* ---------- cabinet shell only; business logic untouched ---------- */
body.arex-page-cabinet{
  background:
    radial-gradient(760px 360px at 10% 0%,rgba(255,121,0,.055),transparent 62%),
    #080b0f;
}

body.arex-page-cabinet h1,
body.arex-page-cabinet h2{
  letter-spacing:-.015em;
}

body.arex-page-cabinet [data-arex-login-hidden="1"]{
  display:none !important;
}

/* ---------- responsive ---------- */
@media(max-width:1250px){
  body.arex-page-home .server{
    grid-template-columns:minmax(260px,1.8fr) minmax(150px,.82fr) 100px 78px 92px auto !important;
    gap:10px !important;
  }

  body.arex-page-seo .server-list .server{
    grid-template-columns:minmax(250px,1.7fr) minmax(155px,.8fr) 95px 74px auto;
  }

  body.arex-page-live-server .arex-v22-stats{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media(max-width:900px){
  body.arex-design-v1 header .nav{
    padding:12px 16px;
    gap:10px;
    flex-wrap:wrap;
  }

  body.arex-design-v1 header .nav .logo{
    min-width:0;
  }

  body.arex-design-v1 header .nav .logo img{
    width:174px;
    height:44px;
  }

  body.arex-page-seo main{
    padding:22px 16px 48px;
  }

  body.arex-page-seo .server-list .server{
    grid-template-columns:1fr auto;
  }

  .arex-page-map .arex-map-page-hero,
  .arex-page-server-seo .arex-server-cover{
    height:195px;
  }
}

@media(max-width:620px){
  body.arex-design-v1 header .nav{
    min-height:auto;
  }

  body.arex-design-v1 header .nav .logo{
    width:100%;
  }

  body.arex-design-v1 header .nav > a:not(.logo){
    min-height:34px;
    padding:0 7px;
    font-size:11px;
  }

  body.arex-page-seo h1{
    font-size:26px;
  }

  body.arex-page-seo .info-grid{
    grid-template-columns:1fr 1fr;
  }

  body.arex-page-live-server .arex-v22-stats{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .arex-page-map .arex-map-page-hero,
  .arex-page-server-seo .arex-server-cover{
    height:168px;
    border-radius:14px;
  }

  .arex-design-hero-copy{
    left:16px;
    right:16px;
    bottom:15px;
  }

  .arex-design-hero-copy strong{
    font-size:22px;
  }
}

@media(max-width:430px){
  body.arex-page-seo main{
    padding:18px 10px 42px;
  }

  body.arex-page-seo .info-grid{
    grid-template-columns:1fr;
  }

  body.arex-page-live-server .arex-v22-stats{
    grid-template-columns:1fr 1fr;
  }
}

/* AREX_UI_POLISH_V110
   Final UI pass after live visual review.
   API/DB/product logic intentionally untouched.
*/

/* ------------------------------
   Global spacing rhythm
------------------------------ */
body.arex-design-v1{
  --arex-polish-gap:12px;
}

body.arex-design-v1 main{
  scroll-margin-top:84px;
}

body.arex-design-v1 button,
body.arex-design-v1 .button,
body.arex-design-v1 a.button{
  transition:
    border-color .16s ease,
    background .16s ease,
    color .16s ease,
    transform .16s ease;
}

body.arex-design-v1 button:hover,
body.arex-design-v1 .button:hover,
body.arex-design-v1 a.button:hover{
  transform:translateY(-1px);
}

/* ------------------------------
   Main catalog — tighter desktop
------------------------------ */
body.arex-page-home .server{
  grid-template-columns:
    minmax(300px,2.2fr)
    minmax(150px,.82fr)
    100px
    78px
    92px
    minmax(255px,auto) !important;
  column-gap:11px !important;
  min-height:80px;
  padding:9px 12px !important;
}

body.arex-page-home .server-main{
  padding-right:2px;
}

body.arex-page-home .server-name{
  gap:7px;
}

body.arex-page-home .server-subline{
  margin-top:3px;
}

body.arex-page-home .server .map-cell img{
  width:76px !important;
  height:46px !important;
  flex-basis:76px !important;
}

body.arex-page-home .server-actions{
  display:grid !important;
  grid-template-columns:auto auto auto auto;
  justify-content:end;
  align-items:center;
  gap:5px !important;
}

body.arex-page-home .server-actions button,
body.arex-page-home .server-actions a{
  min-height:34px !important;
  padding:0 10px !important;
  border-radius:8px !important;
  font-size:11px !important;
  font-weight:850 !important;
}

body.arex-page-home .server-actions .play-button,
body.arex-page-home .server-actions [href^="steam://"]{
  min-width:66px;
}

/* ------------------------------
   Map pages — one hero image,
   no repeated same-map thumbs
------------------------------ */
body.arex-page-map .arex-map-page-hero{
  height:250px;
  margin-bottom:16px;
}

body.arex-page-map .arex-map-page-hero + h1{
  display:none;
}

body.arex-page-map .lead{
  max-width:860px;
  margin-bottom:16px;
}

body.arex-page-map .server-list{
  margin-top:14px;
}

body.arex-page-map .server-list .server{
  grid-template-columns:
    minmax(300px,2.2fr)
    118px
    84px
    104px !important;
  gap:12px !important;
  min-height:70px;
  padding:9px 13px !important;
}

body.arex-page-map .server-list .arex-map-cell{
  display:none !important;
}

body.arex-page-map .server-list .server .button{
  min-width:96px;
  min-height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* ------------------------------
   SEO server page — hero first
------------------------------ */
body.arex-page-server-seo .arex-server-cover{
  height:270px;
  margin-bottom:14px;
}

body.arex-page-server-seo .arex-server-cover + h1,
body.arex-page-server-seo h1.arex-polish-source-title{
  display:none;
}

body.arex-page-server-seo .arex-server-cover .arex-design-hero-copy{
  max-width:920px;
}

body.arex-page-server-seo .arex-server-cover .arex-design-hero-copy strong{
  font-size:32px;
  line-height:1.04;
}

body.arex-page-server-seo .info-grid{
  grid-template-columns:1.35fr .7fr 1fr .65fr .8fr;
  gap:8px;
  margin-top:12px;
}

body.arex-page-server-seo .metric{
  min-height:76px;
  padding:12px 13px;
}

body.arex-page-server-seo .section{
  padding:16px;
}

body.arex-page-server-seo .links{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
}

body.arex-page-server-seo .links a{
  min-width:118px;
  padding:0 14px;
}

/* ------------------------------
   Rich live server page
------------------------------ */
body.arex-page-live-server .arex-v22-server-hero{
  padding:17px;
}

body.arex-page-live-server .arex-v22-server-top{
  margin-bottom:12px;
}

body.arex-page-live-server .arex-v22-stats{
  gap:7px;
}

body.arex-page-live-server .arex-v22-stat{
  min-height:66px;
  padding:10px 11px;
}

body.arex-page-live-server .arex-v22-stat span,
body.arex-page-live-server .arex-v22-stat small{
  font-size:10px;
}

body.arex-page-live-server .arex-v22-stat strong,
body.arex-page-live-server .arex-v22-stat b{
  font-size:15px;
}

/* ------------------------------
   Cabinet — one dashboard rhythm
------------------------------ */
body.arex-page-cabinet main.shell{
  max-width:1500px;
}

body.arex-page-cabinet .cabinet-dashboard-v179{
  gap:12px;
}

body.arex-page-cabinet .cabinet-dashboard-head-v179{
  margin-bottom:10px;
}

body.arex-page-cabinet .cabinet-dashboard-head-v179 h2{
  margin-bottom:4px;
}

body.arex-page-cabinet .cabinet-summary-v179{
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:9px !important;
}

body.arex-page-cabinet .cabinet-summary-card-v179{
  min-height:112px !important;
  padding:15px !important;
  border-radius:13px !important;
}

body.arex-page-cabinet .cabinet-account-v179,
body.arex-page-cabinet #favoritesPanel,
body.arex-page-cabinet #claimsPanel,
body.arex-page-cabinet #plansPanel,
body.arex-page-cabinet #ordersPanel{
  border-radius:15px;
}

body.arex-page-cabinet .arex-v200-panel,
body.arex-page-cabinet .arex-v231-owner-panel,
body.arex-page-cabinet [class*="arex-v23"][class*="panel"]{
  box-shadow:0 12px 34px rgba(0,0,0,.12);
}

body.arex-page-cabinet .arex-v200-panel-title,
body.arex-page-cabinet #arexV220Title{
  letter-spacing:-.01em;
}

/* Commercial cards */
body.arex-page-cabinet .arex-v200-service-card,
body.arex-page-cabinet [data-service]{
  min-width:0;
}

body.arex-page-cabinet [data-service="VIP"]{
  --arex-service-accent:#f6c453;
}

body.arex-page-cabinet [data-service="TOP"]{
  --arex-service-accent:#ff7900;
}

body.arex-page-cabinet [data-service="BOOST"]{
  --arex-service-accent:#4ea1ff;
}

body.arex-page-cabinet [data-service="GAMEMENU"]{
  --arex-service-accent:#8e9aa8;
}

/* ------------------------------
   Tablet
------------------------------ */
@media(max-width:1100px){
  body.arex-page-home .server{
    grid-template-columns:
      minmax(250px,1.6fr)
      minmax(145px,.8fr)
      96px
      76px
      88px !important;
  }

  body.arex-page-home .server-actions{
    grid-column:1 / -1;
    width:100%;
    grid-template-columns:repeat(4,max-content);
    justify-content:end;
    padding-top:2px;
  }

  body.arex-page-server-seo .info-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  body.arex-page-cabinet .cabinet-summary-v179{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

@media(max-width:768px){
  body.arex-page-home .server{
    grid-template-columns:1fr 1fr !important;
    row-gap:8px !important;
    padding:11px !important;
  }

  body.arex-page-home .server-main,
  body.arex-page-home .server-actions{
    grid-column:1 / -1;
  }

  body.arex-page-home .server-actions{
    justify-content:start;
    grid-template-columns:repeat(4,max-content);
    overflow-x:auto;
    padding-bottom:2px;
  }

  body.arex-page-map .server-list .server{
    grid-template-columns:1fr auto !important;
  }

  body.arex-page-map .server-list .server > *:nth-child(2),
  body.arex-page-map .server-list .server > *:nth-child(3){
    grid-row:2;
  }

  body.arex-page-server-seo .arex-server-cover,
  body.arex-page-map .arex-map-page-hero{
    height:210px;
  }

  body.arex-page-server-seo .info-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  body.arex-page-live-server .arex-v22-stats{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  body.arex-page-cabinet .cabinet-summary-v179{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

/* ------------------------------
   Mobile
------------------------------ */
@media(max-width:430px){
  body.arex-page-home .server{
    grid-template-columns:1fr !important;
    min-height:0;
  }

  body.arex-page-home .server > *{
    grid-column:1 !important;
  }

  body.arex-page-home .server .map-cell{
    min-height:48px;
  }

  body.arex-page-home .server-actions{
    grid-template-columns:1fr 1fr;
    width:100%;
    overflow:visible;
  }

  body.arex-page-home .server-actions button,
  body.arex-page-home .server-actions a{
    width:100%;
    justify-content:center;
  }

  body.arex-page-map .server-list .server{
    grid-template-columns:1fr !important;
    gap:7px !important;
  }

  body.arex-page-map .server-list .server > *{
    grid-column:1 !important;
    grid-row:auto !important;
  }

  body.arex-page-map .server-list .server .button{
    width:100%;
  }

  body.arex-page-server-seo .arex-server-cover,
  body.arex-page-map .arex-map-page-hero{
    height:178px;
  }

  body.arex-page-server-seo .arex-server-cover .arex-design-hero-copy strong{
    font-size:23px;
  }

  body.arex-page-server-seo .info-grid,
  body.arex-page-live-server .arex-v22-stats,
  body.arex-page-cabinet .cabinet-summary-v179{
    grid-template-columns:1fr !important;
  }

  body.arex-page-server-seo .links{
    display:grid;
    grid-template-columns:1fr;
  }

  body.arex-page-server-seo .links a{
    width:100%;
  }
}



/* AREX_SERVER_CARD_V300
   AREX_SERVER_CARD_V300_R2
   Reference-driven live server card.
   Scope: .arex-page-live-server only.
*/
body.arex-page-live-server{
  --v3-orange:#ff7600;
  --v3-orange2:#ff9b2f;
  --v3-line:rgba(255,114,0,.62);
  --v3-panel:rgba(7,8,10,.94);
  --v3-panel2:rgba(12,13,16,.95);
  --v3-muted:#929ba8;
  --v3-green:#39e58c;
  background:
    linear-gradient(180deg,rgba(4,4,5,.10),rgba(4,4,5,.30)),
    url('/assets/arex-monitor-v21/server-card-v3/background.png?v=300') center top/cover fixed no-repeat !important;
  min-height:100vh;
}
body.arex-page-live-server::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background:
    radial-gradient(circle at 50% 0,rgba(255,111,0,.12),transparent 33%),
    linear-gradient(180deg,rgba(3,4,5,.22),rgba(3,4,5,.55));
}
body.arex-page-live-server .header{
  background:linear-gradient(180deg,rgba(5,6,8,.97),rgba(9,10,12,.92)) !important;
  border-bottom:1px solid rgba(255,115,0,.32) !important;
  box-shadow:0 10px 35px rgba(0,0,0,.55),0 1px 0 rgba(255,125,0,.14) inset;
}
body.arex-page-live-server .header-inner{
  max-width:1480px !important;
  min-height:78px;
  height:auto !important;
}
body.arex-page-live-server .brand img{
  width:210px !important;
  height:62px !important;
  object-fit:contain !important;
  filter:drop-shadow(0 0 13px rgba(255,103,0,.28));
}
body.arex-page-live-server .nav a{
  text-transform:uppercase;
  letter-spacing:.45px;
  font-size:11px !important;
}
body.arex-page-live-server .wrap{
  max-width:1480px !important;
  padding:18px 18px 54px !important;
}
body.arex-card-v3-ready .arex-v22-server-hero,
body.arex-card-v3-ready .back,
body.arex-card-v3-ready #content,
body.arex-card-v3-ready .arex-v22-history-tools{
  display:none !important;
}

.arex-v3-shell{
  position:relative;
  isolation:isolate;
  display:grid;
  gap:12px;
  color:#f7f7f8;
  font-family:Inter,"Segoe UI",Arial,sans-serif;
}
.arex-v3-shell *{box-sizing:border-box}
.arex-v3-ornate{
  position:relative;
  border:1px solid rgba(255,110,0,.58);
  background:
    linear-gradient(145deg,rgba(18,18,20,.96),rgba(5,6,8,.97)),
    url('/assets/arex-monitor-v21/server-card-v3/frames.png?v=300') center/cover no-repeat;
  box-shadow:
    0 0 0 1px rgba(255,147,50,.08) inset,
    0 0 22px rgba(255,86,0,.17),
    0 18px 44px rgba(0,0,0,.36);
  clip-path:polygon(16px 0,calc(100% - 16px) 0,100% 16px,100% calc(100% - 16px),calc(100% - 16px) 100%,16px 100%,0 calc(100% - 16px),0 16px);
}
.arex-v3-ornate::before,
.arex-v3-ornate::after{
  content:"";
  position:absolute;
  pointer-events:none;
  z-index:3;
}
.arex-v3-ornate::before{
  inset:5px;
  border:1px solid rgba(255,133,26,.15);
  clip-path:inherit;
}
.arex-v3-ornate::after{
  left:24px;
  right:24px;
  top:-1px;
  height:2px;
  background:linear-gradient(90deg,transparent,var(--v3-orange),transparent);
  box-shadow:0 0 14px var(--v3-orange);
  opacity:.85;
}

.arex-v3-main{
  display:grid;
  grid-template-columns:minmax(390px,.9fr) minmax(0,1.7fr);
  min-height:300px;
}
.arex-v3-map{
  position:relative;
  overflow:hidden;
  min-height:300px;
  background:#090a0c;
}
.arex-v3-map-frame{
  position:absolute;
  inset:0;
  background:url('/assets/arex-monitor-v21/server-card-v3/map-frame.png?v=300') center/100% 100% no-repeat;
  z-index:1;
  pointer-events:none;
}
.arex-v3-map-image{
  position:absolute;
  z-index:2;
  left:8.3%;
  right:8.3%;
  top:18%;
  height:56%;
  width:83.4%;
  object-fit:cover;
  object-position:center;
  border-radius:2px;
  filter:saturate(1.03) contrast(1.05) brightness(.92);
}
.arex-v3-map.no-map .arex-v3-map-image{display:none}
.arex-v3-map-overlay{
  position:absolute;
  z-index:4;
  left:10.6%;
  bottom:9%;
  min-width:52%;
  max-width:74%;
  padding:9px 18px 12px 68px;
  background:
    linear-gradient(90deg,rgba(6,7,9,.98) 0%,rgba(7,8,10,.96) 77%,rgba(7,8,10,.45) 100%);
  clip-path:polygon(14px 0,100% 0,calc(100% - 18px) 100%,0 100%,0 14px);
  border-left:2px solid var(--v3-orange);
  box-shadow:0 0 18px rgba(255,104,0,.28);
}
.arex-v3-map-overlay::before{
  content:"";
  position:absolute;
  left:15px;
  top:50%;
  width:40px;
  height:40px;
  transform:translateY(-50%);
  background:url('/assets/arex-monitor-v21/server-card-v3/icons/map.png?v=300') center/contain no-repeat;
  filter:drop-shadow(0 0 10px rgba(255,105,0,.55));
}
.arex-v3-map-kicker{
  color:var(--v3-orange2);
  font-size:10px;
  font-weight:900;
  letter-spacing:.9px;
  text-transform:uppercase;
}
.arex-v3-map-name{
  margin-top:2px;
  font-size:clamp(18px,2vw,28px);
  font-weight:950;
  line-height:1.05;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.arex-v3-server{
  position:relative;
  z-index:2;
  padding:23px 26px 20px;
  background:
    radial-gradient(circle at 80% 20%,rgba(255,94,0,.08),transparent 31%),
    linear-gradient(145deg,rgba(12,13,15,.98),rgba(5,6,8,.98));
  border-left:1px solid rgba(255,111,0,.23);
}
.arex-v3-statusline{
  display:flex;
  align-items:center;
  gap:12px;
  color:#939ca8;
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.45px;
}
.arex-v3-status{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:6px 11px;
  border:1px solid rgba(53,223,135,.42);
  border-radius:5px;
  color:#63e9a1;
  background:rgba(21,83,51,.25);
  box-shadow:0 0 16px rgba(56,226,137,.10);
}
.arex-v3-status::before{
  content:"";
  width:7px;height:7px;border-radius:50%;
  background:currentColor;
  box-shadow:0 0 8px currentColor;
}
.arex-v3-status.is-offline{
  color:#ff858a;
  border-color:rgba(255,97,103,.42);
  background:rgba(93,24,28,.26);
}
.arex-v3-title{
  margin:12px 0 6px;
  font-family:"Arial Narrow","Roboto Condensed",Impact,sans-serif;
  font-size:clamp(29px,3vw,48px);
  line-height:1;
  font-weight:900;
  letter-spacing:.35px;
  text-transform:uppercase;
  text-shadow:0 2px 0 #000,0 0 18px rgba(255,255,255,.08);
}
.arex-v3-title .slash{color:var(--v3-orange);padding:0 8px;text-shadow:0 0 12px rgba(255,104,0,.55)}
.arex-v3-desc{
  max-width:760px;
  color:#a8b0bc;
  font-size:13px;
  line-height:1.45;
}
.arex-v3-ip-label{
  margin-top:17px;
  color:#8e98a6;
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.65px;
}
.arex-v3-actionrow{
  display:grid;
  grid-template-columns:minmax(280px,1.35fr) auto auto auto;
  gap:10px;
  align-items:stretch;
  margin-top:7px;
}
.arex-v3-ipbox{
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:0 8px 0 14px;
  min-height:56px;
  border:1px solid rgba(125,132,143,.38);
  border-radius:7px;
  background:rgba(7,8,10,.86);
  box-shadow:0 0 0 1px rgba(255,110,0,.04) inset;
}
.arex-v3-iptext{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:15px;
  font-weight:900;
}
.arex-v3-copy,
.arex-v3-play,
.arex-v3-iconbtn,
.arex-v3-secondary,
.arex-v3-shell .favorite-page{
  appearance:none;
  border:1px solid rgba(255,112,0,.62) !important;
  border-radius:8px !important;
  color:#f4f4f4 !important;
  background:linear-gradient(180deg,rgba(36,29,24,.96),rgba(14,14,16,.96)) !important;
  font-family:inherit;
  font-size:11px !important;
  font-weight:950 !important;
  text-transform:uppercase;
  letter-spacing:.3px;
  cursor:pointer;
  transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease;
}
.arex-v3-copy{padding:10px 13px;white-space:nowrap}
.arex-v3-play{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:168px;
  padding:0 22px;
  color:#14100b !important;
  background:linear-gradient(180deg,#ffb33e,#ff7900) !important;
  border-color:#ffd16d !important;
  box-shadow:0 0 18px rgba(255,105,0,.45),0 0 0 1px rgba(255,255,255,.13) inset;
  font-size:18px !important;
}
.arex-v3-iconbtn,
.arex-v3-shell .favorite-page{
  min-width:60px;
  padding:0 13px !important;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:56px;
}
.arex-v3-copy:hover,
.arex-v3-play:hover,
.arex-v3-iconbtn:hover,
.arex-v3-secondary:hover,
.arex-v3-shell .favorite-page:hover{
  transform:translateY(-1px);
  border-color:#ffad4b !important;
  box-shadow:0 0 18px rgba(255,104,0,.25);
}
.arex-v3-shell .favorite-page.active{
  color:#ffc34b !important;
  background:rgba(82,53,15,.88) !important;
}
.arex-v3-rating{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:116px;
}
.arex-v3-rating .server-rating-v180{
  min-height:56px;
  padding:7px 10px;
  border:1px solid rgba(255,112,0,.62);
  border-radius:8px;
  background:rgba(10,10,12,.88);
}
.arex-v3-rating .server-rating-star-v180{font-size:18px}
.arex-v3-badges{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:12px;
}
.arex-v3-badges .badge{
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 3px 12px rgba(0,0,0,.18);
}
.arex-v3-secondaryrow{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:12px;
}
.arex-v3-secondary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:8px 12px;
  color:#c5ccd5 !important;
  border-color:rgba(102,110,122,.32) !important;
  text-transform:none;
}
.arex-v3-secondary.is-accent{border-color:rgba(255,112,0,.55) !important;color:#ff9a35 !important}

.arex-v3-population{
  display:grid;
  grid-template-columns:190px 1fr 260px;
  align-items:center;
  gap:20px;
  padding:17px 22px;
  min-height:126px;
}
.arex-v3-pop-label{
  color:#a0a9b6;
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.5px;
}
.arex-v3-pop-number{
  margin-top:6px;
  font-size:34px;
  font-weight:950;
}
.arex-v3-pop-number b{color:var(--v3-orange2)}
.arex-v3-segments{
  display:grid;
  grid-template-columns:repeat(20,1fr);
  gap:3px;
}
.arex-v3-segment{
  height:20px;
  border:1px solid rgba(255,255,255,.05);
  border-radius:2px;
  background:#25292f;
}
.arex-v3-segment.is-on{
  background:linear-gradient(180deg,#ffa134,#ff6400);
  border-color:#ff8a16;
  box-shadow:0 0 8px rgba(255,101,0,.38);
}
.arex-v3-pop-legend{
  margin-top:11px;
  display:flex;
  gap:18px;
  color:#909aa8;
  font-size:11px;
}
.arex-v3-activity{
  display:grid;
  grid-template-columns:88px 1fr;
  gap:16px;
  align-items:center;
  padding-left:18px;
  border-left:1px solid rgba(255,255,255,.07);
}
.arex-v3-donut{
  --pct:0%;
  width:82px;height:82px;border-radius:50%;
  display:grid;place-items:center;
  background:conic-gradient(var(--v3-orange) var(--pct),rgba(61,65,72,.55) 0);
  box-shadow:0 0 20px rgba(255,102,0,.23);
  position:relative;
}
.arex-v3-donut::after{
  content:"";
  position:absolute;
  inset:9px;
  border-radius:50%;
  background:#0a0c0f;
  border:1px solid rgba(255,255,255,.06);
}
.arex-v3-donut strong,
.arex-v3-donut small{position:relative;z-index:2}
.arex-v3-donut strong{font-size:19px}
.arex-v3-donut small{display:block;margin-top:-16px;color:#8e98a6;font-size:8px;text-transform:uppercase}
.arex-v3-minichart-title{
  color:#99a2ae;
  font-size:9px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.45px;
}
.arex-v3-minibars{
  height:46px;
  margin-top:7px;
  display:flex;
  align-items:flex-end;
  gap:3px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.arex-v3-minibar{
  flex:1 1 0;
  min-width:2px;
  background:linear-gradient(180deg,#ff9b2f,#d74c00);
  box-shadow:0 0 5px rgba(255,104,0,.23);
}
.arex-v3-activityfoot{
  margin-top:6px;
  display:flex;
  justify-content:space-between;
  color:#8e98a6;
  font-size:9px;
}
.arex-v3-activityfoot b{color:#ff9430}

.arex-v3-facts{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:8px;
}
.arex-v3-fact{
  min-height:96px;
  display:grid;
  grid-template-columns:42px 1fr;
  gap:10px;
  align-items:center;
  padding:12px;
  position:relative;
  border:1px solid rgba(255,112,0,.45);
  background:linear-gradient(145deg,rgba(16,16,18,.96),rgba(7,8,10,.97));
  clip-path:polygon(9px 0,calc(100% - 9px) 0,100% 9px,100% calc(100% - 9px),calc(100% - 9px) 100%,9px 100%,0 calc(100% - 9px),0 9px);
  box-shadow:0 0 13px rgba(255,91,0,.10);
}
.arex-v3-fact img{
  width:38px;height:38px;object-fit:contain;
  filter:drop-shadow(0 0 9px rgba(255,100,0,.45));
}
.arex-v3-fact-label{
  color:#8993a0;
  font-size:9px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.45px;
}
.arex-v3-fact-value{
  margin-top:5px;
  font-size:13px;
  font-weight:950;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.arex-v3-fact-sub{
  margin-top:3px;
  color:#777f8a;
  font-size:8px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.arex-v3-lower{
  display:grid;
  grid-template-columns:minmax(0,1fr) 340px;
  gap:12px;
  align-items:stretch;
}
.arex-v3-history-shell{
  position:relative;
  padding:54px 36px 34px;
  min-height:510px;
  background:
    url('/assets/arex-monitor-v21/server-card-v3/graph-frame.png?v=300') center/100% 100% no-repeat;
}
.arex-v3-history-title{
  position:absolute;
  left:64px;
  top:38px;
  z-index:2;
  display:flex;
  align-items:center;
  gap:10px;
  color:#fff;
  font-family:"Arial Narrow","Roboto Condensed",Impact,sans-serif;
  font-size:20px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.7px;
}
.arex-v3-history-title img{width:32px;height:32px;object-fit:contain}
.arex-v3-history-shell .history-panel{
  margin:0 !important;
  height:100%;
  min-height:420px;
  border:1px solid rgba(255,102,0,.20) !important;
  border-radius:9px !important;
  background:rgba(5,7,9,.94) !important;
  box-shadow:0 0 22px rgba(0,0,0,.40) inset;
  overflow:hidden;
}
.arex-v3-history-shell .history-head{
  padding:18px 18px 13px !important;
  border-bottom:1px solid rgba(255,104,0,.16) !important;
}
.arex-v3-history-shell .history-title{font-size:15px !important}
.arex-v3-history-shell .period{
  border-color:rgba(255,112,0,.35) !important;
  background:#111318 !important;
}
.arex-v3-history-shell .period.active{
  color:#fff !important;
  background:linear-gradient(180deg,#ff8612,#e65300) !important;
  box-shadow:0 0 13px rgba(255,99,0,.35);
}
.arex-v3-history-shell .history-stat{
  background:rgba(17,19,23,.92) !important;
  border-color:rgba(255,255,255,.08) !important;
}
.arex-v3-history-shell .chart{
  height:260px !important;
  background:
    linear-gradient(rgba(255,105,0,.03),rgba(6,8,10,.85)),
    repeating-linear-gradient(0deg,transparent 0 46px,rgba(255,119,0,.045) 47px),
    #090b0e !important;
  border-color:rgba(255,113,0,.20) !important;
}
.arex-v3-history-shell .chart path[stroke="#ff7900"]{
  stroke:#ff6d00 !important;
  filter:drop-shadow(0 0 4px rgba(255,104,0,.65));
}

.arex-v3-promo-shell{
  position:relative;
  min-height:510px;
  padding:132px 24px 28px;
  background:
    url('/assets/arex-monitor-v21/server-card-v3/promotion-frame.png?v=300') center/100% 100% no-repeat;
}
.arex-v3-promo-title{
  position:absolute;
  z-index:2;
  left:30px;right:30px;top:43px;
  text-align:center;
  font-family:"Arial Narrow","Roboto Condensed",Impact,sans-serif;
  font-size:22px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.65px;
  text-shadow:0 0 13px rgba(255,105,0,.42);
}
.arex-v3-promo-sub{
  position:absolute;
  left:40px;right:40px;top:82px;
  color:#a1a9b4;
  font-size:10px;
  line-height:1.35;
  text-align:center;
}
.arex-v3-promo-content{
  position:relative;
  z-index:2;
  min-height:342px;
  padding:8px;
  border:1px solid rgba(255,111,0,.24);
  border-radius:10px;
  background:rgba(5,6,8,.91);
}
.arex-v3-promo-content .panel{
  border:0 !important;
  background:transparent !important;
  overflow:visible !important;
}
.arex-v3-promo-content .panel-head{display:none !important}
.arex-v3-promo-content .panel-body{padding:0 !important}
.arex-v3-promo-content .promo-grid{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:7px !important;
}
.arex-v3-promo-content .promo{
  position:relative;
  min-height:58px;
  padding:10px 38px 10px 58px !important;
  display:flex;
  flex-direction:column;
  justify-content:center;
  border:1px solid rgba(255,112,0,.46) !important;
  border-radius:7px !important;
  background:linear-gradient(90deg,rgba(50,25,8,.76),rgba(13,14,16,.96)) !important;
  box-shadow:0 0 12px rgba(255,94,0,.09);
}
.arex-v3-promo-content .promo::before{
  content:"";
  position:absolute;
  left:12px;top:50%;
  width:34px;height:34px;
  transform:translateY(-50%);
  background:center/contain no-repeat;
  filter:drop-shadow(0 0 9px rgba(255,103,0,.48));
}
.arex-v3-promo-content .promo[data-service="VIP"]::before{background-image:url('/assets/arex-monitor-v21/server-card-v3/icons/crown.png?v=300')}
.arex-v3-promo-content .promo[data-service="TOP"]::before{background-image:url('/assets/arex-monitor-v21/server-card-v3/icons/growth.png?v=300')}
.arex-v3-promo-content .promo[data-service="BOOST"]::before{background-image:url('/assets/arex-monitor-v21/server-card-v3/icons/bars.png?v=300')}
.arex-v3-promo-content .promo[data-service="GAMEMENU"]::before{background-image:url('/assets/arex-monitor-v21/server-card-v3/icons/star.png?v=300')}
.arex-v3-promo-content .promo::after{
  content:"›";
  position:absolute;
  right:13px;
  top:50%;
  transform:translateY(-54%);
  color:#ff930f;
  font-size:27px;
  font-weight:900;
}
.arex-v3-promo-content .promo-name{
  color:#f5f5f6;
  font-size:12px !important;
  font-weight:950 !important;
}
.arex-v3-promo-content .promo-state{
  margin-top:3px !important;
  font-size:9px !important;
}
.arex-v3-promo-content .promo.active{
  border-color:#ff9a23 !important;
  box-shadow:0 0 17px rgba(255,107,0,.20);
}
.arex-v3-promo-content a.btn.primary{
  margin-top:9px !important;
  padding:11px 12px !important;
  border-radius:7px !important;
  background:linear-gradient(180deg,#ff9426,#e95b00) !important;
  border-color:#ffad45 !important;
  box-shadow:0 0 15px rgba(255,99,0,.23);
}

body.arex-card-v3-ready .footer{
  margin-top:18px !important;
  padding:14px 0;
  color:#777f8a !important;
  text-align:center;
}

@media(max-width:1180px){
  .arex-v3-main{grid-template-columns:minmax(330px,.9fr) minmax(0,1.3fr)}
  .arex-v3-actionrow{grid-template-columns:1fr auto auto}
  .arex-v3-rating{grid-column:1/-1}
  .arex-v3-population{grid-template-columns:155px 1fr 220px}
  .arex-v3-facts{grid-template-columns:repeat(4,1fr)}
  .arex-v3-lower{grid-template-columns:minmax(0,1fr) 310px}
}
@media(max-width:900px){
  body.arex-page-live-server .wrap{padding:12px 10px 40px !important}
  .arex-v3-main{grid-template-columns:1fr}
  .arex-v3-map{min-height:420px}
  .arex-v3-server{border-left:0;border-top:1px solid rgba(255,112,0,.22)}
  .arex-v3-population{grid-template-columns:1fr 1.8fr}
  .arex-v3-activity{grid-column:1/-1;border-left:0;border-top:1px solid rgba(255,255,255,.07);padding:14px 0 0}
  .arex-v3-facts{grid-template-columns:repeat(2,1fr)}
  .arex-v3-lower{grid-template-columns:1fr}
  .arex-v3-promo-shell{min-height:500px}
}
@media(max-width:600px){
  body.arex-page-live-server .header-inner{padding:8px 10px !important}
  body.arex-page-live-server .brand img{width:165px !important;height:48px !important}
  body.arex-page-live-server .nav{gap:4px !important;padding-bottom:2px}
  body.arex-page-live-server .nav a{padding:8px 9px !important;font-size:10px !important}
  .arex-v3-shell{gap:8px}
  .arex-v3-map{min-height:320px}
  .arex-v3-map-image{top:18.2%;height:54%}
  .arex-v3-map-overlay{left:10%;right:10%;max-width:none;padding:8px 12px 10px 53px}
  .arex-v3-map-overlay::before{left:11px;width:32px;height:32px}
  .arex-v3-server{padding:18px 14px 16px}
  .arex-v3-title{font-size:30px}
  .arex-v3-desc{font-size:12px}
  .arex-v3-actionrow{grid-template-columns:1fr 1fr;gap:7px}
  .arex-v3-ipbox{grid-column:1/-1}
  .arex-v3-play{min-width:0;min-height:54px}
  .arex-v3-shell .favorite-page{min-height:54px}
  .arex-v3-rating{grid-column:1/-1}
  .arex-v3-rating .server-rating-v180{width:100%;justify-content:center}
  .arex-v3-secondaryrow{display:grid;grid-template-columns:1fr 1fr}
  .arex-v3-secondary{min-width:0;text-align:center}
  .arex-v3-population{grid-template-columns:1fr;padding:15px}
  .arex-v3-segments{grid-template-columns:repeat(10,1fr)}
  .arex-v3-activity{grid-column:auto;grid-template-columns:72px 1fr}
  .arex-v3-donut{width:68px;height:68px}
  .arex-v3-facts{grid-template-columns:1fr}
  .arex-v3-fact{min-height:78px}
  .arex-v3-history-shell{padding:48px 12px 18px;min-height:470px}
  .arex-v3-history-title{left:24px;top:22px;font-size:17px}
  .arex-v3-history-shell .history-panel{min-height:400px}
  .arex-v3-history-shell .history-head{align-items:flex-start;flex-direction:column}
  .arex-v3-history-shell .history-summary{grid-template-columns:1fr 1fr !important}
  .arex-v3-history-shell .chart{height:220px !important}
  .arex-v3-promo-shell{padding:122px 14px 22px;min-height:500px}
}
@media(max-width:430px){
  .arex-v3-map{min-height:285px}
  .arex-v3-title{font-size:26px}
  .arex-v3-actionrow{grid-template-columns:1fr}
  .arex-v3-play,
  .arex-v3-shell .favorite-page{width:100%}
  .arex-v3-secondaryrow{grid-template-columns:1fr}
  .arex-v3-pop-legend{flex-direction:column;gap:4px}
  .arex-v3-history-shell .history-summary{grid-template-columns:1fr !important}
}


/* AREX_SERVER_CARD_V300_R2 — SEO server route support + raw-source-safe runtime scope */
body.arex-page-server-seo{
  --v3-orange:#ff7600;
  --v3-orange2:#ff9b2f;
  --v3-line:rgba(255,114,0,.62);
  --v3-panel:rgba(7,8,10,.94);
  --v3-panel2:rgba(12,13,16,.95);
  --v3-muted:#929ba8;
  --v3-green:#39e58c;
  background:
    linear-gradient(180deg,rgba(4,4,5,.12),rgba(4,4,5,.34)),
    url('/assets/arex-monitor-v21/server-card-v3/background.png?v=300') center top/cover fixed no-repeat !important;
  min-height:100vh;
}
body.arex-page-server-seo::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(3,4,5,.18),rgba(3,4,5,.56));
}
body.arex-page-server-seo header{
  background:linear-gradient(180deg,rgba(5,6,8,.97),rgba(9,10,12,.92)) !important;
  border-bottom:1px solid rgba(255,115,0,.32) !important;
  box-shadow:0 10px 35px rgba(0,0,0,.55),0 1px 0 rgba(255,125,0,.14) inset;
}
body.arex-page-server-seo header .nav{
  max-width:1480px !important;
  min-height:78px;
}
body.arex-page-server-seo header .logo img{
  width:210px !important;
  height:62px !important;
  object-fit:contain !important;
  filter:drop-shadow(0 0 13px rgba(255,103,0,.28));
}
body.arex-page-server-seo main{
  max-width:1480px !important;
  padding:18px 18px 54px !important;
}
body.arex-page-server-seo.arex-v3-seo-ready main > :not(.arex-v3-shell){display:none !important}
body.arex-page-server-seo.arex-v3-seo-ready footer{
  max-width:1480px !important;
  color:#727b87 !important;
  text-align:center;
}
.arex-v3-rating-link{
  min-height:56px;
  padding:0 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,112,0,.62);
  border-radius:8px;
  background:rgba(10,10,12,.88);
  color:#ffc34b !important;
  font-weight:950;
  white-space:nowrap;
}
.arex-v3-seo-history-panel{
  min-height:420px;
  padding:20px 18px 15px;
  border:1px solid rgba(255,102,0,.20);
  border-radius:9px;
  background:rgba(5,7,9,.94);
  overflow:hidden;
}
.arex-v3-seo-history-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:12px;
}
.arex-v3-seo-history-head > div{display:flex;flex-direction:column;gap:4px}
.arex-v3-seo-history-head b{font-size:15px;text-transform:uppercase}
.arex-v3-seo-history-head span{color:#858f9d;font-size:10px}
.arex-v3-seo-history-summary{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
  margin-bottom:12px;
}
.arex-v3-seo-history-summary span{
  padding:10px 11px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:7px;
  background:rgba(18,20,24,.88);
  color:#8d96a2;
  font-size:9px;
  text-transform:uppercase;
}
.arex-v3-seo-history-summary b{display:block;margin-top:4px;color:#fff;font-size:16px}
.arex-v3-seo-chart{
  width:100%;
  height:275px;
  display:block;
  border:1px solid rgba(255,113,0,.20);
  border-radius:8px;
  background:
    linear-gradient(rgba(255,105,0,.03),rgba(6,8,10,.86)),
    repeating-linear-gradient(0deg,transparent 0 46px,rgba(255,119,0,.045) 47px),
    #090b0e;
}
.arex-v3-seo-chart path[stroke="#ff6f00"]{filter:drop-shadow(0 0 5px rgba(255,104,0,.75))}
.arex-v3-seo-empty{padding:80px 20px;text-align:center;color:#89929f}
@media(max-width:900px){
  body.arex-page-server-seo main{padding:12px 10px 40px !important}
  .arex-v3-seo-history-summary{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  body.arex-page-server-seo header .nav{padding:10px !important;gap:4px !important}
  body.arex-page-server-seo header .logo img{width:165px !important;height:48px !important}
  .arex-v3-seo-history-head{align-items:flex-start;flex-direction:column}
  .arex-v3-seo-chart{height:220px}
}
@media(max-width:430px){
  .arex-v3-seo-history-summary{grid-template-columns:1fr}
}

/* AREX_SERVER_CARD_V310
   Interaction + reference-match refinement.
   Keeps real monitoring data; changes presentation only.
*/
body.arex-page-live-server .header-inner,
body.arex-page-server-seo header .nav{
  max-width:1320px !important;
}
body.arex-page-live-server .wrap,
body.arex-page-server-seo main{
  max-width:1320px !important;
  padding-left:14px !important;
  padding-right:14px !important;
}
.arex-v3-shell{gap:10px}
.arex-v3-main{
  grid-template-columns:430px minmax(0,1fr);
  min-height:270px;
}
.arex-v3-map{min-height:270px}
.arex-v3-map-image{
  left:8.8%;
  width:82.4%;
  top:17%;
  height:58%;
}
.arex-v3-map-overlay{
  left:10.4%;
  bottom:8.5%;
  max-width:76%;
}
.arex-v3-server{padding:20px 22px 17px}
.arex-v3-title{
  margin-top:11px;
  font-size:clamp(29px,2.7vw,40px);
}
.arex-v3-desc{font-size:12px}
.arex-v3-ip-label{margin-top:15px}
.arex-v3-actionrow{
  grid-template-columns:minmax(290px,1.25fr) 160px 58px 112px;
  gap:9px;
}
.arex-v3-play{min-width:160px}
.arex-v3-rating-link{min-width:112px}
.arex-v3-seo-shell .arex-v3-secondaryrow{display:none !important}

.arex-v3-population{
  grid-template-columns:180px minmax(0,1fr) 260px;
  gap:18px;
  padding:14px 20px;
  min-height:112px;
}
.arex-v3-pop-number{font-size:32px}
.arex-v3-segment{height:19px}
.arex-v3-donut{width:76px;height:76px}
.arex-v3-donut::after{inset:8px}
.arex-v3-minibars{height:42px}

.arex-v3-facts{
  gap:5px;
}
.arex-v3-fact{
  min-height:88px;
  grid-template-columns:37px 1fr;
  gap:9px;
  padding:10px;
}
.arex-v3-fact img{width:34px;height:34px}
.arex-v3-fact-value{font-size:12px}
.arex-v3-fact-sub a{
  color:#ff9228;
  text-decoration:underline;
  text-underline-offset:2px;
}
.arex-v3-fact-sub a:hover{color:#ffb45f}
.arex-v3-map.is-clickable{cursor:pointer}
.arex-v3-map.is-clickable:hover .arex-v3-map-image{
  filter:saturate(1.08) contrast(1.07) brightness(.98);
}

.arex-v3-lower{
  grid-template-columns:minmax(0,1fr) 300px;
  gap:10px;
}
.arex-v3-history-shell{
  min-height:438px;
  padding:51px 29px 27px;
}
.arex-v3-promo-shell{
  min-height:438px;
  padding:112px 18px 22px;
}
.arex-v3-promo-title{
  top:35px;
  left:20px;
  right:20px;
  font-size:20px;
}
.arex-v3-promo-sub{
  top:71px;
  left:27px;
  right:27px;
}
.arex-v3-promo-content{
  min-height:300px;
  padding:7px;
}
.arex-v3-promo-content .promo{
  min-height:55px;
  padding:9px 34px 9px 54px !important;
  cursor:pointer;
  user-select:none;
  transition:transform .14s ease,border-color .14s ease,box-shadow .14s ease,background .14s ease;
}
.arex-v3-promo-content .promo:hover,
.arex-v3-promo-content .promo:focus-visible{
  transform:translateX(2px);
  border-color:#ff9b22 !important;
  box-shadow:0 0 18px rgba(255,103,0,.21);
  outline:none;
}
.arex-v3-promo-content .promo::before{
  left:11px;
  width:31px;
  height:31px;
}
.arex-v3-promo-content .promo-name{font-size:11px !important}
.arex-v31-promo-desc{
  margin-top:2px;
  padding-right:5px;
  color:#939ca8;
  font-size:8px;
  line-height:1.25;
}
.arex-v3-promo-content .promo-state{
  position:absolute;
  right:31px;
  top:8px;
  margin:0 !important;
  color:#7e8792 !important;
  font-size:7px !important;
}
.arex-v3-promo-content .promo.active .promo-state{color:#65e7a1 !important}
.arex-v3-promo-content a.btn.primary{
  min-height:39px;
  display:flex !important;
  align-items:center;
  justify-content:center;
  text-transform:uppercase;
  font-size:10px !important;
  font-weight:950 !important;
}

/* SEO history: closer to supplied reference — graph first, compact real metrics below. */
.arex-v3-seo-history-panel{
  min-height:350px;
  padding:13px 14px 12px;
}
.arex-v31-history-head{
  min-height:47px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:9px;
}
.arex-v31-history-copy b{
  display:block;
  color:#fff;
  font-family:"Arial Narrow","Roboto Condensed",Impact,sans-serif;
  font-size:16px;
  text-transform:uppercase;
  letter-spacing:.55px;
}
.arex-v31-history-copy span{
  display:block;
  margin-top:3px;
  color:#8e98a5;
  font-size:9px;
}
.arex-v31-periods{
  display:flex;
  gap:6px;
}
.arex-v31-period{
  min-width:58px;
  min-height:34px;
  padding:0 10px;
  border:1px solid rgba(112,121,132,.42);
  border-radius:7px;
  background:#111318;
  color:#b5bdc7;
  font-size:10px;
  font-weight:900;
  cursor:pointer;
}
.arex-v31-period:hover{border-color:rgba(255,116,0,.64);color:#fff}
.arex-v31-period.is-active{
  border-color:#ff8d1f;
  background:linear-gradient(180deg,#ff8b1d,#db5000);
  color:#fff;
  box-shadow:0 0 13px rgba(255,98,0,.35);
}
.arex-v31-chart{
  width:100%;
  height:246px;
  display:block;
  border:1px solid rgba(255,113,0,.20);
  border-radius:8px;
  background:
    linear-gradient(rgba(255,105,0,.025),rgba(6,8,10,.88)),
    repeating-linear-gradient(0deg,transparent 0 43px,rgba(255,119,0,.05) 44px),
    repeating-linear-gradient(90deg,transparent 0 64px,rgba(255,119,0,.028) 65px),
    #090b0e;
}
.arex-v31-chart .v31-line{filter:drop-shadow(0 0 5px rgba(255,104,0,.78))}
.arex-v31-history-meta{
  display:flex;
  align-items:center;
  gap:17px;
  flex-wrap:wrap;
  margin-top:8px;
  color:#8c96a3;
  font-size:9px;
}
.arex-v31-history-meta b{color:#ff9632}
.arex-v31-history-loading{
  min-height:290px;
  display:grid;
  place-items:center;
  color:#89929f;
  font-size:11px;
}

/* Use target-style owner/site inline links without inventing metadata. */
.arex-v31-fact-link{
  color:#ff962e !important;
  text-decoration:underline;
  text-underline-offset:2px;
}

/* Touch/click affordance. */
.arex-v3-copy:active,
.arex-v3-play:active,
.arex-v3-iconbtn:active,
.arex-v3-promo-content .promo:active{
  transform:translateY(1px);
}

@media(max-width:1180px){
  .arex-v3-main{grid-template-columns:390px minmax(0,1fr)}
  .arex-v3-actionrow{grid-template-columns:minmax(260px,1fr) 150px 56px 108px}
  .arex-v3-lower{grid-template-columns:minmax(0,1fr) 285px}
}
@media(max-width:960px){
  .arex-v3-main{grid-template-columns:1fr}
  .arex-v3-map{min-height:390px}
  .arex-v3-seo-shell .arex-v3-secondaryrow{display:flex !important}
  .arex-v3-lower{grid-template-columns:1fr}
  .arex-v3-promo-shell{min-height:430px}
}
@media(max-width:650px){
  .arex-v3-map{min-height:315px}
  .arex-v3-actionrow{grid-template-columns:1fr 1fr}
  .arex-v3-ipbox{grid-column:1/-1}
  .arex-v3-rating-link{min-height:54px}
  .arex-v31-history-head{align-items:flex-start;flex-direction:column}
  .arex-v31-periods{width:100%}
  .arex-v31-period{flex:1 1 0}
  .arex-v31-chart{height:220px}
}
@media(max-width:430px){
  .arex-v3-map{min-height:275px}
  .arex-v3-actionrow{grid-template-columns:1fr}
  .arex-v3-play,.arex-v3-iconbtn,.arex-v3-rating-link{width:100%}
  .arex-v31-history-meta{display:grid;grid-template-columns:1fr 1fr;gap:6px 10px}
}


/* AREX_SERVER_CARD_V320
   Final visual-alignment pass against supplied target:
   - restore canonical main-monitor header logo
   - remove baked-text frame duplication
   - simplify history to graph-first composition
   - use one slot block per real server slot on desktop
*/
body.arex-page-live-server header .brand img.arex-v32-main-logo,
body.arex-page-server-seo header .brand img.arex-v32-main-logo{
  width:220px !important;
  height:54px !important;
  max-width:220px !important;
  object-fit:contain !important;
  object-position:left center !important;
  filter:none !important;
}

/* The target has no extra product badge between subtitle and IP. */
.arex-v3-badges{display:none !important}

/* More compact target-like server header proportions. */
.arex-v3-server{
  padding-top:17px !important;
  padding-bottom:15px !important;
}
.arex-v3-title{
  margin-top:9px !important;
  line-height:1.02 !important;
}
.arex-v3-desc{margin-top:6px !important}
.arex-v3-ip-label{margin-top:13px !important}
.arex-v3-actionrow{margin-top:6px !important}

/* One visual block per real slot (JS sets --arex-v32-slots). */
.arex-v3-segments.arex-v32-slots{
  grid-template-columns:repeat(var(--arex-v32-slots),minmax(3px,1fr)) !important;
  gap:2px !important;
}
.arex-v3-segments.arex-v32-slots .arex-v3-segment{
  min-width:0;
  height:18px !important;
}

/* Remove pre-rendered text baked into graph-frame.png.
   We retain the fire/metal design language with the existing frame texture. */
.arex-v3-history-shell{
  min-height:390px !important;
  padding:54px 18px 18px !important;
  background:
    linear-gradient(145deg,rgba(11,12,14,.96),rgba(5,6,8,.98)),
    url('/assets/arex-monitor-v21/server-card-v3/frames.png?v=300') center/cover no-repeat !important;
  border-color:rgba(255,110,0,.58) !important;
}
.arex-v3-history-title{
  left:28px !important;
  top:17px !important;
  font-size:19px !important;
}
.arex-v3-history-title img{
  width:28px !important;
  height:28px !important;
}

/* Live /server history: the target is graph-first, not four KPI cards + map chips. */
body.arex-page-live-server .arex-v3-history-shell .history-panel{
  position:relative !important;
  min-height:315px !important;
  height:auto !important;
  overflow:visible !important;
  background:rgba(5,7,9,.91) !important;
}
body.arex-page-live-server .arex-v3-history-shell .history-head{
  position:absolute !important;
  z-index:7 !important;
  top:-45px !important;
  right:0 !important;
  left:auto !important;
  width:auto !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
}
body.arex-page-live-server .arex-v3-history-shell .history-head > div:first-child{
  display:none !important;
}
body.arex-page-live-server .arex-v3-history-shell .periods{
  display:flex !important;
  gap:7px !important;
}
body.arex-page-live-server .arex-v3-history-shell .period{
  min-width:64px !important;
  min-height:34px !important;
  padding:0 12px !important;
  border-radius:7px !important;
  font-size:10px !important;
  font-weight:900 !important;
}
body.arex-page-live-server .arex-v3-history-shell .history-summary,
body.arex-page-live-server .arex-v3-history-shell .map-history,
body.arex-page-live-server .arex-v3-history-shell .history-foot{
  display:none !important;
}
body.arex-page-live-server .arex-v3-history-shell #historyContent{
  padding-top:0 !important;
}
body.arex-page-live-server .arex-v3-history-shell .chart-wrap{
  margin:0 !important;
  padding:0 !important;
}
body.arex-page-live-server .arex-v3-history-shell .chart{
  height:300px !important;
  border-radius:7px !important;
}

/* SEO history old summary/head are base-hydration fallbacks.
   v3.1/v3.2 controls replace them after hydration. */
body.arex-page-server-seo .arex-v3-seo-history-summary{
  display:none !important;
}
body.arex-page-server-seo .arex-v3-seo-history-head{
  display:none !important;
}

/* Clean promotion panel: promotion-frame.png contained its own headline and
   service artwork, which produced duplicated text behind the real controls. */
.arex-v3-promo-shell{
  min-height:390px !important;
  padding:88px 14px 16px !important;
  background:
    linear-gradient(145deg,rgba(13,11,10,.96),rgba(5,6,8,.985)),
    url('/assets/arex-monitor-v21/server-card-v3/frames.png?v=300') center/cover no-repeat !important;
  border-color:rgba(255,110,0,.62) !important;
}
.arex-v3-promo-title{
  left:20px !important;
  right:20px !important;
  top:17px !important;
  min-height:28px;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:9px;
  text-align:left !important;
  font-size:18px !important;
  line-height:1 !important;
}
.arex-v3-promo-title::before{
  content:"";
  width:28px;
  height:28px;
  flex:0 0 28px;
  background:url('/assets/arex-monitor-v21/server-card-v3/icons/bars.png?v=300') center/contain no-repeat;
  filter:drop-shadow(0 0 8px rgba(255,104,0,.55));
}
.arex-v3-promo-sub{
  left:21px !important;
  right:21px !important;
  top:51px !important;
  text-align:left !important;
  font-size:9px !important;
  line-height:1.25 !important;
}
.arex-v3-promo-content{
  min-height:276px !important;
  padding:7px !important;
  border-color:rgba(255,111,0,.36) !important;
  background:rgba(6,7,9,.94) !important;
}
.arex-v3-promo-content .promo-grid{
  gap:6px !important;
}
.arex-v3-promo-content .promo{
  min-height:52px !important;
  background:
    linear-gradient(90deg,rgba(45,20,5,.76),rgba(11,12,14,.98)) !important;
}
.arex-v3-promo-content a.btn.primary{
  min-height:40px !important;
  margin-top:8px !important;
}

/* SEO graph clean composition. */
.arex-v32-seo-history{
  min-height:315px;
}
.arex-v32-history-head{
  min-height:43px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:8px;
}
.arex-v32-history-copy b{
  display:block;
  color:#fff;
  font-family:"Arial Narrow","Roboto Condensed",Impact,sans-serif;
  font-size:16px;
  text-transform:uppercase;
  letter-spacing:.55px;
}
.arex-v32-history-copy span{
  display:block;
  margin-top:3px;
  color:#8e98a5;
  font-size:9px;
}
.arex-v32-periods{
  display:flex;
  gap:6px;
}
.arex-v32-period{
  min-width:64px;
  min-height:34px;
  padding:0 10px;
  border:1px solid rgba(112,121,132,.42);
  border-radius:7px;
  background:#111318;
  color:#b5bdc7;
  font-size:10px;
  font-weight:900;
  cursor:pointer;
}
.arex-v32-period:hover{
  color:#fff;
  border-color:rgba(255,116,0,.64);
}
.arex-v32-period.is-active{
  color:#fff;
  border-color:#ff8d1f;
  background:linear-gradient(180deg,#ff8b1d,#db5000);
  box-shadow:0 0 13px rgba(255,98,0,.35);
}
.arex-v32-chart{
  width:100%;
  height:270px;
  display:block;
  border:1px solid rgba(255,113,0,.20);
  border-radius:7px;
  background:
    linear-gradient(rgba(255,105,0,.025),rgba(6,8,10,.90)),
    repeating-linear-gradient(0deg,transparent 0 45px,rgba(255,119,0,.05) 46px),
    repeating-linear-gradient(90deg,transparent 0 70px,rgba(255,119,0,.028) 71px),
    #090b0e;
}
.arex-v32-chart .arex-v32-line{
  filter:drop-shadow(0 0 5px rgba(255,104,0,.78));
}
.arex-v32-history-meta{
  margin-top:8px;
  display:flex;
  gap:17px;
  flex-wrap:wrap;
  color:#8c96a3;
  font-size:9px;
}
.arex-v32-history-meta b{color:#ff9632}
.arex-v32-history-loading{
  min-height:300px;
  display:grid;
  place-items:center;
  color:#89929f;
  font-size:11px;
}

/* Slightly denser lower row like the supplied reference. */
.arex-v3-facts{gap:4px !important}
.arex-v3-fact{
  min-height:82px !important;
  padding:9px !important;
}

/* Mobile keeps the real main logo but prevents overflow. */
@media(max-width:700px){
  body.arex-page-live-server header .brand img.arex-v32-main-logo,
  body.arex-page-server-seo header .brand img.arex-v32-main-logo{
    width:165px !important;
    max-width:165px !important;
    height:48px !important;
  }
  .arex-v3-history-shell{
    padding:90px 10px 12px !important;
  }
  body.arex-page-live-server .arex-v3-history-shell .history-head{
    top:-78px !important;
    left:0 !important;
    right:0 !important;
  }
  body.arex-page-live-server .arex-v3-history-shell .periods{
    width:100%;
  }
  body.arex-page-live-server .arex-v3-history-shell .period{
    flex:1 1 0;
  }
  .arex-v3-promo-shell{
    padding:90px 10px 12px !important;
  }
  .arex-v32-history-head{
    align-items:flex-start;
    flex-direction:column;
  }
  .arex-v32-periods{width:100%}
  .arex-v32-period{flex:1 1 0}
  .arex-v32-chart{height:220px}
}


/* AREX_SERVER_CARD_V330
   Final desktop visual pass after v3.2.
   Bounded presentation-only refinement: hero density, compact actions,
   compact rating/favorite, relative update label, lower-section alignment.
*/
body.arex-page-live-server .header-inner,
body.arex-page-server-seo header .nav{
  min-height:72px !important;
}
body.arex-page-live-server header .brand img.arex-v32-main-logo,
body.arex-page-server-seo header .brand img.arex-v32-main-logo{
  width:190px !important;
  max-width:190px !important;
  height:48px !important;
}

/* Hero closer to supplied target proportions. */
.arex-v3-main{
  grid-template-columns:398px minmax(0,1fr) !important;
  min-height:222px !important;
}
.arex-v3-map{
  min-height:222px !important;
}
.arex-v3-map-image{
  left:7.8% !important;
  top:13.5% !important;
  width:84.6% !important;
  height:63.5% !important;
}
.arex-v3-map-overlay{
  left:10.2% !important;
  bottom:6.5% !important;
  max-width:78% !important;
}
.arex-v3-map-kicker{font-size:10px !important}
.arex-v3-map-name{font-size:24px !important}

.arex-v3-server{
  padding:13px 17px 12px !important;
}
.arex-v3-statusline{
  min-height:27px !important;
  gap:10px !important;
  font-size:10px !important;
}
.arex-v3-status{
  min-height:27px !important;
  padding:0 12px !important;
  font-size:10px !important;
}
.arex-v3-title{
  margin-top:7px !important;
  font-size:clamp(27px,2.35vw,36px) !important;
  letter-spacing:.4px !important;
}
.arex-v3-desc{
  margin-top:4px !important;
  font-size:10px !important;
}
.arex-v3-ip-label{
  margin-top:10px !important;
  font-size:9px !important;
}
.arex-v3-actionrow{
  grid-template-columns:minmax(250px,1.35fr) 142px 52px 114px !important;
  gap:8px !important;
  margin-top:5px !important;
}
.arex-v3-ipbox{
  min-height:48px !important;
  padding:5px 7px 5px 13px !important;
}
.arex-v3-iptext{font-size:13px !important}
.arex-v3-copy{
  min-height:34px !important;
  padding:0 11px !important;
  font-size:9px !important;
}
.arex-v3-play{
  min-height:48px !important;
  font-size:18px !important;
}
.arex-v3-iconbtn{
  width:52px !important;
  min-width:52px !important;
  height:48px !important;
  min-height:48px !important;
  padding:0 !important;
  font-size:0 !important;
  position:relative !important;
}
.arex-v3-iconbtn::before{
  content:"♡";
  display:grid;
  place-items:center;
  width:100%;
  height:100%;
  color:#ff981f;
  font-size:21px;
  line-height:1;
}
.arex-v3-iconbtn[data-v33-fav-state="on"]::before{
  content:"♥";
}

/* Hide the extra desktop row to match supplied reference.
   It remains available on tablet/mobile. */
.arex-v3-secondaryrow{
  display:none !important;
}

/* Compact rating default, real 1..5 controls preserved in a popover. */
.arex-v3-rating{
  position:relative !important;
  min-width:114px !important;
  min-height:48px !important;
}
.arex-v33-rating-toggle{
  width:100%;
  min-height:48px;
  border:1px solid rgba(255,117,0,.72);
  border-radius:8px;
  background:rgba(8,9,11,.88);
  color:#ffb23f;
  font:900 12px/1 Arial,sans-serif;
  cursor:pointer;
  white-space:nowrap;
}
.arex-v33-rating-toggle:hover,
.arex-v33-rating-toggle:focus-visible{
  border-color:#ff9d2d;
  box-shadow:0 0 15px rgba(255,105,0,.22);
  outline:none;
}
.arex-v3-rating .server-rating-v180{
  display:block !important;
  min-height:0 !important;
}
.arex-v3-rating .server-rating-summary-v180{
  display:none !important;
}
.arex-v3-rating .server-rating-stars-v180,
.arex-v3-rating .server-rating-clear-v180{
  display:none !important;
}
.arex-v3-rating.is-open .server-rating-stars-v180{
  position:absolute !important;
  z-index:40 !important;
  top:56px !important;
  right:0 !important;
  display:flex !important;
  gap:3px !important;
  padding:9px !important;
  border:1px solid rgba(255,118,0,.72);
  border-radius:8px;
  background:rgba(5,6,8,.98);
  box-shadow:0 10px 28px rgba(0,0,0,.5),0 0 20px rgba(255,100,0,.18);
}
.arex-v3-rating.is-open .server-rating-star-v180{
  font-size:20px !important;
}
.arex-v3-rating.is-open .server-rating-clear-v180{
  position:absolute !important;
  z-index:40 !important;
  top:98px !important;
  right:0 !important;
  display:block !important;
  min-width:116px;
  padding:6px 9px !important;
  border:1px solid rgba(255,118,0,.35);
  border-radius:7px;
  background:#101217;
  color:#9da6b3;
  font-size:9px !important;
}

/* Population row: same information, less vertical weight. */
.arex-v3-population{
  grid-template-columns:170px minmax(0,1fr) 248px !important;
  min-height:92px !important;
  padding:10px 17px !important;
  gap:14px !important;
}
.arex-v3-pop-number{font-size:30px !important}
.arex-v3-pop-label{font-size:9px !important}
.arex-v3-segment{height:16px !important}
.arex-v3-pop-legend{
  margin-top:7px !important;
  font-size:9px !important;
}
.arex-v3-donut{
  width:68px !important;
  height:68px !important;
}
.arex-v3-donut strong{font-size:18px !important}
.arex-v3-donut small{font-size:6px !important}
.arex-v3-minichart-title{font-size:9px !important}
.arex-v3-minibars{height:36px !important}
.arex-v3-activityfoot{font-size:8px !important}

/* Facts row lower and denser. */
.arex-v3-facts{gap:3px !important}
.arex-v3-fact{
  min-height:72px !important;
  grid-template-columns:31px 1fr !important;
  gap:7px !important;
  padding:7px 8px !important;
}
.arex-v3-fact img{
  width:29px !important;
  height:29px !important;
}
.arex-v3-fact-label{font-size:7px !important}
.arex-v3-fact-value{font-size:11px !important}
.arex-v3-fact-sub{font-size:6.5px !important}

/* Lower section aligned and a little shorter. */
.arex-v3-lower{
  grid-template-columns:minmax(0,1fr) 286px !important;
  gap:9px !important;
  align-items:stretch !important;
}
.arex-v3-history-shell,
.arex-v3-promo-shell{
  min-height:352px !important;
  height:352px !important;
}
.arex-v3-history-shell{
  padding:50px 15px 14px !important;
}
.arex-v3-promo-shell{
  padding:80px 12px 13px !important;
}
.arex-v3-history-title{
  top:14px !important;
  left:22px !important;
  font-size:18px !important;
}
body.arex-page-live-server .arex-v3-history-shell .chart{
  height:270px !important;
}
.arex-v3-promo-title{
  top:14px !important;
  font-size:17px !important;
}
.arex-v3-promo-sub{
  top:45px !important;
  font-size:8px !important;
}
.arex-v3-promo-content{
  min-height:248px !important;
}
.arex-v3-promo-content .promo{
  min-height:47px !important;
}
.arex-v3-promo-content a.btn.primary{
  min-height:37px !important;
}

/* Remove the old generic footer on this immersive detail page. */
body.arex-page-live-server main.wrap > .footer,
body.arex-page-server-seo main > .footer{
  display:none !important;
}

@media(max-width:1050px){
  .arex-v3-main{
    grid-template-columns:350px minmax(0,1fr) !important;
  }
  .arex-v3-actionrow{
    grid-template-columns:minmax(225px,1fr) 132px 50px 108px !important;
  }
}

@media(max-width:960px){
  .arex-v3-main{
    grid-template-columns:1fr !important;
  }
  .arex-v3-map{min-height:340px !important}
  .arex-v3-secondaryrow{
    display:flex !important;
  }
  .arex-v3-history-shell,
  .arex-v3-promo-shell{
    height:auto !important;
    min-height:350px !important;
  }
  .arex-v3-lower{
    grid-template-columns:1fr !important;
  }
}

@media(max-width:650px){
  body.arex-page-live-server header .brand img.arex-v32-main-logo,
  body.arex-page-server-seo header .brand img.arex-v32-main-logo{
    width:150px !important;
    max-width:150px !important;
  }
  .arex-v3-map{min-height:285px !important}
  .arex-v3-actionrow{
    grid-template-columns:1fr 1fr !important;
  }
  .arex-v3-ipbox{grid-column:1/-1}
  .arex-v3-rating{min-width:0 !important}
  .arex-v33-rating-toggle{width:100%}
}

@media(max-width:430px){
  .arex-v3-actionrow{
    grid-template-columns:1fr !important;
  }
  .arex-v3-iconbtn{
    width:100% !important;
  }
  .arex-v3-rating{
    width:100% !important;
  }
}


/* AREX_SERVER_CARD_V340
   Final UI polish after browser review of v3.3.
   Presentation-only: hide legacy favorite text, collapse legacy rating shell,
   keep promotion title on one line, slightly tighten hero proportions.
*/

/* Favorite: force the control to render as icon-only even when legacy
   .btn/.favorite-page rules inject their own font/text/pseudo styling. */
.arex-v3-fav-slot{
  min-width:48px !important;
  overflow:hidden !important;
}
.arex-v3-iconbtn{
  width:48px !important;
  min-width:48px !important;
  height:45px !important;
  min-height:45px !important;
  padding:0 !important;
  overflow:hidden !important;
  position:relative !important;
  color:transparent !important;
  text-indent:-9999px !important;
  white-space:nowrap !important;
}
.arex-v3-iconbtn > *{
  display:none !important;
}
.arex-v3-iconbtn::before{
  content:"♡" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:3 !important;
  display:grid !important;
  place-items:center !important;
  width:auto !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  color:#ff981f !important;
  font-size:21px !important;
  line-height:1 !important;
  text-indent:0 !important;
  opacity:1 !important;
  transform:none !important;
}
.arex-v3-iconbtn::after{
  content:none !important;
  display:none !important;
}
.arex-v3-iconbtn[data-v33-fav-state="on"]::before,
.arex-v3-iconbtn[aria-pressed="true"]::before{
  content:"♥" !important;
}

/* Rating: keep only our compact toggle in the normal flow. The legacy
   rating shell remains available solely as the 1..5 popover. */
.arex-v3-rating{
  min-width:126px !important;
  min-height:45px !important;
  overflow:visible !important;
}
.arex-v33-rating-toggle{
  position:relative !important;
  z-index:2 !important;
  min-height:45px !important;
  height:45px !important;
  padding:0 9px !important;
  box-sizing:border-box !important;
  font-size:11px !important;
}
.arex-v3-rating > .server-rating-v180{
  position:absolute !important;
  inset:0 !important;
  z-index:1 !important;
  width:100% !important;
  height:100% !important;
  min-width:0 !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:visible !important;
  pointer-events:none !important;
  font-size:0 !important;
}
.arex-v3-rating > .server-rating-v180::before,
.arex-v3-rating > .server-rating-v180::after{
  content:none !important;
  display:none !important;
}
.arex-v3-rating.is-open > .server-rating-v180{
  pointer-events:auto !important;
}
.arex-v3-rating.is-open .server-rating-stars-v180{
  top:52px !important;
  right:0 !important;
  pointer-events:auto !important;
}
.arex-v3-rating.is-open .server-rating-clear-v180{
  top:94px !important;
  right:0 !important;
  pointer-events:auto !important;
}

/* Slight final hero density adjustment from the v3.3 browser screenshot. */
.arex-v3-main{
  grid-template-columns:392px minmax(0,1fr) !important;
  min-height:214px !important;
}
.arex-v3-map{
  min-height:214px !important;
}
.arex-v3-server{
  padding:10px 16px 10px !important;
}
.arex-v3-statusline{
  min-height:24px !important;
}
.arex-v3-status{
  min-height:24px !important;
}
.arex-v3-title{
  margin-top:5px !important;
  font-size:clamp(27px,2.2vw,34px) !important;
}
.arex-v3-desc{
  margin-top:3px !important;
}
.arex-v3-ip-label{
  margin-top:8px !important;
}
.arex-v3-actionrow{
  grid-template-columns:minmax(260px,1.35fr) 150px 48px 126px !important;
  gap:7px !important;
  margin-top:4px !important;
}
.arex-v3-ipbox{
  min-height:45px !important;
}
.arex-v3-play{
  min-height:45px !important;
  height:45px !important;
}

/* Promotion title: one clean line as approved. */
.arex-v3-promo-title{
  top:14px !important;
  left:13px !important;
  right:13px !important;
  width:auto !important;
  max-width:none !important;
  font-size:13.5px !important;
  line-height:1.05 !important;
  letter-spacing:.15px !important;
  white-space:nowrap !important;
  overflow:visible !important;
  text-overflow:clip !important;
}
.arex-v3-promo-sub{
  top:38px !important;
}
.arex-v3-promo-shell{
  padding-top:72px !important;
}

@media(max-width:1050px){
  .arex-v3-main{
    grid-template-columns:342px minmax(0,1fr) !important;
  }
  .arex-v3-actionrow{
    grid-template-columns:minmax(220px,1fr) 132px 48px 118px !important;
  }
  .arex-v3-promo-title{
    font-size:12.5px !important;
  }
}

@media(max-width:960px){
  .arex-v3-main{
    grid-template-columns:1fr !important;
  }
  .arex-v3-map{
    min-height:330px !important;
  }
  .arex-v3-promo-title{
    font-size:14px !important;
  }
}

@media(max-width:650px){
  .arex-v3-actionrow{
    grid-template-columns:1fr 1fr !important;
  }
  .arex-v3-iconbtn{
    width:100% !important;
    min-width:0 !important;
  }
  .arex-v3-rating{
    min-width:0 !important;
  }
}

@media(max-width:430px){
  .arex-v3-actionrow{
    grid-template-columns:1fr !important;
  }
}


/* AREX_SERVER_CARD_V350
   Final desktop density pass after browser acceptance of v3.4.
   Presentation-only. Desktop >= 961px only: tighten header, hero and
   vertical rhythm while preserving all v3.4 behavior and mobile layout.
*/
@media(min-width:961px){
  body.arex-page-live-server .header-inner,
  body.arex-page-server-seo .header-inner{
    min-height:64px !important;
    height:64px !important;
  }

  body.arex-page-live-server header .brand img.arex-v32-main-logo,
  body.arex-page-server-seo header .brand img.arex-v32-main-logo{
    width:182px !important;
    max-width:182px !important;
    height:42px !important;
  }

  .arex-v3-shell{
    gap:5px !important;
  }

  /* Remove the remaining empty lower area in the hero. */
  .arex-v3-main{
    height:202px !important;
    min-height:202px !important;
    grid-template-columns:382px minmax(0,1fr) !important;
  }
  .arex-v3-map{
    height:202px !important;
    min-height:202px !important;
  }
  .arex-v3-map-image{
    top:12.5% !important;
    height:64.5% !important;
  }
  .arex-v3-map-overlay{
    bottom:5.5% !important;
  }
  .arex-v3-map-name{
    font-size:22px !important;
  }

  .arex-v3-server{
    padding:8px 14px 8px !important;
  }
  .arex-v3-statusline{
    min-height:22px !important;
    gap:8px !important;
    font-size:9px !important;
  }
  .arex-v3-status{
    min-height:22px !important;
    height:22px !important;
    padding:0 10px !important;
    font-size:9px !important;
  }
  .arex-v3-title{
    margin-top:4px !important;
    font-size:clamp(25px,2.05vw,32px) !important;
    line-height:1.02 !important;
  }
  .arex-v3-desc{
    margin-top:2px !important;
    font-size:9px !important;
  }
  .arex-v3-ip-label{
    margin-top:6px !important;
    font-size:8px !important;
  }
  .arex-v3-actionrow{
    margin-top:3px !important;
    gap:6px !important;
    grid-template-columns:minmax(250px,1.4fr) 144px 46px 126px !important;
  }
  .arex-v3-ipbox,
  .arex-v3-play,
  .arex-v3-iconbtn,
  .arex-v33-rating-toggle{
    min-height:42px !important;
    height:42px !important;
  }
  .arex-v3-iconbtn{
    width:46px !important;
    min-width:46px !important;
  }
  .arex-v3-rating{
    min-height:42px !important;
  }
  .arex-v3-ipbox{
    padding:4px 6px 4px 12px !important;
  }
  .arex-v3-copy{
    min-height:31px !important;
    height:31px !important;
  }
  .arex-v3-play{
    font-size:17px !important;
  }

  /* Bring population and facts closer to the hero and graph. */
  .arex-v3-population{
    min-height:86px !important;
    height:86px !important;
    padding:7px 14px !important;
    gap:12px !important;
  }
  .arex-v3-pop-number{
    font-size:28px !important;
  }
  .arex-v3-segment{
    height:15px !important;
  }
  .arex-v3-donut{
    width:60px !important;
    height:60px !important;
  }
  .arex-v3-minibars{
    height:32px !important;
  }

  .arex-v3-facts{
    gap:2px !important;
  }
  .arex-v3-fact{
    min-height:68px !important;
    height:68px !important;
    padding:5px 7px !important;
    grid-template-columns:28px 1fr !important;
    gap:6px !important;
  }
  .arex-v3-fact img{
    width:27px !important;
    height:27px !important;
  }
  .arex-v3-fact-value{
    font-size:10.5px !important;
  }

  .arex-v3-lower{
    gap:7px !important;
  }
}


/* AREX_SERVER_CARD_V360
   Final bounded UI polish after v3.5 browser review.
   CSS-only: separate action controls, reduce fill donut visual weight,
   and place owner/site actions inline with their missing-value state.
*/
@media(min-width:1200px){
  .arex-v3-actionrow{
    grid-template-columns:minmax(240px,1fr) 154px 50px 138px !important;
    gap:10px !important;
    align-items:stretch !important;
  }

  .arex-v3-play{
    min-width:154px !important;
    width:154px !important;
    margin:0 !important;
  }

  .arex-v3-fav-slot{
    width:50px !important;
    min-width:50px !important;
    max-width:50px !important;
    display:flex !important;
    align-items:stretch !important;
  }

  .arex-v3-iconbtn{
    width:50px !important;
    min-width:50px !important;
    max-width:50px !important;
    margin:0 !important;
  }

  .arex-v3-rating{
    width:138px !important;
    min-width:138px !important;
    max-width:138px !important;
    margin:0 !important;
  }

  .arex-v33-rating-toggle{
    width:100% !important;
    min-width:0 !important;
    padding:0 9px !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
}

@media(min-width:961px){
  .arex-v3-donut{
    width:50px !important;
    height:50px !important;
    min-width:50px !important;
  }

  .arex-v3-donut strong{
    font-size:16px !important;
    line-height:1 !important;
  }

  .arex-v3-donut small{
    font-size:5.8px !important;
    line-height:1 !important;
    margin-top:4px !important;
  }

  .arex-v3-fact:nth-child(3) > div,
  .arex-v3-fact:nth-child(7) > div{
    display:grid !important;
    grid-template-columns:max-content max-content !important;
    grid-template-areas:
      "label label"
      "value action" !important;
    column-gap:8px !important;
    row-gap:2px !important;
    align-items:center !important;
    justify-content:start !important;
    min-width:0 !important;
  }

  .arex-v3-fact:nth-child(3) .arex-v3-fact-label,
  .arex-v3-fact:nth-child(7) .arex-v3-fact-label{
    grid-area:label !important;
  }

  .arex-v3-fact:nth-child(3) .arex-v3-fact-value,
  .arex-v3-fact:nth-child(7) .arex-v3-fact-value{
    grid-area:value !important;
    white-space:nowrap !important;
  }

  .arex-v3-fact:nth-child(3) .arex-v3-fact-sub,
  .arex-v3-fact:nth-child(7) .arex-v3-fact-sub{
    grid-area:action !important;
    margin:0 !important;
    padding:0 !important;
    white-space:nowrap !important;
    line-height:1 !important;
  }

  .arex-v3-fact:nth-child(3) .arex-v31-fact-link,
  .arex-v3-fact:nth-child(7) .arex-v31-fact-link{
    color:#ffb000 !important;
    font-size:8px !important;
    font-weight:900 !important;
    text-decoration:none !important;
    text-transform:uppercase !important;
    letter-spacing:.02em !important;
    text-shadow:0 0 8px rgba(255,176,0,.28) !important;
  }

  .arex-v3-fact:nth-child(3) .arex-v31-fact-link:hover,
  .arex-v3-fact:nth-child(7) .arex-v31-fact-link:hover{
    color:#ffd36a !important;
    text-shadow:0 0 10px rgba(255,176,0,.55) !important;
  }
}


/* AREX_SERVER_CARD_V370
   Population/status visual polish after v3.6 browser review.
   CSS-only. The 19% fill indicator gets its own balanced lane and the
   adjacent activity chart gets clearer separation and breathing room.
*/
@media(min-width:1200px){
  .arex-v3-population{
    grid-template-columns:170px minmax(0,1fr) 270px !important;
  }

  .arex-v3-activity{
    display:grid !important;
    grid-template-columns:68px minmax(0,1fr) !important;
    gap:14px !important;
    align-items:center !important;
    min-width:0 !important;
    padding-left:14px !important;
    border-left:1px solid rgba(255,118,0,.28) !important;
  }

  .arex-v3-activity > .arex-v3-donut{
    justify-self:center !important;
    align-self:center !important;
  }

  .arex-v3-activity > div:last-child{
    min-width:0 !important;
    padding-left:14px !important;
    border-left:1px solid rgba(255,118,0,.22) !important;
  }

  .arex-v3-donut{
    width:48px !important;
    height:48px !important;
    min-width:48px !important;
    margin:0 auto !important;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.025),0 0 14px rgba(255,106,0,.08) !important;
  }

  .arex-v3-donut strong{
    font-size:15px !important;
    line-height:1 !important;
    letter-spacing:-.02em !important;
  }

  .arex-v3-donut small{
    display:block !important;
    font-size:5.4px !important;
    line-height:1 !important;
    margin-top:4px !important;
    letter-spacing:.02em !important;
    opacity:.72 !important;
  }

  .arex-v3-minichart-title{
    text-align:center !important;
    font-size:8px !important;
    line-height:1 !important;
    margin-bottom:5px !important;
    white-space:nowrap !important;
  }

  .arex-v3-minibars{
    height:30px !important;
    min-height:30px !important;
    align-items:end !important;
  }

  .arex-v3-activityfoot{
    margin-top:4px !important;
    padding:0 2px !important;
    font-size:7px !important;
    line-height:1 !important;
  }
}

@media(min-width:961px) and (max-width:1199px){
  .arex-v3-activity{
    gap:8px !important;
  }

  .arex-v3-donut{
    width:46px !important;
    height:46px !important;
    min-width:46px !important;
  }

  .arex-v3-donut strong{
    font-size:14px !important;
  }

  .arex-v3-donut small{
    font-size:5px !important;
  }
}


/* AREX_SERVER_CARD_V380
   Rebalance the population status lane after v3.7 browser review.
   Keep one main divider between slots and status area; restore a readable
   54px donut and give the activity chart enough width/height to breathe.
*/
@media(min-width:1200px){
  .arex-v3-population{
    grid-template-columns:170px minmax(0,1fr) 300px !important;
  }

  .arex-v3-activity{
    display:grid !important;
    grid-template-columns:74px minmax(0,1fr) !important;
    gap:18px !important;
    align-items:center !important;
    min-width:0 !important;
    padding-left:16px !important;
    border-left:1px solid rgba(255,118,0,.30) !important;
  }

  .arex-v3-activity > .arex-v3-donut{
    justify-self:center !important;
    align-self:center !important;
  }

  .arex-v3-activity > div:last-child{
    min-width:0 !important;
    padding-left:0 !important;
    border-left:0 !important;
  }

  .arex-v3-donut{
    width:54px !important;
    height:54px !important;
    min-width:54px !important;
    margin:0 auto !important;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.03),0 0 14px rgba(255,106,0,.10) !important;
  }

  .arex-v3-donut strong{
    font-size:18px !important;
    line-height:1 !important;
    letter-spacing:-.025em !important;
  }

  .arex-v3-donut small{
    display:block !important;
    font-size:6.2px !important;
    line-height:1 !important;
    margin-top:4px !important;
    letter-spacing:.015em !important;
    opacity:.82 !important;
  }

  .arex-v3-minichart-title{
    text-align:center !important;
    font-size:8.5px !important;
    line-height:1 !important;
    margin-bottom:6px !important;
    white-space:nowrap !important;
  }

  .arex-v3-minibars{
    height:36px !important;
    min-height:36px !important;
    align-items:end !important;
  }

  .arex-v3-activityfoot{
    margin-top:5px !important;
    padding:0 2px !important;
    font-size:7.4px !important;
    line-height:1 !important;
  }
}

@media(min-width:961px) and (max-width:1199px){
  .arex-v3-activity{
    gap:10px !important;
  }

  .arex-v3-donut{
    width:50px !important;
    height:50px !important;
    min-width:50px !important;
  }

  .arex-v3-donut strong{
    font-size:16px !important;
  }

  .arex-v3-donut small{
    font-size:5.8px !important;
  }

  .arex-v3-minibars{
    height:33px !important;
  }
}


/* AREX_SERVER_CARD_V390
   Keep percentage and label independently contained inside donut.
*/
@media(min-width:961px){
  .arex-v3-donut{
    position:relative !important;
    overflow:hidden !important;
    width:54px !important;
    height:54px !important;
    min-width:54px !important;
    padding:0 !important;
  }

  .arex-v3-donut strong{
    position:absolute !important;
    top:16px !important;
    left:50% !important;
    transform:translateX(-50%) !important;

    display:block !important;

    margin:0 !important;
    padding:0 !important;

    width:auto !important;
    max-width:46px !important;

    font-size:15px !important;
    font-weight:900 !important;
    line-height:16px !important;
    letter-spacing:-0.5px !important;

    white-space:nowrap !important;
    text-align:center !important;
  }

  .arex-v3-donut small{
    position:absolute !important;
    top:34px !important;
    left:50% !important;
    transform:translateX(-50%) !important;

    display:block !important;

    margin:0 !important;
    padding:0 !important;

    width:48px !important;

    font-size:5px !important;
    font-weight:700 !important;
    line-height:6px !important;
    letter-spacing:0 !important;

    white-space:nowrap !important;
    text-align:center !important;

    opacity:.72 !important;
  }
}

/* AREX_SERVER_CARD_V400
   Align top navigation on live/SEO server pages to match main monitoring page.
*/
@media (min-width: 961px) {
  body.arex-page-live-server header,
  body.arex-page-seo-server header {
    position: relative;
    z-index: 20;
  }

  body.arex-page-live-server header > div,
  body.arex-page-seo-server header > div,
  body.arex-page-live-server .header > div,
  body.arex-page-seo-server .header > div,
  body.arex-page-live-server .topbar > div,
  body.arex-page-seo-server .topbar > div,
  body.arex-page-live-server .navbar > div,
  body.arex-page-seo-server .navbar > div,
  body.arex-page-live-server .header-inner,
  body.arex-page-seo-server .header-inner,
  body.arex-page-live-server .header-shell,
  body.arex-page-seo-server .header-shell,
  body.arex-page-live-server .topbar-inner,
  body.arex-page-seo-server .topbar-inner,
  body.arex-page-live-server .navbar-inner,
  body.arex-page-seo-server .navbar-inner {
    max-width: 1640px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 42px !important;
    padding-right: 42px !important;
    box-sizing: border-box !important;
  }

  body.arex-page-live-server header nav,
  body.arex-page-seo-server header nav,
  body.arex-page-live-server .header nav,
  body.arex-page-seo-server .header nav,
  body.arex-page-live-server .topbar nav,
  body.arex-page-seo-server .topbar nav,
  body.arex-page-live-server .navbar nav,
  body.arex-page-seo-server .navbar nav,
  body.arex-page-live-server .main-nav,
  body.arex-page-seo-server .main-nav,
  body.arex-page-live-server .top-nav,
  body.arex-page-seo-server .top-nav,
  body.arex-page-live-server .menu,
  body.arex-page-seo-server .menu {
    margin-left: 36px !important;
    margin-right: 0 !important;
    justify-content: flex-start !important;
    justify-self: start !important;
  }

  body.arex-page-live-server header nav ul,
  body.arex-page-seo-server header nav ul,
  body.arex-page-live-server .main-nav ul,
  body.arex-page-seo-server .main-nav ul,
  body.arex-page-live-server .top-nav ul,
  body.arex-page-seo-server .top-nav ul,
  body.arex-page-live-server .menu ul,
  body.arex-page-seo-server .menu ul {
    justify-content: flex-start !important;
    gap: 18px !important;
  }

  body.arex-page-live-server header a[href*="cabinet"],
  body.arex-page-seo-server header a[href*="cabinet"],
  body.arex-page-live-server .header a[href*="cabinet"],
  body.arex-page-seo-server .header a[href*="cabinet"],
  body.arex-page-live-server .topbar a[href*="cabinet"],
  body.arex-page-seo-server .topbar a[href*="cabinet"],
  body.arex-page-live-server .navbar a[href*="cabinet"],
  body.arex-page-seo-server .navbar a[href*="cabinet"] {
    margin-left: auto !important;
  }
}

/* AREX_SERVER_CARD_V410
   Exact server-detail header alignment parity with main monitoring page.
   Fixes v4.0 right shift caused by nav/cabinet auto margins.
*/

@media(min-width:961px){

  html body.arex-page-live-server header.header .header-inner,
  html body.arex-page-server-seo header.header .header-inner{
    width:100% !important;
    max-width:none !important;

    min-height:82px !important;
    height:82px !important;

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

    display:grid !important;

    grid-template-columns:
      clamp(285px,22.5vw,385px)
      minmax(0,1fr)
      auto !important;

    align-items:center !important;
    column-gap:0 !important;

    box-sizing:border-box !important;
  }


  html body.arex-page-live-server header.header .header-inner > .brand,
  html body.arex-page-server-seo header.header .header-inner > .brand{
    width:auto !important;
    min-width:0 !important;

    margin:0 !important;
    padding:0 !important;

    justify-self:start !important;
    align-self:center !important;
  }


  html body.arex-page-live-server header.header .header-inner > .brand > img,
  html body.arex-page-server-seo header.header .header-inner > .brand > img{
    width:310px !important;
    max-width:100% !important;
    height:58px !important;

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

    filter:none !important;
  }


  html body.arex-page-live-server header.header .header-inner > nav.nav,
  html body.arex-page-server-seo header.header .header-inner > nav.nav{
    width:auto !important;
    max-width:none !important;

    min-height:72px !important;

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

    display:flex !important;

    align-items:center !important;
    justify-content:flex-start !important;
    justify-self:stretch !important;

    gap:28px !important;

    box-sizing:border-box !important;
  }


  html body.arex-page-live-server header.header .nav > a,
  html body.arex-page-server-seo header.header .nav > a{
    margin-left:0 !important;
    margin-right:0 !important;

    flex:0 0 auto !important;
  }


  /*
   * В v4.0 правило для cabinet получило margin-left:auto
   * и фактически выталкивало меню вправо.
   */
  html body.arex-page-live-server header.header .nav > a[href*="cabinet"],
  html body.arex-page-server-seo header.header .nav > a[href*="cabinet"]{
    margin-left:0 !important;
  }


  html body.arex-page-live-server header.header .header-inner > .head-actions,
  html body.arex-page-server-seo header.header .header-inner > .head-actions{
    display:flex !important;

    align-items:center !important;
    justify-content:flex-end !important;

    justify-self:end !important;

    margin:0 !important;
    padding:0 !important;

    white-space:nowrap !important;
  }


  html body.arex-page-live-server header.header .head-actions > a.cabinet,
  html body.arex-page-server-seo header.header .head-actions > a.cabinet{
    margin-left:0 !important;
  }

}


/*
 * Средний desktop / небольшой ноутбук.
 * Не допускаем столкновения навигации с правой кнопкой.
 */
@media(min-width:961px) and (max-width:1250px){

  html body.arex-page-live-server header.header .header-inner,
  html body.arex-page-server-seo header.header .header-inner{
    padding-left:22px !important;
    padding-right:22px !important;

    grid-template-columns:
      250px
      minmax(0,1fr)
      auto !important;
  }


  html body.arex-page-live-server header.header .header-inner > .brand > img,
  html body.arex-page-server-seo header.header .header-inner > .brand > img{
    width:220px !important;
    height:52px !important;
  }


  html body.arex-page-live-server header.header .header-inner > nav.nav,
  html body.arex-page-server-seo header.header .header-inner > nav.nav{
    padding:0 16px !important;
    gap:14px !important;
  }

}

/* AREX_SERVER_CARD_V420
   Exact header parity with live monitoring HOME.

   HOME reference:
   max-width:1500px
   height:74px
   padding:0 24px
   gap:32px
   brand min-width:310px
   nav gap:8px
*/

body.arex-page-live-server header.header,
body.arex-page-server-seo header.header{
  position:sticky !important;
  top:0 !important;
  z-index:100 !important;

  border-bottom:
    1px solid rgba(255,255,255,.067) !important;

  background:
    rgba(8,10,14,.91) !important;

  backdrop-filter:
    blur(18px) !important;
}


body.arex-page-live-server header.header .header-inner,
body.arex-page-server-seo header.header .header-inner{
  width:auto !important;

  max-width:1500px !important;

  height:74px !important;
  min-height:74px !important;

  margin:auto !important;

  padding:0 24px !important;

  display:flex !important;

  align-items:center !important;

  gap:32px !important;

  box-sizing:border-box !important;
}


body.arex-page-live-server header.header .brand,
body.arex-page-server-seo header.header .brand{
  display:flex !important;

  align-items:center !important;

  gap:12px !important;

  min-width:310px !important;

  width:auto !important;

  margin:0 !important;
  padding:0 !important;

  flex:0 0 auto !important;

  justify-self:auto !important;
}


body.arex-page-live-server header.header .brand img,
body.arex-page-server-seo header.header .brand img,
body.arex-page-live-server header.header .brand img.arex-v32-main-logo,
body.arex-page-server-seo header.header .brand img.arex-v32-main-logo{
  display:block !important;

  width:310px !important;

  max-width:100% !important;

  height:58px !important;

  object-fit:contain !important;

  object-position:
    left center !important;

  filter:none !important;
}


body.arex-page-live-server header.header nav.nav,
body.arex-page-server-seo header.header nav.nav{
  display:flex !important;

  align-items:center !important;

  justify-content:
    flex-start !important;

  justify-self:auto !important;

  width:auto !important;

  max-width:none !important;

  min-height:0 !important;

  margin:0 !important;
  padding:0 !important;

  gap:8px !important;

  flex:1 1 0% !important;

  overflow:visible !important;
}


body.arex-page-live-server header.header nav.nav > a,
body.arex-page-server-seo header.header nav.nav > a{
  min-height:0 !important;

  margin:0 !important;

  padding:
    11px 15px !important;

  display:block !important;

  flex:0 0 auto !important;

  border-radius:
    9px !important;

  background:
    transparent !important;

  color:
    #c3cad3 !important;

  font-size:
    13px !important;

  font-weight:
    700 !important;

  line-height:
    normal !important;

  letter-spacing:
    normal !important;

  text-transform:
    none !important;

  white-space:
    nowrap !important;
}


body.arex-page-live-server header.header nav.nav > a:hover,
body.arex-page-server-seo header.header nav.nav > a:hover{
  background:
    #15191f !important;

  color:
    #fff !important;
}


body.arex-page-live-server header.header nav.nav > a.active,
body.arex-page-server-seo header.header nav.nav > a.active{
  color:
    #ff9c37 !important;

  background:
    rgba(255,121,0,.11) !important;
}


body.arex-page-live-server header.header .head-actions,
body.arex-page-server-seo header.header .head-actions{
  display:flex !important;

  align-items:center !important;

  gap:10px !important;

  width:auto !important;

  margin:0 !important;

  padding:0 !important;

  justify-self:auto !important;

  flex:0 0 auto !important;
}


body.arex-page-live-server header.header .head-actions .cabinet,
body.arex-page-server-seo header.header .head-actions .cabinet{
  width:auto !important;

  margin:0 !important;

  padding:
    11px 16px !important;

  border:
    1px solid #313945 !important;

  border-radius:
    10px !important;

  background:
    #11151b !important;

  color:
    inherit !important;

  font-size:
    13px !important;

  font-weight:
    800 !important;

  line-height:
    normal !important;

  letter-spacing:
    normal !important;

  text-transform:
    none !important;

  white-space:
    nowrap !important;
}


body.arex-page-live-server header.header .head-actions .cabinet:hover,
body.arex-page-server-seo header.header .head-actions .cabinet:hover{
  border-color:
    #ff7900 !important;
}


@media(max-width:900px){

  body.arex-page-live-server header.header .brand,
  body.arex-page-server-seo header.header .brand{
    min-width:
      225px !important;
  }


  body.arex-page-live-server header.header .brand img,
  body.arex-page-server-seo header.header .brand img,
  body.arex-page-live-server header.header .brand img.arex-v32-main-logo,
  body.arex-page-server-seo header.header .brand img.arex-v32-main-logo{
    width:
      225px !important;

    height:
      48px !important;
  }

}


@media(max-width:780px){

  body.arex-page-live-server header.header .header-inner,
  body.arex-page-server-seo header.header .header-inner{
    height:auto !important;

    min-height:
      68px !important;

    padding:
      12px 15px !important;

    flex-wrap:
      wrap !important;
  }


  body.arex-page-live-server header.header .brand,
  body.arex-page-server-seo header.header .brand{
    min-width:
      0 !important;

    flex:
      1 1 0% !important;
  }


  body.arex-page-live-server header.header .brand img,
  body.arex-page-server-seo header.header .brand img,
  body.arex-page-live-server header.header .brand img.arex-v32-main-logo,
  body.arex-page-server-seo header.header .brand img.arex-v32-main-logo{
    width:
      205px !important;

    height:
      46px !important;
  }


  body.arex-page-live-server header.header nav.nav,
  body.arex-page-server-seo header.header nav.nav{
    order:
      3 !important;

    width:
      100% !important;

    overflow:
      auto !important;
  }


  body.arex-page-live-server header.header nav.nav > a,
  body.arex-page-server-seo header.header nav.nav > a{
    padding:
      8px 10px !important;
  }

}


@media(max-width:430px){

  body.arex-page-live-server header.header .head-actions,
  body.arex-page-server-seo header.header .head-actions{
    width:
      100% !important;
  }


  body.arex-page-live-server header.header .head-actions .cabinet,
  body.arex-page-server-seo header.header .head-actions .cabinet{
    width:
      100% !important;

    text-align:
      center !important;
  }

}