/* Shared clear material: content stays grounded; controls carry the glass. */
:root {
  color-scheme: light;
  --lg-canvas: #f1f3f5;
  --lg-ink: #20272c;
  --lg-muted: #606b73;
  --lg-accent: #087f72;
  --lg-line: rgba(49, 64, 76, .10);
  --lg-glass: rgba(255, 255, 255, .52);
  --lg-control-fill: rgba(248, 250, 252, .22);
  --lg-control-edge: rgba(255, 255, 255, .5);
  --lg-control-shadow: 0 3px 8px rgba(27,42,53,.07);
  --lg-control-backdrop: blur(8px) saturate(130%);
  --lg-dock-backdrop: blur(6px) saturate(160%);
  --lg-edge: rgba(255, 255, 255, .92);
  --lg-shadow: 0 8px 24px rgba(27, 42, 53, .09), 0 1px 4px rgba(27, 42, 53, .05), inset 0 1px 0 var(--lg-edge), inset 0 -1px 0 rgba(70, 85, 98, .08);
  --lg-float: 0 20px 56px rgba(27, 42, 53, .17), 0 2px 8px rgba(27, 42, 53, .06), inset 0 1px 1px #fff, inset 0 -1px 1px rgba(70, 85, 98, .12);
  --lg-ease: cubic-bezier(.22, .8, .24, 1);
  --bg: var(--lg-canvas); --card-bg: #fff; --card: #fff;
  --text: var(--lg-ink); --text-light: var(--lg-muted); --text-secondary: var(--lg-muted);
  --primary: var(--lg-accent); --primary-dark: #056357; --primary-bg: #e3f2ee;
  --border: var(--lg-line); --border-light: var(--lg-line);
  --hg-ink: var(--lg-ink); --hg-muted: var(--lg-muted); --hg-brand: var(--lg-accent);
  --om-mobile-canvas: var(--lg-canvas); --om-mobile-ink: var(--lg-ink);
  --om-mobile-muted: var(--lg-muted); --om-mobile-surface: rgba(255,255,255,.6);
}
html:root, html:root body[data-page] {
  --bg:var(--lg-canvas) !important; --text:var(--lg-ink) !important; --text-light:var(--lg-muted) !important;
  --primary:var(--lg-accent) !important; --primary-dark:#056357 !important; --primary-bg:#e3f2ee !important;
  --card-bg:rgba(255,255,255,.72) !important;
  --om-ink:var(--lg-ink) !important; --om-muted:var(--lg-muted) !important;
  --om-line:var(--lg-line) !important; --om-surface:rgba(255,255,255,.72) !important;
  --om-glass:var(--lg-glass) !important; --om-accent:var(--lg-accent) !important;
  --om-accent-strong:#087f72 !important; --lc-ink:var(--lg-ink) !important;
  --lc-muted:var(--lg-muted) !important; --lc-gold:var(--lg-accent) !important;
}
html:root, html:root body[data-page] {
  background: var(--lg-canvas) !important;
  background-image: none !important;
  color: var(--lg-ink) !important;
  letter-spacing: 0;
  text-shadow: none !important;
}
html:root body[data-page]::before, html:root body[data-page]::after,
html:root #welcomeOverlay::before, html:root #welcomeOverlay::after,
html:root .welcome-orb { display: none !important; }
html:root body[data-page] :is(.portal, .member-app, .page, .perf-app, .clock-container, .container, #app) {
  background: transparent !important;
  background-image: none !important;
}
/* Only the mobile/tablet sign-in state owns the full viewport. */
html:root.om-mobile-glass body[data-page="home"].om-login-layout { padding:0 !important; min-height:100dvh; }
html:root.om-mobile-glass body[data-page="home"].om-login-layout > .portal {
  display:flex !important; align-items:center !important; justify-content:center !important;
  width:100% !important; max-width:none !important; margin:0 !important;
  min-height:100vh; min-height:100dvh;
  padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left)) !important;
  box-sizing:border-box;
}
html:root.om-mobile-glass body[data-page="home"].om-login-layout #loginView {
  width:100% !important; max-width:340px !important; margin:0 !important; flex:0 1 340px;
}
html:root body[data-page] :is(.home-overview, .home-barrage, .home-leaderboard, .notice-board,
  .desktop-community-grid .home-leaderboard, .desktop-community-grid .home-barrage,
  .member-sidebar, .detail-panel, .perf-panel, .history-card, .today-leaves,
  .admin-composer, .panel, .ops-panel) {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html:root body[data-page] :is(.home-overview, .home-barrage, .home-leaderboard, .notice-board,
  .portal-card, .stat-card, .mobile-record-card)::before,
html:root body[data-page] :is(.home-overview, .home-barrage, .home-leaderboard, .notice-board,
  .portal-card, .stat-card, .mobile-record-card)::after { display: none !important; }

/* Repeating data cells are translucent paint, avoiding a blur layer per row. */
html:root body[data-page] :is(.home-status-card, .home-leader-store-card, .mobile-record-card,
  .member-item, .table-card, .calendar, .clock-card, .summary-card, .stat-card, .stats-card,
  .notice-card, .message-card, .notice-center-item, .staff-card, .result-box, .detail-card,
  .emp-stat-card, .emp-summary-card, .emp-leave-card, .attendance-store-card,
  .attendance-roster-row, .history-item, .record-item, .card, .ops-stat) {
  color: var(--lg-ink);
  background: rgba(255,255,255,.72) !important;
  border-color: rgba(255,255,255,.88) !important;
  box-shadow: inset 0 1px 0 #fff, 0 1px 3px rgba(32,47,61,.035) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html:root body[data-page] :is(.home-leader-card, .mobile-field-group, .overview-item, .fixed-salary-item) {
  background: transparent !important;
  box-shadow: none !important;
  border-color: var(--lg-line) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html:root body[data-page] :is(.portal-title, .portal-brand, .home-welcome-date, .home-welcome-text,
  .home-status-card b, .home-leader-store-title b, .home-leader-result b, .home-leader-result strong,
  .home-barrage-head b, .attendance-store-name, .panel-head, .modal-title, .clock-time,
  .daily-calendar-month, .member-name, .detail-name, .page-title) { color: var(--lg-ink) !important; text-shadow:none !important; }
html:root body[data-page] :is(.home-leader-metric em, .home-status-detail, .home-barrage-head small,
  .home-leader-store-title span, .daily-room-strip-title, .member-meta) { color: var(--lg-muted) !important; }

/* Floating tool surfaces reveal the scrolling content beneath them. */
html:root body[data-page] :is(.dm-toolbar, .search-box, .store-tabs, .tabs, .tab-nav,
  .leave-control-strip, .header, .daily-room-strip, .daily-availability-board,
  .barrage-compose, .profile-menu, .toolbar, .member-toolbar, .page > .head) {
  color: var(--lg-ink) !important;
  background: var(--lg-glass) !important;
  border: 1px solid var(--lg-edge) !important;
  box-shadow: var(--lg-shadow) !important;
  backdrop-filter: blur(18px) saturate(145%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(145%) !important;
}
html:root body[data-page] :is(.header, .page > .head) { border-radius: 18px !important; }
html:root body[data-page] :is(.tabs, .store-tabs, .tab-nav) { border-radius: 999px !important; }
html:root body[data-page] :is(button, .btn, .tab, .store-tab, .welcome-enter) {
  transition: background-color .18s ease, border-color .18s ease, box-shadow .22s ease, transform .22s var(--lg-ease), opacity .18s ease;
}
html:root body[data-page] :is(.btn, .btn-outline, .back, .read-all, .login-btn, .barrage-send,
  .barrage-emoji, .barrage-mute, .store-tab, .tab, .profile-action,
  .daily-calendar-nav, .leave-month-step, .leave-history-trigger, .perf-date-step,
  .daily-date-trigger, .attendance-date-switch, .compose-modes button,
  .monthly-goal-close, .profile-sheet-close, .modal-close) {
  color: var(--lg-ink) !important;
  background: rgba(255,255,255,.54) !important;
  border: 1px solid rgba(255,255,255,.94) !important;
  box-shadow: inset 0 1px 1px #fff, inset 0 -1px 1px rgba(72,86,98,.08), 0 3px 10px rgba(35,47,60,.06) !important;
  border-radius: 999px !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html:root body[data-page] :is(.btn-primary, .login-btn, .welcome-enter, .barrage-send,
  .compose-send, .reply-send, .leave-approve-btn, .attendance-save, .mobile-add-row button,
  .add-row button, .clock-btn-in, .clock-btn-out) {
  background: rgba(220,242,235,.86) !important;
  color: #056357 !important;
  border: 1px solid rgba(255,255,255,.95) !important;
  box-shadow: inset 0 1px 1px #fff, inset 0 -1px 0 rgba(6,105,84,.15), 0 4px 14px rgba(8,105,87,.12) !important;
  text-shadow: none !important;
  border-radius: 999px !important;
}
html:root body[data-page] :is(.store-tab.active, .tab.active, .tab-btn.active,
  .attendance-date-switch.active, .compose-modes button.active, .radio-label.selected) {
  color: #056357 !important;
  background: rgba(200,232,222,.7) !important;
  border-color: rgba(255,255,255,.95) !important;
  box-shadow: inset 0 1px 1px #fff, 0 2px 8px rgba(25,73,58,.1) !important;
}
html:root body[data-page] :is(.btn-danger, .leave-reject-btn, .profile-action.danger) {
  color: #b62f43 !important;
  background: rgba(255,232,237,.86) !important;
}
html:root body[data-page] :is(button, a, input, select, textarea):focus-visible {
  outline: 2px solid #087f72 !important;
  outline-offset: 3px;
}
html:root body[data-page] :is(.login-input, .form-control, .search-input, .search-box input,
  .barrage-compose input, .compose-fields textarea, .reply-dialog textarea) {
  color: var(--lg-ink) !important;
  background: rgba(255,255,255,.7) !important;
  border: 1px solid var(--lg-line) !important;
  box-shadow: inset 0 1px 3px rgba(35,47,60,.035) !important;
}
html:root body[data-page] :is(.daily-calendar-hero, .perf-date-hero, .liquid-calendar-header) {
  color: var(--lg-ink) !important;
  background: rgba(225,237,235,.66) !important;
  text-shadow: none !important;
}
html:root body[data-page] :is(.daily-calendar-day.is-selected, .perf-date-day.is-selected) {
  background: #087f72 !important; color:#fff !important; box-shadow:none !important;
}
/* No outer blur: only the dialog samples the underlying screen. */
html:root body[data-page] :is(.modal-overlay, .modal-mask, .profile-sheet-mask,
  .daily-calendar-mask, .therapist-picker-mask, .room-status-confirm-mask, .daily-room-dialog-mask,
  .evidence-mask, .mobile-editor-mask, .reply-mask, .notice-center-mask, .monthly-goal-mask,
  .desktop-private-message-mask, .leave-request-confirm-mask, .avatar-crop-mask,
  .attendance-evidence, .attendance-detail, .clock-celebration, .lc-date-mask,
  .daily-picker-overlay, .lock-modal, .member-create-mask) {
  background: rgba(24,32,39,.20) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html:root body[data-page] :is(.modal, .modal-content, .profile-sheet, .daily-calendar-sheet,
  .therapist-picker-sheet, .room-status-confirm-dialog, .daily-room-dialog, .evidence-sheet,
  .mobile-editor, .reply-dialog, .notice-center, .monthly-goal-card, .desktop-private-message-dialog,
  .avatar-crop-sheet, .attendance-detail-sheet, .celebration-card,
  .leave-request-confirm, .barrage-emoji-picker, .liquid-date-picker, .login-box,
  .perf-date-picker, .lc-date-sheet, .daily-picker, .lock-dialog, .leave-history-picker, .member-create-dialog) {
  color: var(--lg-ink) !important;
  background: rgba(250,252,253,.79) !important;
  border: 1px solid rgba(255,255,255,.95) !important;
  border-radius: 26px !important;
  box-shadow: var(--lg-float) !important;
  backdrop-filter: blur(24px) saturate(155%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(155%) !important;
  animation: lg-dialog-in .3s var(--lg-ease) both;
}
/* Compact goal dialog on touch devices; desktop keeps its original geometry. */
html:root.om-mobile-glass #monthlyGoalMask { padding:20px 24px !important; }
html:root.om-mobile-glass #monthlyGoalMask .monthly-goal-card {
  box-sizing:border-box; width:min(320px,100%) !important; padding:18px 12px 14px !important;
  max-height:calc(100vh - 40px); max-height:calc(100dvh - 40px);
  overflow-y:auto; overscroll-behavior:contain; border-radius:24px !important;
}
html:root.om-mobile-glass #monthlyGoalMask .monthly-goal-close { top:5px; right:5px; width:40px; height:40px; font-size:21px; }
html:root.om-mobile-glass #monthlyGoalMask .monthly-goal-kicker { margin:0 28px; font-size:8px; letter-spacing:1px; }
html:root.om-mobile-glass #monthlyGoalMask .monthly-goal-title { margin:9px 0 3px; font-size:19px; line-height:1.35; letter-spacing:0; }
html:root.om-mobile-glass #monthlyGoalMask .monthly-goal-subtitle { font-size:11px; line-height:1.4; }
html:root.om-mobile-glass #monthlyGoalMask .monthly-goal-mascot { width:104px; height:108px; scale:.7; margin:-8px auto -16px; }
html:root.om-mobile-glass #monthlyGoalMask .monthly-goal-stores { gap:8px; margin-top:2px; }
html:root.om-mobile-glass #monthlyGoalMask .monthly-goal-store { padding:8px; border-radius:15px; }
html:root.om-mobile-glass #monthlyGoalMask .monthly-goal-store-head { flex-direction:column; align-items:flex-start; gap:2px; padding-bottom:5px; font-size:12px; }
html:root.om-mobile-glass #monthlyGoalMask .monthly-goal-store-head small { font-size:9px; }
html:root.om-mobile-glass #monthlyGoalMask .monthly-goal-metric { margin-top:6px; }
html:root.om-mobile-glass #monthlyGoalMask .monthly-goal-metric-head { gap:3px; flex-wrap:wrap; }
html:root.om-mobile-glass #monthlyGoalMask .monthly-goal-metric-head b { font-size:12px; }
html:root.om-mobile-glass #monthlyGoalMask .monthly-goal-track { height:5px; margin-top:4px; }
html:root.om-mobile-glass #monthlyGoalMask .monthly-goal-message { margin-top:8px; padding:7px 8px; font-size:11px; line-height:1.45; }
html:root.om-mobile-glass #monthlyGoalMask .monthly-goal-thanks { margin-top:8px; font-size:12px; line-height:1.5; }
html:root .monthly-goal-card::before { display:none !important; }
html:root body[data-page] :is(.monthly-goal-title, .monthly-goal-thanks, .monthly-goal-metric-head b) { color:var(--lg-ink) !important; }
html:root body[data-page] :is(.monthly-goal-kicker, .monthly-goal-subtitle, .monthly-goal-store-head, .monthly-goal-message) { color:var(--lg-muted) !important; }
html:root body[data-page] .monthly-goal-store { background:rgba(255,255,255,.45) !important; box-shadow:none !important; }
html:root #welcomeOverlay.welcome-glass-overlay { background:var(--lg-canvas) !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
html:root #welcomeOverlay .welcome-glass-card { background:rgba(255,255,255,.46) !important; border:1px solid #fff !important; box-shadow:var(--lg-float) !important; backdrop-filter:blur(20px) !important; -webkit-backdrop-filter:blur(20px) !important; }
html:root #welcomeOverlay :is(.welcome-brand, .welcome-family-label, .welcome-family-member) { color:var(--lg-ink) !important; text-shadow:none !important; }
html:root #welcomeOverlay .welcome-family { background:transparent !important; box-shadow:none !important; backdrop-filter:none !important; }
html:root #welcomeOverlay.welcome-glass-overlay .welcome-glass-card {
  min-height:0 !important; height:auto !important; max-height:calc(100dvh - 32px);
  overflow:auto; padding:32px 20px !important;
}
html:root #welcomeOverlay.welcome-glass-overlay .welcome-enter {
  color:#056357 !important; background:rgba(218,240,232,.86) !important;
  border:1px solid #fff !important; box-shadow:inset 0 1px 1px #fff,0 5px 16px rgba(8,105,87,.12) !important;
  text-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
}
html:root #welcomeOverlay .welcome-family-member i { background:#e3ecee !important; color:#344e58 !important; box-shadow:0 2px 8px rgba(25,43,52,.08) !important; }
html:root #welcomeOverlay .welcome-divider { background:rgba(8,127,114,.24) !important; }

/* One live blur for the Dock; its moving lens is inexpensive paint. */
html:root body[data-page] #om-tabbar.om-dock-v3 {
  touch-action:pan-y;
  background:rgba(250,252,253,.10) !important;
  border:1px solid rgba(255,255,255,.48) !important;
  border-color:rgba(255,255,255,.64) rgba(58,72,84,.08) rgba(58,72,84,.14) !important;
  border-radius:999px !important;
  box-shadow:0 5px 16px rgba(27,42,53,.12) !important;
  backdrop-filter:var(--lg-dock-backdrop) !important;
  -webkit-backdrop-filter:var(--lg-dock-backdrop) !important;
  overflow:hidden !important;
}
html:root body[data-page] #om-tabbar.om-dock-v3::before {
  display:none !important;
  background:transparent !important;
  box-shadow:none !important;
}
html:root body[data-page] #om-tabbar.om-dock-v3::after { display:none !important; }
html:root body[data-page] #om-tabbar.om-dock-v3 .om-dock-liquid {
  opacity:0 !important;
  background:rgba(0,102,214,.055) !important;
  border:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
html:root body[data-page] #om-tabbar.om-dock-v3 .om-dock-liquid::before,
html:root body[data-page] #om-tabbar.om-dock-v3 .om-dock-liquid::after { display:none !important; background:none !important; }
html:root body[data-page] #om-tabbar.om-dock-v3 .om-dock-liquid.is-ready {
  transition:transform .34s cubic-bezier(.2,.85,.25,1), width .28s var(--lg-ease), opacity .16s ease !important;
}
html:root body[data-page] #om-tabbar.om-dock-v3:is(.is-pressing,.lg-dragging) .om-dock-liquid { opacity:1 !important; }
html:root body[data-page] #om-tabbar.om-dock-v3 .om-dock-item { background:transparent !important; box-shadow:none !important; color:#202124 !important; }
html:root body[data-page] #om-tabbar.om-dock-v3 .om-dock-item.is-active { color:#0066d6 !important; }
/* Navigation color expresses selection, not a separate color per module. */
html:root body[data-page] #om-tabbar.om-dock-v3 :is(.om-dock-icon,.om-dock-label,.om-dock-icon svg) { color:inherit !important; }
html:root body[data-page] #om-tabbar.om-dock-v3 .om-dock-icon { opacity:1 !important; filter:none !important; transition:color .16s ease !important; }
html:root body[data-page] #om-tabbar.om-dock-v3.lg-dragging { touch-action:pan-y; }
html:root body[data-page] #om-tabbar.om-dock-v3.lg-dragging .om-dock-liquid { transition:none !important; }
html:root body[data-page] #om-tabbar.om-dock-v3 .om-dock-label { text-shadow:none !important; }
html:root body[data-page] #om-nav-hint { display:none !important; }
html:root body[data-page] :is(th, td, .mobile-field-value) { backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
html:root body[data-page] thead th { background:#edf1f3 !important; color:var(--lg-ink) !important; }
html:root body[data-page] :is(.header h1,.head h1,.header small,.head small) { color:var(--lg-ink) !important; }
html:root body[data-page] :is(button:disabled, .btn:disabled) { opacity:.45 !important; box-shadow:none !important; }
/* Explicit component scopes supersede the older mobile theme's ID groups. */
html:root body[data-page="home"] :is(#homeLeaderboard, #attendanceBoard, .home-overview) {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html:root body[data-page="home"] #homeLeaderboard .home-leader-card {
  background: transparent !important; box-shadow:none !important;
  border:0 !important; border-bottom:1px solid var(--lg-line) !important;
  border-radius:0 !important;
}
html:root body[data-page="home"] #homeLeaderboard .home-leader-card:last-child { border-bottom:0 !important; }
html:root body[data-page="home"] :is(#homeClockHint,#homeEmployeeDetail) {
  font-weight:500 !important; font-style:normal !important; line-height:1.35 !important;
  text-shadow:none !important; color:var(--lg-muted) !important;
  font-size:10px !important;
}
html:root body[data-page] :is(.perf-tabs,.member-store-tabs,.type-tabs,.view-tabs,.ops-segment) {
  background:rgba(223,229,233,.55) !important; border:1px solid rgba(255,255,255,.9) !important;
  border-radius:999px !important; box-shadow:inset 0 1px 1px #fff !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
}
html:root body[data-page] :is(.perf-tab,.member-store-tab,.type-tab,.view-tab,.ops-segment button) {
  background:transparent !important; color:var(--lg-muted) !important;
  border-color:transparent !important; border-radius:999px !important; box-shadow:none !important;
}
html:root body[data-page] :is(.perf-tab.active,.member-store-tab.active,.type-tab.active,.view-tab.active,.ops-segment button.active) {
  background:rgba(255,255,255,.82) !important; color:var(--lg-ink) !important;
  border-color:#fff !important; box-shadow:0 2px 6px rgba(40,56,68,.1),inset 0 1px 1px #fff !important;
}
html:root body[data-page] :is(#mobileAddBtn,.dm-btn-add,.profile-action-button,.room-status-confirm-save,.daily-room-confirm,.save-btn) {
  color:#056357 !important; background:rgba(218,240,232,.86) !important;
  border:1px solid rgba(255,255,255,.95) !important; border-radius:999px !important;
  box-shadow:inset 0 1px 1px #fff,0 3px 10px rgba(8,105,87,.09) !important;
  text-shadow:none !important;
}
html:root body[data-page] :is(.profile-close,.profile-logout,.reply-cancel,.daily-room-cancel,.room-status-confirm-cancel) {
  color:var(--lg-ink) !important; background:rgba(255,255,255,.65) !important;
  border:1px solid #fff !important; border-radius:999px !important;
  box-shadow:inset 0 1px 1px #fff,0 3px 10px rgba(35,47,60,.06) !important;
}
html:root body[data-page] .profile-logout { color:#b62f43 !important; }
html:root body[data-page] :is(.evidence-confirm,.avatar-crop-confirm,.btn-save,.btn-add,#clockInBtn,#clockOutBtn) {
  color:#056357 !important; background:rgba(218,240,232,.86) !important;
  border:1px solid #fff !important; border-radius:999px !important;
  box-shadow:inset 0 1px 1px #fff,0 3px 10px rgba(8,105,87,.09) !important;
}
html:root body[data-page] :is(#clockInBtn,#clockOutBtn)::before,html:root body[data-page] :is(#clockInBtn,#clockOutBtn)::after { display:none !important; }
html:root body[data-page] .evidence-status:not(.error):not(.success) { background:rgba(228,237,239,.7) !important; color:var(--lg-muted) !important; }
html:root body[data-page] :is(.evidence-camera,.evidence-cancel,.attendance-detail-close,.avatar-crop-cancel,.back-btn) {
  color:var(--lg-ink) !important; background:rgba(255,255,255,.65) !important;
  border:1px solid #fff !important; border-radius:999px !important;
}
html:root body[data-page] :is(.profile-action-group,.profile-message-center) { background:rgba(255,255,255,.38) !important; border-color:#fff !important; box-shadow:none !important; }
html:root body[data-page] :is(.profile-user-role,.profile-action-copy span,.daily-room-dialog h3,.daily-room-dialog-kicker) { color:var(--lg-muted) !important; }
html:root body[data-page] :is(.attendance-shift-chip,.attendance-status-chip,.profile-action-card,.member-consume-card,.detail-header,.result-header,.history-title) {
  color:var(--lg-ink) !important; background:rgba(233,239,241,.66) !important;
  border-color:var(--lg-line) !important; box-shadow:none !important;
}
html:root body[data-page] :is(.attendance-status-chip.is-leave) { background:#f5ece3 !important; color:#805329 !important; }
html:root body[data-page="audit"] :is(.glass,button) { background:var(--lg-glass) !important; color:var(--lg-ink) !important; border:1px solid var(--lg-edge) !important; box-shadow:var(--lg-shadow) !important; }
html:root body[data-page] .profile-sheet { margin:0 auto max(10px,env(safe-area-inset-bottom)) !important; width:calc(100% - 20px) !important; max-width:540px; }
html:root body[data-page] :is(.barrage-compose,.notice-publish-btn,.desktop-private-message-btn) { border-radius:999px !important; }
html:root body[data-page] :is(.notice-publish-btn,.desktop-private-message-btn,.daily-room-dialog-save) {
  background:rgba(218,240,232,.86) !important; color:#056357 !important;
  border:1px solid #fff !important; box-shadow:inset 0 1px 1px #fff,0 3px 10px rgba(8,105,87,.09) !important;
}
html:root body[data-page] :is(.daily-room-dialog-cancel,.daily-room-dialog-save) { border-radius:999px !important; }
html:root body[data-page] #attendanceBoard :is(.attendance-store-card,.attendance-roster-row) {
  background:rgba(255,255,255,.72) !important; border-color:var(--lg-line) !important;
  box-shadow:none !important; color:var(--lg-ink) !important;
}
html:root body[data-page] #attendanceBoard :is(select,.attendance-store-title,.attendance-store-count,.attendance-teacher b,.attendance-order-actions button,.attendance-view-date,.attendance-heading-icon) {
  color:var(--lg-ink) !important; background:rgba(228,237,239,.7) !important;
  border-color:var(--lg-line) !important; box-shadow:none !important;
}
html:root body[data-page] #attendanceBoard :is(.attendance-store-name,.attendance-date,.attendance-roster-columns,.attendance-eyebrow,.attendance-title) { color:var(--lg-ink) !important; background:transparent !important; }
html:root body[data-page] #attendanceBoard .attendance-date-switch.active { color:#056357 !important; background:rgba(200,232,222,.7) !important; box-shadow:inset 0 1px 1px #fff,0 2px 8px rgba(25,73,58,.1) !important; }
html:root body[data-page] .member-create-dialog { max-height:calc(100dvh - 32px); overflow:auto; }
html:root body[data-page] #om-page-pull-refresh { color:var(--lg-ink) !important; background:var(--lg-glass) !important; }
html:root body[data-page="admin"] .admin-card { overflow-x:auto; }
html:root body[data-page] :is(.notice-admin-actions button,#privateMessageAdminToggle,#noticeAdminToggle) {
  background:rgba(218,240,232,.86) !important; color:#056357 !important;
  border:1px solid #fff !important; border-radius:999px !important; box-shadow:var(--lg-shadow) !important;
}
html:root body[data-page="home"] #saveAttendanceBtn { color:#056357 !important; scroll-margin-bottom:110px; }
@media(min-width:769px) { html:root body[data-page="home"] .portal { padding-bottom:110px !important; } }
html:root body[data-page] :is(.lc-date-hero,.perf-date-hero,.daily-calendar-hero) { background:rgba(226,236,238,.68) !important; color:var(--lg-ink) !important; }
html:root body[data-page] :is(.lc-date-body,.perf-date-body,.daily-calendar-body) { background:transparent !important; }
html:root body[data-page] :is(.lc-date-year,.perf-date-year,.daily-calendar-hero-year,.lc-date-week,.perf-date-week,.daily-calendar-weekdays,.lc-date-nav,.perf-date-nav) { color:var(--lg-muted) !important; }
html:root body[data-page] :is(.lc-date-day.is-selected,.perf-date-day.selected,.daily-calendar-day.is-selected) { color:#fff !important; background:#087f72 !important; box-shadow:none !important; }
html:root body[data-page] :is(.lc-date-actions button,.perf-date-actions button,.daily-calendar-actions button) { color:#056357 !important; }
html:root body[data-page] #mobileRecordList .mobile-record-card,
html:root body[data-page="daily"] .mobile-record-card {
  box-shadow:0 1px 3px rgba(32,47,61,.035) !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
}
html:root body[data-page] #mobileRecordList .mobile-record-card.pending-payment-card { background:#fff9eb !important; border-color:#d8c39b !important; }
html:root body[data-page] #mobileRecordList .mobile-record-card.fraud-card { background:#fff0a8 !important; border-color:#d5a91a !important; }
html:root body[data-page="member"] #resultList .member-item {
  background:transparent !important; border:0 !important; border-bottom:1px solid var(--lg-line) !important;
  border-radius:0 !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
}
html:root body[data-page="member"] #resultList .member-item:last-child { border-bottom:0 !important; }
html:root body[data-page="member"] #resultList .member-item.active { background:rgba(218,240,232,.65) !important; }
html:root body[data-page] #mobileEditor .mobile-field-group { background:transparent !important; box-shadow:none !important; border-color:var(--lg-line) !important; }
html:root body[data-page] #mobileEditor :is(h3,h4,.mobile-field-label) { color:var(--lg-ink) !important; }
html:root body[data-page] :is(.mobile-close,.member-create-dialog button) {
  background:rgba(255,255,255,.65) !important; color:var(--lg-ink) !important;
  border:1px solid #fff !important; border-radius:999px !important;
}
html:root body[data-page] .member-create-dialog button:last-child { background:rgba(218,240,232,.86) !important; color:#056357 !important; }
html:root body[data-page] .perf-month-grid button.selected { background:#087f72 !important; color:#fff !important; box-shadow:none !important; }
html:root body[data-page] :is(.emp-leave-calendar,.salary-detail,.member-detail,.admin-card,.data-card) {
  background:rgba(255,255,255,.72) !important; border-color:var(--lg-line) !important;
  box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
}
@keyframes lg-dialog-in { from { opacity:0; translate:0 9px; scale:.965; } to { opacity:1; translate:0 0; scale:1; } }
@keyframes lg-view-in { from { opacity:.98; transform:translateY(3px); } to { opacity:1; transform:none; } }
@media (max-width:768px) {
  @view-transition { navigation:auto; }
  html:root body[data-page] { view-transition-name:none !important; }
  html:root body[data-page] #om-tabbar.om-dock-v3 { bottom:max(12px,env(safe-area-inset-bottom)) !important; }
  ::view-transition-group(root) { animation-duration:.2s !important; }
  ::view-transition-old(root) { animation:none !important; }
  ::view-transition-new(root) { animation:lg-view-in .2s ease-out both !important; }
  ::view-transition-group(om-mobile-dock) { animation-duration:.25s !important; }
}
/* Device-gated stylesheet: also covers landscape tablets without touching PCs. */
html:root body[data-page] #om-tabbar.om-dock-v3 {
  left:50% !important; right:auto !important;
  width:min(calc(100% - 24px),var(--lg-dock-width,296px)) !important;
  height:60px !important; min-height:60px !important; padding:5px 7px !important; gap:0 !important;
  transform:translateX(-50%) !important;
}
html:root body[data-page] #om-tabbar.om-dock-v3 .om-dock-item {
  flex:1 1 0 !important; min-width:0 !important; height:48px !important;
  padding:2px 0 !important; gap:2px !important;
}
html:root body[data-page] #om-tabbar.om-dock-v3 .om-dock-icon { width:25px !important; height:25px !important; }
html:root body[data-page] #om-tabbar.om-dock-v3 .om-dock-label {
  display:block !important; font-size:9px !important; line-height:12px !important; font-weight:600 !important;
}
html:root body[data-page] #om-tabbar.om-dock-v3 .om-dock-liquid { top:5px !important; height:48px !important; }
html:root body[data-page] #om-tabbar.om-dock-v3 .om-dock-item .om-dock-icon,
html:root body[data-page] #om-tabbar.om-dock-v3 .om-dock-item.is-active .om-dock-icon { transform:none !important; }
/* Use a thin shared material for controls; never apply it to table data/status chips. */
html:root.om-mobile-glass body[data-page] :is(.btn,.btn-outline,.btn-primary,.login-btn,.welcome-enter,
  .barrage-send,.barrage-emoji,.barrage-mute,.read-all,.back,.profile-action-button,.profile-close,.profile-logout,
  .mobile-close,.daily-room-dialog-save,.daily-room-dialog-cancel,.avatar-crop-confirm,.avatar-crop-cancel,
  .evidence-confirm,.evidence-camera,.evidence-cancel,.attendance-detail-close,.compose-send,.reply-send,.reply-cancel,
  .attendance-save,.notice-compose-toggle,.notice-publish-btn,.monthly-goal-close,.dm-btn-add,
  .daily-calendar-nav,.perf-date-nav,.perf-date-step,.leave-month-step,.member-create-dialog button,
  #mobileAddBtn,#clockInBtn,#clockOutBtn,#saveAttendanceBtn,#privateMessageAdminToggle,#noticeAdminToggle) {
  background:var(--lg-control-fill) !important;
  border:1px solid var(--lg-control-edge) !important;
  box-shadow:var(--lg-control-shadow) !important;
  backdrop-filter:var(--lg-control-backdrop) !important;
  -webkit-backdrop-filter:var(--lg-control-backdrop) !important;
  text-shadow:none !important;
}
/* Nested controls sample the parent's glass, avoiding another live blur. */
html:root.om-mobile-glass body[data-page] :is(.profile-sheet,.modal,.mobile-editor,.barrage-compose,
  .daily-room-dialog,.avatar-crop-sheet,.evidence-sheet,.member-create-dialog,.daily-calendar-sheet,
  .perf-date-picker,.monthly-goal-card,.dm-toolbar,.welcome-glass-card) :is(button,#mobileAddBtn,#clockInBtn,#clockOutBtn,#saveAttendanceBtn,#privateMessageAdminToggle,#noticeAdminToggle) {
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
}
/* One continuous composer surface: input, emoji and send are not extra glass pills. */
html:root.om-mobile-glass body[data-page="home"] #homeBarrageCompose {
  background:rgba(245,248,250,.2) !important;
  border:1px solid rgba(255,255,255,.48) !important;
  box-shadow:0 4px 12px rgba(27,42,53,.08) !important;
  backdrop-filter:blur(9px) saturate(140%) !important;
  -webkit-backdrop-filter:blur(9px) saturate(140%) !important;
  padding:5px 7px !important; gap:4px !important;
}
html:root.om-mobile-glass body[data-page="home"] #homeBarrageCompose :is(#homeBarrageInput,.barrage-emoji,.barrage-send) {
  background:transparent !important; border:0 !important; box-shadow:none !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  appearance:none; -webkit-appearance:none;
}
html:root.om-mobile-glass body[data-page="home"] #homeBarrageCompose #homeBarrageInput { padding:8px 10px !important; }
html:root.om-mobile-glass body[data-page="home"] #homeBarrageCompose > button { min-width:36px; min-height:36px; }
html:root.om-mobile-glass body[data-page="home"] #homeBarrageCompose > button:active { background:rgba(32,39,44,.06) !important; }
html:root.om-mobile-glass body[data-page="home"] :is(#homeBarrageCompose,#barrageMuteButton,#barragePinLatestButton)::before,
html:root.om-mobile-glass body[data-page="home"] :is(#homeBarrageCompose,#barrageMuteButton,#barragePinLatestButton)::after,
html:root.om-mobile-glass body[data-page="home"] #homeBarrageCompose > button::before,
html:root.om-mobile-glass body[data-page="home"] #homeBarrageCompose > button::after { display:none !important; }
html:root.om-mobile-glass body[data-page="home"] #homeBarrageCompose:focus-within { border-color:rgba(8,127,114,.45) !important; }
html:root.om-mobile-glass body[data-page="home"] #homeBarrageInput:focus-visible { outline:none !important; }
html:root.om-mobile-glass #welcomeOverlay.welcome-glass-overlay .welcome-enter {
  background:var(--lg-control-fill) !important; border-color:var(--lg-control-edge) !important;
  box-shadow:var(--lg-control-shadow) !important;
}
@media (prefers-reduced-motion:reduce) {
  @view-transition { navigation:none; }
  html:root body[data-page] #om-tabbar.om-dock-v3 .om-dock-liquid.is-ready { transition:none !important; }
  html:root body[data-page] *, html:root body[data-page] *::before, html:root body[data-page] *::after {
    animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
}
@media (prefers-contrast:more), (prefers-reduced-transparency:reduce) {
  :root { --lg-glass:rgba(255,255,255,.97); --lg-line:#71818a; }
  html:root.om-mobile-glass { --lg-control-fill:#fff; --lg-control-edge:#71818a; --lg-control-backdrop:none; }
  html:root.om-mobile-glass body[data-page] button { backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
  html:root.om-mobile-glass body[data-page="home"] #homeBarrageCompose { background:#fff !important; border-color:#71818a !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
  html:root body[data-page] :is(.modal,.profile-sheet,.monthly-goal-card,.daily-calendar-sheet,#om-tabbar.om-dock-v3) { background:#fff !important; border-color:#71818a !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  html:root.om-mobile-glass { --lg-control-fill:rgba(255,255,255,.96); }
  html:root body[data-page] :is(.modal,.profile-sheet,.monthly-goal-card,.daily-calendar-sheet,#om-tabbar.om-dock-v3,.dm-toolbar,.tabs) { background:rgba(255,255,255,.97) !important; }
}
/* Keep this small persistent navigation surface live on lower-memory phones.
   Other surfaces still use the inexpensive opaque fallback. */
html:root.om-mobile-glass.lg-lite { --lg-control-fill:rgba(255,255,255,.94); --lg-control-backdrop:none; --lg-dock-backdrop:blur(4px) saturate(135%); }
html:root.om-mobile-glass.lg-lite body[data-page="home"] #homeBarrageCompose { background:rgba(255,255,255,.94) !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
html:root.om-mobile-glass.lg-lite body[data-page] button { backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
html:root.om-mobile-glass.lg-lite body[data-page] :is(.btn,.btn-outline,.btn-primary,.login-btn,.welcome-enter,.barrage-send,.barrage-emoji,.barrage-mute,.read-all,.back,.profile-action-button,.profile-close,.profile-logout,.mobile-close,.daily-room-dialog-save,.daily-room-dialog-cancel,.avatar-crop-confirm,.avatar-crop-cancel,.evidence-confirm,.evidence-camera,.evidence-cancel,.attendance-detail-close,.compose-send,.reply-send,.reply-cancel,.attendance-save,.notice-compose-toggle,.notice-publish-btn,.monthly-goal-close,.dm-btn-add,.daily-calendar-nav,.perf-date-nav,.perf-date-step,.leave-month-step,.member-create-dialog button,#mobileAddBtn,#clockInBtn,#clockOutBtn,#saveAttendanceBtn,#privateMessageAdminToggle,#noticeAdminToggle) { backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
html:root.lg-lite body[data-page] :is(.dm-toolbar,.search-box,.store-tabs,.tabs,.tab-nav,.leave-control-strip,.header,.daily-room-strip,.barrage-compose,.toolbar,.page > .head,.modal,.profile-sheet,.monthly-goal-card,.member-create-dialog,.daily-calendar-sheet,.perf-date-picker,.lc-date-sheet,.mobile-editor,.avatar-crop-sheet,.evidence-sheet,.attendance-detail-sheet,.celebration-card,.daily-room-dialog,.therapist-picker-sheet,.reply-dialog) {
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important; background:rgba(255,255,255,.94) !important;
}