/* MonkeyTypee - public site. Sage / teal / coral identity, themeable. */
:root{
  --bg:#f4f6f1; --surface:#ffffff; --surface2:#eef3ea; --text:#243324; --muted:#6b7a68;
  --accent:#0f766e; --accent2:#ff6b4a; --border:#d9e2d4; --wrong:#e5484d; --right:#2f9e44;
  --word:#8a9a86;
}
html[data-theme="sage-dark"]{--bg:#1c2420;--surface:#242e29;--surface2:#2b362f;--text:#e4ede2;--muted:#93a48f;--accent:#2dd4bf;--accent2:#ff7a5c;--border:#37463c;--word:#7d8f7a}
html[data-theme="midnight"]{--bg:#0d1220;--surface:#141b2e;--surface2:#1a2340;--text:#dbe4ff;--muted:#8494b8;--accent:#6ea8fe;--accent2:#ff6b4a;--border:#263354;--word:#71809f}
html[data-theme="ocean"]{--bg:#eaf6f8;--surface:#ffffff;--surface2:#dff1f4;--text:#123a44;--muted:#5d7d85;--accent:#0284c7;--accent2:#f97316;--border:#c3e2e8;--word:#7fa3ad}
html[data-theme="sunset"]{--bg:#fdf1e7;--surface:#fffaf4;--surface2:#fde8d7;--text:#472b1a;--muted:#96755c;--accent:#ea580c;--accent2:#0f766e;--border:#f3d3b8;--word:#b3906f}
html[data-theme="paper"]{--bg:#faf7ef;--surface:#fffdf7;--surface2:#f2ecdc;--text:#33302a;--muted:#8a8378;--accent:#57534e;--accent2:#dc2626;--border:#e3dcc8;--word:#a39a86}

*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;background:var(--bg);color:var(--text);line-height:1.55}
a{color:var(--accent)}
.hidden{display:none!important}
.hidden-input{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}

/* Header */
.topbar{display:flex;align-items:center;gap:22px;padding:14px 26px;border-bottom:4px solid var(--accent);background:var(--surface);flex-wrap:wrap;position:sticky;top:0;z-index:40}
.logo{font-size:21px;font-weight:800;color:var(--text);text-decoration:none;white-space:nowrap}
.logo-mark{color:var(--accent2)}
.mainnav{display:flex;gap:4px;flex-wrap:wrap;margin-right:auto}
.mainnav a{color:var(--muted);text-decoration:none;padding:7px 11px;border-radius:8px;font-weight:600}
.mainnav a:hover,.mainnav a.active{color:var(--text);background:var(--surface2)}
.top-actions{display:flex;gap:6px;align-items:center}
.icon-btn{background:var(--surface2);border:1px solid var(--border);color:var(--text);border-radius:8px;padding:6px 10px;cursor:pointer;font-size:14px}

main{max-width:980px;margin:0 auto;padding:26px 18px 50px}
body.focus main{padding-top:8px}
body.focus .topbar,body.focus .footer,body.focus .hero-mini,body.focus .daily-card{display:none}

/* Tool */
.hero-mini h2{font-size:34px;margin:6px 0 4px}
.hero-mini h2 em{color:var(--accent2);font-style:normal}
.hero-mini p{color:var(--muted);margin:0 0 18px}
.daily-card{background:#17352f;color:#e8f5ee;border-radius:14px;padding:16px 20px;margin-bottom:20px;display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.daily-card .dc-title{font-weight:800;font-size:17px}
.daily-card .btn{margin-left:auto}
.config-bar{display:flex;flex-wrap:wrap;gap:10px 22px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:10px 16px;align-items:center}
.cfg-group{display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.cfg{background:transparent;border:0;color:var(--muted);font:inherit;font-size:14px;padding:5px 8px;border-radius:7px;cursor:pointer}
.cfg:hover{color:var(--text)}
.cfg.on{color:var(--accent2);font-weight:700}
.cfg.toggle.on{color:var(--accent)}
.lang-wrap select{background:var(--surface2);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:5px 7px;font:inherit;font-size:14px}
.lang-note{color:var(--muted);font-size:13px;margin:8px 2px 0;min-height:18px}
.custom-panel{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px;margin-top:14px}
.custom-panel textarea{width:100%;font:inherit;padding:10px;border:1px solid var(--border);border-radius:8px;background:var(--bg);color:var(--text)}
.custom-row{display:flex;justify-content:space-between;align-items:center;margin-top:10px;color:var(--muted)}
.lesson-bar,.race-bars{margin-top:14px;display:flex;flex-direction:column;gap:7px}
.lesson-bar .racer{align-items:flex-start}
.lesson-bar .racer .rname{width:auto;text-align:left;white-space:nowrap;font-weight:700;color:var(--text)}
.racer{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted)}
.racer .track{flex:1;height:10px;background:var(--surface2);border-radius:6px;overflow:hidden}
.racer .fill{height:100%;background:var(--accent);width:0%;transition:width .2s}
.racer.me .fill{background:var(--accent2)}
.racer .rname{width:110px;text-align:right}
.caps-warn{background:#fde68a;color:#713f12;border-radius:8px;padding:8px 12px;margin-top:14px;font-weight:600}
.progress-wrap{height:5px;background:var(--surface2);border-radius:3px;margin-top:14px;overflow:hidden}
#progressBar{height:100%;width:0%;background:var(--accent2);transition:width .3s}
.live-row{display:flex;gap:22px;margin:18px 2px 6px;font-size:14px;color:var(--muted);min-height:22px}
.live-stat b{color:var(--accent);font-size:17px}
.ghost-stat{color:var(--accent2)}
.words-box{position:relative;font-family:"Roboto Mono",ui-monospace,Menlo,Consolas,monospace;font-size:26px;line-height:1.7;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:24px 26px;min-height:150px;cursor:text;outline:none;overflow:hidden}
.words-box.fs-small{font-size:20px}
.words-box.fs-large{font-size:33px}
.words-box.rtl{direction:rtl;text-align:right;font-family:"Noto Nastaliq Urdu","Segoe UI",system-ui,sans-serif}
.words-box:not(.rtl) #words{height:5.1em;overflow:hidden}
#words .word{margin-right:.55em;white-space:nowrap}
.words-box.rtl #words .word{margin-right:0;margin-left:.55em}
#words .letter{color:var(--word)}
#words .letter.correct{color:var(--text)}
#words .letter.wrong{color:var(--wrong)}
#words .letter.extra{color:#f08c00}
#words.blind .letter.correct,#words.blind .letter.wrong{color:var(--text)}
.word.current{background:var(--surface2);border-radius:4px}
#caret{position:absolute;width:3px;height:32px;background:var(--accent2);border-radius:2px;transition:left .08s,top .08s;z-index:2}
#caret.block{width:.62em;background:var(--accent2);opacity:.45}
#caret.underline{height:3px;margin-top:30px}
#caret.off{display:none}
#caret.no-smooth{transition:none}
.words-hint{position:absolute;inset:auto 26px 14px auto;color:var(--muted);font-size:13px;font-family:system-ui,sans-serif;margin:0}
.tool-actions{display:flex;gap:16px;align-items:center;margin-top:16px;flex-wrap:wrap}
.btn{background:var(--surface2);border:1px solid var(--border);color:var(--text);border-radius:10px;padding:9px 16px;font:inherit;font-weight:600;cursor:pointer;text-decoration:none;display:inline-block}
.btn:hover{border-color:var(--accent)}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-big{font-size:16px;padding:12px 22px}
kbd{background:var(--bg);border:1px solid var(--border);border-bottom-width:2px;border-radius:5px;padding:1px 6px;font-size:12px}
.focus-toggle{color:var(--muted);font-size:14px}

/* Results */
.results{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:22px;margin-top:22px}
.result-grid{display:flex;gap:26px;flex-wrap:wrap;align-items:end}
.r-main{display:flex;flex-direction:column}
.r-label{color:var(--muted);font-size:13px;text-transform:uppercase;letter-spacing:.08em}
.r-value{font-size:52px;font-weight:800;color:var(--accent);line-height:1}
.r-sub{display:flex;flex-direction:column;color:var(--muted);font-size:13px}
.r-sub b{color:var(--text);font-size:18px}
.verdict{font-weight:700}
.best-note{color:var(--accent2);font-weight:600}
#wpmChart{width:100%;max-width:720px;height:auto;background:var(--bg);border-radius:10px;margin-top:8px}
.heatmap-box{margin-top:20px;border-top:1px solid var(--border);padding-top:14px}
#heatmap{display:flex;flex-wrap:wrap;gap:4px}
.hkey{width:38px;height:38px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-weight:700;background:var(--surface2);color:var(--muted);border:1px solid var(--border)}
.hkey.hot1{background:#ffe0b2;color:#7a4a00}
.hkey.hot2{background:#ffab91;color:#6d1f00}
.hkey.hot3{background:#e5484d;color:#fff}
.post-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:18px;border-top:1px solid var(--border);padding-top:16px}
.post-bar input{padding:8px 10px;border:1px solid var(--border);border-radius:8px;font:inherit;background:var(--bg);color:var(--text)}
.result-actions{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}

/* Views */
.view{display:none}
.view.show{display:block}
.view h2{border-left:5px solid var(--accent2);padding-left:12px}
.view-sub{color:var(--muted)}
.keyboard{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px;margin:16px 0;overflow-x:auto}
.kb-row{display:flex;gap:5px;justify-content:center;margin-bottom:5px;min-width:520px}
.kb-key{width:44px;height:44px;border:1px solid var(--border);border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--surface2);font-size:13px}
.kb-key small{font-size:9px;color:var(--muted)}
.kb-key.home{border-color:var(--accent2);background:var(--bg)}
.lesson-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.lesson-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px;cursor:pointer;text-align:left;font:inherit;color:var(--text)}
.lesson-card:hover{border-color:var(--accent)}
.lesson-card .done{color:var(--right);font-weight:700}
.race-setup{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.stat-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;margin:16px 0}
.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px}
.stat-card b{font-size:26px;display:block;color:var(--accent)}
.stat-card span{color:var(--muted);font-size:13px}
table.data{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--border);border-radius:10px;overflow:hidden}
table.data th,table.data td{padding:8px 11px;border-bottom:1px solid var(--border);text-align:left;font-size:14px}
table.data th{background:var(--surface2)}
.board-controls{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.board-controls select{padding:6px 8px;border-radius:8px;border:1px solid var(--border);background:var(--surface);color:var(--text);font:inherit}
.you-row{font-weight:700;color:var(--accent2)}
.empty-box{background:var(--surface);border:1px dashed var(--border);border-radius:12px;padding:26px;text-align:center;color:var(--muted)}

/* SEO / content blocks */
.seo-block{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:24px 26px;margin:22px 0}
.seo-block h1{margin-top:0}
.seo-block.page-top{background:transparent;border:0;padding:0}
.seo-block.page-top h1{font-size:36px}
.faq details{border-bottom:1px solid var(--border);padding:10px 0}
.faq summary{cursor:pointer;font-weight:700}
.post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.post-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:18px}
.post-card img{width:100%;height:150px;object-fit:cover;border-radius:10px}
.post-card h2{margin:8px 0}
.post-card h2 a{color:var(--text);text-decoration:none}
.post-meta{color:var(--muted);font-size:13px}
.single-post img.featured{width:100%;max-height:340px;object-fit:cover;border-radius:12px}
.post-content{font-size:17px}
.cta-box{text-align:center}

/* Modals + toast */
.modal{position:fixed;inset:0;background:rgba(10,15,10,.55);display:flex;align-items:flex-start;justify-content:center;z-index:80;overflow-y:auto;padding:22px 12px}
.modal-card{background:var(--surface);color:var(--text);border-radius:14px;width:560px;max-width:100%;border:1px solid var(--border)}
.modal-head{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--border)}
.modal-head h3{margin:0}
.modal-body{padding:16px 18px;display:flex;flex-direction:column;gap:10px}
.modal-body h4{margin:12px 0 2px;color:var(--accent2)}
.modal-body input[type=text]{padding:9px 10px;border:1px solid var(--border);border-radius:8px;font:inherit;width:100%;background:var(--bg);color:var(--text)}
.swatches,.seg{display:flex;gap:6px;flex-wrap:wrap}
.swatch,.seg button{border:1px solid var(--border);background:var(--surface2);color:var(--text);border-radius:8px;padding:7px 12px;cursor:pointer;font:inherit}
.swatch.on,.seg button.on{border-color:var(--accent2);color:var(--accent2);font-weight:700}
.switch-row{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:15px}
.switch-row input{width:20px;height:20px;accent-color:var(--accent)}
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:#17352f;color:#eafff3;padding:11px 20px;border-radius:10px;z-index:99;font-weight:600;box-shadow:0 8px 30px rgba(0,0,0,.25)}

/* How it works strip */
.how-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:22px 0}
.how-step{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px 16px}
.how-step b{color:var(--accent2)}

/* Footer */
.footer{border-top:1px solid var(--border);background:var(--surface);margin-top:36px}
.footer-cols{max-width:980px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr;gap:22px;padding:28px 18px}
.footer nav{display:flex;flex-direction:column;gap:6px}
.footer nav a{color:var(--muted);text-decoration:none}
.footer h4{margin:0 0 8px}
.copy{text-align:center;color:var(--muted);padding:0 18px 22px;margin:0}

@media (max-width:640px){
  .topbar{gap:10px;padding:12px 14px}
  .words-box{font-size:21px;padding:18px}
  .words-box.fs-large{font-size:27px}
  .hero-mini h2{font-size:27px}
  .footer-cols{grid-template-columns:1fr}
  .r-value{font-size:40px}
}