/* ==========================================================================
   Typing Speed Test — shared styles
   Scoped under .ttx so no theme rule leaks in or out.
   Dark is the default; .ttx--light swaps the palette only.
   ========================================================================== */

.ttx{
  /* ---- dark palette (default) ---- */
  --ttx-bg:#05070E;
  --ttx-card:#0A1120;
  --ttx-card-2:#0D1728;
  --ttx-raise:#111E33;
  --ttx-line:#18263F;
  --ttx-line-2:#101A2C;
  --ttx-accent:#3D7EFF;
  --ttx-accent-2:#2A62D8;
  --ttx-accent-deep:#0F2C63;
  --ttx-glow:rgba(61,126,255,.32);
  --ttx-text:#EAF0FB;
  --ttx-dim:#8A9BB8;
  --ttx-dim-2:#5B6E8E;
  --ttx-ok:#4ADE80;
  --ttx-err:#FF5D6C;
  --ttx-warn:#F5C15E;
  --ttx-warn-bd:rgba(245,193,94,.35);
  --ttx-warn-bg:rgba(245,193,94,.09);
  --ttx-gold:#E4B457;

  /* semantic slots that must differ between themes */
  --ttx-seg-on-bg:var(--ttx-accent-deep);
  --ttx-seg-on-fg:#fff;
  --ttx-seg-on-ring:rgba(61,126,255,.35);
  --ttx-ico-bg:var(--ttx-accent-deep);
  --ttx-ico-fg:#9CC0FF;
  --ttx-veil:rgba(5,7,14,.9);
  --ttx-shadow:0 30px 70px -40px rgba(0,0,0,.95);
  --ttx-inset:0 1px 0 rgba(255,255,255,.03) inset;
  --ttx-err-bg:rgba(255,93,108,.14);
  --ttx-err-bg-sp:rgba(255,93,108,.3);
  --ttx-fill:rgba(61,126,255,.14);

  /* ---- type ---- */
  --ttx-mono:ui-monospace,"SF Mono",SFMono-Regular,"JetBrains Mono","Cascadia Mono",Menlo,Consolas,monospace;
  --ttx-ui:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  /* ---- rhythm: one scale everywhere, so blocks line up ---- */
  --ttx-pad:20px;
  --ttx-gap:14px;
  --ttx-r:16px;
  --ttx-r-sm:10px;
  --ttx-lh:2.15em;

  color-scheme:dark;
  font-family:var(--ttx-ui);
  color:var(--ttx-text);
  max-width:1060px;
  margin-left:auto;
  margin-right:auto;
  text-align:left;
}

/* ---- light palette ---- */
.ttx.ttx--light{
  --ttx-bg:#EEF2F8;
  --ttx-card:#FFFFFF;
  --ttx-card-2:#F7F9FC;
  --ttx-raise:#F1F5FA;
  --ttx-line:#D7E0EC;
  --ttx-line-2:#E6ECF4;
  --ttx-accent:#2563EB;
  --ttx-accent-2:#1D4ED8;
  --ttx-accent-deep:#DBE7FE;
  --ttx-glow:rgba(37,99,235,.28);
  --ttx-text:#0B1220;
  --ttx-dim:#485973;
  --ttx-dim-2:#77869E;
  --ttx-ok:#15803D;
  --ttx-err:#DC2626;
  --ttx-warn:#A16207;
  --ttx-warn-bd:rgba(161,98,7,.3);
  --ttx-warn-bg:rgba(161,98,7,.08);
  --ttx-gold:#A16207;

  --ttx-seg-on-bg:var(--ttx-accent);
  --ttx-seg-on-fg:#fff;
  --ttx-seg-on-ring:rgba(37,99,235,.28);
  --ttx-ico-bg:#DBE7FE;
  --ttx-ico-fg:#1D4ED8;
  --ttx-veil:rgba(255,255,255,.92);
  --ttx-shadow:0 18px 44px -28px rgba(15,32,64,.35);
  --ttx-inset:0 1px 0 rgba(255,255,255,.9) inset;
  --ttx-err-bg:rgba(220,38,38,.09);
  --ttx-err-bg-sp:rgba(220,38,38,.2);
  --ttx-fill:rgba(37,99,235,.12);

  color-scheme:light;
}

.ttx *,.ttx *::before,.ttx *::after{box-sizing:border-box}
.ttx p,.ttx h1,.ttx h2,.ttx h3,.ttx h4,.ttx ol,.ttx ul,.ttx dl,.ttx dd,.ttx dt,.ttx figure{margin:0;padding:0}
.ttx ol,.ttx ul{list-style:none}
.ttx [hidden]{display:none!important}
.ttx :focus-visible{outline:2px solid var(--ttx-accent);outline-offset:2px;border-radius:6px}

/* button reset — !important only here, because themes style buttons hard */
.ttx button{
  font:inherit;margin:0;cursor:pointer;
  -webkit-appearance:none!important;appearance:none!important;
  text-transform:none!important;text-shadow:none!important;
  box-shadow:none!important;letter-spacing:normal;line-height:1.2;
  min-height:0!important;width:auto!important;
}
.ttx input,.ttx select,.ttx textarea{font:inherit;margin:0;max-width:100%}

@media (prefers-reduced-motion:reduce){
  .ttx *{transition:none!important;animation:none!important}
}

/* ==========================================================================
   Shell
   ========================================================================== */
.ttx-card{
  background:var(--ttx-card);
  border:1px solid var(--ttx-line);
  border-radius:var(--ttx-r);
  overflow:hidden;
  box-shadow:var(--ttx-inset),var(--ttx-shadow);
}
.ttx-row{padding:var(--ttx-pad);border-bottom:1px solid var(--ttx-line-2)}
.ttx-row:last-child{border-bottom:0}
.ttx-row--tight{padding:12px var(--ttx-pad)}

.ttx-head{display:flex;align-items:center;justify-content:space-between;gap:var(--ttx-gap);flex-wrap:wrap}
.ttx-title{font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--ttx-text)}
.ttx-sub{font-family:var(--ttx-mono);font-size:11px;letter-spacing:.05em;color:var(--ttx-dim-2)}

/* ==========================================================================
   Controls
   ========================================================================== */
.ttx-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--ttx-gap);flex-wrap:wrap}

.ttx-seg{
  display:flex;align-items:center;gap:2px;
  background:var(--ttx-bg);border:1px solid var(--ttx-line-2);
  border-radius:12px;padding:4px;
}
.ttx-seg > span{
  font-family:var(--ttx-mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ttx-dim-2);padding:0 8px 0 6px;
}
.ttx-seg button{
  background:transparent!important;border:0!important;color:var(--ttx-dim);
  font-family:var(--ttx-mono);font-size:12px;
  padding:7px 12px!important;border-radius:8px!important;
  transition:color .15s,background .15s;white-space:nowrap;
}
.ttx-seg button:hover{color:var(--ttx-text)}
.ttx-seg button[aria-pressed="true"]{
  background:var(--ttx-seg-on-bg)!important;color:var(--ttx-seg-on-fg);
  box-shadow:0 0 0 1px var(--ttx-seg-on-ring) inset!important;
}

/* icon toggles: sound + theme */
.ttx-toggles{display:flex;align-items:center;gap:6px;margin-left:auto}
.ttx-icobtn{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;flex:none;
  background:var(--ttx-bg)!important;border:1px solid var(--ttx-line-2)!important;
  border-radius:11px!important;color:var(--ttx-dim);padding:0!important;
  transition:color .15s,border-color .15s,background .15s;
}
.ttx-icobtn:hover{color:var(--ttx-text);border-color:var(--ttx-line)!important}
.ttx-icobtn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ttx-sound-btn[aria-pressed="true"]{
  color:var(--ttx-accent);
  border-color:var(--ttx-seg-on-ring)!important;
  background:var(--ttx-accent-deep)!important;
}
.ttx-sound-btn[aria-pressed="true"] .ttx-i-off,
.ttx-sound-btn[aria-pressed="false"] .ttx-i-on{display:none}
.ttx--dark .ttx-i-sun,.ttx--light .ttx-i-moon{display:none}

.ttx-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--ttx-raise)!important;border:1px solid var(--ttx-line)!important;
  color:var(--ttx-dim);font-family:var(--ttx-mono);font-size:12.5px;letter-spacing:.03em;
  padding:11px 18px!important;border-radius:var(--ttx-r-sm)!important;
  transition:background .15s,color .15s,border-color .15s;text-decoration:none!important;
}
.ttx-btn:hover{color:var(--ttx-text);border-color:var(--ttx-accent)!important;background:var(--ttx-card-2)!important}
.ttx-btn--primary{background:var(--ttx-accent)!important;border-color:var(--ttx-accent)!important;color:#fff!important;font-weight:600}
.ttx-btn--primary:hover{background:var(--ttx-accent-2)!important;border-color:var(--ttx-accent-2)!important;color:#fff!important}
.ttx-btn--sm{padding:8px 13px!important;font-size:11.5px}
.ttx-btn[disabled]{opacity:.4;cursor:not-allowed}
.ttx-btn svg{width:15px;height:15px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.ttx-field{
  background:var(--ttx-bg)!important;border:1px solid var(--ttx-line)!important;
  color:var(--ttx-text)!important;border-radius:var(--ttx-r-sm)!important;
  padding:11px 13px!important;font-family:var(--ttx-mono);font-size:13px;
  width:100%;box-shadow:none!important;
}
.ttx-field:focus{border-color:var(--ttx-accent)!important;outline:none}
.ttx-field::placeholder{color:var(--ttx-dim-2)}
select.ttx-field{
  cursor:pointer;padding-right:34px!important;
  background-image:linear-gradient(45deg,transparent 50%,var(--ttx-dim) 50%),linear-gradient(135deg,var(--ttx-dim) 50%,transparent 50%);
  background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
  -webkit-appearance:none;appearance:none;
}

/* ==========================================================================
   Stat strip
   ========================================================================== */
.ttx-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--ttx-line-2)}
.ttx-stat{background:var(--ttx-card);padding:14px 10px;text-align:center;min-width:0}
.ttx-stat dt{
  font-family:var(--ttx-mono);font-size:9.5px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ttx-dim-2);margin-bottom:5px;
}
.ttx-stat dd{
  font-family:var(--ttx-mono);font-variant-numeric:tabular-nums;
  font-size:clamp(19px,3.2vw,26px);font-weight:600;letter-spacing:-.03em;line-height:1;
}
.ttx-stat--time dd{color:var(--ttx-accent)}
.ttx-stat--err dd.is-hot{color:var(--ttx-err)}

/* ==========================================================================
   Typing surface
   ========================================================================== */
.ttx-surface{
  position:relative;
  background:linear-gradient(180deg,var(--ttx-card-2),var(--ttx-card));
  padding:clamp(20px,4vw,34px) clamp(18px,4vw,32px);
}
.ttx-view{
  position:relative;overflow:hidden;width:100%;
  font-family:var(--ttx-mono);font-size:clamp(16px,2.4vw,21px);
  line-height:var(--ttx-lh);height:calc(var(--ttx-lh) * 3);
}
.ttx-stream{
  position:relative;font:inherit;line-height:inherit;letter-spacing:.01em;
  word-break:break-word;color:var(--ttx-dim-2);
  transition:transform .18s cubic-bezier(.4,0,.2,1);
}
.ttx-stream i{font-style:normal;transition:color .06s}
.ttx-stream i.ok{color:var(--ttx-text)}
.ttx-stream i.bad{color:var(--ttx-err);background:var(--ttx-err-bg);border-radius:3px}
.ttx-stream i.bad.sp{background:var(--ttx-err-bg-sp)}
.ttx-caret{
  position:absolute;top:0;left:0;width:2px;height:1.2em;border-radius:2px;
  background:var(--ttx-accent);box-shadow:0 0 12px var(--ttx-glow);
  transform:translate(0,0);transition:transform .07s linear;will-change:transform;
}
.ttx-caret.idle{animation:ttx-blink 1.1s steps(1,end) infinite}
@keyframes ttx-blink{0%,49%{opacity:1}50%,100%{opacity:0}}
.ttx-capture{position:absolute!important;left:-9999px!important;top:0;width:1px;height:1px;opacity:0}

.ttx-veil{
  position:absolute;inset:0;z-index:3;display:grid;place-content:center;justify-items:center;
  gap:12px;text-align:center;padding:24px;
  background:var(--ttx-veil);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}
.ttx-veil strong{font-family:var(--ttx-mono);font-size:15px;color:var(--ttx-text);letter-spacing:.02em}
.ttx-veil p{font-family:var(--ttx-mono);font-size:12px;color:var(--ttx-dim)}

.ttx-track{flex:1;min-width:120px;height:3px;background:var(--ttx-line-2);border-radius:99px;overflow:hidden}
.ttx-track i{display:block;height:100%;width:0;background:var(--ttx-accent);box-shadow:0 0 10px var(--ttx-glow);transition:width .2s linear}
.ttx-hint{font-family:var(--ttx-mono);font-size:11px;color:var(--ttx-dim-2);letter-spacing:.04em;white-space:nowrap}
.ttx-kbd{
  font-family:var(--ttx-mono);font-size:10px;background:var(--ttx-raise);
  border:1px solid var(--ttx-line);border-bottom-width:2px;border-radius:5px;
  padding:2px 5px;color:var(--ttx-dim);
}
.ttx-caps{
  font-family:var(--ttx-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ttx-warn);border:1px solid var(--ttx-warn-bd);background:var(--ttx-warn-bg);
  padding:4px 9px;border-radius:99px;white-space:nowrap;
}

.ttx-drawer{display:flex;gap:10px;align-items:flex-start;flex-wrap:wrap}
.ttx-drawer textarea{flex:1;min-width:220px;min-height:64px;resize:vertical;line-height:1.6}

/* ==========================================================================
   Result report
   ========================================================================== */
.ttx-report{
  position:absolute;inset:0;z-index:4;background:var(--ttx-card);
  padding:clamp(18px,3.4vw,28px);overflow-y:auto;overscroll-behavior:contain;
}
.ttx-report-top{display:flex;align-items:center;gap:clamp(16px,4vw,36px);flex-wrap:wrap}
.ttx-score{display:flex;align-items:baseline;gap:10px}
.ttx-score b{
  font-family:var(--ttx-mono);font-size:clamp(48px,10vw,72px);font-weight:700;
  letter-spacing:-.05em;line-height:.82;font-variant-numeric:tabular-nums;
}
.ttx-score em{
  font-style:normal;font-family:var(--ttx-mono);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ttx-accent);
}
.ttx-tier{
  font-family:var(--ttx-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ttx-dim);border:1px solid var(--ttx-line);border-radius:99px;padding:6px 13px;
}
.ttx-spark{flex:1;min-width:130px;height:58px;display:block}
.ttx-spark .ln{fill:none;stroke:var(--ttx-accent);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.ttx-spark .fl{fill:var(--ttx-fill);stroke:none}

.ttx-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));
  gap:1px;background:var(--ttx-line-2);border:1px solid var(--ttx-line-2);
  border-radius:12px;overflow:hidden;margin-top:20px;
}
.ttx-cell{background:var(--ttx-card-2);padding:12px 13px;min-width:0}
.ttx-cell dt{
  font-family:var(--ttx-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ttx-dim-2);margin-bottom:5px;
}
.ttx-cell dd{font-family:var(--ttx-mono);font-size:16px;font-variant-numeric:tabular-nums;letter-spacing:-.02em}

.ttx-keys{margin-top:20px}
.ttx-keys h4{
  font-family:var(--ttx-mono);font-size:9.5px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ttx-dim-2);margin-bottom:10px;
}
.ttx-caps-list{display:flex;gap:7px;flex-wrap:wrap}
.ttx-keycap{
  display:inline-flex;align-items:center;gap:7px;font-family:var(--ttx-mono);font-size:12px;
  border:1px solid var(--ttx-line);border-radius:9px;padding:6px 10px;background:var(--ttx-card-2);
}
.ttx-keycap b{font-weight:600;min-width:1ch;text-align:center}
.ttx-keycap i{font-style:normal;color:var(--ttx-err);font-size:10.5px}
.ttx-keycap.clean{color:var(--ttx-ok);border-color:var(--ttx-ok)}

.ttx-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}

/* ==========================================================================
   Buttons below the tool
   ========================================================================== */
.ttx-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-top:14px}
.ttx-link{
  display:flex;align-items:center;gap:13px;text-decoration:none!important;
  background:var(--ttx-card);border:1px solid var(--ttx-line);border-radius:var(--ttx-r-sm);
  padding:15px 17px;transition:border-color .15s,background .15s,transform .15s;
}
.ttx-link:hover{border-color:var(--ttx-accent);background:var(--ttx-card-2);transform:translateY(-1px)}
.ttx-link-ico{
  width:38px;height:38px;flex:none;border-radius:9px;display:grid;place-items:center;
  background:var(--ttx-ico-bg);color:var(--ttx-ico-fg);
}
.ttx-link-ico svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ttx-link-txt{min-width:0}
.ttx-link-txt b{display:block;font-size:13.5px;font-weight:600;color:var(--ttx-text);letter-spacing:-.01em}
.ttx-link-txt span{display:block;font-family:var(--ttx-mono);font-size:10.5px;color:var(--ttx-dim-2);margin-top:3px}

/* ==========================================================================
   Certificate
   ========================================================================== */
.ttx-cert-tools{display:grid;grid-template-columns:1fr 200px;gap:12px;align-items:end}
.ttx-lbl{
  display:block;font-family:var(--ttx-mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ttx-dim-2);margin-bottom:7px;
}
.ttx-stage{
  background:radial-gradient(80% 60% at 50% 0%,var(--ttx-fill),transparent 70%),var(--ttx-bg);
  padding:clamp(16px,3.5vw,30px);display:flex;justify-content:center;
}
.ttx-cert-shell{width:100%;max-width:720px}
.ttx-cert-canvas{
  display:block;width:100%;height:auto;border-radius:8px;
  box-shadow:var(--ttx-shadow),0 0 0 1px var(--ttx-line);
}

/* ==========================================================================
   Analytics
   ========================================================================== */
.ttx-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1px;background:var(--ttx-line-2)}
.ttx-kpi{background:var(--ttx-card);padding:18px}
.ttx-kpi dt{
  font-family:var(--ttx-mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ttx-dim-2);margin-bottom:8px;
}
.ttx-kpi dd{
  font-family:var(--ttx-mono);font-size:28px;font-weight:600;letter-spacing:-.035em;
  line-height:1;font-variant-numeric:tabular-nums;
}
.ttx-kpi dd small{font-size:12px;font-weight:500;color:var(--ttx-dim-2);letter-spacing:0;margin-left:4px}
.ttx-delta{font-family:var(--ttx-mono);font-size:10.5px;margin-top:8px;letter-spacing:.02em}
.ttx-delta.up{color:var(--ttx-ok)}
.ttx-delta.down{color:var(--ttx-err)}
.ttx-delta.flat{color:var(--ttx-dim-2)}

.ttx-chart{width:100%;height:auto;display:block;overflow:visible}
.ttx-chart .grid{stroke:var(--ttx-line-2);stroke-width:1}
.ttx-chart .axis{fill:var(--ttx-dim-2);font-family:var(--ttx-mono);font-size:9px;letter-spacing:.06em}
.ttx-chart .ln{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.ttx-chart .dot{stroke:var(--ttx-card);stroke-width:2}

.ttx-split{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--ttx-line-2)}
.ttx-split > div{background:var(--ttx-card);padding:var(--ttx-pad)}

.ttx-bars{display:flex;flex-direction:column;gap:11px;margin-top:14px}
.ttx-bar-row{display:grid;grid-template-columns:64px 1fr 46px;gap:11px;align-items:center}
.ttx-bar-row span{font-family:var(--ttx-mono);font-size:11px;color:var(--ttx-dim);text-transform:capitalize}
.ttx-bar-row b{font-family:var(--ttx-mono);font-size:11px;color:var(--ttx-text);text-align:right;font-variant-numeric:tabular-nums}
.ttx-bar-track{height:6px;background:var(--ttx-line-2);border-radius:99px;overflow:hidden}
.ttx-bar-track i{display:block;height:100%;background:var(--ttx-accent);border-radius:99px}

.ttx-table{width:100%;border-collapse:collapse;font-family:var(--ttx-mono);font-size:12px}
.ttx-table th{
  text-align:left;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ttx-dim-2);font-weight:500;padding:0 12px 10px;border-bottom:1px solid var(--ttx-line-2);
}
.ttx-table td{padding:11px 12px;border-bottom:1px solid var(--ttx-line-2);color:var(--ttx-dim);font-variant-numeric:tabular-nums}
.ttx-table tr:last-child td{border-bottom:0}
.ttx-table td:first-child,.ttx-table th:first-child{padding-left:0}
.ttx-table td:last-child,.ttx-table th:last-child{padding-right:0;text-align:right}
.ttx-table td b{color:var(--ttx-text);font-weight:600}
.ttx-pill{
  display:inline-block;font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  border:1px solid var(--ttx-line);border-radius:99px;padding:3px 9px;color:var(--ttx-dim-2);
}

/* ==========================================================================
   Empty state
   ========================================================================== */
.ttx-empty{padding:clamp(38px,7vw,64px) var(--ttx-pad);text-align:center;display:grid;justify-items:center;gap:14px}
.ttx-empty-ico{
  width:52px;height:52px;border-radius:14px;display:grid;place-items:center;
  background:var(--ttx-raise);border:1px solid var(--ttx-line);color:var(--ttx-dim-2);
}
.ttx-empty-ico svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ttx-empty h3{font-size:16px;font-weight:600;letter-spacing:-.01em}
.ttx-empty p{font-family:var(--ttx-mono);font-size:12px;color:var(--ttx-dim-2);max-width:380px;line-height:1.7}
.ttx-note{
  font-family:var(--ttx-mono);font-size:11px;line-height:1.7;color:var(--ttx-warn);
  border:1px solid var(--ttx-warn-bd);background:var(--ttx-warn-bg);
  border-radius:var(--ttx-r-sm);padding:11px 14px;max-width:440px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:760px){
  .ttx{--ttx-pad:15px;--ttx-lh:2em;--ttx-r:14px}
  .ttx-bar{gap:10px}
  .ttx-seg{flex:1 1 100%;justify-content:flex-start;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .ttx-seg::-webkit-scrollbar{display:none}
  .ttx-seg button{padding:8px 11px!important}
  .ttx-toggles{margin-left:0}
  .ttx-stat{padding:11px 5px}
  .ttx-stat dt{font-size:8.5px;letter-spacing:.08em}
  .ttx-split{grid-template-columns:1fr}
  .ttx-cert-tools{grid-template-columns:1fr}
  .ttx-desktop-only{display:none!important}
  .ttx-table .ttx-hide-sm{display:none}
}
@media (max-width:440px){
  .ttx-stats{grid-template-columns:repeat(3,1fr)}
  .ttx-kpi dd{font-size:24px}
}

/* ==========================================================================
   Print — certificate only
   ========================================================================== */
@media print{
  body > *:not(.ttx-print-host){display:none!important}
  .ttx-print-host{display:block!important;position:static!important}
  @page{size:A4 landscape;margin:0}
}