/* StudyTickApp Group Timer: separate entry, room and community workspaces.
   The live room DOM is retained so timers, realtime channels and rewards continue uninterrupted. */
body.group-timer-page[data-stg-page] .group-page-intro-row,
body.group-timer-page[data-stg-page] > .group-wrap > .st-explore-room-trigger-row {display:none!important}
body.group-timer-page[data-stg-page] #stExploreLobby,
body.group-timer-page[data-stg-page] .st-explore-room-trigger-row,
body.group-timer-page[data-stg-page] .st-explore-post:not([hidden]) {display:none!important}
body.group-timer-page[data-stg-page] .group-wrap {max-width:1100px}
body.group-timer-page[data-stg-page] .group-social-actions,
body.group-timer-page[data-stg-page] .group-discord-community,
body.group-timer-page[data-stg-page] .group-install-entry {display:none!important}
body.group-timer-page[data-stg-page="community"] #stgCommunity .group-social-actions {display:flex!important}
body.group-timer-page[data-stg-page="community"] #stgCommunity .group-discord-community {display:flex!important}
body.group-timer-page[data-stg-page="community"] #stgCommunity .group-install-entry {display:flex!important}
body.group-timer-page[data-stg-page] [hidden] {display:none!important}

#stgLanding,#stgCommunity {max-width:1000px;margin:0 auto 28px}
#stgLanding h1,#stgCommunity h1 {font-family:var(--st-heading-font,'Playfair Display',serif);font-size:clamp(2rem,4vw,3rem);line-height:1.15;margin:8px 0 12px;color:var(--sc-text,#243c37)}
.stg-kicker {letter-spacing:.14em;text-transform:uppercase;font-size:.72rem;font-weight:700;color:var(--sc-accent-strong,#47856f)}
.stg-muted {color:var(--sc-text-muted,var(--sc-muted,#788780));line-height:1.5}
.stg-entry-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:24px 0}
.stg-entry-card {appearance:none;display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:9px;border:1px solid var(--sc-border,#d5dedb);border-radius:18px;padding:23px;background:var(--sc-surface-soft,transparent);color:var(--sc-text,#263d38);cursor:pointer;font:inherit;min-height:128px;transition:border-color .15s,transform .15s}
.stg-entry-card:hover,.stg-entry-card:focus-visible {border-color:var(--sc-accent-strong,#43876f);transform:translateY(-1px)}
.stg-entry-card strong {font-size:1.1rem}
.stg-entry-card span {font-size:.89rem;color:var(--sc-text-muted,var(--sc-muted,#788780))}
.stg-back {appearance:none;display:inline-flex;align-items:center;gap:8px;border:0;background:transparent;color:var(--sc-text,#283e38);font:inherit;font-weight:600;cursor:pointer;padding:8px 0;margin-bottom:12px}
body.group-timer-page[data-stg-page="home"] #groupSetup,
body.group-timer-page[data-stg-page="community"] #groupSetup,
body.group-timer-page[data-stg-page="home"] #stgCommunity,
body.group-timer-page[data-stg-page="community"] #stgLanding,
body.group-timer-page[data-stg-page="room"] #stgLanding,
body.group-timer-page[data-stg-page="room"] #stgCommunity,
body.group-timer-page[data-stg-page="join"] #stgLanding,
body.group-timer-page[data-stg-page="create"] #stgLanding,
body.group-timer-page[data-stg-page="discover"] #stgLanding,
body.group-timer-page[data-stg-page="join"] #stgCommunity,
body.group-timer-page[data-stg-page="create"] #stgCommunity,
body.group-timer-page[data-stg-page="discover"] #stgCommunity {display:none!important}
body.group-timer-page[data-stg-page="home"] #stgLanding,
body.group-timer-page[data-stg-page="community"] #stgCommunity {display:block!important}
body.group-timer-page[data-stg-page="join"] #groupSetup:not([hidden]),
body.group-timer-page[data-stg-page="create"] #groupSetup:not([hidden]),
body.group-timer-page[data-stg-page="discover"] #groupSetup:not([hidden]) {display:block!important;max-width:760px;margin:0 auto}
body.group-timer-page[data-stg-page="join"] #groupCreateColumn,
body.group-timer-page[data-stg-page="create"] #groupJoinPanel,
body.group-timer-page[data-stg-page="discover"] #groupJoinPanel,
body.group-timer-page[data-stg-page="create"] #groupPublicPanel,
body.group-timer-page[data-stg-page="discover"] #groupCreatePanel {display:none!important}
body.group-timer-page[data-stg-page="join"] #groupJoinPanel,
body.group-timer-page[data-stg-page="create"] #groupCreatePanel,
body.group-timer-page[data-stg-page="discover"] #groupPublicPanel {display:block!important;width:100%;max-width:none}
body.group-timer-page[data-stg-page="join"] #groupSetup,
body.group-timer-page[data-stg-page="create"] #groupSetup,
body.group-timer-page[data-stg-page="discover"] #groupSetup {grid-template-columns:minmax(0,1fr)!important}
body.group-timer-page[data-stg-page="join"] #groupCreateColumn:not([hidden]),
body.group-timer-page[data-stg-page="create"] #groupCreateColumn:not([hidden]),
body.group-timer-page[data-stg-page="discover"] #groupCreateColumn:not([hidden]) {width:100%;max-width:none}
body.group-timer-page[data-stg-page="join"] .group-join-reward-note,
body.group-timer-page[data-stg-page="join"] #groupRoomRetentionNotice {display:none!important}
body.group-timer-page.stg-invited[data-stg-page="join"] #groupCodeWrap,
body.group-timer-page.stg-invited[data-stg-page="join"] .group-back {display:none!important}
body.group-timer-page.stg-invited[data-stg-page="join"] .group-header {justify-content:center}
body.group-timer-page.stg-invited[data-stg-page="join"] #groupJoinPanel {margin:24px auto!important;max-width:580px}
body.group-timer-page:not(.stg-invited) #stgDifferentCode {display:none!important}
body.group-timer-page.stg-invited[data-stg-page="join"] #groupJoinPanel > .group-small {display:none!important}
body.group-timer-page[data-stg-page="room"] #groupRoom .group-room-name .group-kicker {display:none!important}
#stgDifferentCode {border:none;background:none;padding:12px 0 0;color:var(--sc-accent-strong,#40866c);font:inherit;cursor:pointer}
#stgCommunity .group-social-actions {position:static;gap:12px;flex-wrap:wrap;justify-content:flex-start;margin:22px 0!important}
#stgCommunity .group-discord-community {position:static;margin:22px 0}
#stgCommunity .group-install-entry {position:static;margin-top:12px}
body.group-timer-page[data-stg-page="room"] #groupRoom:not([hidden]) {display:block!important;max-width:1050px;margin:auto}
#stgRoomHeader {display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:12px 0 20px}
/* Genuine single-select toggle buttons: theme-aware selected surface and roving focus. */
html[data-theme] body.group-timer-page #stgRoomTabs {display:flex;align-items:center;gap:4px;border:1px solid var(--sc-border,#d5dedb);background:var(--sc-surface-soft,#273946);padding:4px;border-radius:14px}
html[data-theme] body.group-timer-page #stgRoomTabs > button {
 appearance:none!important;border:1px solid transparent!important;border-radius:10px!important;
 padding:11px 19px!important;color:var(--sc-text,#f1f4f5)!important;
 background:transparent!important;box-shadow:none!important;
 font:inherit;font-weight:600!important;cursor:pointer;
 transition:background-color .15s,border-color .15s,color .15s;
}
html[data-theme] body.group-timer-page #stgRoomTabs > button[aria-pressed="true"] {
 background:var(--sc-accent-strong,#43836e)!important;
 color:var(--sc-on-accent,#fff)!important;
 border-color:var(--sc-accent-strong,#43836e)!important;
 box-shadow:0 1px 5px color-mix(in srgb,var(--sc-accent-strong,#43836e) 18%,transparent)!important;
}
html[data-theme] body.group-timer-page #stgRoomTabs > button[aria-pressed="false"]:hover {
 background:color-mix(in srgb,var(--sc-accent-strong,#43836e) 12%,var(--sc-surface-soft,#263744))!important;
}
html[data-theme] body.group-timer-page #stgRoomTabs > button:focus-visible {
 outline:2px solid var(--sc-accent-strong,#43836e)!important;outline-offset:3px;
}
body.group-timer-page[data-stg-page="room"] #groupRoom .stg-focus-mini {display:flex;justify-content:center;align-items:center;gap:10px;margin:12px auto 0}
body.group-timer-page[data-stg-page="room"] #groupRoom .stg-focus-mini #groupMiniWindow {min-height:42px;padding:9px 16px;border:1px solid var(--sc-border,#d5dedb);border-radius:11px;background:var(--sc-surface-soft,#293a46);color:var(--sc-text,#f1f4f5);font:inherit;font-weight:600;cursor:pointer}
body.group-timer-page[data-stg-page="room"] #groupRoom .stg-focus-mini #groupMiniWindow:hover {border-color:var(--sc-accent-strong,#43836e)}
#stgRoomActions {display:flex;gap:8px;flex-wrap:wrap}
#stgRoomActions button {border:1px solid var(--sc-border,#d5dedb);background:var(--sc-surface-soft,transparent);color:var(--sc-text,#263d38);border-radius:10px;padding:10px 12px;font:inherit;cursor:pointer}
#stgRoomActions button[aria-expanded="true"] {border-color:var(--sc-accent-strong,#43876f);color:var(--sc-accent-strong,#43876f)}
#stgCompactTimer {display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border:1px solid var(--sc-border,#d5dedb);border-radius:14px;background:var(--sc-surface-soft,transparent);margin:8px 0 18px}
#stgCompactTimer strong {font-size:1.45rem;font-variant-numeric:tabular-nums;letter-spacing:.04em;color:var(--sc-text,#263d38)}
#stgCompactTimer small {color:var(--sc-text-muted,var(--sc-muted,#798980))}
#stgRoomDrawer:not([hidden]) {max-width:680px;margin:14px 0 20px;border:1px solid var(--sc-border,#d5dedb);padding:17px;border-radius:16px;background:var(--sc-surface-soft,transparent)}
#stgRoomDrawer .stg-drawer-heading {display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px}
#stgRoomDrawer .stg-drawer-heading h3 {margin:0;font-size:1.1rem}
#stgRoomDrawer .stg-drawer-heading button {appearance:none;background:transparent;border:0;color:var(--sc-text,#263d38);padding:7px;cursor:pointer;font:inherit}
#stgRoomDrawer .group-card,#stgRoomDrawer .group-invite-card {max-width:none;margin:0;border:0;box-shadow:none;background:transparent}
#stgRoomDrawer .group-card + .group-card {margin-top:12px}
#stgDrawerSettings details {margin:12px 0}
#stgDrawerSettings .group-host-timer-details,#stgDrawerSettings .group-cycle-settings {max-width:none}
body.group-timer-page[data-stg-page="room"] #groupRoom .group-side {display:none!important}
body.group-timer-page[data-stg-page="room"] #groupRoom .group-columns {grid-template-columns:minmax(0,1fr)!important;max-width:790px;margin-inline:auto}
body.group-timer-page[data-stg-page="room"] #groupRoom .group-clock-card {max-width:790px;width:100%;margin-inline:auto}
/* Main Focus presence, synced from the same roster as the People drawer. */
html[data-theme] body.group-timer-page #groupRoom .group-focus-presence {
 display:inline-flex;align-items:center;justify-content:center;gap:7px;
 margin:5px auto 15px;padding:6px 12px;max-width:100%;
 background:var(--sc-surface-soft,transparent);
 border:1px solid var(--sc-border,#d5dedb);
 border-radius:999px;color:var(--sc-text,#263d38);
 font-size:.84rem;font-weight:650;line-height:1.2;
 font-variant-numeric:tabular-nums;letter-spacing:0;
}
html[data-theme] body.group-timer-page #groupRoom .group-focus-presence svg {
 flex:none;color:var(--sc-accent-strong,#43836e);
}
html[data-theme] body.group-timer-page #groupRoom .group-focus-presence[hidden] {display:none!important}

body.group-timer-page[data-stg-page="room"] #groupRoom .group-session-summary {margin:10px 0 16px}
body.group-timer-page[data-stg-page="room"] #groupRoom #groupCollabWorkspace {max-width:790px;margin-inline:auto}
body.group-timer-page[data-stg-room-view="focus"] #groupCollabWorkspace,
body.group-timer-page[data-stg-room-view="tasks"] #groupRoom .group-columns,
body.group-timer-page[data-stg-room-view="chat"] #groupRoom .group-columns {display:none!important}
body.group-timer-page[data-stg-room-view="tasks"] #groupCollabWorkspace:not([hidden]),
body.group-timer-page[data-stg-room-view="chat"] #groupCollabWorkspace:not([hidden]) {display:grid!important;grid-template-columns:minmax(0,1fr)!important}
body.group-timer-page[data-stg-room-view="tasks"] #groupCollabWorkspace .group-chat-card,
body.group-timer-page[data-stg-room-view="chat"] #groupCollabWorkspace .group-tasks-card {display:none!important}
body.group-timer-page[data-stg-room-view="focus"] #stgCompactTimer {display:none!important}
body.group-timer-page[data-stg-room-view="focus"] #groupCollabAccess {display:none!important}
body.group-timer-page[data-stg-page="room"] #groupRoom .st-explore-room-trigger-row {display:none!important}
body.group-timer-page[data-stg-page="room"] #groupRoom #groupLeave {margin:24px 0 10px}
@media(max-width:680px){
 #stgLanding,#stgCommunity {padding:0 4px}
 .stg-entry-grid {grid-template-columns:1fr;gap:11px}
 .stg-entry-card {min-height:100px;padding:17px}
 #stgRoomHeader {flex-direction:column;align-items:stretch;margin:8px 0 12px}
 #stgRoomTabs {width:100%}
 html[data-theme] body.group-timer-page #stgRoomTabs > button {flex:1;padding:11px 8px!important}
 #stgRoomActions {display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
 #stgRoomActions button {padding:10px 5px;font-size:.86rem}
 #stgCompactTimer {margin:8px 0 12px}
 #stgRoomDrawer:not([hidden]) {padding:12px}
 body.group-timer-page[data-stg-page="room"] .group-wrap {padding-top:10px}
 body.group-timer-page[data-stg-page="join"] #groupJoinPanel {margin:10px auto!important}
}
@media(prefers-reduced-motion:reduce){.stg-entry-card{transition:none}}


/* Keep the room community accessible without rendering the full Community workspace. */
#stgRoomCommunityNav {
 display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:-8px 0 14px;
}
#stgRoomCommunityNav .group-social-nav-btn,
#stgRoomDiscordShortcut {
 display:inline-flex;align-items:center;justify-content:center;gap:7px;
 min-height:39px;padding:6px 11px;border:1px solid var(--sc-border,#d5dedb);
 border-radius:10px;background:var(--sc-surface-soft,#293a46);
 color:var(--sc-text,#f1f4f5);font:inherit;font-size:13px;font-weight:600;
 text-decoration:none;white-space:nowrap;cursor:pointer;
}
#stgRoomCommunityNav .group-social-nav-btn:hover,
#stgRoomDiscordShortcut:hover {
 border-color:var(--sc-accent-strong,#43836e);
 background:color-mix(in srgb,var(--sc-accent-strong,#43836e) 10%,var(--sc-surface-soft,#293a46));
}
#stgRoomCommunityNav .group-social-icon-badge {width:25px;height:25px;border-radius:7px}
#stgRoomCommunityNav .group-social-symbol {width:16px;height:16px}
#stgRoomCommunityNav :is(button,a):focus-visible {outline:2px solid var(--sc-accent-strong,#43836e);outline-offset:3px}
@media(max-width:680px){
 #stgRoomCommunityNav {gap:6px;margin:0 0 12px}
 #stgRoomCommunityNav .group-social-nav-btn,#stgRoomDiscordShortcut {min-height:42px;padding:7px 9px;font-size:12px}
}


/* Organized room toolbar: one navigation row, one action group, no loose social row. */
body.group-timer-page[data-stg-page="room"] #stgRoomHeader {
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;
  gap:12px;margin:8px 0 14px;
}
body.group-timer-page[data-stg-page="room"] #stgRoomActions {
  display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:nowrap;
}
#stgCommunityMenu {position:relative;flex:none;min-width:0}
#stgCommunityMenu > summary {
  display:flex;align-items:center;justify-content:center;gap:7px;list-style:none;
  min-height:44px;padding:10px 12px;border-radius:10px;cursor:pointer;
  border:1px solid var(--sc-border,#d5dedb);color:var(--sc-text,#263d38);
  background:var(--sc-surface-soft,transparent);font:inherit;
}
#stgCommunityMenu > summary::-webkit-details-marker {display:none}
#stgCommunityMenu > summary span {font-size:.78em;transition:transform .15s ease}
#stgCommunityMenu[open] > summary {border-color:var(--sc-accent-strong,#43876f)}
#stgCommunityMenu[open] > summary span {transform:rotate(180deg)}
#stgCommunityMenu > summary:focus-visible {
  outline:2px solid var(--sc-accent-strong,#43876f);outline-offset:3px;
}
body.group-timer-page #stgCommunityMenu > #stgRoomCommunityNav {
  position:absolute;right:0;top:calc(100% + 8px);z-index:30;
  display:grid;grid-template-columns:minmax(0,1fr);align-items:stretch;
  width:min(244px,calc(100vw - 32px));margin:0;padding:8px;gap:5px;
  border:1px solid var(--sc-border,#d5dedb);border-radius:13px;
  background:var(--sc-surface,#263744);
  box-shadow:0 12px 28px rgba(0,0,0,.19);
}
body.group-timer-page #stgCommunityMenu:not([open]) > #stgRoomCommunityNav,
body.group-timer-page #stgCommunityMenu > #stgRoomCommunityNav[hidden] {display:none!important}
body.group-timer-page #stgRoomCommunityNav :is(.group-social-nav-btn,#stgRoomDiscordShortcut) {
  width:100%;min-width:0;justify-content:flex-start;text-align:left;
  min-height:43px;padding:9px 11px;margin:0;
}
body.group-timer-page #stgRoomCommunityNav .group-social-nav-btn {flex:unset}
body.group-timer-page[data-stg-page="room"] #stgRoomDrawer:not([hidden]) {
  width:min(100%,790px);max-width:790px;margin:0 0 16px auto;
  padding:18px 20px;border-radius:16px;
}

/* Settings are arranged in visitor-friendly layers: personal first, host second. */
#stgDrawerSettings .stg-settings-personal > h4 {
  font-size:1rem;line-height:1.35;margin:5px 0 14px;color:var(--sc-text,#263d38);
}
html[data-theme] body.group-timer-page #stgDrawerSettings .group-quick-settings {
  width:100%;max-width:none;margin:0;padding:0;
  background:transparent;border:0;box-shadow:none;
}
html[data-theme] body.group-timer-page #stgDrawerSettings .group-quick-settings > summary {
  display:none!important;
}
html[data-theme] body.group-timer-page #stgDrawerSettings .group-quick-settings-body {
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;align-items:start;margin:0;padding:0;
}
#stgDrawerSettings :is(.group-timer-preferences,.group-personal-sound) {
  display:flex;flex-direction:column;gap:7px;margin:0;min-width:0;
}
#stgDrawerSettings :is(.group-timer-preferences,.group-personal-sound) select {
  width:100%;min-width:0;min-height:42px;
}
#stgDrawerSettings .group-alert-settings {
  grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px 16px;
  border-top:1px solid var(--sc-border,#d5dedb);padding-top:14px;margin:0;
}
#stgDrawerSettings .group-alert-settings > strong {flex-basis:100%;font-size:.85rem}
#stgDrawerSettings .group-alert-settings .group-small {display:none!important}
#stgDrawerSettings .group-alert-choice {display:flex;align-items:center;gap:7px;margin:0}
#stgDrawerSettings .group-utility-actions {grid-column:1/-1;margin:0}
#stgDrawerSettings #stgHostOnly,#stgDrawerSettings #stgAccountSettings {
  border-top:1px solid var(--sc-border,#d5dedb);margin:17px 0 0;padding:12px 0 0;
}
#stgDrawerSettings :is(#stgHostOnly,#stgAccountSettings) > summary {
  display:flex;justify-content:space-between;align-items:center;cursor:pointer;
  list-style:none;font:inherit;font-weight:650;color:var(--sc-text,#263d38);
  min-height:40px;padding:7px 2px;
}
#stgDrawerSettings :is(#stgHostOnly,#stgAccountSettings) > summary::-webkit-details-marker {display:none}
#stgDrawerSettings :is(#stgHostOnly,#stgAccountSettings) > summary::after {
  content:"⌄";color:var(--sc-text-muted,#82928f);font-weight:400;
}
#stgDrawerSettings :is(#stgHostOnly,#stgAccountSettings)[open] > summary::after {transform:rotate(180deg)}
#stgDrawerSettings :is(#stgHostOnly,#stgAccountSettings) > summary:focus-visible {
  outline:2px solid var(--sc-accent-strong,#43876f);outline-offset:3px;
}
#stgHostSettingsContent {display:grid;gap:10px;padding:8px 0 4px}
#stgSessionLength {min-width:0;padding:12px;border:1px solid var(--sc-border,#d5dedb);border-radius:10px}
#stgSessionLength .group-adjust {display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:0}
#stgSessionLength .group-length-field {min-width:0;flex:1 1 90px;max-width:150px}
#stgSessionLength .group-small {margin:8px 0 0;color:var(--sc-muted,#62776a);line-height:1.5}
#stgSessionLength #groupNewMinutes {width:100%;min-width:0;box-sizing:border-box}
#stgHostSettingsContent > :is(.group-host-timer-details,.group-cycle-settings,#groupHostSettings) {
  width:100%;max-width:none;margin:0;
}
#stgDrawerSettings #groupHostSettings:not([hidden]) {display:block}
#stgDrawerSettings #groupAccountAccess {margin:8px 0 0!important;max-width:none!important}
#stgDrawerSettings #stgAccountSettingsContent {padding:4px 0 8px}

/* Only the current playback action is shown, not Start and Pause together. */
html[data-theme] body.group-timer-page #groupRoom .group-primary-playback {
  display:flex!important;align-items:center;justify-content:center;
  width:min(100%,320px);max-width:320px;margin:0 auto!important;
  padding:0!important;gap:0!important;
  border:0!important;background:transparent!important;box-shadow:none!important;
}
html[data-theme] body.group-timer-page #groupRoom .group-primary-playback > button:not([hidden]) {
  flex:1 1 100%;width:100%;min-height:50px;font-size:1rem;
}
html[data-theme] body.group-timer-page #groupRoom :is(#groupStart,#groupPause)[hidden] {display:none!important}
html[data-theme] body.group-timer-page #groupRoom .group-timer-control-stack {
  width:min(100%,420px);margin:0 auto;
}
@media(max-width:720px){
  body.group-timer-page[data-stg-page="room"] #stgRoomHeader {
    grid-template-columns:minmax(0,1fr);gap:10px;margin:8px 0 12px;
  }
  body.group-timer-page[data-stg-page="room"] #stgRoomActions {
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:100%;gap:6px;
  }
  body.group-timer-page[data-stg-page="room"] #stgRoomActions > button,
  #stgCommunityMenu > summary {
    display:flex;justify-content:center;align-items:center;
    width:100%;min-height:43px;padding:9px 5px;font-size:.86rem;white-space:nowrap;
  }
  body.group-timer-page[data-stg-page="room"] #stgRoomDrawer:not([hidden]) {
    max-width:none;padding:14px;
  }
}
@media(max-width:440px){
  html[data-theme] body.group-timer-page #stgDrawerSettings .group-quick-settings-body {
    grid-template-columns:minmax(0,1fr);
  }
  #stgDrawerSettings .group-alert-settings,
  #stgDrawerSettings .group-utility-actions {grid-column:1}
  #stgRoomActions button,#stgCommunityMenu summary {font-size:.8rem}
}
@media(prefers-reduced-motion:reduce){
  #stgCommunityMenu > summary span {transition:none}
}
/* Focus presence: one compact theme-aware control, never a second panel. */
html[data-theme] body.group-timer-page #groupRoom button.group-focus-presence{
 cursor:pointer;box-shadow:none;font:inherit;font-size:.84rem;font-weight:650;
 text-align:center;white-space:normal;min-height:34px;
}
html[data-theme] body.group-timer-page #groupRoom button.group-focus-presence:hover,
html[data-theme] body.group-timer-page #groupRoom button.group-focus-presence[aria-expanded="true"]{
 border-color:var(--sc-accent-strong,#43836e);
 background:color-mix(in srgb,var(--sc-accent-strong,#43836e) 9%,var(--sc-surface-soft,#293744));
}
html[data-theme] body.group-timer-page #groupRoom button.group-focus-presence:focus-visible{
 outline:2px solid var(--sc-accent-strong,#43836e);outline-offset:3px;
}
#groupFocusPresence .group-focus-presence-indicator{
 display:inline-flex;align-items:center;gap:6px;padding-inline-start:8px;
 border-inline-start:1px solid var(--sc-border,#667580);
 font-size:.72rem;font-weight:500;color:var(--sc-text-muted,#bac8d1);
}
#groupFocusPresence .group-focus-presence-indicator::before{
 content:"";display:inline-block;flex:none;width:6px;height:6px;
 border-radius:50%;background:var(--sc-accent-strong,#7bc8ad);
}
#groupFocusPresence[data-live="false"] .group-focus-presence-indicator::before{
 background:var(--sc-text-muted,#97a9b6);
}
/* Hidden always wins against density/grid rules: Start, Pause or Resume, never two. */
html[data-theme] body.group-timer-page #groupRoom .group-playback-controls{
 display:flex!important;justify-content:center!important;
}
html[data-theme] body.group-timer-page #groupRoom .group-playback-controls > button[hidden]{
 display:none!important;
}
html[data-theme] body.group-timer-page #groupRoom .group-playback-controls > button:not([hidden]){
 flex:0 1 320px!important;width:100%;max-width:100%;
}
@media(max-width:520px){
 html[data-theme] body.group-timer-page #groupRoom button.group-focus-presence{font-size:.76rem;padding:6px 9px}
 html[data-theme] body.group-timer-page #groupRoom .group-playback-controls > button:not([hidden]){flex:1 1 auto!important}
}


/* Group room audit: consistent readable countdown and clearly separated settings. */
html[data-theme="dark"] body.group-timer-page #groupRoom .group-clock,
html[data-theme="dark"] body.group-timer-page #stgCompactClock {color:#eafff2!important}
#stgRoomDrawer .stg-drawer-heading #groupCount {
  margin-inline:auto 12px;font-size:.82rem;font-weight:650;
  color:var(--sc-text-muted,var(--sc-muted,#62776a));white-space:nowrap
}
html[data-theme] body.group-timer-page #stgDrawerSettings .group-alert-settings {
  display:grid;grid-template-columns:minmax(0,1fr);gap:10px;
  width:100%;min-width:0;align-items:stretch
}
#stgDrawerSettings .group-alert-settings .stg-alert-row {
  display:flex;flex-direction:column;align-items:stretch;
  gap:7px;padding:12px;border:1px solid var(--sc-border,#d5dedb);
  border-radius:10px;min-width:0
}
#stgDrawerSettings .stg-alert-row > strong {font-size:.82rem;line-height:1.3}
html[data-theme] body.group-timer-page #stgDrawerSettings .stg-alert-row .group-alert-choice {
  display:flex;align-items:center;gap:10px;width:100%;line-height:1.4;
  white-space:normal;cursor:pointer
}
#stgDrawerSettings .stg-alert-row .group-alert-choice input {flex:none}
#stgFocusAudio[hidden] {display:none!important}
#stgFocusAudioToggle[aria-expanded="true"] {border-color:var(--sc-accent-strong,#4f9e7a);box-shadow:inset 0 -2px var(--sc-accent-strong,#4f9e7a)}
#stgFocusAudio {box-sizing:border-box;width:100%;max-width:440px;min-width:0;margin:12px auto 0;padding:16px;text-align:start;border:1px solid var(--sc-border,#d5dedb);border-radius:14px;background:var(--sc-surface-soft,#293a46);color:var(--sc-text,#f1f4f5)}
#stgFocusAudio .stg-audio-heading {margin:0 0 12px;font-weight:700;line-height:1.3}
#stgFocusAudio .group-personal-sound {display:grid;gap:8px;min-width:0}
#stgFocusAudio .group-personal-sound label {display:flex;align-items:center;flex-wrap:wrap;gap:8px}
#stgFocusAudio #groupPersonalSound {box-sizing:border-box;width:100%;min-width:0;max-width:100%;min-height:44px;background:var(--sc-surface,#fff);color:var(--sc-text,#1f2e2a);border:1px solid var(--sc-border,#d5dedb);border-radius:9px;padding:10px;font:inherit}
#stgFocusAudio .group-small {margin:0;overflow-wrap:anywhere}
#stgFocusAudio .group-utility-actions {display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap;gap:10px;margin:12px 0 0}
#stgFocusAudio #groupLocalSound {min-height:44px;max-width:100%;white-space:normal}
/* Focus utilities: a balanced two-button row, then a separate audio row.
   Keep all original controls mounted, including mini-window status messages. */
body.group-timer-page[data-stg-page="room"][data-stg-room-view="focus"] #groupRoom .group-clock-card {
 display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:10px;align-content:start;
}
body.group-timer-page[data-stg-page="room"][data-stg-room-view="focus"] #groupRoom .group-clock-card > * {grid-column:1/-1;min-width:0}
body.group-timer-page[data-stg-page="room"][data-stg-room-view="focus"] #groupRoom .group-clock-card > .st-stream-launch:not(#stgFocusAudioToggle) {
 grid-column:1;justify-self:end;align-self:start;width:100%;max-width:200px;margin:12px 0 0;
 min-height:44px;white-space:normal;
}
body.group-timer-page[data-stg-page="room"][data-stg-room-view="focus"] #groupRoom .group-clock-card > .stg-focus-mini {
 grid-column:2;justify-self:start;align-self:start;box-sizing:border-box;width:100%;max-width:200px;
 margin:12px 0 0;flex-wrap:wrap;
}
body.group-timer-page[data-stg-page="room"][data-stg-room-view="focus"] #groupRoom .stg-focus-mini #groupMiniWindow {
 box-sizing:border-box;width:100%;min-height:44px;font:600 13px/1.35 Inter,system-ui,sans-serif;white-space:normal;
}
body.group-timer-page[data-stg-page="room"][data-stg-room-view="focus"] #groupRoom .stg-focus-mini #groupMiniStatus {flex-basis:100%;max-width:100%;overflow-wrap:anywhere}
body.group-timer-page[data-stg-page="room"][data-stg-room-view="focus"] #groupRoom .group-clock-card > #stgFocusAudioToggle {
 grid-column:1/-1;justify-self:center;width:fit-content;max-width:100%;min-height:44px;margin:12px 0 0;
}
#stgDrawerSettings #groupLocalSoundState {color:var(--sc-text-muted,var(--sc-muted,#62776a));font-size:.8rem}
#stgDrawerInvite .group-invite-content {display:grid;gap:12px}
#stgDrawerInvite .group-invite-link-actions {display:flex;gap:8px;flex-wrap:wrap}
@media(max-width:520px){#stgDrawerInvite .group-invite-link-actions > button{flex:1 1 100%}}