/* Stats dashboard */
body.stats-mode{
  overflow:hidden;
}

body.stats-mode #appMain,
body.stats-mode #appMain.controls-collapsed{
  display:grid !important;
  grid-template-columns:300px minmax(0, 1fr) !important;
  min-height:calc(100vh - 96px) !important;
}

body.stats-mode #sidePanel,
body.stats-mode.v305-floating-controls #sidePanel,
body.stats-mode.v305-floating-controls.v305-panel-collapsed #sidePanel,
body.stats-mode #appMain.controls-collapsed #sidePanel{
  display:block !important;
  position:relative !important;
  inset:auto !important;
  width:auto !important;
  max-width:none !important;
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
  border-right:1px solid rgba(15,23,42,.09) !important;
  border-bottom:0 !important;
  padding:18px 14px !important;
  overflow:auto !important;
}

body.stats-mode #sidePanel > .section:not(#classSection):not(#sessionSection):not(#studentsSection),
body.stats-mode #sidePanel #classSection .panel-actions,
body.stats-mode #sidePanel #sessionActions,
body.stats-mode #sidePanel #v323ClassEditBtn,
body.stats-mode #sidePanel #v230SessionEditBtn,
body.stats-mode #sidePanel #status,
body.stats-mode #sidePanel #controlsCloseBtn,
body.stats-mode #controlsToggleBtn,
body.stats-mode #stageWrap,
body.stats-mode #v275WakeLockToggle,
body.stats-mode #undoEditBtn,
body.stats-mode .footer-teaching-hint{
  display:none !important;
}

body.stats-mode #sidePanel #classSection,
body.stats-mode #sidePanel #sessionSection,
body.stats-mode #sidePanel #studentsSection{
  display:block !important;
}

body.stats-mode #sidePanel .collapsible-section.is-collapsed .collapsible-body{
  display:block !important;
}

body.stats-mode #sidePanel .section-toggle{
  display:none !important;
}

body.stats-mode #sidePanel .students,
body.stats-mode #sidePanel #studentsList{
  max-height:none !important;
  overflow:visible !important;
  border:0 !important;
  background:transparent !important;
}

#liveEditToggle,
.live-edit-toggle{
  grid-template-columns:repeat(3, 1fr) !important;
  width:264px !important;
}

#liveEditToggle::before,
.live-edit-toggle::before{
  width:calc(33.333% - 3px) !important;
}

#liveEditToggle:has(#editModeBtn.active-edit)::before,
#liveEditToggle:has(#editModeBtn.active)::before,
#liveEditToggle:has(#editModeBtn[aria-pressed="true"])::before,
.live-edit-toggle:has(#editModeBtn.active-edit)::before,
.live-edit-toggle:has(#editModeBtn.active)::before,
.live-edit-toggle:has(#editModeBtn[aria-pressed="true"])::before{
  transform:translateX(100%) !important;
}

#liveEditToggle:has(#statsModeBtn.active-stats)::before,
#liveEditToggle:has(#statsModeBtn.active)::before,
#liveEditToggle:has(#statsModeBtn[aria-pressed="true"])::before,
.live-edit-toggle:has(#statsModeBtn.active-stats)::before,
.live-edit-toggle:has(#statsModeBtn.active)::before,
.live-edit-toggle:has(#statsModeBtn[aria-pressed="true"])::before{
  transform:translateX(200%) !important;
}

#liveEditToggle #statsModeBtn,
.live-edit-toggle #statsModeBtn{
  position:relative !important;
  display:inline-flex !important;
  align-items:center !important;
  z-index:1 !important;
  min-width:0 !important;
  width:100% !important;
  height:38px !important;
  min-height:38px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:999px !important;
  background:transparent !important;
  box-shadow:none !important;
  font-weight:800 !important;
  justify-content:center !important;
}

#liveEditToggle #statsModeBtn:not(.active-stats):not(.active):not([aria-pressed="true"]),
.live-edit-toggle #statsModeBtn:not(.active-stats):not(.active):not([aria-pressed="true"]){
  color:#101827 !important;
}

#liveEditToggle #statsModeBtn.active-stats,
#liveEditToggle #statsModeBtn.active,
#liveEditToggle #statsModeBtn[aria-pressed="true"],
.live-edit-toggle #statsModeBtn.active-stats,
.live-edit-toggle #statsModeBtn.active,
.live-edit-toggle #statsModeBtn[aria-pressed="true"]{
  color:#fff !important;
}

#statsDashboard{
  display:none;
  grid-column:2;
  grid-row:1;
  min-width:0;
  height:calc(100vh - 108px);
  padding:22px;
  overflow:auto;
  background:
    radial-gradient(circle at 10% 0%, rgba(91,108,255,.10), transparent 30%),
    linear-gradient(180deg, #f7f8fc 0%, #eef2f7 100%);
}

body.stats-mode #statsDashboard{
  display:block;
}

.stats-dashboard-header{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  margin:0 0 18px;
}

.stats-dashboard-eyebrow{
  margin:0 0 5px;
  color:#64748b;
  font-size:12px;
  font-weight:800;
  letter-spacing:.11em;
  text-transform:uppercase;
}

.stats-dashboard-header h2{
  margin:0;
  color:#101827;
  font-size:clamp(24px, 3vw, 38px);
  line-height:1.08;
  letter-spacing:-.035em;
}

.stats-dashboard-scope{
  margin:7px 0 0;
  color:#64748b;
  font-size:14px;
}

.stats-scope-chip{
  flex:0 0 auto;
  max-width:360px;
  padding:9px 13px;
  border:1px solid rgba(79,70,229,.16);
  border-radius:999px;
  background:rgba(255,255,255,.82);
  color:#4338ca;
  font-size:13px;
  font-weight:800;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.stats-metric-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(132px, 1fr));
  gap:12px;
  margin-bottom:14px;
}

.stats-metric-card,
.stats-panel{
  border:1px solid rgba(15,23,42,.08);
  background:rgba(255,255,255,.90);
  box-shadow:0 14px 36px rgba(15,23,42,.08);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}

.stats-metric-card{
  min-height:105px;
  padding:15px 16px;
  border-radius:18px;
}

.stats-metric-label{
  display:block;
  margin-bottom:9px;
  color:#64748b;
  font-size:11px;
  font-weight:800;
  letter-spacing:.07em;
  text-transform:uppercase;
}

.stats-metric-value{
  display:block;
  color:#0f172a;
  font-size:28px;
  font-weight:850;
  line-height:1;
  letter-spacing:-.03em;
}

.stats-metric-detail{
  display:block;
  margin-top:7px;
  color:#64748b;
  font-size:12px;
  line-height:1.3;
}

.stats-layout{
  display:grid;
  grid-template-columns:minmax(0, 1.05fr) minmax(320px, .95fr);
  gap:14px;
}

.stats-panel{
  min-width:0;
  padding:17px;
  border-radius:20px;
}

.stats-panel-wide{
  grid-column:1 / -1;
}

.stats-panel-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}

.stats-panel h3{
  margin:0;
  color:#172033;
  font-size:16px;
  letter-spacing:-.015em;
}

.stats-panel-description{
  margin:4px 0 0;
  color:#64748b;
  font-size:12px;
  line-height:1.4;
}

.stats-chart{
  width:100%;
  min-height:250px;
}

.stats-chart svg{
  display:block;
  width:100%;
  height:auto;
  overflow:visible;
}

.stats-empty{
  display:grid;
  min-height:220px;
  place-items:center;
  padding:24px;
  border:1px dashed rgba(100,116,139,.28);
  border-radius:16px;
  color:#64748b;
  text-align:center;
}

.stats-heatmap-legend{
  display:flex;
  align-items:center;
  gap:8px;
  color:#64748b;
  font-size:11px;
  white-space:nowrap;
}

.stats-heatmap-gradient{
  width:88px;
  height:9px;
  border-radius:999px;
  background:#9ca3af;
}

.stats-heatmap-gradient.is-positive{
  background:linear-gradient(90deg, #b9dcff, #5b9df5, #2563d9, #123868, #000);
}

.stats-heatmap-gradient.is-negative{
  background:linear-gradient(90deg, #3b0707, #6b1010, #991b1b, #dc4c4c, #fca5a5);
}

.stats-heatmap-gradient.is-mixed{
  background:linear-gradient(90deg, #3b0707, #991b1b, #fca5a5, #9ca3af, #b9dcff, #2563d9, #000);
}

.stats-heatmap{
  display:grid;
  gap:6px;
  min-height:250px;
  align-content:center;
  justify-content:center;
  padding:12px;
  border-radius:16px;
  background:#f8fafc;
  overflow:auto;
}

.stats-heat-seat{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:48px;
  min-height:38px;
  padding:5px;
  border:2px solid rgba(255,255,255,.76);
  border-radius:10px;
  background:#9ca3af;
  color:#fff;
  font-size:16px;
  font-weight:900;
  letter-spacing:-.03em;
  line-height:1.15;
  text-align:center;
  text-shadow:0 1px 2px rgba(15,23,42,.48);
  box-shadow:0 4px 11px rgba(15,23,42,.12);
  cursor:pointer;
}

.stats-heat-seat.score-neutral{
  background:#9ca3af;
}

.stats-heat-seat.score-positive-1{
  background:#b9dcff;
  color:#16324f;
  text-shadow:none;
}

.stats-heat-seat.score-positive-2{
  background:#5b9df5;
}

.stats-heat-seat.score-positive-3{
  background:#2563d9;
}

.stats-heat-seat.score-positive-4{
  background:#123868;
}

.stats-heat-seat.score-positive-5{
  background:#000;
}

.stats-heat-seat.score-negative-1{
  background:#fca5a5;
  color:#601313;
  text-shadow:none;
}

.stats-heat-seat.score-negative-2{
  background:#dc4c4c;
}

.stats-heat-seat.score-negative-3{
  background:#991b1b;
}

.stats-heat-seat.score-negative-4{
  background:#6b1010;
}

.stats-heat-seat.score-negative-5{
  background:#3b0707;
}

.stats-heat-seat:hover,
.stats-heat-seat:focus-visible,
.stats-heat-seat.is-selected{
  z-index:2;
  outline:3px solid #312e81;
  outline-offset:2px;
  transform:translateY(-1px);
}

.stats-heat-initials{
  display:block;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
}

.stats-insights{
  display:grid;
  gap:9px;
  margin:0;
  padding:0;
  list-style:none;
}

.stats-insights li{
  position:relative;
  padding:11px 12px 11px 34px;
  border-radius:13px;
  background:#f5f7ff;
  color:#334155;
  font-size:13px;
  line-height:1.4;
}

.stats-insights li::before{
  content:'';
  position:absolute;
  left:13px;
  top:16px;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#6366f1;
  box-shadow:0 0 0 4px rgba(99,102,241,.12);
}

.stats-student-search{
  width:100% !important;
  margin:0 0 8px;
}

#sidePanel #studentsList .stats-student-row{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  width:100%;
  min-height:40px;
  margin:0 0 5px;
  padding:8px 9px !important;
  border:1px solid rgba(15,23,42,.08) !important;
  border-radius:11px !important;
  background:#fff !important;
  color:#1e293b !important;
  box-shadow:none !important;
  text-align:left;
}

#sidePanel #studentsList .stats-student-row:hover{
  border-color:rgba(79,70,229,.30) !important;
  background:#f8f8ff !important;
}

#sidePanel #studentsList .stats-student-row.is-selected{
  border-color:#6366f1 !important;
  background:#eef2ff !important;
  color:#312e81 !important;
}

.stats-student-name{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:12px;
  font-weight:750;
}

.stats-student-score{
  color:#475569;
  font-size:12px;
  font-weight:850;
}

@media (max-width:1100px){
  .stats-metric-grid{
    grid-template-columns:repeat(2, minmax(130px, 1fr));
  }

  .stats-layout{
    grid-template-columns:1fr;
  }

  .stats-panel-wide{
    grid-column:auto;
  }
}

@media (max-width:760px){
  body.stats-mode{
    overflow:auto;
  }

  body.stats-mode #appMain,
  body.stats-mode #appMain.controls-collapsed{
    grid-template-columns:1fr !important;
  }

  body.stats-mode #sidePanel,
  body.stats-mode.v305-floating-controls #sidePanel{
    max-height:38vh !important;
    border-right:0 !important;
    border-bottom:1px solid rgba(15,23,42,.09) !important;
  }

  #liveEditToggle,
  .live-edit-toggle{
    width:min(264px, calc(100vw - 30px)) !important;
  }

  #statsDashboard{
    grid-column:1;
    height:auto;
    min-height:60vh;
    padding:14px;
  }

  .stats-dashboard-header{
    align-items:flex-start;
    flex-direction:column;
  }

  .stats-metric-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

/* Prevent legacy native panel owners flashing during the handoff into Edit. */
body.stats-native-edit-settling #sidePanel{
  display:none !important;
  width:0 !important;
  max-width:0 !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
  transform:translateX(-108%) !important;
}

/* Native phone and tablet shells use the existing floating panel button in Stats. */
body.v392-native-iphone.stats-mode #appMain,
body.v392-native-iphone.stats-mode #appMain.controls-collapsed,
body.v404-native-ipad.stats-mode #appMain,
body.v404-native-ipad.stats-mode #appMain.controls-collapsed{
  position:relative !important;
  display:block !important;
  width:100vw !important;
  height:100dvh !important;
  min-height:100dvh !important;
  max-height:100dvh !important;
  padding:0 !important;
  margin:0 !important;
  overflow:hidden !important;
}

body.v392-native-iphone.stats-mode #statsDashboard,
body.v404-native-ipad.stats-mode #statsDashboard{
  position:fixed !important;
  inset:0 !important;
  z-index:100000 !important;
  display:block !important;
  box-sizing:border-box !important;
  grid-column:auto !important;
  width:100vw !important;
  height:100dvh !important;
  min-height:100dvh !important;
  max-height:100dvh !important;
  overflow:auto !important;
  -webkit-overflow-scrolling:touch !important;
}

body.v392-native-iphone.stats-mode #statsDashboard{
  padding:calc(64px + env(safe-area-inset-top, 0px)) 12px calc(14px + env(safe-area-inset-bottom, 0px)) !important;
}

body.v404-native-ipad.stats-mode #statsDashboard{
  padding:calc(86px + env(safe-area-inset-top, 0px)) calc(18px + env(safe-area-inset-right, 0px)) calc(18px + env(safe-area-inset-bottom, 0px)) calc(18px + env(safe-area-inset-left, 0px)) !important;
}

body.v392-native-iphone.stats-mode:not(.stats-native-panel-open) #sidePanel,
body.v404-native-ipad.stats-mode:not(.stats-native-panel-open) #sidePanel{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
  transform:translateX(-108%) !important;
}

body.v392-native-iphone.stats-mode.stats-native-panel-open #sidePanel,
body.v404-native-ipad.stats-mode.stats-native-panel-open #sidePanel{
  position:fixed !important;
  inset:0 auto 0 0 !important;
  z-index:100520 !important;
  display:block !important;
  box-sizing:border-box !important;
  height:100dvh !important;
  min-height:100dvh !important;
  max-height:100dvh !important;
  margin:0 !important;
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:auto !important;
  transform:translateX(0) !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  -webkit-overflow-scrolling:touch !important;
}

body.v392-native-iphone.stats-mode.stats-native-panel-open #sidePanel{
  width:min(88vw, 380px) !important;
  max-width:min(88vw, 380px) !important;
  padding:calc(66px + env(safe-area-inset-top, 0px)) 14px calc(16px + env(safe-area-inset-bottom, 0px)) !important;
}

body.v404-native-ipad.stats-mode.stats-native-panel-open #sidePanel{
  width:min(var(--v404-panel-w, 360px), 35vw) !important;
  max-width:min(var(--v404-panel-w, 360px), 35vw) !important;
  padding:calc(74px + env(safe-area-inset-top, 0px)) 16px calc(18px + env(safe-area-inset-bottom, 0px)) calc(16px + env(safe-area-inset-left, 0px)) !important;
}

body.v392-native-iphone.stats-mode:not(.welcome-active):not(.vpaywall-locked) #controlsToggleBtn,
body.v404-native-ipad.stats-mode:not(.welcome-active):not(.vpaywall-locked) #controlsToggleBtn{
  position:fixed !important;
  top:calc(14px + env(safe-area-inset-top, 0px)) !important;
  left:calc(14px + env(safe-area-inset-left, 0px)) !important;
  right:auto !important;
  bottom:auto !important;
  z-index:100760 !important;
  display:inline-flex !important;
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:auto !important;
}

body.v392-native-iphone.stats-mode #controlsCloseBtn,
body.v404-native-ipad.stats-mode #controlsCloseBtn{
  display:none !important;
}

body.v392-native-iphone #liveEditToggle{
  display:inline-grid !important;
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  align-items:center !important;
  width:min(240px, calc(100vw - 76px)) !important;
  min-width:0 !important;
  max-width:240px !important;
  height:46px !important;
  min-height:46px !important;
  padding:4px !important;
}

body.v392-native-iphone #liveEditToggle button,
body.v392-native-iphone #liveEditToggle #statsModeBtn{
  display:grid !important;
  place-items:center !important;
  align-self:center !important;
  min-width:0 !important;
  width:100% !important;
  height:38px !important;
  min-height:38px !important;
  margin:0 !important;
  padding:0 !important;
  font-size:13px !important;
  line-height:1 !important;
}

body.v404-native-ipad #liveEditToggle{
  display:inline-grid !important;
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  width:300px !important;
  min-width:300px !important;
  max-width:300px !important;
}

body.v404-native-ipad #liveEditToggle button,
body.v404-native-ipad #liveEditToggle #statsModeBtn{
  min-width:0 !important;
  width:100% !important;
  padding:0 !important;
  font-size:17px !important;
}

/* Capacitor-native marker: owns Stats layout even before the final device shell class settles. */
body.stats-mode.stats-native-shell #appMain,
body.stats-mode.stats-native-shell #appMain.controls-collapsed{
  position:relative !important;
  display:block !important;
  width:100vw !important;
  height:100dvh !important;
  min-height:100dvh !important;
  max-height:100dvh !important;
  padding:0 !important;
  margin:0 !important;
  overflow:hidden !important;
}

body.stats-mode.stats-native-shell #statsDashboard{
  position:fixed !important;
  inset:0 !important;
  z-index:100000 !important;
  display:block !important;
  box-sizing:border-box !important;
  grid-column:auto !important;
  width:100vw !important;
  height:100dvh !important;
  min-height:100dvh !important;
  max-height:100dvh !important;
  padding:calc(86px + env(safe-area-inset-top, 0px)) calc(18px + env(safe-area-inset-right, 0px)) calc(18px + env(safe-area-inset-bottom, 0px)) calc(18px + env(safe-area-inset-left, 0px)) !important;
  overflow:auto !important;
  -webkit-overflow-scrolling:touch !important;
}

body.v392-native-iphone.stats-mode.stats-native-shell #statsDashboard{
  padding:calc(64px + env(safe-area-inset-top, 0px)) 12px calc(14px + env(safe-area-inset-bottom, 0px)) !important;
}

body.stats-mode.stats-native-shell:not(.stats-native-panel-open) #sidePanel{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
  transform:translateX(-108%) !important;
}

body.stats-mode.stats-native-shell.stats-native-panel-open #sidePanel{
  position:fixed !important;
  inset:0 auto 0 0 !important;
  z-index:100520 !important;
  display:block !important;
  box-sizing:border-box !important;
  width:min(var(--v404-panel-w, 360px), 35vw) !important;
  max-width:min(var(--v404-panel-w, 360px), 35vw) !important;
  height:100dvh !important;
  min-height:100dvh !important;
  max-height:100dvh !important;
  margin:0 !important;
  padding:calc(74px + env(safe-area-inset-top, 0px)) 16px calc(18px + env(safe-area-inset-bottom, 0px)) calc(16px + env(safe-area-inset-left, 0px)) !important;
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:auto !important;
  transform:translateX(0) !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  -webkit-overflow-scrolling:touch !important;
}

body.v392-native-iphone.stats-mode.stats-native-shell.stats-native-panel-open #sidePanel{
  width:min(88vw, 380px) !important;
  max-width:min(88vw, 380px) !important;
  padding:calc(58px + env(safe-area-inset-top, 0px)) 14px calc(16px + env(safe-area-inset-bottom, 0px)) calc(14px + env(safe-area-inset-left, 0px)) !important;
}

body.stats-mode.stats-native-shell:not(.welcome-active):not(.vpaywall-locked) #controlsToggleBtn{
  position:fixed !important;
  top:calc(14px + env(safe-area-inset-top, 0px)) !important;
  left:calc(14px + env(safe-area-inset-left, 0px)) !important;
  right:auto !important;
  bottom:auto !important;
  z-index:100760 !important;
  display:inline-flex !important;
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:auto !important;
}

body.stats-mode.stats-native-shell #controlsCloseBtn{
  display:none !important;
}

/*
 * Authoritative Stats drawer state. Data attributes avoid races between the
 * older tablet controller and the later Capacitor device-shell classes.
 */
body.stats-mode[data-stats-drawer="true"] #appMain,
body.stats-mode[data-stats-drawer="true"] #appMain.controls-collapsed{
  position:relative !important;
  display:block !important;
  width:100vw !important;
  height:100dvh !important;
  min-height:100dvh !important;
  max-height:100dvh !important;
  padding:0 !important;
  margin:0 !important;
  overflow:hidden !important;
}

body.stats-mode[data-stats-drawer="true"] #statsDashboard{
  position:fixed !important;
  inset:0 !important;
  z-index:100000 !important;
  display:block !important;
  box-sizing:border-box !important;
  grid-column:auto !important;
  width:100vw !important;
  height:100dvh !important;
  min-height:100dvh !important;
  max-height:100dvh !important;
  padding:calc(86px + env(safe-area-inset-top, 0px)) calc(18px + env(safe-area-inset-right, 0px)) calc(18px + env(safe-area-inset-bottom, 0px)) calc(18px + env(safe-area-inset-left, 0px)) !important;
  overflow:auto !important;
  -webkit-overflow-scrolling:touch !important;
}

body.stats-mode[data-stats-drawer="true"][data-stats-panel-open="false"] #sidePanel{
  display:none !important;
  width:0 !important;
  max-width:0 !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
  transform:translateX(-108%) !important;
}

body.stats-mode[data-stats-drawer="true"][data-stats-panel-open="true"] #sidePanel{
  position:fixed !important;
  inset:0 auto 0 0 !important;
  z-index:100520 !important;
  display:block !important;
  box-sizing:border-box !important;
  width:min(360px, 35vw) !important;
  min-width:0 !important;
  max-width:min(360px, 35vw) !important;
  height:100dvh !important;
  min-height:100dvh !important;
  max-height:100dvh !important;
  margin:0 !important;
  padding:calc(74px + env(safe-area-inset-top, 0px)) 16px calc(18px + env(safe-area-inset-bottom, 0px)) calc(16px + env(safe-area-inset-left, 0px)) !important;
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:auto !important;
  transform:translateX(0) !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  -webkit-overflow-scrolling:touch !important;
}

body.stats-mode[data-stats-drawer="true"]:not(.welcome-active):not(.vpaywall-locked) #controlsToggleBtn{
  position:fixed !important;
  top:calc(14px + env(safe-area-inset-top, 0px)) !important;
  left:calc(14px + env(safe-area-inset-left, 0px)) !important;
  right:auto !important;
  bottom:auto !important;
  z-index:100760 !important;
  display:inline-flex !important;
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:auto !important;
}

body.stats-mode[data-stats-drawer="true"] #controlsCloseBtn{
  display:none !important;
}

@media (pointer:coarse){
  body.stats-mode:not([data-stats-panel-open="true"]) #sidePanel{
    display:none !important;
    width:0 !important;
    max-width:0 !important;
    visibility:hidden !important;
    opacity:0 !important;
    pointer-events:none !important;
  }
}

@media (max-width:760px){
  body.stats-mode[data-stats-drawer="true"] #statsDashboard{
    padding:calc(64px + env(safe-area-inset-top, 0px)) 12px calc(14px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.stats-mode[data-stats-drawer="true"][data-stats-panel-open="true"] #sidePanel{
    width:min(88vw, 380px) !important;
    max-width:min(88vw, 380px) !important;
    padding:calc(66px + env(safe-area-inset-top, 0px)) 14px calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  }
}