/* MATE V9.6 — Glass Premium, fixed MATE palette
   Visual-only pass. No class-based recolouring anywhere. */
body.mate-immersive{
  --mate-accent:#65e2ba;
  --mate-accent-rgb:101,226,186;
  --mate-accent-cool:#62cce0;
  --mate-accent-cool-rgb:98,204,224;
  --mate-surface-0:rgba(5,14,25,.54);
  --mate-surface-1:rgba(10,23,38,.70);
  --mate-surface-2:rgba(13,30,49,.90);
  --mate-stroke:rgba(151,203,238,.22);
  --mate-stroke-strong:rgba(153,218,244,.38);
  --mate-glow:rgba(70,194,211,.16);
}

/* 1) Clearer hierarchy: chrome lighter, content denser. */
@media(min-width:851px){
  body.mate-immersive>main{padding-top:24px}
  body.mate-immersive main>header{height:70px;margin-bottom:22px;padding:13px 22px;border-radius:18px}
}
body.mate-immersive main>header{
  background:linear-gradient(145deg,rgba(255,255,255,.035),transparent 32%),rgba(7,18,31,.54);
  border-color:rgba(143,196,229,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 10px 28px rgba(0,0,0,.18);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)
}
body.mate-immersive main>header>span:first-child{color:#d7e5ef;font-weight:600;letter-spacing:-.01em}
body.mate-immersive main>header .demo{color:#8fa7b9;letter-spacing:.12em}
body.mate-immersive main>header b{padding:9px 13px;background:rgba(11,29,43,.62);border-color:rgba(var(--mate-accent-cool-rgb),.25);box-shadow:none}

/* Page heading: content, not another heavy card. */
body.mate-immersive .heading{
  margin:22px 0 20px;padding:8px 2px 17px;
  background:transparent;border:0;border-bottom:1px solid rgba(151,203,238,.15);
  border-radius:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;
}
body.mate-immersive .heading h1{font-size:clamp(28px,2.8vw,40px);letter-spacing:-1.35px;margin-bottom:5px}
body.mate-immersive .heading p{color:#aebdcc}
body.mate-immersive .heading .badge{border-color:rgba(var(--mate-accent-rgb),.28);color:#aef2d7;background:rgba(var(--mate-accent-rgb),.07);border-radius:999px}

/* Surface hierarchy. */
body.mate-immersive :is(.sidebox,.discovery-filters){
  background:linear-gradient(150deg,rgba(255,255,255,.025),transparent 28%),var(--mate-surface-1);
  border-color:rgba(151,203,238,.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 10px 24px rgba(0,0,0,.15);
}
body.mate-immersive :is(.form,.chat,.profile-section){
  background:linear-gradient(150deg,rgba(255,255,255,.032),transparent 25%),var(--mate-surface-2);
  border-color:var(--mate-stroke);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 16px 38px rgba(0,0,0,.22);
}
body.mate-immersive .profile-section{border-radius:20px}
/* Fixed MATE accent only — never tied to class. */
body.mate-immersive .profile-section-head>span{background:rgba(var(--mate-accent-rgb),.09);color:#aef2d7;border:1px solid rgba(var(--mate-accent-rgb),.18)}

/* 2) Sidebar glass refinement. */
body.mate-immersive>aside{border-color:rgba(151,203,238,.23)}
body.mate-immersive>aside .logo span,body.mate-immersive>aside .world small{color:#8be9ca}
body.mate-immersive>aside nav button.active{
  background:linear-gradient(110deg,rgba(var(--mate-accent-rgb),.10),rgba(57,111,170,.28) 66%,rgba(83,168,202,.13));
  border-color:rgba(var(--mate-accent-rgb),.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 8px 24px rgba(55,178,175,.06)
}
body.mate-immersive>aside nav button.active::before{background:#65e2ba;box-shadow:0 0 12px rgba(var(--mate-accent-rgb),.42)}
body.mate-immersive>aside .account .avatar{outline-color:rgba(var(--mate-accent-cool-rgb),.52)}

/* 3) Discover is the visual hero, without class-based colours. */
body.mate-immersive .layout{grid-template-columns:minmax(340px,610px) minmax(250px,330px);gap:24px}
body.mate-immersive .gallery-card{
  border-color:rgba(151,218,244,.30);
  background:rgba(7,18,31,.94);
  box-shadow:0 20px 52px rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,.025),0 0 32px rgba(63,174,201,.07);
}
body.mate-immersive .gallery-card .media-gallery{background:#06101c}
body.mate-immersive .gallery-card .card-info{
  background:linear-gradient(180deg,rgba(7,17,29,.72),rgba(8,20,35,.98));
  border-top:1px solid rgba(151,203,238,.16);
}
/* Do not override the existing class colour. */
body.mate-immersive .gallery-card .class{display:flex;align-items:center;gap:8px;font-weight:700}
body.mate-immersive .gallery-card .card-info h2{margin-top:7px}
body.mate-immersive .gallery-card .tag{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.10);border-radius:999px;padding:6px 10px}
body.mate-immersive .gallery-card .profile-link{color:#ccecff}
body.mate-immersive .gallery-card .profile-link:hover{color:white}
body.mate-immersive .pill{background:rgba(5,17,29,.72);border-color:rgba(165,211,239,.24);box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}

.v96-role-badge{display:inline-flex;align-items:center;gap:5px;width:max-content;margin-left:2px;padding:4px 8px;border-radius:999px;border:1px solid rgba(151,218,244,.20);background:rgba(6,16,28,.55);color:#dfeaf2;font-size:10px;font-weight:700;vertical-align:middle}
.v96-role-badge .v96-role-icon{font-size:12px;color:#79d7e7}

/* Compatibility stays quieter than the profile card. */
body.mate-immersive .mate-compatibility{background:rgba(var(--mate-accent-rgb),.032);border-color:rgba(var(--mate-accent-rgb),.13)}
body.mate-immersive .mate-compatibility b{color:#aef2d7}
body.mate-immersive .context .sidebox:first-child{position:relative;overflow:hidden}
body.mate-immersive .context .sidebox:first-child::before{content:"";position:absolute;inset:0 auto 0 0;width:2px;background:linear-gradient(transparent,#62cce0,transparent);opacity:.62}
body.mate-immersive .reason>span{color:#8be9ca}

/* Main actions remain MATE cyan/blue. */
body.mate-immersive :is(.primary,.actions .like){
  background:linear-gradient(160deg,#82e8ef,#4bbbd0 52%,#328db0);
  border-color:rgba(210,249,255,.62);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 8px 22px rgba(20,147,176,.18)
}
body.mate-immersive .actions .like{box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 8px 22px rgba(20,147,176,.18),0 0 28px rgba(75,187,208,.07)}

/* 4) Game-like portrait frame, neutral and consistent. */
body.mate-immersive :is(.mate-character-summary img,.mate-bnet-chip img,.mate-alt-face,.mate-alt-summary-card img,.profile-avatar,.account .avatar){
  border:1px solid rgba(151,218,244,.34);box-shadow:0 0 0 2px rgba(5,15,26,.82),0 0 0 3px rgba(98,204,224,.10),0 8px 20px rgba(0,0,0,.20)
}

/* 5) Matches/messages: more air and clearer unread state. */
body.mate-immersive .match-list{gap:11px;max-width:900px}
body.mate-immersive .match-row{padding:16px 18px;gap:14px;border-radius:16px;background:linear-gradient(140deg,rgba(19,39,61,.80),rgba(7,19,33,.88));border-color:rgba(151,203,238,.17);transition:transform .16s ease,border-color .16s ease,background .16s ease}
body.mate-immersive .match-row:hover{transform:translateY(-1px);border-color:rgba(151,218,244,.34)}
body.mate-immersive .match-row.has-unread{border-color:rgba(var(--mate-accent-cool-rgb),.38);background:linear-gradient(140deg,rgba(var(--mate-accent-cool-rgb),.06),rgba(10,27,43,.94))}
body.mate-immersive .match-row.has-unread::before{content:"";width:3px;align-self:stretch;border-radius:4px;background:#62cce0;box-shadow:0 0 10px rgba(var(--mate-accent-cool-rgb),.38)}
body.mate-immersive .conversation-badge{min-width:22px;height:22px;background:#65e2ba;color:#06141c;border:0;box-shadow:0 0 12px rgba(var(--mate-accent-rgb),.26)}
body.mate-immersive .message-preview{margin-top:5px;color:#9fb0be;font-size:13px}
body.mate-immersive .match-row.has-unread .message-preview{color:#dfe9f0}
body.mate-immersive .chat-arrow{opacity:.72;transition:opacity .16s ease,transform .16s ease}
body.mate-immersive .match-row:hover .chat-arrow{opacity:1;transform:translateX(2px)}

/* 6) Custom-feeling preference controls. */
body.mate-immersive select{
  appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,#a9bdca 50%),linear-gradient(135deg,#a9bdca 50%,transparent 50%);
  background-position:calc(100% - 17px) 52%,calc(100% - 12px) 52%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:34px
}
.v96-filter-label.v96-chip-label>select{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}
.v96-chip-label{grid-column:1/-1!important}
.v96-chip-label>span.v96-filter-title{display:block;margin-bottom:8px;color:#dce8f0;font-size:12px;font-weight:700}
.v96-chipset{display:flex;flex-wrap:wrap;gap:7px;margin-top:2px}
.v96-chipset button{border:1px solid rgba(151,203,238,.18);background:rgba(14,31,48,.56);color:#b8c8d4;border-radius:999px;padding:8px 11px;font-size:12px;transition:border-color .14s ease,background .14s ease,color .14s ease,transform .14s ease}
.v96-chipset button:hover{transform:translateY(-1px);border-color:rgba(151,218,244,.34);color:white}
.v96-chipset button[aria-pressed="true"]{background:rgba(var(--mate-accent-rgb),.10);border-color:rgba(var(--mate-accent-rgb),.36);color:#f5fbff;box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
body.mate-immersive .mate-check-option{border-radius:999px;padding:9px 12px;background:rgba(14,31,48,.48);border-color:rgba(151,203,238,.16)}
body.mate-immersive .mate-check-option:has(input:checked){background:rgba(var(--mate-accent-rgb),.09);border-color:rgba(var(--mate-accent-rgb),.34)}
body.mate-immersive .mate-check-option input{accent-color:#65e2ba}

/* 7) Empty states: visual anchor + one obvious primary action. */
body.mate-immersive .empty{position:relative;overflow:hidden;max-width:920px;padding:46px 28px;background:linear-gradient(145deg,rgba(255,255,255,.028),transparent 30%),rgba(8,22,37,.78);border-color:rgba(151,203,238,.18)}
body.mate-immersive .empty::after{content:"";position:absolute;width:320px;height:320px;border-radius:50%;right:-130px;top:-150px;background:radial-gradient(circle,rgba(var(--mate-accent-cool-rgb),.09),transparent 68%);pointer-events:none}
.v96-empty-mark{width:48px;height:48px;margin:0 auto 15px;display:grid;place-items:center;border-radius:16px;background:linear-gradient(145deg,rgba(var(--mate-accent-rgb),.13),rgba(82,151,190,.08));border:1px solid rgba(var(--mate-accent-rgb),.22);color:#8be9ca;font-size:22px;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 10px 28px rgba(0,0,0,.20)}
body.mate-immersive .empty h2{margin-top:0}
body.mate-immersive .empty>.primary{position:relative;z-index:1}
body.mate-immersive .empty>.text-button{font-size:12px}
body.mate-immersive .mate-empty-actions{position:relative;z-index:1}

/* 8) Battle.net and live-status components use MATE palette, never class palette. */
body.mate-immersive .mate-character-summary{border-color:rgba(var(--mate-accent-cool-rgb),.20);background:rgba(7,20,34,.68)}
body.mate-immersive .mate-bnet-linked{border-color:rgba(var(--mate-accent-rgb),.25);background:rgba(var(--mate-accent-rgb),.06);color:#dcebf3}
body.mate-immersive :is(.mate-live-chip,.mate-mini-status.is-live){color:#9debd2;border-color:rgba(var(--mate-accent-rgb),.27);background:rgba(var(--mate-accent-rgb),.075)}
body.mate-immersive .mate-looking-peer{background:rgba(var(--mate-accent-rgb),.055);border-color:rgba(var(--mate-accent-rgb),.22)}
body.mate-immersive .mate-looking-peer span,body.mate-immersive .mate-looking-peer>button{color:#9debd2}
body.mate-immersive .mate-looking-peer>button{border-color:rgba(var(--mate-accent-rgb),.30)}

/* Mobile: preserve hierarchy without wasting height. */
@media(max-width:850px){
  body.mate-immersive .heading{padding:4px 2px 14px;margin:12px 0 16px}
  body.mate-immersive main>header{min-height:58px;padding:10px 12px;margin-bottom:14px}
  body.mate-immersive .layout{grid-template-columns:minmax(0,1fr);gap:18px}
  body.mate-immersive .context{grid-template-columns:1fr}
  body.mate-immersive .match-row{padding:13px 12px}
  .v96-chipset{gap:6px}.v96-chipset button{padding:7px 10px;font-size:11px}
}
@media(max-width:560px){
  body.mate-immersive .empty{padding:34px 18px}
  body.mate-immersive .gallery-card .card-info{padding:17px 18px}
  body.mate-immersive .match-row.has-unread::before{width:2px}
}
@media(prefers-reduced-motion:reduce){body.mate-immersive .match-row,.v96-chipset button{transition:none}}