/* TypeFlow V6.2.5 — responsive performance section.
   Designed to remain balanced across normal desktop, zoom-out and ultrawide viewports. */
.performance-section{
  --perf-gap:clamp(14px,1.1vw,22px);
  margin-top:clamp(24px,2.2vw,38px);
  padding:clamp(20px,2vw,30px);
  border:1px solid color-mix(in srgb,var(--line) 88%,var(--primary) 12%);
  border-radius:clamp(18px,1.35vw,24px);
  background:linear-gradient(145deg,color-mix(in srgb,var(--surface) 96%,var(--primary) 4%),var(--surface));
  box-shadow:0 20px 55px rgba(30,37,74,.07);
}
.performance-section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:clamp(18px,1.6vw,26px);
}
.performance-eyebrow{
  display:block;
  margin-bottom:6px;
  color:var(--primary);
  font-size:clamp(12px,.68vw,13.5px);
  font-weight:850;
  letter-spacing:.11em;
}
.performance-section-head h2{
  margin:0;
  color:var(--text);
  font-size:clamp(22px,1.55vw,30px);
  line-height:1.15;
  letter-spacing:-.035em;
}
.performance-section-head p{
  margin:7px 0 0;
  color:var(--muted);
  font-size:clamp(14px,.82vw,16px);
  line-height:1.55;
}
.performance-head-link{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-height:42px;
  padding:0 15px;
  border:1px solid color-mix(in srgb,var(--primary) 34%,var(--line));
  border-radius:11px;
  background:color-mix(in srgb,var(--primary) 5%,var(--surface));
  color:var(--primary);
  font-size:clamp(13px,.76vw,14.5px);
  font-weight:780;
  text-decoration:none;
}
.performance-head-link:hover{transform:translateY(-1px);background:var(--primary-soft)}

.performance-stat-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,clamp(235px,18vw,320px)),1fr));
  gap:var(--perf-gap);
}
.performance-stat-card{
  position:relative;
  min-width:0;
  min-height:clamp(150px,10.5vw,178px);
  padding:clamp(18px,1.35vw,24px);
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--line) 90%,var(--primary) 10%);
  border-radius:clamp(15px,1vw,19px);
  background:var(--surface);
  box-shadow:0 12px 32px rgba(27,35,70,.055);
  display:flex;
  flex-direction:column;
  justify-content:center;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.performance-stat-card:hover{
  transform:translateY(-2px);
  border-color:color-mix(in srgb,var(--primary) 30%,var(--line));
  box-shadow:0 18px 42px rgba(27,35,70,.085);
}
.performance-card-top{display:flex;align-items:center;gap:10px;margin-bottom:clamp(12px,1vw,16px)}
.performance-icon{
  width:clamp(34px,2.25vw,42px);
  height:clamp(34px,2.25vw,42px);
  flex:0 0 auto;
  display:grid;
  place-items:center;
  border-radius:12px;
  font-size:clamp(15px,1vw,19px);
  font-weight:850;
}
.performance-icon--violet{background:color-mix(in srgb,#765cff 13%,var(--surface));color:#7661ff}
.performance-icon--gold{background:color-mix(in srgb,#ffb52f 16%,var(--surface));color:#e59a00}
.performance-icon--green{background:color-mix(in srgb,#21c77a 13%,var(--surface));color:#11a965}
.performance-icon--blue{background:color-mix(in srgb,#3c8cff 13%,var(--surface));color:#397ff0}
.performance-card-label{
  color:var(--text);
  font-size:clamp(14px,.85vw,16px);
  font-weight:820;
  line-height:1.3;
}
.performance-main-value,
.performance-value-row strong{
  margin:0;
  color:var(--text);
  font-size:clamp(28px,1.85vw,35px);
  line-height:1.05;
  letter-spacing:-.045em;
  font-weight:860;
}
.performance-main-value em,
.performance-value-row strong em{
  font-style:normal;
  font-size:.52em;
  letter-spacing:-.015em;
  color:var(--muted);
  font-weight:760;
}
.performance-stat-card small{
  display:block;
  margin-top:10px;
  color:var(--muted);
  font-size:clamp(13.5px,.78vw,15px);
  line-height:1.55;
}
.performance-value-row{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.performance-sparkline{width:clamp(68px,5vw,94px);height:45px;display:flex;align-items:flex-end;justify-content:flex-end;gap:5px;opacity:.92}
.performance-sparkline i{width:6px;border-radius:10px 10px 3px 3px;background:linear-gradient(180deg,#8e69ff,#5b5df5)}
.performance-sparkline i:nth-child(1){height:11px}.performance-sparkline i:nth-child(2){height:25px}.performance-sparkline i:nth-child(3){height:18px}.performance-sparkline i:nth-child(4){height:39px}.performance-sparkline i:nth-child(5){height:27px}.performance-sparkline i:nth-child(6){height:34px}
.performance-progress-card p{margin:0;color:var(--muted);font-size:clamp(13.5px,.8vw,15.5px);line-height:1.55}
.performance-card-action{
  display:inline-flex;
  align-items:center;
  gap:7px;
  width:max-content;
  margin-top:15px;
  color:var(--primary);
  font-size:clamp(13.5px,.8vw,15px);
  font-weight:800;
}

.performance-premium-card{
  position:relative;
  isolation:isolate;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:clamp(14px,1.2vw,22px);
  margin-top:var(--perf-gap);
  min-height:clamp(118px,7.5vw,142px);
  padding:clamp(20px,1.6vw,28px);
  overflow:hidden;
  border:1px solid rgba(132,103,255,.38);
  border-radius:clamp(16px,1vw,20px);
  background:linear-gradient(115deg,#181440 0%,#26175d 48%,#3d1d84 100%);
  box-shadow:0 18px 44px rgba(35,19,100,.24);
  color:#fff;
}
.performance-premium-glow{
  position:absolute;
  z-index:-1;
  width:420px;height:260px;
  right:-110px;top:-120px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(137,89,255,.5),rgba(137,89,255,0) 69%);
}
.performance-premium-icon{
  width:clamp(48px,3.4vw,62px);
  height:clamp(48px,3.4vw,62px);
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.18);
  border-radius:16px;
  background:rgba(255,255,255,.08);
  color:#ffd168;
  font-size:clamp(22px,1.5vw,28px);
}
.performance-premium-copy span{display:block;color:#c7baff;font-size:clamp(11.5px,.67vw,13px);font-weight:850;letter-spacing:.1em}
.performance-premium-copy h3{margin:4px 0 5px;color:#fff;font-size:clamp(18px,1.25vw,23px);line-height:1.2}
.performance-premium-copy p{margin:0;max-width:760px;color:rgba(255,255,255,.75);font-size:clamp(13.5px,.8vw,15.5px);line-height:1.55}
.performance-premium-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:46px;
  padding:0 clamp(16px,1.2vw,22px);
  border:1px solid rgba(255,255,255,.2);
  border-radius:12px;
  background:linear-gradient(100deg,#5e63ff,#8a4df4);
  box-shadow:0 10px 28px rgba(84,63,239,.27);
  color:#fff!important;
  font-size:clamp(13.5px,.8vw,15px);
  font-weight:820;
  white-space:nowrap;
}
.performance-premium-cta:hover{transform:translateY(-1px);filter:brightness(1.06)}

/* A single, centered ad reservation after the performance section. */
.typing-below-ad{
  width:min(100%,970px);
  min-height:96px!important;
  margin:clamp(22px,2vw,34px) auto!important;
  border-radius:16px!important;
}

html[data-theme="dark"] .performance-section{
  background:linear-gradient(145deg,#0f101a,#11121e);
  border-color:#27293b;
  box-shadow:0 22px 60px rgba(0,0,0,.25);
}
html[data-theme="dark"] .performance-stat-card{
  background:linear-gradient(145deg,#171824,#14151f);
  border-color:#2b2d40;
  box-shadow:0 14px 34px rgba(0,0,0,.18);
}
html[data-theme="dark"] .performance-stat-card:hover{border-color:#47415f;box-shadow:0 19px 42px rgba(0,0,0,.26)}
html[data-theme="dark"] .performance-stat-card small,
html[data-theme="dark"] .performance-progress-card p{color:#9b9caf}

@media (max-width:900px){
  .performance-section-head{align-items:flex-start;flex-direction:column;gap:14px}
  .performance-premium-card{grid-template-columns:auto 1fr}
  .performance-premium-cta{grid-column:1/-1;width:100%}
}
@media (max-width:560px){
  .performance-section{padding:16px;border-radius:16px}
  .performance-stat-grid{grid-template-columns:1fr}
  .performance-stat-card{min-height:138px}
  .performance-premium-card{grid-template-columns:1fr;padding:20px}
  .performance-premium-icon{width:48px;height:48px}
  .performance-premium-cta{grid-column:auto}
}


/* V6.2.6 — test -> performance flow fix */
.typing-tool-page .premium-grid{
  align-items:start;
}
.typing-tool-page .premium-side-stack{
  align-self:start;
}
.typing-tool-page .performance-section{
  clear:both;
  margin-top:clamp(22px,1.8vw,30px);
}
/* Keep the only remaining ad reservation below the performance section. */
.typing-tool-page .typing-below-ad{
  margin-top:clamp(20px,1.6vw,28px)!important;
  margin-bottom:clamp(26px,2vw,36px)!important;
}
@media (min-width: 901px){
  .typing-tool-page .premium-side-stack{
    height:auto!important;
  }
}

/* v6.6.60 — typing test performance section redesign */
.typing-tool-page .performance-section{
  margin-top:28px;
  padding:26px;
  border-radius:22px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 97%,var(--primary) 3%),var(--surface));
  border:1px solid color-mix(in srgb,var(--line) 86%,var(--primary) 14%);
  box-shadow:0 16px 42px rgba(24,31,62,.08);
}
.typing-tool-page .performance-section-head{
  align-items:center;
  margin-bottom:22px;
}
.typing-tool-page .performance-section-head p{
  max-width:680px;
}
.typing-tool-page .performance-head-link{
  min-height:44px;
  padding:0 16px;
  border-radius:12px;
  background:color-mix(in srgb,var(--primary) 6%,var(--surface));
}
.typing-tool-page .performance-stat-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}
.typing-tool-page .performance-stat-card{
  min-height:160px;
  padding:20px 22px;
  border-radius:18px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 98%,var(--primary) 2%),var(--surface));
  border:1px solid color-mix(in srgb,var(--line) 88%,var(--primary) 12%);
  box-shadow:0 10px 30px rgba(24,31,62,.05);
}
.typing-tool-page .performance-stat-card::after{
  content:"";
  position:absolute;
  right:-22px;
  top:-28px;
  width:88px;
  height:88px;
  border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--primary) 10%,transparent),transparent 68%);
  pointer-events:none;
}
.typing-tool-page .performance-card-top,
.typing-tool-page .performance-main-value,
.typing-tool-page .performance-value-row,
.typing-tool-page .performance-stat-card small,
.typing-tool-page .performance-progress-card p{
  position:relative;
  z-index:1;
}
.typing-tool-page .performance-card-label{
  font-size:15px;
}
.typing-tool-page .performance-main-value,
.typing-tool-page .performance-value-row strong{
  font-size:34px;
}
.typing-tool-page .performance-stat-card small,
.typing-tool-page .performance-progress-card p{
  font-size:13.5px;
}
.typing-tool-page .performance-result-card{background:linear-gradient(180deg,color-mix(in srgb,#7862ff 4%,var(--surface)),var(--surface))}
.typing-tool-page .performance-best-card{background:linear-gradient(180deg,color-mix(in srgb,#ffb52f 5%,var(--surface)),var(--surface))}
.typing-tool-page .performance-rank-card{background:linear-gradient(180deg,color-mix(in srgb,#24c57b 5%,var(--surface)),var(--surface))}

.typing-tool-page .performance-cta-card{
  grid-column:1/-1;
  min-height:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:18px;
  padding:20px 22px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--primary-soft) 42%,var(--surface)),var(--surface));
}
.typing-tool-page .performance-cta-card .performance-card-top{margin-bottom:8px}
.typing-tool-page .performance-cta-card p{margin:0;max-width:560px}
.typing-tool-page .performance-card-action--button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:0 16px;
  border-radius:12px;
  border:1px solid color-mix(in srgb,var(--primary) 28%,var(--line));
  background:var(--surface);
  box-shadow:0 8px 18px rgba(24,31,62,.05);
  white-space:nowrap;
}

.typing-tool-page .performance-member-panel{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:18px;
  margin-top:16px;
  padding:22px 24px;
  border-radius:20px;
  border:1px solid color-mix(in srgb,var(--primary) 18%,var(--line));
  background:linear-gradient(135deg,color-mix(in srgb,var(--primary-soft) 72%,var(--surface)),color-mix(in srgb,var(--surface) 96%,var(--primary) 4%));
  box-shadow:0 14px 36px rgba(31,23,88,.09);
}
.typing-tool-page .performance-member-main{
  display:flex;
  align-items:center;
  gap:16px;
  min-width:0;
}
.typing-tool-page .performance-member-icon{
  width:54px;
  height:54px;
  flex:0 0 54px;
  display:grid;
  place-items:center;
  border-radius:16px;
  border:1px solid color-mix(in srgb,var(--primary) 24%,var(--line));
  background:rgba(255,255,255,.04);
  color:#f1c24d;
  font-size:24px;
}
.typing-tool-page .performance-member-copy span{
  display:block;
  margin-bottom:4px;
  color:var(--primary);
  font-size:11px;
  font-weight:850;
  letter-spacing:.14em;
}
.typing-tool-page .performance-member-copy h3{
  margin:0;
  font-size:31px;
  line-height:1.08;
  letter-spacing:-.04em;
}
.typing-tool-page .performance-member-copy p{
  margin:8px 0 0;
  max-width:760px;
  color:var(--muted);
  font-size:15px;
  line-height:1.55;
}
.typing-tool-page .performance-member-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:48px;
  padding:0 18px;
  border-radius:14px;
  background:linear-gradient(135deg,#6a6cff,#944cff);
  color:#fff!important;
  font-weight:820;
  box-shadow:0 10px 24px rgba(92,78,233,.22);
  white-space:nowrap;
}

html[data-theme="dark"] .typing-tool-page .performance-section{
  background:linear-gradient(180deg,#0f1018,#12131d);
  border-color:#292b3d;
}
html[data-theme="dark"] .typing-tool-page .performance-stat-card{
  background:linear-gradient(180deg,#151722,#12131c);
  border-color:#2a2d3f;
}
html[data-theme="dark"] .typing-tool-page .performance-cta-card{
  background:linear-gradient(180deg,color-mix(in srgb,var(--primary) 10%,#141520),#13141e);
}
html[data-theme="dark"] .typing-tool-page .performance-member-panel{
  background:linear-gradient(135deg,#17133d,#1a1646 55%,#11131d 100%);
  border-color:#3a3564;
}
html[data-theme="dark"] .typing-tool-page .performance-card-action--button{
  background:#171826;
  border-color:#343752;
}
html[data-theme="dark"] .typing-tool-page .performance-member-icon{
  background:rgba(255,255,255,.04);
  border-color:#403a68;
}

@media (max-width: 980px){
  .typing-tool-page .performance-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .typing-tool-page .performance-rank-card{grid-column:auto}
}
@media (max-width: 720px){
  .typing-tool-page .performance-section{padding:18px}
  .typing-tool-page .performance-stat-grid{grid-template-columns:1fr}
  .typing-tool-page .performance-cta-card,
  .typing-tool-page .performance-member-panel{grid-template-columns:1fr}
  .typing-tool-page .performance-member-copy h3{font-size:25px}
  .typing-tool-page .performance-member-cta,
  .typing-tool-page .performance-card-action--button{width:100%}
}