/* Shared OKO components, with theme-aware app colors and fixed navigation. */
html[data-theme=dark]:has(body.web-ui:is(.pwa-view,.pwa-auth)){background:#111;color-scheme:dark}
html[data-theme] body.web-ui:is(.pwa-view,.pwa-auth){--app-control-line:#777;--app-hover:#333;--app-primary-hover:#d7d7d7;--app-chart-area:#ffffff18;--bg:#111!important;--panel:#191919!important;--panel-soft:#222!important;--text:#f5f5f5!important;--muted:#c0c0c0!important;--line:#444!important;--accent:#fff!important;--danger:#fff!important;--sage:#eee!important;background:#111!important;color:#f5f5f5!important;font-size:17px;padding-bottom:calc(84px + env(safe-area-inset-bottom))}
body.web-ui:is(.pwa-view,.pwa-auth) :is(.panel,.auth-panel,.personal-balance,.personal-account,.stats,.app-home-balances,.app-home-updates,.birthday-person,.role-explanation,.filter-disclosure,.optional-fields,.app-task-disclosure,.app-updates,.app-install-summary,.dashboard-update,.feature-introduction){background:var(--panel)!important;color:var(--text)!important;border-color:var(--line)!important;border-radius:2px!important;box-shadow:none}
body.web-ui:is(.pwa-view,.pwa-auth) :is(h1,h2,h3,label,legend,strong,a,.event-list a,.dashboard-upcoming-list a,.birthday-person strong,.personal-tasks a span,.dashboard-notifications a span){color:var(--text)!important}
body.web-ui:is(.pwa-view,.pwa-auth) :is(.muted,.field-hint,small,.eyebrow,.stats small,.role-explanation p,.auth-links a,.next-event-meta){color:var(--muted)!important}
body.web-ui:is(.pwa-view,.pwa-auth) :is(input,select,textarea){background:var(--panel-soft)!important;border-color:var(--app-control-line)!important;color:var(--text)!important;font-size:17px!important;border-radius:2px!important;min-height:50px}
body.web-ui:is(.pwa-view,.pwa-auth) :is(button,.button){background:var(--text)!important;color:var(--bg)!important;border-color:var(--text)!important;border-radius:2px!important;font-size:16px!important;min-height:48px}
body.web-ui:is(.pwa-view,.pwa-auth) :is(button,.button):hover{background:var(--app-primary-hover)!important;color:var(--bg)!important}
body.web-ui:is(.pwa-view,.pwa-auth) :is(.secondary,.button.secondary){background:transparent!important;color:var(--text)!important;border-color:var(--app-control-line)!important}
body.web-ui:is(.pwa-view,.pwa-auth) :is(a,button,input,select,textarea,summary):focus-visible{outline:2px solid var(--text)!important;outline-offset:4px}
body.web-ui:is(.pwa-view,.pwa-auth) :is(.notice,.notice.success,.notice.error,.notice.warning,.notice.pending){background:var(--panel-soft)!important;color:var(--text)!important;border:var(--ui-border-width,2px) solid var(--app-control-line)!important;border-radius:2px!important}
body.web-ui.pwa-view .main{padding:28px 20px 40px!important;max-width:1000px!important}
body.web-ui.pwa-view .page-head{margin-bottom:28px!important}body.web-ui.pwa-view .page-head h1{font-size:30px!important}
body.web-ui.pwa-view .next-event{padding:24px!important;background:var(--panel)!important;border:var(--ui-border-width,2px) solid var(--line)!important}
body.web-ui.pwa-view .next-event>h2{font-size:28px!important;margin:16px 0!important}
body.web-ui.pwa-view :is(.app-header,.app-navigation){background:var(--bg)!important;color:var(--text)!important;border-color:var(--line)!important;box-shadow:none!important}
body.web-ui.pwa-view .app-navigation{position:fixed!important;bottom:0!important;left:0!important;right:0!important;z-index:50;padding-bottom:env(safe-area-inset-bottom)!important;border-top:var(--ui-border-width,2px) solid var(--line)!important;border-radius:0!important}
body.web-ui.pwa-view .app-navigation a{background:transparent!important;color:var(--muted)!important;border-radius:2px!important;font-size:13px!important;min-height:64px!important;gap:5px!important}
body.web-ui.pwa-view .app-navigation a[aria-current=page]{background:var(--panel-soft)!important;color:var(--text)!important}
body.web-ui.pwa-view .app-navigation .ui-icon{display:block!important;width:24px!important;height:24px!important;stroke-width:1.6}
body.web-ui.pwa-view .app-header :is(button,a){background:transparent!important;color:var(--text)!important;border:0!important}
body.web-ui.pwa-view .app-home-balances strong,body.web-ui.pwa-view .stats :is(strong,span,small){color:var(--text)!important}
body.web-ui:is(.pwa-view,.pwa-auth) :is(th,td){background:transparent!important;color:var(--text)!important;border-color:var(--line)!important;font-size:16px!important}
body.web-ui:is(.pwa-view,.pwa-auth) thead{background:var(--panel-soft)!important}
body.web-ui:is(.pwa-view,.pwa-auth) dialog{background:var(--panel)!important;color:var(--text)!important;border-color:var(--app-control-line)!important}
body.web-ui.pwa-view :is(.calendar-day,.calendar-weekday,.calendar-agenda-day,.calendar-appointment,.feedback-kind-picker label>span){background:var(--panel)!important;color:var(--text)!important;border-color:var(--line)!important}
body.web-ui.pwa-view .calendar-day.is-today{outline:2px solid var(--text)!important;outline-offset:-2px}
body.web-ui.pwa-view .footer{display:none}
body.web-ui.pwa-auth .auth-main{display:block;padding:28px 20px}
body.web-ui.pwa-auth .app-header{background:var(--bg)!important;border-color:var(--line)!important;color:var(--text)!important}
body.web-ui.pwa-view .reels-stage button{background:#111d!important;color:var(--text)!important;border:var(--ui-border-width,2px) solid var(--app-control-line)!important}
body.web-ui.pwa-view .app-navigation a,body.web-ui.pwa-view .app-navigation a:is(:hover,:active,[aria-current]){background:transparent!important;border:0!important;box-shadow:none!important;transform:none!important}
body.web-ui.pwa-view .app-navigation a .ui-icon{transition:opacity .2s ease,transform .25s ease;color:var(--muted)}
body.web-ui.pwa-view .app-navigation a:hover .ui-icon{color:var(--text);transform:scale(1.08)}
body.web-ui.pwa-view .app-navigation a[aria-current] .ui-icon{color:var(--text);stroke-width:2.3}
body.web-ui.pwa-view .app-navigation a>span{display:none!important}
body.web-ui.pwa-view .next-event .quick-response button{background:transparent!important;color:var(--text)!important;border:var(--ui-border-width,2px) solid var(--app-control-line)!important}
body.web-ui.pwa-view .next-event .quick-response.is-selected button{background:var(--text)!important;color:var(--bg)!important;border-color:var(--text)!important}
body.web-ui.pwa-view .next-event .quick-response:not(.is-selected) button:hover{background:var(--app-hover)!important;color:var(--text)!important}
body.web-ui:is(.pwa-view,.pwa-auth) :is(.empty,.empty-state,.media-submenu,.finance-quick-filters,.feedback-kind-picker label>span,.calendar-display-controls){background:var(--panel-soft)!important;color:var(--text)!important;border-color:var(--line)!important}
body.web-ui.pwa-view .next-event .attendance-feedback>.notice{background:var(--panel-soft)!important;color:var(--text)!important}
body.web-ui.pwa-view .reels-shell{color:var(--text)}
body.web-ui.pwa-view .reels-comments-dialog :is(.reels-comment,.reels-comment-composer){background:var(--panel-soft)!important;color:var(--text)!important;border-color:var(--line)!important}
body.web-ui.pwa-view :is(.app-home-balances,.app-home-updates,.app-birthday-card,.app-more-links,.feature-introduction,.app-task-disclosure,.app-updates){border-radius:2px!important}
body.web-ui.pwa-view :is(.app-home-balances,.app-home-updates,.app-birthday-card,.app-more-links) :is(p,a,summary,strong){font-size:16px!important;line-height:1.55!important}
body.web-ui.pwa-view :is(.app-home-balances,.app-home-updates,.app-birthday-card) small{font-size:14px!important}
body.web-ui.pwa-view .feature-introduction{padding:12px 20px!important}
body.web-ui.pwa-view .next-event-actions{align-items:stretch!important}
body.web-ui.pwa-view .next-event-actions>.button{display:flex;align-items:center;justify-content:center;flex:1;min-height:52px!important}
body.web-ui.pwa-view[data-page="/reels"]{height:100dvh!important;display:block!important;overflow:hidden!important}
body.web-ui.pwa-view[data-page="/reels"] .main{padding:0!important;margin:0 auto!important;height:calc(100dvh - 81px - env(safe-area-inset-bottom))!important;max-width:700px!important}
body.web-ui.pwa-view[data-page="/reels"] .reels-shell{height:100%!important}
body.web-ui.pwa-view[data-page="/reels"] .reels-stage:not(.reels-previewing){height:100%!important;max-height:none!important;border-radius:0!important}
body.web-ui.pwa-view .reels-swipe-neighbor>:is(video,img){object-fit:contain!important;background:#080808}
html[data-theme] body.web-ui:is(.pwa-view,.pwa-auth) :is(input,select,textarea):not([type=range]):not([type=checkbox]):not([type=radio]){background:var(--panel-soft)!important;color:var(--text)!important;border-color:var(--app-control-line)!important;color-scheme:dark}
body.web-ui.pwa-view .app-month-filter{background:var(--panel)!important;border-radius:2px!important}
body.web-ui.pwa-view .app-home-media{border-radius:2px!important;background:var(--panel)!important}
body.web-ui.pwa-view .reels-social{right:12px!important;bottom:130px!important;width:52px!important}
body.web-ui.pwa-view .reels-social>.reels-views{width:52px!important;transform:none!important;font-size:11px!important;display:flex!important;flex-direction:column!important;overflow-wrap:anywhere;white-space:normal}
body.web-ui.pwa-view .reels-filter{bottom:26px!important;right:12px!important;max-width:calc(100% - 24px);gap:4px!important}
body.web-ui.pwa-view .reels-filter button{min-height:44px!important;min-width:44px!important;font-size:14px!important;padding:8px 10px!important}
body.web-ui.pwa-view .reels-caption{bottom:80px!important;left:12px!important;right:80px!important;max-width:calc(100% - 92px)}
body.web-ui.pwa-view .reels-info{min-width:44px!important;min-height:44px!important;flex-shrink:0!important}
/* Component colors must follow their surface, including nested captions and links. */
body.web-ui.pwa-view :is(.profile-avatar-editor,.media-toolbar,.media-filter-bar,.event-detail-layout,.notification-item,.dashboard-hint){background:var(--panel-soft)!important;color:var(--text)!important;border-color:var(--line)!important}
body.web-ui.pwa-view .profile-layout .panel{background:transparent!important}
body.web-ui.pwa-view :is(.member-card p,.member-card .saldo,.media-card p,.media-card small,.event-facts dt,.event-facts dd,.event-detail-layout .event-creator,.table-mobile-label,.weekday,.chart-summary span,.chart-summary b){color:var(--muted)!important}
html[data-theme] body.web-ui:is(.pwa-view,.pwa-auth) a.button:not(.secondary){color:var(--bg)!important;background:var(--text)!important}
html[data-theme] body.web-ui:is(.pwa-view,.pwa-auth) a.button:not(.secondary):hover{color:var(--bg)!important;background:var(--app-primary-hover)!important}
body.web-ui.pwa-view .event-detail-layout .event-main-actions>.button{background:transparent!important;color:var(--text)!important;border-color:var(--app-control-line)!important}
body.web-ui.pwa-view .event-detail-layout .event-main-actions>.button:hover{background:var(--app-hover)!important;color:var(--text)!important}
body.web-ui.pwa-view .notification-open,body.web-ui.pwa-view .notification-open:hover{background:transparent!important;color:var(--text)!important;border:0!important;transform:none!important}
body.web-ui.pwa-view .notification-open :is(span,strong){color:inherit!important}
body.web-ui.pwa-view .calendar-day :is(.event,.birthday,.calendar-regional-item){background:var(--app-hover)!important;color:var(--text)!important;border-color:var(--app-control-line)!important}
body.web-ui.pwa-view .calendar-day .event:hover{background:var(--line)!important;color:var(--text)!important}
body.web-ui.pwa-view select{background-image:url(select-chevron-dark.svg)!important}
body.web-ui.pwa-view :is(.finance-chart text,.chart-kpi){fill:var(--text);color:var(--text)!important}
body.web-ui.pwa-view .chart-line{stroke:var(--text)}body.web-ui.pwa-view .chart-grid{stroke:var(--line)}body.web-ui.pwa-view .chart-point{fill:var(--text)}
body.web-ui.pwa-view .chart-area{fill:var(--app-chart-area)}
body.web-ui.pwa-view :is(.reel-upload-choices,.reel-upload-selection,.reels-comments-head,.reels-parent,.reels-reply-context,.is-new-comment,.reels-replies,.reels-comment-editor){background:var(--panel-soft)!important;color:var(--text)!important;border-color:var(--line)!important}
body.web-ui.pwa-view .reels-comment p{color:var(--text)!important}
body.web-ui.pwa-view .reels-comment-head time,body.web-ui.pwa-view .reels-comments-dialog :is([role=status],.field-hint),body.web-ui.pwa-view .reel-upload-dialog :is(.muted,small,[role=status]){color:var(--muted)!important}
body.web-ui.pwa-view :is(.reels-comment-actions button,.reels-comment-like,.reels-comments-head button){background:transparent!important;color:var(--text)!important;border-color:var(--app-control-line)!important}
body.web-ui.pwa-view :is(.reels-comment-actions button,.reels-comment-like,.reels-comments-head button):hover{background:var(--app-hover)!important;color:var(--text)!important}
body.web-ui.pwa-view .reels-comment-like[aria-pressed=true] .ui-icon{fill:var(--text)!important;stroke:var(--text)!important}
body.web-ui.pwa-view :is(.app-calendar-create,.app-birthday,.app-reminder-settings){background:var(--panel-soft)!important;border-radius:2px!important;border-color:var(--line)!important}