/* EXODAR — Support Team v2 */

.spt-page{
  --spt-bg:#05040a;
  --spt-panel:rgba(7,5,13,.86);
  --spt-panel-2:rgba(16,9,28,.82);
  --spt-line:rgba(159,92,246,.35);
  --spt-line-soft:rgba(159,92,246,.17);
  --spt-text:#efe8f7;
  --spt-muted:#aea2bd;
  --spt-purple:#9d55ff;
  --spt-purple-2:#5b249f;
  --spt-red:#f05a5d;
  color:var(--spt-text);
  container-type:inline-size;
}

.spt-page *{ box-sizing:border-box; }

.spt-page a{
  color:#f0e8f8;
  text-decoration:none;
}

.spt-page a:hover{
  color:#d9b8ff;
}

.spt-hero{
  position:relative;
  min-height:156px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  margin:0 0 14px;
  padding:28px 24px;
  overflow:hidden;
  border:1px solid var(--spt-line);
  border-radius:7px;
  background:
    linear-gradient(180deg, rgba(12,7,20,.80), rgba(5,4,9,.92)),
    url("../images/redesign/ui/spt-hero-v1.svg") center/cover no-repeat;
  box-shadow:0 18px 42px rgba(0,0,0,.42), inset 0 0 42px rgba(127,67,215,.13);
}

.spt-hero::before,
.spt-hero::after,
.spt-section::before,
.spt-section::after,
.spt-help::before,
.spt-help::after{
  content:"";
  position:absolute;
  width:18px;
  height:18px;
  border:1px solid rgba(184,126,255,.50);
  transform:rotate(45deg);
  pointer-events:none;
}

.spt-hero::before,
.spt-section::before,
.spt-help::before{
  left:-6px;
  top:-6px;
}

.spt-hero::after,
.spt-section::after,
.spt-help::after{
  right:-6px;
  top:-6px;
}

.spt-hero-bg{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 10%, rgba(180,105,255,.20), transparent 32%),
    linear-gradient(90deg, rgba(0,0,0,.22), transparent 28%, transparent 72%, rgba(0,0,0,.22));
}

.spt-hero h1{
  position:relative;
  z-index:1;
  margin:0;
  color:#f6effc;
  font-family:var(--font-title, Georgia, serif);
  font-size:3.05rem;
  font-weight:800;
  line-height:1;
  letter-spacing:.06em;
  text-transform:uppercase;
  text-shadow:0 3px 3px rgba(0,0,0,.88), 0 0 24px rgba(174,105,255,.50);
}

.spt-hero p{
  position:relative;
  z-index:1;
  margin:10px 0 0;
  color:#d9b8ff;
  font-family:var(--font-title, Georgia, serif);
  font-size:.92rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.spt-hero p::before,
.spt-hero p::after{
  content:"";
  display:inline-block;
  width:88px;
  height:1px;
  margin:0 12px 4px;
  background:linear-gradient(90deg, transparent, rgba(198,143,255,.66), transparent);
}

.spt-stats{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  margin:0 0 14px;
}

.spt-stat{
  min-height:78px;
  display:grid;
  grid-template-columns:58px minmax(0,1fr);
  grid-template-rows:1fr 1fr;
  align-items:center;
  column-gap:12px;
  padding:12px 16px;
  border:1px solid rgba(159,92,246,.28);
  border-radius:7px;
  background:
    linear-gradient(180deg, rgba(17,10,29,.86), rgba(7,5,12,.88)),
    url("../images/redesign/ui/si-tile-v1.svg") center/100% 100% no-repeat;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 12px 20px rgba(0,0,0,.24);
}

.spt-stat-icon{
  grid-row:1 / span 2;
  width:50px;
  height:50px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(184,126,255,.32);
  border-radius:50%;
  background:radial-gradient(circle at 50% 35%, rgba(174,105,255,.35), transparent 62%), rgba(14,8,24,.76);
  box-shadow:0 0 18px rgba(150,83,255,.22);
}

.spt-stat-icon::before{
  color:#e9d5ff;
  font-size:24px;
  text-shadow:0 0 10px rgba(190,124,255,.58);
}

.spt-stat-online::before{ content:"●"; color:#79ea9e; }
.spt-stat-admin::before{ content:"♛"; }
.spt-stat-tutor::before{ content:"✦"; }
.spt-stat-time::before{ content:"⌛"; }

.spt-stat small{
  color:#c9b5dc;
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.spt-stat strong{
  color:#fff;
  font-family:var(--font-title, Georgia, serif);
  font-size:1.34rem;
  line-height:1;
}

.spt-section,
.spt-help{
  position:relative;
  margin:0 0 14px;
  padding:18px;
  overflow:hidden;
  border:1px solid var(--spt-line);
  border-radius:7px;
  background:
    linear-gradient(180deg, rgba(8,6,13,.92), rgba(5,4,9,.91)),
    url("../images/redesign/ui/panel-body.png") center/100% 100% no-repeat;
  box-shadow:0 18px 36px rgba(0,0,0,.32), inset 0 0 28px rgba(119,70,255,.09);
}

.spt-section-title{
  display:flex;
  align-items:center;
  gap:12px;
  margin:0 0 14px;
  color:#d9b8ff;
  font-family:var(--font-title, Georgia, serif);
  font-size:1.02rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.spt-section-title::before{
  content:"♛";
  color:#a964ff;
  font-size:16px;
  text-shadow:0 0 10px rgba(169,100,255,.62);
}

.spt-section-title::after{
  content:"";
  flex:1;
  height:1px;
  background:linear-gradient(90deg, rgba(176,108,255,.60), transparent);
}

.spt-lead-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}

.spt-lead-card{
  position:relative;
  min-height:270px;
  display:grid;
  grid-template-columns:190px minmax(0,1fr);
  gap:16px;
  padding:18px 18px 14px;
  border-radius:8px;
  background:
    linear-gradient(180deg, rgba(10,7,16,.60), rgba(5,4,9,.82)),
    url("../images/redesign/ui/spt-member-frame-v1.svg") center/100% 100% no-repeat;
  filter:drop-shadow(0 16px 22px rgba(0,0,0,.38));
}

.spt-ribbon{
  position:absolute;
  left:12px;
  top:20px;
  z-index:2;
  min-width:88px;
  padding:6px 10px;
  transform:rotate(-27deg);
  border:1px solid rgba(190,128,255,.35);
  background:linear-gradient(180deg, rgba(124,55,198,.96), rgba(57,24,94,.96));
  color:#fff;
  font-size:.68rem;
  font-weight:900;
  letter-spacing:.08em;
  text-align:center;
  text-transform:uppercase;
  box-shadow:0 0 16px rgba(150,83,255,.24);
}

.spt-stage{
  min-width:0;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:26px 14px 22px;
  background:url("../images/redesign/ui/spt-stage-v1.svg") center bottom/100% auto no-repeat;
}

.spt-stage img{
  width:112px;
  height:112px;
  object-fit:contain;
  image-rendering:pixelated;
  filter:drop-shadow(0 14px 12px rgba(0,0,0,.78)) drop-shadow(0 0 10px rgba(174,105,255,.24));
}

.spt-lead-info{
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.spt-lead-info h2{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 0 4px;
  color:#f3eaff;
  font-family:var(--font-title, Georgia, serif);
  font-size:1.6rem;
  line-height:1.12;
}

.spt-lead-info h2 a{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.spt-role{
  margin:0 0 12px;
  color:#c791ff;
  font-size:1rem;
  font-weight:700;
}

.spt-role::before{
  content:"⬟";
  margin-right:8px;
  color:#9d55ff;
}

.spt-meta-row{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:34px;
  margin-bottom:12px;
  padding:8px 10px;
  border:1px solid rgba(159,92,246,.13);
  border-radius:5px;
  background:rgba(5,4,10,.48);
}

.spt-last{
  color:#a99fb3;
  font-size:.84rem;
}

.spt-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:24px;
  padding:4px 10px;
  border-radius:999px;
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.spt-badge--online{
  border:1px solid rgba(83,231,135,.45);
  background:rgba(23,92,47,.45);
  color:#7df0a6;
}

.spt-badge--offline{
  border:1px solid rgba(240,90,93,.40);
  background:rgba(96,25,33,.42);
  color:#ff7d82;
}

.spt-specials{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-bottom:12px;
}

.spt-specials span{
  border:1px solid rgba(184,126,255,.22);
  border-radius:5px;
  background:rgba(47,24,78,.55);
  color:#d9c4ee;
  font-size:.72rem;
  font-weight:700;
  padding:5px 9px;
}

.spt-contact-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}

.spt-contact-grid div{
  padding:9px 10px;
  border:1px solid rgba(159,92,246,.14);
  border-radius:5px;
  background:rgba(5,4,10,.36);
}

.spt-contact-grid small{
  display:block;
  margin-bottom:4px;
  color:#c791ff;
  font-size:.68rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.spt-contact-grid strong{
  color:#d9d0e3;
  font-size:.82rem;
  font-weight:700;
}

.spt-member-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
}

.spt-member-card{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  min-height:210px;
  padding:14px 12px 12px;
  border:1px solid rgba(159,92,246,.24);
  border-radius:7px;
  background:
    radial-gradient(circle at 50% 16%, rgba(153,86,255,.16), transparent 42%),
    linear-gradient(180deg, rgba(13,8,22,.82), rgba(5,4,10,.92));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 12px 22px rgba(0,0,0,.22);
}

.spt-member-outfit{
  width:72px;
  height:72px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 0 8px;
  border:1px solid rgba(184,126,255,.20);
  border-radius:50%;
  background:radial-gradient(circle at 50% 65%, rgba(157,85,255,.22), transparent 60%);
}

.spt-member-outfit img{
  width:82px;
  height:82px;
  object-fit:contain;
  image-rendering:pixelated;
  filter:drop-shadow(0 10px 9px rgba(0,0,0,.72));
}

.spt-member-name{
  width:100%;
  margin-bottom:3px;
  text-align:center;
  font-weight:900;
}

.spt-member-name a{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.spt-member-role{
  width:100%;
  min-height:16px;
  margin-bottom:8px;
  color:#c791ff;
  font-size:.70rem;
  font-weight:800;
  text-align:center;
  text-transform:uppercase;
}

.spt-member-footer{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:26px;
  margin-top:auto;
}

.spt-flag img{
  width:19px;
  height:auto;
  display:inline-block;
  vertical-align:middle;
}

.spt-profile{
  width:100%;
  margin-top:11px;
}

.spt-profile a{
  min-height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(184,126,255,.30);
  border-radius:4px;
  background:linear-gradient(180deg, rgba(112,48,181,.90), rgba(52,23,89,.94));
  color:transparent;
  font-size:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
}

.spt-profile a::after{
  content:"View Profile";
  color:#fff;
  font-size:.78rem;
  font-weight:900;
}

.spt-help{
  display:grid;
  grid-template-columns:120px repeat(4,minmax(0,1fr));
  gap:14px;
  align-items:center;
}

.spt-help-emblem{
  min-height:118px;
  background:url("../images/redesign/ui/spt-help-emblem-v1.svg") center/contain no-repeat;
  filter:drop-shadow(0 0 14px rgba(157,85,255,.20));
}

.spt-help article{
  min-height:94px;
  display:grid;
  grid-template-columns:38px minmax(0,1fr);
  grid-template-rows:auto 1fr;
  column-gap:10px;
  align-items:start;
  padding:10px 0;
}

.spt-help-icon{
  grid-row:1 / span 2;
  width:34px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(184,126,255,.28);
  border-radius:50%;
  background:rgba(47,24,78,.55);
  color:#e8d2ff;
}

.spt-help-icon::before{
  font-size:17px;
  text-shadow:0 0 8px rgba(184,126,255,.62);
}

.spt-help-contact::before{ content:"♙"; }
.spt-help-clock::before{ content:"◴"; }
.spt-help-bug::before{ content:"✹"; }
.spt-help-important::before{ content:"✦"; }

.spt-help h3{
  margin:0 0 5px;
  color:#f0e8f8;
  font-family:var(--font-title, Georgia, serif);
  font-size:.86rem;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.spt-help p{
  margin:0;
  color:#bfb4ca;
  font-size:.82rem;
  line-height:1.35;
}

@container (max-width:1100px){
  .spt-stats,
  .spt-member-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .spt-lead-grid,
  .spt-help{
    grid-template-columns:1fr;
  }
}

@container (max-width:720px){
  .spt-hero h1{
    font-size:2.1rem;
  }

  .spt-hero p::before,
  .spt-hero p::after{
    display:none;
  }

  .spt-stats,
  .spt-member-grid,
  .spt-contact-grid{
    grid-template-columns:1fr;
  }

  .spt-lead-card{
    grid-template-columns:1fr;
  }

  .spt-stage{
    min-height:210px;
  }
}