/* v2k9x.css */
.metric:first-child{padding-left:0}
.metric:last-child{border-right:0}
.metric-label{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.09em;font-weight:750}
.metric-value{margin-top:7px;font-size:28px;font-weight:760;letter-spacing:-.04em}
.metric-value.net{color:var(--accent)}
.metric-value.good{color:var(--good)}
.metric-value.bad{color:var(--bad)}
.analysis-grid{
  display:grid;grid-template-columns:minmax(0,1.45fr) minmax(280px,.7fr);gap:28px;
  align-items:start;
}
.section-title{
  display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:13px;
}
.section-title h3{margin:0;font-size:16px;letter-spacing:-.02em}
.section-title span{color:var(--muted);font-size:12px}
.chart-wrap{
  background:rgba(255,255,255,.32);border:1px solid rgba(202,216,228,.8);
  border-radius:14px;padding:12px 12px 6px;overflow:hidden;
}
#performance-chart{display:block;width:100%;height:auto;min-height:245px;touch-action:none}
.chart-detail-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:6px 4px 2px;border-top:1px solid rgba(202,216,228,.72);border-bottom:1px solid rgba(202,216,228,.72)}
.chart-detail-item{padding:10px 12px;text-align:center;border-right:1px solid rgba(202,216,228,.72)}
.chart-detail-item:last-child{border-right:0}
.chart-detail-label{display:block;color:var(--muted);font-size:9px;line-height:1.25;text-transform:uppercase;letter-spacing:.07em;font-weight:750;margin-bottom:3px}
.chart-detail-item strong{font-size:17px;line-height:1;color:var(--text)}
.chart-detail-item small{margin-left:3px;color:var(--muted);font-size:9px}
.legend{display:flex;gap:18px;align-items:center;margin:10px 4px 4px;color:var(--muted);font-size:11px}
.legend-item{display:flex;align-items:center;gap:7px}
.legend-line{width:18px;height:2px;border-radius:2px}
.legend-line.net{background:var(--accent)}
.legend-line.gross{background:transparent;border-top:2px dashed #94a3b8;height:0}
.legend-error-mark{width:2px;height:10px;border-radius:2px;background:#d94b55}
.error-summary{
  background:rgba(255,255,255,.30);border:1px solid rgba(202,216,228,.8);
  border-radius:14px;padding:17px;
}
.error-summary-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.mini-label{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-weight:750}
.mini-value{font-size:23px;font-weight:760;margin-top:4px}
.errors-section{margin-top:34px}
.error-table-wrap{
  overflow:auto;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.error-table{width:100%;border-collapse:collapse;min-width:720px}
.error-table th,.error-table td{
  text-align:left;padding:12px 10px;border-bottom:1px solid rgba(202,216,228,.65);font-size:12px;
}
.error-table th{
  color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.08em;font-weight:750;
}
.error-table tr:last-child td{border-bottom:0}
.error-char{font-family:"Times New Roman", Times, serif;font-size:13px}
.error-char.typed{color:var(--bad);font-weight:750}
.error-char.expected{color:var(--good);font-weight:750}
.status-pill{
  display:inline-flex;align-items:center;border-radius:999px;padding:4px 8px;
  font-size:10px;font-weight:750;white-space:nowrap;
}
.status-deleted{background:#e8f6ee;color:#15703a}
.status-open{background:#feecec;color:#b4232b}
.status-missed{background:#fff4d8;color:#9a6700}
.empty-errors{padding:22px 0;color:var(--muted);font-size:13px}
.certificate{
  margin-top:34px;padding-top:28px;border-top:1px solid var(--line);
  display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
}
.cert-copy h3{margin:0 0 5px;font-size:16px}
.cert-copy p{margin:0;color:var(--muted);font-size:12px;line-height:1.6}
.cert-actions{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap}
.name-field label{
  display:block;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.08em;
  font-weight:750;margin-bottom:6px;
}
.name-input{
  width:220px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.55);
  padding:9px 11px;outline:none;color:var(--text)
}
.name-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(47,103,255,.1)}
.download-btn{
  border:0;border-radius:10px;background:var(--accent);color:white;padding:10px 14px;
  font-weight:700;font-size:13px;
}
.download-btn:hover{filter:brightness(.96)}

@media(max-width:900px){
  .result-metrics{grid-template-columns:repeat(3,1fr)}
  .metric:nth-child(3){border-right:0}
  .metric:nth-child(-n/**/+3){border-bottom:1px solid var(--line)}
  .analysis-grid{grid-template-columns:1fr}
}
@media(max-width:860px){
  .toolbar{align-items:flex-start;flex-direction:column;gap:14px}
  .selects{width:100%}
}

@media(max-width:720px){
  .brand-logo{height:46px;max-width:72vw}
  .app{width:min(100% - 28px,1040px);padding-top:38px}
  .top-row{align-items:flex-start;flex-direction:column;gap:18px}
  .live-stats{width:100%;justify-content:space-between;gap:10px}
  .stat{flex-direction:column;align-items:flex-start;gap:2px}
  .stat-value{font-size:18px}
  .typing-zone{padding-top:32px;padding-bottom:52px}
  .toolbar{align-items:flex-start;flex-direction:column;gap:13px}
  .selects{width:100%}
  #words-container{
    height:3.36em;
    font-size:clamp(20px,5vw,25px);
    line-height:1.68;
    letter-spacing:0;
    word-spacing:0;
  }
  .results{margin-top:42px}
  .results-head{align-items:flex-start;flex-direction:column}
  .result-metrics{grid-template-columns:repeat(2,1fr)}
  .metric{border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
  .metric:nth-child(2n){border-right:0}
  .metric:nth-last-child(-n/**/+2){border-bottom:0}
  .metric:nth-child(3){border-right:1px solid var(--line)}
  .certificate{align-items:flex-start;flex-direction:column}
  .cert-actions{width:100%}
  .name-field,.name-input{width:100%}
  .download-btn{width:100%}
}

@media(max-width:560px){
  .chart-detail-strip{grid-template-columns:repeat(2,1fr)}
  .chart-detail-item:nth-child(2){border-right:0}
  .chart-detail-item:nth-child(-n+2){border-bottom:1px solid rgba(202,216,228,.72)}
}

/* Certificate preview modal */
.certificate-modal{
  position:fixed;
  inset:0;
  z-index:9999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(8,18,34,.72);
  backdrop-filter:blur(6px);
}
.certificate-modal.show{display:flex}
.certificate-dialog{
  width:min(1240px,97vw);
  max-height:94vh;
  display:flex;
  flex-direction:column;
  background:#f8fbfd;
  border-radius:18px;
  box-shadow:0 30px 90px rgba(0,0,0,.35);
  overflow:hidden;
}
.certificate-dialog-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:16px 20px;
  border-bottom:1px solid #d8e2ea;
}