/* TypeFlow v6.6.26 — one control language for Test / Practice / Daily Challenge */

/* Practice and Challenge now use the Test page as the visual source of truth. */
.tf-unified-typing-card{
  padding:0 !important;
  overflow:hidden !important;
  border-radius:16px !important;
}
.tf-mode-config{
  background:var(--surface);
  border-bottom:1px solid var(--line);
}
.tf-mode-config .test-config-row{
  display:grid !important;
  grid-template-columns:1.05fr 1.18fr !important;
  align-items:start !important;
  gap:28px !important;
  padding:18px 18px 14px !important;
  border-bottom:1px solid color-mix(in srgb,var(--line) 82%,transparent) !important;
}
.tf-mode-config .control-heading{
  height:22px !important;
  margin-bottom:9px !important;
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  color:var(--muted) !important;
  font-size:11px !important;
  font-weight:800 !important;
}
.tf-mode-config .control-icon{
  width:21px !important;
  height:21px !important;
  display:grid !important;
  place-items:center !important;
  border:1px solid color-mix(in srgb,var(--primary) 24%,var(--line)) !important;
  border-radius:50% !important;
  background:var(--primary-soft) !important;
  color:var(--primary) !important;
  font-size:10px !important;
  flex:0 0 21px !important;
}
.tf-mode-config .segmented{
  display:flex !important;
  align-items:center !important;
  flex-wrap:wrap !important;
  gap:6px !important;
}
.tf-mode-config .option-btn{
  min-width:0 !important;
  height:34px !important;
  padding:0 11px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border:1px solid var(--line) !important;
  border-radius:9px !important;
  background:var(--surface) !important;
  color:var(--text) !important;
  font-size:11px !important;
  font-weight:780 !important;
  line-height:1 !important;
  text-decoration:none !important;
  white-space:nowrap !important;
  box-shadow:none !important;
}
.tf-mode-config a.option-btn:hover{
  border-color:color-mix(in srgb,var(--primary) 45%,var(--line)) !important;
  color:var(--primary) !important;
}
.tf-mode-config .option-btn.active{
  border-color:color-mix(in srgb,var(--primary) 60%,var(--line)) !important;
  background:linear-gradient(180deg,color-mix(in srgb,var(--primary) 10%,var(--surface)),var(--primary-soft)) !important;
  color:var(--primary) !important;
  box-shadow:0 5px 14px color-mix(in srgb,var(--primary) 10%,transparent) !important;
}
.tf-static-option{cursor:default !important;pointer-events:none !important}

/* Identical language row + identical Settings / Fullscreen placement. */
.tf-mode-config .typing-language-control{
  position:relative !important;
  margin:10px 18px 12px !important;
  min-height:48px !important;
  display:grid !important;
  grid-template-columns:135px minmax(0,1fr) auto !important;
  align-items:center !important;
  gap:10px !important;
  padding:7px 8px !important;
  border:1px solid color-mix(in srgb,var(--primary) 38%,var(--line)) !important;
  border-radius:10px !important;
  background:linear-gradient(180deg,color-mix(in srgb,var(--primary) 3%,var(--surface)),var(--surface)) !important;
  box-shadow:none !important;
}
.tf-mode-config .typing-language-label{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  min-width:0 !important;
}
.tf-mode-config .language-globe{
  width:25px !important;
  height:25px !important;
  display:grid !important;
  place-items:center !important;
  border-radius:8px !important;
  background:var(--primary-soft) !important;
  color:var(--primary) !important;
  font-size:12px !important;
}
.tf-mode-config .typing-language-label strong{font-size:10.5px !important;white-space:nowrap !important}
.tf-mode-config .typing-language-options{
  display:grid !important;
  grid-template-columns:repeat(5,minmax(80px,1fr)) !important;
  gap:6px !important;
  min-width:0 !important;
}
.tf-mode-config .typing-lang-btn{
  min-width:0 !important;
  height:34px !important;
  padding:0 7px !important;
  border:1px solid transparent !important;
  border-radius:8px !important;
  background:transparent !important;
  color:var(--text) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:5px !important;
  font-size:10px !important;
  font-weight:760 !important;
  white-space:nowrap !important;
  text-decoration:none !important;
}
.tf-mode-config .typing-lang-btn>span{font-size:10px !important}
.tf-mode-config .typing-lang-btn:hover{background:var(--surface-3) !important}
.tf-mode-config .typing-lang-btn.active{
  border-color:color-mix(in srgb,var(--primary) 55%,var(--line)) !important;
  background:var(--surface) !important;
  color:var(--primary) !important;
  box-shadow:0 4px 12px color-mix(in srgb,var(--primary) 9%,transparent) !important;
}
.tf-mode-config .workspace-tools{display:flex !important;align-items:center !important;gap:5px !important}
.tf-mode-config .tool-icon-btn{
  width:34px !important;height:34px !important;
  display:grid !important;place-items:center !important;
  border:1px solid var(--line) !important;
  border-radius:8px !important;
  background:var(--surface) !important;
  color:var(--muted) !important;
  cursor:pointer !important;
}
.tf-mode-config .tool-icon-btn:hover{border-color:var(--primary) !important;color:var(--primary) !important;background:var(--primary-soft) !important}

/* One session-header geometry for Practice and Challenge. */
.tf-session-head{
  min-height:58px !important;
  padding:11px 18px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:18px !important;
  border-bottom:1px solid var(--line) !important;
  background:var(--surface-2) !important;
  box-sizing:border-box !important;
}
.tf-session-head>div:first-child{display:flex !important;align-items:center !important;gap:10px !important;min-width:0 !important}
.tf-session-head>div:first-child>strong{font-size:10.5px !important;white-space:nowrap !important}
.tf-session-head .challenge-server-reset{margin:0 !important;font-size:8.5px !important;white-space:nowrap !important}
.tf-session-time{display:grid !important;justify-items:end !important;gap:2px !important;flex:0 0 auto !important}
.tf-session-time small{color:var(--muted) !important;font-size:8px !important}
.tf-session-time strong{font-size:14px !important;font-variant-numeric:tabular-nums !important}

/* v6.6.42 — no separate Practice/Challenge typing-surface geometry. */

/* The old standalone practice/challenge control styles must not reserve space anymore. */
.practice-config-card,.challenge-langs{display:none !important}

/* Fullscreen keeps the exact same hierarchy; controls do not jump to a new place. */
.practice-arena:fullscreen,
.challenge-arena:fullscreen{
  justify-content:flex-start !important;
  padding:clamp(18px,3vh,34px) clamp(18px,5vw,72px) !important;
}
.practice-arena:fullscreen>.tf-mode-config,
.challenge-arena:fullscreen>.tf-mode-config,
.practice-arena:fullscreen>.tf-session-head,
.challenge-arena:fullscreen>.tf-session-head,
.practice-arena:fullscreen>.tf-reading-card,
.challenge-arena:fullscreen>.tf-reading-card,
.practice-arena:fullscreen>.tf-entry-card,
.challenge-arena:fullscreen>.tf-entry-card,
.practice-arena:fullscreen>.tf-typing-stats,
.challenge-arena:fullscreen>.tf-typing-stats,
.practice-arena:fullscreen>.challenge-actions,
.challenge-arena:fullscreen>.challenge-actions{
  width:min(1320px,100%) !important;
  max-width:1320px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
.practice-arena:fullscreen>.tf-mode-config,
.challenge-arena:fullscreen>.tf-mode-config{border:1px solid var(--line) !important;border-radius:14px 14px 0 0 !important;overflow:hidden !important}
.practice-arena:fullscreen>.tf-session-head,
.challenge-arena:fullscreen>.tf-session-head{border-left:1px solid var(--line)!important;border-right:1px solid var(--line)!important}

@media(max-width:1050px){
  .tf-mode-config .test-config-row{grid-template-columns:1fr !important;gap:13px !important}
  .tf-mode-config .typing-language-control{grid-template-columns:110px minmax(0,1fr) auto !important}
  .tf-mode-config .typing-language-options{display:flex !important;overflow-x:auto !important;scrollbar-width:none !important}
  .tf-mode-config .typing-lang-btn{min-width:104px !important}
}
@media(max-width:680px){
  .tf-mode-config .test-config-row{padding:13px 12px 10px !important}
  .tf-mode-config .typing-language-control{margin:8px 12px 10px !important;grid-template-columns:1fr auto !important}
  .tf-mode-config .typing-language-options{grid-column:1/-1 !important;grid-row:2 !important}
  .tf-session-head{padding-inline:12px !important}
  .tf-session-head>div:first-child>strong{display:none !important}
}