.beta-avatar.is-beta-tester {
    position: relative;
    display: inline-block;
    border-radius: 50%;
    padding: 3px;
    background: linear-gradient(
        90deg,
        #8bc34a,
        #cddc39,
        #ffffff,
        #8bc34a
    );
    background-size: 300% 300%;
    animation: betaShine 4s linear infinite;
    box-shadow: 0 0 12px rgba(139,195,74,.6);
}

.beta-avatar.is-beta-tester img{
    display:block;
    width:100%;
    height:100%;
    border-radius:50%;
}

.beta-avatar::after{
    content:none !important;
    display:none !important;
}

@keyframes betaShine{
    0%{background-position:0% 50%;}
    100%{background-position:300% 50%;}
}


/* =========================================================
   OVERLAYS BETA TESTER AVATAR
   ========================================================= */

.stream-avatar {
    --avatar-size: 44px;

    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    width: var(--avatar-size);
    height: var(--avatar-size);
    vertical-align: middle;
    isolation: isolate;
}

.stream-avatar__ring {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    padding: 2px;
    overflow: hidden;
    border-radius: 50%;
    background: #242a2f;
}

.stream-avatar__image {
    position: relative;
    z-index: 3;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 2px solid #111417;
    border-radius: 50%;
    background: #171b1f;
}

/* Animated beta ring */
.stream-avatar--beta {
    margin-bottom: 5px;
}

.stream-avatar--beta .stream-avatar__ring {
    padding: 3px;
    overflow: visible;
    background:
        conic-gradient(
            from 0deg,
            #5e7b1f,
            #8fd52b,
            #dfff84,
            #ffffff,
            #9af13d,
            #5e7b1f
        );
    box-shadow:
        0 0 0 1px rgba(143, 213, 43, 0.35),
        0 0 10px rgba(143, 213, 43, 0.65),
        0 0 22px rgba(114, 148, 38, 0.32);
    animation:
        betaRingRotate 5s linear infinite,
        betaRingPulse 2.8s ease-in-out infinite;
}

/* Outer glowing halo */
.stream-avatar--beta .stream-avatar__ring::before {
    content: "";
    position: absolute;
    z-index: -2;
    inset: -5px;
    border-radius: inherit;
    background:
        conic-gradient(
            from 180deg,
            transparent 0deg,
            rgba(143, 213, 43, 0.15) 45deg,
            rgba(255, 255, 255, 0.9) 68deg,
            rgba(143, 213, 43, 0.3) 90deg,
            transparent 125deg,
            transparent 360deg
        );
    filter: blur(3px);
    animation: betaHaloRotate 3.8s linear infinite;
}

/* Sparkle effect */
.stream-avatar--beta .stream-avatar__ring::after {
    content: "";
    position: absolute;
    z-index: 5;
    inset: -8px;
    pointer-events: none;
    border-radius: inherit;
    background:
        radial-gradient(circle at 15% 25%, #fff 0 1px, transparent 2px),
        radial-gradient(circle at 85% 20%, #b8ff62 0 1.5px, transparent 3px),
        radial-gradient(circle at 93% 68%, #fff 0 1px, transparent 2.5px),
        radial-gradient(circle at 24% 88%, #8fd52b 0 1.5px, transparent 3px),
        radial-gradient(circle at 5% 58%, #fff 0 1px, transparent 2px);
    animation: betaSparkle 2.2s ease-in-out infinite;
}

.stream-avatar__beta-label {
    position: absolute;
    z-index: 2;
    left: 50%;
    bottom: -7px;
    transform: translateX(-50%);
    transform-origin: 50% 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    min-height: 14px;
    padding: 1px 5px;
    overflow: hidden;
    pointer-events: none;
    border: 2px solid #0b0d0f;
    border-radius: 999px;
    background: linear-gradient(180deg, #c9ff73, #6e9d24);
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.55),
        0 0 8px rgba(143, 213, 43, 0.45);
    color: #071000;
    font-size: 8px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    animation:
        betaLabelFloat 2.5s ease-in-out infinite,
        betaLabelPulse 1.8s ease-in-out infinite;
}

.stream-avatar__beta-label::after {
    content: "";
    position: absolute;
    inset: -3px auto -3px -55%;
    width: 42%;
    pointer-events: none;
    background: linear-gradient(
        100deg,
        transparent,
        rgba(255, 255, 255, 0.85),
        transparent
    );
    transform: skewX(-18deg);
    animation: betaLabelShine 2.2s ease-in-out infinite;
}

/* Username badge */
.stream-beta-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 22px;
    padding: 3px 8px;
    border: 1px solid rgba(143, 213, 43, 0.55);
    border-radius: 999px;
    background:
        linear-gradient(
            135deg,
            rgba(94, 123, 31, 0.22),
            rgba(143, 213, 43, 0.08)
        );
    box-shadow:
        inset 0 0 8px rgba(143, 213, 43, 0.08),
        0 0 8px rgba(143, 213, 43, 0.08);
    color: #9fe842;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.45px;
    text-transform: uppercase;
    white-space: nowrap;
}

.stream-beta-badge svg,
.stream-beta-icon svg {
    width: 13px;
    height: 13px;
    fill: currentColor;
}

.stream-beta-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 19px;
    height: 19px;
    border: 1px solid rgba(143, 213, 43, 0.5);
    border-radius: 50%;
    background: rgba(94, 123, 31, 0.18);
    color: #9fe842;
    box-shadow: 0 0 8px rgba(143, 213, 43, 0.16);
}

@keyframes betaRingRotate {
    to {
        transform: rotate(360deg);
    }
}

@keyframes betaHaloRotate {
    to {
        transform: rotate(-360deg);
    }
}

@keyframes betaRingPulse {
    0%,
    100% {
        box-shadow:
            0 0 0 1px rgba(143, 213, 43, 0.3),
            0 0 9px rgba(143, 213, 43, 0.5),
            0 0 18px rgba(114, 148, 38, 0.25);
    }

    50% {
        box-shadow:
            0 0 0 1px rgba(186, 255, 95, 0.55),
            0 0 15px rgba(143, 213, 43, 0.82),
            0 0 28px rgba(114, 148, 38, 0.46);
    }
}

@keyframes betaSparkle {
    0%,
    100% {
        opacity: 0.3;
        transform: scale(0.95) rotate(0deg);
    }

    50% {
        opacity: 1;
        transform: scale(1.05) rotate(8deg);
    }
}

@keyframes betaLabelFloat {
    0%, 100% {
        transform: translateX(-50%) translateY(0) scale(1);
    }
    50% {
        transform: translateX(-50%) translateY(2px) scale(1.04);
    }
}

@keyframes betaLabelPulse {
    0%, 100% {
        box-shadow:
            0 2px 8px rgba(0, 0, 0, 0.55),
            0 0 7px rgba(143, 213, 43, 0.38);
    }
    50% {
        box-shadow:
            0 3px 10px rgba(0, 0, 0, 0.62),
            0 0 14px rgba(185, 255, 98, 0.82);
    }
}

@keyframes betaLabelShine {
    0%, 28% {
        left: -55%;
        opacity: 0;
    }
    42% {
        opacity: 1;
    }
    68%, 100% {
        left: 115%;
        opacity: 0;
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    .stream-avatar--beta .stream-avatar__ring,
    .stream-avatar--beta .stream-avatar__ring::before,
    .stream-avatar--beta .stream-avatar__ring::after,
    .stream-avatar__beta-label,
    .stream-avatar__beta-label::after {
        animation: none;
    }
}
/* Model form */
.open-modal-btn {
  background: var(--primary);
  color: var(--primary-contrast);
  border: 1px solid var(--primary);
  padding: 14px 26px;
  font-weight: 900;
  text-transform: uppercase;
  cursor: pointer;
}

.ol-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
}

.ol-modal.active {
  display: flex;
}

.ol-modal-box {
  width: 100%;
  max-width: 560px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px;
  position: relative;
  color: var(--text);
}

.ol-modal-close {
  position: absolute;
  top: 16px;
  right: 18px;
  background: #151d18;
  color: var(--text);
  border: 1px solid var(--border);
  width: 36px;
  height: 36px;
  cursor: pointer;
  font-size: 24px;
}

.ol-modal-tag {
  color: var(--primary);
  text-transform: uppercase;
  font-weight: 900;
  letter-spacing: 0.12em;
  font-size: 13px;
  margin-bottom: 12px;
}

.ol-modal-box h2 {
  margin: 0 0 12px;
  font-size: 36px;
  text-transform: uppercase;
  letter-spacing: -1px;
}

.ol-modal-box p {
  color: var(--muted);
  line-height: 1.6;
}

.ol-modal-preview {
  margin: 24px 0;
  border: 1px solid var(--border);
  background: #080b09;
  padding: 14px;
}

.preview-header,
.preview-footer {
  border: 1px solid var(--primary-hover);
  padding: 10px;
  text-align: center;
  color: var(--primary);
  font-weight: 900;
  text-transform: uppercase;
}

.preview-screen {
  height: 180px;
  margin: 12px 0;
  border: 1px solid var(--border);
  background: linear-gradient(135deg, var(--surface-2), #080b09);
  display: grid;
  place-items: center;
  color: #6f7a72;
  font-weight: 900;
}

.preview-footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.ol-modal-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.modal-btn {
  padding: 13px 22px;
  border-radius: 3px;
  text-transform: uppercase;
  font-weight: 900;
  cursor: pointer;
  text-decoration: none;
}

.modal-btn.primary {
  background: var(--primary);
  border: 1px solid var(--primary);
  color: var(--primary-contrast);
}

.modal-btn.secondary {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
}

/* MODEL END */

:root{
  --bg:#0b0d0f;
  --surface:#111417;
  --surface-2:#171b1f;
  --surface-3:#1d2227;
  --text:#f4f6f8;
  --muted:#9aa3ad;
  --border:#242a2f;
  --primary:#5e7b1f;
  --primary-hover:#729426;
  --primary-soft:rgba(94,123,31,.12);
  --primary-border:rgba(94,123,31,.38);
  --primary-contrast:#ffffff;
  --shadow:0 18px 50px rgba(0,0,0,.32);
  --radius:18px;
  --max:1240px;

  /* legacy aliases */
  --green:var(--primary);
  --green2:var(--primary-hover);
  --line:var(--border);
  --panel:var(--surface);
  --panel2:var(--surface-2);
  --panel3:var(--surface-3);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:#0b0d0f;
  color:var(--text);
  font-family:Inter,system-ui,sans-serif;
}
a{text-decoration:none;color:inherit}
.container{width:min(var(--max),calc(100% - 48px));margin-inline:auto}
.green{color:var(--primary)}
.header{
  border-bottom:1px solid var(--border);
  background:rgba(11,13,15,.96);
  position:sticky;
  top:0;
  z-index:10;
  backdrop-filter:blur(14px);
  box-shadow:0 12px 40px rgba(0,0,0,.28);
}
.nav{height:86px;display:flex;align-items:center;justify-content:space-between;gap:26px}
.logo{display:flex;align-items:center;gap:14px;font-family:"Barlow Condensed",sans-serif;font-size:28px;font-weight:900;letter-spacing:.5px}
.logo-icon{
  width:52px;height:38px;display:grid;place-items:center;
  transform:skew(-12deg);
  border:3px solid var(--text);
  color:var(--text);
  font-weight:900;
  position:relative;
}
.logo-icon:after{
  content:"";
  position:absolute;
  inset:5px;
  border-left:8px solid var(--primary);
}
.nav-links{display:flex;gap:42px;font-family:"Barlow Condensed";font-size:17px;text-transform:uppercase;font-weight:800}
.nav-links a:hover{color:var(--primary)}
.nav-actions{display:flex;align-items:center;gap:24px}
.icon-link,.cart{font-size:24px;color:var(--muted);position:relative}
.cart span{
  position:absolute;right:-9px;top:-9px;
  background:var(--primary);color:var(--primary-contrast);border-radius:50%;
  width:18px;height:18px;font-size:11px;display:grid;place-items:center;font-weight:900;
}
.login-btn{
  background:var(--primary);
  color:var(--primary-contrast);
  padding:15px 27px;
  border-radius:12px;
  font-family:"Barlow Condensed";
  font-weight:900;
  text-transform:uppercase;
}
.menu-btn{display:none;background:none;border:1px solid var(--border);padding:10px}
.menu-btn span{display:block;width:24px;height:2px;background:var(--text);margin:5px}

.hero{
  display:grid;
  grid-template-columns: .82fr 1.18fr;
  gap:64px;
  align-items:center;
  padding:62px 0 44px;
}
.hero h1{
  font-family:"Barlow Condensed";
  text-transform:uppercase;
  font-size:clamp(52px,6vw,76px);
  line-height:.94;
  letter-spacing:1px;
  margin:0 0 25px;
}
.hero h1 span{color:var(--primary)}
.hero p{color:#d0d4d0;font-size:18px;line-height:1.65;max-width:430px}
.hero-buttons{display:flex;gap:18px;flex-wrap:wrap;margin:34px 0 48px}
.btn{
  min-height:47px;
  padding:0 24px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  font-family:"Barlow Condensed";
  text-transform:uppercase;
  font-weight:900;
  border-radius:12px;
  letter-spacing:.4px;
}
.primary{background:var(--primary);color:var(--primary-contrast);border:1px solid var(--primary)}
.outline{background:transparent;border:1px solid #727a72;color:var(--text)}
.small{min-height:42px;font-size:15px;padding-inline:20px}
.hero-stats{display:flex;gap:36px;flex-wrap:wrap}
.hero-stats div{display:flex;gap:14px;align-items:center}
.hero-stats strong{color:var(--primary);font-size:28px}
.hero-stats p{margin:0;font-size:13px;text-transform:uppercase;line-height:1.25;color:var(--muted)}
.hero-stats b{color:var(--text)}

.stream-preview{
  border:1px solid var(--border);
  background:#0d0f0e;
  padding:14px;
  min-height:445px;
}
.top-bar,.bottom-alerts{
  display:grid;
  grid-template-columns:1fr 1.3fr 1fr;
  gap:10px;
  font-family:"Barlow Condensed";
  text-align:center;
  text-transform:uppercase;
  color:var(--muted);
  font-size:12px;
}
.bottom-alerts{grid-template-columns:repeat(4,1fr);margin-top:12px}
.top-bar>div,.bottom-alerts>div{
  border:1px solid #1d3d25;
  background:linear-gradient(135deg,var(--surface-2),#090b0a);
  padding:8px;
}
.nameplate{font-size:28px!important;color:var(--text)!important;font-weight:900}
.preview-scene{
  height:330px;
  position:relative;
  overflow:hidden;
  border:1px solid var(--border);
  background:
    linear-gradient(to top,rgba(5,7,6,.65),transparent),
    linear-gradient(145deg,#253020 0%,var(--surface-2) 46%,#343b35 100%);
}
.mountains{
  position:absolute;inset:0;
  background:
    radial-gradient(circle at 70% 35%,rgba(255,255,255,.16),transparent 12%),
    linear-gradient(145deg, transparent 0 35%, rgba(0,0,0,.42) 35% 45%, transparent 45%),
    linear-gradient(25deg, #172418 0 28%, #3c413c 28% 40%, #0f1512 40% 100%);
  opacity:.75;
}
.webcam,.chat{
  position:absolute;
  border:2px solid var(--primary-hover);
  background:rgba(6,8,7,.88);
  color:#69736c;
  font-family:"Barlow Condensed";
  font-weight:900;
  display:grid;place-items:center;
}
.webcam{left:18px;bottom:28px;width:185px;height:95px}
.chat{right:18px;top:110px;width:150px;height:170px;font-size:12px;place-items:start;padding:12px}

.block{
  border:1px solid var(--border);
  background:rgba(13,16,15,.78);
  border-radius:14px;
  padding:28px 20px 18px;
  margin-top:4px;
}
.block-head{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  margin-bottom:22px;
}
.block-head h2,.trusted h2,.live h2,.newsletter h2{
  font-family:"Barlow Condensed";
  text-transform:uppercase;
  font-size:34px;
  margin:0;
}
.block-head h2:after{
  content:"";
  display:block;
  width:50px;height:5px;
  background:var(--primary);
  margin:12px auto 0;
}
.block-head a{justify-self:end}
.products{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.product-card{
  border:1px solid var(--border);
  background:linear-gradient(180deg,#111614,#0a0d0b);
}
.product-art{
  height:220px;
  border:1px solid #2e3831;
  margin:9px;
  display:grid;
  place-items:center;
  font-family:"Barlow Condensed";
  text-transform:uppercase;
  font-size:38px;
  font-weight:900;
  text-align:center;
  line-height:.9;
  background:#080b09;
  overflow:hidden;
}
.product-art span{color:var(--primary)}
.art-soon{
  background:
    linear-gradient(135deg,rgba(94,123,31,.22),transparent 24%),
    linear-gradient(315deg,rgba(94,123,31,.22),transparent 24%),
    #0b0e0c;
}
.art-full .mini-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:90%;font-size:20px;
}
.mini-grid span{border:1px solid var(--primary-hover);padding:18px 8px;background:#101511}
.art-custom{
  background:
    linear-gradient(135deg,transparent 0 35%,rgba(94,123,31,.35) 35% 37%,transparent 37%),
    #080b09;
}
.product-body{padding:0 17px 17px}
.product-body h3{
  font-family:"Barlow Condensed";
  text-transform:uppercase;
  font-size:25px;
  margin:8px 0;
}
.product-body p{color:var(--muted);font-size:14px;min-height:45px}
.product-footer{display:flex;align-items:center;justify-content:space-between;gap:14px}
.product-footer strong{
  font-family:"Barlow Condensed";
  color:var(--primary);
  font-size:31px;
  text-transform:uppercase;
}

.feature-strip{
  margin-top:26px;
  border:1px solid var(--border);
  background:linear-gradient(180deg,#111614,#090c0a);
  border-radius:18px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  padding:28px 48px;
}
.feature-strip div{display:grid;grid-template-columns:auto 1fr;column-gap:18px;align-items:center}
.feature-icon{grid-row:span 2;color:var(--primary);font-size:48px}
.feature-strip h3{
  margin:0;
  font-family:"Barlow Condensed";
  text-transform:uppercase;
  font-size:23px;
}
.feature-strip p{margin:4px 0 0;color:var(--muted);font-size:14px}

.split{
  display:grid;
  grid-template-columns:.8fr 1.7fr;
  gap:26px;
  margin-top:32px;
}
.panel{
  border:1px solid var(--border);
  background:rgba(13,16,15,.82);
  border-radius:18px;
  padding:28px 32px;
}
.trusted p{color:var(--muted)}
.numbers{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:28px 0}
.numbers b{
  font-family:"Barlow Condensed";
  color:var(--primary);
  display:block;
  font-size:33px;
}
.numbers span{font-size:12px;text-transform:uppercase;color:var(--muted)}
.panel-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}
.dot{width:14px;height:14px;background:var(--primary);display:inline-block;border-radius:50%;margin-right:10px}
.panel-title button{background:#0a0d0b;color:var(--text);border:1px solid var(--border);width:34px;height:34px}
.streams{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.streams article{
  border:1px solid var(--border);
  background:#090c0a;
}
.stream-thumb{height:150px;background:#1a211d;border-bottom:1px solid var(--border)}
.thumb-one{background:linear-gradient(145deg,#2c3a2f,#111614 60%,#59605a)}
.thumb-two{background:linear-gradient(145deg,#19251e,#643629 52%,#20242c)}
.thumb-three{background:linear-gradient(145deg,#4a504e,#111614 60%,#253029)}
.streams h3{margin:12px 14px 0;font-size:16px}
.streams p{margin:2px 14px 14px;color:var(--muted);font-size:13px}

.newsletter{
  margin-top:34px;
  border:1px solid var(--border);
  background:linear-gradient(180deg,#111614,#090c0a);
  border-radius:18px;
  padding:30px 92px;
  display:grid;
  grid-template-columns:auto 1fr 1.6fr;
  gap:32px;
  align-items:center;
}
.mail-icon{font-size:58px;color:var(--primary)}
.newsletter p{margin:4px 0 0;color:var(--muted)}
.newsletter form{display:flex}
.newsletter input{
  flex:1;background:#0b0d0f;border:1px solid #606860;color:var(--text);padding:0 20px;font:inherit;
}
.newsletter button{border-radius:0}

.footer{
  padding:36px 0 24px;
}
.footer-main{
  border-top:1px solid var(--border);
  padding-top:28px;
  display:grid;
  grid-template-columns:1.8fr repeat(4,1fr);
  gap:46px;
}
.footer p,.footer a{color:var(--muted);font-size:14px}
.footer h3{
  font-family:"Barlow Condensed";
  text-transform:uppercase;
  font-size:19px;
  margin:0 0 14px;
}
.footer a{display:block;margin:8px 0}
.footer-logo{margin-bottom:18px}
.socials{display:flex;gap:18px}
.socials a{color:var(--primary);font-weight:900}
.footer-bottom{
  border-top:1px solid var(--border);
  margin-top:28px;
  padding-top:16px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.footer-bottom span{
  border:1px solid var(--border);
  padding:5px 10px;
  border-radius:14px;
  color:var(--text);
  font-size:12px;
}

@media(max-width:1050px){
  .hero,.split{grid-template-columns:1fr}
  .products,.feature-strip,.streams{grid-template-columns:1fr}
  .newsletter{grid-template-columns:1fr;padding:28px}
  .footer-main{grid-template-columns:1fr 1fr}
}
@media(max-width:800px){
  .container{width:min(100% - 28px,var(--max))}
  .nav{height:auto;min-height:78px;flex-wrap:wrap}
  .menu-btn{display:block}
  .nav-links{
    display:none;
    order:4;
    width:100%;
    flex-direction:column;
    gap:12px;
    padding:16px 0;
  }
  .nav-links.open{display:flex}
  .nav-actions{margin-left:auto}
  .icon-link,.cart{display:none}
  .stream-preview{min-height:auto}
  .preview-scene{height:280px}
  .top-bar,.bottom-alerts{grid-template-columns:1fr}
  .block-head{grid-template-columns:1fr;text-align:center;gap:14px}
  .block-head a{justify-self:center}
  .product-footer{flex-direction:column;align-items:flex-start}
  .footer-main,.footer-bottom{grid-template-columns:1fr;display:grid}
}

/*MOBILE */
.mobile-account-links {
    display: none;
}

@media (max-width: 850px) {
    .nav-links {
        display: none;
    }

    .nav-links.active {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 20px;
        right: 20px;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 16px;
        padding: 16px;
        z-index: 9999;
    }

    .nav {
        position: relative;
    }

    .nav-links a {
        padding: 12px;
        border-radius: 10px;
    }

    .mobile-account-links {
        display: block;
        border-top: 1px solid var(--border);
        margin-top: 10px;
        padding-top: 10px;
    }

    .nav-actions {
        display: none;
    }
}

/* MAIN FORUM */

.forum-wrap {
    padding-bottom: 70px;
}

.forum-hero {
    padding: 70px 0 40px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
}

.forum-hero span {
    color: var(--primary);
    font-weight: 900;
    text-transform: uppercase;
}

.forum-hero h1 {
    color: #fff;
    font-size: 48px;
    margin: 12px 0;
}

.forum-hero p {
    color: var(--muted);
}

.forum-grid {
    display: grid;
    gap: 18px;
    margin-top: 35px;
}

.forum-category-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 25px;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    text-decoration: none;
}

.forum-category-card:hover {
    border-color: var(--primary);
}

.forum-category-card h2 {
    color: #fff;
    margin-bottom: 8px;
}

.forum-category-card p {
    color: var(--muted);
}

.forum-category-card strong {
    color: var(--primary);
    white-space: nowrap;
}

  /* FORUM CATEGORY */
  .forum-form,
.forum-notice,
.forum-empty,
.forum-thread-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 24px;
}

.forum-form h2,
.forum-empty h3 {
    color: #fff;
    margin-bottom: 20px;
}

.forum-thread-list {
    display: grid;
    gap: 14px;
}

.forum-thread-card {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    text-decoration: none;
}

.forum-thread-card:hover {
    border-color: var(--primary);
}

.forum-thread-card h2 {
    color: #fff;
    margin-bottom: 8px;
}

.forum-thread-card p,
.forum-empty p,
.forum-notice p {
    color: var(--muted);
}

.thread-meta {
    color: var(--primary);
    font-weight: 800;
    display: grid;
    gap: 6px;
    text-align: right;
}

  /* CREATE THREAD */
  
.forum-post-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 24px;
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 24px;
}

.forum-user {
    border-right: 1px solid var(--border);
    padding-right: 20px;
    color: #fff;
}

.forum-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--primary);
    color: var(--primary-contrast);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 28px;
    margin-bottom: 12px;
    overflow: hidden;
}

.forum-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.forum-post-body p {
    color: #d6ded9;
    line-height: 1.7;
}

.forum-post-body small {
    display: block;
    margin-top: 18px;
    color: #7d8c82;
}

@media (max-width: 768px) {
    .forum-post-card {
        grid-template-columns: 1fr;
    }

    .forum-user {
        border-right: 0;
        border-bottom: 1px solid var(--border);
        padding-right: 0;
        padding-bottom: 15px;
    }
}

  /* CREATE REPLY (FORUM) */
  .forum-page {
    padding: 45px 0 80px;
    background:
        radial-gradient(circle at top right, rgba(94,123,31,.12), transparent 35%),
        var(--bg);
}

.forum-hero-card {
    min-height: 260px;
    border: 1px solid var(--border);
    border-radius: 24px;
    background:
        linear-gradient(135deg, rgba(7,16,11,.95), rgba(3,6,5,.95)),
        url('/assets/img/default-profile-banner.png');
    background-size: cover;
    background-position: center;
    padding: 55px 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
}

.forum-kicker {
    color: var(--primary);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.forum-hero-card h1 {
    color: #fff;
    font-size: 56px;
    margin: 18px 0 14px;
}

.forum-hero-card h1 strong {
    color: var(--primary);
}

.forum-hero-card p {
    color: #b8c5bd;
    font-size: 18px;
}

.forum-hero-icon {
    font-size: 110px;
    color: var(--primary);
    opacity: .65;
}

.forum-section-title {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 35px;
    margin-bottom: 18px;
}

.forum-section-title span {
    width: 28px;
    height: 3px;
    background: var(--primary);
}

.forum-section-title h2 {
    color: #fff;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.forum-category-list {
    display: grid;
    gap: 12px;
}

.forum-row {
    background: linear-gradient(135deg, var(--surface), #07100b);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 22px 26px;
    display: grid;
    grid-template-columns: 82px 1fr 260px 30px;
    align-items: center;
    gap: 24px;
    text-decoration: none;
    transition: .2s ease;
}

.forum-row:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
}

.forum-row-icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: #08100b;
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
}

.forum-row-main h3 {
    color: #fff;
    font-size: 22px;
    margin-bottom: 6px;
}

.forum-row-main p {
    color: var(--muted);
}

.forum-row-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    text-align: center;
}

.forum-row-stats div {
    border-left: 1px solid var(--border);
}

.forum-row-stats strong {
    display: block;
    color: var(--primary);
    font-size: 28px;
    font-weight: 900;
}

.forum-row-stats span {
    color: var(--muted);
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 800;
}

.forum-row-arrow {
    color: #fff;
    font-size: 42px;
    opacity: .75;
}

.forum-cta {
    margin-top: 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 25px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.forum-cta h3 {
    color: #fff;
    margin-bottom: 6px;
}

.forum-cta p {
    color: var(--muted);
}

.forum-cta a {
    background: var(--primary);
    color: var(--primary-contrast);
    padding: 14px 26px;
    border-radius: 12px;
    font-weight: 900;
    text-decoration: none;
}

@media (max-width: 900px) {
    .forum-hero-card {
        padding: 35px 25px;
        min-height: 220px;
    }

    .forum-hero-card h1 {
        font-size: 40px;
    }

    .forum-hero-icon {
        display: none;
    }

    .forum-row {
        grid-template-columns: 60px 1fr;
    }

    .forum-row-stats,
    .forum-row-arrow {
        display: none;
    }

    .forum-cta {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
    }
}

.thread-controls{
    display:flex;
    gap:10px;
    margin-bottom:20px;
}

.thread-controls a{
    background:#101413;
    border:1px solid var(--border);
    color:#fff;
    text-decoration:none;
    padding:10px 16px;
    border-radius:14px;
    font-weight:800;
}

.thread-controls a:hover{
    border-color:var(--primary);
}

 /* FORUM REPLY */ 
 

.reply-box{
background:linear-gradient(135deg,var(--surface),#07100b);
border:1px solid var(--border);
border-radius:20px;
overflow:hidden;
margin-top:20px;
}

.reply-header{
padding:20px 24px;
border-bottom:1px solid var(--border);
}

.reply-header h3{
color:#fff;
margin:0 0 4px;
}

.reply-header span{
color:#8a9a90;
font-size:14px;
}

.reply-toolbar{
display:flex;
gap:8px;
padding:16px 20px;
border-bottom:1px solid var(--border);
}

.reply-toolbar button{
width:38px;
height:38px;
border-radius:14px;
border:1px solid var(--border);
background:#101413;
color:#fff;
cursor:pointer;
}

.reply-toolbar button:hover{
  border-color:var(--primary);
  color:var(--primary);
}

.reply-editor{
width:100%;
min-height:220px;
background:#070a09;
border:0;
color:#fff;
resize:vertical;
padding:24px;
font-size:15px;
outline:none;
}

.reply-editor::placeholder{
color:#6f7f76;
}

.reply-footer{
display:flex;
justify-content:space-between;
align-items:center;
padding:18px 24px;
border-top:1px solid var(--border);
}

.reply-footer span{
color:#7d8c82;
font-size:13px;
}

.reply-submit{
background:var(--primary);
color:var(--primary-contrast);
border:0;
border-radius:12px;
padding:12px 26px;
font-weight:900;
cursor:pointer;
}

.reply-submit:hover{
  background:var(--primary-hover);
}

@media(max-width:768px){

.reply-footer{
    flex-direction:column;
    gap:12px;
    align-items:flex-start;
}

.reply-submit{
    width:100%;
}
}
.logo{
    position: relative;
    display: inline-flex;
    align-items: center;
}

.beta-badge{
    position: absolute;
    top: 2px;
    right: -12px;

    background: #c93131;
    color: #fff;

    font-size: 10px;
    font-weight: 900;
    line-height: 1;

    padding: 2px 4px;
    border-radius: 3px;

    text-transform: uppercase;
    letter-spacing: .05em;

    z-index: 10;
    user-select: none;
}


  /* ZOOM */
.zoom-hero {
  padding: 90px 0 50px;
  background:
    radial-gradient(circle at top right, rgba(94,123,31,.25), transparent 35%),
    var(--bg);
  color: #fff;
  border-bottom: 1px solid rgba(94,123,31,.25);
}

.zoom-hero h1 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(42px, 7vw, 86px);
  text-transform: uppercase;
  margin: 10px 0;
}

.eyebrow {
  color: var(--primary);
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.zoom-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
  padding: 50px 0;
}

.zoom-card {
  background: var(--surface);
  border: 1px solid rgba(94,123,31,.35);
  border-radius: 22px;
  padding: 26px;
  color: #fff;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
}

.zoom-card h2 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 32px;
  text-transform: uppercase;
}

.zoom-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px 0;
}

.zoom-meta span {
  background: rgba(94,123,31,.16);
  border: 1px solid rgba(94,123,31,.35);
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 13px;
}

.zoom-btn,
.btn-primary,
.mini-btn {
  display: inline-block;
  background: var(--primary);
  color: #fff !important;
  border: 0;
  border-radius: 12px;
  padding: 12px 18px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}

.mini-btn {
  padding: 8px 12px;
  font-size: 13px;
}

.admin-form {
  display: grid;
  gap: 14px;
}

.admin-form input,
.admin-form textarea {
  background: #080b08;
  color: #fff;
  border: 1px solid rgba(94,123,31,.35);
  border-radius: 12px;
  padding: 13px;
}
.zoom-password{
    margin-top:10px;
    padding:8px 12px;
    background:rgba(94,123,31,.15);
    border:1px solid rgba(94,123,31,.35);
    border-radius:8px;
    font-weight:600;
}

 /*store*/
 
 .pack-detail {
    display: grid;
    grid-template-columns: minmax(280px, 520px) 1fr;
    gap: 40px;
    align-items: start;
}

.pack-hero-small img {
    width: 100%;
    max-height: 360px;
    object-fit: cover;
    border-radius: 20px;
}

@media (max-width: 800px) {
    .pack-detail {
        grid-template-columns: 1fr;
    }

    .pack-hero-small img {
        max-height: 260px;
    }
}

.admin-toolbar{
    position:sticky;
    top:0;
    z-index:9999;
    background:linear-gradient(
        90deg,
        #111,
        #1d2b0e
    );
    border-bottom:1px solid rgba(94,123,31,.5);
    backdrop-filter:blur(12px);
}

.admin-toolbar-inner{
    max-width:1600px;
    margin:auto;
    display:flex;
    align-items:center;
    gap:14px;
    padding:10px 20px;
    overflow-x:auto;
}

.admin-toolbar-inner a{
    color:#fff;
    text-decoration:none;
    font-size:13px;
    font-weight:800;
    white-space:nowrap;
}

.admin-toolbar-inner a:hover{
    color:var(--primary-hover);
}

.admin-badge{
    background:var(--primary);
    color:#fff;
    padding:6px 12px;
    border-radius:999px;
    font-size:12px;
    font-weight:900;
    margin-right:10px;
}

.success-message{
    display:flex;
    flex-direction:column;
    gap:4px;
    margin:15px 0;
    padding:16px 20px;
    border-radius:14px;
    background:rgba(94,123,31,.15);
    border:1px solid rgba(94,123,31,.35);
    color:#d6f5c1;
    font-weight:600;
}

.success-message strong{
    color:var(--primary-hover);
    font-size:15px;
}



/* CLEAN PROFESSIONAL BLACK/GREEN THEME OVERRIDES */
body{
  background:#0b0d0f;
}

.green,
.hero h1 span,
.hero-stats strong,
.product-art span,
.product-footer strong,
.feature-icon,
.numbers b,
.mail-icon,
.socials a,
.forum-hero span,
.forum-category-card strong,
.thread-meta,
.forum-kicker,
.forum-hero-card h1 strong,
.forum-hero-icon,
.forum-row-icon,
.forum-row-stats strong,
.eyebrow,
.success-message strong{
  color:var(--primary) !important;
}

.header,
.admin-toolbar{
  background:rgba(11,13,15,.96);
  border-bottom:1px solid var(--border);
  box-shadow:0 12px 40px rgba(0,0,0,.28);
  backdrop-filter:blur(14px);
}

.ol-modal-box,
.block,
.panel,
.product-card,
.feature-strip,
.newsletter,
.forum-category-card,
.forum-form,
.forum-notice,
.forum-empty,
.forum-thread-card,
.forum-post-card,
.forum-row,
.reply-box,
.zoom-card,
.stream-preview,
.streams article,
.forum-cta{
  background:var(--surface) !important;
  border:1px solid var(--border) !important;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

.product-art,
.preview-screen,
.preview-scene,
.stream-thumb,
.reply-editor,
.newsletter input,
.admin-form input,
.admin-form textarea{
  background:#0b0d0f !important;
  border-color:var(--border) !important;
}

.top-bar > div,
.bottom-alerts > div,
.reply-toolbar button,
.thread-controls a,
.panel-title button,
.modal-btn.secondary,
.outline{
  background:transparent !important;
  border:1px solid var(--border) !important;
}

.btn,
.primary,
.login-btn,
.zoom-btn,
.btn-primary,
.mini-btn,
.modal-btn.primary,
.reply-submit,
.forum-cta a,
.open-modal-btn{
  background:var(--primary) !important;
  color:var(--primary-contrast) !important;
  border:1px solid var(--primary) !important;
  border-radius:12px;
  transition:.18s ease;
}

.btn:hover,
.primary:hover,
.login-btn:hover,
.zoom-btn:hover,
.btn-primary:hover,
.mini-btn:hover,
.modal-btn.primary:hover,
.reply-submit:hover,
.forum-cta a:hover,
.open-modal-btn:hover{
  background:var(--primary-hover) !important;
  border-color:var(--primary-hover) !important;
  transform:translateY(-1px);
}

.outline:hover,
.modal-btn.secondary:hover,
.thread-controls a:hover,
.reply-toolbar button:hover,
.panel-title button:hover,
.product-card:hover,
.forum-category-card:hover,
.forum-thread-card:hover,
.forum-row:hover{
  border-color:var(--primary) !important;
}

input,
textarea,
select{
  background:#0b0d0f;
  color:var(--text);
  border:1px solid var(--border);
}

input:focus,
textarea:focus,
select:focus{
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 0 3px var(--primary-soft);
}

.nav-links a{
  position:relative;
}

.nav-links a:hover{
  color:var(--text);
}

.nav-links a.active::after,
.nav-links a:hover::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-10px;
  height:3px;
  background:var(--primary);
  border-radius:999px;
}

.cart span,
.admin-badge,
.forum-avatar,
.dot{
  background:var(--primary) !important;
  color:var(--primary-contrast) !important;
}

.art-soon,
.art-custom,
.thumb-one,
.thumb-two,
.thumb-three,
.forum-page,
.zoom-hero,
.forum-hero{
  background:var(--bg) !important;
}

.forum-hero-card{
  border-color:var(--border);
}

@media (max-width:850px){
  .nav-links.active,
  .nav-links.open{
    background:var(--surface) !important;
    border-color:var(--border) !important;
    box-shadow:var(--shadow);
  }

  .nav-links a:hover::after,
  .nav-links a.active::after{
    display:none;
  }

  .nav-links a:hover{
    background:var(--primary-soft);
  }
}

/* =========================================================
   BETA AVATAR ALIGNMENT HOTFIX
   Keeps the glow centred and the BETA tab readable.
   ========================================================= */
.beta-avatar,
.beta-avatar.is-beta-tester {
    box-sizing: border-box !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: none !important;
    box-shadow: none !important;
    animation: none !important;
}

.beta-avatar__image {
    box-sizing: border-box !important;
    z-index: 4 !important;
}

.beta-avatar__animated-ring {
    z-index: 1 !important;
    inset: -2px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    pointer-events: none !important;
    transform-origin: 50% 50% !important;
}

.beta-avatar__animated-ring::before {
    content: "" !important;
    position: absolute !important;
    inset: -4px !important;
    border-radius: 50% !important;
    background: none !important;
    filter: none !important;
    box-shadow:
        0 0 8px rgba(158, 228, 60, .62),
        0 0 16px rgba(114, 148, 38, .32) !important;
    opacity: .72;
    transform: none !important;
    animation: overlaysBetaHaloPulse 2.4s ease-in-out infinite !important;
}

.beta-avatar__label {
    z-index: 7 !important;
    left: 50% !important;
    right: auto !important;
    bottom: -8px !important;
    min-width: 30px !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
}

.beta-avatar__online {
    z-index: 8 !important;
}

.stream-avatar,
.stream-avatar__ring,
.stream-avatar__image {
    box-sizing: border-box;
}

.stream-avatar--beta .stream-avatar__ring {
    transform-origin: 50% 50%;
}

.stream-avatar__beta-label {
    z-index: 7;
}

.stream-avatar-wrap.is-beta-tester {
    overflow: visible !important;
    isolation: isolate;
}

.stream-avatar-wrap.is-beta-tester > img {
    z-index: 4 !important;
}

.stream-avatar-wrap.is-beta-tester .stream-channel-beta-ring {
    z-index: 1 !important;
    inset: -4px !important;
    padding: 2px;
    box-sizing: border-box;
    border-radius: 19px !important;
    background: conic-gradient(
        from 0deg,
        #5e7b1f,
        #9ee43c,
        #f5ffd8,
        #ffffff,
        #b9ff62,
        #729426,
        #5e7b1f
    ) !important;
    filter: none !important;
    box-shadow:
        0 0 8px rgba(158, 228, 60, .58),
        0 0 18px rgba(114, 148, 38, .3) !important;
    transform-origin: 50% 50% !important;
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

.stream-avatar-beta-label {
    z-index: 7 !important;
    top: -7px !important;
    right: -10px !important;
}

.stream-avatar-live {
    z-index: 8 !important;
}

@keyframes overlaysBetaHaloPulse {
    0%, 100% {
        opacity: .48;
        transform: scale(.98);
    }
    50% {
        opacity: .9;
        transform: scale(1.04);
    }
}

@media (prefers-reduced-motion: reduce) {
    .beta-avatar__animated-ring::before {
        animation: none !important;
    }
}

/* Keep the channel ring geometry locked to the rounded avatar. */
.stream-avatar-wrap.is-beta-tester .stream-channel-beta-ring {
    overflow: hidden !important;
    pointer-events: none !important;
    background: transparent !important;
    animation: none !important;
}

.stream-avatar-wrap.is-beta-tester .stream-channel-beta-ring::before {
    content: "";
    position: absolute;
    inset: -55%;
    background: conic-gradient(
        from 0deg,
        #5e7b1f,
        #9ee43c,
        #f5ffd8,
        #ffffff,
        #b9ff62,
        #729426,
        #5e7b1f
    );
    transform-origin: 50% 50%;
    animation: overlaysBetaRingSpin 4.8s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    .stream-avatar-wrap.is-beta-tester .stream-channel-beta-ring::before {
        animation: none !important;
    }
}


/* ==========================================================
   OVERLAYS ROLE AVATAR IDENTITIES
   Priority: OWNER > ADMIN > MODERATOR > BETA
   ========================================================== */
.role-avatar,
.stream-avatar-wrap.has-avatar-identity {
    --identity-accent: #9ee43c;
    --identity-accent-2: #efffd3;
    --identity-accent-3: #5e7b1f;
    --identity-label-text: #071000;
    --identity-glow: rgba(158, 228, 60, .58);
    --identity-soft-glow: rgba(114, 148, 38, .28);
    --identity-ring-speed: 4.8s;
}

.role-avatar.is-role-owner,
.stream-avatar-wrap.is-role-owner {
    --identity-accent: #f2b84b;
    --identity-accent-2: #fff1a8;
    --identity-accent-3: #9b5e00;
    --identity-label-text: #211300;
    --identity-glow: rgba(255, 196, 73, .72);
    --identity-soft-glow: rgba(176, 103, 0, .34);
    --identity-ring-speed: 7s;
}

.role-avatar.is-role-admin,
.stream-avatar-wrap.is-role-admin {
    --identity-accent: #b979ff;
    --identity-accent-2: #f0dcff;
    --identity-accent-3: #7131ba;
    --identity-label-text: #160421;
    --identity-glow: rgba(185, 121, 255, .7);
    --identity-soft-glow: rgba(113, 49, 186, .34);
    --identity-ring-speed: 6.2s;
}

.role-avatar.is-role-moderator,
.stream-avatar-wrap.is-role-moderator {
    --identity-accent: #4fc3ff;
    --identity-accent-2: #d9f4ff;
    --identity-accent-3: #146f9f;
    --identity-label-text: #02131e;
    --identity-glow: rgba(79, 195, 255, .7);
    --identity-soft-glow: rgba(20, 111, 159, .34);
    --identity-ring-speed: 5.6s;
}

.role-avatar.is-role-beta,
.stream-avatar-wrap.is-role-beta {
    --identity-accent: #9ee43c;
    --identity-accent-2: #efffd3;
    --identity-accent-3: #5e7b1f;
    --identity-label-text: #071000;
    --identity-glow: rgba(158, 228, 60, .68);
    --identity-soft-glow: rgba(114, 148, 38, .32);
    --identity-ring-speed: 4.8s;
}

.role-avatar {
    --role-avatar-size: 32px;
    position: relative !important;
    width: var(--role-avatar-size) !important;
    height: var(--role-avatar-size) !important;
    min-width: var(--role-avatar-size) !important;
    flex: 0 0 var(--role-avatar-size) !important;
    display: inline-grid !important;
    place-items: center !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    overflow: visible !important;
    isolation: isolate;
    vertical-align: middle;
    background: none !important;
    box-shadow: none !important;
}

.role-avatar__image {
    position: relative !important;
    z-index: 4 !important;
    width: calc(var(--role-avatar-size) - 4px) !important;
    height: calc(var(--role-avatar-size) - 4px) !important;
    min-width: 0 !important;
    display: block !important;
    box-sizing: border-box !important;
    object-fit: cover !important;
    border: 2px solid #111417 !important;
    border-radius: 50% !important;
    background: #171b1f !important;
    box-shadow: none !important;
}

.role-avatar__animated-ring {
    position: absolute;
    z-index: 1;
    inset: -2px;
    overflow: visible;
    pointer-events: none;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        var(--identity-accent-3),
        var(--identity-accent),
        var(--identity-accent-2),
        #ffffff,
        var(--identity-accent),
        var(--identity-accent-3)
    );
    box-shadow:
        0 0 8px var(--identity-glow),
        0 0 17px var(--identity-soft-glow);
    transform-origin: 50% 50%;
    animation: overlaysIdentityRingSpin var(--identity-ring-speed) linear infinite;
}

.role-avatar__animated-ring::before {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    box-shadow:
        0 0 9px var(--identity-glow),
        0 0 19px var(--identity-soft-glow);
    opacity: .58;
    animation: overlaysIdentityHaloPulse 2.6s ease-in-out infinite;
}

.role-avatar__label {
    position: absolute;
    z-index: 7;
    left: 50%;
    bottom: -8px;
    min-width: 31px;
    min-height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 3px 5px 2px;
    overflow: hidden;
    pointer-events: none;
    border: 2px solid #111417;
    border-radius: 999px;
    color: var(--identity-label-text);
    background: linear-gradient(
        180deg,
        var(--identity-accent-2),
        var(--identity-accent)
    );
    box-shadow:
        0 2px 7px rgba(0, 0, 0, .56),
        0 0 10px var(--identity-glow);
    font-size: 7px;
    font-weight: 950;
    line-height: 1;
    letter-spacing: .35px;
    text-transform: uppercase;
    white-space: nowrap;
    transform: translateX(-50%);
    animation: overlaysIdentityLabelFloat 2.7s ease-in-out infinite;
}

.role-avatar.is-role-owner .role-avatar__label,
.role-avatar.is-role-admin .role-avatar__label {
    min-width: 38px;
    font-size: 6.5px;
    letter-spacing: .2px;
}

.role-avatar__label::after,
.stream-avatar-identity-label::after {
    content: "";
    position: absolute;
    inset: -3px auto -3px -58%;
    width: 42%;
    background: linear-gradient(
        100deg,
        transparent,
        rgba(255, 255, 255, .92),
        transparent
    );
    transform: skewX(-18deg);
    animation: overlaysIdentityLabelShine 2.4s ease-in-out infinite;
}

.role-avatar__online {
    position: absolute;
    z-index: 8;
    right: -1px;
    bottom: -1px;
    width: 9px;
    height: 9px;
    box-sizing: border-box;
    border: 2px solid #18181b;
    border-radius: 50%;
    background: #8fbd38;
}

#chatBox .chat-message > .role-avatar {
    margin: 1px 1px 8px 1px !important;
}

#chatBox .chat-message.has-identity-avatar {
    padding: 7px 8px !important;
    border-radius: 11px !important;
}

#chatBox .chat-message.is-owner-message {
    border: 1px solid rgba(242, 184, 75, .14) !important;
    background: linear-gradient(90deg, rgba(155, 94, 0, .13), transparent 72%) !important;
}

#chatBox .chat-message.is-admin-message {
    border: 1px solid rgba(185, 121, 255, .13) !important;
    background: linear-gradient(90deg, rgba(113, 49, 186, .12), transparent 72%) !important;
}

#chatBox .chat-message.is-moderator-message {
    border: 1px solid rgba(79, 195, 255, .12) !important;
    background: linear-gradient(90deg, rgba(20, 111, 159, .11), transparent 72%) !important;
}

#chatBox .chat-message.is-beta-message {
    border: 1px solid rgba(158, 228, 60, .1) !important;
    background: linear-gradient(90deg, rgba(94, 123, 31, .1), transparent 72%) !important;
}

.viewer-row-avatar .role-avatar {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
}

.viewer-row-avatar .role-avatar__image {
    width: 26px !important;
    height: 26px !important;
}

.stream-avatar-wrap.has-avatar-identity {
    overflow: visible !important;
    isolation: isolate;
}

.stream-avatar-wrap.has-avatar-identity > img {
    position: relative;
    z-index: 4 !important;
    border-color: var(--identity-accent) !important;
    box-shadow:
        0 0 0 3px var(--live-surface, #111417),
        0 0 0 5px color-mix(in srgb, var(--identity-accent) 55%, transparent),
        0 0 20px var(--identity-soft-glow) !important;
}

.stream-channel-identity-ring {
    position: absolute;
    z-index: 1;
    inset: -4px;
    display: block;
    box-sizing: border-box;
    overflow: hidden;
    pointer-events: none;
    padding: 2px;
    border-radius: 19px;
    background: transparent;
    box-shadow:
        0 0 9px var(--identity-glow),
        0 0 19px var(--identity-soft-glow);
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

.stream-channel-identity-ring::before {
    content: "";
    position: absolute;
    inset: -55%;
    background: conic-gradient(
        from 0deg,
        var(--identity-accent-3),
        var(--identity-accent),
        var(--identity-accent-2),
        #ffffff,
        var(--identity-accent),
        var(--identity-accent-3)
    );
    transform-origin: 50% 50%;
    animation: overlaysIdentityRingSpin var(--identity-ring-speed) linear infinite;
}

.stream-avatar-identity-label {
    position: absolute;
    z-index: 7;
    top: -7px;
    right: -10px;
    min-height: 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 4px 7px;
    overflow: hidden;
    pointer-events: none;
    border: 2px solid var(--live-surface, #111417);
    border-radius: 999px;
    color: var(--identity-label-text);
    background: linear-gradient(
        180deg,
        var(--identity-accent-2),
        var(--identity-accent)
    );
    box-shadow: 0 0 13px var(--identity-glow);
    font-size: 8px;
    font-weight: 950;
    line-height: 1;
    letter-spacing: .45px;
    white-space: nowrap;
    animation: overlaysIdentityCornerBadge 2.7s ease-in-out infinite;
}

.stream-avatar-wrap.is-role-owner .stream-avatar-identity-label,
.stream-avatar-wrap.is-role-admin .stream-avatar-identity-label {
    font-size: 7px;
}

.stream-avatar-live {
    z-index: 8 !important;
}

@keyframes overlaysIdentityRingSpin {
    to { transform: rotate(360deg); }
}

@keyframes overlaysIdentityHaloPulse {
    0%, 100% { opacity: .42; transform: scale(.98); }
    50% { opacity: .88; transform: scale(1.05); }
}

@keyframes overlaysIdentityLabelFloat {
    0%, 100% { transform: translateX(-50%) translateY(0) scale(1); }
    50% { transform: translateX(-50%) translateY(2px) scale(1.04); }
}

@keyframes overlaysIdentityLabelShine {
    0%, 28% { left: -58%; opacity: 0; }
    42% { opacity: 1; }
    68%, 100% { left: 118%; opacity: 0; }
}

@keyframes overlaysIdentityCornerBadge {
    0%, 100% {
        transform: translateY(0) scale(1);
        box-shadow: 0 0 10px var(--identity-glow);
    }
    50% {
        transform: translateY(-2px) scale(1.04);
        box-shadow: 0 0 18px var(--identity-glow);
    }
}

@supports not (color: color-mix(in srgb, white 50%, black)) {
    .stream-avatar-wrap.has-avatar-identity > img {
        box-shadow:
            0 0 0 3px var(--live-surface, #111417),
            0 0 0 5px var(--identity-accent),
            0 0 20px var(--identity-soft-glow) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .role-avatar__animated-ring,
    .role-avatar__animated-ring::before,
    .role-avatar__label,
    .role-avatar__label::after,
    .stream-channel-identity-ring::before,
    .stream-avatar-identity-label,
    .stream-avatar-identity-label::after {
        animation: none !important;
    }
}