/* Play2Gether V49: Die dunklen Flaechen folgen der persoenlichen Neonpalette.
   Keine Aenderungen an Rollenfarben und individuell gestalteten Community-Seiten. */
body.p2g-harmonic-background[data-p2g-theme="neon"]{
 background:radial-gradient(ellipse at 10% 7%,color-mix(in srgb,var(--p2g-neon-a) 8%,transparent),transparent 43%),
             radial-gradient(ellipse at 90% 65%,color-mix(in srgb,var(--p2g-neon-b) 7%,transparent),transparent 52%),
             var(--p2g-ambient-base)!important;
}
body.p2g-harmonic-background[data-p2g-theme="neon"] #p2gPortalShell .p2g-port-content{
 background:radial-gradient(ellipse at 8% 8%,color-mix(in srgb,var(--p2g-neon-a) 10%,transparent),transparent 47%),
             radial-gradient(ellipse at 92% 65%,color-mix(in srgb,var(--p2g-neon-b) 9%,transparent),transparent 53%),
             linear-gradient(140deg,var(--p2g-ambient-base),var(--p2g-ambient-header))!important;
}
body.p2g-harmonic-background[data-p2g-theme="neon"] #p2gPortalShell .p2g-port-head{
 background:linear-gradient(112deg,color-mix(in srgb,var(--p2g-ambient-header) 94%,transparent),color-mix(in srgb,var(--p2g-ambient-nav) 94%,transparent))!important;
}
body.p2g-harmonic-background[data-p2g-theme="neon"] #p2gPortalShell .p2g-port-nav{
 background:linear-gradient(177deg,var(--p2g-ambient-nav),var(--p2g-ambient-base) 88%)!important;
}
body.p2g-harmonic-background[data-p2g-theme="neon"] #p2gPortalShell :is(.p2g-port-panel,.p2g-port-card){
 background:linear-gradient(135deg,var(--p2g-ambient-card),var(--p2g-ambient-card-alt))!important;
}
body.p2g-harmonic-background[data-p2g-theme="neon"] #p2gPortalShell :is(.p2g-port-pop,.p2g-port-topbutton,.p2g-port-ticket-button,.p2g-port-srv){
 background-color:var(--p2g-ambient-card)!important;
}
body.p2g-harmonic-background[data-p2g-theme="neon"] #p2gPortalShell :is(.p2g-port-chat-list,.p2g-port-chat-messages,.p2g-port-field input,.p2g-port-field select,.p2g-port-field textarea){
 background-color:var(--p2g-ambient-inset)!important;
}
/* Das neue Entwickler-Dashboard verwendet dieselbe harmonisierte Farbwelt. */
body.p2g-harmonic-background[data-p2g-theme="neon"] #devApp.p2g-dev-v33{
 background:radial-gradient(ellipse at 2% 3%,color-mix(in srgb,var(--p2g-neon-a) 9%,transparent),transparent 39%),
             radial-gradient(ellipse at 97% 2%,color-mix(in srgb,var(--p2g-neon-b) 8%,transparent),transparent 39%),
             var(--p2g-ambient-base)!important;
}
body.p2g-harmonic-background[data-p2g-theme="neon"] #devApp.p2g-dev-v33 :is(.p2g-v33-hero,.p2g-v33-section-heading,.p2g-v33-overview-welcome,.p2g-v33-startpanel){
 background:linear-gradient(128deg,var(--p2g-ambient-card),var(--p2g-ambient-card-alt))!important;
}
body.p2g-harmonic-background[data-p2g-theme="neon"] #devApp.p2g-dev-v33 :is(.dev-tool,.p2g-v33-overview-card){
 background:linear-gradient(140deg,var(--p2g-ambient-card),var(--p2g-ambient-card-alt))!important;
}
body.p2g-harmonic-background[data-p2g-theme="neon"] #devApp.p2g-dev-v33 :is(.p2g-v33-statusline,.p2g-v33-tab,.p2g-v33-shortcut,.p2g-v33-info-note){
 background-color:var(--p2g-ambient-inset);
}
/* Die Farb-Einstellungen zeigen nun auch den daraus berechneten Hintergrund. */
body.p2g-harmonic-background #p2gColorStudio{
 background:var(--p2g-ambient-card);border-color:color-mix(in srgb,var(--p2g-neon-a) 22%,var(--p2g-ambient-border));
}
body.p2g-harmonic-background #p2gColorStudio :is(.p2g-color-tile,.p2g-color-customfields){background:var(--p2g-ambient-inset)}
#p2gColorStudio .p2g-v49-background-preview{margin-top:10px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:11px;color:#b8c7dd}
#p2gColorStudio .p2g-v49-background-preview .p2g-v49-samples{display:flex;gap:4px;background:#0002;padding:4px;border:1px solid #ffffff29;border-radius:8px}
#p2gColorStudio .p2g-v49-background-preview i{display:block;width:33px;height:20px;border-radius:5px}
#p2gColorStudio .p2g-v49-background-preview i:nth-child(1){background:var(--p2g-ambient-base,#0B102A)}
#p2gColorStudio .p2g-v49-background-preview i:nth-child(2){background:var(--p2g-ambient-card,#15223B)}
#p2gColorStudio .p2g-v49-background-preview i:nth-child(3){background:var(--p2g-ambient-card-alt,#1B203B)}
/* Kein Blinken beim Farbwechsel; V38-Farbwelle bleibt erhalten. */
body.p2g-harmonic-background:not([data-p2g-motion="off"]) #p2gPortalShell :is(.p2g-port-nav,.p2g-port-head,.p2g-port-panel,.p2g-port-card),
body.p2g-harmonic-background:not([data-p2g-motion="off"]) #devApp.p2g-dev-v33 :is(.dev-tool,.p2g-v33-overview-card){
 transition:background-color .65s ease,border-color .65s ease,box-shadow .65s ease;
}
@media(prefers-reduced-motion:reduce){body.p2g-harmonic-background #p2gPortalShell *,body.p2g-harmonic-background #devApp *{transition-duration:.01ms!important}}
/* Dashboard-Statistiken, Chatblasen und Profilfenster passend zu den Hauptflaechen. */
body.p2g-harmonic-background[data-p2g-theme="neon"] #p2gPortalShell :is(.p2g-v17-overview>div,.p2g-v17-availability,.p2g-v17-cal-extra,.p2g-v17-designstatus,.p2g-v17-message,.p2g-v17-roles>span){
 background:linear-gradient(145deg,var(--p2g-ambient-card),var(--p2g-ambient-card-alt))!important;
}
body.p2g-harmonic-background[data-p2g-theme="neon"] #p2gPortalShell .p2g-v17-message.mine{
 background:linear-gradient(140deg,color-mix(in srgb,var(--p2g-neon-a) 9%,var(--p2g-ambient-card)),var(--p2g-ambient-card-alt))!important;
}
body.p2g-harmonic-background[data-p2g-theme="neon"] #p2gPortalShell :is(.p2g-v17-room:not(.selected),.p2g-port-chat-list button:not(.selected)){
 background-color:var(--p2g-ambient-inset);
}
body.p2g-harmonic-background[data-p2g-theme="neon"] #p2gPortalShell :is(.p2g-port-day,.p2g-port-line){
 background-color:var(--p2g-ambient-inset);
}
body.p2g-harmonic-background[data-p2g-theme="neon"] #p2gChatDesignDialog,
body.p2g-harmonic-background[data-p2g-theme="neon"] .p2g-design-dialog{
 background:linear-gradient(145deg,var(--p2g-ambient-card),var(--p2g-ambient-base))!important;
}
body.p2g-harmonic-background[data-p2g-theme="neon"] :is(#p2gChatDesignDialog header,#p2gChatDesignDialog footer,.p2g-design-dialog .p2g-design-titlebar,.p2g-design-dialog .p2g-design-sidebar){
 background:var(--p2g-ambient-card)!important;
}
body.p2g-harmonic-background[data-p2g-theme="neon"] :is(#p2gChatDesignDialog .p2g-chatdesign-card,.p2g-design-dialog .p2g-design-cardpreview){
 background:var(--p2g-ambient-card-alt)!important;
}

/* V50: Eigenes Neonpaar auf zwei getrennte, sehr dunkle Farbfamilien verteilen.
   Das erste gewaehle Farbfeld dominiert, das zweite bildet eine subtile Gegenfarbe.
   Anders als rein RGB-gemittelte Flaechen kein matschiges Braun bei Komplementaerfarben. */
body.p2g-custom-background[data-p2g-theme="neon"] #p2gPortalShell .p2g-port-content{
 background:radial-gradient(ellipse at 6% 8%,color-mix(in srgb,var(--p2g-neon-a) 7%,transparent),transparent 45%),
            radial-gradient(ellipse at 96% 75%,color-mix(in srgb,var(--p2g-neon-b) 6%,transparent),transparent 55%),
            linear-gradient(125deg,var(--p2g-ambient-base) 5%,var(--p2g-ambient-header) 56%,var(--p2g-ambient-nav))!important;
}
body.p2g-custom-background[data-p2g-theme="neon"] #p2gPortalShell :is(.p2g-port-panel,.p2g-port-card){
 background:linear-gradient(130deg,var(--p2g-ambient-card) 15%,
            color-mix(in srgb,var(--p2g-ambient-card) 45%,var(--p2g-ambient-card-alt)))!important;
}
body.p2g-custom-background[data-p2g-theme="neon"] #devApp.p2g-dev-v33 :is(.dev-tool,.p2g-v33-overview-card){
 background:linear-gradient(135deg,var(--p2g-ambient-card),
            color-mix(in srgb,var(--p2g-ambient-card) 48%,var(--p2g-ambient-card-alt)))!important;
}
/* Klar erkennbare Live-Vorschau speziell fuer die zwei selbst definierten Farben. */
#p2gColorStudio .p2g-v50-custom-preview{display:none;margin-top:11px;padding:10px;border-radius:12px;
 border:1px solid color-mix(in srgb,var(--p2g-neon-a,#53caff) 22%,var(--p2g-ambient-border,#46536b));
 background:linear-gradient(125deg,var(--p2g-ambient-base,#0b102a),var(--p2g-ambient-nav,#14182f));
 align-items:center;gap:12px;flex-wrap:wrap;transition:background-color .45s ease,border-color .45s ease}
#p2gColorStudio.p2g-color-custom .p2g-v50-custom-preview{display:flex}
#p2gColorStudio .p2g-v50-custom-preview .p2g-v50-preview-art{display:flex;gap:6px;flex:0 0 130px;align-items:stretch;height:48px;padding:6px;
 border-radius:9px;background:var(--p2g-ambient-nav,#171d30);border:1px solid var(--p2g-ambient-border,#38506a)}
#p2gColorStudio .p2g-v50-preview-art i{display:block;flex:1;min-width:0;border-radius:5px;background:var(--p2g-ambient-card,#253047);border:1px solid color-mix(in srgb,var(--p2g-neon-a) 22%,transparent)}
#p2gColorStudio .p2g-v50-preview-art i:last-child{background:var(--p2g-ambient-card-alt,#263047);border-color:color-mix(in srgb,var(--p2g-neon-b) 30%,transparent)}
#p2gColorStudio .p2g-v50-custom-preview strong{display:block;font-size:12px;color:#eaf4ff;margin-bottom:3px}
#p2gColorStudio .p2g-v50-custom-preview small{display:block;font-size:11px;color:#aec1db;line-height:1.5}
@media(max-width:500px){#p2gColorStudio .p2g-v50-custom-preview .p2g-v50-preview-art{flex:1 1 100%;max-width:260px}}