/* StudyTickApp Group Timer refinement: same visual language as the account/login page.
   Layout and presentation only: room/session state remains owned by existing scripts. */
body.group-timer-page{
  --gt-auth-ink:#172d26;
  --gt-auth-muted:#65766d;
  --gt-auth-line:#dfe8e3;
  --gt-auth-panel:#fff;
  --gt-auth-soft:#f5f9f7;
  --gt-auth-mint:#168365;
  --gt-auth-primary:#13382c;
  background:#f8faf9;
  color:var(--gt-auth-ink);
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.group-timer-page .group-header{
  max-width:none;
  margin:0;
  padding:15px max(20px,calc((100vw - 1180px)/2 + 30px));
  background:#f5f8f7;
  border-bottom:1px solid var(--gt-auth-line);
}
.group-timer-page .group-logo{
  font-size:clamp(21px,2vw,26px);
  letter-spacing:-.035em;
  color:var(--gt-auth-ink);
}
.group-timer-page .group-logo .group-brand-name>span{color:var(--gt-auth-mint)}
.group-timer-page .group-back{
  color:var(--gt-auth-muted);
  font-weight:600;
  text-underline-offset:4px;
}
.group-timer-page .group-wrap{
  max-width:1180px;
  padding:clamp(23px,3vw,35px) clamp(18px,3vw,30px) 44px;
}
/* A single composed masthead: information on the left, social actions on the right. */
.group-timer-page .group-page-intro-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
  gap:22px;
  padding-bottom:22px;
  margin-bottom:20px;
  border-bottom:1px solid var(--gt-auth-line);
}
.group-timer-page .group-page-intro-row .group-intro{
  max-width:630px;
  margin:0;
}
.group-timer-page .group-intro .group-kicker{
  margin-bottom:8px;
  color:var(--gt-auth-mint);
  font-size:11px;letter-spacing:.16em;
}
.group-timer-page .group-intro h1{
  font-family:Inter,ui-sans-serif,system-ui,sans-serif;
  font-size:clamp(31px,3.5vw,43px);
  font-weight:750;
  line-height:1.16;
  letter-spacing:-.055em;
  margin:0 0 7px;
  color:var(--gt-auth-ink);
}
.group-timer-page .group-intro>p:last-child{
  font-size:14px;
  line-height:1.55;
  color:var(--gt-auth-muted);
  max-width:55ch;
}
.group-timer-page .group-page-intro-row .group-social-actions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  align-items:center;
  flex-wrap:wrap;
  margin:0;
}
.group-timer-page .group-social-nav-btn{
  min-height:45px;
  border-radius:11px;
  padding:5px 13px 5px 7px;
  font-weight:650;
  background:var(--gt-auth-panel);
  border:1px solid var(--gt-auth-line);
  box-shadow:none;
  transition:border-color .16s ease,background-color .16s ease,transform .16s ease;
}
.group-timer-page .group-social-nav-btn:hover{
  border-color:#9dc7b4;
  background:var(--gt-auth-soft);
  box-shadow:none;
}
.group-timer-page .group-social-nav-btn:active{transform:translateY(1px)}
.group-timer-page .group-social-icon-badge{
  width:32px;height:32px;border-radius:9px;
}
/* Login page's solid evergreen CTA and quiet secondary controls. */
.group-timer-page .group-primary,
.group-timer-page .group-discord-join{
  background:var(--gt-auth-primary);
  border-color:var(--gt-auth-primary);
  color:#fff;
}
.group-timer-page .group-primary:hover,
.group-timer-page .group-discord-join:hover{
  background:#1a4c3a;
  border-color:#1a4c3a;
  color:#fff;
}
.group-timer-page button,
.group-timer-page select,
.group-timer-page input,
.group-timer-page textarea{
  border-radius:10px;
}
.group-timer-page button:focus-visible,
.group-timer-page input:focus-visible,
.group-timer-page select:focus-visible,
.group-timer-page summary:focus-visible,
.group-timer-page a:focus-visible{
  outline:3px solid var(--gt-auth-mint);
  outline-offset:3px;
}
.group-timer-page input:focus,
.group-timer-page select:focus{
  border-color:var(--gt-auth-mint);
}
.group-timer-page .group-setup{gap:17px;align-items:start}
.group-timer-page .group-setup .group-card{
  padding:24px;
  background:var(--gt-auth-panel);
  border-color:var(--gt-auth-line);
  border-radius:16px;
  box-shadow:0 6px 23px rgba(21,45,36,.035);
}
.group-timer-page .group-setup .group-card h2{
  color:var(--gt-auth-ink);
  font-size:21px;
  font-weight:725;
  letter-spacing:-.035em;
}
.group-timer-page .group-setup label{
  font-weight:625;
  color:var(--gt-auth-ink);
}
.group-timer-page .group-setup input,
.group-timer-page .group-setup select{
  min-height:45px;
  border:1px solid var(--gt-auth-line);
  background:var(--gt-auth-panel);
  color:var(--gt-auth-ink);
}
.group-timer-page .group-setup .group-muted{color:var(--gt-auth-muted)}
.group-timer-page .group-setup .group-small{line-height:1.48}
.group-timer-page .group-setup form .group-primary{min-height:47px}
.group-timer-page .group-create-column{display:grid;gap:15px}
/* Room identity is secondary to the countdown; remove visual columns that feel cramped. */
.group-timer-page #groupRoom .group-session-summary{
  background:var(--gt-auth-panel);
  border:1px solid var(--gt-auth-line);
  border-radius:16px;
  padding:18px 22px;
  box-shadow:0 5px 25px rgba(21,45,36,.03);
}
.group-timer-page #groupRoom .group-room-heading{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:22px;
}
.group-timer-page #groupRoom .group-room-heading-inner{
  display:grid;
  grid-template-columns:minmax(180px,.78fr) minmax(0,1.35fr);
  align-items:center;
  gap:24px;
}
.group-timer-page #groupRoom .group-room-name{
  min-width:0;
  padding-inline-end:23px;
  border-inline-end:1px solid var(--gt-auth-line);
}
.group-timer-page #groupRoom .group-room-name h2{
  font-family:Inter,ui-sans-serif,system-ui,sans-serif;
  font-size:clamp(23px,2.8vw,30px);
  font-weight:730;
  line-height:1.25;
  letter-spacing:-.045em;
  color:var(--gt-auth-ink);
}
.group-timer-page #groupRoom .group-room-name .group-kicker{
  color:var(--gt-auth-mint);
  margin-bottom:5px;
  font-weight:700;
}
.group-timer-page #groupRoom .group-room-details{
  display:flex;flex-direction:column;
  gap:3px;min-width:0;
}
.group-timer-page #groupRoom .group-room-details .group-muted{
  font-size:12.5px;
  line-height:1.5;
  color:var(--gt-auth-muted);
  margin:0;
  overflow-wrap:anywhere;
}
.group-timer-page #groupRoom .group-room-details #groupRole{
  font-size:13px;
  font-weight:650;
  color:var(--gt-auth-ink);
}
.group-timer-page #groupRoom #groupHostLabel{
  margin:6px 0 0;
  padding:8px 0 0;
  border-top:1px solid var(--gt-auth-line);
}
.group-timer-page #groupRoom #groupAccountAccess{
  margin-top:4px!important;
}
.group-timer-page #groupRoom #groupAccountIdentity{
  margin:0;
  font-size:12px;
  color:var(--gt-auth-muted);
}
.group-timer-page #groupRoom .group-online{
  display:inline-flex;align-items:center;gap:8px;
  justify-self:end;
  min-height:35px;
  padding:7px 12px;
  /* Keep live status legible without an unrelated green panel. */
  color:var(--sc-text,#24332e);
  background:var(--sc-surface-soft,#edf4f0);
  border:1px solid var(--sc-border,#d4e0d9);
  border-radius:999px;
  font-size:12px;
  font-weight:650;
}
.group-timer-page #groupRoom .group-online::before{
  content:"";
  width:7px;height:7px;
  border-radius:50%;
  background:var(--sc-accent-strong,#168562);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--sc-accent-strong,#168562) 12%,transparent);
  flex:none;
}
.group-timer-page #groupRoom .group-columns{
  margin-top:16px;
  gap:16px;
  grid-template-columns:minmax(0,1.58fr) minmax(270px,.85fr);
}
.group-timer-page #groupRoom .group-clock-card{
  background:var(--gt-auth-panel);
  border:1px solid var(--gt-auth-line);
  border-radius:18px;
  padding:clamp(22px,2.5vw,31px);
  box-shadow:0 8px 32px rgba(21,45,36,.038);
}
.group-timer-page #groupRoom .group-clock{
  font-family:Inter,ui-sans-serif,system-ui,sans-serif;
  font-size:clamp(62px,6.6vw,94px);
  letter-spacing:-.06em;
  font-weight:750;
  color:var(--gt-auth-primary);
}
.group-timer-page #groupRoom .group-status{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--gt-auth-mint);
  margin:0 0 9px;
}
.group-timer-page #groupRoom .group-track{
  max-width:420px;
  margin-inline:auto;
  border-radius:999px;
  overflow:hidden;
}
.group-timer-page #groupRoom #groupDurationLabel{
  color:var(--gt-auth-muted);
  margin:12px 0 0;
  font-size:13px;
}
.group-timer-page #groupRoom .group-timer-control-stack{
  max-width:520px;
  margin:22px auto 0;
  gap:12px;
}
.group-timer-page #groupRoom .group-host-controls,
.group-timer-page #groupRoom .group-quick-settings{
  background:var(--gt-auth-soft);
  border:1px solid var(--gt-auth-line);
  border-radius:13px;
  padding:15px 17px;
}
.group-timer-page #groupRoom .group-section-heading{
  font-size:13px;
  font-weight:700;
  color:var(--gt-auth-ink);
}
.group-timer-page #groupRoom .group-host-controls .group-adjust{
  margin-top:12px;
  padding-top:12px;
  border-color:var(--gt-auth-line);
}
.group-timer-page #groupRoom .group-quick-settings>summary{
  min-height:30px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  cursor:pointer;
}
.group-timer-page #groupRoom .group-quick-settings[open]>summary{
  margin-bottom:12px;
}
.group-timer-page #groupRoom .group-side{gap:13px}
.group-timer-page #groupRoom .group-side .group-card{
  padding:19px;
  background:var(--gt-auth-panel);
  border:1px solid var(--gt-auth-line);
  border-radius:15px;
  box-shadow:none;
}
.group-timer-page #groupRoom .group-members-title{
  padding-bottom:11px;
  border-bottom:1px solid var(--gt-auth-line);
}
.group-timer-page #groupRoom .group-members-title h3,
.group-timer-page #groupRoom .group-collapsible>summary h3{
  font-size:16px;
  font-weight:700;
  color:var(--gt-auth-ink);
  letter-spacing:-.02em;
}
.group-timer-page #groupRoom .group-side .group-small{
  color:var(--gt-auth-muted);
  line-height:1.5;
}
.group-timer-page #groupRoom .group-leave{
  margin-top:17px;
  background:transparent;
  border-color:var(--gt-auth-line);
  color:var(--gt-auth-muted);
}
.group-timer-page .group-collab-workspace{
  gap:16px;
  margin-top:16px;
}
.group-timer-page .group-collab-card{
  background:var(--gt-auth-panel);
  border:1px solid var(--gt-auth-line);
  border-radius:15px;
  padding:21px;
  box-shadow:none;
}
.group-timer-page .group-collab-heading h3{
  font-size:17px;
  font-weight:700;
  letter-spacing:-.025em;
  color:var(--gt-auth-ink);
}
.group-timer-page .group-chat-list{
  border-color:var(--gt-auth-line);
  background:var(--gt-auth-soft);
  border-radius:11px;
}
.group-timer-page .group-collab-access{
  border-color:var(--gt-auth-line);
  background:var(--gt-auth-soft);
  color:var(--gt-auth-ink);
  border-radius:12px;
}
.group-timer-page .group-discord-community{
  background:var(--gt-auth-soft);
  border:1px solid var(--gt-auth-line);
  border-radius:14px;
  margin-top:20px;
  padding:13px 15px;
  box-shadow:none;
}
.group-timer-page .group-discord-copy h2{
  color:var(--gt-auth-ink);
}
.group-timer-page .group-discord-copy p{
  color:var(--gt-auth-muted);
}
.group-timer-page .group-discord-join{
  font-weight:650;
  border-radius:10px;
  min-height:40px;
  padding:8px 14px;
}
/* Motion is limited to short control feedback; hourglass fill remains functional. */
.group-timer-page .group-primary,
.group-timer-page .group-discord-join{
  transition:background-color .16s ease,border-color .16s ease,transform .16s ease;
}
.group-timer-page .group-primary:not(:disabled):active,
.group-timer-page .group-discord-join:active{transform:translateY(1px)}
/* Dark mode uses the same restrained surface relationships as the login page. */
html[data-theme="dark"] body.group-timer-page{
  --gt-auth-ink:#edf5f2;
  --gt-auth-muted:#b0c0b8;
  --gt-auth-line:#374c43;
  --gt-auth-panel:#1d2825;
  --gt-auth-soft:#23352c;
  --gt-auth-mint:#70d9b5;
  --gt-auth-primary:#246c51;
  background:#151d1a;
  color:var(--gt-auth-ink);
}
html[data-theme="dark"] .group-timer-page .group-header{
  background:#171f1c;
}
/* Dark, light and custom palettes use the same neutral connection surface.
   The tiny status dot alone carries the theme accent. */
html[data-theme="dark"] .group-timer-page #groupRoom .group-online{
  background:var(--sc-surface-soft,#262b30);
  color:var(--sc-text,#eef2ef);
  border-color:var(--sc-border,#465058);
}
html[data-theme="dark"] .group-timer-page #groupRoom .group-online::before{
  background:var(--sc-accent-strong,#78d5b1);
}
html[data-theme="dark"] .group-timer-page .group-primary,
html[data-theme="dark"] .group-timer-page .group-discord-join{
  color:#fff;
}
html[data-theme="dark"] .group-timer-page .group-primary:hover,
html[data-theme="dark"] .group-timer-page .group-discord-join:hover{
  background:#337f61;
  border-color:#337f61;
}
html[data-theme="dark"] .group-timer-page .group-setup input,
html[data-theme="dark"] .group-timer-page .group-setup select{
  color:var(--gt-auth-ink);
  background:var(--gt-auth-panel);
}
/* Explicit dark surfaces override older component-level theme selectors. */
html[data-theme="dark"] .group-timer-page .group-setup .group-card,
html[data-theme="dark"] .group-timer-page .group-collab-card{
  background:var(--gt-auth-panel);
  border-color:var(--gt-auth-line);
  box-shadow:none;
  color:var(--gt-auth-ink);
}
html[data-theme="dark"] .group-timer-page .group-collab-heading h3,
html[data-theme="dark"] .group-timer-page .group-setup .group-card h2{
  color:var(--gt-auth-ink);
}
html[data-theme="dark"] .group-timer-page .group-chat-list{
  background:var(--gt-auth-soft);
  border-color:var(--gt-auth-line);
}
html[data-theme="dark"] .group-timer-page #groupRoom .group-host-controls,
html[data-theme="dark"] .group-timer-page #groupRoom .group-quick-settings{
  background:var(--gt-auth-soft);
  border-color:var(--gt-auth-line);
}
@media(max-width:900px){
  .group-timer-page .group-page-intro-row{
    grid-template-columns:minmax(0,1fr);
    gap:14px;
  }
  .group-timer-page .group-page-intro-row .group-social-actions{
    justify-content:flex-start;
  }
  .group-timer-page #groupRoom .group-room-heading-inner{
    grid-template-columns:minmax(150px,.75fr) minmax(0,1.25fr);
    gap:16px;
  }
  .group-timer-page #groupRoom .group-columns{
    grid-template-columns:minmax(0,1fr);
  }
}
@media(max-width:650px){
  .group-timer-page .group-header{
    padding:13px 16px;
  }
  .group-timer-page .group-wrap{
    padding:19px 15px 35px;
  }
  .group-timer-page .group-page-intro-row{
    padding-bottom:15px;
    margin-bottom:16px;
  }
  .group-timer-page .group-intro h1{font-size:32px}
  .group-timer-page .group-setup .group-card{padding:19px}
  .group-timer-page #groupRoom .group-session-summary{padding:17px}
  .group-timer-page #groupRoom .group-room-heading{
    grid-template-columns:minmax(0,1fr);
    gap:11px;
  }
  .group-timer-page #groupRoom .group-room-heading-inner{
    grid-template-columns:minmax(0,1fr);
    gap:10px;
  }
  .group-timer-page #groupRoom .group-room-name{
    border-inline-end:0;
    border-bottom:1px solid var(--gt-auth-line);
    padding:0 0 11px;
  }
  .group-timer-page #groupRoom .group-online{
    justify-self:start;
  }
  .group-timer-page #groupRoom .group-clock-card{padding:22px 17px}
  .group-timer-page #groupRoom .group-clock{font-size:clamp(47px,13vw,68px)}
  .group-timer-page #groupRoom .group-side .group-card,
  .group-timer-page .group-collab-card{padding:17px}
  .group-timer-page .group-discord-community{gap:10px;padding:13px}
}
@media(max-width:400px){
  .group-timer-page .group-page-intro-row .group-social-actions{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .group-timer-page .group-social-nav-btn{
    width:100%;min-width:0;padding:5px 7px;
  }
}
@media(prefers-reduced-motion:reduce){
  .group-timer-page .group-social-nav-btn,
  .group-timer-page .group-primary,
  .group-timer-page .group-discord-join{
    transition:none!important;
    transform:none!important;
  }
}
.group-timer-page.low-stimulation .group-social-nav-btn,
.group-timer-page.low-stimulation .group-primary,
.group-timer-page.low-stimulation .group-discord-join{
  transition:none!important;transform:none!important;
}

/* Repeat cycle controls: compact, accessible and visually subordinate to timer. */
.group-cycle-inline,.group-cycle-settings{display:grid;gap:8px;margin:10px 0 5px;padding:10px 12px;border:1px solid var(--group-border,rgba(98,122,112,.2));border-radius:12px;background:rgba(125,154,138,.035)}
.group-cycle-toggle{display:flex;align-items:center;gap:9px;font-size:.9rem;font-weight:600;line-height:1.35;cursor:pointer}
.group-cycle-toggle input[role="switch"]{appearance:none;-webkit-appearance:none;display:inline-block;position:relative;flex:0 0 42px;width:42px;min-width:42px;max-width:42px;height:24px;min-height:24px;padding:0;margin:0;background:rgba(115,133,123,.34);border:1px solid rgba(115,133,123,.55);border-radius:999px;cursor:pointer;transition:background .18s ease,border-color .18s ease}
.group-cycle-toggle input[role="switch"]::before{content:"";position:absolute;width:16px;height:16px;left:3px;top:3px;background:#fff;border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.18);transition:transform .18s ease}
.group-cycle-toggle input[role="switch"]:checked{background:var(--gt-auth-mint,#168365);border-color:var(--gt-auth-mint,#168365)}
.group-cycle-toggle input[role="switch"]:checked::before{transform:translateX(18px)}
.group-cycle-toggle input[role="switch"]:focus-visible{outline:3px solid var(--gt-auth-mint,#168365);outline-offset:3px}
.group-cycle-toggle input[role="switch"]:disabled{cursor:wait;opacity:.65}
.group-cycle-toggle:has(input[role="switch"]:disabled){cursor:wait;opacity:.8}
@media(prefers-reduced-motion:reduce){.group-cycle-toggle input[role="switch"],.group-cycle-toggle input[role="switch"]::before{transition:none}}
.group-cycle-break,.group-cycle-setting-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.group-cycle-break label,.group-cycle-setting-row label{margin:0;font-size:.85rem}
.group-cycle-break input,.group-cycle-setting-row input{width:74px;max-width:74px;min-height:34px;padding:5px 7px}
.group-cycle-setting-row button{min-height:34px;padding:6px 12px}
.group-cycle-rule{margin:3px 0 10px;line-height:1.4}
.group-cycle-settings .group-small{margin:0;line-height:1.45}
.group-cycle-phase{margin:3px 0 9px;opacity:.8;font-weight:600}
@media(max-width:480px){.group-cycle-inline,.group-cycle-settings{padding:9px 10px}.group-cycle-setting-row{gap:6px}}

/* Compact host cycle panel and individual sound alerts */
.group-timer-page .group-cycle-settings{padding:15px 16px;display:grid;gap:11px}
.group-timer-page .group-cycle-panel-heading{margin:0;display:flex;justify-content:space-between;gap:10px;align-items:center;font-size:14px;font-weight:700}
.group-timer-page .group-cycle-panel-heading span{font-size:11px;font-weight:500;opacity:.7}
.group-timer-page .group-cycle-settings .group-cycle-toggle{display:flex;align-items:center;gap:11px;line-height:1.35}
.group-timer-page .group-cycle-settings .group-cycle-setting-row{display:flex;align-items:center;flex-wrap:wrap;gap:9px}
.group-timer-page .group-cycle-settings #groupCycleHint{margin:0;font-size:12px;line-height:1.5;opacity:.83}
.group-timer-page .group-alert-settings{display:grid;gap:11px;padding:14px 0;border-bottom:1px solid var(--gt-auth-line,#dfe8e3)}
.group-timer-page .group-alert-choice{display:flex;align-items:center;gap:10px;font-size:13px}
.group-timer-page .group-alert-choice input{accent-color:var(--gt-auth-mint,#168365);width:18px;height:18px}
.group-timer-page .group-alert-settings .group-small{margin:0;font-size:12px;opacity:.75}
@media(max-width:600px){.group-timer-page .group-cycle-settings{padding:12px}.group-timer-page .group-cycle-panel-heading span{display:none}}