/* Existing monochrome buttons reduced to three consistent functional styles. */
body.web-ui {--ui-action-text:#171717;--ui-action-hover:#777}
body.web-ui :is(.web-menu,.account-menu-content,.footer,.next-event) {--ui-action-text:#fff;--ui-action-hover:#ccc}
body.web-ui.web-menu-open .site-header {--ui-action-text:#fff;--ui-action-hover:#ccc}
body.web-ui:not(.pwa-view):not(.pwa-auth) .reels-stage {--ui-action-text:#fff;--ui-action-hover:#fff}
html[data-theme] body.web-ui.web-menu-open:not(.pwa-view):not(.pwa-auth) .site-header .header-account {visibility:hidden!important;pointer-events:none!important}
html[data-theme] body.web-ui.web-menu-open:not(.pwa-view):not(.pwa-auth) .site-header .notification-bell {color:#fff!important}
html[data-theme] body.web-ui.web-menu-open:not(.pwa-view):not(.pwa-auth) .site-header .notification-bell:is(:hover,:focus-visible) {color:#ccc!important}
html[data-theme] body.web-ui:not(.pwa-view):not(.pwa-auth) :is(main#main,.site-header,.web-menu,.footer,dialog,.app-notification-drawer) [data-ui-button] {box-shadow:none!important;transform:none!important;text-decoration:none!important;transition:background-color .16s ease,color .16s ease,opacity .16s ease}
html[data-theme] body.web-ui:not(.pwa-view):not(.pwa-auth) :is(main#main,.site-header,.web-menu,.footer,dialog,.app-notification-drawer) [data-ui-button]:is([data-ui-button=primary],[data-ui-button=secondary]) {display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 20px!important;border:0!important;border-radius:2px!important;font-family:inherit;font-size:17px!important;font-weight:600!important;line-height:24px!important;text-align:center!important;white-space:normal;box-sizing:border-box}
html[data-theme] body.web-ui:not(.pwa-view):not(.pwa-auth) :is(main#main,.site-header,.web-menu,.footer,dialog,.app-notification-drawer) [data-ui-button=primary] {background:#171717!important;color:#fff!important}
html[data-theme] body.web-ui:not(.pwa-view):not(.pwa-auth) :is(main#main,.site-header,.web-menu,.footer,dialog,.app-notification-drawer) [data-ui-button=primary]:is(:hover,:focus-visible) {background:#444!important;color:#fff!important}
html[data-theme] body.web-ui:not(.pwa-view):not(.pwa-auth) :is(main#main,.site-header,.web-menu,.footer,dialog,.app-notification-drawer) [data-ui-button=secondary] {background:#d3d3d3!important;color:#171717!important}
html[data-theme] body.web-ui:not(.pwa-view):not(.pwa-auth) :is(main#main,.site-header,.web-menu,.footer,dialog,.app-notification-drawer) [data-ui-button=secondary]:is(:hover,:focus-visible) {background:#bdbdbd!important;color:#171717!important}
html[data-theme] body.web-ui:not(.pwa-view):not(.pwa-auth) :is(main#main,.site-header,.web-menu,.footer,dialog,.app-notification-drawer) [data-ui-button=secondary][aria-pressed=true],
html[data-theme] body.web-ui:not(.pwa-view):not(.pwa-auth) main#main .is-selected [data-ui-button=secondary] {background:#353535!important;color:#fff!important}
html[data-theme] body.web-ui:not(.pwa-view):not(.pwa-auth) :is(main#main,.site-header,.web-menu,.footer,dialog,.app-notification-drawer) [data-ui-button=text] {background:transparent!important;color:var(--ui-action-text)!important;border:0!important}
html[data-theme] body.web-ui:not(.pwa-view):not(.pwa-auth) :is(main#main,.site-header,.web-menu,.footer,dialog,.app-notification-drawer) [data-ui-button=text]:is(:hover,:focus-visible) {background:transparent!important;color:var(--ui-action-hover)!important}
html[data-theme] body.web-ui:not(.pwa-view):not(.pwa-auth) :is(main#main,.site-header,.web-menu,.footer,dialog,.app-notification-drawer) [data-ui-button]>.ui-icon {color:inherit!important}
html[data-theme] body.web-ui:not(.pwa-view):not(.pwa-auth) :is(main#main,.site-header,.web-menu,.footer,dialog,.app-notification-drawer) [data-ui-button]>span:not(.badge) {color:inherit!important}
html[data-theme] body.web-ui:not(.pwa-view):not(.pwa-auth) :is(main#main,.site-header,.web-menu,.footer,dialog,.app-notification-drawer) [data-ui-button]:focus-visible {outline:2px solid currentColor!important;outline-offset:3px}
html[data-theme] body.web-ui:not(.pwa-view):not(.pwa-auth) :is(main#main,.site-header,.web-menu,.footer,dialog,.app-notification-drawer) [data-ui-button]:is(:disabled,[aria-disabled=true]) {opacity:.45;cursor:default;pointer-events:none}
html[data-theme] body.web-ui:not(.pwa-view):not(.pwa-auth) :is(main#main,.site-header,.web-menu,.footer,dialog,.app-notification-drawer) [data-ui-button][hidden] {display:none!important}
@media(prefers-reduced-motion:reduce) {body.web-ui [data-ui-button] {transition:none!important}}
html[data-theme] body.web-ui:not(.pwa-view):not(.pwa-auth) main#main .reels-stage :is(button,summary) .ui-icon {color:#fff!important;stroke:#fff!important;stroke-width:1.8}
html[data-theme] body.web-ui:not(.pwa-view):not(.pwa-auth) main#main .reels-stage :is(button,summary):is(:hover,:focus-visible) .ui-icon {stroke-width:2.8!important}
html[data-theme] body.web-ui:not(.pwa-view):not(.pwa-auth) main#main .reels-social [data-reels-like] .ui-icon {fill:none!important}
html[data-theme] body.web-ui:not(.pwa-view):not(.pwa-auth) main#main .reels-social [data-reels-like]:is(:hover,:focus-visible,[aria-pressed=true]) .ui-icon {color:#e05264!important;stroke:#e05264!important;fill:#e05264!important}
/* The same three roles use the app's active light/dark palette. */
html[data-theme] body.web-ui:is(.pwa-view,.pwa-auth) {--app-button-primary:var(--text);--app-button-primary-text:var(--bg);--app-button-secondary:var(--app-secondary-bg,var(--panel-soft));--app-button-secondary-text:var(--text);--app-button-hover:#444}
html[data-theme=light] body.web-ui:is(.pwa-view,.pwa-auth) {--app-button-hover:#e2e2e2}
html[data-theme] body.web-ui:is(.pwa-view,.pwa-auth) :is(main#main,.app-header,.app-notification-drawer,dialog) [data-ui-button] {border:0!important;box-shadow:none!important;transition:background-color .16s ease,color .16s ease,opacity .16s ease}
html[data-theme] body.web-ui:is(.pwa-view,.pwa-auth) :is(main#main,.app-header,.app-notification-drawer,dialog) [data-ui-button=primary] {background:var(--app-button-primary)!important;color:var(--app-button-primary-text)!important}
html[data-theme] body.web-ui:is(.pwa-view,.pwa-auth) :is(main#main,.app-header,.app-notification-drawer,dialog) [data-ui-button=primary]:is(:hover,:focus-visible) {background:#dedede!important;color:#171717!important}
html[data-theme=light] body.web-ui:is(.pwa-view,.pwa-auth) :is(main#main,.app-header,.app-notification-drawer,dialog) [data-ui-button=primary]:is(:hover,:focus-visible) {background:#444!important;color:#fff!important}
html[data-theme] body.web-ui:is(.pwa-view,.pwa-auth) :is(main#main,.app-header,.app-notification-drawer,dialog) [data-ui-button=secondary] {background:var(--app-button-secondary)!important;color:var(--app-button-secondary-text)!important}
html[data-theme] body.web-ui:is(.pwa-view,.pwa-auth) :is(main#main,.app-header,.app-notification-drawer,dialog) [data-ui-button=secondary]:is(:hover,:focus-visible) {background:var(--app-button-hover)!important;color:var(--text)!important}
html[data-theme] body.web-ui:is(.pwa-view,.pwa-auth) :is(main#main,.app-header,.app-notification-drawer,dialog) [data-ui-button=secondary][aria-pressed=true],
html[data-theme] body.web-ui:is(.pwa-view,.pwa-auth) main#main .is-selected [data-ui-button=secondary] {background:var(--text)!important;color:var(--bg)!important}
html[data-theme] body.web-ui:is(.pwa-view,.pwa-auth) :is(main#main,.app-header,.app-notification-drawer,dialog) [data-ui-button=text] {background:transparent!important;color:var(--text)!important}
html[data-theme] body.web-ui:is(.pwa-view,.pwa-auth) :is(main#main,.app-header,.app-notification-drawer,dialog) [data-ui-button=text]:is(:hover,:focus-visible) {background:transparent!important;color:var(--muted)!important}
html[data-theme] body.web-ui:is(.pwa-view,.pwa-auth) :is(main#main,.app-header,.app-notification-drawer,dialog) [data-ui-button]>span:not(.badge) {color:inherit!important}
html[data-theme] body.web-ui:is(.pwa-view,.pwa-auth) :is(main#main,.app-header,.app-notification-drawer,dialog) [data-ui-button]:is(:disabled,[aria-disabled=true]) {opacity:.45;cursor:default;pointer-events:none}
html[data-theme] body.web-ui:is(.pwa-view,.pwa-auth) :is(main#main,.app-header,.app-notification-drawer,dialog) [data-ui-button][hidden] {display:none!important}
