/* WooP v8.37.2 public UX · Light/Dark only */
:root{
 --wa-accent:#8b5cf6;--wa-accent-2:#6d28d9;--wa-accent-soft:rgba(139,92,246,.15);--wa-glow:rgba(139,92,246,.28);
 --wa-bg:#07070a;--wa-surface:#0f1015;--wa-surface-2:#151720;--wa-card:#12131a;--wa-text:#f6f6f8;--wa-muted:#999ba7;--wa-border:rgba(255,255,255,.095);
}
html[data-woop-accent="pink"]{--wa-accent:#ff477e;--wa-accent-2:#db2777;--wa-accent-soft:rgba(255,71,126,.15);--wa-glow:rgba(255,71,126,.28)}
html[data-woop-accent="purple"]{--wa-accent:#8b5cf6;--wa-accent-2:#6d28d9;--wa-accent-soft:rgba(139,92,246,.15);--wa-glow:rgba(139,92,246,.28)}
html[data-woop-accent="blue"]{--wa-accent:#3b82f6;--wa-accent-2:#1d4ed8;--wa-accent-soft:rgba(59,130,246,.15);--wa-glow:rgba(59,130,246,.28)}
html[data-woop-accent="green"]{--wa-accent:#22c55e;--wa-accent-2:#15803d;--wa-accent-soft:rgba(34,197,94,.15);--wa-glow:rgba(34,197,94,.28)}
html[data-woop-accent="orange"]{--wa-accent:#f97316;--wa-accent-2:#c2410c;--wa-accent-soft:rgba(249,115,22,.15);--wa-glow:rgba(249,115,22,.28)}
html[data-color-effective="light"]{--wa-bg:#f7f7f9;--wa-surface:#fff;--wa-surface-2:#f1f2f5;--wa-card:#fff;--wa-text:#14151a;--wa-muted:#676a75;--wa-border:rgba(12,14,20,.11);color-scheme:light}
html[data-color-effective="dark"]{color-scheme:dark}
body{background:var(--wa-bg)!important;color:var(--wa-text)!important}
html[data-color-effective="light"] .topbar,html[data-color-effective="light"] .sidebar,html[data-color-effective="light"] .player-dock,html[data-color-effective="light"] .room-topbar{background:color-mix(in srgb,var(--wa-surface) 95%,transparent)!important;color:var(--wa-text)!important;border-color:var(--wa-border)!important}
html[data-color-effective] :is(.card,.settings-card,.profile-summary-card,.profile-nav-card,.subscription-card,.promo-redeem-card,.match-card,.room-card,.modal form,.woop-account-menu,.woop-account-pop,.list-row,.collection-card,.panel,.admin-card,.promo-row){border-color:var(--wa-border)!important}
html[data-color-effective="light"] :is(.card,.settings-card,.profile-summary-card,.profile-nav-card,.subscription-card,.promo-redeem-card,.match-card,.room-card,.modal form,.woop-account-menu,.woop-account-pop,.list-row,.collection-card,.panel,.admin-card,.promo-row){background:var(--wa-card)!important;color:var(--wa-text)!important;box-shadow:0 18px 50px rgba(25,28,38,.08)!important}
html[data-color-effective="light"] :is(.muted,small,.sub,.hint,.profile-page-heading p,.settings-card p){color:var(--wa-muted)!important}
:is(.primary-btn,.btn.primary,.play-main,.active>[data-section],.nav-item.active){--accent:var(--wa-accent)!important}
.primary-btn,.btn.primary{background:linear-gradient(135deg,var(--wa-accent),var(--wa-accent-2))!important;border-color:color-mix(in srgb,var(--wa-accent) 68%,white 12%)!important;color:#fff!important;box-shadow:0 10px 28px var(--wa-glow)!important}
:is(.nav-item.active,.profile-nav-list button.active,.settings-nav button.active,.wa-choice.selected){color:var(--wa-accent)!important;border-color:color-mix(in srgb,var(--wa-accent) 50%,transparent)!important;background:var(--wa-accent-soft)!important}
input:focus,select:focus,textarea:focus{outline:none!important;border-color:color-mix(in srgb,var(--wa-accent) 70%,white 10%)!important;box-shadow:0 0 0 3px var(--wa-accent-soft)!important}
.woop-account-menu .wa-accent-dot{width:14px;height:14px;border-radius:50%;background:var(--wa-accent);box-shadow:0 0 0 4px var(--wa-accent-soft),0 0 15px var(--wa-glow)}
/* official WooP logo */
.brand-mark,.quick-hub-head>span,.woop-welcome-logo>span{font-size:0!important;background:#fff url('/happy/assets/woop-logo.svg') center/78% no-repeat!important;color:transparent!important;overflow:hidden}
.brand-mark{border-radius:12px!important}
/* centered premium reminder */
.woop-premium-nudge{left:50%!important;right:auto!important;top:50%!important;transform:translate(-50%,-58%) scale(.98)!important;width:min(600px,calc(100vw - 30px))!important;grid-template-columns:42px minmax(0,1fr) auto 30px!important;padding:14px 15px!important;z-index:2147483000!important}
.woop-premium-nudge.show{transform:translate(-50%,-50%) scale(1)!important}
/* balanced Music Room creation */
.room-create-modal{width:min(760px,calc(100vw - 30px))!important}
.room-create-modal form{padding:28px!important;border-radius:24px!important;max-height:min(820px,92vh)!important;overflow:auto!important}
.room-create-modal form:before{left:28px!important;right:28px!important}
.room-create-heading{grid-template-columns:52px minmax(0,1fr)!important;column-gap:15px!important;margin-bottom:21px!important}
.room-create-heading:before{width:52px!important;height:52px!important;border-radius:16px!important}
.room-create-heading h2{font-size:25px!important;line-height:1.05!important}.room-create-heading p{font-size:11px!important;line-height:1.55!important;max-width:560px!important}
.room-create-form{gap:12px!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}
.room-create-form .room-field{padding:13px 14px!important;border-radius:15px!important;background:color-mix(in srgb,var(--wa-surface-2) 88%,transparent)!important}
.room-create-form .room-field>span{margin-bottom:8px!important;font-size:10px!important}.room-create-form input,.room-create-form select{height:46px!important;min-height:46px!important;border-radius:12px!important;padding-inline:13px!important}
.room-create-modal .background-picker{gap:9px!important;grid-template-columns:repeat(5,minmax(0,1fr))!important}.room-create-modal .background-option{height:84px!important;padding:9px!important;border-radius:14px!important}.room-create-modal .background-option b{font-size:9px!important}.room-create-modal .background-option small{font-size:7px!important}
.room-history-toggle{min-height:68px!important;padding:13px 14px!important}.room-create-submit{min-height:50px!important;margin-top:14px!important;border-radius:14px!important;font-size:11px!important}
@media(max-width:700px){.room-create-form{grid-template-columns:1fr!important}.room-create-modal .background-picker{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
/* match personalization */
.match-toolbar{display:flex;align-items:center;justify-content:flex-end;gap:9px;margin:-6px 0 15px}.match-toolbar label{font-size:9px;color:var(--wa-muted);font-weight:800}.match-toolbar select{min-height:38px;padding:0 34px 0 12px;border:1px solid var(--wa-border);border-radius:11px;background:var(--wa-surface-2);color:var(--wa-text)}
.match-card{position:relative;overflow:hidden;isolation:isolate;background:var(--match-bg, var(--wa-card))!important;background-size:cover!important;background-position:center!important}
.match-card:before{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(180deg,rgba(4,5,9,.18),rgba(4,5,9,.82));pointer-events:none}
html[data-color-effective="light"] .match-card:before{background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.88))}
.match-card .match-hover-details{position:absolute;inset:auto 10px 10px;z-index:4;padding:10px 11px;border:1px solid rgba(255,255,255,.13);border-radius:12px;background:rgba(8,9,13,.78);backdrop-filter:blur(16px);opacity:0;transform:translateY(8px);pointer-events:none;transition:.18s}.match-card:hover .match-hover-details{opacity:1;transform:none}.match-hover-details p{margin:0 0 6px;font-size:8px;line-height:1.45}.match-hover-details small{font-size:7px;color:#c4c5cd}.match-card.has-card-details .match-actions{padding-bottom:58px}
html[data-color-effective="light"] .match-hover-details{background:rgba(255,255,255,.82);color:#18181b;border-color:rgba(20,22,30,.11)}
.community-card-form{display:grid;grid-template-columns:1fr 1fr;gap:12px}.community-card-form .field-wide{grid-column:1/-1}.community-card-preview{grid-column:1/-1;min-height:145px;border:1px solid var(--wa-border);border-radius:18px;padding:18px;background:linear-gradient(135deg,var(--wa-accent-soft),var(--wa-surface-2));background-size:cover;background-position:center;position:relative;overflow:hidden}.community-card-preview:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.62),rgba(0,0,0,.12));pointer-events:none}.community-card-preview>div{position:relative;z-index:1;max-width:440px}.community-card-preview b{display:block;font-size:18px}.community-card-preview p{font-size:10px;line-height:1.5}.community-card-actions{grid-column:1/-1;display:flex;justify-content:flex-end;gap:10px}.field textarea{width:100%;min-height:90px;resize:vertical}
@media(max-width:680px){.community-card-form{grid-template-columns:1fr}}
/* admin promo design */
.promo-row{border-radius:16px!important;padding:15px!important;background:linear-gradient(145deg,color-mix(in srgb,var(--wa-card) 94%,var(--wa-accent) 6%),var(--wa-card))!important}.promo-row-head{align-items:center!important}.promo-actions{display:flex;gap:7px}.promo-actions button{min-height:32px;border-radius:10px;padding:0 10px}.promo-actions .danger{color:#ff7586!important;border-color:rgba(255,84,107,.25)!important;background:rgba(255,84,107,.08)!important}
/* OAuth cancel strip injected by Desktop */
#woopDesktopOauthNav{font-family:Inter,system-ui,sans-serif}


/* v8.37 official brand asset hard override: never show legacy W glyph/mask */
.brand-mark,.mobile-brand.brand-mark,.room-brand>span,.auth-logo-mark,.quick-hub-head>span,.woop-welcome-logo,.woop-welcome-logo>span,.smart-logo,.boot-mark{
  font-size:0!important;color:transparent!important;text-indent:-9999px!important;
  background-image:url('/happy/assets/woop-logo.svg')!important;background-repeat:no-repeat!important;background-position:center!important;background-size:76%!important;
}
.brand-mark:before,.mobile-brand.brand-mark:before,.room-brand>span:before,.auth-logo-mark:before,.quick-hub-head>span:before,.woop-welcome-logo:before,.woop-welcome-logo>span:before,.smart-logo:before,.boot-mark:before{
  content:none!important;display:none!important;-webkit-mask:none!important;mask:none!important;background:none!important;
}
.room-brand>span,.auth-logo-mark,.quick-hub-head>span,.woop-welcome-logo,.smart-logo,.boot-mark{overflow:hidden!important}
html[data-color-effective="light"] :is(.brand-mark,.room-brand>span,.auth-logo-mark,.quick-hub-head>span,.woop-welcome-logo,.smart-logo,.boot-mark){background-color:#fff!important}

.promo-delete-dialog{max-width:480px!important}.promo-delete-dialog h2{margin-top:5px}.promo-delete-dialog .delete-warning{border-color:rgba(255,84,107,.24)!important;background:rgba(255,84,107,.07)!important}


/* WooP official brand enforcement — uploaded WooP logo is the only W/mark surface. */
:is(.brand-mark,.mobile-brand.brand-mark,.room-brand>span,.auth-logo-mark,.quick-hub-head>span,.woop-welcome-logo,.woop-welcome-logo>span,.smart-logo,.boot-mark,.admin-brand>span,.provider-logo.woop-provider-logo){
  color:transparent!important;font-size:0!important;text-indent:-9999px!important;overflow:hidden!important;position:relative!important;
  background:#fff url('/happy/assets/woop-logo.svg') center/78% no-repeat!important;-webkit-mask:none!important;mask:none!important;
}
:is(.brand-mark,.mobile-brand.brand-mark,.room-brand>span,.auth-logo-mark,.quick-hub-head>span,.woop-welcome-logo,.woop-welcome-logo>span,.smart-logo,.boot-mark,.admin-brand>span,.provider-logo.woop-provider-logo):before{content:none!important;display:none!important;-webkit-mask:none!important;mask:none!important}
:is(.brand-mark,.mobile-brand.brand-mark,.room-brand>span,.auth-logo-mark,.quick-hub-head>span,.woop-welcome-logo,.smart-logo,.admin-brand>span) img{width:82%!important;height:82%!important;object-fit:contain!important;display:block!important}

/* v8.37.2: user-selectable accent palettes removed; WooP uses one fixed brand accent. */
html{--wa-accent:#8b5cf6;--wa-accent-2:#6d28d9;--wa-accent-soft:rgba(139,92,246,.15);--wa-glow:rgba(139,92,246,.28)}

/* WooP i18n v8.37.6: every language remains reachable with mouse/touch/keyboard */
.woop-account-menu[data-wa-view="language"]{max-height:min(680px,calc(100dvh - 88px))!important;overflow:hidden!important}
.woop-account-menu[data-wa-view="language"] .wa-menu-slider{height:min(610px,calc(100dvh - 110px))!important;min-height:300px!important;overflow:hidden!important}
.woop-account-menu[data-wa-view="language"] .wa-menu-page[data-wa-page="language"]{overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain!important;scrollbar-width:thin!important;padding-right:5px!important}
.profile-menu[data-profile-view="language"]{max-height:min(680px,calc(100dvh - 88px))!important;overflow:hidden!important}
.profile-menu[data-profile-view="language"] .profile-menu-slider{height:min(610px,calc(100dvh - 110px))!important;min-height:300px!important;overflow:hidden!important}
.profile-menu[data-profile-view="language"] .profile-menu-page[data-profile-page="language"]{overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain!important;scrollbar-width:thin!important;padding-right:5px!important}