/* Release 52: glass for the five approved surfaces. Existing layout, artwork,
   controls, selection states and data behavior remain owned by their modules. */
:root{
 --gpf-glass-fill:rgba(10,22,36,.26);
 --gpf-glass-sheen:linear-gradient(125deg,#ffffff18,transparent 32%,transparent 70%,#dcfaff09);
 --gpf-glass-edge:#d9f4ff59;
 --gpf-glass-shadow:inset 0 1px 0 #ffffff85,inset 1px 0 0 #ffffff1c,inset 0 -1px 0 #e4f8ff24,0 16px 38px #0003;
 --gpf-glass-text:#f0f6fc;--gpf-glass-secondary:#c7d8e8;
 --gpf-glass-inset:#d5f2ff0a;--gpf-glass-input:#07142438;
 --gpf-glass-solid:#1b2b3b;--gpf-glass-focus:#9deadd;
}
html[data-theme=light]{
 --gpf-glass-fill:rgba(224,235,244,.48);
 --gpf-glass-sheen:linear-gradient(125deg,#ffffff70,transparent 38%,#ffffff18);
 --gpf-glass-edge:#65869866;
 --gpf-glass-shadow:inset 0 1px 0 #ffffffe0,inset 1px 0 0 #ffffff70,0 12px 32px #183e5020;
 --gpf-glass-text:#173247;--gpf-glass-secondary:#38566b;
 --gpf-glass-inset:#36586b09;--gpf-glass-input:#f2f8ff65;
 --gpf-glass-solid:#e1eaf1;--gpf-glass-focus:#126b74;
}
/* !important is limited to painted surfaces: earlier light/inline styles
   already use it. No visibility, positioning, sizing or display overrides. */
html body :is(.explorer-profile,.discord-detail,#app-stats-bar,#modal-edit .modal,#view-news-content .dispatch-controls .form-input){
 background:var(--gpf-glass-sheen),var(--gpf-glass-fill)!important;
 border:1px solid var(--gpf-glass-edge)!important;
 box-shadow:var(--gpf-glass-shadow)!important;
 -webkit-backdrop-filter:blur(5px) saturate(135%);
 backdrop-filter:blur(5px) saturate(135%);
 color:var(--gpf-glass-text);
}
html body :is(.explorer-profile,.discord-detail,#modal-edit .modal){
 --text:var(--gpf-glass-text);--text2:var(--gpf-glass-secondary);--text3:var(--gpf-glass-secondary);
 --surface2:var(--gpf-glass-inset);
}
html body :is(.explorer-profile,.discord-detail){text-shadow:0 1px 4px #06132355}
html[data-theme=light] body :is(.explorer-profile,.discord-detail){text-shadow:none}
/* Fade only the artwork into transparency, not into a solid blue/white block.
   Cover captions and compatibility badges retain their original dark scrim. */
html body .explorer-profile .explorer-cover{background:transparent;color:#f5f8ff}
html body .explorer-profile .explorer-cover>.gpf-party-art{
 -webkit-mask-image:linear-gradient(#000 38%,transparent 100%);
 mask-image:linear-gradient(#000 38%,transparent 100%);
}
html body .explorer-profile .explorer-cover:after{background:linear-gradient(180deg,#09172665,transparent 95%)}
html body .discord-detail-art{
 -webkit-mask-image:linear-gradient(#000 35%,transparent 100%);
 mask-image:linear-gradient(#000 35%,transparent 100%);
}
html body .discord-detail-art:after{background:linear-gradient(#08172115,#08172128)}
html body :is(.explorer-profile-body,.discord-detail-body,#modal-edit .modal-body){background:transparent}
html body .explorer-profile :is(.explorer-bio,.explorer-identity p,.explorer-availability p,.explorer-section-head>span,.explorer-game>span){color:var(--gpf-glass-secondary)}
html body .explorer-profile :is(.explorer-reasons,.compatibility-details){
 background:var(--gpf-glass-inset);border-color:var(--gpf-glass-edge);color:var(--gpf-glass-secondary);
}
html body .explorer-profile .compatibility-details summary{color:var(--gpf-glass-text)}
html body :is(.explorer-profile,.discord-detail) .explorer-tags span{
 background:var(--gpf-glass-inset);border-color:var(--gpf-glass-edge);color:var(--gpf-glass-secondary);
}
/* Stats stay the same size and keep their accent numbers. */
html body #app-stats-bar .app-stat-label{color:var(--gpf-glass-secondary)}
html body #app-stats-bar .app-stat-item{border-color:var(--gpf-glass-edge)}
/* Edit Profile needs a lighter backdrop or the glass would only show black.
   Blur is on the dialog alone, so it samples the app through the overlay. */
html body #modal-edit{background:rgba(3,10,19,.35);-webkit-backdrop-filter:none;backdrop-filter:none}
html[data-theme=light] body #modal-edit{background:rgba(28,46,62,.18)}
html body #modal-edit .modal{border-radius:23px}
html body #modal-edit .modal-footer{
 background:var(--gpf-glass-input);border-color:var(--gpf-glass-edge);
}
html body #modal-edit :is(.form-input,.ms-trigger){
 background:var(--gpf-glass-input)!important;border-color:var(--gpf-glass-edge);
 color:var(--gpf-glass-text);box-shadow:inset 0 1px 0 #ffffff0a;
}
/* Native option lists and custom multiselect lists use a readable solid
   surface. They must not inherit transparent text against the OS menu. */
html body #modal-edit :is(select option,.ms-dropdown),
html body #view-news-content .dispatch-controls select option{
 background:var(--gpf-glass-solid);color:var(--gpf-glass-text);
}
html body #view-news-content .dispatch-controls .form-input{border-radius:15px}
html body :is(#modal-edit,#view-news-content .dispatch-controls) :is(input,textarea)::placeholder{color:var(--gpf-glass-secondary);opacity:1}
html body :is(#modal-edit,#view-news-content .dispatch-controls) :is(input,textarea,select,.ms-trigger):focus-visible{
 outline:2px solid var(--gpf-glass-focus);outline-offset:3px;
}
/* No layered backdrop filters inside long scrolling profile/server panels. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 html body :is(.explorer-profile,.discord-detail,#app-stats-bar,#modal-edit .modal,#view-news-content .dispatch-controls .form-input){background:var(--gpf-glass-solid)!important}
}
@media(prefers-reduced-transparency:reduce){
 html body :is(.explorer-profile,.discord-detail,#app-stats-bar,#modal-edit .modal,#view-news-content .dispatch-controls .form-input){
  background:var(--gpf-glass-solid)!important;-webkit-backdrop-filter:none;backdrop-filter:none;
 }
}
@media(forced-colors:active){
 html body :is(.explorer-profile,.discord-detail,#app-stats-bar,#modal-edit .modal,#view-news-content .dispatch-controls .form-input){
  background:Canvas!important;color:CanvasText;border-color:CanvasText!important;box-shadow:none!important;
 }
}
/* Plus rework: native sections share the established liquid-glass material. */
html body :is(.plus-native,.plus-card,#plus-workspace,.plus-context,#modal-party .modal){background:var(--gpf-glass-sheen),var(--gpf-glass-fill)!important;border:1px solid var(--gpf-glass-edge);box-shadow:var(--gpf-glass-shadow);backdrop-filter:blur(5px) saturate(135%);-webkit-backdrop-filter:blur(5px) saturate(135%);color:var(--gpf-glass-text)}
.plus-context{display:flex!important;flex-wrap:wrap;gap:8px;padding:12px;border-radius:18px}.plus-context button{white-space:normal}.plus-native{border-radius:18px;padding:16px;margin:16px 0}.plus-native summary{cursor:pointer;font-weight:600}.plus-native[open]>div{margin-top:16px;animation:plus-reveal .22s ease-out}.plus-native label{display:grid;gap:6px;margin:12px 0}.plus-native .plus-check{display:flex}.plus-native .form-input,.plus-form .form-input{width:100%;min-width:0;background:var(--gpf-glass-input);color:var(--gpf-glass-text)}.clan-tags{display:flex;gap:6px;flex-wrap:wrap}.clan-tags span{padding:5px 9px;border:1px solid var(--gpf-glass-edge);border-radius:16px}.plus-form fieldset{display:flex;flex-wrap:wrap;gap:8px;grid-column:1/-1}.utc-local-hint{display:block;color:var(--gpf-glass-secondary);margin:6px 0}.plus-card p{overflow-wrap:anywhere}.plus-card[hidden]{display:none!important}#clan-hub .plus-tabs{flex-wrap:wrap}#plus-workspace{max-width:100%;min-width:0}#modal-edit #plus-workspace .plus-grid{grid-template-columns:1fr}.plus-native select option{background:var(--gpf-glass-solid);color:var(--gpf-glass-text)}
@keyframes plus-reveal{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.plus-native[open]>div{animation:none}}
@media(prefers-reduced-transparency:reduce){html body :is(.plus-native,.plus-card,#plus-workspace,.plus-context,#modal-party .modal){background:var(--gpf-glass-solid)!important;backdrop-filter:none}}
@supports not (backdrop-filter:blur(1px)){html body :is(.plus-native,.plus-card,#plus-workspace,.plus-context,#modal-party .modal){background:var(--gpf-glass-solid)!important}}