/*
Theme Name: Spacebar CPS Test
Theme URI: https://example.com
Author: Your Name
Author URI: https://example.com
Description: A fully functional Spacebar Clicks-Per-Second test theme with live gauge, chart and per-duration leaderboard.
Version: 1.0.0
Requires at least: 5.9
Requires PHP: 7.4
Text Domain: spacebar-cps
*/

:root{
  --bg: #08070f;
  --bg-elev: #0f0e1a;
  --panel: #131223;
  --card: #15142a;
  --border: #24233a;
  --border-soft: #1c1b30;
  --text: #ffffff;
  --text-dim: #e2e1ec;
  --text-faint: #c3c1d6;
  --accent1: #6c5cff;
  --accent2: #b455f0;
  --accent-grad: linear-gradient(135deg, var(--accent1), var(--accent2));
  --gold: #f5b642;
  --silver: #c8c9d6;
  --bronze: #e2894e;
  --good: #34d399;
  --radius: 14px;
  --font-display: 'Sora', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}
body[data-theme="light"]{
  --bg: #f3f2fa;
  --bg-elev: #ffffff;
  --panel: #ffffff;
  --card: #ffffff;
  --border: #e2e0f0;
  --border-soft: #ececf6;
  --text: #16152a;
  --text-dim: #5c5a75;
  --text-faint: #8a87a3;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  transition: background .25s ease, color .25s ease;
}
body::before{
  content:"";
  position: fixed; inset:0;
  background:
    radial-gradient(ellipse 900px 500px at 15% -5%, rgba(108,92,255,0.16), transparent 60%),
    radial-gradient(ellipse 700px 500px at 90% 10%, rgba(180,85,240,0.12), transparent 60%);
  pointer-events:none;
  z-index:0;
}
body[data-theme="light"]::before{ opacity:.5; }
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer;}
img{max-width:100%; display:block;}
.wrap{max-width:1320px; margin:0 auto; padding:0 32px;}

/* Header */
header.site-header{
  position: sticky; top:0; z-index:50;
  border-bottom: 1px solid var(--border-soft);
  background: rgba(8,7,15,0.75);
  backdrop-filter: blur(14px);
}
body[data-theme="light"] header.site-header{ background: rgba(255,255,255,0.8); }
.nav{
  display:flex; align-items:center; justify-content:space-between;
  height:72px;
}
.brand{ display:flex; align-items:center; gap:10px; font-family: var(--font-display); font-weight:800; font-size:1.15rem; letter-spacing:-0.01em;}
.brand .mark{
  width:34px; height:34px; border-radius:9px;
  background: var(--accent-grad);
  display:flex; align-items:center; justify-content:center;
  font-size: .95rem; font-weight:800; color:#fff;
  box-shadow: 0 6px 18px -6px rgba(108,92,255,0.7);
}
.brand .grad-text{
  background: var(--accent-grad);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
nav.links{ display:flex; align-items:center; gap:30px; }
nav.links ul{ list-style:none; display:flex; align-items:center; gap:30px; }
nav.links a{ font-size:.92rem; color: var(--text-dim); font-weight:500; transition: color .15s; }
nav.links li.current-menu-item > a,
nav.links a.active{ color: var(--text); position:relative; }
nav.links li.current-menu-item > a::after,
nav.links a.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-25px; height:2px;
  background: var(--accent-grad); border-radius:2px;
}
nav.links a:hover{ color: var(--text); }
.nav-right{ display:flex; align-items:center; gap:14px; }
.icon-btn{
  width:38px; height:38px; border-radius:10px; border:1px solid var(--border);
  background: var(--panel); color:var(--text-dim);
  display:flex; align-items:center; justify-content:center;
  font-size:1rem; transition: all .15s;
}
.icon-btn:hover{ color:var(--text); border-color: var(--accent1); }

/* Hero */
.hero{ padding: 64px 0 40px; position:relative; z-index:1;}
.hero-grid{ display:grid; grid-template-columns: 1fr 480px; gap:44px; align-items:start; }
h1.title{
  font-family: var(--font-display); font-weight:800; font-size: 3rem; letter-spacing:-0.02em;
  line-height:1.05; margin-bottom:16px;
}
.subtitle{ color: var(--text-dim); font-size:1.05rem; max-width: 480px; margin-bottom:28px; }

.durations{ display:flex; gap:10px; margin-bottom:22px; flex-wrap:wrap; }
.dur-btn{
  width:76px; height:64px; border-radius:12px; border:1px solid var(--border);
  background: var(--panel); color: var(--text-dim);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  font-family: var(--font-display); font-weight:700; font-size:1.15rem;
  transition: all .15s;
}
.dur-btn span{ font-family: var(--font-body); font-weight:600; font-size:.65rem; letter-spacing:.06em; color:var(--text-faint); text-transform:uppercase;}
.dur-btn:hover{ border-color: var(--accent1); color:var(--text); }
.dur-btn.active{
  border-color: var(--accent1);
  color:#fff;
  background: linear-gradient(180deg, rgba(108,92,255,0.18), rgba(180,85,240,0.10));
  box-shadow: 0 0 0 1px var(--accent1) inset, 0 8px 22px -8px rgba(108,92,255,.6);
}
.dur-btn.active span{ color: #cfc9ff; }

.test-box{
  border-radius: var(--radius);
  border: 1px solid var(--accent1);
  background: radial-gradient(ellipse at 50% 0%, rgba(108,92,255,0.14), transparent 70%), var(--panel);
  min-height: 190px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:6px; padding: 26px;
  cursor:pointer; user-select:none; -webkit-user-select:none;
  box-shadow: 0 0 0 1px rgba(108,92,255,0.15), 0 20px 50px -22px rgba(108,92,255,.55);
  transition: transform .08s ease, box-shadow .15s ease;
  position:relative; overflow:hidden;
}
.test-box:active{ transform: scale(0.995); }
.test-box .hint{ color: var(--text-dim); font-size:.85rem; margin-bottom:6px;}
.test-box .big{
  font-family: var(--font-display); font-weight:800; font-size:2.1rem; letter-spacing:.02em;
  text-transform:uppercase;
}
.test-box .big .live-num{
  font-family: var(--font-mono);
  background: var(--accent-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.test-box.running{ border-color: var(--accent2); }
.test-box.done{ border-color: var(--good); }
.sub-hint{ color: var(--text-faint); font-size:.8rem; margin-top:10px; display:flex; align-items:center; gap:6px; justify-content:center;}

/* Result panel */
.result-panel{
  background: var(--panel); border:1px solid var(--border-soft); border-radius: var(--radius);
  padding: 26px 26px 22px;
}
.result-panel h3{
  font-family: var(--font-display); font-size:.85rem; letter-spacing:.08em; color: var(--text-dim); font-weight:700; margin-bottom:20px;
}
.gauge-row{ display:flex; align-items:center; gap:26px; margin-bottom:14px; }
.gauge-wrap{ position:relative; width:170px; height:170px; flex-shrink:0; }
.gauge-wrap svg{ width:100%; height:100%; transform: rotate(-215deg); }
.gauge-center{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.gauge-center .num{ font-family: var(--font-display); font-weight:800; font-size:2.1rem; }
.gauge-center .lbl{ font-size:.75rem; font-weight:700; letter-spacing:.05em; background: var(--accent-grad); -webkit-background-clip:text; background-clip:text; color:transparent;}
.stat-grid{ flex:1; display:grid; grid-template-columns: 1fr 1fr; row-gap:16px; column-gap:10px;}
.stat-grid .lbl{ font-size:.78rem; color:var(--text-faint); margin-bottom:3px;}
.stat-grid .val{ font-family: var(--font-display); font-size:1.3rem; font-weight:700; }

.chart-block{ margin-top:6px; }
.chart-block .lbl{ font-family: var(--font-display); font-size:.8rem; letter-spacing:.06em; color: var(--text-dim); font-weight:700; margin-bottom:8px;}
.chart-box{ background: var(--bg-elev); border:1px solid var(--border-soft); border-radius:10px; padding:10px 8px 4px; }
.chart-box svg{ width:100%; height:130px; display:block; }
.chart-x{ display:flex; justify-content:space-between; font-size:.68rem; color: var(--text-faint); padding: 4px 4px 0; font-family: var(--font-mono); }

.result-actions{ display:flex; gap:12px; margin-top:20px; }
.btn{
  flex:1; height:46px; border-radius:10px; border:1px solid var(--border); background: var(--card);
  color: var(--text); font-weight:600; font-size:.9rem; display:flex; align-items:center; justify-content:center; gap:8px;
  transition: all .15s;
}
.btn:hover{ border-color: var(--accent1); }
.btn.primary{ background: var(--accent-grad); border:none; color:#fff; box-shadow: 0 10px 24px -10px rgba(108,92,255,.7);}
.btn.primary:hover{ filter: brightness(1.08); }
.toast{
  position: fixed; bottom: 26px; left:50%; transform: translateX(-50%) translateY(20px);
  background: var(--card); border:1px solid var(--accent1); color:var(--text);
  padding: 12px 20px; border-radius:10px; font-size:.88rem; font-weight:600;
  opacity:0; pointer-events:none; transition: all .25s ease; z-index:100;
  box-shadow: 0 14px 30px -12px rgba(0,0,0,.5);
}
.toast.show{ opacity:1; transform: translateX(-50%) translateY(0); }

/* Feature cards */
.features{ display:grid; grid-template-columns: repeat(4,1fr); gap:18px; padding: 36px 0 14px; position:relative; z-index:1;}
.feature{ background: var(--panel); border:1px solid var(--border-soft); border-radius: var(--radius); padding:22px; }
.feature .emoji{ font-size:1.6rem; margin-bottom:12px; display:block;}
.feature h4{ font-family: var(--font-display); font-size:1rem; margin-bottom:8px;}
.feature p{ font-size:.86rem; color: var(--text-dim); line-height:1.55;}

hr.divider{ border:none; border-top:1px solid var(--border-soft); margin: 30px 0; }

.info-grid{ display:grid; grid-template-columns: 1fr 1fr 1fr; gap:40px; padding-bottom: 40px; position:relative; z-index:1;}
.info-grid h5{ font-family: var(--font-display); font-size:.82rem; letter-spacing:.06em; color:var(--text-dim); font-weight:700; margin-bottom:14px;}
.info-block{ margin-bottom:26px; }
.info-block p{ font-size:.9rem; color: var(--text-dim); line-height:1.65; }
.info-block h6{ font-family:var(--font-display); font-size:.98rem; margin-bottom:8px; }

.test-list{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; margin-bottom:14px;}
.test-item{
  display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:10px;
  background: var(--panel); border:1px solid var(--border-soft); font-size:.88rem; font-weight:600;
  color: var(--text-dim); transition: all .15s;
}
.test-item:hover{ border-color: var(--accent1); color: var(--text); }
.view-all{ font-size:.85rem; font-weight:600; color: var(--accent1); display:inline-flex; align-items:center; gap:6px;}

.lb-item{
  display:flex; align-items:center; justify-content:space-between; padding:11px 14px; border-radius:10px;
  margin-bottom:6px; font-size:.88rem;
}
.lb-item .rank{ width:22px; font-family: var(--font-mono); color: var(--text-faint); font-weight:600; }
.lb-item .name{ font-weight:600; flex:1; margin-left:8px; }
.lb-item .score{ font-family: var(--font-mono); color: var(--text-dim); font-weight:600; display:flex; align-items:center; gap:6px;}
.lb-item.rank1 .rank{ color: var(--gold); }
.lb-item.rank2 .rank{ color: var(--silver); }
.lb-item.rank3 .rank{ color: var(--bronze); }
.lb-item.you{ background: linear-gradient(90deg, rgba(108,92,255,0.18), rgba(180,85,240,0.10)); border:1px solid var(--accent1); }

footer.site-footer{ border-top:1px solid var(--border-soft); padding: 22px 0 40px; position:relative; z-index:1;}
.badges{ display:flex; gap:28px; flex-wrap:wrap; justify-content:center; color: var(--text-faint); font-size:.82rem; font-weight:600; }
.badges span{ display:flex; align-items:center; gap:6px; }

/* Generic content pages (blog, about, contact fallback) */
.entry-content{ padding: 50px 0; max-width: 820px; margin: 0 auto; position:relative; z-index:1; }
.entry-content h1{ font-family: var(--font-display); font-size:2.2rem; margin-bottom:18px; }
.entry-content p{ color: var(--text-dim); margin-bottom:14px; line-height:1.7; }

@media (max-width: 980px){
  .hero-grid{ grid-template-columns: 1fr; }
  .features{ grid-template-columns: 1fr 1fr; }
  .info-grid{ grid-template-columns: 1fr; }
  nav.links{ display:none; }
  h1.title{ font-size:2.2rem; }
}

/* ---------- New in v2: leaderboard panel, auth, forms, tabs, footer, mobile nav ---------- */

.cps-lb-panel{ max-width: 520px; margin: 0 auto 50px; position:relative; z-index:1; }
.cps-lb-panel h5{ font-family: var(--font-display); font-size:.85rem; letter-spacing:.06em; color: var(--text-dim); font-weight:700; margin-bottom:14px; text-align:center; }
.lb-list{ background: var(--panel); border:1px solid var(--border-soft); border-radius: var(--radius); padding: 14px; }
.lb-avatar{ border-radius:50%; margin-right:2px; flex-shrink:0; }
.cps-lb-empty{ color: var(--text-faint); font-size:.88rem; text-align:center; padding: 10px 0; }

.cps-guest-note{ font-size:.82rem; color: var(--text-faint); margin-top:14px; }
.cps-guest-note a{ color: var(--accent1); font-weight:600; }

.cps-auth-box{ max-width: 440px; margin: 50px auto; background: var(--panel); border:1px solid var(--border-soft); border-radius: var(--radius); padding: 30px; position:relative; z-index:1; }
.cps-form{ display:flex; flex-direction:column; gap:14px; }
.cps-field{ display:flex; flex-direction:column; gap:6px; font-size:.85rem; color: var(--text-dim); font-weight:600; }
.cps-field input,
.cps-field textarea{
  font-family: var(--font-body); font-size:.95rem; color: var(--text);
  background: var(--bg-elev); border:1px solid var(--border); border-radius:9px;
  padding: 11px 13px; outline:none; transition: border-color .15s;
}
.cps-field input:focus,
.cps-field textarea:focus{ border-color: var(--accent1); }
.cps-auth-switch{ margin-top:18px; font-size:.85rem; color: var(--text-faint); text-align:center; }
.cps-auth-switch a{ color: var(--accent1); font-weight:600; }

.cps-notice{ padding: 12px 16px; border-radius:9px; font-size:.88rem; font-weight:600; margin-bottom:18px; }
.cps-notice-success{ background: rgba(52,211,153,0.12); border:1px solid var(--good); color: var(--good); }
.cps-notice-error{ background: rgba(240,85,85,0.1); border:1px solid #f05555; color:#f05555; }

.cps-lb-full{ max-width: 640px; margin: 0 auto 60px; position:relative; z-index:1; }
.cps-lb-tabs{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:14px; }
.cps-lb-tabs-sub{ margin-bottom:22px; }
.cps-tab, .cps-tab-sm{
  border:1px solid var(--border); background: var(--panel); color: var(--text-dim);
  border-radius:999px; font-weight:600; cursor:pointer; transition: all .15s;
}
.cps-tab{ padding: 9px 18px; font-size:.88rem; }
.cps-tab-sm{ padding: 6px 14px; font-size:.8rem; }
.cps-tab.active, .cps-tab-sm.active{
  background: var(--accent-grad); border-color: transparent; color:#fff;
}
.cps-tab:hover, .cps-tab-sm:hover{ border-color: var(--accent1); color: var(--text); }

.account-btn{ overflow:hidden; padding:0; }
.btn-account{
  height:38px; padding: 0 16px; border-radius:10px; border:1px solid var(--border);
  background: var(--panel); color: var(--text-dim); font-weight:600; font-size:.85rem;
  display:flex; align-items:center; transition: all .15s;
}
.btn-account:hover{ border-color: var(--accent1); color:var(--text); }
.btn-account.primary{ background: var(--accent-grad); border:none; color:#fff; }

.footer-grid{ display:flex; flex-direction:column; align-items:center; gap:18px; }
.footer-links{ display:flex; gap:22px; flex-wrap:wrap; justify-content:center; }
.footer-links a{ font-size:.85rem; color: var(--text-dim); font-weight:600; }
.footer-links a:hover{ color: var(--accent1); }
.copyright{ text-align:center; color: var(--text-faint); font-size:.78rem; margin-top:18px; }

.nav-toggle{ display:none; }

@media (max-width: 980px){
  nav.links{
    display:none; position:absolute; top:72px; left:0; right:0;
    background: var(--panel); border-bottom:1px solid var(--border-soft);
    padding: 10px 20px 18px;
  }
  nav.links.open{ display:block; }
  nav.links ul{ flex-direction:column; align-items:flex-start; gap:14px; }
  .nav-toggle{ display:flex; }
}

/* ---------- v3: new tool widgets ---------- */

/* Mouse Test */
.mouse-test-box{
  border-radius: var(--radius); border: 1px solid var(--accent1);
  background: radial-gradient(ellipse at 50% 0%, rgba(108,92,255,0.14), transparent 70%), var(--panel);
  padding: 34px 26px; margin-top:20px; outline:none;
}
.mouse-btn-row{ display:flex; justify-content:center; gap:22px; margin-bottom:10px; }
.mouse-btn{
  width:96px; padding:18px 10px; border-radius:14px; border:1px solid var(--border);
  background: var(--card); transition: all .12s;
}
.mouse-btn.active{ border-color: var(--accent1); background: linear-gradient(180deg, rgba(108,92,255,0.22), rgba(180,85,240,0.12)); transform: scale(0.97); }
.mouse-btn-icon{ font-family: var(--font-display); font-weight:800; font-size:1.3rem; margin-bottom:4px; }
.mouse-btn-label{ font-size:.78rem; color:var(--text-dim); margin-bottom:6px; }
.mouse-btn-count{ font-family: var(--font-mono); font-weight:700; font-size:1.1rem; background: var(--accent-grad); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* Aim Trainer */
.aim-area{
  position:relative; width:100%; height:360px; border-radius: var(--radius);
  border:1px solid var(--accent1); background: var(--panel); overflow:hidden; margin-top:8px; cursor:crosshair;
}
.aim-overlay{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; text-align:center; background: rgba(8,7,15,0.4); }
body[data-theme="light"] .aim-overlay{ background: rgba(255,255,255,0.6); }
.aim-target{
  position:absolute; width:44px; height:44px; border-radius:50%;
  background: var(--accent-grad); box-shadow: 0 0 0 6px rgba(108,92,255,.18), 0 8px 20px -6px rgba(108,92,255,.7);
  cursor:pointer;
}

/* Typing test */
.typing-stats{ display:flex; gap:34px; justify-content:center; margin: 18px 0; }
.typing-stats > div{ text-align:center; }
.typing-stats .val{ display:block; font-family: var(--font-display); font-size:1.8rem; font-weight:800; }
.typing-stats .lbl{ font-size:.75rem; color: var(--text-faint); text-transform:uppercase; letter-spacing:.05em; }
.typing-box{
  border-radius: var(--radius); border:1px solid var(--border-soft); background: var(--panel);
  padding:22px 26px; cursor:text; outline:none; margin-top:6px;
}
.typing-box:focus-within, .typing-box:focus{ border-color: var(--accent1); }
.typing-words{ font-family: var(--font-mono); font-size:1.25rem; line-height:2.1; max-height:9.5rem; overflow:hidden; text-align:left; color: var(--text-faint); }
.tw-word{ margin-right:.55em; display:inline-block; }
.tw-word.current{ box-shadow: inset 0 -2px 0 var(--accent1); }
.tw-word.word-incomplete{ box-shadow: inset 0 -2px 0 #f05555; }
.tw-char.correct{ color: var(--text); }
.tw-char.incorrect{ color:#f05555; text-decoration: underline; }

/* F1 lights */
.f1-lights{ display:flex; gap:12px; justify-content:center; margin: 8px 0 4px; }
.f1-light{ width:38px; height:38px; border-radius:50%; background: var(--card); border:2px solid var(--border); transition: all .1s; }
.f1-light.lit{ background:#f05555; border-color:#f05555; box-shadow:0 0 18px rgba(240,85,85,.7); }

/* Dinosaur game */
.dino-wrap{ position:relative; border-radius: var(--radius); border:1px solid var(--border-soft); background: linear-gradient(180deg, rgba(108,92,255,0.06), var(--panel) 70%); margin-top:10px; outline:none; overflow:hidden; }
.dino-wrap canvas{ display:block; width:100%; height:auto; }
.dino-overlay{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background: rgba(8,7,15,0.55); text-align:center; padding:20px; }
body[data-theme="light"] .dino-overlay{ background: rgba(255,255,255,0.7); }

/* Idle clicker games */
.idle-score{ font-family: var(--font-display); font-weight:800; font-size:2.6rem; margin-top:6px; }
.idle-rate{ color: var(--text-dim); font-size:.9rem; margin-bottom:18px; }
.idle-click-btn{
  width:180px; height:180px; border-radius:50%; border:none; cursor:pointer;
  background: var(--accent-grad); box-shadow: 0 20px 50px -18px rgba(108,92,255,.7), 0 0 0 10px rgba(108,92,255,0.08);
  display:flex; align-items:center; justify-content:center; margin: 10px auto; transition: transform .06s;
}
.idle-click-btn:active{ transform: scale(0.94); }
.idle-click-btn.pulse{ animation: idlePulse .25s ease; }
@keyframes idlePulse{ 0%{ transform:scale(0.94);} 60%{ transform:scale(1.04);} 100%{ transform:scale(1);} }
.idle-click-icon{ font-size:4rem; filter: drop-shadow(0 4px 10px rgba(0,0,0,.3)); }
.idle-upgrades{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:26px; text-align:left; }
.idle-upgrade{
  border:1px solid var(--border); background: var(--panel); border-radius:12px; padding:14px; cursor:pointer; transition: all .15s; color: var(--text);
}
.idle-upgrade:hover{ border-color: var(--accent1); }
.idle-upgrade.disabled{ opacity:.45; cursor:not-allowed; }
.idle-upgrade-name{ font-weight:700; font-size:.92rem; margin-bottom:2px; }
.idle-owned{ color: var(--accent1); font-size:.8rem; }
.idle-upgrade-desc{ font-size:.8rem; color: var(--text-dim); margin-bottom:8px; }
.idle-upgrade-cost{ font-family: var(--font-mono); font-weight:700; font-size:.88rem; background: var(--accent-grad); -webkit-background-clip:text; background-clip:text; color:transparent; }

@media (max-width: 640px){
  .idle-upgrades{ grid-template-columns:1fr; }
  .mouse-btn-row{ gap:10px; }
  .mouse-btn{ width:80px; padding:14px 6px; }
}

/* ---------- v4: result modal, custom timer, editable content ---------- */

.dur-btn .js-custom-dur-value{ font-size:1.15rem; display:block; margin-bottom:2px; }
.dur-btn.js-custom-dur-btn .js-custom-dur-label{ font-family: var(--font-body); font-weight:600; font-size:.65rem; letter-spacing:.06em; color:var(--text-faint); text-transform:uppercase; }
.dur-btn.js-custom-dur-btn.active .js-custom-dur-label{ color:#cfc9ff; }
.custom-duration-row{ display:flex; gap:8px; margin: -10px 0 8px; max-width:280px; }
.custom-duration-row input{
  flex:1; background: var(--panel); border:1px solid var(--border); border-radius:10px;
  color: var(--text); padding: 10px 12px; font-family: var(--font-body); font-size:.9rem; outline:none;
}
.custom-duration-row input:focus{ border-color: var(--accent1); }
.custom-duration-row .btn{ flex:0 0 auto; height:auto; padding: 0 16px; white-space:nowrap; }
.custom-duration-hint{ font-size:.78rem; color: var(--text-faint); margin: 0 0 22px; }
.custom-duration-hint.is-error{ color:#f05555; font-weight:600; }

.cps-result-modal{
  position: fixed !important; inset:0 !important; z-index:9999 !important;
  display:none !important; align-items:center; justify-content:center;
  background: rgba(4,4,10,0.78); backdrop-filter: blur(4px); padding: 20px;
  opacity:0; transition: opacity .18s ease;
}
.cps-result-modal.open{ display:flex !important; opacity:1; }
.cps-result-card{
  width:100%; max-width:460px; max-height:90vh; overflow-y:auto;
  background: var(--panel); border:1px solid var(--border-soft);
  border-radius: 16px; text-align:center; position:relative;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.6);
  transform: scale(0.94) translateY(10px); animation: resultPop .2s ease forwards;
}
@keyframes resultPop{ to{ transform: scale(1) translateY(0); } }

.cps-result-header{
  display:flex; align-items:center; justify-content:space-between;
  padding: 16px 20px; border-bottom:1px solid var(--border-soft);
  font-family: var(--font-display); font-weight:700; font-size:1rem;
}
.cps-result-close{
  width:30px; height:30px; border-radius:8px; border:none;
  background: var(--card); color: var(--text-dim); font-size:1.2rem; line-height:1; cursor:pointer;
}
.cps-result-close:hover{ color: var(--text); }

.cps-rank-badge-wrap{ text-align:center; padding: 26px 20px 4px; }
.cps-rank-badge{ position:relative; width:96px; height:96px; margin: 0 auto 14px; }
.cps-rank-ring{ width:100%; height:100%; transform: rotate(-90deg); }
.cps-rank-ring-arc{ stroke-dasharray: 276 276; transition: stroke-dasharray .4s ease; }
.cps-rank-icon{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:2.4rem; }
.cps-rank-eyebrow{ font-size:.75rem; color: var(--text-faint); text-transform:uppercase; letter-spacing:.08em; margin-bottom:8px; }
.cps-rank-chip{
  display:inline-block; padding: 6px 20px; border-radius:999px; background: var(--accent-grad);
  color:#fff; font-family: var(--font-display); font-weight:700; font-size:1.05rem; margin-bottom:10px;
}
.cps-rank-stars{ color: var(--accent1); font-size:1.05rem; letter-spacing:3px; }

.cps-rank-metric{ text-align:center; padding: 4px 20px 18px; }
.cps-rank-metric .js-result-metric-num{ font-family: var(--font-display); font-weight:800; font-size:2.6rem; }
.cps-rank-metric .js-result-metric-label{ display:block; font-size:.8rem; color: var(--text-faint); letter-spacing:.06em; margin-top:-2px; }

.cps-rank-quote{ font-style:italic; color: var(--text-dim); padding: 0 24px; margin: 4px 0 16px; font-size:.92rem; }

/* Simpler badge+metric+grid layout, used by the Reaction/F1/Typing modals */
.cps-result-badge{ font-size:2.4rem; margin: 20px 0 4px; }
.cps-result-card h3{ font-family: var(--font-display); font-size:1.3rem; margin-bottom:14px; padding: 0 20px; }
.cps-result-metric{ margin-bottom:18px; }
.cps-result-metric .js-reaction-avg,
.cps-result-metric .js-f1-avg,
.cps-result-metric .js-typing-final-wpm{ font-family: var(--font-display); font-weight:800; font-size:2.6rem; }
.cps-result-metric-label{ display:block; font-size:.8rem; color: var(--text-faint); letter-spacing:.06em; }
.cps-result-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:10px; margin: 0 20px 18px; }
.cps-result-grid .lbl{ font-size:.7rem; color: var(--text-faint); margin-bottom:2px; }
.cps-result-grid .val{ font-family: var(--font-display); font-weight:700; font-size:1.1rem; }
.cps-result-saved{ min-height:1.2em; font-size:.85rem; margin-bottom:6px; color: var(--text-faint); padding: 0 20px; }
.cps-result-saved.is-saved{ color: var(--good); font-weight:600; }
.cps-result-saved.is-guest a{ color: var(--accent1); font-weight:600; }
.cps-result-card .result-actions{ padding: 6px 20px 22px; margin-top:6px; }

@media (max-width: 480px){
  .cps-rank-box{ flex-direction:column; text-align:center; margin: 18px 14px; }
  .cps-rank-divider{ width:60%; height:1px; }
}

.test-box.done{ cursor:default; }

/* Editable SEO content: any paragraph/heading/list the admin types directly
   into the block editor becomes a DIRECT CHILD of <main class="wrap">
   (our shortcode widgets are also direct children, but nest everything
   inside their own containers) — so targeting direct children only styles
   the admin's own added content without touching widget internals. */
main.wrap > h1{ font-family: var(--font-display); font-weight:800; font-size:2.6rem; text-align:center; margin: 6px auto 14px; max-width:820px; }
main.wrap > h2{ font-family: var(--font-display); font-weight:800; font-size:1.6rem; text-align:center; margin: 34px auto 12px; max-width:760px; line-height:1.3; }
main.wrap > h3{ font-family: var(--font-display); font-weight:700; font-size:1.2rem; text-align:center; margin: 26px auto 10px; max-width:760px; }
main.wrap > p{ color: var(--text-dim); line-height:1.75; margin: 0 auto 28px; max-width:680px; font-size:.98rem; text-align:center; }
main.wrap > ul, main.wrap > ol{ color: var(--text-dim); line-height:1.75; margin: 0 auto 14px; max-width:680px; padding-left:22px; text-align:left; }
main.wrap > li{ margin-bottom:6px; }
main.wrap > blockquote{ border-left:3px solid var(--accent1); padding-left:16px; color: var(--text-dim); font-style:italic; margin: 18px auto; max-width:820px; text-align:left; }
main.wrap > figure img, main.wrap > p > img{ border-radius: var(--radius); margin: 16px auto; display:block; max-width:100%; }
main.wrap > p a, main.wrap > li a{ color: var(--accent1); font-weight:600; }
main.wrap > .wp-block-heading{ font-family: var(--font-display); }

.entry-content h2{ font-family: var(--font-display); font-size:1.5rem; margin: 30px 0 14px; }
.entry-content h3{ font-family: var(--font-display); font-size:1.2rem; margin: 24px 0 10px; }
.entry-content ul, .entry-content ol{ color: var(--text-dim); line-height:1.75; margin: 0 0 14px 22px; }
.entry-content blockquote{ border-left:3px solid var(--accent1); padding-left:16px; color: var(--text-dim); font-style:italic; margin: 18px 0; }
.entry-content a{ color: var(--accent1); font-weight:600; }

/* ---------- v4: Reaction Time Test "game pad" redesign ---------- */

.reaction-dots{ display:flex; gap:10px; justify-content:center; margin: 6px 0 22px; }
.r-dot{ width:12px; height:12px; border-radius:50%; background: var(--border); transition: all .2s; }
.r-dot.done{ background: var(--good); }
.r-dot.current{ background: var(--accent1); box-shadow: 0 0 0 4px rgba(108,92,255,.25); transform: scale(1.2); }

.reaction-pad{
  position:relative; width:100%; max-width:420px; height:340px; margin: 0 auto;
  border-radius: 28px; border:2px solid var(--border); background: var(--panel);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  overflow:hidden; transition: background .18s ease, border-color .18s ease;
}
.reaction-pad-inner{ position:relative; z-index:2; text-align:center; padding:20px; }
.reaction-icon{ font-size:2.6rem; margin-bottom:10px; }
.reaction-pad .big{ font-family: var(--font-display); font-weight:800; font-size:1.7rem; margin-bottom:8px; color:#fff; }
.reaction-pad .hint{ color: rgba(255,255,255,0.75); font-size:.9rem; }
.reaction-ring{
  position:absolute; width:120px; height:120px; border-radius:50%; border:3px solid rgba(255,255,255,0.25);
  opacity:0; z-index:1;
}
.reaction-pad.waiting{ background: linear-gradient(160deg, #e0483f, #a8291f); border-color:#e0483f; }
.reaction-pad.waiting .reaction-ring{ opacity:1; animation: reactionPulse 1.4s ease-out infinite; }
@keyframes reactionPulse{
  0%{ transform: scale(0.6); opacity:.6; }
  100%{ transform: scale(2.4); opacity:0; }
}
.reaction-pad.go{ background: linear-gradient(160deg, #34d399, #0f9e6e); border-color:#34d399; animation: reactionFlash .25s ease; }
@keyframes reactionFlash{ 0%{ filter:brightness(2.2); } 100%{ filter:brightness(1); } }
.reaction-pad.falsestart{ background: linear-gradient(160deg, #7a1f1f, #4a0f0f); border-color:#f05555; }
.reaction-pad.shake{ animation: reactionShake .4s ease; }
@keyframes reactionShake{
  10%, 90%{ transform: translateX(-2px); }
  20%, 80%{ transform: translateX(4px); }
  30%, 50%, 70%{ transform: translateX(-8px); }
  40%, 60%{ transform: translateX(8px); }
}
.reaction-pad.roundend{ background: linear-gradient(160deg, #6c5cff, #4436c4); border-color:#6c5cff; }
.reaction-pad.done{ background: linear-gradient(160deg, #6c5cff, #b455f0); border-color:#b455f0; }
.reaction-pad:not(.waiting):not(.go):not(.falsestart):not(.roundend):not(.done) .big,
.reaction-pad:not(.waiting):not(.go):not(.falsestart):not(.roundend):not(.done) .hint{ color: var(--text); }
.reaction-pad:not(.waiting):not(.go):not(.falsestart):not(.roundend):not(.done) .hint{ color: var(--text-dim); }

.reaction-live-stats{ display:flex; justify-content:space-between; max-width:420px; margin: 16px auto 0; font-size:.85rem; color: var(--text-dim); font-weight:600; }

/* ---------- v4: F1 Reaction Time Test redesign ---------- */

.f1-track{
  position:relative; width:100%; max-width:520px; height:300px; margin:0 auto;
  border-radius:24px; overflow:hidden; cursor:pointer;
  background: linear-gradient(180deg, #1a1f2e 0%, #12141d 55%, #1c1c22 100%);
  border:2px solid var(--border-soft);
}
.f1-track.shake{ animation: reactionShake .4s ease; }
.f1-gantry{ display:flex; align-items:stretch; justify-content:center; gap:0; padding-top:26px; }
.f1-gantry-post{ width:6px; background: linear-gradient(180deg,#333,#111); margin-top:8px; border-radius:2px; }
.f1-lights{ display:flex; gap:10px; background:#0c0c10; border:3px solid #2a2a33; border-radius:12px; padding:12px 16px; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.f1-light{ position:relative; width:34px; height:34px; border-radius:50%; background: radial-gradient(circle at 35% 30%, #4a1414, #260a0a); border:2px solid #3a1414; transition: all .1s; }
.f1-light-glow{ position:absolute; inset:-6px; border-radius:50%; opacity:0; transition: opacity .1s; background: radial-gradient(circle, rgba(255,60,60,.9), transparent 70%); }
.f1-light.lit{ background: radial-gradient(circle at 35% 30%, #ff5b4d, #c81e0f); border-color:#ff5b4d; box-shadow: 0 0 18px rgba(255,60,45,.8); }
.f1-light.lit .f1-light-glow{ opacity:1; }
.f1-track-info{ position:relative; z-index:3; text-align:center; margin-top:34px; }
.f1-track .big{ font-family: var(--font-display); font-weight:800; font-size:1.8rem; color:#fff; margin-bottom:8px; letter-spacing:.02em; }
.f1-track .hint{ color: rgba(255,255,255,.7); font-size:.9rem; }
.f1-road{
  position:absolute; left:0; right:0; bottom:0; height:44px;
  background: repeating-linear-gradient(90deg, #444 0 26px, transparent 26px 52px);
  background-color:#222; opacity:.5;
}
.f1-flash{ position:absolute; inset:0; background:#fff; opacity:0; pointer-events:none; z-index:5; }
.f1-flash.flashing{ animation: f1FlashPulse .3s ease; }
@keyframes f1FlashPulse{ 0%{ opacity:.85; } 100%{ opacity:0; } }
.f1-track.go-flash{ box-shadow: inset 0 0 60px rgba(52,211,153,.4); border-color:#34d399; }

/* ---------- v4: Typing Test redesign ---------- */

.typing-box{
  border-radius: var(--radius); border:1px solid var(--border-soft); background: var(--panel);
  padding:4px; outline:none; margin-top:6px; position:relative; cursor:text;
}
.typing-box:focus-within{ border-color: var(--accent1); }
.typing-focus-overlay{
  position:absolute; inset:0; z-index:5; display:flex; align-items:center; justify-content:center;
  background: rgba(8,7,15,0.72); border-radius: var(--radius); text-align:center; padding:20px; cursor:pointer;
}
body[data-theme="light"] .typing-focus-overlay{ background: rgba(255,255,255,0.85); }
.typing-words-wrap{ position:relative; max-height: 8.4rem; overflow-y:auto; padding: 20px 24px; scroll-behavior:smooth; }
.typing-words{ font-family: var(--font-mono); font-size:1.25rem; line-height:2.1; text-align:left; }
.tc-char{ color: var(--text-faint); position:relative; }
.tc-char.correct{ color: var(--text); }
.tc-char.incorrect{ color:#f05555; background: rgba(240,85,85,.12); border-radius:2px; }
.tc-char.incorrect.tc-space{ background: rgba(240,85,85,.25); }
.typing-caret{
  position:absolute; width:2px; background: var(--accent1); border-radius:1px;
  animation: caretBlink 1s step-end infinite; transition: left .05s linear, top .05s linear; pointer-events:none;
}
@keyframes caretBlink{ 50%{ opacity:0; } }

/* ---------- v9: custom logo support ---------- */
.site-logo{ display:flex; align-items:center; }
.site-logo a{ display:flex; align-items:center; }
.site-logo img{ max-height:44px; width:auto; display:block; }
.brand-wrap{ display:flex; align-items:center; }
.site-logo-light{ display:none; }
body[data-theme="light"] .has-light-logo .site-logo-dark{ display:none; }
body[data-theme="light"] .has-light-logo .site-logo-light{ display:flex; }

/* ---------- v5: Home page "How to Use" section + tips ---------- */
.howto-section{ padding: 8px 0 20px; position:relative; z-index:1; }
.howto-title{ font-family: var(--font-display); font-weight:800; font-size:1.8rem; text-align:center; margin-bottom:8px; }
.howto-subtitle{ text-align:center; color: var(--text-dim); max-width:560px; margin:0 auto 30px; font-size:.98rem; }
.howto-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.howto-step{ background: var(--panel); border:1px solid var(--border-soft); border-radius: var(--radius); padding:22px; position:relative; }
.howto-num{
  width:34px; height:34px; border-radius:10px; background: var(--accent-grad); color:#fff;
  display:flex; align-items:center; justify-content:center; font-family: var(--font-display); font-weight:800;
  margin-bottom:14px; font-size:1rem;
}
.howto-step h4{ font-family: var(--font-display); font-size:1rem; margin-bottom:8px; }
.howto-step p{ font-size:.86rem; color: var(--text-dim); line-height:1.55; }
.howto-tips{ list-style:none; padding:0; margin:0; }
.howto-tips li{
  font-size:.88rem; color: var(--text-dim); line-height:1.6; padding-left:20px; position:relative; margin-bottom:8px;
}
.howto-tips li::before{
  content:"\2713"; position:absolute; left:0; top:1px; color: var(--accent1); font-weight:700;
}

@media (max-width: 980px){
  .howto-steps{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 640px){
  .howto-steps{ grid-template-columns:1fr; }
}

/* ---------- v6: dedicated 3-column info row + 2-col leaderboard grid ---------- */
.spacebar-intro{ max-width:760px; margin:0 auto 34px; text-align:center; position:relative; z-index:1; }
.spacebar-intro-title{ font-family: var(--font-display); font-weight:800; font-size:1.6rem; margin-bottom:10px; }
.spacebar-intro p{ color: var(--text-dim); line-height:1.75; font-size:.98rem; }

.info-row-3col{ display:grid; grid-template-columns: repeat(3, 1fr); gap:28px; margin-bottom:40px; position:relative; z-index:1; }
.info-row-3col .info-col{ background: var(--panel); border:1px solid var(--border-soft); border-radius: var(--radius); padding:24px; }
.info-row-3col h3{ font-family: var(--font-display); font-size:1.05rem; margin-bottom:10px; }
.info-row-3col p{ color: var(--text-dim); font-size:.9rem; line-height:1.65; }

.info-grid-2col{ grid-template-columns: 1fr 1fr; }

@media (max-width: 980px){
  .info-row-3col{ grid-template-columns:1fr; }
  .info-grid-2col{ grid-template-columns:1fr; }
}

/* ---------- v7: new home page content sections ---------- */
.section-heading{ font-family: var(--font-display); font-weight:800; font-size:1.6rem; text-align:center; margin-bottom:10px; }
.section-sub{ text-align:center; color: var(--text-dim); max-width:620px; margin:0 auto 28px; font-size:.95rem; }

/* Speed benchmark table */
.speed-section{ position:relative; z-index:1; }
.speed-table{ max-width:820px; margin:0 auto; background: var(--panel); border:1px solid var(--border-soft); border-radius: var(--radius); overflow:hidden; }
.speed-row{ display:grid; grid-template-columns: 130px 160px 1fr; gap:16px; padding:14px 20px; align-items:center; border-bottom:1px solid var(--border-soft); font-size:.9rem; }
.speed-row:last-child{ border-bottom:none; }
.speed-row-head{ background: var(--bg-elev); font-family: var(--font-display); font-weight:700; font-size:.75rem; letter-spacing:.05em; text-transform:uppercase; color: var(--text-faint); }
.speed-row:not(.speed-row-head) span:first-child{ font-family: var(--font-mono); font-weight:700; }
.speed-row:not(.speed-row-head) span:nth-child(2){ font-weight:600; }
.speed-row:not(.speed-row-head) span:last-child{ color: var(--text-dim); }

/* Why it matters */
.why-section{ position:relative; z-index:1; }
.why-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; max-width:1000px; margin:0 auto; }
.why-card{ background: var(--panel); border:1px solid var(--border-soft); border-radius: var(--radius); padding:22px; text-align:center; }
.why-card .emoji{ font-size:1.8rem; display:block; margin-bottom:10px; }
.why-card h4{ font-family: var(--font-display); font-size:.98rem; margin-bottom:6px; }
.why-card p{ font-size:.85rem; color: var(--text-dim); line-height:1.55; }

/* Top 10 records */
.top10-section{ position:relative; z-index:1; }
.top10-list{ max-width:600px; margin:0 auto; }

/* Expanded tips */
.tips-expanded-section{ position:relative; z-index:1; }
.tips-expanded-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.tips-expanded-card{ background: var(--panel); border:1px solid var(--border-soft); border-radius: var(--radius); padding:20px; }
.tips-expanded-card h4{ font-family: var(--font-display); font-size:.95rem; margin-bottom:8px; color: var(--accent1); }
.tips-expanded-card p{ font-size:.87rem; color: var(--text-dim); line-height:1.6; }

/* FAQ accordion */
.faq-section{ position:relative; z-index:1; }
.faq-list{ max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:10px; }
.faq-item{ background: var(--panel); border:1px solid var(--border-soft); border-radius:12px; padding:4px 20px; }
.faq-item summary{
  cursor:pointer; padding:16px 0; font-family: var(--font-display); font-weight:700; font-size:.98rem;
  list-style:none; display:flex; justify-content:space-between; align-items:center;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; font-size:1.3rem; color: var(--accent1); font-weight:400; flex-shrink:0; margin-left:12px; }
.faq-item[open] summary::after{ content:"\2212"; }
.faq-item p{ padding: 0 0 18px; color: var(--text-dim); font-size:.9rem; line-height:1.65; margin:0; }

@media (max-width: 980px){
  .why-grid{ grid-template-columns:1fr 1fr; }
  .tips-expanded-grid{ grid-template-columns:1fr 1fr; }
  .speed-row{ grid-template-columns: 100px 130px 1fr; gap:10px; font-size:.82rem; padding:12px 14px; }
}
@media (max-width: 640px){
  .why-grid{ grid-template-columns:1fr; }
  .tips-expanded-grid{ grid-template-columns:1fr; }
  .speed-row{ grid-template-columns:1fr; text-align:left; gap:2px; }
  .speed-row-head{ display:none; }
  .speed-row:not(.speed-row-head) span:first-child{ font-size:1rem; }
}

/* ---------- v8: standalone tips list + tool page FAQ spacing ---------- */
.tips-standalone{ max-width:680px; margin:0 auto; }

/* ---------- v9: richer tool-page content sections ---------- */
.quick-stats{ display:grid; grid-template-columns:repeat(auto-fit, minmax(140px,1fr)); gap:14px; max-width:820px; margin:0 auto 8px; }
.quick-stat{ background: var(--panel); border:1px solid var(--border-soft); border-radius:12px; padding:16px; text-align:center; }
.quick-stat .qs-val{ display:block; font-family: var(--font-display); font-weight:800; font-size:1.4rem; background: var(--accent-grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.quick-stat .qs-lbl{ display:block; font-size:.75rem; color: var(--text-faint); margin-top:2px; }

.compare-table{ max-width:820px; margin:0 auto; background: var(--panel); border:1px solid var(--border-soft); border-radius: var(--radius); overflow:hidden; }
.compare-row{ display:grid; grid-template-columns: 200px 1fr; gap:16px; padding:16px 20px; border-bottom:1px solid var(--border-soft); font-size:.9rem; }
.compare-row:last-child{ border-bottom:none; }
.compare-row strong{ font-family: var(--font-display); color: var(--accent1); }
.compare-row span{ color: var(--text-dim); }

.mistakes-list{ list-style:none; padding:0; margin:0 auto; max-width:680px; }
.mistakes-list li{ font-size:.9rem; color: var(--text-dim); line-height:1.6; padding-left:24px; position:relative; margin-bottom:10px; }
.mistakes-list li::before{ content:"\2715"; position:absolute; left:0; top:1px; color:#f05555; font-weight:700; }

.related-tools-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; max-width:900px; margin:0 auto; }
.related-tool-card{ display:block; background: var(--panel); border:1px solid var(--border-soft); border-radius:12px; padding:16px; text-decoration:none; transition: border-color .15s; }
.related-tool-card:hover{ border-color: var(--accent1); }
.related-tool-card .rt-name{ font-family: var(--font-display); font-weight:700; font-size:.92rem; color: var(--text); margin-bottom:4px; display:block; }
.related-tool-card .rt-reason{ font-size:.8rem; color: var(--text-faint); }

@media (max-width: 780px){
  .compare-row{ grid-template-columns:1fr; gap:4px; }
  .related-tools-grid{ grid-template-columns:1fr; }
}