/* ===== style.css ===== */
:root{
  --bg:#f7f8fc;--surface:#fff;--surface-2:#fbfbfe;--surface-3:#f2f4fa;--text:#10162d;--muted:#68718c;--faint:#939bb0;
  --line:#e4e7f0;--line-strong:#d7dbea;--primary:#5c55f5;--primary-2:#716aff;--primary-soft:#efeeff;--primary-shadow:rgba(92,85,245,.17);
  --green:#13a760;--green-soft:#eaf9f1;--red:#e5484d;--red-soft:#fff0f0;--orange:#f09a28;--shadow:0 16px 42px rgba(30,38,73,.07);
  --radius:16px;--header:76px;--max:1540px;
}
html[data-theme="dark"]{
  --bg:#0c1018;--surface:#141a25;--surface-2:#171e2b;--surface-3:#202838;--text:#f4f6fb;--muted:#a7b0c2;--faint:#768198;
  --line:#283247;--line-strong:#344057;--primary:#7770ff;--primary-2:#8d87ff;--primary-soft:#262448;--primary-shadow:rgba(119,112,255,.2);
  --green:#46d58a;--green-soft:#143326;--red:#ff676d;--red-soft:#3a2026;--orange:#ffad44;--shadow:0 20px 52px rgba(0,0,0,.26)
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;transition:background .18s,color .18s}button,input,textarea,select{font:inherit}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}[hidden]{display:none!important}
.site-header{height:var(--header);background:color-mix(in srgb,var(--surface) 94%,transparent);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50;backdrop-filter:blur(18px)}.header-inner{height:100%;max-width:var(--max);margin:auto;padding:0 30px;display:grid;grid-template-columns:290px 1fr auto;align-items:center;gap:24px}.brand{display:flex;align-items:center;gap:13px;font-size:22px;letter-spacing:-.4px}.brand-symbol{width:31px;height:31px;position:relative;display:inline-block}.brand-symbol span{position:absolute;height:4px;border-radius:99px;background:linear-gradient(90deg,var(--primary),#49a3ff)}.brand-symbol span:nth-child(1){width:28px;top:5px;left:1px}.brand-symbol span:nth-child(2){width:20px;top:13px;left:4px}.brand-symbol span:nth-child(3){width:12px;top:21px;left:8px}.main-nav{height:100%;display:flex;align-items:center;justify-content:center;gap:28px}.main-nav a{height:100%;display:flex;align-items:center;position:relative;color:var(--muted);font-size:15px;font-weight:650;white-space:nowrap}.main-nav a:hover,.main-nav a.active{color:var(--primary)}.main-nav a.active:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--primary);border-radius:99px}.admin-nav{color:var(--orange)!important}.header-actions{display:flex;align-items:center;gap:10px}.header-actions form{margin:0}.language-picker{height:40px;display:flex;align-items:center;gap:6px;color:var(--muted);padding:0 8px;border-radius:10px}.language-picker select{border:0;background:transparent;color:var(--text);font-weight:700;outline:none;cursor:pointer}.language-picker option{background:var(--surface);color:var(--text)}.icon-button{width:40px;height:40px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--text);display:grid;place-items:center;cursor:pointer}.icon-button:hover{border-color:var(--line-strong);background:var(--surface-2)}.mobile-menu{display:none}.primary-btn,.outline-btn{height:44px;border-radius:10px;padding:0 19px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:760;font-size:14.5px;cursor:pointer;transition:.15s}.primary-btn{border:1px solid transparent;background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff;box-shadow:0 9px 20px var(--primary-shadow)}.primary-btn:hover{transform:translateY(-1px)}.primary-btn:disabled{opacity:.58;cursor:not-allowed;transform:none}.outline-btn{border:1px solid var(--line-strong);background:var(--surface);color:var(--text)}.outline-btn:hover{border-color:color-mix(in srgb,var(--primary) 45%,var(--line));color:var(--primary)}.compact{height:40px;padding:0 15px}.profile-chip{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.site-main{min-height:calc(100vh - var(--header))}.page-container{max-width:var(--max);margin:0 auto;padding:36px 30px 20px}.page-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin:0 0 23px}.page-heading h1{font-size:40px;line-height:1.08;letter-spacing:-1.25px;margin:6px 0 7px}.page-heading p{margin:0;color:var(--muted);font-size:15px}.eyebrow{font-size:12.5px;font-weight:850;letter-spacing:1.4px;color:var(--primary)}.heading-actions{display:flex;gap:9px}.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}.home-grid{display:grid;grid-template-columns:minmax(0,2.15fr) minmax(335px,.82fr);gap:24px;align-items:start}.typing-panel{padding:25px 26px 20px;min-width:0}.test-toolbar{display:grid;grid-template-columns:1.05fr 1.2fr;gap:26px;padding-bottom:20px}.toolbar-group{min-width:0}.toolbar-label{display:block;font-size:13px;font-weight:800;color:var(--muted);margin-bottom:9px;text-transform:none}.segmented{display:flex;flex-wrap:wrap;gap:7px}.option-btn{height:36px;border:1px solid var(--line-strong);border-radius:9px;background:var(--surface);padding:0 14px;color:var(--text);font-size:13px;font-weight:760;cursor:pointer}.option-btn:hover{border-color:color-mix(in srgb,var(--primary) 45%,var(--line))}.option-btn.active{background:var(--primary-soft);border-color:color-mix(in srgb,var(--primary) 58%,var(--line));color:var(--primary);box-shadow:0 4px 11px var(--primary-shadow)}.custom-duration-row{display:flex;align-items:center;gap:7px;margin-top:9px;color:var(--muted);font-size:13px}.custom-duration-row input{width:86px;height:34px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2);color:var(--text);padding:0 9px;outline:none}.content-control-block{margin-bottom:15px}.content-tabs{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line-strong);border-radius:10px;overflow:hidden;background:var(--surface-2)}.content-mode{height:42px;border:0;border-right:1px solid var(--line);background:transparent;color:var(--muted);font-size:14px;font-weight:720;cursor:pointer}.content-mode:last-child{border-right:0}.content-mode.active{color:var(--primary);background:var(--surface);box-shadow:inset 0 -2px 0 var(--primary)}.custom-text-box{margin-bottom:14px}.custom-text-box textarea{width:100%;resize:vertical;min-height:95px;border:1px solid var(--line-strong);border-radius:10px;background:var(--surface-2);color:var(--text);padding:13px;outline:none;line-height:1.55}.custom-text-box textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-shadow)}
.typing-workspace{border:1px solid var(--line-strong);border-radius:13px;background:var(--surface-2);overflow:hidden;position:relative}.workspace-head{min-height:48px;padding:10px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px}.workspace-label{display:block;font-size:13px;font-weight:800;color:var(--text)}.workspace-hint{font-size:12.5px;color:var(--muted)}.workspace-badges{display:flex;gap:7px;align-items:center}.mini-badge{border:1px solid var(--line);background:var(--surface);border-radius:7px;padding:5px 8px;font-size:12px;font-weight:800;color:var(--muted)}.word-viewport{--typing-size:26px;height:174px;overflow:hidden;padding:18px 18px 14px;background:var(--surface);scroll-behavior:auto;outline:none;position:relative}.word-stream{display:flex;flex-wrap:wrap;align-content:flex-start;gap:8px 11px;line-height:1.58;font-size:var(--typing-size);font-weight:520;letter-spacing:.1px}.word-viewport[data-font="mono"] .word-stream{font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace}.word-viewport[data-font="serif"] .word-stream{font-family:Georgia,"Times New Roman",serif}.test-word{position:relative;border-radius:6px;padding:0 3px;color:color-mix(in srgb,var(--text) 82%,var(--muted));white-space:nowrap;transition:background .08s,color .08s}.test-word.active{color:var(--text)}.word-viewport[data-highlight="box"] .test-word.active{background:color-mix(in srgb,var(--primary) 13%,var(--surface));box-shadow:0 0 0 1px color-mix(in srgb,var(--primary) 25%,transparent)}.word-viewport[data-highlight="underline"] .test-word.active:after{content:"";position:absolute;left:3px;right:3px;bottom:-2px;height:2px;border-radius:99px;background:var(--primary)}.word-viewport[data-highlight="none"] .test-word.active{color:var(--primary)}.test-word.word-correct{color:var(--green)}.test-word.word-wrong{color:var(--red);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--red) 55%,transparent);text-underline-offset:4px}.letter-correct{color:var(--green)}.letter-wrong,.letter-extra{color:var(--red);background:var(--red-soft);border-radius:3px}.letter-pending{color:inherit}.empty-stream{color:var(--muted);font-size:15px}.typing-entry-wrap{position:relative;border-top:1px solid var(--line);background:var(--surface-2)}.typing-input{width:100%;height:58px;border:0;background:transparent;color:var(--text);font-size:18px;font-weight:560;padding:0 95px 0 18px;outline:none}.typing-input::placeholder{color:var(--faint)}.typing-entry-wrap:focus-within{box-shadow:inset 0 -2px 0 var(--primary)}.space-tip{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:12px;font-weight:800;color:var(--faint);border:1px solid var(--line);border-radius:6px;padding:5px 7px;background:var(--surface)}
.test-metrics{display:grid;grid-template-columns:repeat(6,1fr);margin-top:18px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.metric{min-height:74px;display:flex;align-items:center;justify-content:center;gap:10px;border-right:1px solid var(--line)}.metric:last-child{border-right:0}.metric-icon{font-size:19px;color:var(--primary)}.metric-icon.green{color:var(--green)}.metric-icon.red{color:var(--red)}.metric-icon.blue{color:#3496ff}.metric small{display:block;color:var(--muted);font-size:12px;margin-bottom:3px}.metric strong{display:block;font-size:20px;letter-spacing:-.3px}.test-actions{display:flex;justify-content:center;gap:11px;margin-top:17px}.start-test{min-width:230px}.reset-test{min-width:130px}.test-status{text-align:center;font-size:12.5px;color:var(--faint);margin-top:8px;height:14px}.side-stack{display:grid;gap:20px}.daily-card,.leaderboard-card{padding:21px}.section-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.section-head h2{font-size:15px;margin:0;display:flex;align-items:center;gap:8px}.section-head a,.subtle-link{font-size:12.5px;color:var(--primary);font-weight:750}.head-icon{color:var(--primary);font-size:18px}.leader-duration{font-size:12px;color:var(--faint);font-weight:700}.daily-main{display:grid;grid-template-columns:74px 1fr;gap:18px;align-items:center;margin-top:24px}.progress-ring{width:66px;height:66px;border-radius:50%;background:conic-gradient(var(--primary) calc(var(--progress)*1%),var(--surface-3) 0);display:grid;place-items:center;position:relative}.progress-ring::after{content:"";position:absolute;inset:7px;background:var(--surface);border-radius:50%}.progress-ring span{z-index:1;color:var(--primary);font-weight:850;font-size:14px}.daily-copy strong{display:block;font-size:14.5px;line-height:1.35}.thin-progress{height:5px;background:var(--surface-3);border-radius:10px;margin:12px 0 7px;overflow:hidden}.thin-progress span{height:100%;display:block;background:linear-gradient(90deg,var(--primary),var(--primary-2));border-radius:10px}.daily-copy small{font-size:12.5px;color:var(--muted)}.soft-action{width:100%;height:41px;border:0;border-radius:9px;background:var(--surface-3);color:var(--text);font-weight:750;margin-top:19px;cursor:pointer}.soft-action:hover{color:var(--primary)}.daily-reset{text-align:right;color:var(--faint);font-size:12px;margin-top:7px}.leader-tabs{display:grid;grid-template-columns:repeat(3,1fr);height:40px;background:var(--surface-2);border:1px solid var(--line);border-radius:8px;margin-top:18px;overflow:hidden}.leader-tab{border:0;background:transparent;color:var(--muted);font-size:12.5px;font-weight:720;cursor:pointer}.leader-tab.active{background:var(--surface);color:var(--primary);box-shadow:inset 0 -2px 0 var(--primary)}.leader-list{list-style:none;margin:8px 0 0;padding:0}.leader-list li{display:grid;grid-template-columns:22px 29px minmax(0,1fr) auto 28px;align-items:center;gap:7px;min-height:41px;font-size:13px}.rank{font-weight:800;text-align:center}.rank-1{color:#e5a20c}.rank-2{color:#98a1b3}.rank-3{color:#b97746}.avatar{width:27px;height:27px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#2d3c62,var(--primary));color:#fff;font-weight:800;font-size:12.5px}.leader-name{font-weight:720;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.leader-list strong{font-size:12.5px}.country-badge{font-size:11.5px;background:var(--surface-3);border:1px solid var(--line);border-radius:4px;padding:2px 3px;text-align:center;color:var(--muted)}.empty-score{grid-template-columns:1fr!important;color:var(--muted);padding:14px 0}.friends-empty{font-size:13px;color:var(--muted);padding:18px 4px;text-align:center}.summary-grid{display:grid;grid-template-columns:1.08fr .9fr 1fr 1.2fr;gap:17px;margin-top:24px}.summary-card{min-height:108px;padding:18px 20px;display:flex;align-items:center;gap:14px;min-width:0}.summary-card span{display:block;font-size:14px;font-weight:780}.summary-card small{display:block;color:var(--muted);font-size:12.5px;margin:4px 0 8px}.summary-card strong{font-size:23px}.summary-card a{color:var(--primary);font-size:13px;font-weight:760}.circle-ico{width:46px;height:46px;border-radius:50%;display:grid!important;place-items:center;flex:0 0 auto;font-size:21px}.gold{background:#fff3d5;color:#e9a30d}.green-bg{background:var(--green-soft);color:var(--green)}.violet{background:var(--primary-soft);color:var(--primary)}.sparkline{margin-left:auto;width:78px;height:40px;display:flex;align-items:flex-end;gap:5px}.sparkline i{width:7px;background:var(--primary);border-radius:10px 10px 2px 2px;opacity:.8}.sparkline i:nth-child(1){height:10px}.sparkline i:nth-child(2){height:23px}.sparkline i:nth-child(3){height:16px}.sparkline i:nth-child(4){height:36px}.sparkline i:nth-child(5){height:19px}.sparkline i:nth-child(6){height:30px}
.seo-section{display:grid;grid-template-columns:1.2fr .8fr;gap:28px;margin:42px 0 22px;padding-top:35px;border-top:1px solid var(--line)}.seo-copy{max-width:780px}.seo-copy h2{font-size:28px;margin:8px 0 12px}.seo-copy h3{font-size:19px;margin:25px 0 8px}.seo-copy p{color:var(--muted);font-size:14.5px;line-height:1.75}.seo-guide-links{display:grid;gap:8px;margin-top:18px}.seo-guide-links a{font-size:14px;font-weight:760;color:var(--primary)}.faq-card{padding:22px 24px}.faq-card details{border-bottom:1px solid var(--line);padding:12px 0}.faq-card details:last-child{border-bottom:0}.faq-card summary{font-weight:760;cursor:pointer}.faq-card p{font-size:14px;color:var(--muted);line-height:1.6}.footer{max-width:var(--max);margin:0 auto;padding:18px 30px 32px;display:flex;justify-content:space-between;color:var(--faint);font-size:12.5px}
/* modal */.modal-backdrop{position:fixed;inset:0;background:rgba(5,8,15,.58);z-index:90;display:grid;place-items:center;padding:18px;backdrop-filter:blur(8px)}.modal-card{width:min(620px,100%);background:var(--surface);border:1px solid var(--line-strong);border-radius:18px;box-shadow:0 28px 80px rgba(0,0,0,.28);padding:25px}.modal-head{display:flex;align-items:flex-start;justify-content:space-between}.modal-head h2{margin:5px 0 0;font-size:25px}.modal-close{font-size:23px}.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:22px 0}.setting-row{min-height:58px;border:1px solid var(--line);border-radius:11px;background:var(--surface-2);padding:9px 12px;display:flex;align-items:center;justify-content:space-between;gap:12px}.setting-row>span{font-size:13px;font-weight:760}.setting-row select{height:34px;max-width:150px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--text);padding:0 9px;outline:none}.switch-row input{position:absolute;opacity:0;pointer-events:none}.switch-row i{width:38px;height:22px;border-radius:99px;background:var(--surface-3);position:relative;border:1px solid var(--line);cursor:pointer}.switch-row i:after{content:"";width:16px;height:16px;background:#fff;border-radius:50%;position:absolute;left:2px;top:2px;box-shadow:0 2px 5px rgba(0,0,0,.18);transition:.15s}.switch-row input:checked+i{background:var(--primary);border-color:var(--primary)}.switch-row input:checked+i:after{left:18px}.modal-done{width:100%}.result-modal{text-align:center;width:min(520px,100%)}.result-kicker{font-size:12.5px;letter-spacing:1.4px;font-weight:850;color:var(--primary)}.result-modal h2{margin:7px 0 20px}.result-score{display:flex;align-items:baseline;justify-content:center;gap:8px;margin-bottom:22px}.result-score strong{font-size:64px;line-height:1;color:var(--primary);letter-spacing:-3px}.result-score span{font-weight:800;color:var(--muted)}.result-grid{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:12px;overflow:hidden}.result-grid>div{padding:15px 7px;border-right:1px solid var(--line)}.result-grid>div:last-child{border:0}.result-grid small{display:block;color:var(--muted);font-size:12px;margin-bottom:4px}.result-grid strong{font-size:18px}.result-actions{display:flex;gap:10px;justify-content:center;margin-top:22px}
/* focus mode / fullscreen */body.focus-test{overflow:hidden}body.focus-test .site-header,body.focus-test .page-heading,body.focus-test .side-stack,body.focus-test .summary-grid,body.focus-test .seo-section,body.focus-test .footer{display:none!important}body.focus-test .page-container{max-width:none;padding:0}body.focus-test .home-grid{display:block}body.focus-test .typing-panel{position:fixed;inset:0;z-index:70;border:0;border-radius:0;padding:clamp(24px,4vw,64px) clamp(24px,8vw,150px);overflow:auto;background:var(--bg)}body.focus-test .typing-workspace{max-width:1180px;margin:30px auto 0}body.focus-test .test-toolbar,body.focus-test .content-control-block,body.focus-test .custom-text-box{max-width:1180px;margin-left:auto;margin-right:auto}body.focus-test .test-metrics{max-width:1180px;margin-left:auto;margin-right:auto}.typing-panel:fullscreen{background:var(--bg);padding:clamp(22px,4vw,55px) clamp(22px,7vw,120px);overflow:auto}.typing-panel:fullscreen .typing-workspace{max-width:1200px;margin:25px auto 0}.typing-panel:fullscreen .test-toolbar,.typing-panel:fullscreen .content-control-block,.typing-panel:fullscreen .test-metrics{max-width:1200px;margin-left:auto;margin-right:auto}
/* shared secondary pages */.page-wrap{max-width:1320px;margin:0 auto;padding:42px 30px}.page-title{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:24px}.page-title h1{font-size:38px;letter-spacing:-1px;margin:7px 0}.page-title p{color:var(--muted);margin:0}.country-filter{display:flex;gap:8px;flex-wrap:wrap}.country-filter select,.country-filter input{height:42px;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--text);padding:0 11px;outline:0}.table-card{padding:19px 23px;overflow:auto}.table-card h2{margin:0 0 16px}table{width:100%;border-collapse:collapse;min-width:640px}th,td{text-align:left;padding:13px 12px;border-bottom:1px solid var(--line)}th{font-size:12.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}td{font-size:14px}.avatar.tiny{width:27px;height:27px;display:inline-grid;margin-right:7px}.auth-wrap{min-height:calc(100vh - 160px);display:grid;place-items:center;padding:45px 20px}.auth-card{width:min(460px,100%);padding:34px}.auth-card h1{font-size:31px;margin:7px 0}.auth-card>p{color:var(--muted);font-size:14.5px}.auth-form{display:grid;gap:14px;margin-top:22px}.auth-form label{font-size:13px;font-weight:700;display:grid;gap:7px}.auth-form input,.auth-form select{height:45px;border:1px solid var(--line);border-radius:9px;background:var(--surface-2);color:var(--text);padding:0 12px;outline:0}.auth-form input:focus,.auth-form select:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-shadow)}.error-box{background:var(--red-soft);color:var(--red);border:1px solid color-mix(in srgb,var(--red) 30%,var(--line));border-radius:8px;padding:10px 12px;font-size:13px}.switch-auth a{color:var(--primary);font-weight:750}.profile-head{padding:24px;display:flex;align-items:center;gap:16px}.avatar.huge{width:64px;height:64px;font-size:23px}.profile-head h1{margin:3px 0}.profile-head p{margin:0;color:var(--muted)}.stat-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:13px;margin:18px 0}.stat{padding:20px}.stat span{font-size:12.5px;color:var(--muted)}.stat strong{display:block;font-size:24px;margin-top:3px}.guide-wrap{max-width:980px;margin:0 auto;padding:65px 28px 55px}.guide-hero{text-align:center;max-width:800px;margin:0 auto 28px}.guide-hero h1{font-size:44px;line-height:1.12;letter-spacing:-1.3px;margin:10px 0 16px}.guide-hero p{font-size:16px;color:var(--muted);max-width:720px;margin:0 auto 23px}.guide-body{padding:33px 38px;font-size:15px}.guide-body p{color:var(--muted);line-height:1.85}.guide-links{margin-top:16px}.guide-links a{display:block;padding:18px;color:var(--primary);font-weight:750}
/* admin */.admin-wrap{max-width:1500px;margin:0 auto;padding:34px 30px 50px}.admin-header{display:flex;justify-content:space-between;gap:20px;align-items:flex-end;margin-bottom:22px}.admin-header h1{font-size:38px;margin:5px 0}.admin-header p{margin:0;color:var(--muted)}.admin-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px}.admin-stat{padding:19px}.admin-stat span{color:var(--muted);font-size:13px}.admin-stat strong{display:block;font-size:28px;margin-top:4px}.admin-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.admin-section{padding:22px;min-width:0}.admin-section.full{grid-column:1/-1}.admin-section h2{margin:0 0 16px;font-size:18px}.admin-form{display:flex;flex-wrap:wrap;gap:10px;align-items:end;margin-bottom:16px}.admin-form label{display:grid;gap:6px;font-size:12.5px;font-weight:760;color:var(--muted)}.admin-form input,.admin-form select,.admin-form textarea{border:1px solid var(--line);border-radius:8px;background:var(--surface-2);color:var(--text);padding:0 10px;outline:none}.admin-form input,.admin-form select{height:38px}.admin-form textarea{min-height:78px;padding-top:10px;min-width:min(520px,100%);resize:vertical}.danger-btn,.tiny-btn{height:30px;border-radius:7px;border:1px solid var(--line);background:var(--surface-2);color:var(--text);padding:0 10px;font-size:12.5px;font-weight:750;cursor:pointer}.danger-btn{color:var(--red);border-color:color-mix(in srgb,var(--red) 25%,var(--line))}.status-pill{display:inline-flex;padding:4px 7px;border-radius:99px;background:var(--surface-3);font-size:12px;font-weight:800}.status-pill.on{background:var(--green-soft);color:var(--green)}.status-pill.off{background:var(--red-soft);color:var(--red)}.admin-table-wrap{overflow:auto;max-height:430px}.admin-table{min-width:760px}
@media(max-width:1240px){.header-inner{grid-template-columns:240px 1fr auto}.main-nav{gap:18px}.home-grid{grid-template-columns:minmax(0,1.8fr) minmax(315px,.8fr)}.test-toolbar{grid-template-columns:1fr}.summary-grid{grid-template-columns:repeat(2,1fr)}.test-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)}.admin-grid{grid-template-columns:1fr}}
@media(max-width:980px){.header-inner{grid-template-columns:1fr auto auto;padding:0 18px}.mobile-menu{display:grid;order:2}.main-nav{position:absolute;top:var(--header);left:0;right:0;height:auto;background:var(--surface);border-bottom:1px solid var(--line);padding:10px 18px 16px;display:none;flex-wrap:wrap;justify-content:flex-start}.main-nav.open{display:flex}.main-nav a{height:40px}.header-actions{order:3}.brand{font-size:20px}.home-grid{grid-template-columns:1fr}.side-stack{grid-template-columns:1fr 1fr}.seo-section{grid-template-columns:1fr}.admin-stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){:root{--header:68px}.header-actions .outline-btn,.profile-chip{display:none}.language-picker{padding:0}.page-container{padding:26px 14px 12px}.page-heading{align-items:flex-start;flex-direction:column}.page-heading h1{font-size:34px}.heading-actions{width:100%}.heading-actions>*{flex:1}.typing-panel{padding:18px 13px}.side-stack{grid-template-columns:1fr}.content-tabs{grid-template-columns:1fr}.content-mode{border-right:0;border-bottom:1px solid var(--line)}.content-mode:last-child{border-bottom:0}.word-viewport{height:196px;padding:16px 12px}.workspace-head{align-items:flex-start}.workspace-hint{display:none}.workspace-badges .mini-badge:last-child{display:none}.test-metrics{grid-template-columns:repeat(2,1fr)}.metric,.metric:nth-child(3){border-right:0;border-bottom:1px solid var(--line);justify-content:flex-start;padding-left:16px}.metric:nth-child(odd){border-right:1px solid var(--line)}.metric:nth-last-child(-n+2){border-bottom:0}.summary-grid{grid-template-columns:1fr}.seo-section{margin-top:32px}.settings-grid{grid-template-columns:1fr}.result-grid{grid-template-columns:repeat(2,1fr)}.result-grid>div:nth-child(2){border-right:0}.result-grid>div:nth-child(-n+2){border-bottom:1px solid var(--line)}.footer{padding-left:14px;padding-right:14px}.page-wrap{padding:32px 14px}.page-title{flex-direction:column;align-items:flex-start}.stat-grid{grid-template-columns:repeat(2,1fr)}.admin-wrap{padding:28px 14px}.admin-header{align-items:flex-start;flex-direction:column}.admin-stats{grid-template-columns:1fr 1fr}}
@media(max-width:500px){.header-actions .primary-btn{padding:0 12px;font-size:13px}.brand strong{max-width:165px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.page-heading h1{font-size:30px}.option-btn{padding:0 11px}.test-actions{flex-direction:column}.start-test,.reset-test{width:100%}.daily-card,.leaderboard-card{padding:18px 15px}.modal-card{padding:19px}.result-score strong{font-size:54px}.result-actions{flex-direction:column}.result-actions>*{width:100%}.admin-stats{grid-template-columns:1fr}}


/* ===== Result reveal / performance analysis ===== */
.test-is-running .premium-metrics .metric:nth-child(2) strong,
.test-is-running .premium-metrics .metric:nth-child(3) strong,
.test-is-running .premium-metrics .metric:nth-child(6) strong,
.test-is-running .premium-metrics .metric:nth-child(7) strong{color:var(--faint)!important;font-variant-numeric:tabular-nums}
.test-is-running .premium-metrics .metric:nth-child(2) strong::selection,
.test-is-running .premium-metrics .metric:nth-child(3) strong::selection,
.test-is-running .premium-metrics .metric:nth-child(6) strong::selection,
.test-is-running .premium-metrics .metric:nth-child(7) strong::selection{background:transparent}
.analysis-backdrop{padding:22px;overflow:auto;align-items:start;background:rgba(4,7,14,.72);backdrop-filter:blur(16px)}
.result-analysis-modal{width:min(1180px,100%);margin:auto;padding:0;overflow:hidden;text-align:left;border-radius:22px;background:color-mix(in srgb,var(--surface) 96%,transparent);box-shadow:0 30px 110px rgba(0,0,0,.45)}
.analysis-header{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:27px 30px 21px;border-bottom:1px solid var(--line);background:linear-gradient(120deg,color-mix(in srgb,var(--primary-soft) 45%,var(--surface)),var(--surface) 48%)}
.analysis-kicker{font-size:12px;letter-spacing:1.5px;font-weight:900;color:var(--primary)}
.analysis-header h2{margin:7px 0 5px;font-size:28px;letter-spacing:-.8px}
.analysis-header p{margin:0;color:var(--muted);font-size:14px}
.analysis-header-actions{display:flex;align-items:center;gap:10px}.personal-best-badge{padding:8px 11px;border:1px solid rgba(233,163,13,.3);border-radius:99px;background:#fff5d7;color:#b87800;font-size:12px;font-weight:900;letter-spacing:.4px}.personal-best-badge[hidden]{display:none!important}[data-theme="dark"] .personal-best-badge{background:#2b2310;color:#ffd36a;border-color:#5a4514}
.analysis-overview{display:grid;grid-template-columns:240px 1fr;gap:20px;padding:26px 30px 0}.hero-result-score{border-right:1px solid var(--line);padding-right:30px}.score-label{font-size:13px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);font-weight:850}.hero-result-score>strong{display:block;font-size:76px;line-height:.95;letter-spacing:-4px;color:var(--primary);margin:8px 0 12px}.result-comparison{font-size:13px;font-weight:780;color:var(--muted)}.result-comparison.positive{color:var(--green)}.result-comparison.negative{color:var(--red)}
.analysis-primary-stats{display:grid;grid-template-columns:repeat(3,1fr);align-items:center}.analysis-primary-stats>div{padding:12px 28px;border-right:1px solid var(--line)}.analysis-primary-stats>div:last-child{border-right:0}.analysis-primary-stats small{display:block;color:var(--muted);font-size:12.5px;margin-bottom:5px}.analysis-primary-stats strong{font-size:32px;letter-spacing:-1px}
.analysis-chart-card{margin:24px 30px 0;border:1px solid var(--line);border-radius:16px;background:var(--surface-2);padding:18px 18px 8px}.analysis-section-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}.analysis-section-head h3{font-size:14.5px;margin:0 0 3px}.analysis-section-head p{font-size:12.5px;color:var(--muted);margin:0}.chart-legend{display:flex;gap:15px;font-size:12px;font-weight:800}.legend-wpm{color:var(--primary)}.legend-raw{color:var(--muted)}.legend-error{color:var(--red)}.result-chart{display:block;width:100%;height:270px;margin-top:8px;overflow:visible}.chart-grid{stroke:var(--line);stroke-width:1}.chart-axis{fill:var(--faint);font-size:12px;font-family:inherit}.chart-line{fill:none;stroke-linecap:round;stroke-linejoin:round}.chart-line-wpm{stroke:var(--primary);stroke-width:4;filter:drop-shadow(0 4px 7px color-mix(in srgb,var(--primary) 30%,transparent))}.chart-line-raw{stroke:var(--muted);stroke-width:2.3;opacity:.55;stroke-dasharray:6 6}.chart-error circle{fill:var(--red);opacity:.18}.chart-error path{stroke:var(--red);stroke-width:1.8;stroke-linecap:round}
.analysis-detail-grid{display:grid;grid-template-columns:1fr 1.15fr .9fr;gap:12px;padding:14px 30px 0}.analysis-detail-card{border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:15px 17px;min-height:128px}.analysis-detail-card>span{font-size:12.5px;font-weight:850;color:var(--muted);text-transform:uppercase;letter-spacing:.6px}.detail-pair{display:flex;justify-content:space-between;gap:12px;margin-top:11px}.detail-pair small{color:var(--muted);font-size:12.5px}.detail-pair strong{font-size:13px}.char-breakdown-value{font-size:27px;font-weight:850;letter-spacing:1px;margin:14px 0 12px}.char-breakdown-legend{display:flex;align-items:center;flex-wrap:wrap;gap:5px 8px;font-size:11.5px;color:var(--muted)}.char-breakdown-legend i{width:7px;height:7px;border-radius:2px;display:inline-block}.c-good{background:var(--green)}.c-bad{background:var(--red)}.c-extra{background:#ff9f43}.c-missed{background:var(--primary)}.word-summary{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:15px}.word-summary>div{border-radius:10px;padding:13px 10px;background:var(--surface-2)}.word-summary strong{font-size:25px;display:block}.word-summary small{font-size:11.5px;color:var(--muted)}.word-summary>div:first-child strong{color:var(--green)}.word-summary>div:last-child strong{color:var(--red)}
.mistake-review{margin:14px 30px 0;padding:17px;border:1px solid var(--line);border-radius:14px}.error-word-list{display:flex;gap:8px;flex-wrap:wrap;margin-top:13px}.error-word-chip{display:flex;flex-direction:column;gap:3px;min-width:100px;padding:9px 11px;border-radius:9px;background:var(--red-soft);border:1px solid color-mix(in srgb,var(--red) 18%,var(--line))}.error-word-chip b{font-size:13px;color:var(--text)}.error-word-chip small{font-size:12px;color:var(--red);text-decoration:line-through}.perfect-run{font-size:13px;font-weight:750;color:var(--green);padding:6px 0}.analysis-actions{padding:18px 30px 26px;margin:0;justify-content:flex-end}.analysis-actions .primary-btn{min-width:180px}.analysis-link-btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
@media(max-width:900px){.analysis-backdrop{padding:10px}.analysis-header{padding:21px}.analysis-overview{grid-template-columns:1fr;padding:20px 21px 0}.hero-result-score{border-right:0;border-bottom:1px solid var(--line);padding:0 0 18px}.hero-result-score>strong{font-size:62px}.analysis-primary-stats>div{padding:8px 12px}.analysis-chart-card{margin:18px 21px 0}.result-chart{height:220px}.analysis-detail-grid{grid-template-columns:1fr;padding:12px 21px 0}.mistake-review{margin:12px 21px 0}.analysis-actions{padding:16px 21px 22px}}
@media(max-width:580px){.analysis-header{flex-direction:column}.analysis-header-actions{position:absolute;right:20px}.personal-best-badge{display:none!important}.analysis-primary-stats{grid-template-columns:1fr 1fr 1fr}.analysis-primary-stats strong{font-size:22px}.analysis-primary-stats>div{padding:6px}.analysis-chart-card{padding:13px 8px 5px}.analysis-section-head{display:block}.chart-legend{margin-top:8px}.result-chart{height:190px}.analysis-actions{flex-direction:column}.analysis-actions>*{width:100%}}

/* ===== V5 Gamification / progression ===== */
.home-progression{margin:0 0 20px;padding:14px 18px;display:grid;grid-template-columns:minmax(0,1.6fr) auto;gap:22px;align-items:center;background:linear-gradient(115deg,color-mix(in srgb,var(--primary-soft) 62%,var(--surface)),var(--surface) 48%);overflow:hidden;position:relative}
.home-progression:after{content:"";position:absolute;width:220px;height:220px;right:-90px;top:-130px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--primary) 14%,transparent),transparent 68%);pointer-events:none}.home-progression-main{display:grid;grid-template-columns:auto minmax(150px,auto) minmax(180px,1fr);align-items:center;gap:14px;min-width:0}.progress-level-badge{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 11px;border-radius:9px;color:var(--primary);background:var(--surface);border:1px solid color-mix(in srgb,var(--primary) 30%,var(--line));font-size:12.5px;font-weight:850;white-space:nowrap}.progress-level-badge strong{font-size:16px}.home-xp-copy{display:grid;gap:2px}.home-xp-copy strong{font-size:13px}.home-xp-copy small{font-size:12px;color:var(--muted)}.home-xp-track,.profile-xp-track{height:8px;border-radius:999px;background:var(--surface-3);overflow:hidden;border:1px solid var(--line)}.home-xp-track span,.profile-xp-track span{height:100%;display:block;border-radius:inherit;background:linear-gradient(90deg,#4b8cff,var(--primary),#ad57f5);box-shadow:0 0 18px color-mix(in srgb,var(--primary) 28%,transparent);transition:width .4s ease}.home-progression-side{display:flex;align-items:center;justify-content:flex-end;gap:18px;position:relative;z-index:1}.home-progression-side span,.home-progression-side a{font-size:12.5px;font-weight:760;color:var(--muted);white-space:nowrap}.home-progression-side a{color:var(--primary)}

.profile-v5{max-width:1320px}.profile-v5-head{padding:25px 28px;display:flex;align-items:center;justify-content:space-between;gap:24px;background:linear-gradient(125deg,color-mix(in srgb,var(--primary-soft) 55%,var(--surface)),var(--surface) 55%);overflow:hidden;position:relative}.profile-v5-head:after{content:"";position:absolute;width:260px;height:260px;right:-90px;top:-150px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--primary) 18%,transparent),transparent 68%)}.profile-v5-identity{display:flex;align-items:center;gap:17px;position:relative;z-index:1}.profile-v5-identity h1{font-size:31px;letter-spacing:-.9px;margin:4px 0}.profile-v5-identity p{margin:0;color:var(--muted);font-size:14px}.profile-avatar{background:linear-gradient(145deg,var(--primary),#5ba8ff);color:#fff;border:0;box-shadow:0 12px 30px var(--primary-shadow)}.profile-level-orb{width:92px;height:92px;border-radius:50%;display:grid;place-items:center;align-content:center;gap:0;border:7px solid color-mix(in srgb,var(--primary) 18%,var(--line));background:var(--surface);position:relative;z-index:1;box-shadow:inset 0 0 0 1px var(--line),0 12px 30px rgba(30,38,73,.08)}.profile-level-orb small{font-size:11.5px;color:var(--muted);text-transform:uppercase;font-weight:850;letter-spacing:.5px}.profile-level-orb strong{font-size:31px;line-height:1;color:var(--primary)}.profile-level-orb span{font-size:11.5px;color:var(--muted);margin-top:3px}
.profile-progress{margin-top:16px;padding:20px 23px}.profile-progress-copy{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:10px}.profile-progress-copy>div{display:grid;gap:2px}.profile-progress-copy span{font-size:13px;color:var(--primary);font-weight:850}.profile-progress-copy strong{font-size:15px}.profile-progress-copy>small{font-size:12px;color:var(--muted)}.profile-xp-track{height:10px}.profile-streak-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:18px}.profile-streak-row>div{display:flex;align-items:center;gap:10px;border:1px solid var(--line);background:var(--surface-2);border-radius:12px;padding:12px}.profile-streak-row>div>span{font-size:22px}.profile-streak-row strong{display:block;font-size:18px}.profile-streak-row small{display:block;color:var(--muted);font-size:12px;margin-top:2px}.profile-stat-grid{grid-template-columns:repeat(5,1fr)}.profile-stat-grid .stat small{color:var(--muted);font-size:12px}.profile-achievements{margin:18px 0;padding:22px}.profile-section-head{display:flex;align-items:end;justify-content:space-between;gap:18px;margin-bottom:16px}.profile-section-head h2{font-size:21px;margin:4px 0 0}.achievement-count{font-size:12.5px;color:var(--muted);font-weight:750}.achievement-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}.achievement-card{display:flex;align-items:flex-start;gap:11px;min-height:104px;padding:14px;border:1px solid var(--line);border-radius:13px;background:var(--surface-2);position:relative;overflow:hidden}.achievement-card.is-unlocked{background:linear-gradient(135deg,color-mix(in srgb,var(--primary-soft) 55%,var(--surface)),var(--surface));border-color:color-mix(in srgb,var(--primary) 24%,var(--line));box-shadow:0 8px 22px rgba(50,54,90,.05)}.achievement-card.is-locked{opacity:.58;filter:saturate(.35)}.achievement-icon{width:42px;height:42px;flex:0 0 42px;border-radius:11px;display:grid;place-items:center;background:var(--surface);border:1px solid var(--line);font-size:22px}.is-unlocked .achievement-icon{box-shadow:0 6px 16px var(--primary-shadow)}.achievement-copy strong{display:block;font-size:14px;margin:1px 0 5px}.achievement-copy p{margin:0;color:var(--muted);font-size:12px;line-height:1.45}.achievement-copy small{display:block;margin-top:8px;font-size:11.5px;font-weight:800;color:var(--primary)}.is-locked .achievement-copy small{color:var(--muted)}.profile-history{margin-top:18px}

.gamification-toast-stack{position:fixed;right:20px;top:calc(var(--header) + 18px);z-index:120;display:grid;gap:9px;width:min(360px,calc(100vw - 28px));pointer-events:none}.gamification-toast{display:flex;align-items:center;gap:12px;padding:13px 14px;border:1px solid color-mix(in srgb,var(--primary) 26%,var(--line));border-radius:13px;background:color-mix(in srgb,var(--surface) 96%,transparent);box-shadow:0 18px 46px rgba(14,18,38,.18);backdrop-filter:blur(18px);transform:translateX(25px);opacity:0;transition:.22s ease}.gamification-toast.show{transform:translateX(0);opacity:1}.gamification-toast.level-up{border-color:color-mix(in srgb,#f0a51f 38%,var(--line))}.gamification-toast.achievement{border-color:color-mix(in srgb,var(--green) 32%,var(--line))}.gamification-toast-icon{width:39px;height:39px;border-radius:11px;display:grid;place-items:center;background:var(--primary-soft);font-size:20px}.gamification-toast strong{display:block;font-size:13px;margin-bottom:3px}.gamification-toast small{display:block;font-size:12px;color:var(--muted)}

@media(max-width:1050px){.home-progression{grid-template-columns:1fr}.home-progression-main{grid-template-columns:auto minmax(140px,auto) 1fr}.home-progression-side{justify-content:flex-start}.achievement-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.home-progression{padding:14px}.home-progression-main{grid-template-columns:auto 1fr}.home-xp-track{grid-column:1/-1}.home-progression-side{gap:10px;flex-wrap:wrap}.profile-v5-head{padding:20px}.profile-level-orb{width:78px;height:78px}.profile-streak-row{grid-template-columns:1fr 1fr}.profile-stat-grid{grid-template-columns:1fr 1fr}.achievement-grid{grid-template-columns:1fr}.profile-progress-copy{align-items:flex-start;flex-direction:column;gap:5px}.gamification-toast-stack{right:14px;top:calc(var(--header) + 12px)}}
@media(max-width:480px){.profile-v5-head{align-items:flex-start}.profile-v5-identity{align-items:flex-start}.profile-level-orb{width:68px;height:68px;flex:0 0 68px}.profile-level-orb strong{font-size:24px}.profile-v5-identity h1{font-size:25px}.profile-v5-identity p{display:none}.profile-streak-row{grid-template-columns:1fr}.profile-stat-grid{grid-template-columns:1fr 1fr}.home-progression-side span:nth-child(2){display:none}}
.admin-stats{grid-template-columns:repeat(5,1fr)}
@media(max-width:980px){.admin-stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:500px){.admin-stats{grid-template-columns:1fr}}


/* v6.6.55 — profile stats + ranked showcase polish */
.profile-stat-grid--rich{margin-top:18px}
.profile-stat-grid--rich .stat{
  position:relative;
  overflow:hidden;
  min-height:112px;
  padding:18px 18px 16px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 96%,var(--primary) 2%),var(--surface));
  box-shadow:0 12px 28px rgba(39,29,93,.05);
}
.profile-stat-grid--rich .stat::after{
  content:"";
  position:absolute;
  right:-30px; top:-34px;
  width:92px; height:92px;
  border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--primary) 10%,transparent),transparent 66%);
}
.profile-stat-grid--rich .stat span,
.profile-stat-grid--rich .stat strong,
.profile-stat-grid--rich .stat small{position:relative;z-index:1}
.profile-stat-grid--rich .stat span{font-size:12px;font-weight:850;color:var(--primary);letter-spacing:.03em}
.profile-stat-grid--rich .stat strong{font-size:31px;line-height:1.05;margin-top:8px}
.profile-stat-grid--rich .stat small{display:block;margin-top:7px;color:var(--muted);font-size:11.5px}

.profile-ranked-v7{
  margin-top:20px;
  padding:24px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--primary) 3%,var(--surface)),var(--surface));
}
.profile-ranked-head-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.profile-tier-pill{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:32px;padding:0 12px;border-radius:999px;
  border:1px solid color-mix(in srgb,var(--tier-b,#68758d) 40%,var(--line));
  background:color-mix(in srgb,var(--tier-a,#bdc7d6) 16%,var(--surface));
  color:color-mix(in srgb,var(--tier-b,#68758d) 92%,var(--text));
  font-size:12px;font-weight:900;letter-spacing:.03em;
}
.profile-tier-pill.tier-bronze{--tier-a:#c88762;--tier-b:#8a5039}
.profile-tier-pill.tier-silver{--tier-a:#bdc7d6;--tier-b:#68758d}
.profile-tier-pill.tier-gold{--tier-a:#e6ba42;--tier-b:#a66f09}
.profile-tier-pill.tier-platinum{--tier-a:#85c6c7;--tier-b:#477d91}
.profile-tier-pill.tier-diamond{--tier-a:#73a8ff;--tier-b:#6657db}
.profile-tier-pill.tier-master{--tier-a:#9b72ff;--tier-b:#7842bc}
.profile-tier-pill.tier-grandmaster{--tier-a:#e76fc1;--tier-b:#8d4bd1}

.profile-ranked-showcase{
  display:grid;
  grid-template-columns:minmax(0,1.55fr) 320px;
  gap:16px;
  align-items:start;
}
.profile-season-panel{
  border:1px solid color-mix(in srgb,var(--primary) 14%,var(--line));
  border-radius:18px;
  padding:22px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--primary-soft) 52%,var(--surface)),var(--surface));
  box-shadow:0 14px 34px rgba(35,25,88,.06);
}
.profile-season-panel .v6-panel-head{margin-bottom:14px}
.profile-season-panel .season-rank-hero{margin-top:0}
.profile-season-side{
  padding:20px;
  border:1px solid color-mix(in srgb,var(--primary) 14%,var(--line));
  border-radius:18px;
  box-shadow:0 14px 34px rgba(35,25,88,.06);
}
.profile-season-side .ranked-your-tier{margin-top:12px}
.profile-season-side .ranked-your-stats{margin-top:14px}
.profile-season-side .ranked-scroll-play{margin-top:14px;width:100%}

@media(max-width:1100px){
  .profile-ranked-showcase{grid-template-columns:1fr}
}
@media(max-width:720px){
  .profile-stat-grid--rich .stat{min-height:98px;padding:16px}
  .profile-stat-grid--rich .stat strong{font-size:26px}
  .profile-ranked-v7{padding:18px}
}
@media(max-width:560px){
  .profile-ranked-head-actions{width:100%}
  .profile-ranked-head-actions .outline-btn{width:100%}
}

/* ===== premium-home.css ===== */
/* TypeFlow v4 — premium home experience
   Loaded after the base stylesheet so the rest of the product keeps its
   existing auth/profile/admin styling while the public test page gets the
   polished competitive layout approved in the visual mockup. */

:root{
  --home-max:1580px;
  --home-primary:#5b4ff6;
  --home-primary-2:#8b45eb;
  --home-blue:#3d8bfd;
  --home-green:#16a765;
  --home-gold:#f2ad27;
  --home-navy:#0c1736;
  --home-card-shadow:0 18px 55px rgba(31,39,76,.08);
}

/* Floating premium navigation */
.site-header{
  height:90px;
  background:transparent;
  border:0;
  padding:12px 22px 0;
  backdrop-filter:none;
}
.header-inner{
  max-width:var(--home-max);
  height:66px;
  padding:0 28px;
  grid-template-columns:300px 1fr auto;
  border:1px solid var(--line);
  border-radius:18px;
  background:color-mix(in srgb,var(--surface) 94%,transparent);
  box-shadow:0 10px 36px rgba(30,38,73,.08);
  backdrop-filter:blur(18px);
}
.brand{font-size:21px;letter-spacing:-.55px}.brand-symbol{width:38px;height:34px}.brand-symbol span{height:5px;background:linear-gradient(90deg,#5650f7,#8b4df1)}
.brand-symbol span:nth-child(1){width:32px;top:4px}.brand-symbol span:nth-child(2){width:23px;top:14px}.brand-symbol span:nth-child(3){width:14px;top:24px}
.main-nav{gap:34px}.main-nav a{font-size:15px;font-weight:720}.main-nav a.active:after{height:3px;bottom:-1px}
.header-actions{gap:12px}.theme-quick-toggle{border-radius:12px}.language-picker{border-left:1px solid var(--line);padding-left:17px}.primary-btn.compact{border-radius:11px}.outline-btn.compact{border-radius:11px}

/* Page background / hero */
.site-main{position:relative;overflow:hidden}.site-main:before{content:"";position:absolute;inset:0 0 auto; height:370px;pointer-events:none;background:radial-gradient(circle at 3% 58%,rgba(121,71,247,.16),transparent 25%),radial-gradient(circle at 50% 0,rgba(91,79,246,.07),transparent 30%)}
.premium-home{max-width:var(--home-max);padding-top:26px;position:relative;z-index:1}
.premium-hero{min-height:150px;display:flex;align-items:center;justify-content:space-between;gap:60px;padding:12px 18px 25px}
.hero-copy{max-width:690px}.hero-eyebrow{display:inline-flex;align-items:center;height:25px;padding:0 12px;border:1px solid color-mix(in srgb,var(--primary) 45%,var(--line));border-radius:99px;background:color-mix(in srgb,var(--primary) 7%,var(--surface));font-size:13px;letter-spacing:1.2px}
.premium-hero h1{margin:12px 0 6px;font-size:46px;line-height:1.02;letter-spacing:-1.8px;color:var(--text)}
.premium-hero p{margin:0;color:var(--muted);font-size:16px;line-height:1.6}
.hero-proof{display:flex;align-items:center;justify-content:flex-end;gap:38px;min-width:520px;position:relative}.hero-proof:before{content:"";position:absolute;inset:-45px -15px -25px -120px;z-index:-1;opacity:.35;background-image:radial-gradient(color-mix(in srgb,var(--primary) 20%,transparent) 1px,transparent 1px);background-size:11px 11px;mask-image:linear-gradient(90deg,transparent,#000 35%,#000)}
.proof-item{display:flex;align-items:center;gap:12px;white-space:nowrap}.proof-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;font-weight:900;font-size:18px;color:#fff;box-shadow:0 8px 18px rgba(51,63,110,.12)}.proof-icon.violet{background:linear-gradient(145deg,#7756ff,#5a42e9)}.proof-icon.blue{background:linear-gradient(145deg,#66a8ff,#347df4)}.proof-icon.green{background:linear-gradient(145deg,#51c982,#19a866)}.proof-item strong{display:block;font-size:16px;letter-spacing:-.2px}.proof-item small{display:block;color:var(--muted);font-size:13px;margin-top:2px}

/* Main grid */
.premium-grid{grid-template-columns:minmax(0,2.35fr) minmax(350px,.83fr);gap:28px}
.premium-typing-panel{padding:0;overflow:hidden;border-radius:20px;box-shadow:var(--home-card-shadow);border-color:color-mix(in srgb,var(--line) 88%,var(--primary) 12%)}
.test-config-row{display:grid;grid-template-columns:1.05fr 1.18fr;gap:28px;padding:22px 24px 18px;border-bottom:1px solid color-mix(in srgb,var(--line) 82%,transparent)}
.control-heading{height:22px;margin-bottom:10px;display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);font-weight:800}.control-icon{width:22px;height:22px;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--primary) 22%,var(--line));border-radius:50%;font-size:12.5px;color:var(--primary);background:var(--primary-soft)}
.premium-typing-panel .option-btn{height:38px;padding:0 15px;border-radius:9px;background:var(--surface);font-size:13px;box-shadow:none}.premium-typing-panel .option-btn.active{background:linear-gradient(180deg,color-mix(in srgb,var(--primary) 10%,var(--surface)),var(--primary-soft));border-color:color-mix(in srgb,var(--primary) 58%,var(--line));box-shadow:0 5px 14px var(--primary-shadow)}.sliders-glyph{font-size:13px;margin-left:5px;color:var(--muted)}

/* Independent typing-language selector */
.typing-language-control{margin:16px 24px 0;min-height:65px;display:grid;grid-template-columns:180px minmax(0,1fr) auto;align-items:center;gap:14px;padding:10px 12px;border:1px solid color-mix(in srgb,var(--primary) 38%,var(--line));border-radius:12px;background:linear-gradient(180deg,color-mix(in srgb,var(--primary) 3%,var(--surface)),var(--surface));box-shadow:0 8px 22px rgba(69,60,180,.045)}
.typing-language-label{display:flex;align-items:center;gap:10px;min-width:0}.language-globe{width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:var(--primary-soft);color:var(--primary);font-size:18px}.typing-language-label strong{display:block;font-size:14px}.typing-language-label small{display:none}
.typing-language-options{display:grid;grid-template-columns:repeat(5,minmax(100px,1fr));gap:7px;min-width:0}.typing-lang-btn{height:40px;border:1px solid transparent;border-radius:9px;background:transparent;color:var(--text);font-size:14px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;transition:.15s}.typing-lang-btn span{font-size:17px}.typing-lang-btn:hover{background:var(--surface-3)}.typing-lang-btn.active{border-color:color-mix(in srgb,var(--primary) 55%,var(--line));background:var(--surface);color:var(--primary);box-shadow:0 5px 14px var(--primary-shadow)}
.workspace-tools{display:flex;gap:6px}.tool-icon-btn{width:36px;height:36px;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--muted);cursor:pointer}.tool-icon-btn:hover{border-color:color-mix(in srgb,var(--primary) 50%,var(--line));color:var(--primary)}

/* Content modes and typing surface */
.premium-content-tabs{margin:15px 24px 0;border:0;border-bottom:1px solid var(--line);border-radius:0;overflow:visible;background:transparent;display:flex;gap:34px}.premium-content-tabs .content-mode{width:auto;min-width:130px;height:42px;border:0!important;background:transparent!important;box-shadow:none!important;position:relative;font-size:14px}.premium-content-tabs .content-mode.active:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,var(--primary),#8c52f3);border-radius:99px}.tab-glyph{font-size:16px;margin-right:6px}
.premium-typing-panel .custom-text-box{margin:14px 24px 0}
.premium-workspace{margin:0 24px 0;border:0;border-radius:0;background:transparent;overflow:visible}.premium-workspace .word-viewport{height:154px;margin-top:0;padding:15px 14px 8px;background:transparent;border:0;overflow:hidden}.premium-workspace .word-stream{gap:7px 11px;line-height:1.58;font-size:25px;font-weight:650;letter-spacing:.12px}.premium-workspace .test-word{padding:0 4px;border-radius:6px}.premium-workspace .typing-entry-wrap{margin:0;border:1px solid color-mix(in srgb,var(--primary) 48%,var(--line));border-radius:10px;background:color-mix(in srgb,var(--primary) 1.8%,var(--surface));overflow:hidden;box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 4%,transparent)}.premium-workspace .typing-entry-wrap:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 11%,transparent)}.premium-workspace .typing-input{height:54px;font-size:16px;padding-left:16px}.premium-workspace .space-tip{border-radius:7px;color:var(--muted)}
.word-viewport[data-highlight="box"] .test-word.active{background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 16%,var(--surface)),color-mix(in srgb,#8e65ff 10%,var(--surface)));box-shadow:0 0 0 1px color-mix(in srgb,var(--primary) 22%,transparent)}
.test-word.word-correct{color:var(--green)}.test-word.word-wrong{color:var(--red)}

/* Metrics */
.premium-metrics{grid-template-columns:repeat(7,1fr);margin:18px 0 0;padding:0 18px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--surface-2) 60%,transparent)}
.premium-metrics .metric{min-height:70px;gap:9px}.premium-metrics .metric small{font-size:12px}.premium-metrics .metric strong{font-size:18px}.premium-metrics .metric-icon{width:26px;text-align:center}.metric-icon.lightning{color:#3f7cff}.premium-actions{padding:14px 24px 0;gap:10px}.premium-actions .start-test{min-width:270px;height:47px;border-radius:10px;background:linear-gradient(110deg,#4c53f6,#8b45ec);box-shadow:0 12px 24px rgba(92,75,238,.24)}.premium-actions .reset-test{min-width:145px;height:47px}.play-icon{font-size:13px}.premium-typing-panel .test-status{padding-bottom:16px;color:var(--faint);font-size:12.5px}

/* Right rail */
.premium-side-stack{gap:18px}.premium-side-card{border-radius:19px;box-shadow:var(--home-card-shadow);overflow:hidden}.premium-side-card .section-head{padding:19px 20px 13px}.premium-side-card .section-head h2{font-size:18px;letter-spacing:-.35px}.premium-side-card .section-head a,.premium-side-card .subtle-link{font-size:12.5px;color:var(--primary);font-weight:750}.head-icon{width:27px;height:27px;display:inline-grid;place-items:center;margin-right:8px;color:var(--primary);background:var(--primary-soft);border-radius:8px}.daily-main{padding:6px 20px 12px;display:grid;grid-template-columns:90px 1fr;gap:18px;align-items:center}.progress-ring{width:78px;height:78px;border-radius:50%;display:grid;place-items:center;position:relative;background:conic-gradient(var(--primary) calc(var(--progress)*1%),var(--surface-3) 0);box-shadow:inset 0 0 0 1px var(--line)}.progress-ring:after{content:"";position:absolute;inset:9px;border-radius:50%;background:var(--surface)}.progress-ring span{position:relative;z-index:1;font-weight:900;font-size:18px}.daily-copy strong{font-size:14.5px}.daily-copy small{color:var(--muted);font-size:12.5px}.thin-progress{height:5px;border-radius:99px;background:var(--surface-3);overflow:hidden;margin:12px 0 9px}.thin-progress span{display:block;height:100%;background:linear-gradient(90deg,var(--primary),#8a4bed);border-radius:99px}.daily-cta{height:44px;margin:0 20px 14px;width:calc(100% - 40px);border:1px solid color-mix(in srgb,var(--primary) 55%,var(--line));border-radius:10px;background:transparent;color:var(--primary);font-weight:800;cursor:pointer}.daily-cta:hover{background:var(--primary-soft)}.daily-reset{padding:0 20px 12px;text-align:right;color:var(--faint);font-size:12px}
.premium-side-card.leaderboard-card{padding-bottom:14px}.leader-tabs{margin:0 20px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:repeat(3,1fr)}.leader-tab{height:38px;border:0;background:transparent;color:var(--muted);font-size:13px;font-weight:750;position:relative;cursor:pointer}.leader-tab.active{color:var(--primary)}.leader-tab.active:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--primary)}.leader-list{padding:7px 20px 8px;margin:0;list-style:none;max-height:none!important;overflow:visible!important}.leader-list li{min-height:44px;display:grid;grid-template-columns:24px 34px 1fr 32px auto;align-items:center;gap:8px;border-bottom:0}.leader-list .rank{font-size:13px;font-weight:800}.rank-1,.rank-2,.rank-3{width:21px;height:21px;border-radius:50%;display:grid;place-items:center}.rank-1{background:#ffe7a2;color:#a96b00}.rank-2{background:#edf0f5;color:#657087}.rank-3{background:#ffe0c1;color:#9d5525}.leader-list .avatar{width:30px;height:30px}.leader-list .leader-name{font-size:14px;font-weight:720;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.leader-list .country-badge{font-size:12.5px;color:var(--muted)}.leader-list strong{font-size:13px;color:var(--text);white-space:nowrap}.leaderboard-all-btn{height:43px;margin:5px 20px 0;border:1px solid color-mix(in srgb,var(--primary) 55%,var(--line));border-radius:10px;display:flex;align-items:center;justify-content:center;gap:15px;color:var(--primary);font-size:13px;font-weight:800}.leaderboard-all-btn:hover{background:var(--primary-soft)}

/* Summary cards */
.premium-summary-grid{grid-template-columns:1.05fr 1fr 1fr 1.2fr 1.2fr;gap:18px;margin-top:22px}.premium-summary-grid .summary-card{min-height:122px;padding:18px 20px;border-radius:16px;box-shadow:0 12px 32px rgba(31,39,76,.055)}.premium-summary-grid .summary-card span{font-size:13px;font-weight:780}.premium-summary-grid .summary-card strong{font-size:26px;letter-spacing:-.8px;margin-top:8px}.premium-summary-grid .summary-card small{font-size:12.5px;color:var(--muted);margin-top:5px}.result-card{background:linear-gradient(135deg,color-mix(in srgb,#845cff 8%,var(--surface)),var(--surface))}.best-card{background:linear-gradient(135deg,color-mix(in srgb,#64a7ff 8%,var(--surface)),var(--surface))}.rank-card{background:linear-gradient(135deg,color-mix(in srgb,#48c785 9%,var(--surface)),var(--surface))}.progress-card{background:linear-gradient(135deg,color-mix(in srgb,#f4b14b 9%,var(--surface)),var(--surface))}.premium-card{position:relative;background:linear-gradient(135deg,#151746,#28156a)!important;color:#fff!important;border-color:rgba(255,255,255,.08)!important}.premium-card span,.premium-card small{color:#fff}.premium-card small{opacity:.75!important;line-height:1.4}.premium-diamond{font-size:20px!important;color:#ffbf44!important}.premium-arrow{position:absolute;right:16px;bottom:16px;width:35px;height:35px;border:1px solid rgba(255,255,255,.4);border-radius:50%;display:grid;place-items:center;font-size:18px!important}.sparkline{align-self:flex-end}

/* Keep SEO useful but visually secondary to the app */
.premium-home .seo-section{margin-top:50px;padding-top:34px;border-top:1px solid var(--line)}

/* Fullscreen / focus */
#typing-panel:fullscreen{background:var(--bg);padding:4vh 8vw;overflow:auto;border-radius:0}.focus-test .site-header,.focus-test .premium-hero,.focus-test .premium-side-stack,.focus-test .premium-summary-grid,.focus-test .seo-section,.focus-test .footer{display:none!important}.focus-test .premium-home{max-width:1180px;padding-top:7vh}.focus-test .premium-grid{display:block}.focus-test .premium-typing-panel{box-shadow:0 25px 80px rgba(0,0,0,.13)}

/* Dark mode — not an afterthought */
html[data-theme="dark"] .site-main:before{background:radial-gradient(circle at 3% 58%,rgba(121,71,247,.18),transparent 24%),radial-gradient(circle at 50% 0,rgba(74,105,255,.09),transparent 30%)}
html[data-theme="dark"] .header-inner{box-shadow:0 14px 40px rgba(0,0,0,.3)}
html[data-theme="dark"] .premium-typing-panel,html[data-theme="dark"] .premium-side-card,html[data-theme="dark"] .premium-summary-grid .summary-card{box-shadow:0 20px 50px rgba(0,0,0,.2)}
html[data-theme="dark"] .typing-language-control{background:linear-gradient(180deg,rgba(119,112,255,.04),var(--surface))}
html[data-theme="dark"] .premium-card{background:linear-gradient(135deg,#1c1a57,#311b76)!important}
html[data-theme="dark"] .proof-icon{box-shadow:0 8px 22px rgba(0,0,0,.22)}

/* Responsive */
@media(max-width:1320px){
  .header-inner{grid-template-columns:250px 1fr auto}.main-nav{gap:21px}.premium-hero{gap:28px}.hero-proof{min-width:450px;gap:22px}.premium-grid{grid-template-columns:minmax(0,1.9fr) 335px}.typing-language-control{grid-template-columns:150px 1fr auto}.typing-language-options{grid-template-columns:repeat(5,minmax(82px,1fr))}.typing-lang-btn{font-size:12.5px}.premium-summary-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:1060px){
  .site-header{padding-inline:12px}.header-inner{grid-template-columns:1fr auto;padding:0 18px}.main-nav{display:none;position:absolute;top:78px;left:20px;right:20px;height:auto;padding:12px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);flex-direction:column;align-items:stretch;gap:0}.main-nav.open{display:flex}.main-nav a{height:44px;padding:0 10px}.main-nav a.active:after{display:none}.mobile-menu{display:grid;position:absolute;right:250px}.premium-hero{align-items:flex-start;flex-direction:column}.hero-proof{min-width:0;width:100%;justify-content:flex-start}.premium-grid{grid-template-columns:1fr}.premium-side-stack{display:grid;grid-template-columns:1fr 1fr}.test-config-row{grid-template-columns:1fr}.typing-language-control{grid-template-columns:1fr auto}.typing-language-options{grid-column:1/-1;grid-row:2}.typing-language-label small{display:block;margin-top:2px;color:var(--muted);font-size:12px}.premium-summary-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .site-header{height:78px;padding-top:8px}.header-inner{height:60px;border-radius:14px}.brand{font-size:17px}.brand-symbol{transform:scale(.85)}.header-actions .language-picker{display:none}.header-actions .outline-btn.compact{display:none}.mobile-menu{right:145px}.premium-home{padding:20px 14px}.premium-hero{padding:5px 5px 20px;gap:22px}.premium-hero h1{font-size:34px;letter-spacing:-1.1px}.premium-hero p{font-size:14.5px}.hero-proof{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.proof-item{gap:7px}.proof-icon{width:34px;height:34px;font-size:15px}.proof-item strong{font-size:14px}.proof-item small{font-size:11.5px}.premium-grid{gap:16px}.premium-typing-panel{border-radius:15px}.test-config-row{padding:17px 14px 13px;gap:17px}.typing-language-control{margin:12px 14px 0;padding:9px}.typing-language-options{display:flex;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}.typing-language-options::-webkit-scrollbar{display:none}.typing-lang-btn{min-width:110px}.workspace-tools{position:absolute;right:28px;margin-top:-46px}.premium-content-tabs{margin-inline:14px;gap:3px;display:grid;grid-template-columns:repeat(3,1fr)}.premium-content-tabs .content-mode{min-width:0}.premium-workspace{margin-inline:14px}.premium-workspace .word-viewport{height:172px;padding-inline:5px}.premium-workspace .word-stream{font-size:22px;gap:5px 8px}.premium-metrics{grid-template-columns:repeat(4,1fr);padding:0}.premium-metrics .metric{min-height:62px}.premium-metrics .metric:nth-child(4){border-right:0}.premium-metrics .metric:nth-child(n+5){border-top:1px solid var(--line)}.premium-actions{padding:13px 14px 0}.premium-actions .start-test,.premium-actions .reset-test{min-width:0;flex:1}.premium-side-stack{display:block}.premium-side-stack>*+*{margin-top:16px}.premium-summary-grid{grid-template-columns:1fr}.premium-home .seo-section{margin-top:30px}.footer{padding-inline:20px}.space-tip{display:none}
}
@media(max-width:480px){
  .header-actions .theme-quick-toggle{display:none}.mobile-menu{right:113px}.header-inner{padding-inline:14px}.primary-btn.compact{padding-inline:12px}.premium-hero h1{font-size:30px}.hero-proof{grid-template-columns:1fr 1fr}.hero-proof .proof-item:last-child{display:none}.test-config-row .segmented{gap:5px}.premium-typing-panel .option-btn{height:35px;padding:0 10px;font-size:12.5px}.typing-language-control{grid-template-columns:1fr}.workspace-tools{display:none}.premium-metrics{grid-template-columns:repeat(2,1fr)}.premium-metrics .metric:nth-child(n){border-top:1px solid var(--line);border-right:1px solid var(--line)}.premium-metrics .metric:nth-child(1),.premium-metrics .metric:nth-child(2){border-top:0}.premium-metrics .metric:nth-child(even){border-right:0}.premium-actions{flex-direction:column}.premium-actions .start-test,.premium-actions .reset-test{width:100%}
}

/* Compact light/dark control in the header */
.theme-quick-toggle{width:92px;height:40px;padding:0 9px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--muted);display:flex;align-items:center;justify-content:space-between;gap:7px;cursor:pointer}.theme-quick-toggle:hover{border-color:color-mix(in srgb,var(--primary) 36%,var(--line))}.theme-sun,.theme-moon{font-size:14.5px;line-height:1}.theme-switch-dot{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#6756f8,#9149eb);box-shadow:0 5px 14px var(--primary-shadow);transition:.18s}.theme-moon{opacity:.55}html[data-theme="dark"] .theme-switch-dot{transform:translateX(1px);background:linear-gradient(135deg,#887cff,#5b67ff)}html[data-theme="dark"] .theme-sun{opacity:.55}html[data-theme="dark"] .theme-moon{opacity:1}

/* Freeze configuration while a timed run is active. */
.premium-typing-panel .option-btn:disabled,.premium-typing-panel .content-mode:disabled,.typing-lang-btn:disabled{cursor:not-allowed;opacity:.5}.premium-typing-panel.config-locked .typing-language-control,.premium-typing-panel.config-locked .test-config-row,.premium-typing-panel.config-locked .premium-content-tabs{user-select:none}

/* ===== readable-typography.css ===== */

/* TypeFlow V5.0.2 — final readable typography layer.
   IMPORTANT: this file is intentionally loaded AFTER premium-home.css. */

html { font-size: 16px; }
body { font-size: 16px; line-height: 1.55; }

/* Header */
.brand { font-size: 22px !important; }
.main-nav a { font-size: 16px !important; font-weight: 700; }
.header-actions button,
.header-actions a,
.language-picker,
.language-picker select { font-size: 15px !important; }

/* Hero / page heading */
.premium-hero h1,
.page-heading h1 { font-size: clamp(38px, 3vw, 48px) !important; }
.premium-hero p,
.page-heading p { font-size: 17px !important; line-height: 1.6; }
.eyebrow { font-size: 13px !important; }
.proof-item strong { font-size: 16px !important; }
.proof-item small { font-size: 13.5px !important; }

/* Test configuration */
.toolbar-label,
.workspace-label,
.control-heading,
.control-label,
.test-config-row label,
.typing-language-label > span { font-size: 14px !important; font-weight: 750; }

.premium-typing-panel .option-btn,
.typing-lang-btn,
.content-mode,
.segmented button { font-size: 14.5px !important; }

.typing-language-label small,
.workspace-hint,
.custom-duration-row { font-size: 13px !important; line-height: 1.5; }

.mini-badge,
.space-tip { font-size: 12px !important; }

/* Typing area stays intentionally large */
.premium-workspace .word-stream,
.word-stream { font-size: 26px !important; line-height: 1.65 !important; }
.typing-input,
.premium-workspace input,
.premium-workspace textarea { font-size: 17px !important; }

/* Live metrics */
.premium-metrics .metric small,
.metric small,
.metric-label { font-size: 13.5px !important; }
.premium-metrics .metric strong,
.metric strong { font-size: 20px !important; }
.premium-typing-panel .test-status { font-size: 13px !important; }

/* Buttons */
.primary-btn,
.outline-btn,
.soft-action,
.start-test,
.reset-test { font-size: 15px !important; font-weight: 750; }

/* Right side cards */
.section-head h2,
.premium-side-card .section-head h2 { font-size: 19px !important; }
.section-head a,
.premium-side-card .section-head a,
.subtle-link { font-size: 13.5px !important; }

.daily-copy strong { font-size: 15.5px !important; }
.daily-copy small,
.daily-reset { font-size: 13.5px !important; }

.leader-tabs button { font-size: 14px !important; }
.leader-list .leader-name { font-size: 15px !important; }
.leader-list .leader-score,
.leader-list .leader-accuracy,
.leader-list .country-badge { font-size: 14px !important; }
.empty-score,
.friends-empty { font-size: 14px !important; }

/* Bottom summary cards */
.premium-summary-grid .summary-card h3,
.summary-card h3 { font-size: 16px !important; }
.premium-summary-grid .summary-card strong { font-size: 28px !important; }
.premium-summary-grid .summary-card small,
.summary-card p,
.summary-card a { font-size: 14px !important; line-height: 1.5; }

/* Gamification / profile */
.progress-level-badge { font-size: 13px !important; }
.home-xp-copy strong { font-size: 15px !important; }
.home-xp-copy small { font-size: 13px !important; }
.home-progression-side span,
.home-progression-side a { font-size: 14px !important; }
.profile-v5-identity p { font-size: 15px !important; }
.profile-progress-copy span { font-size: 14px !important; }
.profile-progress-copy > small,
.profile-streak-row small,
.profile-stat-grid .stat small { font-size: 13px !important; }
.achievement-copy strong { font-size: 15px !important; }
.achievement-copy p { font-size: 14px !important; line-height: 1.55; }
.achievement-copy small { font-size: 12.5px !important; }

/* Results / analysis */
.analysis-kicker { font-size: 13px !important; }
.analysis-header p { font-size: 15px !important; }
.personal-best-badge { font-size: 13px !important; }
.score-label,
.result-comparison { font-size: 14px !important; }
.analysis-primary-stats small { font-size: 13.5px !important; }
.analysis-section-head h3 { font-size: 17px !important; }
.analysis-section-head p { font-size: 14px !important; }
.chart-legend,
.chart-axis { font-size: 12.5px !important; }
.analysis-detail-card > span { font-size: 13px !important; }
.detail-pair small { font-size: 13px !important; }
.detail-pair strong { font-size: 15px !important; }
.word-summary small { font-size: 13px !important; }
.error-word-chip b { font-size: 14px !important; }
.error-word-chip small { font-size: 13px !important; }

/* Settings / auth / admin */
.setting-row > span,
.auth-card label,
.admin-panel label { font-size: 14px !important; }
.setting-row select,
.auth-card input,
.admin-panel input,
.admin-panel select,
.admin-panel textarea { font-size: 15px !important; }
.table-wrap table,
.admin-table { font-size: 14px !important; }

/* Footer / SEO */
.seo-copy p { font-size: 16px !important; }
.seo-guide-links a { font-size: 15px !important; }
.faq-card p { font-size: 15px !important; }
.footer { font-size: 13.5px !important; }

/* Mobile: don't collapse typography into tiny labels */
@media (max-width: 760px) {
  body { font-size: 15px; }
  .brand { font-size: 20px !important; }
  .main-nav a { font-size: 15px !important; }
  .premium-hero p { font-size: 15.5px !important; }
  .premium-typing-panel .option-btn,
  .typing-lang-btn,
  .content-mode { font-size: 13.5px !important; }
  .premium-workspace .word-stream,
  .word-stream { font-size: 23px !important; }
  .premium-metrics .metric small { font-size: 12.5px !important; }
  .premium-metrics .metric strong { font-size: 19px !important; }
}

/* ===== theme-redesign.css ===== */
/* =========================================================================
   TypeFlow — Redesign katmanı
   Bu dosya diğer CSS dosyalarından SONRA yüklenir; renk/tipografi/kart
   dilini değiştirir, yerleşim (grid/flex) mantığına dokunmaz. Böylece
   app.js'in bağlı olduğu tüm id/class'lar bozulmadan kalır.
   ========================================================================= */
:root{
  --bg:#F6F5FC;
  --surface:#FFFFFF;
  --surface-2:#FBFAFF;
  --surface-3:#F0EDFB;
  --text:#171225;
  --muted:#6B6690;
  --faint:#9C97B8;
  --line:#E6E1F7;
  --line-strong:#D6CDF2;
  --primary:#6C5CE7;
  --primary-2:#8578FF;
  --primary-soft:#EEEBFF;
  --primary-shadow:rgba(108,92,231,.20);
  --secondary:#0EA5C4;
  --green:#12A76A;
  --green-soft:#E7F9F0;
  --red:#E23A5D;
  --red-soft:#FDEAEF;
  --orange:#DB8B12;
  --shadow:0 18px 46px rgba(40,25,90,.08);
  --radius:14px;
  --font-display:'JetBrains Mono',ui-monospace,monospace;
}
html[data-theme="dark"]{
  --bg:#0A0912;
  --surface:#14121F;
  --surface-2:#1A1729;
  --surface-3:#231D3B;
  --text:#F2F0FA;
  --muted:#9C97B8;
  --faint:#6B6688;
  --line:#2A2440;
  --line-strong:#3A3258;
  --primary:#7C6CFF;
  --primary-2:#9B8CFF;
  --primary-soft:#211C3D;
  --primary-shadow:rgba(124,108,255,.35);
  --secondary:#46E1FF;
  --green:#4ADE80;
  --green-soft:#123322;
  --red:#FF5C7C;
  --red-soft:#3A1B28;
  --orange:#FFC163;
  --shadow:0 22px 60px rgba(0,0,0,.45);
}

body{
  font-family:'Inter',ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:
    radial-gradient(ellipse 900px 480px at 12% -8%, color-mix(in srgb,var(--primary) 10%,transparent), transparent),
    radial-gradient(ellipse 700px 460px at 100% 6%, color-mix(in srgb,var(--secondary) 9%,transparent), transparent),
    var(--bg);
}
html[data-theme="dark"] .site-main:before{ display:none; }

/* Data / numeric / display typography → monospace, matches the "typing" subject */
.brand strong,
.premium-hero h1, .page-heading h1, .page-title h1, .guide-hero h1, .auth-card h1, .profile-v5-identity h1, .admin-header h1,
.metric strong, .summary-card strong, .stat strong, .result-score strong, .hero-result-score strong,
.analysis-primary-stats strong, .char-breakdown-value, .word-summary strong, .profile-level-orb strong,
.leader-list strong, .proof-item strong, .home-xp-copy small, .admin-stat strong, .rank{
  font-family:var(--font-display);
  letter-spacing:-0.02em;
}
.premium-hero h1, .page-heading h1, .page-title h1, .guide-hero h1{ font-weight:700; }

/* ---- Header: keycap-style logo mark ---- */
.brand-symbol{ display:none; }
.brand{ gap:11px; }
.brand:before{
  content:"K";
  width:32px;height:32px;border-radius:9px;
  display:grid;place-items:center;
  font-family:var(--font-display);font-weight:800;font-size:14px;color:#fff;
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  box-shadow:0 0 0 1px rgba(255,255,255,.12) inset, 0 6px 16px var(--primary-shadow);
}
.header-inner{ box-shadow:var(--shadow); }
.main-nav a.active:after{ background:linear-gradient(90deg,var(--primary),var(--secondary)); }
.admin-nav{ color:var(--orange)!important; }

/* ---- Buttons: keycap bevel ---- */
.primary-btn{
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  border-bottom:2px solid color-mix(in srgb,var(--primary) 55%, #000 12%);
  box-shadow:0 10px 22px var(--primary-shadow);
}
.outline-btn, .option-btn, .icon-button, .tool-icon-btn{
  border-bottom-width:2px;
  border-bottom-color:var(--line-strong);
}
.option-btn.active{
  background:linear-gradient(180deg,color-mix(in srgb,var(--primary) 12%,var(--surface)),var(--primary-soft));
  border-color:color-mix(in srgb,var(--primary) 55%,var(--line));
  color:var(--primary);
}

/* ---- Cards: subtle keycap bevel on the bottom edge ---- */
.card{
  border-bottom:2px solid color-mix(in srgb,var(--line-strong) 70%, transparent);
  transition:transform .15s ease, border-color .15s ease;
}

/* ---- Hero proof icons recolored to the new palette ---- */
.proof-icon.violet{ background:linear-gradient(145deg,var(--primary),var(--primary-2)); }
.proof-icon.blue{ background:linear-gradient(145deg,var(--secondary),#3fb9e0); }
.proof-icon.green{ background:linear-gradient(145deg,#4fd68f,var(--green)); }
.hero-eyebrow{ font-family:var(--font-display); font-weight:600; }

/* ---- Typing workspace: correct/incorrect feedback stays legible & bold ---- */
.word-stream{ font-family:var(--font-display); }
.typing-input{ font-family:'Inter',sans-serif; }
.word-viewport[data-highlight="box"] .test-word.active{
  box-shadow:0 0 0 1px color-mix(in srgb,var(--primary) 45%,transparent), 0 0 14px color-mix(in srgb,var(--primary) 25%,transparent);
}

/* ---- Progress ring / xp bar accent ---- */
.progress-ring{ background:conic-gradient(var(--primary) calc(var(--progress)*1%), var(--surface-3) 0); }
.home-xp-track span, .profile-xp-track span{
  background:linear-gradient(90deg,var(--secondary),var(--primary),var(--primary-2));
}

/* ---- Result modal score accent ---- */
.hero-result-score>strong{ color:var(--primary); }
.legend-wpm{ color:var(--primary); }

/* =========================================================================
   AdSense-ready ad slots
   Bu kutular reklam yerleşimi için ayrılmıştır. Google AdSense onayı
   aldıktan sonra base.html <head> içindeki adsbygoogle script etiketine
   yayıncı kimliğini (ca-pub-XXXXXXXXXXXXXXXX) ekleyin ve aşağıdaki
   .ad-slot içine kendi <ins class="adsbygoogle"> kodunuzu yerleştirin.
   ========================================================================= */
.ad-slot{
  width:100%;
  margin:28px 0;
  padding:14px;
  border:1px dashed var(--line-strong);
  border-radius:12px;
  background:var(--surface-2);
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:90px;
  text-align:center;
  color:var(--faint);
  font-size:12px;
  font-family:var(--font-display);
  letter-spacing:.06em;
}
.ad-slot--banner{ min-height:100px; }
.ad-slot--rectangle{ min-height:250px; }
.ad-slot--in-feed{ min-height:120px; margin:20px 0; }

@media(max-width:720px){
  .ad-slot{ min-height:100px; }
}

.footer{ gap:16px; flex-wrap:wrap; }
.footer-links a{ color:var(--primary); font-weight:700; }

/* =========================================================================
   Leaderboard V2 — daily / weekly / monthly / all-time competitive filters
   ========================================================================= */
.leaderboard-page-v2{max-width:1180px;margin:0 auto;padding:34px 20px 48px}
.leaderboard-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;margin-bottom:20px}
.leaderboard-hero h1{margin:6px 0 6px;font-size:40px;line-height:1.05;letter-spacing:-1.4px}
.leaderboard-hero p{margin:0;color:var(--muted);font-size:15.5px}
.leaderboard-period-tabs{display:flex;align-items:center;gap:7px;padding:6px;border:1px solid var(--line);border-radius:14px;background:var(--surface);box-shadow:var(--shadow-soft)}
.period-tab{min-height:38px;padding:0 15px;display:inline-flex;align-items:center;justify-content:center;border-radius:9px;color:var(--muted);font-size:14px;font-weight:750;text-decoration:none;white-space:nowrap}
.period-tab:hover{color:var(--text);background:var(--surface-2)}
.period-tab.active{color:#fff;background:linear-gradient(135deg,var(--primary),var(--primary-2));box-shadow:0 8px 20px var(--primary-shadow)}
.leaderboard-filter-card{display:grid;grid-template-columns:1fr 1.25fr 1fr auto;gap:14px;align-items:end;padding:18px 20px;border-radius:16px}
.leaderboard-filter-card label{display:grid;gap:7px;color:var(--muted);font-size:12.5px;font-weight:760}
.leaderboard-filter-card select{width:100%;height:43px;padding:0 38px 0 12px;border:1px solid var(--line-strong);border-radius:10px;background:var(--surface);color:var(--text);font-size:14px;font-weight:650}
.leaderboard-filter-btn{height:43px;min-width:118px;padding:0 18px;border:0;border-radius:10px;cursor:pointer}
.leaderboard-context-row{display:flex;flex-wrap:wrap;gap:8px;margin:15px 2px}
.leaderboard-context-pill{display:inline-flex;align-items:center;min-height:30px;padding:0 11px;border:1px solid var(--line);border-radius:999px;background:var(--surface-2);color:var(--muted);font-size:12.5px;font-weight:720}
.leaderboard-table-card{overflow:hidden;border-radius:17px}
.leaderboard-table-card table{width:100%;border-collapse:collapse}
.leaderboard-table-card th{height:48px;padding:0 18px;background:var(--surface-2);color:var(--muted);font-size:12.5px;font-weight:800;text-align:left;border-bottom:1px solid var(--line)}
.leaderboard-table-card td{height:61px;padding:0 18px;border-bottom:1px solid var(--line);font-size:14px}
.leaderboard-table-card tbody tr:last-child td{border-bottom:0}
.leaderboard-table-card tbody tr:hover{background:color-mix(in srgb,var(--primary) 4%,var(--surface))}
.leaderboard-table-card td:nth-child(2){display:flex;align-items:center;gap:11px}
.leaderboard-rank{width:28px;height:28px;display:grid;place-items:center;border-radius:50%;font-weight:850;font-size:12.5px;background:var(--surface-3);color:var(--muted)}
.leaderboard-rank.rank-1{background:#fff0b8;color:#9d6b00}.leaderboard-rank.rank-2{background:#edf1f7;color:#68748a}.leaderboard-rank.rank-3{background:#ffe1c6;color:#9d582f}
.leaderboard-username{font-size:14.5px}.leaderboard-country{display:inline-flex;padding:4px 8px;border-radius:7px;background:var(--surface-3);font-weight:700}.leaderboard-wpm{font-size:17px;color:var(--primary)}
.leaderboard-empty{padding:42px 12px;text-align:center;color:var(--muted);font-size:15px}
html[data-theme="dark"] .leaderboard-period-tabs,html[data-theme="dark"] .leaderboard-filter-card,html[data-theme="dark"] .leaderboard-table-card{border-color:#29364d}
@media(max-width:860px){.leaderboard-hero{align-items:flex-start;flex-direction:column}.leaderboard-period-tabs{width:100%;overflow-x:auto}.period-tab{flex:1}.leaderboard-filter-card{grid-template-columns:1fr 1fr}.leaderboard-filter-btn{width:100%}}
@media(max-width:560px){.leaderboard-page-v2{padding:24px 12px 36px}.leaderboard-hero h1{font-size:32px}.leaderboard-filter-card{grid-template-columns:1fr}.leaderboard-table-card{overflow-x:auto}.leaderboard-table-card table{min-width:620px}.period-tab{font-size:13px;padding-inline:12px}}


/* v6.2.1 — Typing tool above-the-fold layout */
.typing-tool-page{
  padding-top: 10px;
}
.typing-tool-page .tool-breadcrumb{
  margin-bottom: 2px;
}
.typing-tool-page .premium-hero{
  min-height: 108px;
  padding-top: 4px;
  padding-bottom: 12px;
  margin-bottom: 6px;
}
.typing-tool-page .premium-hero h1{
  margin-top: 7px;
  margin-bottom: 4px;
}
.typing-tool-page .premium-hero p{
  line-height: 1.45;
}
.typing-tool-page .premium-grid{
  margin-top: 0;
}
.typing-tool-page .typing-below-ad{
  margin-top: 22px;
  margin-bottom: 16px;
}
@media (max-width: 900px){
  .typing-tool-page .premium-hero{
    min-height: 0;
    padding-bottom: 10px;
    margin-bottom: 4px;
  }
}

/* ===== v6.css ===== */
/* TypeFlow V6 — social/ranked/challenge/analytics layer */
.v6-page{max-width:1280px;padding:32px 22px 54px}.v6-page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;margin-bottom:22px}.v6-page-head h1{font-size:40px;letter-spacing:-1.3px;margin:5px 0 7px}.v6-page-head p{font-size:16px;color:var(--muted);line-height:1.65;margin:0;max-width:720px}.v6-two-col{display:grid;grid-template-columns:1fr 1fr;gap:18px}.v6-panel{padding:22px;border-radius:18px}.v6-panel-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}.v6-panel-head h2{margin:3px 0 0;font-size:20px}.v6-panel-head>a{font-size:13px;color:var(--primary);font-weight:800}.v6-count{min-width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary);font-size:13px;font-weight:900}.v6-empty{padding:24px 10px;text-align:center;color:var(--muted);font-size:14px}.v6-empty.wide{grid-column:1/-1}.v6-subtitle{margin:18px 0 7px;padding-top:15px;border-top:1px solid var(--line);color:var(--muted);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.v6-invite-banner,.duel-invite-strip{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 20px;margin-bottom:18px;background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 8%,var(--surface)),var(--surface))}.v6-invite-banner>div:first-child,.duel-invite-strip>div:first-child{display:grid;grid-template-columns:auto 1fr;column-gap:9px}.v6-invite-banner strong,.duel-invite-strip strong{font-size:15px}.v6-invite-banner small,.duel-invite-strip small{grid-column:2;color:var(--muted);font-size:13px}.v6-pulse{color:#21b66f;animation:v6pulse 1.2s infinite}@keyframes v6pulse{50%{opacity:.3}}.v6-invite-list,.duel-invite-strip>div:last-child{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.v6-invite-list a,.duel-invite-strip a{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:10px;padding:8px 10px;color:var(--text);background:var(--surface);font-size:13px}.v6-invite-list a span{color:var(--muted)}.v6-invite-list code,.duel-invite-strip code{color:var(--primary);font-weight:900}
.v6-search{display:grid;grid-template-columns:1fr auto;gap:9px}.v6-search input,.v6-page input,.v6-page select{height:45px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--text);padding:0 13px;font-size:15px}.v6-user-list{display:grid;gap:4px;margin-top:14px}.v6-user-list article{min-height:60px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:11px;border-bottom:1px solid var(--line);padding:7px 0}.v6-user-list article:last-child{border-bottom:0}.v6-user-list strong,.v6-user-list small{display:block}.v6-user-list strong{font-size:14px}.v6-user-list small{font-size:12.5px;color:var(--muted);margin-top:2px}.v6-row-actions{display:flex;gap:7px}.compact-list article{grid-template-columns:auto 1fr}.v6-friends-panel{margin-top:18px}.v6-friend-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.v6-friend-card{border:1px solid var(--line);background:var(--surface-2);border-radius:15px;padding:16px;display:grid;gap:13px}.v6-friend-top{display:flex;align-items:center;gap:11px}.v6-friend-top strong,.v6-friend-top small{display:block}.v6-friend-top small{font-size:12px;color:var(--muted)}.v6-friend-card .primary-btn{width:100%}.text-danger{border:0;background:transparent;color:#df4553;font-size:12px;cursor:pointer;width:100%}
/* Duel V6 */
.v6-duel-hero{align-items:center}.ranked-profile-chip{display:flex;align-items:center;gap:13px;min-width:260px;padding:15px 17px;border:1px solid color-mix(in srgb,var(--primary) 28%,var(--line));border-radius:16px;background:linear-gradient(135deg,var(--primary-soft),var(--surface));box-shadow:0 10px 28px var(--primary-shadow)}.rank-emblem{width:46px;height:46px;display:grid;place-items:center;border-radius:14px;background:linear-gradient(135deg,#625cff,#9d52ef);color:#fff;font-size:22px;box-shadow:0 8px 18px var(--primary-shadow)}.ranked-profile-chip small,.ranked-profile-chip strong,.ranked-profile-chip span{display:block}.ranked-profile-chip small{font-size:11px;color:var(--muted);text-transform:uppercase;font-weight:800}.ranked-profile-chip strong{font-size:16px;margin:2px 0}.ranked-profile-chip>div>span{font-size:12px;color:var(--muted)}.v6-duel-modes{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:11px}.v6-duel-modes .duel-mode-card{width:100%;text-align:left;cursor:pointer;color:var(--text)}.duel-private-config{grid-column:1/-1;display:grid;grid-template-columns:1fr auto 1fr;gap:15px;align-items:center;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--surface-2)}.duel-private-config[hidden]{display:none}.private-room-action{display:flex;align-items:center;justify-content:space-between;gap:15px}.private-room-action strong,.private-room-action small{display:block}.private-room-action small{font-size:12.5px;color:var(--muted);margin-top:3px}.private-room-divider{font-size:12px;color:var(--faint);font-weight:800;text-transform:uppercase}.private-room-join{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:end}.private-room-join label,.private-room-options label{display:flex;flex-direction:column;gap:6px}.private-room-join label span,.private-room-options label span{font-size:12px;color:var(--muted);font-weight:800}.private-room-options{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:10px;border-top:1px solid var(--line);padding-top:13px}.room-code-display{width:min(420px,100%);margin:0 auto 17px;padding:15px;border:1px dashed color-mix(in srgb,var(--primary) 55%,var(--line));border-radius:14px;background:var(--primary-soft)}.room-code-display small,.room-code-display strong,.room-code-display span{display:block}.room-code-display strong{font:900 30px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.16em;color:var(--primary);margin:5px 0}.room-code-display span{font-size:12px;color:var(--muted)}.ranked-match-badge{display:inline-flex!important;margin-top:4px;padding:3px 7px;border-radius:999px;background:#fff3d5;color:#b57a00!important;font-size:10px!important;font-weight:900!important}.rating-reveal{display:flex;align-items:center;justify-content:center;gap:18px;margin:-5px auto 22px;padding:13px 18px;max-width:650px;border:1px solid var(--line);border-radius:14px;background:var(--surface-2)}.rating-reveal>div small,.rating-reveal>div strong{display:block}.rating-reveal>div small{font-size:11px;color:var(--muted)}.rating-reveal>div strong{font-size:21px}.rating-reveal>span{font-size:20px;font-weight:900;color:var(--muted)}.rating-reveal>span.positive{color:#10a968}.rating-reveal>span.negative{color:#e54c59}.rating-reveal>b{padding:5px 9px;border-radius:999px;background:var(--primary-soft);color:var(--primary);font-size:12px}.duel-meta-panels{margin-top:20px}.duel-meta-panels .duel-history{margin:0}.season-panel{padding:23px}.season-rank-number{font-size:25px;font-weight:900;color:var(--primary)}.season-rank-hero{display:flex;align-items:center;gap:12px;padding:15px;border-radius:14px;background:linear-gradient(135deg,var(--primary-soft),var(--surface-2));margin:10px 0 13px}.season-rank-hero>span:not(.tier-emblem){width:48px;height:48px;display:grid;place-items:center;border-radius:14px;background:var(--primary);color:#fff;font-size:22px}.season-rank-hero strong,.season-rank-hero b{display:block}.season-rank-hero strong{font-size:18px}.season-rank-hero b{font-size:13px;color:var(--primary);margin-top:2px}.season-stat-grid{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:12px;margin-bottom:14px}.season-stat-grid div{padding:12px;text-align:center;border-right:1px solid var(--line)}.season-stat-grid div:last-child{border-right:0}.season-stat-grid strong,.season-stat-grid small{display:block}.season-stat-grid strong{font-size:18px}.season-stat-grid small{font-size:11px;color:var(--muted);margin-top:2px}
/* Daily challenge */
.challenge-head{align-items:center}.season-chip{min-width:210px;padding:13px 16px;border-radius:14px;border:1px solid var(--line);background:var(--surface);text-align:right}.season-chip span,.season-chip strong,.season-chip small{display:block}.season-chip span{font-size:13px;color:var(--primary);font-weight:850}.season-chip strong{font-size:15px;margin:2px 0}.season-chip small{font-size:11px;color:var(--muted)}.challenge-langs{display:flex;gap:6px;padding:7px;margin-bottom:17px;overflow:auto}.challenge-langs a{flex:1;min-width:120px;padding:10px 12px;border-radius:9px;text-align:center;color:var(--muted);font-size:13px;font-weight:800}.challenge-langs a.active{background:var(--primary-soft);color:var(--primary)}.challenge-arena{padding:0;overflow:hidden}.challenge-topline{display:flex;align-items:center;justify-content:space-between;padding:17px 22px;border-bottom:1px solid var(--line);background:var(--surface-2)}.challenge-topline>div:first-child{display:flex;align-items:center;gap:12px}.challenge-topline>div:last-child{text-align:right}.challenge-topline small,.challenge-topline strong{display:block}.challenge-topline small{font-size:11px;color:var(--muted)}.challenge-word-viewport{height:230px;overflow:hidden;padding:24px 27px;background:linear-gradient(180deg,var(--surface),var(--surface-2))}.challenge-word-stream{display:flex;flex-wrap:wrap;align-content:flex-start;gap:8px 13px;font-size:27px;line-height:1.55;font-weight:680}.challenge-word{padding:1px 4px;border-radius:7px}.challenge-word.active{background:var(--primary-soft);color:var(--primary)}.challenge-word.correct{color:#10a968}.challenge-word.wrong{color:#e54c59;text-decoration:underline}.challenge-input-wrap{position:relative;margin:0 26px;border:1px solid color-mix(in srgb,var(--primary) 50%,var(--line));border-radius:11px;background:var(--surface)}.challenge-input-wrap input{width:100%;height:58px;border:0;outline:0;background:transparent;color:var(--text);font-size:18px;padding:0 90px 0 16px}.challenge-input-wrap span{position:absolute;right:11px;top:50%;transform:translateY(-50%);padding:4px 7px;border:1px solid var(--line);border-radius:6px;color:var(--muted);font-size:11px}.challenge-live-stats{display:grid;grid-template-columns:repeat(3,1fr);margin-top:18px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.challenge-live-stats>div{text-align:center;padding:13px;border-right:1px solid var(--line)}.challenge-live-stats>div:last-child{border-right:0}.challenge-live-stats small,.challenge-live-stats strong{display:block}.challenge-live-stats small{font-size:12px;color:var(--muted)}.challenge-live-stats strong{font-size:22px;margin-top:2px}.challenge-actions{display:flex;align-items:center;justify-content:center;gap:18px;padding:17px 22px 20px}.challenge-pb{font-size:13px;color:var(--muted)}.challenge-result{margin-top:17px;padding:25px;text-align:center}.challenge-result h2{font-size:24px;margin:5px 0 18px}.challenge-result-grid{display:grid;grid-template-columns:repeat(4,1fr);max-width:780px;margin:0 auto 18px;border:1px solid var(--line);border-radius:14px;overflow:hidden}.challenge-result-grid>div{padding:15px;border-right:1px solid var(--line)}.challenge-result-grid>div:last-child{border-right:0}.challenge-result-grid strong,.challenge-result-grid small{display:block}.challenge-result-grid strong{font-size:25px}.challenge-result-grid small{font-size:11px;color:var(--muted)}.challenge-boards{margin-top:18px}.v6-ranking-list{display:grid}.v6-ranking-list>div{display:grid;grid-template-columns:40px 1fr auto 60px;gap:8px;align-items:center;min-height:47px;border-bottom:1px solid var(--line);font-size:13px}.v6-ranking-list>div:last-child{border-bottom:0}.v6-ranking-list b{color:var(--muted)}.v6-ranking-list strong{text-align:right}.v6-ranking-list small{text-align:right;color:var(--muted)}
/* Profile analytics */
.profile-v6-analytics{margin-top:20px;padding:24px}.analytics-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:13px}.analytics-card{border:1px solid var(--line);border-radius:15px;background:var(--surface-2);padding:16px;min-height:170px}.analytics-card.wide{grid-row:span 2}.analytics-card h3{font-size:15px;margin:0 0 12px}.analytics-list{display:grid;gap:7px}.analytics-list>div{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px;padding-bottom:6px;border-bottom:1px solid var(--line)}.analytics-list>div:last-child{border-bottom:0}.analytics-list b{color:var(--primary)}.trend-chart{height:180px;display:flex;align-items:flex-end;gap:5px;padding-top:20px}.trend-bar{flex:1;min-width:4px;max-width:18px;border-radius:5px 5px 2px 2px;background:linear-gradient(180deg,var(--primary),var(--primary-2));opacity:.86;position:relative}.trend-bar:hover{opacity:1}.trend-bar span{display:none;position:absolute;bottom:calc(100% + 5px);left:50%;transform:translateX(-50%);white-space:nowrap;padding:3px 5px;border-radius:5px;background:var(--text);color:var(--surface);font-size:10px}.trend-bar:hover span{display:block}.analytics-empty{font-size:13px;color:var(--muted);padding:15px 0}
/* Admin V6 */
.admin-v6-section{margin-top:18px}.anti-cheat-reason{max-width:320px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.severity-high{color:#e04755;font-weight:800}.severity-medium{color:#c78513;font-weight:800}.v6-admin-season{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center}.v6-admin-season form{display:flex;gap:8px}.v6-admin-season input{height:40px;border:1px solid var(--line);border-radius:9px;padding:0 10px;background:var(--surface);color:var(--text)}
html[data-theme="dark"] .ranked-match-badge{background:#372d11;color:#f4ca65!important}
@media(max-width:1000px){.v6-friend-grid{grid-template-columns:repeat(2,1fr)}.analytics-grid{grid-template-columns:1fr 1fr}.analytics-card.wide{grid-column:1/-1;grid-row:auto}.duel-private-config{grid-template-columns:1fr}.private-room-divider{text-align:center}.private-room-options{grid-column:1}.v6-two-col{grid-template-columns:1fr}}
@media(max-width:680px){.v6-page{padding:22px 13px}.v6-page-head{align-items:flex-start;flex-direction:column}.v6-page-head h1{font-size:32px}.v6-friend-grid{grid-template-columns:1fr}.v6-duel-modes{grid-template-columns:1fr}.private-room-action{align-items:flex-start;flex-direction:column}.private-room-action .primary-btn{width:100%}.private-room-join{grid-template-columns:1fr}.private-room-join .outline-btn{height:44px}.ranked-profile-chip{width:100%}.rating-reveal{flex-wrap:wrap}.challenge-result-grid{grid-template-columns:1fr 1fr}.challenge-result-grid>div:nth-child(2){border-right:0}.challenge-result-grid>div:nth-child(-n+2){border-bottom:1px solid var(--line)}.challenge-word-viewport{padding:18px 14px}.challenge-word-stream{font-size:22px}.challenge-input-wrap{margin:0 14px}.challenge-actions{flex-direction:column}.analytics-grid{grid-template-columns:1fr}.analytics-card.wide{grid-column:auto}.v6-ranking-list>div{grid-template-columns:32px 1fr auto}.v6-ranking-list small{display:none}.v6-invite-banner,.duel-invite-strip{align-items:flex-start;flex-direction:column}.v6-invite-list,.duel-invite-strip>div:last-child{justify-content:flex-start}.v6-admin-season{grid-template-columns:1fr}.v6-admin-season form{flex-direction:column}}
.profile-ranked-v6{margin-top:20px;padding:24px}.profile-ranked-grid{display:grid;grid-template-columns:1.8fr repeat(4,1fr);border:1px solid var(--line);border-radius:15px;overflow:hidden}.profile-ranked-grid>div{min-height:86px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-right:1px solid var(--line);background:var(--surface-2)}.profile-ranked-grid>div:last-child{border-right:0}.profile-ranked-grid strong{font-size:21px}.profile-ranked-grid small{font-size:11.5px;color:var(--muted);margin-top:3px}.profile-rank-main{flex-direction:row!important;justify-content:flex-start!important;gap:13px;padding:14px 18px}.profile-rank-main>div{display:flex;flex-direction:column;align-items:flex-start}.profile-rank-main strong{font-size:18px}.profile-rank-main b{font-size:13px;color:var(--primary);margin:2px 0}.profile-rank-main .rank-emblem{flex:0 0 46px}
@media(max-width:760px){.profile-ranked-grid{grid-template-columns:1fr 1fr}.profile-rank-main{grid-column:1/-1}.profile-ranked-grid>div{border-bottom:1px solid var(--line)}.profile-ranked-grid>div:nth-child(even){border-right:0}}
.online-dot-text{color:#11a967}.offline-dot-text{color:var(--muted)}
@media(min-width:1100px){.main-nav{gap:18px!important}.main-nav a{font-size:14px!important}}
.profile-analytics-actions{display:flex;align-items:center;gap:10px}.profile-analytics-actions>span{font-size:12.5px;color:var(--muted)}.practice-coach-summary{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:18px 20px;margin-bottom:16px}.practice-coach-summary>div>span{display:block;font-size:12px;color:var(--muted);font-weight:800;margin-bottom:8px}.practice-chip-row{display:flex;flex-wrap:wrap;gap:7px}.practice-chip-row b{padding:6px 9px;border-radius:8px;background:var(--primary-soft);color:var(--primary);font-size:13px}.practice-chip-row small{opacity:.7}.practice-arena{padding:0;overflow:hidden}.practice-arena-head{display:flex;align-items:center;justify-content:space-between;padding:16px 22px;border-bottom:1px solid var(--line);background:var(--surface-2)}.practice-arena-head>div:first-child{display:flex;gap:12px;align-items:center}.practice-arena-head small,.practice-arena-head strong{display:block}.practice-arena-head small{font-size:11px;color:var(--muted)}
@media(max-width:680px){.practice-coach-summary{grid-template-columns:1fr}.profile-analytics-actions{align-items:flex-end;flex-direction:column}}

/* V6 admin review states */
.admin-result-actions{display:flex;align-items:center;justify-content:flex-end;gap:7px;flex-wrap:wrap}
.admin-flagged-row{background:color-mix(in srgb,#ffb020 7%,var(--surface))}
.status-pill.review{background:color-mix(in srgb,#ffb020 14%,var(--surface));border-color:color-mix(in srgb,#ffb020 40%,var(--line));color:#a96800}
html[data-theme="dark"] .admin-flagged-row{background:rgba(255,176,32,.055)}
html[data-theme="dark"] .status-pill.review{color:#ffd27b;background:rgba(255,176,32,.09);border-color:rgba(255,176,32,.26)}


/* V6.4.2 — stable word flow for Daily Challenge + Personal Practice */
.challenge-word-viewport{
  scroll-behavior:auto !important;
  overscroll-behavior:contain;
  scrollbar-width:none;
}
.challenge-word-viewport::-webkit-scrollbar{display:none}
.challenge-word-stream{
  align-content:flex-start;
  transform:none !important;
}
.challenge-word{
  flex:0 0 auto;
  white-space:nowrap;
}

/* v6.6.75 — Personal Practice completion lock + result reveal */
.practice-result-card.practice-result-reveal{
  animation:keyziraPracticeResultReveal .42s cubic-bezier(.22,.8,.28,1) both;
}
@keyframes keyziraPracticeResultReveal{
  from{opacity:0;transform:translateY(18px) scale(.992)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
#practice-input:disabled{
  cursor:not-allowed;
  opacity:.72;
}
@media (prefers-reduced-motion:reduce){
  .practice-result-card.practice-result-reveal{animation:none}
}

/* ===== v6-polish.css ===== */

/* TypeFlow V6.1 — premium polish for Arena, Coach and Control Center */
:root{--v61-shadow:0 22px 55px rgba(31,39,76,.09);--v61-border:color-mix(in srgb,var(--line) 82%,var(--primary) 18%)}
.v6-page,.duel-page{max-width:1380px!important;padding-top:42px!important}
.v6-page-head,.duel-hero{padding:0 4px 10px}.v6-page-head h1,.duel-hero h1{font-size:44px!important;letter-spacing:-1.6px!important;line-height:1.05}.v6-page-head p,.duel-hero p{font-size:16.5px!important;max-width:760px}
.duel-lobby,.practice-coach-summary,.practice-arena,.duel-history,.season-panel{border:1px solid var(--v61-border)!important;box-shadow:var(--v61-shadow)!important;border-radius:22px!important}
.duel-lobby{padding:20px!important;background:linear-gradient(180deg,var(--surface),color-mix(in srgb,var(--surface-2) 62%,var(--surface)))}
.v6-duel-modes{gap:14px!important}.duel-mode-card{min-height:94px!important;padding:18px!important;border-radius:16px!important}.duel-mode-card strong{font-size:17px!important}.duel-mode-card small{font-size:13.5px!important;line-height:1.45}
.duel-private-config{padding:20px!important;border-radius:16px!important;background:var(--surface)!important}.private-room-action strong{font-size:16px}.private-room-action small{font-size:13.5px!important}.private-room-join input,.private-room-options select{height:48px!important;border-radius:11px!important;border:1px solid var(--line)!important;background:var(--surface-2)!important;padding:0 13px;font-size:15px}
.duel-rule{margin-top:4px!important;padding-top:18px!important;font-size:13.5px!important}.ranked-profile-chip{min-width:300px!important;padding:18px 20px!important;border-radius:18px!important;box-shadow:var(--v61-shadow)!important}.ranked-profile-chip strong{font-size:18px!important}.ranked-profile-chip small,.ranked-profile-chip span{font-size:13px!important}.rank-emblem{width:52px!important;height:52px!important}
.duel-meta-panels{gap:20px!important}.duel-history,.season-panel{padding:25px!important}.duel-history-row{min-height:74px!important}.season-rank-hero{padding:18px!important}.season-stat-grid div{padding:15px!important}

.practice-v6-page{max-width:1260px!important}.practice-coach-summary{padding:22px 24px!important;background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 5%,var(--surface)),var(--surface))!important}.practice-coach-summary>div>span{font-size:13.5px!important}.practice-chip-row b{font-size:14px!important;padding:8px 11px!important;border-radius:10px!important}.practice-arena{background:var(--surface);overflow:hidden}.practice-arena-head{padding:20px 26px!important}.practice-arena-head strong{font-size:15px!important}.practice-arena-head small{font-size:13px!important}.practice-arena .challenge-word-viewport{height:270px!important;padding:26px 28px!important}.practice-arena .challenge-word-stream{font-size:29px!important;line-height:1.62!important;gap:9px 15px!important}.practice-arena .challenge-input-wrap{margin:0 26px 18px!important;box-shadow:0 8px 24px rgba(70,63,180,.06)!important}.practice-arena .challenge-input-wrap input{font-size:18px!important}.practice-arena .challenge-live-stats>div{min-height:84px!important}.practice-arena .challenge-live-stats small{font-size:13px!important}.practice-arena .challenge-live-stats strong{font-size:24px!important}.practice-arena .challenge-actions{padding:20px!important}.practice-arena .primary-btn{min-width:260px;height:50px!important;font-size:15px!important}

/* Control Center */
.site-main:has(.admin-pro-shell){padding-top:0}.admin-pro-shell{max-width:1540px;margin:26px auto 70px;display:grid;grid-template-columns:250px minmax(0,1fr);gap:22px;padding:0 24px}.admin-pro-sidebar{position:sticky;top:92px;align-self:start;min-height:650px;padding:20px 14px;border:1px solid var(--v61-border);border-radius:20px;background:var(--surface);box-shadow:var(--v61-shadow)}.admin-pro-brand{display:flex;align-items:center;gap:11px;padding:7px 9px 20px;border-bottom:1px solid var(--line)}.admin-pro-brand>span{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:linear-gradient(135deg,var(--primary),#8b50ef);color:#fff;font-weight:900}.admin-pro-brand strong,.admin-pro-brand small{display:block}.admin-pro-brand strong{font-size:15px}.admin-pro-brand small{font-size:11.5px;color:var(--muted);margin-top:2px}.admin-pro-sidebar nav{display:grid;gap:4px;margin-top:16px}.admin-pro-sidebar nav a{padding:11px 12px;border-radius:10px;color:var(--muted);font-size:13.5px;font-weight:720}.admin-pro-sidebar nav a:hover,.admin-pro-sidebar nav a.active{color:var(--primary);background:var(--primary-soft)}.admin-back{display:block;margin:20px 10px 0;padding-top:16px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.admin-pro-main{min-width:0}.admin-pro-header{min-height:150px;display:flex;align-items:center;justify-content:space-between;gap:25px;padding:25px 28px;margin-bottom:16px;border-radius:20px;background:linear-gradient(115deg,color-mix(in srgb,var(--primary) 8%,var(--surface)),var(--surface) 60%,color-mix(in srgb,#47c88d 5%,var(--surface)));border:1px solid var(--v61-border);box-shadow:var(--v61-shadow)}.admin-pro-header h1{font-size:38px;margin:4px 0 5px;letter-spacing:-1.2px}.admin-pro-header p{font-size:15px;color:var(--muted);margin:0}.admin-health{display:flex;align-items:center;gap:10px;padding:12px 15px;border:1px solid var(--line);border-radius:13px;background:var(--surface)}.health-dot{width:10px;height:10px;border-radius:50%;background:#1dc879;box-shadow:0 0 0 5px rgba(29,200,121,.12)}.admin-health strong,.admin-health small{display:block}.admin-health strong{font-size:13px}.admin-health small{font-size:11.5px;color:var(--muted)}
.admin-pro-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:16px}.admin-pro-stats article{display:flex;align-items:center;gap:12px;padding:17px 18px;border:1px solid var(--line);border-radius:15px;background:var(--surface);box-shadow:0 12px 30px rgba(31,39,76,.045)}.admin-pro-stats article>span{width:39px;height:39px;display:grid;place-items:center;border-radius:11px;background:var(--primary-soft);font-size:17px}.admin-pro-stats small,.admin-pro-stats strong{display:block}.admin-pro-stats small{font-size:12px;color:var(--muted)}.admin-pro-stats strong{font-size:24px;letter-spacing:-.5px;margin-top:1px}
.admin-pro-card{margin-bottom:16px;padding:24px;border:1px solid var(--v61-border);border-radius:19px;background:var(--surface);box-shadow:var(--v61-shadow)}.admin-pro-section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:20px}.admin-pro-section-head h2{font-size:21px;margin:3px 0 4px}.admin-pro-section-head p{font-size:13.5px;color:var(--muted);margin:0}.admin-badge{padding:6px 9px;border-radius:999px;background:var(--primary-soft);color:var(--primary);font-size:11.5px;font-weight:800}.admin-pro-two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.admin-pro-form{display:grid;grid-template-columns:1fr 1fr;gap:13px}.admin-pro-form label{display:flex;flex-direction:column;gap:7px;color:var(--muted);font-size:12.5px;font-weight:760}.admin-pro-form label small{font-weight:500;color:var(--faint)}.admin-pro-form .full{grid-column:1/-1}.admin-pro-form input,.admin-pro-form select,.admin-pro-form textarea,.editor-card input,.editor-card select,.editor-card textarea{width:100%;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);color:var(--text);font:inherit;font-size:14px;padding:0 12px;outline:none}.admin-pro-form input,.admin-pro-form select,.editor-card input,.editor-card select{height:43px}.admin-pro-form textarea,.editor-card textarea{padding:11px 12px;resize:vertical;line-height:1.55}.admin-pro-form input:focus,.admin-pro-form select:focus,.admin-pro-form textarea:focus,.editor-card input:focus,.editor-card textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}.admin-pro-form .primary-btn{justify-self:start;min-width:170px}.compact-grid{grid-template-columns:repeat(2,1fr)}
.admin-seo-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:20px}.seo-preview{align-self:start;padding:20px;border:1px solid var(--line);border-radius:15px;background:var(--surface-2)}.seo-preview>span{font-size:10.5px;font-weight:900;color:var(--muted);letter-spacing:.1em}.seo-preview strong{display:block;color:#2b63c8;font-size:19px;font-weight:500;margin:14px 0 6px}.seo-preview p{font-size:13.5px;line-height:1.55;color:var(--muted)}.seo-preview small{color:#25833f}.admin-override-list{display:grid;gap:8px;margin-top:20px}.admin-override-list article{display:grid;grid-template-columns:1fr auto;gap:14px;padding:13px 14px;border:1px solid var(--line);border-radius:11px;background:var(--surface-2)}.admin-override-list b{font-size:13.5px}.admin-override-list span{margin-left:8px;padding:2px 5px;border-radius:5px;background:var(--primary-soft);color:var(--primary);font-size:10px}.admin-override-list small{display:block;color:var(--muted);font-size:12px;margin-top:4px}.admin-override-list p{margin:3px 0 0;color:var(--faint);font-size:11.5px}
.admin-blog-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:20px}.admin-blog-list{border:1px solid var(--line);border-radius:15px;overflow:hidden;background:var(--surface-2)}.admin-list-head{display:flex;justify-content:space-between;padding:13px 15px;border-bottom:1px solid var(--line);background:var(--surface)}.admin-list-head span{font-size:12px;color:var(--muted)}.admin-blog-list article{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:13px 14px;border-bottom:1px solid var(--line)}.admin-blog-list article:last-child{border-bottom:0}.admin-blog-list article strong,.admin-blog-list article small,.admin-blog-list article span{display:block}.admin-blog-list article strong{font-size:13.5px}.admin-blog-list article small{font-size:11.5px;color:var(--muted);margin:2px 0}.admin-blog-list article>div:nth-child(2)>span{font-size:10.5px;color:var(--faint)}.blog-status{padding:5px 7px;border-radius:7px;font-size:9.5px!important;font-weight:900}.blog-status.published{background:#e5faef;color:#0b9857}.blog-status.draft{background:#fff3d8;color:#9a6a00}.admin-row-actions{display:flex;gap:6px;align-items:center}.admin-row-actions form{margin:0}.admin-empty{padding:25px;text-align:center;color:var(--muted);font-size:13px}.admin-empty.good{color:#12985e}.admin-mini-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:15px}.admin-mini-list span{padding:6px 8px;border-radius:7px;background:var(--surface-2);font-size:11px}.admin-mini-list b{color:var(--primary)}
.admin-pro-table-wrap{overflow:auto;border:1px solid var(--line);border-radius:13px}.admin-pro-table-wrap table{width:100%;min-width:900px;border-collapse:collapse;font-size:13px}.admin-pro-table-wrap th{padding:11px 12px;text-align:left;background:var(--surface-2);color:var(--muted);font-size:10.5px;text-transform:uppercase;letter-spacing:.05em}.admin-pro-table-wrap td{padding:12px;border-top:1px solid var(--line)}.security-list{display:grid;gap:8px}.security-list article{display:grid;grid-template-columns:auto 1fr auto;gap:11px;align-items:center;padding:11px;border:1px solid var(--line);border-radius:10px}.security-list strong,.security-list small{display:block}.security-list strong{font-size:13px}.security-list small{font-size:11.5px;color:var(--muted);margin-top:2px}

/* Blog */
.blog-page,.article-page,.editor-page{max-width:1180px;padding-top:46px}.blog-hero,.article-hero,.editor-head{padding:10px 4px 30px}.blog-hero h1,.article-hero h1,.editor-head h1{font-size:44px;letter-spacing:-1.6px;margin:7px 0 8px}.blog-hero p,.article-hero p,.editor-head p{font-size:16px;color:var(--muted);max-width:760px}.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.blog-card{min-height:235px;padding:22px;border-radius:18px;display:flex;flex-direction:column}.blog-card>span{font-size:11px;color:var(--primary);font-weight:800}.blog-card h2{font-size:21px;line-height:1.25;margin:12px 0 8px}.blog-card h2 a{color:var(--text)}.blog-card p{font-size:14px;line-height:1.6;color:var(--muted);flex:1}.blog-read{color:var(--primary);font-weight:800;font-size:13px}.blog-empty{grid-column:1/-1;padding:35px}.article-hero>a{font-size:13px;color:var(--primary)}.article-hero small{color:var(--faint)}.article-body{padding:38px 44px;border-radius:20px}.article-body p{font-size:17px;line-height:1.85;color:var(--text);margin:0 0 22px}.editor-head{display:flex;justify-content:space-between;align-items:flex-end}.editor-card{padding:28px;border-radius:20px}.editor-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.editor-grid label{display:flex;flex-direction:column;gap:7px;font-size:13px;color:var(--muted);font-weight:760}.editor-grid .full{grid-column:1/-1}.editor-actions{display:flex;gap:10px;margin-top:20px}
html[data-theme="dark"] .blog-status.published{background:#113626;color:#56da95}html[data-theme="dark"] .blog-status.draft{background:#382d13;color:#f0c967}
@media(max-width:1100px){.admin-pro-shell{grid-template-columns:1fr}.admin-pro-sidebar{position:relative;top:0;min-height:0}.admin-pro-sidebar nav{display:flex;overflow:auto}.admin-pro-sidebar nav a{white-space:nowrap}.admin-pro-stats{grid-template-columns:repeat(3,1fr)}.admin-seo-grid,.admin-blog-grid,.admin-pro-two-col{grid-template-columns:1fr}.blog-grid{grid-template-columns:1fr 1fr}}
@media(max-width:720px){.v6-page-head h1,.duel-hero h1{font-size:34px!important}.practice-arena .challenge-word-stream{font-size:24px!important}.admin-pro-shell{padding:0 12px;margin-top:16px}.admin-pro-header{align-items:flex-start;flex-direction:column;padding:20px}.admin-pro-header h1{font-size:31px}.admin-pro-stats{grid-template-columns:1fr 1fr}.admin-pro-card{padding:18px}.admin-pro-form,.compact-grid,.editor-grid{grid-template-columns:1fr}.admin-pro-form .full,.editor-grid .full{grid-column:auto}.blog-grid{grid-template-columns:1fr}.blog-hero h1,.article-hero h1,.editor-head h1{font-size:34px}.article-body{padding:24px 20px}.editor-head{align-items:flex-start;flex-direction:column;gap:12px}}

/* ===== v6.2-content.css ===== */

/* TypeFlow V6.2 — true platform homepage + SEO category/tool URLs */
.landing-home{max-width:1440px;margin:0 auto;padding:42px 32px 70px;color:var(--text)}
.landing-hero{position:relative;display:grid;grid-template-columns:minmax(0,1.04fr) minmax(470px,.96fr);gap:68px;align-items:center;min-height:570px;padding:45px 22px 70px}
.landing-hero:before{content:"";position:absolute;left:-18vw;top:-120px;width:680px;height:680px;background:radial-gradient(circle,rgba(105,78,255,.12),rgba(105,78,255,0) 68%);pointer-events:none}
.landing-eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:850;letter-spacing:.12em;color:var(--primary);text-transform:uppercase}.landing-eyebrow i{width:20px;height:2px;border-radius:9px;background:linear-gradient(90deg,var(--primary),var(--primary-2))}
.landing-hero h1{max-width:780px;margin:17px 0 18px;font-size:clamp(52px,5vw,76px);line-height:.98;letter-spacing:-3.8px;font-weight:900;color:var(--text)}
.landing-hero-copy>p{max-width:690px;margin:0;font-size:19px;line-height:1.72;color:var(--muted)}
.landing-actions{display:flex;gap:13px;flex-wrap:wrap;margin-top:31px}.landing-btn{min-height:54px;padding:0 22px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;gap:11px;font-size:15.5px;font-weight:800;text-decoration:none;transition:.18s transform,.18s box-shadow,.18s border-color}.landing-btn:hover{transform:translateY(-2px)}.landing-btn.primary{color:#fff;background:linear-gradient(110deg,#5558f4,#7b4df0 55%,#9b48e8);box-shadow:0 16px 34px rgba(94,74,239,.25)}.landing-btn.secondary{color:var(--text);border:1px solid var(--line-strong);background:var(--surface);box-shadow:0 8px 22px rgba(30,38,75,.05)}
.landing-trust{display:flex;gap:0;margin-top:40px}.landing-trust>div{min-width:150px;padding:0 26px;border-left:1px solid var(--line)}.landing-trust>div:first-child{padding-left:0;border-left:0}.landing-trust strong{display:block;font-size:21px;font-weight:850}.landing-trust span{display:block;margin-top:4px;color:var(--muted);font-size:13.5px}
.landing-hero-visual{position:relative;min-height:470px;display:grid;place-items:center}.visual-glow{position:absolute;border-radius:50%;filter:blur(10px);pointer-events:none}.visual-glow.one{width:320px;height:320px;background:rgba(87,83,245,.17);top:48px;left:70px}.visual-glow.two{width:250px;height:250px;background:rgba(159,67,232,.11);bottom:25px;right:35px}
.hero-score-card{position:relative;z-index:2;width:min(100%,510px);min-height:330px;padding:26px 28px;border:1px solid color-mix(in srgb,var(--primary) 23%,var(--line));border-radius:25px;background:linear-gradient(150deg,color-mix(in srgb,var(--surface) 94%,#6e5cf3 6%),var(--surface));box-shadow:0 32px 80px rgba(30,37,77,.14);transform:rotate(-1.2deg)}.hero-score-top{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:12px;font-weight:800;letter-spacing:.08em}.hero-score-top b{margin-left:auto;color:var(--primary);font-size:13px}.live-dot{width:8px;height:8px;border-radius:50%;background:#30c879;box-shadow:0 0 0 5px rgba(48,200,121,.12)}.hero-score-value{display:flex;align-items:end;gap:10px;margin:27px 0 19px}.hero-score-value strong{font-size:78px;line-height:.86;letter-spacing:-5px}.hero-score-value span{padding-bottom:9px;color:var(--primary);font-size:18px;font-weight:820}.hero-chart{height:104px;display:flex;align-items:end;gap:9px;padding:10px 8px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--primary) 3%,transparent))}.hero-chart i{flex:1;min-width:8px;border-radius:8px 8px 2px 2px;background:linear-gradient(180deg,#9b63f5,#5b60f2);opacity:.82}.hero-score-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px}.hero-score-meta span{color:var(--muted);font-size:12.5px}.hero-score-meta b{display:block;color:var(--text);font-size:15px;margin-bottom:2px}
.hero-duel-mini,.hero-rank-mini{position:absolute;z-index:3;display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px solid var(--line);border-radius:15px;background:color-mix(in srgb,var(--surface) 94%,transparent);box-shadow:0 18px 42px rgba(30,37,77,.12);backdrop-filter:blur(12px)}.hero-duel-mini{left:5px;bottom:42px}.hero-rank-mini{right:0;top:40px}.hero-duel-mini>span,.hero-rank-mini>span{width:38px;height:38px;display:grid;place-items:center;border-radius:11px;background:var(--primary-soft);color:var(--primary);font-size:18px}.hero-duel-mini small,.hero-rank-mini small{display:block;color:var(--muted);font-size:10.5px;font-weight:750}.hero-duel-mini strong,.hero-rank-mini strong{display:block;margin-top:2px;font-size:13.5px}.hero-duel-mini>b,.hero-rank-mini>b{margin-left:9px;color:var(--primary)}
.landing-progress-strip{display:grid;grid-template-columns:auto minmax(220px,1fr) auto;align-items:center;gap:25px;margin:0 22px 28px;padding:16px 19px;border:1px solid var(--line);border-radius:16px;background:var(--surface);box-shadow:0 10px 32px rgba(30,38,74,.055)}.landing-progress-strip>div:first-child{display:flex;align-items:center;gap:10px}.landing-progress-strip small{color:var(--muted)}.lp-level{padding:7px 9px;border-radius:9px;background:var(--primary-soft);color:var(--primary);font-weight:850;font-size:12px}.lp-track{height:8px;border-radius:10px;background:var(--surface-3);overflow:hidden}.lp-track span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--primary),var(--primary-2))}.lp-badges{display:flex;align-items:center;gap:15px;font-size:13px}.lp-badges a{color:var(--primary);font-weight:800;text-decoration:none}
.landing-section{padding:70px 22px}.landing-section-head{max-width:720px;margin-bottom:28px}.landing-section-head.row{max-width:none;display:flex;justify-content:space-between;align-items:end}.landing-section-head.row>a{color:var(--primary);font-weight:800;text-decoration:none}.landing-section h2{margin:12px 0 9px;font-size:38px;line-height:1.1;letter-spacing:-1.5px}.landing-section-head p,.competitive-copy>p{font-size:16.5px;line-height:1.7;color:var(--muted)}
.tool-card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px}.tool-card{min-height:275px;padding:25px;border:1px solid var(--line);border-radius:20px;background:var(--surface);color:var(--text);text-decoration:none;box-shadow:0 13px 34px rgba(30,38,74,.045);transition:.18s transform,.18s box-shadow,.18s border-color;display:flex;flex-direction:column}.tool-card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--primary) 35%,var(--line));box-shadow:0 22px 50px rgba(30,38,74,.09)}.tool-card.featured{background:linear-gradient(145deg,color-mix(in srgb,var(--primary) 6%,var(--surface)),var(--surface))}.tool-icon{width:49px;height:49px;border-radius:14px;display:grid;place-items:center;font-size:21px;margin-bottom:22px}.tool-icon.keyboard{background:#eeebff;color:#6656f3}.tool-icon.duel{background:#fff0e8;color:#ef7a3a}.tool-icon.practice{background:#e8f8ef;color:#2daf69}.tool-icon.challenge{background:#fff7dc;color:#d69b19}.tool-icon.leaderboard{background:#edf4ff;color:#3a7ade}.tool-icon.analytics{background:#f5eaff;color:#9c4ce2}.tool-tag{font-size:10.5px;font-weight:850;letter-spacing:.1em;color:var(--muted)}.tool-card h3{margin:10px 0 8px;font-size:21px}.tool-card p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.65}.tool-card footer{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:24px;color:var(--primary);font-size:13.5px}.tool-card footer b{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--primary-soft)}
.competitive-section{display:grid;grid-template-columns:minmax(0,.9fr) minmax(440px,1.1fr);gap:70px;align-items:center;margin:25px 22px 10px;padding:64px;border:1px solid var(--line);border-radius:28px;background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 5%,var(--surface)),var(--surface));box-shadow:0 24px 60px rgba(30,38,74,.07)}.competitive-copy h2{font-size:42px;margin:13px 0 14px;letter-spacing:-1.8px;line-height:1.08}.competitive-actions{display:flex;gap:12px;margin-top:26px}.competitive-actions a{padding:11px 14px;border-radius:10px;background:var(--surface);border:1px solid var(--line);color:var(--text);font-size:13px;font-weight:800;text-decoration:none}.leader-preview-card{border:1px solid var(--line);border-radius:18px;background:var(--surface);box-shadow:0 16px 42px rgba(30,38,74,.08);overflow:hidden}.leader-preview-card header{display:flex;align-items:center;justify-content:space-between;padding:19px 20px;border-bottom:1px solid var(--line)}.leader-preview-card header small{display:block;color:var(--primary);font-size:10px;font-weight:850;letter-spacing:.09em}.leader-preview-card header strong{font-size:17px}.leader-preview-card header a{color:var(--primary);font-size:12.5px;font-weight:800;text-decoration:none}.leader-preview-card ol{list-style:none;padding:7px 20px 13px;margin:0}.leader-preview-card li{display:grid;grid-template-columns:28px 38px 1fr auto;align-items:center;gap:10px;min-height:57px;border-bottom:1px solid var(--line)}.leader-preview-card li:last-child{border-bottom:0}.leader-pos{font-size:12px;font-weight:850;text-align:center}.leader-pos.podium{color:#d79613}.leader-avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#323b63,var(--primary));color:#fff;font-weight:850}.leader-preview-card li strong{display:block;font-size:13.5px}.leader-preview-card li small{display:block;margin-top:2px;color:var(--muted);font-size:11px}.leader-preview-card li>b{font-size:13px}.landing-empty{grid-template-columns:1fr!important;color:var(--muted)}
.landing-blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.landing-blog-grid>a{min-height:210px;padding:23px;border:1px solid var(--line);border-radius:18px;background:var(--surface);color:var(--text);text-decoration:none}.landing-blog-grid span{color:var(--primary);font-size:10px;font-weight:850;letter-spacing:.08em}.landing-blog-grid h3{font-size:19px;line-height:1.3;margin:11px 0}.landing-blog-grid p{color:var(--muted);font-size:13.5px;line-height:1.55;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.landing-blog-grid b{display:block;margin-top:17px;color:var(--primary);font-size:12.5px}
.landing-final-cta{display:flex;align-items:center;justify-content:space-between;gap:30px;margin:35px 22px 10px;padding:46px 50px;border-radius:25px;color:#fff;background:linear-gradient(115deg,#171840,#32206f 55%,#4d2292);box-shadow:0 24px 60px rgba(35,25,103,.2)}.landing-final-cta .landing-eyebrow{color:#b9afff}.landing-final-cta h2{margin:10px 0 8px;font-size:34px}.landing-final-cta p{max-width:720px;margin:0;color:rgba(255,255,255,.72);line-height:1.6}.landing-final-cta .landing-btn.primary{box-shadow:none}
.tool-breadcrumb{max-width:1380px;margin:4px auto -3px;padding:0 12px;display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px}.tool-breadcrumb a{color:var(--primary);font-weight:750;text-decoration:none}.tool-breadcrumb strong{color:var(--muted);font-weight:700}
.admin-route-manager{margin-top:28px;padding-top:26px;border-top:1px solid var(--line)}.admin-pro-section-head.compact{margin-bottom:15px}.admin-pro-section-head.compact h3{margin:5px 0 3px;font-size:18px}.route-setting-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.route-setting-card{padding:14px;border:1px solid var(--line);border-radius:13px;background:var(--surface-2)}.route-setting-card>div{display:flex;align-items:center;gap:8px;margin-bottom:10px}.route-setting-card>div>span{padding:3px 6px;border-radius:6px;background:var(--primary-soft);color:var(--primary);font-size:10px;font-weight:850}.route-setting-card>div>strong{font-size:12px}.route-setting-card label{display:block;font-size:11px;font-weight:750;color:var(--muted)}.route-setting-card input{width:100%;height:38px;margin-top:5px;padding:0 9px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--text);font-size:12px}.route-setting-card small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:8px 0;color:var(--muted);font-size:10.5px}.route-setting-card .tiny-btn{width:100%}
html[data-theme="dark"] .hero-score-card,html[data-theme="dark"] .tool-card,html[data-theme="dark"] .leader-preview-card,html[data-theme="dark"] .landing-blog-grid>a{box-shadow:0 20px 50px rgba(0,0,0,.18)}html[data-theme="dark"] .tool-icon.keyboard{background:#25224c}html[data-theme="dark"] .tool-icon.duel{background:#40281f}html[data-theme="dark"] .tool-icon.practice{background:#153428}html[data-theme="dark"] .tool-icon.challenge{background:#3d341b}html[data-theme="dark"] .tool-icon.leaderboard{background:#182d4b}html[data-theme="dark"] .tool-icon.analytics{background:#352044}
@media(max-width:1150px){.landing-hero{grid-template-columns:1fr;gap:30px}.landing-hero-copy{max-width:850px}.landing-hero-visual{min-height:430px;max-width:650px;width:100%;margin:auto}.tool-card-grid{grid-template-columns:repeat(2,1fr)}.competitive-section{grid-template-columns:1fr;gap:35px}.route-setting-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.landing-home{padding:24px 13px 45px}.landing-hero{padding:28px 4px 45px;min-height:0}.landing-hero h1{font-size:43px;letter-spacing:-2.1px}.landing-hero-copy>p{font-size:16px}.landing-trust{display:grid;grid-template-columns:repeat(3,1fr)}.landing-trust>div{min-width:0;padding:0 10px}.landing-trust strong{font-size:17px}.landing-trust span{font-size:11px}.landing-hero-visual{min-height:385px}.hero-score-card{padding:22px 19px;min-height:305px}.hero-score-value strong{font-size:64px}.hero-duel-mini{left:-2px;bottom:22px}.hero-rank-mini{right:-2px;top:26px}.landing-progress-strip{grid-template-columns:1fr;margin-inline:4px}.lp-badges{flex-wrap:wrap}.landing-section{padding:45px 4px}.landing-section h2{font-size:31px}.tool-card-grid,.landing-blog-grid{grid-template-columns:1fr}.tool-card{min-height:235px}.competitive-section{margin-inline:4px;padding:30px 20px}.competitive-copy h2{font-size:32px}.landing-final-cta{margin-inline:4px;padding:32px 23px;align-items:flex-start;flex-direction:column}.landing-final-cta h2{font-size:28px}.route-setting-grid{grid-template-columns:1fr}}

/* V6.2.3 — zoom-balanced desktop layout
   Goal:
   - 100% zoom on common 1600–1920px screens stays compact/professional.
   - Zoomed-out / ultrawide viewports can use extra horizontal room.
   - Typography does NOT scale up just because the viewport is wider. */

/* Standard laptop / desktop. */
@media (min-width:1200px) and (max-width:1599px){
  .typing-tool-page{
    width:calc(100% - 56px);
    max-width:1320px!important;
  }
  .typing-tool-page .premium-grid{
    grid-template-columns:minmax(0,1fr) 320px;
    gap:22px;
  }
  .site-header .header-inner{max-width:1320px;}
}

/* Typical 1600–1920 physical desktop at 100% zoom.
   Keep the product comfortably centered instead of filling the monitor. */
@media (min-width:1600px) and (max-width:1999px){
  .typing-tool-page{
    width:calc(100% - 120px);
    max-width:1440px!important;
    padding-left:20px;
    padding-right:20px;
  }
  .typing-tool-page .premium-grid{
    grid-template-columns:minmax(0,1fr) 330px;
    gap:24px;
  }
  .typing-tool-page .premium-hero{
    padding-left:8px;
    padding-right:8px;
  }
  .typing-tool-page .hero-proof{
    min-width:500px;
    gap:30px;
  }
  .typing-tool-page .premium-workspace .word-stream{
    font-size:26px!important;
    line-height:1.58!important;
  }
  .site-header .header-inner{max-width:1440px;}
}

/* Zoomed-out browser or genuine ultrawide CSS viewport.
   Expand the canvas, but keep control and word typography stable. */
@media (min-width:2000px) and (max-width:2399px){
  .typing-tool-page{
    width:calc(100% - 96px);
    max-width:1860px!important;
    padding-left:24px;
    padding-right:24px;
  }
  .typing-tool-page .premium-grid{
    grid-template-columns:minmax(0,1fr) 380px;
    gap:30px;
  }
  .typing-tool-page .premium-hero{
    padding-left:10px;
    padding-right:10px;
  }
  .typing-tool-page .hero-proof{
    min-width:560px;
    gap:38px;
  }
  .typing-tool-page .premium-workspace .word-stream{
    font-size:26px!important;
    line-height:1.58!important;
    gap:8px 13px;
  }
  .typing-tool-page .premium-content-tabs{gap:34px;}
  .site-header .header-inner{max-width:1860px;}
}

/* Very large ultrawide only. */
@media (min-width:2400px){
  .typing-tool-page{
    width:calc(100% - 120px);
    max-width:1980px!important;
  }
  .typing-tool-page .premium-grid{
    grid-template-columns:minmax(0,1fr) 400px;
    gap:32px;
  }
  .typing-tool-page .premium-workspace .word-stream{
    font-size:27px!important;
    line-height:1.58!important;
  }
  .site-header .header-inner{max-width:1980px;}
}


/* V6.2.4 summary card readability pass */
.premium-summary-grid{
  gap:20px;
  margin-top:28px;
}
.premium-summary-grid .summary-card{
  min-height:128px;
  padding:22px 22px;
  border-radius:18px;
  align-items:stretch;
}
.premium-summary-grid .summary-card > div{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
  flex:1 1 auto;
}
.premium-summary-grid .summary-card .summary-label,
.premium-summary-grid .summary-card > div > span:not(.premium-diamond){
  font-size:15px !important;
  font-weight:800;
  line-height:1.35;
  letter-spacing:-0.01em;
}
.premium-summary-grid .summary-card strong{
  font-size:31px !important;
  line-height:1.08;
  letter-spacing:-0.03em;
  margin-top:6px;
}
.premium-summary-grid .summary-card small{
  display:block;
  margin-top:8px;
  margin-bottom:0;
  font-size:14px !important;
  line-height:1.55;
  color:var(--muted);
  opacity:1;
}
.premium-summary-grid .summary-card a{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:12px;
  font-size:14px !important;
  line-height:1.45;
  font-weight:780;
}
.premium-summary-grid .summary-card .circle-ico{
  width:50px;
  height:50px;
  font-size:22px;
}
.premium-summary-grid .result-card,
.premium-summary-grid .best-card,
.premium-summary-grid .rank-card{
  justify-content:space-between;
}
.premium-summary-grid .result-card .sparkline{
  margin-left:16px;
  width:84px;
  height:44px;
}
.premium-summary-grid .progress-card{
  align-items:center;
}
.premium-summary-grid .premium-card{
  padding:22px 22px 20px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}
.premium-summary-grid .premium-card > div{
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.premium-summary-grid .premium-card .premium-diamond{
  font-size:14px !important;
  margin-bottom:8px;
  color:#ffcc67 !important;
}
.premium-summary-grid .premium-card > div > span:last-of-type{
  font-size:17px !important;
  font-weight:820;
  line-height:1.25;
  color:#fff;
}
.premium-summary-grid .premium-card small{
  font-size:14px !important;
  line-height:1.55;
  color:rgba(255,255,255,.84) !important;
  max-width:340px;
}
.premium-summary-grid .premium-card .premium-arrow{
  position:static;
  width:42px;
  height:42px;
  flex:0 0 auto;
  align-self:flex-end;
  display:grid;
  place-items:center;
  font-size:19px !important;
}
html[data-theme="dark"] .premium-summary-grid .summary-card small{
  color:rgba(229,233,255,.72);
}
html[data-theme="dark"] .premium-summary-grid .summary-card a{
  color:#9c90ff;
}
html[data-theme="dark"] .premium-summary-grid .summary-card{
  border-color:rgba(126,111,255,.18);
}
@media (max-width:1240px){
  .premium-summary-grid .summary-card{
    min-height:122px;
    padding:20px 19px;
  }
  .premium-summary-grid .summary-card strong{
    font-size:29px !important;
  }
}
@media (max-width:720px){
  .premium-summary-grid{
    gap:16px;
    margin-top:22px;
  }
  .premium-summary-grid .summary-card{
    min-height:auto;
    padding:18px 17px;
  }
  .premium-summary-grid .summary-card .summary-label,
  .premium-summary-grid .summary-card > div > span:not(.premium-diamond){
    font-size:14px !important;
  }
  .premium-summary-grid .summary-card strong{
    font-size:28px !important;
  }
  .premium-summary-grid .summary-card small,
  .premium-summary-grid .summary-card a,
  .premium-summary-grid .premium-card small{
    font-size:13.5px !important;
  }
}

/* ===== admin-control-center.css ===== */

/* TypeFlow V6.2.7 — dedicated Admin Control Center layout
   Public product navigation is intentionally removed in admin mode. */

body.admin-mode{
  background:var(--bg);
  min-height:100vh;
}
body.admin-mode .site-header,
body.admin-mode .footer{
  display:none!important;
}
body.admin-mode .site-main{
  min-height:100vh;
  overflow:visible!important;
  position:relative;
}
body.admin-mode .site-main::before{
  display:none!important;
}
body.admin-mode .admin-pro-shell{
  width:min(1720px,calc(100% - 48px));
  max-width:none!important;
  margin:0 auto;
  padding:28px 0 64px;
  grid-template-columns:272px minmax(0,1fr);
  gap:24px;
  align-items:start;
}
body.admin-mode .admin-pro-sidebar{
  position:sticky;
  top:24px;
  min-height:calc(100vh - 48px);
  padding:20px 14px;
  border-radius:20px;
  overflow:hidden;
}
body.admin-mode .admin-pro-sidebar nav{
  max-height:calc(100vh - 190px);
  overflow:auto;
  scrollbar-width:thin;
  padding-right:2px;
}
body.admin-mode .admin-pro-sidebar nav a{
  min-height:43px;
  display:flex;
  align-items:center;
  padding:11px 12px;
  font-size:14px;
}
body.admin-mode .admin-pro-brand strong{font-size:16px}
body.admin-mode .admin-pro-brand small{font-size:12.5px}
body.admin-mode .admin-back{font-size:13.5px}
body.admin-mode .admin-pro-main{min-width:0;width:100%}
body.admin-mode .admin-pro-header{
  min-height:160px;
  padding:28px 30px;
  margin-bottom:18px;
}
body.admin-mode .admin-pro-header h1{
  font-size:clamp(34px,3vw,44px);
  line-height:1.05;
}
body.admin-mode .admin-pro-header p{font-size:15.5px;line-height:1.55}
body.admin-mode .admin-health strong{font-size:14px}
body.admin-mode .admin-health small{font-size:12.5px}

body.admin-mode .admin-pro-stats{
  grid-template-columns:repeat(5,minmax(150px,1fr));
  gap:14px;
  margin-bottom:18px;
}
body.admin-mode .admin-pro-stats article{min-height:84px;padding:17px 18px}
body.admin-mode .admin-pro-stats small{font-size:13px}
body.admin-mode .admin-pro-stats strong{font-size:27px}

body.admin-mode .admin-pro-card{
  padding:28px;
  margin-bottom:18px;
  border-radius:20px;
}
body.admin-mode .admin-pro-section-head{margin-bottom:22px}
body.admin-mode .admin-pro-section-head h2{font-size:24px;line-height:1.2}
body.admin-mode .admin-pro-section-head h3{font-size:20px!important}
body.admin-mode .admin-pro-section-head p{font-size:14.5px;line-height:1.55;max-width:850px}
body.admin-mode .admin-badge{font-size:12px;padding:7px 10px}

/* Forms: make every control readable and consistent. */
body.admin-mode .admin-pro-form{gap:15px}
body.admin-mode .admin-pro-form label{font-size:13.5px;gap:8px}
body.admin-mode .admin-pro-form label small{font-size:12px}
body.admin-mode .admin-pro-form input,
body.admin-mode .admin-pro-form select,
body.admin-mode .admin-pro-form textarea,
body.admin-mode .editor-card input,
body.admin-mode .editor-card select,
body.admin-mode .editor-card textarea{
  font-size:14.5px;
  border-radius:11px;
}
body.admin-mode .admin-pro-form input,
body.admin-mode .admin-pro-form select,
body.admin-mode .editor-card input,
body.admin-mode .editor-card select{height:46px}
body.admin-mode .admin-pro-form textarea,
body.admin-mode .editor-card textarea{padding:12px 13px;line-height:1.6}
body.admin-mode .admin-pro-form .primary-btn{height:46px;font-size:14.5px}

/* SEO editor */
body.admin-mode .admin-seo-grid{
  grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr);
  gap:22px;
  align-items:start;
}
body.admin-mode .seo-preview{padding:22px;border-radius:16px;position:sticky;top:24px}
body.admin-mode .seo-preview>span{font-size:11.5px}
body.admin-mode .seo-preview strong{font-size:20px;line-height:1.35}
body.admin-mode .seo-preview p{font-size:14px}
body.admin-mode .seo-preview small{font-size:12.5px}
body.admin-mode .admin-override-list small{font-size:12.5px}
body.admin-mode .admin-override-list p{font-size:12.5px;line-height:1.5}

/* Slug cards should never be forced into five tiny columns. */
body.admin-mode .route-setting-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr))!important;
  gap:14px!important;
}
body.admin-mode .route-setting-card{
  min-width:0;
  padding:16px!important;
  border-radius:14px!important;
}
body.admin-mode .route-setting-card>div>span{font-size:11px!important}
body.admin-mode .route-setting-card>div>strong{font-size:13.5px!important}
body.admin-mode .route-setting-card label{font-size:12.5px!important}
body.admin-mode .route-setting-card input{
  height:42px!important;
  font-size:13.5px!important;
  padding:0 11px!important;
}
body.admin-mode .route-setting-card small{
  font-size:12px!important;
  line-height:1.4;
  overflow-wrap:anywhere;
  white-space:normal!important;
  min-height:34px;
}
body.admin-mode .route-setting-card .tiny-btn{height:40px;font-size:13px}

/* Blog studio gets room instead of squeezing the editor. */
body.admin-mode .admin-blog-grid{
  grid-template-columns:minmax(430px,.9fr) minmax(440px,1.1fr);
  gap:22px;
  align-items:start;
}
body.admin-mode .admin-blog-list{border-radius:16px}
body.admin-mode .admin-list-head{padding:15px 17px}
body.admin-mode .admin-list-head strong{font-size:15px}
body.admin-mode .admin-list-head span{font-size:12.5px}
body.admin-mode .admin-blog-list article{padding:15px 16px;gap:13px}
body.admin-mode .admin-blog-list article strong{font-size:14.5px}
body.admin-mode .admin-blog-list article small{font-size:12.5px}
body.admin-mode .admin-blog-list article>div:nth-child(2)>span{font-size:11.5px}
body.admin-mode .blog-status{font-size:10.5px!important;padding:6px 8px}
body.admin-mode .admin-empty{font-size:13.5px;padding:30px}

/* Tables and security */
body.admin-mode .admin-pro-table-wrap{border-radius:14px}
body.admin-mode .admin-pro-table-wrap table{font-size:13.5px}
body.admin-mode .admin-pro-table-wrap th{font-size:11px;padding:12px 13px}
body.admin-mode .admin-pro-table-wrap td{padding:13px}
body.admin-mode .security-list strong{font-size:13.5px}
body.admin-mode .security-list small{font-size:12px}

/* Avoid width/zoom-specific product CSS affecting Control Center. */
@media (min-width:2000px){
  body.admin-mode .admin-pro-shell{width:min(1880px,calc(100% - 80px));grid-template-columns:290px minmax(0,1fr)}
}
@media (max-width:1350px){
  body.admin-mode .admin-pro-shell{width:min(1180px,calc(100% - 32px));grid-template-columns:230px minmax(0,1fr);gap:18px}
  body.admin-mode .admin-pro-stats{grid-template-columns:repeat(3,1fr)}
  body.admin-mode .admin-blog-grid{grid-template-columns:1fr}
  body.admin-mode .admin-seo-grid{grid-template-columns:1fr}
  body.admin-mode .seo-preview{position:static}
}
@media (max-width:980px){
  body.admin-mode .admin-pro-shell{display:block;width:calc(100% - 24px);padding-top:14px}
  body.admin-mode .admin-pro-sidebar{position:relative;top:0;min-height:0;margin-bottom:16px;padding:14px}
  body.admin-mode .admin-pro-sidebar nav{display:flex;overflow:auto;max-height:none;margin-top:12px;gap:6px}
  body.admin-mode .admin-pro-sidebar nav a{white-space:nowrap;min-height:40px}
  body.admin-mode .admin-back{margin-top:12px;padding-top:12px}
  body.admin-mode .admin-pro-two-col{grid-template-columns:1fr}
}
@media (max-width:720px){
  body.admin-mode .admin-pro-shell{width:calc(100% - 16px);padding-bottom:32px}
  body.admin-mode .admin-pro-header{padding:21px;min-height:0;align-items:flex-start;flex-direction:column}
  body.admin-mode .admin-pro-header h1{font-size:32px}
  body.admin-mode .admin-pro-card{padding:18px}
  body.admin-mode .admin-pro-stats{grid-template-columns:1fr 1fr;gap:10px}
  body.admin-mode .admin-pro-stats article{min-height:74px;padding:13px}
  body.admin-mode .admin-pro-form,
  body.admin-mode .compact-grid{grid-template-columns:1fr}
  body.admin-mode .admin-pro-form .full{grid-column:auto}
  body.admin-mode .route-setting-grid{grid-template-columns:1fr!important}
  body.admin-mode .admin-blog-grid{grid-template-columns:1fr}
}

/* ===== performance-section.css ===== */

/* 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%}
}

/* ===== v6.4.3-ui-fixes.css ===== */

/* TypeFlow v6.4.3 — Daily task CTA fix */

.daily-card .daily-cta,
.premium-side-card .daily-cta {
  width: calc(100% - 40px);
  min-height: 46px;
  height: 46px;
  margin: 18px 20px 12px;
  padding: 0 18px;
  box-sizing: border-box;

  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;

  border: 1px solid color-mix(in srgb, var(--primary) 58%, var(--line));
  border-radius: 11px;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--primary) 12%, var(--surface)),
    color-mix(in srgb, var(--primary) 5%, var(--surface))
  );

  color: var(--primary) !important;
  text-decoration: none !important;
  font-size: 14px !important;
  font-weight: 820;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;

  box-shadow: 0 7px 20px color-mix(in srgb, var(--primary) 10%, transparent);
  transition: transform .16s ease, background .16s ease,
              border-color .16s ease, box-shadow .16s ease;
}

.daily-card .daily-cta span,
.premium-side-card .daily-cta span {
  display: inline-grid;
  place-items: center;
  font-size: 15px;
  line-height: 1;
  text-decoration: none !important;
}

.daily-card .daily-cta:hover,
.premium-side-card .daily-cta:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--primary) 78%, var(--line));
  background: color-mix(in srgb, var(--primary) 13%, var(--surface));
  box-shadow: 0 10px 24px color-mix(in srgb, var(--primary) 16%, transparent);
}

.daily-card .daily-cta:active,
.premium-side-card .daily-cta:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 10%, transparent);
}

.daily-card .daily-cta:focus-visible,
.premium-side-card .daily-cta:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--primary) 25%, transparent);
  outline-offset: 2px;
}

html[data-theme="dark"] .daily-card .daily-cta,
html[data-theme="dark"] .premium-side-card .daily-cta {
  background: linear-gradient(
    135deg,
    rgba(116, 91, 255, .18),
    rgba(116, 91, 255, .08)
  );
  border-color: rgba(132, 112, 255, .46);
  color: #a99cff !important;
}

html[data-theme="dark"] .daily-card .daily-cta:hover,
html[data-theme="dark"] .premium-side-card .daily-cta:hover {
  background: rgba(116, 91, 255, .20);
  border-color: rgba(150, 132, 255, .68);
}

@media (max-width: 720px) {
  .daily-card .daily-cta,
  .premium-side-card .daily-cta {
    width: calc(100% - 28px);
    margin: 14px 14px 10px;
    min-height: 44px;
    height: 44px;
    font-size: 13.5px !important;
  }
}

/* ===== v6.4.4-theme-toggle.css ===== */

/* TypeFlow v6.4.4 — animated light/dark theme switch */
.theme-quick-toggle{
  position:relative;
  width:78px !important;
  height:38px !important;
  padding:0 !important;
  border:1px solid var(--line) !important;
  border-radius:12px !important;
  background:var(--surface) !important;
  color:var(--muted);
  display:grid !important;
  grid-template-columns:1fr 1fr;
  align-items:center;
  overflow:hidden;
  cursor:pointer;
  isolation:isolate;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.02);
  transition:border-color .22s ease, background-color .28s ease, box-shadow .22s ease;
}
.theme-quick-toggle:hover{
  border-color:color-mix(in srgb,var(--primary) 45%,var(--line)) !important;
  box-shadow:0 5px 16px color-mix(in srgb,var(--primary) 9%,transparent);
}
.theme-quick-toggle .theme-switch-dot{
  position:absolute;
  z-index:1;
  top:4px;
  left:4px;
  width:30px !important;
  height:30px !important;
  border-radius:10px !important;
  background:linear-gradient(135deg,#7564ff,#8457f3) !important;
  box-shadow:0 6px 16px rgba(105,82,246,.28) !important;
  transform:translateX(0) !important;
  transition:
    transform .32s cubic-bezier(.22,1,.36,1),
    background .28s ease,
    box-shadow .28s ease !important;
  will-change:transform;
  pointer-events:none;
}
.theme-quick-toggle .theme-sun,
.theme-quick-toggle .theme-moon{
  position:relative;
  z-index:2;
  width:39px;
  height:38px;
  display:grid;
  place-items:center;
  font-size:14px !important;
  line-height:1;
  transition:color .25s ease, opacity .25s ease, transform .25s ease;
  pointer-events:none;
}
/* Light theme: slider rests on the sun */
html[data-theme="light"] .theme-quick-toggle .theme-sun{
  color:#fff;
  opacity:1;
  transform:scale(1.04);
}
html[data-theme="light"] .theme-quick-toggle .theme-moon{
  color:var(--muted);
  opacity:.55;
  transform:scale(.94);
}
/* Dark theme: slider slides to the moon */
html[data-theme="dark"] .theme-quick-toggle .theme-switch-dot{
  transform:translateX(40px) !important;
  background:linear-gradient(135deg,#7668ff,#5f6dff) !important;
  box-shadow:0 6px 18px rgba(89,102,255,.34) !important;
}
html[data-theme="dark"] .theme-quick-toggle .theme-sun{
  color:var(--muted);
  opacity:.5;
  transform:scale(.94);
}
html[data-theme="dark"] .theme-quick-toggle .theme-moon{
  color:#fff;
  opacity:1;
  transform:scale(1.04);
}
.theme-quick-toggle:active .theme-switch-dot{
  width:34px !important;
}
html[data-theme="dark"] .theme-quick-toggle:active .theme-switch-dot{
  transform:translateX(36px) !important;
}
.theme-quick-toggle:focus-visible{
  outline:3px solid color-mix(in srgb,var(--primary) 28%,transparent);
  outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  .theme-quick-toggle,
  .theme-quick-toggle *{transition:none !important;}
}

/* ===== v6.5-guest.css ===== */

/* TypeFlow v6.5 — guest-first participation */
.guest-badge{display:inline-flex;align-items:center;margin-left:7px;padding:3px 7px;border-radius:999px;background:color-mix(in srgb,var(--primary) 10%,var(--surface));border:1px solid color-mix(in srgb,var(--primary) 24%,var(--line));color:var(--primary);font-size:11px!important;font-weight:800;vertical-align:middle}
.guest-mini{display:inline-grid;place-items:center;width:18px;height:18px;margin-left:4px;border-radius:50%;background:var(--primary-soft);color:var(--primary);font-size:10px;font-style:normal}
.guest-leaderboard-save{margin:18px 30px 4px;padding:18px;border:1px solid color-mix(in srgb,var(--primary) 30%,var(--line));border-radius:14px;background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 7%,var(--surface)),var(--surface));display:grid;grid-template-columns:minmax(240px,1fr) minmax(360px,1.2fr);gap:16px 24px;align-items:center}
.guest-save-copy{display:grid;gap:4px}.guest-save-copy strong{font-size:16px}.guest-save-copy small{font-size:13.5px;color:var(--muted);line-height:1.5}.guest-save-controls{display:grid;grid-template-columns:minmax(150px,1fr) 90px auto;gap:9px}.guest-save-controls input,.guest-save-controls select{height:42px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--text);padding:0 12px;font:inherit}.guest-save-controls button{min-height:42px}.guest-save-footer{grid-column:1/-1;display:flex;justify-content:space-between;gap:14px;padding-top:12px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}.guest-save-footer a,.guest-practice-note a,.guest-challenge-note a{color:var(--primary);font-weight:750}.guest-practice-note{margin-top:8px;padding:10px 12px;border-left:3px solid var(--primary);background:var(--primary-soft);border-radius:0 9px 9px 0;font-size:13.5px;color:var(--muted)}.guest-challenge-note{margin:0 24px 20px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);font-size:13.5px;color:var(--muted)}
@media(max-width:800px){.guest-leaderboard-save{margin:14px;grid-template-columns:1fr}.guest-save-controls{grid-template-columns:1fr 90px}.guest-save-controls button{grid-column:1/-1}.guest-save-footer{flex-direction:column}.guest-save-footer a{align-self:flex-start}}

/* ===== v6.5.1-verified-badge.css ===== */

/* TypeFlow v6.5.1 — registered user verification badge */
.verified-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: 6px;
  border-radius: 999px;
  background: linear-gradient(135deg, #3aa7ff 0%, #2b7cff 100%);
  color: #ffffff;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 0 0 1px rgba(255,255,255,.10), 0 6px 14px rgba(43,124,255,.25);
  vertical-align: middle;
}

.leader-name .verified-badge {
  width: 15px;
  height: 15px;
  font-size: 9px;
  margin-left: 5px;
}

.leaderboard-username + .verified-badge {
  margin-right: 8px;
}

.v6-ranking-list .verified-badge,
.leader-row .verified-badge,
.leader-name .verified-badge {
  position: relative;
  top: -1px;
}

@media (max-width: 640px) {
  .verified-badge {
    width: 15px;
    height: 15px;
    font-size: 9px;
    margin-left: 5px;
  }
}

/* ===== v6.5.5-profile-menu.css ===== */

/* TypeFlow v6.5.5 — premium account menu + account settings */

.user-menu{position:relative;display:flex;align-items:center}
.account-trigger{
  height:46px;max-width:190px;padding:4px 10px 4px 5px;
  display:flex;align-items:center;gap:9px;
  border:1px solid var(--line);border-bottom:2px solid var(--line-strong);
  border-radius:13px;background:color-mix(in srgb,var(--surface) 96%,transparent);
  color:var(--text);cursor:pointer;transition:.16s ease;
}
.account-trigger:hover,.user-menu.is-open .account-trigger{
  border-color:color-mix(in srgb,var(--primary) 45%,var(--line));
  background:color-mix(in srgb,var(--primary) 5%,var(--surface));
  box-shadow:0 9px 24px color-mix(in srgb,var(--primary) 10%,transparent);
}
.account-avatar{
  position:relative;width:36px;height:36px;flex:0 0 36px;border-radius:11px;
  display:grid;place-items:center;
  background:linear-gradient(145deg,#5b6cff,#35a8e8);
  color:#fff;font-size:15px;font-weight:900;
  box-shadow:0 8px 18px rgba(68,108,244,.25);
}
.account-verified{
  position:absolute;right:-3px;bottom:-3px;width:15px;height:15px;border-radius:50%;
  display:grid;place-items:center;background:#2488ff;color:#fff;
  border:2px solid var(--surface);font-style:normal;font-size:8px;font-weight:900;
}
.account-trigger-copy{display:flex;min-width:0;flex-direction:column;text-align:left;line-height:1.08}
.account-trigger-copy strong{max-width:96px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
.account-trigger-copy small{margin-top:4px;color:var(--muted);font-size:10.5px;font-weight:650}
.account-chevron{font-size:16px;color:var(--muted);transition:transform .16s}
.user-menu.is-open .account-chevron{transform:rotate(180deg)}

.account-dropdown{
  position:absolute;right:0;top:calc(100% + 12px);z-index:120;width:318px;
  border:1px solid var(--line);border-radius:18px;
  background:color-mix(in srgb,var(--surface) 98%,transparent);
  box-shadow:0 26px 70px rgba(15,18,45,.22);
  backdrop-filter:blur(24px);padding:10px;
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(-7px) scale(.985);transform-origin:top right;
  transition:opacity .15s,transform .15s,visibility .15s;
}
.user-menu.is-open .account-dropdown{opacity:1;visibility:visible;pointer-events:auto;transform:none}
.account-summary{display:flex;align-items:center;gap:12px;padding:11px 10px 13px}
.account-avatar-large{width:48px;height:48px;flex-basis:48px;border-radius:15px;font-size:19px}
.account-summary-copy{min-width:0;display:flex;flex-direction:column}
.account-summary-copy strong{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.account-summary-copy>span{margin-top:3px;color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.account-summary-copy small{margin-top:6px;color:var(--muted);font-size:11px}
.account-summary-copy small b{color:#3b91ff;font-weight:800}
.account-menu-section{display:grid;gap:3px}
.account-menu-divider{height:1px;background:var(--line);margin:8px 5px}
.account-menu-item{
  min-height:54px;padding:7px 9px;border-radius:11px;
  display:grid;grid-template-columns:35px minmax(0,1fr) 16px;align-items:center;gap:8px;
  color:var(--text);text-decoration:none;transition:.14s;
}
.account-menu-item:hover{background:color-mix(in srgb,var(--primary) 7%,var(--surface));color:var(--text)}
.account-menu-icon{
  width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:var(--surface-3);color:var(--primary);font-size:15px;font-weight:850;
}
.account-menu-item>span:nth-child(2){display:flex;flex-direction:column;min-width:0}
.account-menu-item b{font-size:13px}
.account-menu-item small{margin-top:3px;color:var(--muted);font-size:10.8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.account-menu-item>i{font-style:normal;color:var(--faint);font-size:18px}
.account-admin-item .account-menu-icon{background:rgba(255,169,50,.10);color:#f0a528}
.account-logout-form{margin:0}
.account-logout{
  width:100%;min-height:44px;border:0;border-radius:11px;padding:0 12px;
  display:flex;align-items:center;gap:10px;background:transparent;color:#f05462;
  font:inherit;font-size:13px;font-weight:780;cursor:pointer;
}
.account-logout:hover{background:rgba(240,84,98,.08)}
.account-logout span{font-size:17px}

/* Account settings page */
.account-settings-page{max-width:1180px;margin:0 auto;padding:42px 24px 70px;position:relative;z-index:1}
.account-settings-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:24px}
.account-settings-hero h1{margin:7px 0 6px;font-size:38px;letter-spacing:-1.2px}
.account-settings-hero p{margin:0;color:var(--muted);font-size:15px}
.account-notice{margin:0 0 18px;padding:13px 16px;border-radius:12px;font-size:13.5px;font-weight:700}
.account-notice.success{background:rgba(38,184,111,.10);border:1px solid rgba(38,184,111,.28);color:#20a263}
.account-notice.error{background:rgba(235,74,90,.09);border:1px solid rgba(235,74,90,.28);color:#df4b58}
.account-settings-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);gap:18px;align-items:start}
.account-settings-card{padding:24px;border-radius:19px}
.account-profile-card{grid-row:span 2}
.account-preferences-card{grid-column:1/-1}
.account-card-head{display:flex;gap:12px;align-items:flex-start;margin-bottom:20px}
.account-card-head h2{margin:1px 0 3px;font-size:18px}
.account-card-head p{margin:0;color:var(--muted);font-size:13px;line-height:1.5}
.account-settings-icon{width:38px;height:38px;flex:0 0 38px;border-radius:11px;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary);font-weight:900}
.account-current-user{display:flex;align-items:center;gap:13px;padding:15px;border:1px solid var(--line);border-radius:14px;background:var(--surface-2);margin-bottom:17px}
.account-avatar-xl{width:54px;height:54px;flex-basis:54px;border-radius:16px;font-size:20px}
.account-current-user>div{display:flex;flex-direction:column}
.account-current-user strong{font-size:16px}
.account-current-user span{margin-top:3px;color:var(--muted);font-size:12.5px}
.account-current-user small{margin-top:5px;color:#3b91ff;font-size:11.5px;font-weight:720}
.account-env-note,.account-security-locked{padding:13px 14px;border:1px solid color-mix(in srgb,#f2a72e 30%,var(--line));border-radius:12px;background:color-mix(in srgb,#f2a72e 7%,var(--surface));color:var(--muted);font-size:12.5px;line-height:1.55;margin-bottom:16px}
.account-security-locked{display:flex;gap:10px;align-items:flex-start}
.account-security-locked p{margin:0}
.account-form{display:grid;gap:14px}
.account-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.account-form label{display:grid;gap:7px}
.account-form label>span{font-size:12px;font-weight:780;color:var(--muted)}
.account-form input,.account-form select,.preference-row select{
  width:100%;height:45px;border:1px solid var(--line);border-radius:10px;
  background:var(--surface-2);color:var(--text);padding:0 12px;outline:none;font:inherit;font-size:13.5px;
}
.account-form input:focus,.account-form select:focus,.preference-row select:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
.account-form input[readonly]{opacity:.66;cursor:not-allowed}
.account-readonly div{height:45px;border:1px solid var(--line);border-radius:10px;background:var(--surface-3);display:flex;align-items:center;padding:0 12px;font-size:13px;color:var(--muted)}
.account-form .primary-btn{justify-self:start;margin-top:3px}
.preference-row{display:grid;grid-template-columns:220px minmax(0,1fr);gap:25px;align-items:center;padding:18px 0;border-bottom:1px solid var(--line)}
.preference-row>div:first-child{display:flex;flex-direction:column}
.preference-row strong{font-size:14px}
.preference-row small{margin-top:3px;color:var(--muted);font-size:12px}
.account-theme-options{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.account-theme-options button{
  height:42px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);color:var(--muted);
  cursor:pointer;font:inherit;font-size:12.5px;font-weight:750;transition:.14s
}
.account-theme-options button:hover,.account-theme-options button.active{border-color:var(--primary);background:var(--primary-soft);color:var(--primary)}
.preference-row select{max-width:340px}
.account-typing-settings-link{margin-top:18px;padding:14px;border:1px solid var(--line);border-radius:13px;display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:11px;color:var(--text)}
.account-typing-settings-link>span{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary)}
.account-typing-settings-link>div{display:flex;flex-direction:column}
.account-typing-settings-link strong{font-size:13.5px}
.account-typing-settings-link small{margin-top:3px;color:var(--muted);font-size:11.5px}
.account-typing-settings-link i{font-style:normal;color:var(--primary);font-size:18px}
.account-meta-list{margin:0;display:grid}
.account-meta-list>div{display:flex;justify-content:space-between;gap:20px;padding:11px 0;border-bottom:1px solid var(--line)}
.account-meta-list>div:last-child{border-bottom:0}
.account-meta-list dt{color:var(--muted);font-size:12.5px}
.account-meta-list dd{margin:0;font-size:12.5px;font-weight:780}

html[data-theme="dark"] .account-dropdown{box-shadow:0 28px 78px rgba(0,0,0,.52)}
html[data-theme="dark"] .account-trigger{background:rgba(19,18,31,.94)}

@media(max-width:1180px){
  .account-trigger-copy{display:none}.account-trigger{padding-right:6px}.account-chevron{display:none}
  .account-settings-grid{grid-template-columns:1fr}.account-profile-card{grid-row:auto}.account-preferences-card{grid-column:auto}
}
@media(max-width:720px){
  .account-dropdown{position:fixed;right:14px;top:76px;width:min(330px,calc(100vw - 28px))}
  .account-settings-page{padding:25px 14px 55px}
  .account-settings-hero{align-items:flex-start;flex-direction:column}.account-settings-hero h1{font-size:31px}
  .account-settings-card{padding:18px}
  .account-form-grid{grid-template-columns:1fr}
  .preference-row{grid-template-columns:1fr;gap:11px}
  .account-theme-options{width:100%}
}

/* ===== v6.5.6-footer.css ===== */

/* TypeFlow v6.5.6 — Admin managed responsive footer */
.typeflow-footer{position:relative;margin-top:56px;border-top:1px solid var(--line);background:color-mix(in srgb,var(--surface) 78%,var(--bg));overflow:hidden}
.typeflow-footer:before{content:"";position:absolute;inset:0 0 auto;height:220px;background:radial-gradient(circle at 20% 0,color-mix(in srgb,var(--primary) 10%,transparent),transparent 42%),radial-gradient(circle at 80% 0,color-mix(in srgb,var(--primary-2) 8%,transparent),transparent 38%);pointer-events:none}
.typeflow-footer-inner{position:relative;z-index:1;max-width:var(--home-max,var(--max));margin:0 auto;padding:34px 28px 22px}

.footer-main-grid{display:grid;grid-template-columns:minmax(270px,1.4fr) minmax(150px,.7fr) minmax(160px,.75fr) minmax(240px,1fr);gap:clamp(26px,4vw,64px);padding:6px 6px 36px}
.footer-brand{display:inline-flex;align-items:center;gap:11px;color:var(--text);font-size:20px;letter-spacing:-.4px}.footer-brand-mark{width:35px;height:32px;position:relative;display:inline-block}.footer-brand-mark i{position:absolute;left:1px;height:4px;border-radius:99px;background:linear-gradient(90deg,var(--primary),var(--primary-2))}.footer-brand-mark i:nth-child(1){width:30px;top:5px}.footer-brand-mark i:nth-child(2){width:22px;top:14px;left:5px}.footer-brand-mark i:nth-child(3){width:13px;top:23px;left:9px}
.footer-brand-column p{max-width:420px;margin:17px 0 12px;color:var(--muted);font-size:13.5px;line-height:1.75}.footer-tagline{color:var(--faint);font-size:12px;font-weight:650}
.footer-socials{display:flex;gap:8px;margin-top:20px;flex-wrap:wrap}.footer-socials a{width:37px;height:37px;border:1px solid var(--line);border-radius:10px;display:grid;place-items:center;background:var(--surface);color:var(--muted);font-size:10.5px;font-weight:900;transition:.15s}.footer-socials a:hover{transform:translateY(-2px);border-color:var(--primary);color:var(--primary);background:var(--primary-soft)}
.footer-link-column,.footer-contact-column{display:flex;flex-direction:column;align-items:flex-start}.footer-link-column>strong,.footer-contact-column>strong{margin:4px 0 17px;color:var(--text);font-size:12px;font-weight:850;letter-spacing:.02em}.footer-link-column a{margin:0 0 12px;color:var(--muted);font-size:13px;transition:.14s}.footer-link-column a:hover{color:var(--primary);transform:translateX(2px)}
.footer-email-card{width:100%;max-width:300px;min-height:62px;padding:10px;border:1px solid var(--line);border-radius:13px;background:var(--surface);display:flex;align-items:center;gap:10px;color:var(--text);transition:.15s}.footer-email-card:hover{border-color:color-mix(in srgb,var(--primary) 45%,var(--line));box-shadow:0 12px 28px color-mix(in srgb,var(--primary) 8%,transparent)}.footer-email-card>span{width:37px;height:37px;flex:0 0 37px;border-radius:10px;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary);font-size:17px;font-weight:850}.footer-email-card>div{min-width:0;display:flex;flex-direction:column}.footer-email-card small{color:var(--muted);font-size:10.5px}.footer-email-card b{margin-top:3px;max-width:210px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.footer-contact-column>p{margin:0;color:var(--muted);font-size:13px;line-height:1.65}
.footer-admin-shortcut{margin-top:12px;color:var(--primary);font-size:11.5px;font-weight:750}
.footer-bottom{min-height:60px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:18px;color:var(--faint);font-size:11.5px}.footer-bottom>div{display:flex;align-items:center;gap:16px}.footer-bottom a{color:var(--muted)}.footer-bottom a:hover{color:var(--primary)}.footer-bottom>div>span{padding:5px 8px;border:1px solid var(--line);border-radius:7px;background:var(--surface);font-size:9.5px;font-weight:850}
body.focus-test .typeflow-footer{display:none!important}

html[data-theme="dark"] .typeflow-footer{background:color-mix(in srgb,var(--surface) 48%,var(--bg))}

@media(max-width:1080px){.footer-main-grid{grid-template-columns:1.2fr .7fr .7fr}.footer-contact-column{grid-column:1/-1;display:grid;grid-template-columns:160px minmax(260px,360px) auto;align-items:center;gap:20px}.footer-contact-column>strong{margin:0}.footer-admin-shortcut{margin:0}}
@media(max-width:760px){.typeflow-footer{margin-top:38px}.typeflow-footer-inner{padding:20px 14px 18px}.footer-main-grid{grid-template-columns:1fr 1fr;gap:28px 22px;padding:4px 3px 28px}.footer-brand-column{grid-column:1/-1}.footer-contact-column{grid-column:1/-1;display:flex;gap:0}.footer-contact-column>strong{margin:4px 0 14px}.footer-admin-shortcut{margin-top:12px}.footer-bottom{padding-top:17px;flex-direction:column;align-items:flex-start;justify-content:center}.footer-bottom>div{flex-wrap:wrap;gap:12px}}
@media(max-width:440px){.footer-main-grid{grid-template-columns:1fr}.footer-link-column{border-top:1px solid var(--line);padding-top:20px}.footer-contact-column{border-top:1px solid var(--line);padding-top:20px}.footer-socials a{width:40px;height:40px}}

@media(min-width:761px) and (max-width:980px){
  
  
  
}
@media(max-width:440px){
  
  
  
  
}

/* ===== v6.5.9-categories.css ===== */

/* TypeFlow v6.5.9 — category-managed SEO content */
.category-title-icon{display:inline-block;margin-right:.18em}
.category-managed-seo{
  max-width:var(--home-max,var(--max));
  margin:42px auto 0;
  padding:34px 36px;
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:32px;
  position:relative;
}
.category-managed-seo--typing{grid-template-columns:minmax(0,1.25fr) minmax(320px,.8fr)}
.category-managed-copy{max-width:850px}
.category-managed-copy h2{margin:9px 0 14px;font-size:clamp(24px,2vw,32px);line-height:1.16;letter-spacing:-.65px}
.category-managed-body p{margin:0 0 15px;color:var(--muted);font-size:14px;line-height:1.75}
.category-managed-body h3{margin:23px 0 10px;font-size:18px;line-height:1.3}
.category-managed-body h4{margin:19px 0 9px;font-size:15px;line-height:1.35}
.category-managed-faq{align-self:start}
.category-managed-seo .seo-guide-links{margin-top:20px}
@media(max-width:900px){.category-managed-seo--typing{grid-template-columns:1fr}.category-managed-seo{padding:28px 22px}}
@media(max-width:600px){.category-managed-seo{margin-top:28px;padding:24px 16px}.category-managed-copy h2{font-size:23px}.category-managed-body p{font-size:13.5px}}

/* ===== v6.6-responsive-density.css ===== */
/* TypeFlow v6.6 — desktop density & responsive sizing system
   Primary target: browsers at 100% zoom on 1366–1920px desktop displays.
   The previous UI was visually oversized because multiple generations of
   layout CSS used 1440–1580px canvases together with 25–29px typing text.
   This layer normalizes the public product while preserving mobile rules. */

:root{
  --tf-public-max:1280px;
  --tf-reading-max:1120px;
  --tf-rail:270px;
}

@media (min-width:981px){
  /* ---------- Shared public shell ---------- */
  body:not(.admin-mode) .site-header{
    height:74px;
    padding:8px 18px 0;
  }
  body:not(.admin-mode) .header-inner{
    width:calc(100% - 16px);
    max-width:1320px!important;
    height:58px;
    padding:0 18px;
    grid-template-columns:220px minmax(0,1fr) auto;
    gap:16px;
    border-radius:15px;
  }
  body:not(.admin-mode) .brand{gap:9px;font-size:18px;letter-spacing:-.35px}
  body:not(.admin-mode) .brand-symbol{width:31px;height:29px}
  body:not(.admin-mode) .brand-symbol span{height:4px}
  body:not(.admin-mode) .brand-symbol span:nth-child(1){width:27px;top:4px}
  body:not(.admin-mode) .brand-symbol span:nth-child(2){width:19px;top:12px}
  body:not(.admin-mode) .brand-symbol span:nth-child(3){width:11px;top:20px}
  body:not(.admin-mode) .main-nav{gap:18px}
  body:not(.admin-mode) .main-nav a{font-size:12.5px;font-weight:710}
  body:not(.admin-mode) .header-actions{gap:8px}
  body:not(.admin-mode) .language-picker{height:36px;padding:0 7px;font-size:12px}
  body:not(.admin-mode) .theme-quick-toggle{transform:scale(.9);transform-origin:center}
  body:not(.admin-mode) .primary-btn.compact,
  body:not(.admin-mode) .outline-btn.compact{height:36px;padding:0 13px;font-size:12px;border-radius:9px}
  body:not(.admin-mode) .account-trigger{height:39px;max-width:165px;border-radius:11px}
  body:not(.admin-mode) .account-avatar{width:30px;height:30px;flex-basis:30px;border-radius:9px;font-size:12px}
  body:not(.admin-mode) .account-trigger-copy strong{font-size:11.5px}
  body:not(.admin-mode) .account-trigger-copy small{font-size:9px;margin-top:2px}

  /* ---------- Typing test: compact professional canvas ---------- */
  .typing-tool-page{
    width:calc(100% - 40px)!important;
    max-width:var(--tf-public-max)!important;
    padding:13px 0 18px!important;
  }
  .typing-tool-page .tool-breadcrumb{
    max-width:none;
    margin:0 4px 2px;
    padding:0;
    font-size:11.5px;
  }
  .typing-tool-page .premium-hero{
    min-height:104px;
    padding:6px 4px 14px;
    gap:34px;
  }
  .typing-tool-page .hero-copy{max-width:600px}
  .typing-tool-page .hero-eyebrow{height:21px;padding:0 9px;font-size:10px;letter-spacing:.95px}
  .typing-tool-page .premium-hero h1{margin:7px 0 3px;font-size:34px;line-height:1.04;letter-spacing:-1.25px}
  .typing-tool-page .premium-hero p{font-size:13.5px;line-height:1.5}
  .typing-tool-page .hero-proof{min-width:390px;gap:22px}
  .typing-tool-page .proof-item{gap:8px}
  .typing-tool-page .proof-icon{width:34px;height:34px;font-size:14px}
  .typing-tool-page .proof-item strong{font-size:13.5px}
  .typing-tool-page .proof-item small{font-size:10.5px;margin-top:1px}

  .typing-tool-page .home-progression{
    margin-bottom:14px;
    padding:10px 13px;
    border-radius:12px;
  }
  .typing-tool-page .home-progression-main{gap:10px}
  .typing-tool-page .progress-level-badge{font-size:10.5px;padding:6px 8px}
  .typing-tool-page .home-xp-copy strong{font-size:11.5px}
  .typing-tool-page .home-xp-copy small,
  .typing-tool-page .home-progression-side{font-size:10.5px}
  .typing-tool-page .home-xp-track{height:6px}

  .typing-tool-page .premium-grid{
    grid-template-columns:minmax(0,1fr) var(--tf-rail)!important;
    gap:18px!important;
    align-items:start;
  }
  .typing-tool-page .premium-typing-panel{
    border-radius:16px;
    box-shadow:0 14px 38px rgba(31,39,76,.065);
  }
  .typing-tool-page .test-config-row{
    grid-template-columns:1fr 1.08fr;
    gap:18px;
    padding:15px 18px 13px;
  }
  .typing-tool-page .control-heading{
    height:18px;
    margin-bottom:7px;
    gap:6px;
    font-size:11px;
  }
  .typing-tool-page .control-icon{width:18px;height:18px;font-size:9px}
  .typing-tool-page .segmented{gap:5px}
  .typing-tool-page .premium-typing-panel .option-btn{
    height:32px;
    padding:0 11px;
    border-radius:8px;
    font-size:11.5px;
  }

  .typing-tool-page .typing-language-control{
    margin:11px 18px 0;
    min-height:52px;
    grid-template-columns:125px minmax(0,1fr) auto;
    gap:9px;
    padding:7px 9px;
    border-radius:10px;
  }
  .typing-tool-page .typing-language-label{gap:7px}
  .typing-tool-page .language-globe{width:25px;height:25px;border-radius:7px;font-size:13px}
  .typing-tool-page .typing-language-label strong{font-size:11.5px}
  .typing-tool-page .typing-language-options{grid-template-columns:repeat(5,minmax(74px,1fr));gap:4px}
  .typing-tool-page .typing-lang-btn{height:32px;border-radius:7px;font-size:11.5px;gap:5px}
  .typing-tool-page .typing-lang-btn span{font-size:13px}
  .typing-tool-page .workspace-tools{gap:4px}
  .typing-tool-page .tool-icon-btn{width:30px;height:30px;border-radius:7px;font-size:11px}

  .typing-tool-page .premium-content-tabs{
    margin:9px 18px 0;
    gap:18px;
  }
  .typing-tool-page .premium-content-tabs .content-mode{
    min-width:96px;
    height:34px;
    font-size:11.5px;
  }
  .typing-tool-page .tab-glyph{font-size:12px;margin-right:4px}
  .typing-tool-page .premium-typing-panel .custom-text-box{margin:10px 18px 0}
  .typing-tool-page .premium-workspace{margin:0 18px}
  .typing-tool-page .premium-workspace .word-viewport{
    height:126px!important;
    padding:10px 9px 6px!important;
  }
  .typing-tool-page .premium-workspace .word-stream{
    font-size:20px!important;
    line-height:1.48!important;
    gap:5px 8px!important;
    font-weight:650!important;
    letter-spacing:.05px!important;
  }
  .typing-tool-page .premium-workspace .test-word{padding:0 3px}
  .typing-tool-page .premium-workspace .typing-input{
    height:44px;
    padding-left:12px;
    font-size:13.5px;
  }
  .typing-tool-page .space-tip{right:10px;font-size:9px;padding:4px 6px}

  .typing-tool-page .premium-metrics{
    margin-top:12px;
    padding:0 10px;
  }
  .typing-tool-page .premium-metrics .metric{
    min-height:57px;
    gap:6px;
  }
  .typing-tool-page .premium-metrics .metric small{font-size:9.5px}
  .typing-tool-page .premium-metrics .metric strong{font-size:14px}
  .typing-tool-page .premium-metrics .metric-icon{width:19px;font-size:14px}
  .typing-tool-page .premium-actions{padding:11px 18px 0}
  .typing-tool-page .premium-actions .start-test{min-width:210px;height:40px;font-size:12px}
  .typing-tool-page .premium-actions .reset-test{min-width:112px;height:40px;font-size:12px}
  .typing-tool-page .premium-typing-panel .test-status{padding-bottom:11px;font-size:9.5px}

  /* ---------- Right rail ---------- */
  .typing-tool-page .premium-side-stack{gap:14px}
  .typing-tool-page .premium-side-card{border-radius:15px;box-shadow:0 12px 32px rgba(31,39,76,.055)}
  .typing-tool-page .premium-side-card .section-head{padding:14px 14px 9px}
  .typing-tool-page .premium-side-card .section-head h2{font-size:14.5px;letter-spacing:-.2px}
  .typing-tool-page .premium-side-card .section-head a,
  .typing-tool-page .premium-side-card .subtle-link{font-size:9.5px}
  .typing-tool-page .head-icon{width:22px;height:22px;margin-right:5px;border-radius:6px;font-size:10px}
  .typing-tool-page .daily-main{padding:4px 14px 9px;grid-template-columns:66px 1fr;gap:11px}
  .typing-tool-page .progress-ring{width:60px;height:60px}
  .typing-tool-page .progress-ring:after{inset:7px}
  .typing-tool-page .progress-ring span{font-size:13px}
  .typing-tool-page .daily-copy strong{font-size:11.5px}
  .typing-tool-page .daily-copy small{font-size:9.5px}
  .typing-tool-page .thin-progress{height:4px;margin:8px 0 6px}
  .typing-tool-page .premium-side-card .daily-cta{
    width:calc(100% - 28px);
    min-height:38px;
    height:38px;
    margin:10px 14px 8px;
    font-size:11px!important;
  }
  .typing-tool-page .daily-reset{padding:0 14px 9px;font-size:9px}
  .typing-tool-page .leader-tabs{margin:0 14px}
  .typing-tool-page .leader-tab{height:32px;font-size:10.5px}
  .typing-tool-page .leader-list{padding:5px 14px 8px;max-height:none!important;overflow:visible!important}
  .typing-tool-page .leader-list li{
    min-height:37px;
    grid-template-columns:20px 27px 1fr 26px auto;
    gap:5px;
  }
  .typing-tool-page .leader-list .rank{font-size:10px}
  .typing-tool-page .leader-list .avatar{width:25px;height:25px;font-size:9px}
  .typing-tool-page .leader-list .leader-name{font-size:10.5px}
  .typing-tool-page .leader-list .country-badge{font-size:10px}
  .typing-tool-page .leader-list strong{font-size:10px}
  .typing-tool-page .leaderboard-all-btn{height:36px;margin:4px 14px 0;font-size:10.5px}

  /* ---------- Performance + SEO: same restrained density ---------- */
  .typing-tool-page .performance-section{margin-top:22px;padding:22px!important;border-radius:16px!important}
  .typing-tool-page .performance-section-head h2{font-size:22px!important}
  .typing-tool-page .performance-section-head p{font-size:12px!important}
  .typing-tool-page .performance-stat-grid{gap:12px!important}
  .typing-tool-page .performance-stat-card{min-height:112px!important;padding:16px!important;border-radius:13px!important}
  .typing-tool-page .performance-card-label{font-size:10.5px!important}
  .typing-tool-page .performance-main-value,
  .typing-tool-page .performance-value-row strong{font-size:24px!important}
  .typing-tool-page .performance-stat-card small{font-size:10.5px!important}
  .typing-tool-page .seo-section{margin-top:34px;padding-top:26px;gap:22px}
  .typing-tool-page .seo-copy h2{font-size:23px}
  .typing-tool-page .seo-copy h3{font-size:16px;margin-top:20px}
  .typing-tool-page .seo-copy p,
  .typing-tool-page .faq-card p{font-size:12.5px;line-height:1.68}
  .typing-tool-page .faq-card{padding:17px 19px}
  .typing-tool-page .faq-card summary{font-size:12px}

  /* ---------- Other product pages: consistent scale ---------- */
  .v6-page,.duel-page,.practice-v6-page{
    max-width:1120px!important;
    padding:25px 18px 46px!important;
  }
  .v6-page-head,.duel-hero{margin-bottom:17px!important}
  .v6-page-head h1,.duel-hero h1{font-size:34px!important;letter-spacing:-1px!important}
  .v6-page-head p,.duel-hero p{font-size:13.5px!important;line-height:1.55!important}
  .v6-panel{padding:18px!important;border-radius:15px!important}
  .v6-panel-head h2{font-size:17px!important}
  .duel-lobby{padding:18px!important}
  .duel-mode-card{padding:13px!important}
  .duel-mode-card strong{font-size:13.5px!important}
  .duel-mode-card small{font-size:10.5px!important}
  .duel-config select,.duel-find-btn{height:41px!important;font-size:12px!important}
  .challenge-word-viewport{height:194px!important;padding:18px 20px!important}
  .challenge-word-stream{font-size:22px!important;line-height:1.5!important;gap:6px 10px!important}
  .challenge-input-wrap input{height:48px!important;font-size:14px!important}
  .challenge-live-stats>div{min-height:65px!important}
  .challenge-live-stats small{font-size:10.5px!important}
  .challenge-live-stats strong{font-size:18px!important}
  .practice-arena .challenge-word-viewport{height:210px!important;padding:18px 20px!important}
  .practice-arena .challenge-word-stream{font-size:22px!important;line-height:1.5!important;gap:6px 10px!important}
  .practice-arena .challenge-input-wrap input{font-size:14px!important}
  .practice-arena .challenge-live-stats>div{min-height:65px!important}
  .practice-arena .primary-btn{min-width:210px;height:42px!important;font-size:12.5px!important}

  .profile-v5,.page-wrap.profile-v5{max-width:1160px!important;padding-left:20px!important;padding-right:20px!important}
  .profile-v5-head{padding:20px 22px!important}
  .profile-v5-identity h1{font-size:27px!important}
  .profile-level-orb{width:80px;height:80px}
  .profile-level-orb strong{font-size:26px}
  .profile-stat-grid .stat{padding:15px!important}
  .profile-stat-grid .stat strong{font-size:20px!important}
  .account-settings-page{max-width:1100px!important;padding-top:30px!important}

  /* Footer follows the same content width. */
  .typeflow-footer-inner{max-width:1280px!important;padding-left:22px!important;padding-right:22px!important}
}

/* 100% zoom on narrower desktop/laptops. */
@media (min-width:981px) and (max-width:1399px){
  :root{--tf-public-max:1160px;--tf-rail:250px}
  body:not(.admin-mode) .header-inner{max-width:1200px!important;grid-template-columns:190px minmax(0,1fr) auto}
  body:not(.admin-mode) .main-nav{gap:13px}
  body:not(.admin-mode) .main-nav a{font-size:11.5px}
  .typing-tool-page .premium-workspace .word-stream{font-size:19px!important}
  .typing-tool-page .typing-language-control{grid-template-columns:105px minmax(0,1fr) auto}
  .typing-tool-page .typing-lang-btn{font-size:10.5px}
  .typing-tool-page .premium-hero h1{font-size:31px}
  .typing-tool-page .hero-proof{min-width:350px;gap:15px}
}

/* A wide CSS viewport can mean an ultrawide screen or browser zoom-out.
   Give it extra canvas so the UI does not become physically tiny, while
   still keeping components considerably denser than the old v6.2 rules. */
@media (min-width:2000px){
  :root{--tf-public-max:1600px;--tf-rail:320px}
  body:not(.admin-mode) .header-inner{max-width:1640px!important}
  .typing-tool-page .premium-workspace .word-stream{font-size:23px!important}
  .typing-tool-page .premium-workspace .word-viewport{height:142px!important}
  .typing-tool-page .premium-typing-panel .option-btn{height:34px;font-size:12px}
  .typing-tool-page .typing-lang-btn{height:34px;font-size:12px}
  .typing-tool-page .premium-metrics .metric{min-height:61px}
  .v6-page,.duel-page,.practice-v6-page{max-width:1400px!important}
  .profile-v5,.page-wrap.profile-v5{max-width:1440px!important}
  .typeflow-footer-inner{max-width:1600px!important}
}

@media (min-width:2600px){
  :root{--tf-public-max:1840px;--tf-rail:350px}
  body:not(.admin-mode) .header-inner{max-width:1880px!important}
  .typing-tool-page .premium-workspace .word-stream{font-size:25px!important}
  .typing-tool-page .premium-workspace .word-viewport{height:150px!important}
  .typeflow-footer-inner{max-width:1840px!important}
}

/* ===== v6.6.1-typing-workspace.css ===== */

/* TypeFlow v6.6.1
   Unified typing workspace:
   reading surface -> separated typing field -> stats/actions.
   IDs and JS behavior are unchanged.
*/

/* ---------- Shared visual language ---------- */
.tf-reading-card{
  position:relative;
  box-sizing:border-box;
  border:1px solid color-mix(in srgb,var(--line-strong) 84%,var(--line)) !important;
  border-radius:14px !important;
  background:
    linear-gradient(180deg,
      color-mix(in srgb,var(--surface) 98%,transparent),
      color-mix(in srgb,var(--surface-2) 90%,var(--surface))) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 8px 24px rgba(28,35,72,.035);
}

.tf-reading-card:focus-within,
.tf-reading-card:focus{
  border-color:color-mix(in srgb,var(--primary) 42%,var(--line)) !important;
}

.tf-entry-card{
  position:relative;
  box-sizing:border-box;
  border:1px solid color-mix(in srgb,var(--primary) 46%,var(--line)) !important;
  border-radius:12px !important;
  background:var(--surface) !important;
  box-shadow:
    0 8px 22px rgba(28,35,72,.045),
    inset 0 1px 0 rgba(255,255,255,.025);
  transition:border-color .14s ease,box-shadow .14s ease,transform .14s ease;
}

.tf-entry-card:focus-within{
  border-color:var(--primary) !important;
  box-shadow:
    0 0 0 3px color-mix(in srgb,var(--primary) 11%,transparent),
    0 10px 26px color-mix(in srgb,var(--primary) 8%,transparent) !important;
}

/* ---------- Main typing test ---------- */
.typing-tool-page .tf-main-typing-stage{
  margin:11px 18px 0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  overflow:visible !important;
  box-shadow:none !important;
}

.typing-tool-page .tf-main-typing-stage .word-viewport{
  margin:0 !important;
  height:142px !important;
  padding:15px 16px !important;
  overflow:hidden;
}

.typing-tool-page .tf-main-typing-stage .word-stream{
  font-size:19px !important;
  line-height:1.62 !important;
  gap:5px 9px !important;
  font-weight:620 !important;
}

.typing-tool-page .tf-main-typing-stage .typing-entry-wrap{
  margin-top:12px !important;
  border-top-width:1px !important;
  overflow:hidden;
}

.typing-tool-page .tf-main-typing-stage .typing-entry-wrap:focus-within{
  box-shadow:
    0 0 0 3px color-mix(in srgb,var(--primary) 11%,transparent),
    0 10px 26px color-mix(in srgb,var(--primary) 8%,transparent) !important;
}

.typing-tool-page .tf-main-typing-stage .typing-input{
  height:50px !important;
  padding:0 92px 0 15px !important;
  font-size:14.5px !important;
  font-weight:560 !important;
}

.typing-tool-page .tf-main-typing-stage .space-tip{
  right:10px;
  padding:4px 7px;
  font-size:9.5px;
  background:var(--surface-2);
}

.typing-tool-page .premium-metrics{
  margin-top:14px !important;
  border-top:1px solid var(--line);
}

/* ---------- Daily Challenge + Personal Practice ---------- */
.challenge-arena,
.practice-arena{
  overflow:hidden;
}

.challenge-arena .tf-reading-card,
.practice-arena .tf-reading-card{
  width:auto !important;
  height:178px !important;
  margin:16px 20px 0 !important;
  padding:17px 18px !important;
  overflow:hidden;
}

.challenge-arena .challenge-word-stream,
.practice-arena .challenge-word-stream{
  font-size:20px !important;
  line-height:1.58 !important;
  gap:6px 10px !important;
  font-weight:650 !important;
}

.challenge-arena .tf-entry-card,
.practice-arena .tf-entry-card{
  margin:12px 20px 0 !important;
  overflow:hidden;
}

.challenge-arena .tf-entry-card input,
.practice-arena .tf-entry-card input{
  height:50px !important;
  padding:0 92px 0 15px !important;
  font-size:14.5px !important;
}

.challenge-arena .tf-entry-card span,
.practice-arena .tf-entry-card span{
  right:10px;
  font-size:9.5px;
  padding:4px 7px;
  background:var(--surface-2);
}

.challenge-arena .tf-typing-stats,
.practice-arena .tf-typing-stats{
  margin:14px 20px 0 !important;
  overflow:hidden;
  border:1px solid var(--line) !important;
  border-radius:12px;
  background:var(--surface-2);
}

.challenge-arena .tf-typing-stats>div,
.practice-arena .tf-typing-stats>div{
  min-height:62px !important;
  padding:10px 12px !important;
}

.challenge-arena .challenge-actions,
.practice-arena .challenge-actions{
  padding-top:14px !important;
}

/* ---------- 1v1 Duel ---------- */
.duel-arena .tf-reading-card{
  width:auto !important;
  height:174px !important;
  margin:16px 26px 0 !important;
  padding:17px 18px !important;
  overflow:hidden;
  border-top:1px solid color-mix(in srgb,var(--line-strong) 84%,var(--line)) !important;
}

.duel-arena .duel-word-stream{
  font-size:20px !important;
  line-height:1.58 !important;
  gap:6px 10px !important;
  font-weight:650 !important;
}

.duel-arena .tf-entry-card{
  margin:12px 26px 0 !important;
  overflow:hidden;
}

.duel-arena .tf-entry-card input{
  height:50px !important;
  padding:0 92px 0 15px !important;
  font-size:14.5px !important;
}

.duel-arena .tf-entry-card span{
  right:10px;
  padding:4px 7px;
  font-size:9.5px;
  background:var(--surface-2);
}

.duel-arena .tf-typing-stats{
  margin:14px 26px 0 !important;
  overflow:hidden;
  border:1px solid var(--line) !important;
  border-radius:12px;
  background:var(--surface-2);
}

.duel-arena .tf-typing-stats>div{
  min-height:62px !important;
}

.duel-arena .duel-arena-actions{
  padding-top:13px !important;
}

/* Active/current word stays clear without becoming visually noisy. */
.tf-reading-card .test-word.active,
.tf-reading-card .challenge-word.active,
.tf-reading-card .duel-word.active{
  box-shadow:0 0 0 1px color-mix(in srgb,var(--primary) 30%,transparent);
}

/* ---------- Dark theme ---------- */
html[data-theme="dark"] .tf-reading-card{
  background:
    linear-gradient(180deg,
      color-mix(in srgb,var(--surface) 93%,#111421),
      color-mix(in srgb,var(--surface-2) 88%,#0d1019)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.018),
    0 10px 26px rgba(0,0,0,.12);
}

html[data-theme="dark"] .tf-entry-card{
  background:color-mix(in srgb,var(--surface) 96%,#090b12) !important;
}

/* ---------- Laptop / narrower desktop ---------- */
@media (min-width:761px) and (max-width:1199px){
  .typing-tool-page .tf-main-typing-stage .word-viewport{
    height:136px !important;
    padding:14px !important;
  }
  .typing-tool-page .tf-main-typing-stage .word-stream{
    font-size:18.5px !important;
  }

  .challenge-arena .tf-reading-card,
  .practice-arena .tf-reading-card{
    height:168px !important;
    margin-left:17px !important;
    margin-right:17px !important;
  }
  .challenge-arena .tf-entry-card,
  .practice-arena .tf-entry-card,
  .challenge-arena .tf-typing-stats,
  .practice-arena .tf-typing-stats{
    margin-left:17px !important;
    margin-right:17px !important;
  }

  .duel-arena .tf-reading-card{
    height:166px !important;
    margin-left:20px !important;
    margin-right:20px !important;
  }
  .duel-arena .tf-entry-card,
  .duel-arena .tf-typing-stats{
    margin-left:20px !important;
    margin-right:20px !important;
  }
}

/* ---------- Mobile ---------- */
@media (max-width:760px){
  .typing-tool-page .tf-main-typing-stage{
    margin:9px 13px 0 !important;
  }
  .typing-tool-page .tf-main-typing-stage .word-viewport{
    height:150px !important;
    padding:13px !important;
    border-radius:12px !important;
  }
  .typing-tool-page .tf-main-typing-stage .word-stream{
    font-size:18px !important;
    line-height:1.56 !important;
    gap:5px 8px !important;
  }
  .typing-tool-page .tf-main-typing-stage .typing-entry-wrap{
    margin-top:9px !important;
  }
  .typing-tool-page .tf-main-typing-stage .typing-input{
    height:48px !important;
    font-size:14px !important;
  }

  .challenge-arena .tf-reading-card,
  .practice-arena .tf-reading-card{
    height:174px !important;
    margin:13px 13px 0 !important;
    padding:14px !important;
  }
  .challenge-arena .challenge-word-stream,
  .practice-arena .challenge-word-stream{
    font-size:18px !important;
    line-height:1.58 !important;
    gap:5px 8px !important;
  }
  .challenge-arena .tf-entry-card,
  .practice-arena .tf-entry-card{
    margin:9px 13px 0 !important;
  }
  .challenge-arena .tf-entry-card input,
  .practice-arena .tf-entry-card input{
    height:48px !important;
    font-size:14px !important;
  }
  .challenge-arena .tf-typing-stats,
  .practice-arena .tf-typing-stats{
    margin:11px 13px 0 !important;
  }

  .duel-arena .tf-reading-card{
    height:168px !important;
    margin:13px 13px 0 !important;
    padding:14px !important;
  }
  .duel-arena .duel-word-stream{
    font-size:18px !important;
    line-height:1.58 !important;
    gap:5px 8px !important;
  }
  .duel-arena .tf-entry-card{
    margin:9px 13px 0 !important;
  }
  .duel-arena .tf-entry-card input{
    height:48px !important;
    font-size:14px !important;
  }
  .duel-arena .tf-typing-stats{
    margin:11px 13px 0 !important;
  }
}

@media (max-width:430px){
  .tf-entry-card input{
    padding-right:72px !important;
  }
  .tf-entry-card>span,
  .space-tip{
    font-size:8.5px !important;
    padding:3px 5px !important;
  }
}

/* ===== v6.6.2-word-viewport-safety.css ===== */

/* TypeFlow v6.6.2 — Clean word viewport
   Prevents a partially visible next line at the bottom of typing surfaces.
   Geometry is tuned to show complete visual rows only.
*/

.tf-reading-card{
  scrollbar-width:none;
  overscroll-behavior:contain;
  scroll-padding-block:14px 18px;
}
.tf-reading-card::-webkit-scrollbar{display:none}

/* Main typing test
   19px × 1.62 line-height + 5px row gap:
   four complete rows fit, the fifth stays fully outside the viewport. */
.typing-tool-page .tf-main-typing-stage .word-viewport{
  height:176px !important;
  padding:16px 16px 17px !important;
}
.typing-tool-page .tf-main-typing-stage .word-stream{
  align-content:flex-start;
  padding-bottom:0 !important;
}

/* Challenge / Practice
   Give the 20px word set enough room for four complete rows. */
.challenge-arena .tf-reading-card,
.practice-arena .tf-reading-card{
  height:182px !important;
  padding:17px 18px 18px !important;
}
.challenge-arena .challenge-word-stream,
.practice-arena .challenge-word-stream{
  align-content:flex-start;
  padding-bottom:0 !important;
}

/* Duel uses the same four-row reading rhythm. */
.duel-arena .tf-reading-card{
  height:182px !important;
  padding:17px 18px 18px !important;
}
.duel-arena .duel-word-stream{
  align-content:flex-start;
  padding-bottom:0 !important;
}

/* A slightly stronger visual separation keeps the input from feeling
   like it is cutting into the reading text. */
.typing-tool-page .tf-main-typing-stage .typing-entry-wrap,
.challenge-arena .tf-entry-card,
.practice-arena .tf-entry-card,
.duel-arena .tf-entry-card{
  margin-top:14px !important;
}

/* Laptop / narrower desktop: still preserve four FULL rows. */
@media (min-width:761px) and (max-width:1199px){
  .typing-tool-page .tf-main-typing-stage .word-viewport{
    height:164px !important;
    padding:14px 14px 16px !important;
  }

  .challenge-arena .tf-reading-card,
  .practice-arena .tf-reading-card,
  .duel-arena .tf-reading-card{
    height:182px !important;
  }
}

/* Mobile gets a dedicated four-row geometry instead of simply
   inheriting the desktop fixed height. */
@media (max-width:760px){
  .typing-tool-page .tf-main-typing-stage .word-viewport{
    height:160px !important;
    padding:13px 13px 15px !important;
  }

  .challenge-arena .tf-reading-card,
  .practice-arena .tf-reading-card,
  .duel-arena .tf-reading-card{
    height:162px !important;
    padding:14px 14px 16px !important;
  }

  .typing-tool-page .tf-main-typing-stage .typing-entry-wrap,
  .challenge-arena .tf-entry-card,
  .practice-arena .tf-entry-card,
  .duel-arena .tf-entry-card{
    margin-top:10px !important;
  }
}

/* If a user zooms/text-scales aggressively, the surface remains
   clipped cleanly rather than leaking text behind the input. */
@supports (overflow: clip){
  .tf-reading-card{overflow:clip !important}
}

/* ===== v6.6.3-desktop-fit.css ===== */
/* TypeFlow v6.6.3 — desktop fit + main test viewport final pass
   100% browser zoom is the reference state.
   This layer intentionally loads last. */

:root{
  --tf-public-max:1160px;
  --tf-rail:250px;
}

@media (min-width:981px){
  /* Public shell: one step denser at 100% zoom. */
  body:not(.admin-mode) .site-header{
    height:69px;
    padding:7px 16px 0;
  }
  body:not(.admin-mode) .header-inner{
    width:calc(100% - 18px);
    max-width:1200px!important;
    height:54px;
    padding:0 15px;
    grid-template-columns:190px minmax(0,1fr) auto;
    gap:13px;
    border-radius:14px;
  }
  body:not(.admin-mode) .brand{font-size:17px}
  body:not(.admin-mode) .main-nav{gap:14px}
  body:not(.admin-mode) .main-nav a{font-size:11.5px}
  body:not(.admin-mode) .language-picker{height:34px;font-size:11px}
  body:not(.admin-mode) .account-trigger{height:36px;max-width:150px}
  body:not(.admin-mode) .account-avatar{width:28px;height:28px;flex-basis:28px}

  /* Canvas width: resembles a normal desktop web tool instead of a zoomed UI. */
  .typing-tool-page{
    width:calc(100% - 52px)!important;
    max-width:1160px!important;
    padding:14px 0 18px!important;
  }
  .typing-tool-page .premium-hero{
    min-height:90px!important;
    padding:4px 3px 11px!important;
    margin-bottom:4px!important;
    gap:25px!important;
  }
  .typing-tool-page .premium-hero h1{
    margin:5px 0 3px!important;
    font-size:30px!important;
    line-height:1.03!important;
    letter-spacing:-1.05px!important;
  }
  .typing-tool-page .premium-hero p{font-size:12.5px!important}
  .typing-tool-page .hero-proof{min-width:330px!important;gap:15px!important}
  .typing-tool-page .proof-icon{width:31px!important;height:31px!important}
  .typing-tool-page .proof-item strong{font-size:12.5px!important}
  .typing-tool-page .proof-item small{font-size:9.5px!important}

  .typing-tool-page .home-progression{
    margin-bottom:12px!important;
    padding:8px 11px!important;
  }

  .typing-tool-page .premium-grid{
    grid-template-columns:minmax(0,1fr) 250px!important;
    gap:15px!important;
  }
  .typing-tool-page .test-config-row{
    gap:15px!important;
    padding:13px 15px 11px!important;
  }
  .typing-tool-page .premium-typing-panel .option-btn{
    height:30px!important;
    padding:0 10px!important;
    font-size:11px!important;
  }
  .typing-tool-page .typing-language-control{
    margin:10px 15px 0!important;
    min-height:48px!important;
    grid-template-columns:112px minmax(0,1fr) auto!important;
    padding:6px 8px!important;
  }
  .typing-tool-page .typing-lang-btn{height:30px!important;font-size:10.5px!important}
  .typing-tool-page .premium-content-tabs{
    margin:8px 15px 0!important;
    gap:15px!important;
  }
  .typing-tool-page .premium-content-tabs .content-mode{
    min-width:88px!important;
    height:31px!important;
    font-size:10.8px!important;
  }

  /* MAIN TEST ONLY — exact four-row reading surface.
     18.5px * 1.52 ≈ 28.1px line box. 4 rows + three 4px gaps + padding
     is kept below the clipping boundary, so a fifth row cannot peek through. */
  .typing-tool-page .tf-main-typing-stage{
    margin:9px 15px 0!important;
  }
  .typing-tool-page .tf-main-typing-stage .word-viewport{
    position:relative!important;
    box-sizing:border-box!important;
    height:154px!important;
    min-height:154px!important;
    max-height:154px!important;
    padding:12px 13px 15px!important;
    overflow:hidden!important;
    contain:paint;
  }
  .typing-tool-page .tf-main-typing-stage .word-viewport::after{
    content:"";
    position:absolute;
    z-index:4;
    left:0;right:0;bottom:0;
    height:10px;
    pointer-events:none;
    background:linear-gradient(to bottom,transparent 0%,var(--surface) 58%,var(--surface) 100%);
  }
  .typing-tool-page .tf-main-typing-stage .word-stream{
    font-size:18.5px!important;
    line-height:1.52!important;
    gap:4px 8px!important;
    font-weight:640!important;
    align-content:flex-start!important;
  }
  .typing-tool-page .tf-main-typing-stage .typing-entry-wrap{
    margin-top:11px!important;
  }
  .typing-tool-page .tf-main-typing-stage .typing-input{
    height:46px!important;
    font-size:13.5px!important;
    padding-left:13px!important;
  }

  .typing-tool-page .premium-metrics{
    margin-top:11px!important;
    padding:0 8px!important;
  }
  .typing-tool-page .premium-metrics .metric{min-height:53px!important}
  .typing-tool-page .premium-metrics .metric small{font-size:9px!important}
  .typing-tool-page .premium-metrics .metric strong{font-size:13.5px!important}
  .typing-tool-page .premium-actions{padding:9px 15px 0!important}
  .typing-tool-page .premium-actions .start-test,
  .typing-tool-page .premium-actions .reset-test{height:38px!important}
  .typing-tool-page .premium-typing-panel .test-status{padding-bottom:9px!important}

  /* Right rail should not visually overpower the typing surface. */
  .typing-tool-page .premium-side-stack{gap:12px!important}
  .typing-tool-page .premium-side-card .section-head{padding:12px 12px 7px!important}
  .typing-tool-page .premium-side-card .section-head h2{
    font-size:13.5px!important;
    white-space:nowrap;
  }
  .typing-tool-page .daily-main{
    padding:3px 12px 7px!important;
    grid-template-columns:57px 1fr!important;
    gap:9px!important;
  }
  .typing-tool-page .progress-ring{width:54px!important;height:54px!important}
  .typing-tool-page .premium-side-card .daily-cta{
    width:calc(100% - 24px)!important;
    height:35px!important;
    min-height:35px!important;
    margin:8px 12px 7px!important;
    font-size:10.5px!important;
  }
  .typing-tool-page .leader-tabs{margin:0 12px!important}
  .typing-tool-page .leader-list{padding-left:12px!important;padding-right:12px!important}
  .typing-tool-page .leaderboard-all-btn{margin-left:12px!important;margin-right:12px!important}

  /* Lower sections use the same, calmer width rhythm. */
  .typing-tool-page .performance-section{margin-top:18px!important;padding:18px!important}
  .typing-tool-page .performance-section-head h2{font-size:20px!important}
  .typing-tool-page .seo-section{margin-top:28px!important;padding-top:22px!important}
  .typing-tool-page .seo-copy h2{font-size:21px!important}
  .typing-tool-page .seo-copy h3{font-size:15px!important}
  .typing-tool-page .seo-copy p,
  .typing-tool-page .faq-card p{font-size:12px!important}

  .typeflow-footer-inner{max-width:1160px!important}
}

/* 100% zoom on typical 1366–1599 widths: even tighter but still readable. */
@media (min-width:981px) and (max-width:1599px){
  :root{--tf-public-max:1080px;--tf-rail:238px}
  body:not(.admin-mode) .header-inner{max-width:1120px!important}
  .typing-tool-page{max-width:1080px!important}
  .typing-tool-page .premium-grid{grid-template-columns:minmax(0,1fr) 238px!important;gap:14px!important}
  .typing-tool-page .hero-proof{min-width:300px!important;gap:11px!important}
  .typing-tool-page .tf-main-typing-stage .word-stream{font-size:18px!important}
  .typing-tool-page .tf-main-typing-stage .word-viewport{
    height:151px!important;min-height:151px!important;max-height:151px!important;
  }
}

/* Zoom-out / ultrawide: expand only moderately. This prevents the old
   behavior where 75% zoom produced a giant 1600–1840px application canvas. */
@media (min-width:2000px) and (max-width:2599px){
  :root{--tf-public-max:1480px;--tf-rail:285px}
  body:not(.admin-mode) .header-inner{max-width:1520px!important}
  .typing-tool-page{max-width:1480px!important}
  .typing-tool-page .premium-grid{grid-template-columns:minmax(0,1fr) 285px!important;gap:18px!important}
  .typing-tool-page .tf-main-typing-stage .word-stream{font-size:20px!important}
  .typing-tool-page .tf-main-typing-stage .word-viewport{
    height:164px!important;min-height:164px!important;max-height:164px!important;
  }
  .typeflow-footer-inner{max-width:1480px!important}
}

@media (min-width:2600px){
  :root{--tf-public-max:1600px;--tf-rail:300px}
  body:not(.admin-mode) .header-inner{max-width:1640px!important}
  .typing-tool-page{max-width:1600px!important}
  .typing-tool-page .premium-grid{grid-template-columns:minmax(0,1fr) 300px!important}
  .typing-tool-page .tf-main-typing-stage .word-stream{font-size:21px!important}
  .typing-tool-page .tf-main-typing-stage .word-viewport{
    height:170px!important;min-height:170px!important;max-height:170px!important;
  }
  .typeflow-footer-inner{max-width:1600px!important}
}

/* Keep mobile rules from the previous workspace pass. */
@media (max-width:980px){
  .typing-tool-page .tf-main-typing-stage .word-viewport::after{display:none}
}

/* ===== v6.6.4-main-test-final-clip.css ===== */

/* TypeFlow v6.6.4 — final main-test bottom-line cleanup
   Keep the v6.6.3 desktop sizing exactly as-is; only hide the tiny
   fragment of the next row that can peek through at the bottom. */

.typing-tool-page .tf-main-typing-stage .word-viewport{
  position:relative;
  overflow:hidden !important;
  /* A few pixels less usable height prevents the fifth row from peeking in. */
  padding-bottom:20px !important;
}

/* Soft surface-colored mask over the final pixels.
   This avoids changing the overall card size / %100 density. */
.typing-tool-page .tf-main-typing-stage .word-viewport::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:9px;
  z-index:6;
  pointer-events:none;
  background:linear-gradient(
    to bottom,
    color-mix(in srgb,var(--surface) 0%,transparent),
    color-mix(in srgb,var(--surface-2) 96%,var(--surface))
  );
}

html[data-theme="dark"] .typing-tool-page .tf-main-typing-stage .word-viewport::after{
  background:linear-gradient(
    to bottom,
    rgba(17,16,28,0),
    color-mix(in srgb,var(--surface-2) 96%,#0d0f18)
  );
}

/* The current word must remain above the reading surface,
   while the bottom safety mask remains the final clipping layer. */
.typing-tool-page .tf-main-typing-stage .word-stream{
  position:relative;
  z-index:1;
}

/* ===== v6.6.5-scroll-clip-fix.css ===== */

/* TypeFlow v6.6.5 — Scroll + clip repair */

/* v6.6.2 used overflow:clip; that also prevents scrollTop/scrollTo.
   Hidden still clips visually but remains programmatically scrollable. */
.tf-reading-card{
  overflow:hidden !important;
  scrollbar-width:none !important;
}
.tf-reading-card::-webkit-scrollbar{display:none !important}

/* Remove BOTH older bottom masks. They were responsible for the dark
   horizontal stripe cutting through words in dark mode. */
.typing-tool-page .tf-main-typing-stage .word-viewport::after{
  content:none !important;
  display:none !important;
  background:none !important;
}

/* Main test: keep the v6.6.3 density, but use pure geometry instead
   of a visual overlay. */
@media (min-width:981px){
  .typing-tool-page .tf-main-typing-stage .word-viewport{
    overflow:hidden !important;
    contain:paint;
    padding-bottom:13px !important;
  }

  .typing-tool-page .tf-main-typing-stage .word-stream{
    position:relative;
    z-index:1;
    padding-bottom:0 !important;
  }
}

/* Typical 100% desktop widths. Slightly reduce only the viewport
   clipping boundary; overall panel/card sizing stays unchanged. */
@media (min-width:981px) and (max-width:1599px){
  .typing-tool-page .tf-main-typing-stage .word-viewport{
    height:147px !important;
    min-height:147px !important;
    max-height:147px !important;
    padding-top:12px !important;
    padding-bottom:12px !important;
  }
}

/* Wider normal desktops. */
@media (min-width:1600px) and (max-width:1999px){
  .typing-tool-page .tf-main-typing-stage .word-viewport{
    height:151px !important;
    min-height:151px !important;
    max-height:151px !important;
    padding-top:12px !important;
    padding-bottom:13px !important;
  }
}

/* Practice/Challenge/Duel must be scrollable by JS while still
   looking like a clipped card. */
.practice-arena .tf-reading-card,
.challenge-arena .tf-reading-card,
.duel-arena .tf-reading-card{
  overflow:hidden !important;
  scroll-behavior:auto !important;
  overscroll-behavior:contain;
}

/* Keep a clean gap between the reading card and the entry field. */
.practice-arena .tf-entry-card,
.challenge-arena .tf-entry-card,
.duel-arena .tf-entry-card{
  margin-top:12px !important;
}

/* Mobile: no masks, programmatic scrolling remains enabled. */
@media (max-width:980px){
  .typing-tool-page .tf-main-typing-stage .word-viewport{
    overflow:hidden !important;
  }
}

/* ===== v6.6.7-unified-test-practice-header.css ===== */

/* TypeFlow v6.6.7 — unified typing geometry + practice controls + header fit */

/* ==========================================================
   MAIN TEST = SAME READING SURFACE AS PRACTICE / DUEL
   No masks, no fake bottom gradients, no half row.
   ========================================================== */
.typing-tool-page .tf-main-typing-stage .word-viewport{
  position:relative !important;
  box-sizing:border-box !important;
  height:182px !important;
  min-height:182px !important;
  max-height:182px !important;
  padding:17px 18px 18px !important;
  overflow:hidden !important;
  contain:paint !important;
  border:1px solid color-mix(in srgb,var(--line-strong) 84%,var(--line)) !important;
  border-radius:14px !important;
  background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 98%,transparent),color-mix(in srgb,var(--surface-2) 90%,var(--surface))) !important;
}
.typing-tool-page .tf-main-typing-stage .word-viewport::after{
  content:none !important;
  display:none !important;
}
.typing-tool-page .tf-main-typing-stage .word-stream{
  font-size:20px !important;
  line-height:1.58 !important;
  gap:6px 10px !important;
  font-weight:650 !important;
  align-content:flex-start !important;
  padding:0 !important;
}
.typing-tool-page .tf-main-typing-stage .typing-entry-wrap{
  margin-top:12px !important;
}
.typing-tool-page .tf-main-typing-stage .typing-input{
  height:50px !important;
  padding:0 92px 0 15px !important;
  font-size:14.5px !important;
}

/* ==========================================================
   PRACTICE CONFIGURATION
   ========================================================== */
.practice-v6-page .practice-config-card{
  margin-bottom:16px;
  padding:15px 17px;
  border-radius:16px !important;
}
.practice-config-row{
  display:grid;
  grid-template-columns:minmax(300px,.9fr) minmax(430px,1.4fr) 42px;
  align-items:end;
  gap:18px;
}
.practice-config-group{min-width:0}
.practice-config-heading{
  display:flex;
  align-items:center;
  gap:7px;
  margin:0 0 8px;
  color:var(--muted);
  font-size:11px;
}
.practice-config-heading>span{
  width:20px;height:20px;border-radius:7px;
  display:grid;place-items:center;
  background:var(--primary-soft);color:var(--primary);
  font-size:10px;font-weight:850;
}
.practice-config-heading strong{font-size:11px}
.practice-duration-options,
.practice-language-options{
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
}
.practice-option,
.practice-language-option{
  min-height:34px;
  padding:0 11px;
  border:1px solid var(--line);
  border-radius:9px;
  background:var(--surface);
  color:var(--text);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  font-size:11px;
  font-weight:760;
  white-space:nowrap;
  transition:.14s ease;
}
.practice-option:hover,
.practice-language-option:hover{
  border-color:color-mix(in srgb,var(--primary) 45%,var(--line));
  color:var(--primary);
}
.practice-option.active,
.practice-language-option.active{
  border-color:var(--primary);
  background:var(--primary-soft);
  color:var(--primary);
  box-shadow:0 5px 14px color-mix(in srgb,var(--primary) 10%,transparent);
}
.practice-language-option{flex:1;padding-inline:8px}
.practice-language-option span{font-size:13px}
.practice-settings-btn{
  width:40px;height:40px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--surface);
  color:var(--text);
  cursor:pointer;
  font-size:15px;
}
.practice-settings-btn:hover{
  border-color:var(--primary);
  color:var(--primary);
  background:var(--primary-soft);
}

/* Settings that can be shared conceptually with the test. */
.practice-arena .tf-reading-card{
  --practice-font-size:20px;
}
.practice-arena .challenge-word-stream{
  font-size:var(--practice-font-size) !important;
}
.practice-arena .tf-reading-card[data-font="mono"] .challenge-word-stream{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace !important;
}
.practice-arena .tf-reading-card[data-font="serif"] .challenge-word-stream{
  font-family:Georgia,"Times New Roman",serif !important;
}
.practice-arena .tf-reading-card[data-highlight="underline"] .challenge-word.active{
  background:transparent !important;
  color:var(--primary) !important;
  box-shadow:none !important;
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-underline-offset:5px;
}
.practice-arena .tf-reading-card[data-highlight="none"] .challenge-word.active{
  background:transparent !important;
  box-shadow:none !important;
  color:var(--primary) !important;
}
body.practice-focus-mode .site-header,
body.practice-focus-mode .v6-page-head,
body.practice-focus-mode .practice-coach-summary,
body.practice-focus-mode .practice-config-card,
body.practice-focus-mode .typeflow-footer{
  display:none !important;
}
body.practice-focus-mode .practice-v6-page{
  padding-top:7vh !important;
}
body.practice-focus-mode .practice-arena{
  max-width:1080px;
  margin-inline:auto;
}

/* ==========================================================
   HEADER — 100% zoom fit
   ========================================================== */
@media (min-width:1250px) and (max-width:1500px){
  body:not(.admin-mode) .site-header{
    padding-inline:10px !important;
  }
  body:not(.admin-mode) .header-inner{
    width:calc(100% - 10px) !important;
    max-width:1320px !important;
    grid-template-columns:154px minmax(0,1fr) auto !important;
    gap:8px !important;
    padding:0 10px !important;
  }
  body:not(.admin-mode) .brand{
    gap:8px !important;
    font-size:16px !important;
  }
  body:not(.admin-mode) .brand-symbol{
    transform:scale(.82);
    transform-origin:left center;
    margin-right:-3px;
  }
  body:not(.admin-mode) .main-nav{
    gap:8px !important;
    min-width:0;
  }
  body:not(.admin-mode) .main-nav a{
    font-size:10.4px !important;
    font-weight:700 !important;
  }
  body:not(.admin-mode) .header-actions{
    gap:5px !important;
  }
  body:not(.admin-mode) .theme-quick-toggle{
    width:64px !important;
    height:34px !important;
    border-radius:10px !important;
  }
  body:not(.admin-mode) .theme-quick-toggle .theme-switch-dot{
    top:4px !important;left:4px !important;
    width:26px !important;height:26px !important;
    border-radius:8px !important;
  }
  body:not(.admin-mode) .theme-quick-toggle .theme-sun,
  body:not(.admin-mode) .theme-quick-toggle .theme-moon{
    width:31px !important;height:34px !important;font-size:11px !important;
  }
  html[data-theme="dark"] body:not(.admin-mode) .theme-quick-toggle .theme-switch-dot{
    transform:translateX(30px) !important;
  }
  body:not(.admin-mode) .language-picker{
    height:34px !important;
    padding:0 5px !important;
    gap:3px !important;
    font-size:10.5px !important;
  }
  body:not(.admin-mode) .language-picker select{font-size:10.5px !important}
  body:not(.admin-mode) .account-trigger{
    height:36px !important;
    max-width:112px !important;
    padding-right:7px !important;
    gap:6px !important;
  }
  body:not(.admin-mode) .account-trigger-copy small{display:none !important}
  body:not(.admin-mode) .account-trigger-copy strong{
    max-width:55px !important;
    font-size:10.5px !important;
  }
  body:not(.admin-mode) .account-chevron{display:none !important}
}

/* On narrower 100% laptop widths, use a real dropdown instead of squeezing
   nine navigation links until they overlap. */
@media (min-width:981px) and (max-width:1249px){
  body:not(.admin-mode) .site-header{
    height:66px !important;
    padding:6px 10px 0 !important;
  }
  body:not(.admin-mode) .header-inner{
    position:relative;
    width:100% !important;
    max-width:1160px !important;
    height:54px !important;
    grid-template-columns:minmax(150px,1fr) auto auto !important;
    gap:8px !important;
    padding:0 10px !important;
  }
  body:not(.admin-mode) .mobile-menu{
    display:grid !important;
    position:static !important;
    order:2;
    width:34px !important;height:34px !important;
    border-radius:9px !important;
  }
  body:not(.admin-mode) .main-nav{
    display:none !important;
    position:absolute !important;
    z-index:80;
    top:61px !important;
    left:0 !important;
    right:0 !important;
    height:auto !important;
    padding:9px !important;
    border:1px solid var(--line);
    border-radius:13px;
    background:color-mix(in srgb,var(--surface) 98%,transparent);
    box-shadow:0 18px 45px rgba(20,24,54,.16);
    backdrop-filter:blur(18px);
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:4px !important;
  }
  body:not(.admin-mode) .main-nav.open{
    display:grid !important;
  }
  body:not(.admin-mode) .main-nav a{
    height:38px !important;
    padding:0 10px !important;
    border-radius:8px;
    font-size:11px !important;
    justify-content:flex-start;
  }
  body:not(.admin-mode) .main-nav a:hover,
  body:not(.admin-mode) .main-nav a.active{
    background:var(--primary-soft);
  }
  body:not(.admin-mode) .main-nav a.active::after{display:none !important}
  body:not(.admin-mode) .header-actions{
    order:3;
    gap:5px !important;
  }
  body:not(.admin-mode) .account-trigger-copy{display:none !important}
  body:not(.admin-mode) .account-trigger{
    width:38px !important;max-width:38px !important;padding:4px !important;
  }
  body:not(.admin-mode) .account-chevron{display:none !important}
  body:not(.admin-mode) .language-picker{
    height:34px !important;padding:0 5px !important;
  }
  body:not(.admin-mode) .theme-quick-toggle{
    width:64px !important;height:34px !important;
  }
  body:not(.admin-mode) .theme-quick-toggle .theme-switch-dot{
    width:26px !important;height:26px !important;top:4px !important;left:4px !important;
  }
  body:not(.admin-mode) .theme-quick-toggle .theme-sun,
  body:not(.admin-mode) .theme-quick-toggle .theme-moon{
    width:31px !important;height:34px !important;font-size:11px !important;
  }
  html[data-theme="dark"] body:not(.admin-mode) .theme-quick-toggle .theme-switch-dot{
    transform:translateX(30px) !important;
  }
}

/* Practice controls collapse cleanly. */
@media (max-width:1050px){
  .practice-config-row{
    grid-template-columns:1fr 42px;
  }
  .practice-language-group{grid-column:1/-1;grid-row:2}
  .practice-settings-btn{grid-column:2;grid-row:1}
}
@media (max-width:760px){
  .typing-tool-page .tf-main-typing-stage .word-viewport{
    height:162px !important;
    min-height:162px !important;
    max-height:162px !important;
    padding:14px 14px 16px !important;
  }
  .typing-tool-page .tf-main-typing-stage .word-stream{
    font-size:18px !important;
    line-height:1.58 !important;
    gap:5px 8px !important;
  }
  .practice-v6-page .practice-config-card{padding:13px}
  .practice-config-row{grid-template-columns:1fr 40px;gap:12px}
  .practice-duration-options{overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  .practice-duration-options::-webkit-scrollbar{display:none}
  .practice-option{min-width:48px}
  .practice-language-options{overflow-x:auto;scrollbar-width:none}
  .practice-language-options::-webkit-scrollbar{display:none}
  .practice-language-option{min-width:100px;flex:0 0 auto}
}

/* ===== v6.6.9-full-width-test-exact-rows.css ===== */

/* TypeFlow v6.6.9
   Main Typing Test: full-width primary workspace + exact 4-row geometry.

   Why:
   - Practice/Duel word items have vertical padding, which increases each flex row.
   - Main .test-word did not, so a fifth row started inside the viewport and
     appeared partially clipped at the bottom.
   - The right rail also made the primary typing surface unnecessarily narrow.
*/

/* ==========================================================
   DESKTOP LAYOUT — typing is the primary task
   ========================================================== */
@media (min-width:981px){
  .typing-tool-page .premium-grid{
    grid-template-columns:minmax(0,1fr) !important;
    gap:14px !important;
  }

  /* Daily task + leaderboard remain visible, but no longer steal width
     from the typing surface. */
  .typing-tool-page .premium-side-stack{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:14px !important;
    width:100% !important;
    align-items:start !important;
  }

  .typing-tool-page .premium-side-card{
    min-width:0 !important;
    height:100% !important;
  }

  /* Keep the secondary row visually quieter than the main test. */
  .typing-tool-page .premium-side-card .section-head{
    min-height:48px !important;
  }

  .typing-tool-page .daily-main{
    grid-template-columns:64px minmax(0,1fr) !important;
    gap:12px !important;
  }

  .typing-tool-page .leader-list{
    max-height:170px;
    overflow:hidden;
  }
}

/* ==========================================================
   MAIN TEST — same clean row rhythm as Practice/Duel
   ========================================================== */
.typing-tool-page .tf-main-typing-stage{
  margin-left:15px !important;
  margin-right:15px !important;
}

/* Keep the familiar card height, but make the row math exact.
   20px × 1.58 = 31.6px line box
   + 4px vertical item padding = ~35.6px per row
   + 6px row gap.
   Four rows finish at ~177px, while row five starts after ~183px,
   so it is fully outside this 182px viewport. */
.typing-tool-page .tf-main-typing-stage .word-viewport{
  box-sizing:border-box !important;
  height:182px !important;
  min-height:182px !important;
  max-height:182px !important;
  padding:17px 18px 18px !important;
  overflow:hidden !important;
  contain:paint !important;
}

/* Absolutely no visual mask/gradient is used. */
.typing-tool-page .tf-main-typing-stage .word-viewport::after{
  content:none !important;
  display:none !important;
  background:none !important;
}

.typing-tool-page .tf-main-typing-stage .word-stream{
  display:flex !important;
  flex-wrap:wrap !important;
  align-content:flex-start !important;
  font-size:20px !important;
  line-height:1.58 !important;
  gap:6px 10px !important;
  font-weight:650 !important;
  padding:0 !important;
}

/* This is the missing piece that made Practice look clean while Test leaked
   the beginning of its fifth row. */
.typing-tool-page .tf-main-typing-stage .test-word{
  box-sizing:content-box !important;
  padding:2px 3px !important;
  min-height:0 !important;
  white-space:nowrap !important;
}

.typing-tool-page .tf-main-typing-stage .typing-entry-wrap{
  margin-top:12px !important;
}

/* Slightly more breathing room now that the test owns the full width. */
.typing-tool-page .premium-content-tabs,
.typing-tool-page .typing-language-control,
.typing-tool-page .test-config-row{
  max-width:none !important;
}

/* ==========================================================
   LAPTOP
   Keep the same exact row geometry; only reduce horizontal spacing.
   ========================================================== */
@media (min-width:981px) and (max-width:1249px){
  .typing-tool-page .tf-main-typing-stage{
    margin-left:13px !important;
    margin-right:13px !important;
  }

  .typing-tool-page .tf-main-typing-stage .word-viewport{
    height:174px !important;
    min-height:174px !important;
    max-height:174px !important;
    padding:14px 15px 14px !important;
  }

  .typing-tool-page .tf-main-typing-stage .word-stream{
    font-size:19px !important;
    line-height:1.58 !important;
    gap:5px 9px !important;
  }

  /* 19px row needs slightly more vertical body to keep row 5 outside. */
  .typing-tool-page .tf-main-typing-stage .test-word{
    padding:2px 3px !important;
  }

  .typing-tool-page .premium-side-stack{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

/* ==========================================================
   MOBILE — preserve the existing stacked mobile experience.
   ========================================================== */
@media (max-width:980px){
  .typing-tool-page .premium-side-stack{
    display:block !important;
  }

  .typing-tool-page .premium-side-stack > * + *{
    margin-top:14px !important;
  }

  .typing-tool-page .tf-main-typing-stage .test-word{
    padding:1px 3px !important;
  }
}

/* ===== v6.6.10-wheel-page-scroll.css ===== */

/* TypeFlow v6.6.10 — mouse wheel page scroll fix
   The main reading box is an internal programmatic viewport, but the user's
   wheel/trackpad gesture should scroll the document like a normal page. */
.typing-tool-page .tf-main-typing-stage .word-viewport{
  overscroll-behavior-y:auto !important;
  overscroll-behavior-x:auto !important;
  touch-action:pan-y !important;
  scrollbar-width:none !important;
}
.typing-tool-page .tf-main-typing-stage .word-viewport::-webkit-scrollbar{
  display:none !important;
}

/* ===== v6.6.11-wheel-page-scroll-all-typing.css ===== */

/* TypeFlow v6.6.11 — page wheel scrolling over Practice + Daily Challenge */
.practice-arena .tf-reading-card,
.challenge-arena .tf-reading-card{
  overscroll-behavior-y:auto !important;
  overscroll-behavior-x:auto !important;
  touch-action:pan-y !important;
  scrollbar-width:none !important;
}
.practice-arena .tf-reading-card::-webkit-scrollbar,
.challenge-arena .tf-reading-card::-webkit-scrollbar{
  display:none !important;
}

/* ===== v6.6.12-duel-wheel-mode-fix.css ===== */

/* TypeFlow v6.6.12 — Duel wheel scroll + mode display safety */
.duel-arena .duel-word-viewport,
.duel-arena .tf-reading-card{
  overscroll-behavior-y:auto !important;
  overscroll-behavior-x:auto !important;
  touch-action:pan-y !important;
  scrollbar-width:none !important;
}
.duel-arena .duel-word-viewport::-webkit-scrollbar,
.duel-arena .tf-reading-card::-webkit-scrollbar{
  display:none !important;
}

/* Hidden attribute must always win, even over any older badge display rule. */
#duel-ranked-badge[hidden]{
  display:none !important;
}

/* ===== v6.6.14-header-responsive-laptop.css ===== */

/* TypeFlow v6.6.14 — Header responsive rebuild
   Goals:
   - 100% zoom must not squeeze nav when an account is logged in.
   - 1366px / laptop widths use a real menu instead of overlapping links.
   - Header width is independent from the narrower typing content canvas.
*/

/* ==========================================================
   WIDE DESKTOP — full one-line navigation
   ========================================================== */
@media (min-width:1400px){
  body:not(.admin-mode) .site-header{
    height:70px !important;
    padding:7px 12px 0 !important;
  }

  body:not(.admin-mode) .header-inner{
    width:calc(100% - 20px) !important;
    max-width:1380px !important;
    height:55px !important;
    padding:0 13px !important;
    display:grid !important;
    grid-template-columns:160px minmax(0,1fr) auto !important;
    align-items:center !important;
    gap:10px !important;
    border-radius:14px !important;
  }

  body:not(.admin-mode) .brand{
    min-width:0 !important;
    gap:8px !important;
    font-size:17px !important;
  }

  body:not(.admin-mode) .brand strong{
    white-space:nowrap !important;
  }

  body:not(.admin-mode) .brand-symbol{
    width:29px !important;
    height:29px !important;
    flex:0 0 29px !important;
  }

  body:not(.admin-mode) .mobile-menu{
    display:none !important;
  }

  body:not(.admin-mode) .main-nav{
    display:flex !important;
    min-width:0 !important;
    height:100% !important;
    align-items:center !important;
    justify-content:center !important;
    gap:11px !important;
    overflow:visible !important;
  }

  body:not(.admin-mode) .main-nav a{
    min-width:0 !important;
    height:100% !important;
    padding:0 !important;
    font-size:11.2px !important;
    font-weight:720 !important;
    white-space:nowrap !important;
  }

  body:not(.admin-mode) .header-actions{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:6px !important;
    min-width:max-content !important;
  }

  body:not(.admin-mode) .theme-quick-toggle{
    width:62px !important;
    height:34px !important;
    transform:none !important;
    border-radius:10px !important;
  }

  body:not(.admin-mode) .theme-quick-toggle .theme-switch-dot{
    top:4px !important;
    left:4px !important;
    width:26px !important;
    height:26px !important;
    border-radius:8px !important;
  }

  body:not(.admin-mode) .theme-quick-toggle .theme-sun,
  body:not(.admin-mode) .theme-quick-toggle .theme-moon{
    width:30px !important;
    height:34px !important;
    font-size:10px !important;
  }

  html[data-theme="dark"] body:not(.admin-mode) .theme-quick-toggle .theme-switch-dot{
    transform:translateX(28px) !important;
  }

  body:not(.admin-mode) .language-picker{
    height:34px !important;
    padding:0 5px !important;
    gap:3px !important;
    font-size:10.5px !important;
    white-space:nowrap !important;
  }

  body:not(.admin-mode) .language-picker select{
    font-size:10.5px !important;
  }

  body:not(.admin-mode) .account-trigger{
    height:36px !important;
    max-width:122px !important;
    padding:3px 7px 3px 4px !important;
    gap:6px !important;
    border-radius:10px !important;
  }

  body:not(.admin-mode) .account-avatar{
    width:28px !important;
    height:28px !important;
    flex:0 0 28px !important;
    border-radius:8px !important;
    font-size:11px !important;
  }

  body:not(.admin-mode) .account-trigger-copy strong{
    max-width:60px !important;
    font-size:10.7px !important;
  }

  body:not(.admin-mode) .account-trigger-copy small{
    display:none !important;
  }

  body:not(.admin-mode) .account-chevron{
    display:none !important;
  }
}

/* Extra breathing room on genuinely large desktop screens. */
@media (min-width:1600px){
  body:not(.admin-mode) .header-inner{
    max-width:1460px !important;
    grid-template-columns:175px minmax(0,1fr) auto !important;
    padding-inline:16px !important;
    gap:14px !important;
  }

  body:not(.admin-mode) .main-nav{
    gap:15px !important;
  }

  body:not(.admin-mode) .main-nav a{
    font-size:11.8px !important;
  }

  body:not(.admin-mode) .account-trigger{
    max-width:142px !important;
  }

  body:not(.admin-mode) .account-trigger-copy strong{
    max-width:77px !important;
  }
}

/* ==========================================================
   LAPTOP / SMALL DESKTOP — proper hamburger navigation
   1366px laptops land here at browser zoom 100%.
   ========================================================== */
@media (min-width:981px) and (max-width:1399px){
  body:not(.admin-mode) .site-header{
    height:66px !important;
    padding:6px 12px 0 !important;
    overflow:visible !important;
  }

  body:not(.admin-mode) .header-inner{
    position:relative !important;
    width:100% !important;
    max-width:1180px !important;
    height:54px !important;
    padding:0 10px 0 12px !important;
    display:grid !important;
    grid-template-columns:minmax(150px,1fr) 38px auto !important;
    align-items:center !important;
    gap:7px !important;
    border-radius:13px !important;
    overflow:visible !important;
  }

  body:not(.admin-mode) .brand{
    min-width:0 !important;
    gap:8px !important;
    font-size:16.5px !important;
  }

  body:not(.admin-mode) .brand-symbol{
    width:28px !important;
    height:28px !important;
    flex:0 0 28px !important;
  }

  body:not(.admin-mode) .mobile-menu{
    display:grid !important;
    position:static !important;
    grid-column:2 !important;
    width:36px !important;
    height:36px !important;
    border-radius:9px !important;
    font-size:15px !important;
    z-index:82 !important;
  }

  body:not(.admin-mode) .main-nav{
    display:none !important;
    position:absolute !important;
    z-index:81 !important;
    top:61px !important;
    left:0 !important;
    right:0 !important;
    height:auto !important;
    padding:9px !important;
    border:1px solid var(--line) !important;
    border-radius:13px !important;
    background:color-mix(in srgb,var(--surface) 98%,transparent) !important;
    box-shadow:0 18px 45px rgba(8,10,24,.24) !important;
    backdrop-filter:blur(20px) !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    align-items:stretch !important;
    gap:5px !important;
    overflow:visible !important;
  }

  body:not(.admin-mode) .main-nav.open{
    display:grid !important;
  }

  body:not(.admin-mode) .main-nav a{
    width:100% !important;
    min-width:0 !important;
    height:39px !important;
    padding:0 11px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    border-radius:8px !important;
    font-size:11px !important;
    font-weight:720 !important;
    white-space:nowrap !important;
  }

  body:not(.admin-mode) .main-nav a:hover,
  body:not(.admin-mode) .main-nav a.active{
    background:var(--primary-soft) !important;
    color:var(--primary) !important;
  }

  body:not(.admin-mode) .main-nav a.active::after{
    display:none !important;
  }

  body:not(.admin-mode) .header-actions{
    grid-column:3 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:5px !important;
    min-width:max-content !important;
  }

  body:not(.admin-mode) .theme-quick-toggle{
    width:58px !important;
    height:34px !important;
    transform:none !important;
    border-radius:9px !important;
  }

  body:not(.admin-mode) .theme-quick-toggle .theme-switch-dot{
    width:26px !important;
    height:26px !important;
    top:4px !important;
    left:4px !important;
    border-radius:8px !important;
  }

  body:not(.admin-mode) .theme-quick-toggle .theme-sun,
  body:not(.admin-mode) .theme-quick-toggle .theme-moon{
    width:28px !important;
    height:34px !important;
    font-size:9px !important;
  }

  html[data-theme="dark"] body:not(.admin-mode) .theme-quick-toggle .theme-switch-dot{
    transform:translateX(24px) !important;
  }

  body:not(.admin-mode) .language-picker{
    height:34px !important;
    padding:0 4px !important;
    gap:2px !important;
    font-size:10px !important;
    white-space:nowrap !important;
  }

  body:not(.admin-mode) .language-picker select{
    font-size:10px !important;
    max-width:42px !important;
  }

  /* Account stays available, but only the avatar is needed at laptop width. */
  body:not(.admin-mode) .account-trigger{
    width:36px !important;
    min-width:36px !important;
    max-width:36px !important;
    height:36px !important;
    padding:3px !important;
    gap:0 !important;
    border-radius:9px !important;
  }

  body:not(.admin-mode) .account-avatar{
    width:28px !important;
    height:28px !important;
    flex:0 0 28px !important;
    border-radius:8px !important;
  }

  body:not(.admin-mode) .account-trigger-copy,
  body:not(.admin-mode) .account-chevron{
    display:none !important;
  }

  body:not(.admin-mode) .user-menu{
    position:relative !important;
  }

  body:not(.admin-mode) .account-dropdown{
    right:0 !important;
    left:auto !important;
    width:min(318px,calc(100vw - 24px)) !important;
    max-width:calc(100vw - 24px) !important;
  }
}

/* ==========================================================
   VERY NARROW LAPTOP / TABLET-LANDSCAPE
   Keep actions usable without crushing the brand.
   ========================================================== */
@media (min-width:981px) and (max-width:1120px){
  body:not(.admin-mode) .header-inner{
    grid-template-columns:minmax(135px,1fr) 36px auto !important;
    gap:5px !important;
  }

  body:not(.admin-mode) .theme-quick-toggle{
    display:none !important;
  }

  body:not(.admin-mode) .language-picker{
    padding-inline:2px !important;
  }
}

/* ==========================================================
   MOBILE SAFETY
   ========================================================== */
@media (max-width:980px){
  body:not(.admin-mode) .account-dropdown{
    width:min(318px,calc(100vw - 20px)) !important;
    max-width:calc(100vw - 20px) !important;
  }
}

/* ===== v6.6.16-blog-rich-content.css ===== */
/* TypeFlow v6.6.16 — public rich blog content */
.article-cover{margin:0 0 18px;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:var(--surface)}.article-cover img{display:block;width:100%;max-height:520px;object-fit:cover}.rich-blog-body{font-size:17px;line-height:1.85}.rich-blog-body p{font-size:17px;line-height:1.85;color:var(--text);margin:0 0 22px}.rich-blog-body h2{font-size:31px;line-height:1.25;letter-spacing:-.9px;margin:42px 0 15px}.rich-blog-body h3{font-size:24px;line-height:1.3;letter-spacing:-.45px;margin:34px 0 13px}.rich-blog-body h4{font-size:19px;margin:28px 0 11px}.rich-blog-body ul,.rich-blog-body ol{padding-left:28px;margin:0 0 22px}.rich-blog-body li{margin:7px 0}.rich-blog-body blockquote{margin:28px 0;padding:18px 22px;border-left:4px solid var(--primary);background:var(--surface-2);border-radius:0 14px 14px 0;color:var(--muted)}.rich-blog-body a{color:var(--primary);text-decoration:underline;text-underline-offset:3px}.rich-blog-body hr{border:0;border-top:1px solid var(--line);margin:38px 0}.rich-blog-body figure{margin:30px 0}.rich-blog-body figure img,.rich-blog-body>img{display:block;width:auto;max-width:100%;height:auto;margin-inline:auto;border-radius:16px;border:1px solid var(--line);box-shadow:0 12px 34px rgba(20,27,65,.08)}.rich-blog-body figcaption{text-align:center;color:var(--muted);font-size:12px;margin-top:9px}.rich-blog-body pre{overflow:auto;padding:18px;border-radius:13px;background:#101521;color:#e8edf7;font:13px/1.65 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.rich-blog-body code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.blog-card.with-cover{padding:0;overflow:hidden}.blog-card-cover{display:block;aspect-ratio:16/8.5;overflow:hidden;border-bottom:1px solid var(--line)}.blog-card-cover img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .25s ease}.blog-card:hover .blog-card-cover img{transform:scale(1.025)}.blog-card-content{padding:20px 22px;display:flex;flex-direction:column;flex:1}.blog-card-content>span{font-size:11px;color:var(--primary);font-weight:800}.blog-card-content h2{font-size:21px;line-height:1.25;margin:12px 0 8px}.blog-card-content h2 a{color:var(--text)}.blog-card-content p{font-size:14px;line-height:1.6;color:var(--muted);flex:1}.blog-card-content .blog-read{color:var(--primary);font-weight:800;font-size:13px}@media(max-width:720px){.rich-blog-body{font-size:16px}.rich-blog-body p{font-size:16px}.rich-blog-body h2{font-size:26px}.rich-blog-body h3{font-size:21px}.article-cover{border-radius:15px}}

/* ===== v6.6.18-server-clock.css ===== */

/* TypeFlow v6.6.18 — authoritative server clock */
.server-status-strip{
  position:relative;
  z-index:35;
  padding:0 18px;
  margin:5px 0 0;
  pointer-events:none;
}
.server-status-inner{
  width:min(1360px,calc(100% - 10px));
  min-height:42px;
  margin:0 auto;
  padding:6px 9px 6px 11px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  border:1px solid color-mix(in srgb,var(--line) 84%,transparent);
  border-radius:12px;
  background:color-mix(in srgb,var(--surface) 86%,transparent);
  box-shadow:0 10px 26px rgba(20,22,48,.045);
  backdrop-filter:blur(14px);
  pointer-events:auto;
}
.server-clock-primary,
.server-reset-copy{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}
.server-live-dot{
  width:7px;height:7px;border-radius:50%;
  flex:0 0 7px;
  background:#20c77a;
  box-shadow:0 0 0 4px color-mix(in srgb,#20c77a 13%,transparent),0 0 12px color-mix(in srgb,#20c77a 38%,transparent);
}
.server-clock-icon,
.server-reset-icon{
  width:25px;height:25px;border-radius:8px;
  display:grid;place-items:center;
  flex:0 0 25px;
  background:var(--primary-soft);
  color:var(--primary);
  font-size:11px;
  font-weight:900;
}
.server-clock-copy,
.server-reset-copy>div{
  display:grid;
  line-height:1.05;
  gap:3px;
}
.server-clock-copy small,
.server-reset-copy small,
.server-reset-countdown small{
  color:var(--muted);
  font-size:8.5px;
  font-weight:700;
  letter-spacing:.02em;
}
.server-clock-copy strong{
  color:var(--text);
  font-size:13px;
  font-variant-numeric:tabular-nums;
  letter-spacing:.035em;
}
.server-clock-date{
  color:var(--muted);
  font-size:9.5px;
  font-weight:700;
  white-space:nowrap;
}
.server-clock-divider{
  width:1px;height:25px;
  background:var(--line);
  margin-inline:2px;
}
.server-reset-copy>div strong{
  color:var(--text);
  font-size:9.5px;
  white-space:nowrap;
}
.server-reset-countdown{
  display:grid;
  gap:2px;
  padding-left:3px;
  min-width:70px;
}
.server-reset-countdown b{
  color:var(--primary);
  font-size:11px;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.server-zone-chip{
  min-height:24px;
  padding:0 8px;
  border:1px solid var(--line);
  border-radius:8px;
  display:inline-flex;
  align-items:center;
  color:var(--muted);
  background:var(--surface-2);
  font-size:8.5px;
  font-weight:800;
  white-space:nowrap;
}
.server-reset-note{
  display:flex !important;
  align-items:center;
  justify-content:flex-end;
  gap:7px;
  color:var(--muted);
  font-size:9px;
}
.server-reset-note b{
  color:var(--primary);
  font-size:9.5px;
  font-variant-numeric:tabular-nums;
}
.challenge-server-reset{
  display:block;
  margin-top:5px;
  color:var(--muted);
  font-size:9px;
  font-weight:650;
}
.challenge-server-reset b,
.server-reset-period-pill b{
  color:var(--primary);
  font-variant-numeric:tabular-nums;
}
.server-reset-period-pill{
  gap:5px !important;
}

@media (max-width:1399px){
  .server-status-inner{
    width:min(1180px,100%);
  }
}
@media (max-width:760px){
  .server-status-strip{padding:0 10px;margin-top:4px}
  .server-status-inner{
    min-height:39px;
    padding:5px 8px;
    justify-content:space-between;
    gap:7px;
  }
  .server-clock-date,
  .server-clock-divider,
  .server-reset-copy>div,
  .server-zone-chip{
    display:none;
  }
  .server-reset-countdown{min-width:64px}
}

/* ===== v6.6.19-identity-rankings.css ===== */

/* TypeFlow v6.6.19 — Identity Rankings
   Replaces first-letter avatars with deterministic geometric identities. */

.tf-identicon{
  --a1:#7567ff;
  --a2:#3d8dff;
  position:relative;
  display:inline-block;
  flex:0 0 auto;
  overflow:hidden;
  isolation:isolate;
  border-radius:11px;
  background:
    radial-gradient(circle at 72% 22%,rgba(255,255,255,.42) 0 8%,transparent 9%),
    linear-gradient(145deg,var(--a1),var(--a2));
  border:1px solid rgba(255,255,255,.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 6px 16px color-mix(in srgb,var(--a1) 20%,transparent);
}
.tf-identicon--md{width:36px;height:36px;border-radius:11px}
.tf-identicon--sm{width:27px;height:27px;border-radius:8px}
.tf-identicon--xs{width:24px;height:24px;border-radius:7px}

.tf-identicon>i,
.tf-identicon>b,
.tf-identicon>em{
  position:absolute;
  display:block;
  margin:0;
  font:inherit;
  background:rgba(255,255,255,.86);
  transform-origin:center;
}
.tf-identicon>i{
  width:44%;height:44%;
  left:12%;top:13%;
  border-radius:40% 60% 58% 42%;
  transform:rotate(var(--avatar-spin,0deg));
  opacity:.92;
}
.tf-identicon>b{
  width:38%;height:38%;
  right:9%;bottom:10%;
  border-radius:50%;
  opacity:.48;
}
.tf-identicon>em{
  width:15%;height:58%;
  left:45%;top:23%;
  border-radius:99px;
  opacity:.34;
  transform:rotate(calc(var(--avatar-spin,0deg) + 35deg));
}

/* Curated TypeFlow palette — no arbitrary rainbow noise. */
.tf-identicon.tone-0{--a1:#725cff;--a2:#8f4eea}
.tf-identicon.tone-1{--a1:#4777ff;--a2:#35a9e9}
.tf-identicon.tone-2{--a1:#7659dd;--a2:#ca5fd6}
.tf-identicon.tone-3{--a1:#466fd4;--a2:#54b9bd}
.tf-identicon.tone-4{--a1:#8462ee;--a2:#ee6d9c}
.tf-identicon.tone-5{--a1:#536bdc;--a2:#8a78f2}
.tf-identicon.tone-6{--a1:#4c7cb8;--a2:#6e5ae5}
.tf-identicon.tone-7{--a1:#7556b9;--a2:#4d87d8}
.tf-identicon.tone-8{--a1:#536ad0;--a2:#42a48d}
.tf-identicon.tone-9{--a1:#8a5ad3;--a2:#5079d9}

/* Motifs substantially change the internal geometry, not just color. */
.tf-identicon.motif-1>i{border-radius:3px;transform:rotate(calc(var(--avatar-spin,0deg) + 18deg))}
.tf-identicon.motif-1>b{border-radius:3px;transform:rotate(35deg)}
.tf-identicon.motif-2>i{width:55%;height:20%;top:23%;border-radius:99px}
.tf-identicon.motif-2>b{width:22%;height:52%;bottom:8%;border-radius:99px}
.tf-identicon.motif-3>i{clip-path:polygon(50% 0,100% 100%,0 100%);border-radius:0}
.tf-identicon.motif-3>b{clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);border-radius:0}
.tf-identicon.motif-4>i{width:50%;height:50%;border-radius:50% 50% 8px 50%}
.tf-identicon.motif-4>b{width:48%;height:18%;border-radius:99px;transform:rotate(-25deg)}
.tf-identicon.motif-5>i{width:20%;height:58%;border-radius:99px;left:23%;top:8%}
.tf-identicon.motif-5>b{width:20%;height:58%;border-radius:99px;right:22%;bottom:7%}
.tf-identicon.motif-6>i{clip-path:polygon(25% 0,100% 0,75% 100%,0 100%);border-radius:2px}
.tf-identicon.motif-6>em{width:55%;height:12%;left:22%;top:45%;border-radius:99px}
.tf-identicon.motif-7>i{width:58%;height:58%;left:21%;top:20%;border-radius:50%;background:transparent;border:3px solid rgba(255,255,255,.86)}
.tf-identicon.motif-7>b{width:22%;height:22%;right:13%;bottom:12%}

.tf-identicon.is-guest{
  filter:saturate(.58);
  opacity:.84;
  border-style:dashed;
}

/* Main leaderboard polish */
.leaderboard-table-card{
  overflow:hidden;
}
.leaderboard-table-card table{
  border-collapse:separate;
  border-spacing:0;
}
.leaderboard-table-card tbody tr{
  transition:background .16s ease,transform .16s ease;
}
.leaderboard-table-card tbody tr:hover{
  background:color-mix(in srgb,var(--primary) 5%,transparent);
}
.leaderboard-table-card tbody td{
  vertical-align:middle;
}
.leaderboard-player{
  display:flex;
  align-items:center;
  gap:11px;
  min-width:0;
}
.leaderboard-player-copy{
  min-width:0;
  display:grid;
  gap:3px;
}
.leaderboard-name-line{
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
}
.leaderboard-username{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.leaderboard-player-copy>small{
  color:var(--muted);
  font-size:9.5px;
  font-weight:650;
}
.leaderboard-role-badge{
  min-height:17px;
  padding:0 5px;
  border-radius:5px;
  display:inline-flex;
  align-items:center;
  background:var(--primary-soft);
  border:1px solid color-mix(in srgb,var(--primary) 28%,var(--line));
  color:var(--primary);
  font-size:7px;
  font-weight:900;
  letter-spacing:.065em;
}
.leaderboard-rank{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:9px;
  font-weight:850;
  font-size:11px;
  background:var(--surface-2);
  border:1px solid var(--line);
}
.leaderboard-rank i{font-style:normal;font-size:13px}
.leaderboard-rank.rank-1{
  color:#9a6800;
  border-color:color-mix(in srgb,#e9b833 48%,var(--line));
  background:color-mix(in srgb,#ffd96a 23%,var(--surface));
  box-shadow:0 5px 14px rgba(205,151,27,.11);
}
.leaderboard-rank.rank-2{
  color:#667185;
  border-color:color-mix(in srgb,#aeb8ca 48%,var(--line));
  background:color-mix(in srgb,#cbd3df 18%,var(--surface));
}
.leaderboard-rank.rank-3{
  color:#9a664b;
  border-color:color-mix(in srgb,#c88a68 42%,var(--line));
  background:color-mix(in srgb,#d99b78 15%,var(--surface));
}
.leaderboard-row.podium-row-1{
  background:linear-gradient(90deg,color-mix(in srgb,#ffc848 6%,transparent),transparent 46%);
}
.leaderboard-wpm{
  color:var(--primary);
  font-size:15px;
  font-variant-numeric:tabular-nums;
}
.leaderboard-wpm small{
  color:var(--muted);
  font-size:8px;
  font-weight:750;
}
.leaderboard-accuracy{
  display:inline-flex;
  align-items:center;
  min-height:25px;
  padding:0 8px;
  border-radius:7px;
  background:var(--surface-2);
  border:1px solid var(--line);
  font-size:10px;
  font-weight:750;
  font-variant-numeric:tabular-nums;
}

/* Country is shown beneath the player already; keep the dedicated column
   on desktop, hide it at compact laptop widths to avoid duplication. */
@media (max-width:1100px){
  .leaderboard-table-card th:nth-child(3),
  .leaderboard-table-card td:nth-child(3){display:none}
}

/* Existing home mini leaderboard had explicit .avatar sizing. */
.typing-tool-page .leader-list .tf-identicon{
  width:25px!important;
  height:25px!important;
}

/* Daily challenge row gains one identity column while staying compact. */
.challenge-boards .identity-ranking-row{
  grid-template-columns:28px 24px minmax(0,1fr) auto auto !important;
  gap:8px !important;
}

/* Light theme keeps identities crisp instead of washed out. */
html[data-theme="light"] .tf-identicon{
  border-color:rgba(255,255,255,.72);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 5px 13px color-mix(in srgb,var(--a1) 15%,transparent);
}

@media (max-width:650px){
  .leaderboard-table-card th:nth-child(5),
  .leaderboard-table-card td:nth-child(5){display:none}
  .leaderboard-player{gap:8px}
  .tf-identicon--md{width:32px;height:32px}
  .leaderboard-rank{width:27px;height:27px}
}

/* ===== v6.6.20-ranking-pagination.css ===== */

/* TypeFlow v6.6.20 — real leaderboard ranks + server-side pagination */

/* #1 is the only decorative rank. Everyone else is a clean number. */
.leaderboard-rank.rank-normal{
  width:auto;
  min-width:30px;
  height:30px;
  padding:0 7px;
  background:transparent !important;
  border-color:transparent !important;
  color:var(--muted);
  box-shadow:none !important;
  font-size:11px;
  font-variant-numeric:tabular-nums;
}
.leaderboard-rank.rank-1{
  width:31px;
  min-width:31px;
  height:31px;
  color:#9a6800;
  border-color:color-mix(in srgb,#e9b833 48%,var(--line));
  background:color-mix(in srgb,#ffd96a 23%,var(--surface));
  box-shadow:0 5px 14px rgba(205,151,27,.11);
}
.leaderboard-rank.rank-1 i{
  font-style:normal;
  font-size:13px;
}
.leaderboard-champion-row{
  background:linear-gradient(90deg,color-mix(in srgb,#ffc848 6%,transparent),transparent 46%);
}

/* Kill the old #2/#3 decorative styles if cached CSS is still loaded earlier. */
.leaderboard-rank.rank-2,
.leaderboard-rank.rank-3{
  color:var(--muted) !important;
  border-color:transparent !important;
  background:transparent !important;
  box-shadow:none !important;
}

/* Pagination */
.leaderboard-pagination{
  display:grid;
  grid-template-columns:minmax(120px,1fr) auto minmax(120px,1fr);
  align-items:center;
  gap:18px;
  margin-top:14px;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:13px;
  background:color-mix(in srgb,var(--surface) 94%,transparent);
}
.leaderboard-page-summary,
.leaderboard-page-current{
  display:flex;
  align-items:center;
  gap:5px;
  color:var(--muted);
  font-size:10px;
  font-variant-numeric:tabular-nums;
}
.leaderboard-page-summary strong,
.leaderboard-page-current strong{
  color:var(--text);
  font-size:10.5px;
}
.leaderboard-page-current{
  justify-content:flex-end;
}
.leaderboard-page-controls{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
}
.page-number,
.page-arrow{
  min-width:32px;
  height:32px;
  padding:0 8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--surface);
  color:var(--muted);
  font-size:10.5px;
  font-weight:800;
  text-decoration:none;
  transition:border-color .14s ease,background .14s ease,color .14s ease,transform .14s ease;
}
.page-number:hover,
.page-arrow:hover{
  border-color:color-mix(in srgb,var(--primary) 48%,var(--line));
  color:var(--primary);
  background:var(--primary-soft);
  transform:translateY(-1px);
}
.page-number.active{
  color:#fff;
  border-color:var(--primary);
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  box-shadow:0 6px 15px color-mix(in srgb,var(--primary) 22%,transparent);
}
.page-arrow{
  font-size:18px;
  line-height:1;
}
.page-arrow.is-disabled{
  pointer-events:none;
  opacity:.34;
}
.page-ellipsis{
  min-width:22px;
  text-align:center;
  color:var(--faint);
  font-size:13px;
  letter-spacing:.1em;
}

@media (max-width:760px){
  .leaderboard-pagination{
    grid-template-columns:1fr;
    gap:9px;
  }
  .leaderboard-page-summary,
  .leaderboard-page-current{
    justify-content:center;
  }
  .leaderboard-page-controls{
    order:-1;
    flex-wrap:wrap;
  }
  .page-number,
  .page-arrow{
    min-width:30px;
    height:30px;
  }
}

/* ===== v6.6.21-rank-alignment-medals.css ===== */

/* TypeFlow v6.6.21 — rank column alignment + gold/silver/bronze podium */

/* Keep the rank column physically identical for every row. */
.leaderboard-table-card th:first-child,
.leaderboard-table-card td:first-child{
  width:68px !important;
  min-width:68px !important;
  max-width:68px !important;
  text-align:center !important;
  padding-left:12px !important;
  padding-right:12px !important;
}

.leaderboard-rank-cell{
  vertical-align:middle !important;
}

.leaderboard-rank{
  width:34px !important;
  min-width:34px !important;
  max-width:34px !important;
  height:34px !important;
  padding:0 !important;
  margin:0 auto !important;
  display:grid !important;
  place-items:center !important;
  border-radius:10px !important;
  box-sizing:border-box !important;
  font-variant-numeric:tabular-nums;
  line-height:1 !important;
}

/* #1 — gold crown */
.leaderboard-rank.rank-1{
  color:#9c6900 !important;
  border:1px solid color-mix(in srgb,#e3ad26 55%,var(--line)) !important;
  background:
    linear-gradient(145deg,
      color-mix(in srgb,#ffd86b 28%,var(--surface)),
      color-mix(in srgb,#f5b936 17%,var(--surface))) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    0 6px 16px rgba(200,144,19,.13) !important;
}

/* #2 — silver */
.leaderboard-rank.rank-2{
  color:#697386 !important;
  border:1px solid color-mix(in srgb,#aeb8c8 55%,var(--line)) !important;
  background:
    linear-gradient(145deg,
      color-mix(in srgb,#e5eaf1 30%,var(--surface)),
      color-mix(in srgb,#b7c0cf 17%,var(--surface))) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.2),
    0 5px 13px rgba(121,134,153,.08) !important;
}

/* #3 — bronze */
.leaderboard-rank.rank-3{
  color:#986047 !important;
  border:1px solid color-mix(in srgb,#c88762 52%,var(--line)) !important;
  background:
    linear-gradient(145deg,
      color-mix(in srgb,#dda07c 24%,var(--surface)),
      color-mix(in srgb,#b87554 14%,var(--surface))) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 5px 13px rgba(146,89,61,.08) !important;
}

/* #4+ — clean neutral number, but same physical box so rows never shift. */
.leaderboard-rank.rank-normal{
  color:var(--muted) !important;
  border:1px solid transparent !important;
  background:transparent !important;
  box-shadow:none !important;
  font-size:11px !important;
}

/* Force the podium symbol/number to exactly the same optical center. */
.leaderboard-rank .rank-symbol{
  display:grid !important;
  place-items:center !important;
  width:100% !important;
  height:100% !important;
  margin:0 !important;
  padding:0 !important;
  font-style:normal !important;
  font-size:12px !important;
  font-weight:900 !important;
  line-height:1 !important;
}
.leaderboard-rank.rank-1 .rank-symbol{
  font-size:13px !important;
}

/* First three rows get only a very subtle background cue.
   Use identical cell padding so player/country/WPM columns don't drift. */
.leaderboard-table-card tbody tr.leaderboard-champion-row{
  background:linear-gradient(90deg,color-mix(in srgb,#f4bb39 5%,transparent),transparent 50%) !important;
}
.leaderboard-table-card tbody tr td{
  box-sizing:border-box !important;
}

/* The player column had visual drift because the first column contents
   had different widths. Give the second column a fixed left alignment too. */
.leaderboard-table-card th:nth-child(2),
.leaderboard-table-card td:nth-child(2){
  padding-left:20px !important;
}

/* Pagination alignment: center block must stay centered even if left/right
   summaries have different text widths. */
.leaderboard-pagination{
  grid-template-columns:1fr minmax(210px,auto) 1fr !important;
}
.leaderboard-page-controls{
  justify-self:center !important;
}
.leaderboard-page-summary{
  justify-self:start !important;
}
.leaderboard-page-current{
  justify-self:end !important;
}

/* Prevent layout nudge from bold/current page buttons. */
.page-number,
.page-arrow{
  box-sizing:border-box !important;
}
.page-number.active{
  transform:none !important;
}

@media (max-width:760px){
  .leaderboard-table-card th:first-child,
  .leaderboard-table-card td:first-child{
    width:50px !important;
    min-width:50px !important;
    max-width:50px !important;
    padding-left:7px !important;
    padding-right:7px !important;
  }
  .leaderboard-rank{
    width:30px !important;
    min-width:30px !important;
    max-width:30px !important;
    height:30px !important;
  }
}

/* ===== v6.6.22-competition-home.css ===== */

/* TypeFlow v6.6.22 — Daily Challenge / Ranked Duel separation */

/* ========================= DAILY CHALLENGE ========================= */
.challenge-head--daily-only{
  align-items:flex-start !important;
}
.challenge-head--daily-only>div:first-child{
  max-width:760px;
}
.challenge-daily-board{
  margin-top:18px;
  width:100%;
  padding:0 !important;
  overflow:hidden;
}
.challenge-daily-board-head{
  padding:20px 22px 17px;
  border-bottom:1px solid var(--line);
}
.challenge-daily-board-head p{
  margin:5px 0 0;
  color:var(--muted);
  font-size:11px;
}
.challenge-daily-board-meta{
  display:grid;
  justify-items:end;
  gap:4px;
  color:var(--muted);
  font-size:10px;
}
.challenge-daily-board-meta>span{
  color:var(--text);
  font-weight:800;
}
.challenge-daily-board-meta>b{
  color:var(--primary);
  font-size:9px;
}
.challenge-daily-ranking{
  padding:0 20px 12px;
}
.challenge-daily-ranking-head,
.challenge-daily-ranking-row{
  display:grid;
  grid-template-columns:58px minmax(240px,1.8fr) minmax(190px,1fr) 120px 110px;
  align-items:center;
  gap:12px;
}
.challenge-daily-ranking-head{
  min-height:42px;
  color:var(--muted);
  font-size:9px;
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.challenge-daily-ranking-row{
  min-height:55px;
  border-top:1px solid var(--line);
}
.challenge-daily-ranking-row.is-top-three{
  background:linear-gradient(90deg,color-mix(in srgb,var(--primary) 3%,transparent),transparent 58%);
}
.daily-rank{
  width:29px;height:29px;
  display:grid;place-items:center;
  margin-left:3px;
  border-radius:9px;
  color:var(--muted);
  font-size:10px;
  font-variant-numeric:tabular-nums;
}
.daily-rank-1{
  color:#9c6900;
  background:color-mix(in srgb,#ffd86b 21%,var(--surface));
  border:1px solid color-mix(in srgb,#e3ad26 48%,var(--line));
}
.daily-rank-2{
  color:#697386;
  background:color-mix(in srgb,#dce3ed 20%,var(--surface));
  border:1px solid color-mix(in srgb,#aeb8c8 42%,var(--line));
}
.daily-rank-3{
  color:#986047;
  background:color-mix(in srgb,#d99b78 16%,var(--surface));
  border:1px solid color-mix(in srgb,#c88762 40%,var(--line));
}
.daily-player{
  display:flex;align-items:center;gap:9px;min-width:0;
}
.daily-player>div{
  display:flex;align-items:center;gap:6px;min-width:0;
}
.daily-player strong{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:11.5px;
}
.daily-country{
  color:var(--muted);
  font-size:10px;
}
.daily-wpm{
  color:var(--primary);
  font-size:13px;
  font-variant-numeric:tabular-nums;
}
.daily-wpm small{font-size:7px;color:var(--muted)}
.daily-accuracy{
  width:max-content;
  padding:4px 7px;
  border-radius:7px;
  background:var(--surface-2);
  border:1px solid var(--line);
  font-size:9px;
  font-weight:800;
  font-variant-numeric:tabular-nums;
}
.challenge-daily-empty{
  min-height:150px;
  display:grid;
  place-items:center;
  align-content:center;
  gap:6px;
  text-align:center;
  color:var(--muted);
}
.challenge-daily-empty>span{
  width:38px;height:38px;border-radius:12px;
  display:grid;place-items:center;
  background:var(--primary-soft);
  color:var(--primary);
}
.challenge-daily-empty strong{color:var(--text);font-size:13px}
.challenge-daily-empty small{font-size:9px}

/* ========================= DUEL SEASON HEADER ========================= */
.duel-season-card{
  min-width:255px;
  padding:14px 15px;
  border:1px solid var(--line);
  border-radius:15px;
  background:linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--primary) 5%,var(--surface-2)));
  box-shadow:0 10px 28px rgba(20,24,54,.06);
}
.duel-season-card-top{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.duel-season-card-top>span{
  color:var(--primary);
  font-size:9px;font-weight:900;letter-spacing:.055em;text-transform:uppercase;
}
.duel-season-card-top>b{
  color:var(--muted);
  font-size:8px;
}
.duel-season-card>strong{
  display:block;
  margin-top:7px;
  color:var(--text);
  font-size:18px;
  font-variant-numeric:tabular-nums;
}
.duel-season-card>small{
  display:block;
  margin-top:2px;
  color:var(--muted);
  font-size:8.5px;
}
.duel-season-mini-status{
  display:grid;
  grid-template-columns:1fr auto auto;
  align-items:center;
  gap:8px;
  margin-top:11px;
  padding-top:10px;
  border-top:1px solid var(--line);
}
.duel-season-mini-status span{font-size:9px;color:var(--muted)}
.duel-season-mini-status b{font-size:11px;color:var(--text)}
.duel-season-mini-status em{
  font-style:normal;
  color:var(--primary);
  font-size:8px;
  font-weight:800;
}

/* ========================= RANKED SEASON HUB ========================= */
.ranked-season-hub{
  margin-top:18px;
  padding:0 !important;
  overflow:hidden;
}
.ranked-season-hub-head{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:20px 22px 18px;
  border-bottom:1px solid var(--line);
}
.ranked-season-hub-head h2{margin:0;font-size:19px}
.ranked-season-hub-head p{margin:5px 0 0;color:var(--muted);font-size:10.5px}
.ranked-season-deadline{
  min-width:145px;
  display:grid;
  justify-items:end;
  gap:2px;
}
.ranked-season-deadline small{font-size:8px;color:var(--muted)}
.ranked-season-deadline strong{font-size:13px;font-variant-numeric:tabular-nums}
.ranked-season-deadline span{font-size:8.5px;color:var(--primary);font-weight:800}
.ranked-season-layout{
  display:grid;
  grid-template-columns:minmax(0,1.65fr) minmax(245px,.65fr);
  min-height:280px;
}
.ranked-season-table{
  padding:8px 20px 14px;
  border-right:1px solid var(--line);
}
.ranked-season-table-head,
.ranked-season-row{
  display:grid;
  grid-template-columns:48px minmax(220px,1.6fr) 72px 90px 105px;
  align-items:center;
  gap:10px;
}
.ranked-season-table-head{
  min-height:37px;
  color:var(--muted);
  font-size:8px;
  font-weight:850;
  text-transform:uppercase;
}
.ranked-season-row{
  min-height:49px;
  border-top:1px solid var(--line);
  font-size:10px;
}
.ranked-hub-rank{
  width:27px;height:27px;
  display:grid;place-items:center;
  border-radius:8px;
  color:var(--muted);
  font-size:9px;
}
.ranked-hub-rank.rank-1{
  color:#9c6900;
  background:color-mix(in srgb,#ffd86b 20%,var(--surface));
  border:1px solid color-mix(in srgb,#e3ad26 44%,var(--line));
}
.ranked-hub-rank.rank-2{
  color:#697386;
  background:color-mix(in srgb,#dce3ed 18%,var(--surface));
}
.ranked-hub-rank.rank-3{
  color:#986047;
  background:color-mix(in srgb,#d99b78 15%,var(--surface));
}
.ranked-hub-player{
  display:flex;align-items:center;gap:9px;min-width:0;
}
.ranked-hub-player>div{display:grid;gap:2px;min-width:0}
.ranked-hub-player strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10.5px}
.ranked-hub-player small{font-size:8px;color:var(--muted)}
.ranked-hub-rating{font-size:11px;color:var(--primary);font-variant-numeric:tabular-nums}
.ranked-tier-chip{
  width:max-content;
  min-width:54px;
  padding:4px 7px;
  text-align:center;
  border-radius:7px;
  background:var(--primary-soft);
  color:var(--primary);
  font-size:8px;
  font-weight:800;
}
.ranked-season-empty{
  min-height:190px;
  display:grid;place-items:center;align-content:center;gap:6px;text-align:center;
  color:var(--muted);
}
.ranked-season-empty>span{font-size:28px;color:var(--primary)}
.ranked-season-empty strong{color:var(--text);font-size:12px}
.ranked-season-empty small{font-size:9px}
.ranked-your-season{
  padding:22px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--primary) 3%,var(--surface)),var(--surface));
}
.ranked-your-tier{
  display:flex;align-items:center;gap:11px;
  margin-top:13px;
}
.ranked-your-tier>i{
  width:42px;height:42px;border-radius:13px;
  display:grid;place-items:center;
  background:var(--primary-soft);
  color:var(--primary);
  font-style:normal;
  font-size:19px;
}
.ranked-your-tier>div{display:grid;gap:2px}
.ranked-your-tier strong{font-size:15px}
.ranked-your-tier span{font-size:9px;color:var(--muted)}
.ranked-your-placement{
  margin-top:17px;padding:11px 12px;
  border:1px solid var(--line);border-radius:10px;background:var(--surface-2);
  display:flex;align-items:center;justify-content:space-between;
}
.ranked-your-placement small{font-size:8px;color:var(--muted)}
.ranked-your-placement strong{font-size:18px;color:var(--primary)}
.ranked-unplaced{
  margin-top:17px;padding:11px 12px;
  border:1px dashed color-mix(in srgb,var(--primary) 38%,var(--line));
  border-radius:10px;background:var(--primary-soft);
}
.ranked-unplaced strong{display:block;color:var(--primary);font-size:10px}
.ranked-unplaced small{display:block;margin-top:4px;color:var(--muted);font-size:8.5px;line-height:1.45}
.ranked-your-stats{
  display:grid;grid-template-columns:repeat(3,1fr);
  margin-top:13px;
  border:1px solid var(--line);border-radius:10px;overflow:hidden;
}
.ranked-your-stats>div{padding:9px;text-align:center;border-right:1px solid var(--line)}
.ranked-your-stats>div:last-child{border-right:0}
.ranked-your-stats strong{display:block;font-size:12px}
.ranked-your-stats small{font-size:7.5px;color:var(--muted)}
.ranked-scroll-play{width:100%;margin-top:13px}

@media (max-width:980px){
  .challenge-daily-ranking-head,
  .challenge-daily-ranking-row{
    grid-template-columns:44px minmax(180px,1fr) 100px 85px;
  }
  .challenge-daily-ranking-head span:nth-child(3),
  .challenge-daily-ranking-row .daily-country{display:none}
  .ranked-season-layout{grid-template-columns:1fr}
  .ranked-season-table{border-right:0;border-bottom:1px solid var(--line)}
  .duel-season-card{min-width:230px}
}
@media (max-width:680px){
  .challenge-daily-ranking-head,
  .challenge-daily-ranking-row{
    grid-template-columns:38px minmax(130px,1fr) 80px;
  }
  .challenge-daily-ranking-head span:nth-child(5),
  .challenge-daily-ranking-row .daily-accuracy{display:none}
  .ranked-season-table-head,
  .ranked-season-row{
    grid-template-columns:38px minmax(130px,1fr) 70px;
  }
  .ranked-season-table-head span:nth-child(3),
  .ranked-season-table-head span:nth-child(5),
  .ranked-season-row>span:nth-child(3),
  .ranked-season-row>.ranked-tier-chip{display:none}
  .duel-hero{align-items:stretch!important;flex-direction:column}
  .duel-season-card{width:100%;min-width:0}
}


/* v6.6.23 duel tier badge cleanup + private room dark theme fix */
.tier-inline-badge{display:inline-flex;align-items:center;justify-content:center;min-width:74px;padding:5px 10px;border-radius:999px;border:1px solid color-mix(in srgb,var(--primary) 34%,var(--line));background:var(--primary-soft);color:var(--primary)!important;font-size:8px!important;font-weight:900;letter-spacing:.03em;text-transform:uppercase}
.tier-badge-box{width:48px;height:48px;display:grid;place-items:center;border-radius:14px;background:linear-gradient(145deg,color-mix(in srgb,var(--primary) 20%,var(--surface)),color-mix(in srgb,var(--primary) 8%,var(--surface-2)));border:1px solid color-mix(in srgb,var(--primary) 38%,var(--line));box-shadow:0 10px 24px rgba(54,44,122,.12);color:var(--primary);font-size:16px;font-weight:900;letter-spacing:.05em;flex:0 0 auto}
.tier-badge-box--lg{width:52px;height:52px;font-size:17px}
.tier-meta-label{display:block;margin-bottom:2px;color:var(--muted)!important;font-size:8px!important;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.duel-season-mini-status{grid-template-columns:auto auto auto!important}
.duel-season-mini-status .tier-inline-badge{min-width:64px}
.ranked-your-tier>div,.season-rank-hero>div{display:grid;gap:2px}
.ranked-your-tier strong,.season-rank-hero strong{line-height:1.05}
.season-rank-hero{align-items:center}
.season-rank-hero small{display:block;margin-top:4px;color:var(--muted)}

.duel-private-config,.duel-private-config *{color:var(--text)}
.duel-private-config{background:var(--surface-2)!important}
.private-room-action strong,.private-room-action small,.private-room-divider,.private-room-join label span,.private-room-options label span{color:var(--text)!important}
.private-room-action small,.private-room-divider,.private-room-join label span,.private-room-options label span{opacity:.82}
.private-room-join input,.private-room-options select{color:var(--text)!important;background:var(--surface)!important;border:1px solid var(--line)!important;-webkit-text-fill-color:var(--text)}
.private-room-join input::placeholder{color:var(--muted)!important;opacity:1}
.private-room-options select option,#duel-language option,#duel-duration option,#duel-private-language option,#duel-private-duration option{background:var(--surface)!important;color:var(--text)!important}
#duel-create-room,#duel-join-room{color:#fff}
#duel-join-room.outline-btn{color:var(--text)!important}

/* ===== v6.6.24-typing-mode-controls.css ===== */
/* TypeFlow v6.6.24 — unified typing controls, fullscreen layouts and tier emblems */

/* ========================= RANK / TIER EMBLEM ========================= */
.tier-emblem{
  --tier-a:#aeb7c8;
  --tier-b:#697386;
  position:relative;
  width:46px;
  height:46px;
  flex:0 0 46px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-radius:13px;
  border:1px solid color-mix(in srgb,var(--tier-a) 48%,var(--line));
  background:
    radial-gradient(circle at 30% 22%,rgba(255,255,255,.24),transparent 28%),
    linear-gradient(145deg,color-mix(in srgb,var(--tier-a) 24%,var(--surface)),color-mix(in srgb,var(--tier-b) 16%,var(--surface-2)));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 8px 20px color-mix(in srgb,var(--tier-b) 13%,transparent);
}
.tier-emblem--lg{width:52px;height:52px;flex-basis:52px;border-radius:15px}
.tier-emblem--sm{width:24px;height:24px;flex-basis:24px;border-radius:7px}
.tier-emblem>i,
.tier-emblem>b,
.tier-emblem>em{position:absolute;display:block;margin:0;font:inherit}
.tier-emblem>i{
  width:44%;height:44%;
  border:2px solid color-mix(in srgb,var(--tier-a) 84%,#fff);
  border-radius:7px 11px 7px 11px;
  transform:rotate(45deg);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--tier-b) 9%,transparent);
}
.tier-emblem>b{
  width:18%;height:18%;
  border-radius:50%;
  background:color-mix(in srgb,var(--tier-a) 82%,#fff);
  box-shadow:0 0 12px color-mix(in srgb,var(--tier-a) 35%,transparent);
}
.tier-emblem>em{
  width:42%;height:2px;
  border-radius:99px;
  background:color-mix(in srgb,var(--tier-a) 68%,#fff);
  transform:rotate(-45deg);
  opacity:.54;
}
.tier-emblem--sm>i{border-width:1px;border-radius:4px 6px 4px 6px}
.tier-emblem--sm>em{height:1px}
.tier-bronze{--tier-a:#c88762;--tier-b:#8a5039}
.tier-silver{--tier-a:#bdc7d6;--tier-b:#68758d}
.tier-gold{--tier-a:#e6ba42;--tier-b:#a66f09}
.tier-platinum{--tier-a:#85c6c7;--tier-b:#477d91}
.tier-diamond{--tier-a:#73a8ff;--tier-b:#6657db}
.tier-master{--tier-a:#9b72ff;--tier-b:#7842bc}
.tier-grandmaster{--tier-a:#e76fc1;--tier-b:#8d4bd1}
.duel-season-mini-status>span:not(.tier-emblem){color:var(--text);font-size:9px;font-weight:800}
.ranked-your-tier .tier-emblem,.season-rank-hero .tier-emblem{align-self:center}

/* ========================= SHARED TOOL BUTTONS ========================= */
.typing-mode-head-actions{display:flex;align-items:center;justify-content:flex-end;gap:12px}
.typing-mode-time{display:grid;justify-items:end;gap:2px}
.typing-mode-time small{color:var(--muted);font-size:9px}
.typing-mode-time strong{font-variant-numeric:tabular-nums}
.typing-mode-tools{display:flex;align-items:center;gap:6px}
.typing-mode-tool{
  width:38px;height:38px;
  display:grid;place-items:center;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--surface);
  color:var(--muted);
  font-size:14px;
  cursor:pointer;
  transition:.15s border-color,.15s color,.15s background,.15s transform;
}
.typing-mode-tool:hover,.typing-mode-tool.active{
  border-color:color-mix(in srgb,var(--primary) 52%,var(--line));
  color:var(--primary);
  background:var(--primary-soft);
}
.typing-mode-tool:active{transform:scale(.96)}

/* ========================= MAIN TEST — FONT SIZE REALLY WORKS ========================= */
.typing-tool-page .tf-main-typing-stage .word-stream{
  font-size:var(--typing-size,26px) !important;
  line-height:1.58 !important;
}
.typing-tool-page .tf-main-typing-stage .word-viewport{
  height:var(--typing-viewport-height,182px) !important;
  min-height:var(--typing-viewport-height,182px) !important;
  max-height:var(--typing-viewport-height,182px) !important;
}

/* ========================= PRACTICE / CHALLENGE SETTINGS =========================
   v6.6.42: no separate typing-surface rules.
   Practice + Daily Challenge now use the Main Test classes directly.
   ================================================================================ */

/* ========================= MAIN TEST FULLSCREEN ========================= */
#typing-panel:fullscreen{
  width:100vw !important;
  height:100vh !important;
  max-width:none !important;
  margin:0 !important;
  padding:clamp(22px,3.5vh,48px) clamp(22px,5vw,88px) !important;
  border:0 !important;
  border-radius:0 !important;
  overflow:auto !important;
  background:var(--bg) !important;
  box-sizing:border-box !important;
}
#typing-panel:fullscreen > .test-config-row,
#typing-panel:fullscreen > .typing-language-control,
#typing-panel:fullscreen > .premium-content-tabs,
#typing-panel:fullscreen > .custom-text-box,
#typing-panel:fullscreen > .tf-main-typing-stage,
#typing-panel:fullscreen > .premium-metrics,
#typing-panel:fullscreen > .premium-actions,
#typing-panel:fullscreen > .test-status{
  width:min(1480px,100%) !important;
  max-width:1480px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  box-sizing:border-box !important;
}
#typing-panel:fullscreen > .test-config-row{margin-top:0!important}
#typing-panel:fullscreen .typing-language-control{position:relative!important}
#typing-panel:fullscreen .workspace-tools{right:14px!important}
#typing-panel:fullscreen .tf-main-typing-stage{margin-top:14px!important}
#typing-panel:fullscreen .premium-actions{padding-top:18px!important}
#typing-panel:fullscreen .word-stream{font-size:var(--typing-size,26px)!important}

/* ========================= PRACTICE / CHALLENGE FULLSCREEN ========================= */
.practice-arena:fullscreen,
.challenge-arena:fullscreen{
  width:100vw !important;
  height:100vh !important;
  max-width:none !important;
  margin:0 !important;
  padding:clamp(24px,5vh,58px) clamp(22px,6vw,100px) !important;
  border:0 !important;
  border-radius:0 !important;
  overflow:auto !important;
  background:var(--bg) !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  box-sizing:border-box !important;
}
.practice-arena:fullscreen > *,
.challenge-arena:fullscreen > *{
  width:min(1420px,100%) !important;
  max-width:1420px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  box-sizing:border-box !important;
}
.practice-arena:fullscreen .practice-arena-head,
.challenge-arena:fullscreen .challenge-topline{margin-bottom:14px!important}
.practice-arena:fullscreen .challenge-word-viewport,
.challenge-arena:fullscreen .challenge-word-viewport{
  margin-top:0!important;
}
.practice-arena:fullscreen .challenge-input-wrap,
.challenge-arena:fullscreen .challenge-input-wrap{
  margin-top:12px!important;
}
.practice-arena:fullscreen .challenge-actions,
.challenge-arena:fullscreen .challenge-actions{
  padding-top:18px!important;
}

/* ========================= DUEL FULLSCREEN ========================= */
.duel-rule{display:flex!important;align-items:center!important;justify-content:center!important;gap:12px!important}
.duel-rule .duel-fullscreen-toggle{margin-left:auto}
.duel-arena-actions .duel-fullscreen-toggle{margin-left:0}
#duel-page:fullscreen{
  width:100vw !important;
  height:100vh !important;
  max-width:none !important;
  margin:0 !important;
  padding:clamp(22px,4vh,54px) clamp(22px,5vw,90px) !important;
  overflow:auto !important;
  background:var(--bg) !important;
  box-sizing:border-box !important;
}
#duel-page:fullscreen > .duel-hero,
#duel-page:fullscreen > .duel-invite-strip,
#duel-page:fullscreen > .ranked-season-hub,
#duel-page:fullscreen > .duel-meta-panels{
  display:none !important;
}
#duel-page:fullscreen > .duel-lobby,
#duel-page:fullscreen > .duel-search,
#duel-page:fullscreen > .duel-arena,
#duel-page:fullscreen > .duel-result{
  width:min(1480px,100%) !important;
  max-width:1480px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  box-sizing:border-box !important;
}
#duel-page:fullscreen > .duel-lobby,
#duel-page:fullscreen > .duel-search,
#duel-page:fullscreen > .duel-arena,
#duel-page:fullscreen > .duel-result{
  margin-top:clamp(8px,5vh,58px) !important;
}
#duel-page:fullscreen .duel-word-viewport{
  height:clamp(190px,30vh,320px) !important;
}

@media(max-width:760px){
  .typing-mode-head-actions{gap:7px}
  .typing-mode-tool{width:35px;height:35px}
  .practice-arena:fullscreen,.challenge-arena:fullscreen,#typing-panel:fullscreen,#duel-page:fullscreen{padding:16px 12px!important}
  #typing-panel:fullscreen .test-config-row{grid-template-columns:1fr!important}
  #duel-page:fullscreen .duel-versus{grid-template-columns:1fr 46px 1fr!important}
}

/* Practice config no longer reserves an empty third column for the moved gear button. */
.practice-config-row{
  grid-template-columns:minmax(300px,.9fr) minmax(430px,1.4fr) !important;
}
.duel-season-mini-status{
  grid-template-columns:24px minmax(0,1fr) auto auto !important;
}
@media(max-width:1050px){
  .practice-config-row{grid-template-columns:1fr !important}
  .practice-language-group{grid-column:auto!important;grid-row:auto!important}
}
@media(max-width:760px){
  .practice-config-row{grid-template-columns:1fr !important}
}

/* ===== v6.6.25-practice-challenge-exact-rows.css ===== */
/* Keyzira v6.6.42 — retired.
Practice and Daily Challenge now use Main Test row geometry directly. */

/* ===== v6.6.26-unified-mode-layout.css ===== */
/* TypeFlow v6.6.26 — one control language for Test / Practice / Daily Challenge */

/* Practice and Challenge now use the Test page as the visual source of truth. */
.tf-unified-typing-card{
  padding:0 !important;
  overflow:hidden !important;
  border-radius:16px !important;
}
.tf-mode-config{
  background:var(--surface);
  border-bottom:1px solid var(--line);
}
.tf-mode-config .test-config-row{
  display:grid !important;
  grid-template-columns:1.05fr 1.18fr !important;
  align-items:start !important;
  gap:28px !important;
  padding:18px 18px 14px !important;
  border-bottom:1px solid color-mix(in srgb,var(--line) 82%,transparent) !important;
}
.tf-mode-config .control-heading{
  height:22px !important;
  margin-bottom:9px !important;
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  color:var(--muted) !important;
  font-size:11px !important;
  font-weight:800 !important;
}
.tf-mode-config .control-icon{
  width:21px !important;
  height:21px !important;
  display:grid !important;
  place-items:center !important;
  border:1px solid color-mix(in srgb,var(--primary) 24%,var(--line)) !important;
  border-radius:50% !important;
  background:var(--primary-soft) !important;
  color:var(--primary) !important;
  font-size:10px !important;
  flex:0 0 21px !important;
}
.tf-mode-config .segmented{
  display:flex !important;
  align-items:center !important;
  flex-wrap:wrap !important;
  gap:6px !important;
}
.tf-mode-config .option-btn{
  min-width:0 !important;
  height:34px !important;
  padding:0 11px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border:1px solid var(--line) !important;
  border-radius:9px !important;
  background:var(--surface) !important;
  color:var(--text) !important;
  font-size:11px !important;
  font-weight:780 !important;
  line-height:1 !important;
  text-decoration:none !important;
  white-space:nowrap !important;
  box-shadow:none !important;
}
.tf-mode-config a.option-btn:hover{
  border-color:color-mix(in srgb,var(--primary) 45%,var(--line)) !important;
  color:var(--primary) !important;
}
.tf-mode-config .option-btn.active{
  border-color:color-mix(in srgb,var(--primary) 60%,var(--line)) !important;
  background:linear-gradient(180deg,color-mix(in srgb,var(--primary) 10%,var(--surface)),var(--primary-soft)) !important;
  color:var(--primary) !important;
  box-shadow:0 5px 14px color-mix(in srgb,var(--primary) 10%,transparent) !important;
}
.tf-static-option{cursor:default !important;pointer-events:none !important}

/* Identical language row + identical Settings / Fullscreen placement. */
.tf-mode-config .typing-language-control{
  position:relative !important;
  margin:10px 18px 12px !important;
  min-height:48px !important;
  display:grid !important;
  grid-template-columns:135px minmax(0,1fr) auto !important;
  align-items:center !important;
  gap:10px !important;
  padding:7px 8px !important;
  border:1px solid color-mix(in srgb,var(--primary) 38%,var(--line)) !important;
  border-radius:10px !important;
  background:linear-gradient(180deg,color-mix(in srgb,var(--primary) 3%,var(--surface)),var(--surface)) !important;
  box-shadow:none !important;
}
.tf-mode-config .typing-language-label{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  min-width:0 !important;
}
.tf-mode-config .language-globe{
  width:25px !important;
  height:25px !important;
  display:grid !important;
  place-items:center !important;
  border-radius:8px !important;
  background:var(--primary-soft) !important;
  color:var(--primary) !important;
  font-size:12px !important;
}
.tf-mode-config .typing-language-label strong{font-size:10.5px !important;white-space:nowrap !important}
.tf-mode-config .typing-language-options{
  display:grid !important;
  grid-template-columns:repeat(5,minmax(80px,1fr)) !important;
  gap:6px !important;
  min-width:0 !important;
}
.tf-mode-config .typing-lang-btn{
  min-width:0 !important;
  height:34px !important;
  padding:0 7px !important;
  border:1px solid transparent !important;
  border-radius:8px !important;
  background:transparent !important;
  color:var(--text) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:5px !important;
  font-size:10px !important;
  font-weight:760 !important;
  white-space:nowrap !important;
  text-decoration:none !important;
}
.tf-mode-config .typing-lang-btn>span{font-size:10px !important}
.tf-mode-config .typing-lang-btn:hover{background:var(--surface-3) !important}
.tf-mode-config .typing-lang-btn.active{
  border-color:color-mix(in srgb,var(--primary) 55%,var(--line)) !important;
  background:var(--surface) !important;
  color:var(--primary) !important;
  box-shadow:0 4px 12px color-mix(in srgb,var(--primary) 9%,transparent) !important;
}
.tf-mode-config .workspace-tools{display:flex !important;align-items:center !important;gap:5px !important}
.tf-mode-config .tool-icon-btn{
  width:34px !important;height:34px !important;
  display:grid !important;place-items:center !important;
  border:1px solid var(--line) !important;
  border-radius:8px !important;
  background:var(--surface) !important;
  color:var(--muted) !important;
  cursor:pointer !important;
}
.tf-mode-config .tool-icon-btn:hover{border-color:var(--primary) !important;color:var(--primary) !important;background:var(--primary-soft) !important}

/* One session-header geometry for Practice and Challenge. */
.tf-session-head{
  min-height:58px !important;
  padding:11px 18px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:18px !important;
  border-bottom:1px solid var(--line) !important;
  background:var(--surface-2) !important;
  box-sizing:border-box !important;
}
.tf-session-head>div:first-child{display:flex !important;align-items:center !important;gap:10px !important;min-width:0 !important}
.tf-session-head>div:first-child>strong{font-size:10.5px !important;white-space:nowrap !important}
.tf-session-head .challenge-server-reset{margin:0 !important;font-size:8.5px !important;white-space:nowrap !important}
.tf-session-time{display:grid !important;justify-items:end !important;gap:2px !important;flex:0 0 auto !important}
.tf-session-time small{color:var(--muted) !important;font-size:8px !important}
.tf-session-time strong{font-size:14px !important;font-variant-numeric:tabular-nums !important}

/* v6.6.42 — no separate Practice/Challenge typing-surface geometry. */

/* The old standalone practice/challenge control styles must not reserve space anymore. */
.practice-config-card,.challenge-langs{display:none !important}

/* Fullscreen keeps the exact same hierarchy; controls do not jump to a new place. */
.practice-arena:fullscreen,
.challenge-arena:fullscreen{
  justify-content:flex-start !important;
  padding:clamp(18px,3vh,34px) clamp(18px,5vw,72px) !important;
}
.practice-arena:fullscreen>.tf-mode-config,
.challenge-arena:fullscreen>.tf-mode-config,
.practice-arena:fullscreen>.tf-session-head,
.challenge-arena:fullscreen>.tf-session-head,
.practice-arena:fullscreen>.tf-reading-card,
.challenge-arena:fullscreen>.tf-reading-card,
.practice-arena:fullscreen>.tf-entry-card,
.challenge-arena:fullscreen>.tf-entry-card,
.practice-arena:fullscreen>.tf-typing-stats,
.challenge-arena:fullscreen>.tf-typing-stats,
.practice-arena:fullscreen>.challenge-actions,
.challenge-arena:fullscreen>.challenge-actions{
  width:min(1320px,100%) !important;
  max-width:1320px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
.practice-arena:fullscreen>.tf-mode-config,
.challenge-arena:fullscreen>.tf-mode-config{border:1px solid var(--line) !important;border-radius:14px 14px 0 0 !important;overflow:hidden !important}
.practice-arena:fullscreen>.tf-session-head,
.challenge-arena:fullscreen>.tf-session-head{border-left:1px solid var(--line)!important;border-right:1px solid var(--line)!important}

@media(max-width:1050px){
  .tf-mode-config .test-config-row{grid-template-columns:1fr !important;gap:13px !important}
  .tf-mode-config .typing-language-control{grid-template-columns:110px minmax(0,1fr) auto !important}
  .tf-mode-config .typing-language-options{display:flex !important;overflow-x:auto !important;scrollbar-width:none !important}
  .tf-mode-config .typing-lang-btn{min-width:104px !important}
}
@media(max-width:680px){
  .tf-mode-config .test-config-row{padding:13px 12px 10px !important}
  .tf-mode-config .typing-language-control{margin:8px 12px 10px !important;grid-template-columns:1fr auto !important}
  .tf-mode-config .typing-language-options{grid-column:1/-1 !important;grid-row:2 !important}
  .tf-session-head{padding-inline:12px !important}
  .tf-session-head>div:first-child>strong{display:none !important}
}

/* ===== v6.6.27-autostart-practice-challenge.css ===== */

/* TypeFlow v6.6.27 — type-to-start parity + Practice vertical priority */

/* The typing workspace is the primary action on Personal Practice.
   Coach insights stay available, but come after the actual drill. */
.practice-v6-page{
  padding-top:20px !important;
}
.practice-v6-page>.v6-page-head{
  margin-bottom:14px !important;
}
.practice-v6-page>.practice-arena{
  margin-top:0 !important;
}
.practice-coach-summary--below{
  margin-top:16px !important;
  margin-bottom:0 !important;
  padding:14px 16px !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  border-radius:14px !important;
  box-shadow:none !important;
}
.practice-coach-summary--below>div>span{
  margin-bottom:6px !important;
  font-size:10.5px !important;
}
.practice-coach-summary--below .practice-chip-row b{
  padding:5px 8px !important;
  border-radius:7px !important;
  font-size:10.5px !important;
}

/* Idle inputs must look interactive because typing itself is now a start action. */
#practice-input:not(:disabled),
#challenge-input:not(:disabled){
  cursor:text;
}
.practice-arena:not(.is-running) #practice-input,
.challenge-arena:not(.is-running) #challenge-input{
  caret-color:var(--primary);
}

/* Sticky header safety: section targets / fullscreen restoration should land
   beneath the header instead of visually hiding the page title. */
.practice-v6-page,
.challenge-page,
.practice-arena,
.challenge-arena{
  scroll-margin-top:92px;
}

/* When browsers restore scroll after leaving fullscreen, keep enough visual
   breathing room below the sticky header. */
.practice-arena:fullscreen,
.challenge-arena:fullscreen{
  scroll-margin-top:0;
}

@media(max-width:760px){
  .practice-coach-summary--below{
    grid-template-columns:1fr !important;
  }
}

/* ===== v6.6.30-keyzira-fullscreen.css ===== */
/* Keyzira v6.6.30 — brand + authoritative Practice/Challenge fullscreen */

/* Brand mark */
body:not(.admin-mode) .brand .keyzira-mark{
  width:31px !important;
  height:31px !important;
  min-width:31px !important;
  flex:0 0 31px !important;
  display:grid !important;
  place-items:center !important;
  margin:0 !important;
  border-radius:9px !important;
  background:linear-gradient(145deg,var(--primary),#38b8e8) !important;
  color:#fff !important;
  font-size:13px !important;
  font-weight:900 !important;
  line-height:1 !important;
  letter-spacing:-.02em !important;
  box-shadow:0 6px 16px color-mix(in srgb,var(--primary) 24%,transparent) !important;
  transform:none !important;
}
body:not(.admin-mode) .brand .keyzira-mark span{display:none!important}

/*
  There were multiple historical fullscreen rules using conflicting flex/grid,
  child max-widths and margins. This block is the single final authority.
*/
.practice-arena:fullscreen,
.challenge-arena:fullscreen{
  width:100vw !important;
  height:100vh !important;
  max-width:none !important;
  min-height:100vh !important;
  margin:0 !important;
  padding:clamp(20px,3vh,32px) clamp(22px,4vw,56px) !important;
  border:0 !important;
  border-radius:0 !important;
  background:var(--bg) !important;
  overflow:auto !important;
  box-sizing:border-box !important;

  display:grid !important;
  grid-template-columns:minmax(0,min(1180px,calc(100vw - 44px))) !important;
  grid-auto-rows:max-content !important;
  justify-content:center !important;
  align-content:center !important;
  gap:0 !important;
}

.practice-arena:fullscreen > *,
.challenge-arena:fullscreen > *{
  grid-column:1 !important;
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  margin-left:0 !important;
  margin-right:0 !important;
  box-sizing:border-box !important;
}

.practice-arena:fullscreen > .tf-mode-config,
.challenge-arena:fullscreen > .tf-mode-config{
  margin:0 !important;
  border:1px solid var(--line) !important;
  border-radius:16px 16px 0 0 !important;
  overflow:visible !important;
  background:var(--surface) !important;
}

.practice-arena:fullscreen > .tf-session-head,
.challenge-arena:fullscreen > .tf-session-head{
  min-height:56px !important;
  margin:0 !important;
  padding:11px 16px !important;
  border-left:1px solid var(--line) !important;
  border-right:1px solid var(--line) !important;
  border-bottom:1px solid var(--line) !important;
  background:var(--surface) !important;
}

/* Reading/input are intentionally inset by the same amount, exactly like one workspace. */
.practice-arena:fullscreen > #practice-word-viewport,
.challenge-arena:fullscreen > #challenge-word-viewport{
  width:calc(100% - 36px) !important;
  max-width:none !important;
  margin:16px 18px 0 !important;
}
.practice-arena:fullscreen > .tf-entry-card,
.challenge-arena:fullscreen > .tf-entry-card{
  width:calc(100% - 36px) !important;
  max-width:none !important;
  margin:11px 18px 0 !important;
}
.practice-arena:fullscreen > .tf-typing-stats,
.challenge-arena:fullscreen > .tf-typing-stats{
  width:calc(100% - 36px) !important;
  max-width:none !important;
  margin:12px 18px 0 !important;
}
.practice-arena:fullscreen > .challenge-actions,
.challenge-arena:fullscreen > .challenge-actions{
  width:calc(100% - 36px) !important;
  max-width:none !important;
  min-height:64px !important;
  margin:0 18px !important;
  padding:13px 0 0 !important;
}

.practice-arena:fullscreen .tf-config-primary-row,
.challenge-arena:fullscreen .tf-config-primary-row{
  padding-top:12px !important;
}
.practice-arena:fullscreen .tf-mode-language-control,
.challenge-arena:fullscreen .tf-mode-language-control{
  margin-bottom:10px !important;
}

/* On short screens, centering can clip the top. Switch to safe top alignment. */
@media (max-height:720px){
  .practice-arena:fullscreen,
  .challenge-arena:fullscreen{
    align-content:start !important;
    padding-top:18px !important;
    padding-bottom:18px !important;
  }
}
@media (max-width:760px){
  .practice-arena:fullscreen,
  .challenge-arena:fullscreen{
    grid-template-columns:minmax(0,calc(100vw - 24px)) !important;
    padding:12px !important;
  }
  .practice-arena:fullscreen > #practice-word-viewport,
  .challenge-arena:fullscreen > #challenge-word-viewport,
  .practice-arena:fullscreen > .tf-entry-card,
  .challenge-arena:fullscreen > .tf-entry-card,
  .practice-arena:fullscreen > .tf-typing-stats,
  .challenge-arena:fullscreen > .tf-typing-stats,
  .practice-arena:fullscreen > .challenge-actions{
    width:calc(100% - 24px) !important;
    margin-left:12px !important;
    margin-right:12px !important;
  }
}

/* v6.6.30.1 — duplicate Keyzira logo fix
   theme-redesign.css still creates a legacy keycap through .brand:before.
   Keyzira now renders its real mark in the HTML, so the pseudo-element must stay off. */
body:not(.admin-mode) .brand::before,
body:not(.admin-mode) .brand:before{
  content:none!important;
  display:none!important;
  width:0!important;
  height:0!important;
  margin:0!important;
}

/* ===== v6.6.31-auth-email.css ===== */

/* Keyzira v6.6.31 — email verification / password recovery */
.auth-wrap-email{min-height:calc(100vh - 190px);padding:42px 16px;display:grid;place-items:center}
.auth-wrap-email .auth-card{width:min(100%,460px);padding:30px;border-radius:18px}
.auth-wrap-email .auth-card>h1{margin-bottom:8px}
.auth-alert{margin:15px 0;padding:11px 13px;border-radius:10px;font-size:11px;line-height:1.55;font-weight:650}
.auth-alert--error{background:color-mix(in srgb,#ef4444 9%,var(--surface));border:1px solid color-mix(in srgb,#ef4444 30%,var(--line));color:#d83b45}
.auth-alert--success{background:color-mix(in srgb,#16a36a 8%,var(--surface));border:1px solid color-mix(in srgb,#16a36a 25%,var(--line));color:#168a5e}
.auth-inline-action{margin:-4px 0 15px}
.auth-inline-action .outline-btn{width:100%;height:39px}
.auth-form-links{display:flex;justify-content:flex-end;margin-top:-5px}
.auth-form-links a,.auth-text-link{font-size:10.5px;font-weight:750;color:var(--primary);text-decoration:none}
.auth-verification-note{display:flex;align-items:flex-start;gap:9px;padding:10px 11px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2)}
.auth-verification-note>span{width:25px;height:25px;display:grid;place-items:center;border-radius:7px;background:var(--primary-soft);color:var(--primary);font-size:11px}
.auth-verification-note p{margin:1px 0 0!important;font-size:9.5px!important;line-height:1.5!important}
.auth-status-card{text-align:center}
.auth-status-icon{width:52px;height:52px;margin:0 auto 14px;display:grid;place-items:center;border-radius:15px;background:var(--primary-soft);color:var(--primary);font-size:22px;font-weight:900}
.auth-status-icon.is-success{background:color-mix(in srgb,#20b878 11%,var(--surface));color:#159665}
.auth-status-icon.is-error{background:color-mix(in srgb,#ef4444 10%,var(--surface));color:#db414b}
.auth-status-card .primary-btn,.auth-status-card>.outline-btn{margin-top:10px;min-width:180px}
.auth-email-chip{margin:15px auto;padding:8px 12px;width:max-content;max-width:100%;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);color:var(--text);font-size:10px;font-weight:750;overflow:hidden;text-overflow:ellipsis}
.auth-resend-form{margin-top:14px;display:grid;gap:10px}
.auth-resend-form .outline-btn{width:100%}
.auth-status-card .auth-text-link{display:inline-block;margin-top:15px}
.account-email-verification-warning{margin:14px 0 2px;padding:12px 13px;display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid color-mix(in srgb,#e6a52d 36%,var(--line));border-radius:11px;background:color-mix(in srgb,#e6a52d 7%,var(--surface))}
.account-email-verification-warning>div{display:grid;gap:3px}
.account-email-verification-warning strong{font-size:10px;color:#b97912}
.account-email-verification-warning small{font-size:8.5px;color:var(--muted);line-height:1.45}
@media(max-width:620px){.account-email-verification-warning{align-items:stretch;flex-direction:column}.account-email-verification-warning .outline-btn{width:100%}}

/* ===== v6.6.32-account-security-polish.css ===== */

/* Keyzira v6.6.32 — Professional Account Center + polished language selector */
.account-settings-pro{max-width:1320px!important;padding:34px 28px 86px!important}
.account-pro-hero{align-items:center!important;margin-bottom:19px!important;padding:0 2px}
.account-hero-copy h1{font-size:40px!important;letter-spacing:-1.35px!important;margin:5px 0 5px!important}
.account-hero-copy p{font-size:14px!important;max-width:680px}
.account-back-profile{height:40px!important;border-radius:11px!important}
.account-pro-notice{display:flex;align-items:center;gap:10px;margin-bottom:15px!important;border-radius:13px!important;box-shadow:0 10px 28px rgba(0,0,0,.04)}
.account-pro-notice>span{width:26px;height:26px;display:grid;place-items:center;border-radius:8px;background:currentColor;color:#fff;font-size:12px}
.account-pro-notice strong{font-size:12px;line-height:1.45}

.account-overview-strip{padding:13px 16px!important;border-radius:18px!important;display:grid;grid-template-columns:minmax(300px,1.35fr) repeat(3,minmax(150px,.65fr));gap:8px;margin-bottom:16px;background:linear-gradient(135deg,color-mix(in srgb,var(--surface) 96%,var(--primary)),var(--surface))}
.account-overview-identity,.account-overview-stat{min-height:72px;display:flex;align-items:center;gap:12px;padding:10px 13px;border-radius:13px}
.account-overview-identity{border-right:1px solid var(--line)}
.account-avatar-hero{width:48px!important;height:48px!important;flex:0 0 48px!important;border-radius:14px!important;font-size:18px!important}
.account-overview-identity>div,.account-overview-stat>div{display:flex;flex-direction:column;min-width:0}
.account-overview-identity small,.account-overview-stat small{font-size:8px;font-weight:850;letter-spacing:.065em;color:var(--muted)}
.account-overview-identity strong{font-size:14px;margin-top:2px}.account-overview-identity span:not(.account-avatar){font-size:10px;color:var(--muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis}
.account-overview-stat{background:color-mix(in srgb,var(--surface-2) 76%,transparent);border:1px solid transparent}
.account-overview-stat strong{font-size:10.5px;margin-top:3px;white-space:nowrap}
.account-overview-icon{width:31px;height:31px;flex:0 0 31px;display:grid;place-items:center;border-radius:9px;background:var(--primary-soft);color:var(--primary);font-size:12px}
.account-overview-stat.is-good .account-overview-icon{background:color-mix(in srgb,#16a36a 11%,var(--surface));color:#13a36a}
.account-overview-stat.is-warning .account-overview-icon{background:color-mix(in srgb,#e6a52d 12%,var(--surface));color:#c48114}

.account-pro-layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:16px;align-items:start}
.account-settings-nav{position:sticky;top:88px;padding:12px!important;border-radius:17px!important;display:grid;gap:4px}
.account-nav-label{padding:8px 10px 7px;font-size:8px;font-weight:900;letter-spacing:.1em;color:var(--muted)}
.account-settings-nav>a{display:grid;grid-template-columns:31px minmax(0,1fr) auto;gap:9px;align-items:center;padding:9px;border-radius:11px;color:var(--text);transition:.16s}
.account-settings-nav>a:hover{background:var(--surface-2);transform:translateX(2px)}
.account-settings-nav>a>span{width:31px;height:31px;display:grid;place-items:center;border-radius:9px;background:var(--surface-2);border:1px solid var(--line);color:var(--primary);font-size:11px}
.account-settings-nav>a>div{display:flex;flex-direction:column;min-width:0}.account-settings-nav>a strong{font-size:10px}.account-settings-nav>a small{font-size:8px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.account-settings-nav>a>i{font-style:normal;color:var(--muted)}
.account-nav-security{margin-top:7px;padding:11px;display:flex;gap:8px;border-radius:11px;background:color-mix(in srgb,var(--primary) 5%,var(--surface-2));border:1px solid color-mix(in srgb,var(--primary) 14%,var(--line))}
.account-nav-security span{font-size:11px}.account-nav-security p{margin:0;font-size:8px;line-height:1.5;color:var(--muted)}
.account-pro-content{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.account-pro-content>.account-settings-card{padding:21px!important;border-radius:17px!important;scroll-margin-top:96px}
.account-profile-card,.account-security-card-pro,.account-preferences-card{grid-column:1/-1!important;grid-row:auto!important}
.account-status-pro{grid-column:1/-1}
.account-card-head-pro{position:relative;margin-bottom:17px!important;padding-bottom:14px;border-bottom:1px solid var(--line)}
.account-card-head-pro .account-settings-icon{width:36px;height:36px;flex-basis:36px;border-radius:10px;font-size:12px}
.account-card-head-pro h2{font-size:15px!important;margin:1px 0 2px!important}.account-card-head-pro p{font-size:10px!important}.account-card-kicker{font-size:7px;font-weight:900;letter-spacing:.09em;color:var(--primary)}
.security-icon{background:color-mix(in srgb,#39a7ea 11%,var(--surface))!important;color:#268dcc!important}.verified-icon{background:color-mix(in srgb,#16a36a 11%,var(--surface))!important;color:#159665!important}
.security-email-approval-badge{margin-left:auto;align-self:center;padding:6px 9px;border-radius:999px;border:1px solid color-mix(in srgb,#16a36a 25%,var(--line));background:color-mix(in srgb,#16a36a 7%,var(--surface));color:#159665;font-size:8px;font-weight:850}

.account-form-pro{gap:16px!important}.account-form-grid-pro{gap:12px!important}.account-form-pro label>span,.account-password-form label>span{font-size:9px!important;letter-spacing:.015em;color:var(--muted)}
.account-field-shell{height:43px;display:grid;grid-template-columns:31px minmax(0,1fr);align-items:center;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);overflow:hidden;transition:.15s}
.account-field-shell:focus-within{border-color:color-mix(in srgb,var(--primary) 65%,var(--line));box-shadow:0 0 0 3px var(--primary-soft)}
.account-field-shell>i{font-style:normal;display:grid;place-items:center;color:var(--primary);font-size:9px;border-right:1px solid var(--line);height:22px}
.account-field-shell input,.account-field-shell select{height:41px!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;padding:0 10px!important;font-size:10px!important}
.account-readonly-pro{height:43px!important;display:grid!important;grid-template-columns:31px 1fr!important;padding:0!important;background:var(--surface-2)!important;overflow:hidden}.account-readonly-pro i{font-style:normal;display:grid;place-items:center;color:var(--primary);border-right:1px solid var(--line);height:22px}.account-readonly-pro strong{padding-left:10px;font-size:10px}
.account-form-actions{display:flex;align-items:center;gap:12px}.account-form-actions .primary-btn{height:38px!important;margin:0!important;font-size:10px!important}.account-form-actions small{font-size:8px;color:var(--muted);line-height:1.45;max-width:480px}

.security-process-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(270px,.75fr);gap:16px}.account-password-form{align-content:start}.password-new-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.security-submit{height:40px!important;justify-self:start!important;font-size:10px!important;margin-top:1px!important}.security-approval-flow{padding:15px;border-radius:13px;background:linear-gradient(145deg,color-mix(in srgb,var(--primary) 5%,var(--surface-2)),var(--surface-2));border:1px solid var(--line)}
.security-flow-head{display:flex;flex-direction:column}.security-flow-head span{font-size:7px;font-weight:900;letter-spacing:.09em;color:var(--primary)}.security-flow-head strong{font-size:11px;margin-top:3px}.security-approval-flow ol{list-style:none;margin:13px 0 0;padding:0;display:grid;gap:9px}.security-approval-flow li{display:grid;grid-template-columns:27px 1fr;gap:9px;align-items:start}.security-approval-flow li>b{width:27px;height:27px;border-radius:8px;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary);font-size:9px}.security-approval-flow li>div{display:flex;flex-direction:column}.security-approval-flow li strong{font-size:9px}.security-approval-flow li small{font-size:7.7px;color:var(--muted);line-height:1.45;margin-top:2px}
.password-approval-pending{display:flex;align-items:center;gap:10px;padding:11px 12px;margin-bottom:14px;border:1px solid color-mix(in srgb,#e6a52d 30%,var(--line));background:color-mix(in srgb,#e6a52d 7%,var(--surface));border-radius:11px}.password-approval-pending>span{width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:color-mix(in srgb,#e6a52d 14%,var(--surface));color:#c48114}.password-approval-pending>div{display:flex;flex-direction:column}.password-approval-pending strong{font-size:9px;color:#b97912}.password-approval-pending small{font-size:8px;color:var(--muted);margin-top:2px}

.preference-row-pro{grid-template-columns:230px minmax(0,1fr)!important;padding:14px 0!important}.preference-row-pro strong{font-size:11px!important}.preference-row-pro small{font-size:8.5px!important}.account-theme-options{gap:6px!important}.account-theme-options button{height:38px!important;font-size:9px!important;border-radius:9px!important}.account-language-control{position:relative;width:min(100%,390px);height:40px;display:grid;grid-template-columns:34px 1fr 28px;align-items:center;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);overflow:hidden}.account-language-control>span{display:grid;place-items:center;color:var(--primary);border-right:1px solid var(--line);height:22px}.account-language-control select{appearance:none;width:100%;height:38px;border:0;background:transparent;color:var(--text);padding:0 10px;outline:none;font-size:9.5px;font-weight:750}.account-language-control>i{font-style:normal;color:var(--muted);pointer-events:none}
.account-typing-settings-link{margin-top:14px!important;padding:11px 12px!important}.account-typing-settings-link>span{width:34px!important;height:34px!important}.account-typing-settings-link strong{font-size:10px!important}.account-typing-settings-link small{font-size:8px!important}.account-meta-list-pro{display:grid!important;grid-template-columns:repeat(4,1fr);gap:8px}.account-meta-list-pro>div{border:1px solid var(--line)!important;border-radius:10px;padding:10px!important;display:flex!important;flex-direction:column!important;background:var(--surface-2)}.account-meta-list-pro dt{font-size:7.5px!important;text-transform:uppercase;font-weight:800;letter-spacing:.05em}.account-meta-list-pro dd{font-size:9.5px!important;margin-top:4px!important}.status-good{color:#159665}.status-warn{color:#c48114}

/* Header language control — final authority over older laptop/density rules. */
body:not(.admin-mode) .keyzira-language-picker{height:36px!important;min-width:112px!important;max-width:148px!important;padding:0!important;display:grid!important;grid-template-columns:29px minmax(0,1fr) 21px!important;gap:0!important;border:1px solid var(--line)!important;border-left:1px solid var(--line)!important;border-radius:10px!important;background:color-mix(in srgb,var(--surface) 94%,transparent)!important;overflow:hidden!important;color:var(--text)!important}
body:not(.admin-mode) .keyzira-language-picker .language-picker-globe{width:29px;height:20px;display:grid;place-items:center;border-right:1px solid var(--line);color:var(--primary);font-size:9px!important}
body:not(.admin-mode) .keyzira-language-picker select{appearance:none!important;width:100%!important;max-width:none!important;min-width:0!important;height:34px!important;padding:0 6px!important;border:0!important;background:transparent!important;color:var(--text)!important;font-size:9px!important;font-weight:800!important;outline:none!important;cursor:pointer!important}
body:not(.admin-mode) .keyzira-language-picker .language-picker-chevron{display:grid;place-items:center;color:var(--muted);font-size:8px;pointer-events:none}
body:not(.admin-mode) .keyzira-language-picker:hover{border-color:color-mix(in srgb,var(--primary) 38%,var(--line))!important;background:var(--surface-2)!important}

@media(max-width:1180px){.account-overview-strip{grid-template-columns:1.2fr 1fr 1fr}.account-overview-stat:last-child{display:none}.account-pro-layout{grid-template-columns:205px 1fr}}
@media(max-width:980px){.account-settings-pro{padding:24px 18px 68px!important}.account-overview-strip{grid-template-columns:1fr 1fr}.account-overview-identity{grid-column:1/-1;border-right:0;border-bottom:1px solid var(--line)}.account-pro-layout{grid-template-columns:1fr}.account-settings-nav{position:static;display:flex;overflow-x:auto;padding:8px!important}.account-nav-label,.account-nav-security{display:none}.account-settings-nav>a{min-width:160px}.security-process-grid{grid-template-columns:1fr}.account-meta-list-pro{grid-template-columns:1fr 1fr}}
@media(max-width:720px){.account-settings-pro{padding:20px 12px 58px!important}.account-pro-hero{align-items:flex-start!important}.account-hero-copy h1{font-size:30px!important}.account-overview-strip{grid-template-columns:1fr;padding:10px!important}.account-overview-identity{grid-column:auto}.account-overview-stat:last-child{display:flex}.account-pro-content{grid-template-columns:1fr}.account-pro-content>.account-settings-card{padding:16px!important}.account-form-grid-pro,.password-new-grid{grid-template-columns:1fr}.account-form-actions{align-items:flex-start;flex-direction:column}.preference-row-pro{grid-template-columns:1fr!important;gap:9px!important}.account-meta-list-pro{grid-template-columns:1fr}.security-email-approval-badge{display:none}}
@media(max-width:620px){body:not(.admin-mode) .keyzira-language-picker{min-width:88px!important;max-width:104px!important}body:not(.admin-mode) .keyzira-language-picker select{font-size:8px!important}}

/* v6.6.65 — independent email language preference */
.account-email-language-preference{margin:0}
.account-email-language-actions{display:flex;align-items:center;gap:9px;justify-content:flex-start;min-width:0}
.account-email-language-actions .account-language-control{flex:1 1 260px;max-width:390px}
.account-email-language-actions .outline-btn{flex:0 0 auto;white-space:nowrap}
@media(max-width:720px){
  .account-email-language-actions{width:100%;display:grid;grid-template-columns:1fr;gap:8px}
  .account-email-language-actions .account-language-control{max-width:none;width:100%}
  .account-email-language-actions .outline-btn{width:100%}
}

/* ===== v6.6.33-brand-assets.css ===== */
/* Keyzira v6.6.35 — theme-aware brand assets */
body:not(.admin-mode) .brand.keyzira-image-brand::before,
body:not(.admin-mode) .brand.keyzira-image-brand:before{content:none!important;display:none!important}
.keyzira-image-brand{display:flex!important;align-items:center!important;min-width:0!important;width:max-content!important;gap:0!important}
.site-brand-logo{width:auto!important;height:40px!important;max-width:154px!important;object-fit:contain!important;object-position:left center!important;transform:none!important;filter:none!important}
.site-brand-logo-dark{display:none!important}
html[data-theme="dark"] .site-brand-logo-light{display:none!important}
html[data-theme="dark"] .site-brand-logo-dark{display:block!important}
.footer-image-brand{display:inline-flex!important;align-items:center!important;min-height:44px}
.footer-brand-image{width:auto;height:43px;max-width:170px;object-fit:contain;object-position:left center;filter:none}
.footer-brand-image-dark{display:none}
html[data-theme="dark"] .footer-brand-image-light{display:none}
html[data-theme="dark"] .footer-brand-image-dark{display:block}
@media(max-width:1400px){.site-brand-logo{height:36px!important;max-width:140px!important}}
@media(max-width:760px){.site-brand-logo{height:33px!important;max-width:128px!important}.footer-brand-image{height:38px;max-width:150px}}

/* Admin sidebar now uses the managed favicon. */
.tf-admin-brand-icon{
  width:36px;height:36px;flex:0 0 36px;
  border-radius:10px;object-fit:cover;
  box-shadow:0 7px 18px color-mix(in srgb,var(--admin-brand) 22%,transparent);
}

/* Site & Marka — professional asset manager */
.brand-assets-section{overflow:hidden}
.brand-assets-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}
.brand-asset-card{
  min-width:0;
  padding:18px;
  border:1px solid var(--admin-line);
  border-radius:14px;
  background:var(--admin-surface-2);
}
.brand-asset-card-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  margin-bottom:13px;
}
.brand-asset-card-head>div{display:grid;gap:3px}
.brand-asset-card-head b{font-size:13px}
.brand-asset-card-head small{font-size:10px;color:var(--admin-muted);font-weight:500}
.brand-asset-card-head>span{
  flex:0 0 auto;padding:5px 8px;border-radius:999px;
  border:1px solid var(--admin-line);background:var(--admin-surface);
  color:var(--admin-muted);font-size:8px;font-weight:850;letter-spacing:.04em;
}
.brand-preview{
  min-height:132px;
  border:1px solid var(--admin-line-strong);
  border-radius:12px;
  overflow:hidden;
  display:grid;place-items:center;
  background:
    linear-gradient(45deg,color-mix(in srgb,var(--admin-line) 35%,transparent) 25%,transparent 25% 75%,color-mix(in srgb,var(--admin-line) 35%,transparent) 75%),
    linear-gradient(45deg,color-mix(in srgb,var(--admin-line) 35%,transparent) 25%,transparent 25% 75%,color-mix(in srgb,var(--admin-line) 35%,transparent) 75%),
    var(--admin-surface);
  background-position:0 0,8px 8px;
  background-size:16px 16px;
}
.brand-preview-logo img{
  max-width:min(84%,430px);max-height:96px;object-fit:contain;
  filter:drop-shadow(0 8px 15px rgba(23,30,76,.10));
}
.brand-preview-favicon{
  padding:22px;
  background:linear-gradient(180deg,#eef1f7,#fff);
}
html[data-admin-theme=dark] .brand-preview-favicon{
  background:linear-gradient(180deg,#252938,#181b27);
}
.fake-browser-tab{
  width:min(100%,390px);height:54px;padding:10px 13px;
  display:flex;align-items:center;gap:7px;border:1px solid #d8dde9;
  border-radius:12px;background:#fff;box-shadow:0 9px 25px rgba(30,39,79,.10);
}
html[data-admin-theme=dark] .fake-browser-tab{background:#222635;border-color:#34394b}
.fake-browser-tab>i{width:7px;height:7px;border-radius:50%;background:#d9dce5}
.fake-browser-tab>span{
  margin-left:5px;min-width:0;display:flex;align-items:center;gap:8px;
  color:#33384a;font-size:10px;font-weight:700;
}
html[data-admin-theme=dark] .fake-browser-tab>span{color:#edf0fa}
.fake-browser-tab img{width:25px;height:25px;border-radius:7px;object-fit:cover}
.brand-asset-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:12px}
.brand-file-button{position:relative;overflow:hidden;cursor:pointer}
.brand-file-button input{position:absolute!important;inset:0!important;opacity:0!important;cursor:pointer;width:100%!important;height:100%!important}
.brand-asset-help{display:block!important;margin-top:10px;font-size:9px!important;line-height:1.5!important}
.brand-live-preview{
  margin-top:16px;padding:16px;border:1px solid var(--admin-line);
  border-radius:14px;background:var(--admin-surface-2);
}
.brand-live-preview>div:first-child{display:grid;gap:3px;margin-bottom:10px}
.brand-live-preview b{font-size:12.5px}
.brand-header-preview{
  min-height:68px;padding:12px 14px;
  display:grid;grid-template-columns:180px 1fr auto;align-items:center;gap:18px;
  border:1px solid #29283f;border-radius:13px;
  background:#12111e;color:#f6f5ff;
}
.brand-header-preview>img{max-width:160px;max-height:40px;object-fit:contain;object-position:left center}
.brand-header-preview nav{display:flex;justify-content:center;gap:22px}
.brand-header-preview nav span{font-size:9px;color:#b7b4c9;font-weight:700}
.brand-header-preview button{
  height:35px;padding:0 12px;border:1px solid #46415f;border-radius:9px;
  background:#181625;color:#fff;font-size:9px;font-weight:800;
}
@media(max-width:920px){
  .brand-assets-grid{grid-template-columns:1fr}
  .brand-header-preview{grid-template-columns:150px 1fr}
  .brand-header-preview nav{display:none}
}
@media(max-width:560px){
  .brand-asset-actions{grid-template-columns:1fr}
  .brand-header-preview{grid-template-columns:1fr auto}
  .brand-header-preview>img{max-width:140px}
}

.brand-preview-logo.is-light{background:#f8f9fc!important}
.brand-preview-logo.is-dark{background:#0d0d17!important}
.brand-preview-logo.is-light img,.brand-preview-logo.is-dark img{filter:none!important}
.brand-preview-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.brand-header-preview.is-light{background:#fff;color:#161824;border-color:#e1e3ed}
.brand-header-preview.is-light nav span{color:#676b7c}
.brand-header-preview.is-light button{background:#f6f7fb;color:#202235;border-color:#dfe2ec}
.brand-header-preview.is-dark{background:#11111d;color:#f6f5ff;border-color:#29283f}
.brand-header-preview.is-dark nav span{color:#b7b4c9}
.brand-header-preview.is-dark button{background:#181625;color:#fff;border-color:#46415f}
@media(max-width:1180px){.brand-assets-grid-three{grid-template-columns:1fr 1fr!important}.brand-preview-pair{grid-template-columns:1fr}}
@media(max-width:760px){.brand-assets-grid-three{grid-template-columns:1fr!important}}

/* ===== v6.6.36-daily-challenge-ranking.css ===== */

/* Keyzira v6.6.36 — Daily Challenge leaderboard upgrade */
.challenge-leaderboard-upgrade{margin-top:20px;width:100%}
.challenge-ranking-hero{min-height:88px;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:0 2px 16px}
.challenge-ranking-hero>div:first-child{max-width:650px}
.challenge-ranking-hero h2{margin:5px 0 0;font-size:24px;letter-spacing:-.6px}
.challenge-ranking-hero p{margin:5px 0 0;color:var(--muted);font-size:11px;line-height:1.55}
.challenge-ranking-summary{min-width:190px;display:grid;justify-items:end;gap:2px}
.challenge-ranking-summary small{color:var(--muted);font-size:9px;font-weight:750}
.challenge-ranking-summary strong{color:var(--text);font-size:25px;line-height:1;font-variant-numeric:tabular-nums}
.challenge-ranking-summary span{margin-top:3px;color:var(--muted);font-size:8.5px;font-weight:700}
.challenge-ranking-summary b{color:var(--primary)}

.challenge-ranking-filter{display:grid;grid-template-columns:minmax(190px,.9fr) minmax(220px,1.1fr) minmax(220px,1.05fr) 118px;align-items:end;gap:14px;padding:16px 18px!important;border-radius:14px!important}
.challenge-ranking-filter label{display:grid;gap:7px;min-width:0}
.challenge-ranking-filter label>span{color:var(--muted);font-size:9px;font-weight:800}
.challenge-ranking-filter select{width:100%;height:43px;padding:0 12px;border:1px solid var(--line-strong);border-radius:10px;outline:none;background:var(--surface);color:var(--text);font-size:10.5px;font-weight:750}
.challenge-ranking-filter select:focus{border-color:color-mix(in srgb,var(--primary) 60%,var(--line));box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 10%,transparent)}
.challenge-fixed-filter{height:43px;padding:0 12px;display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2)}
.challenge-fixed-filter>b{color:var(--primary);font-size:13px}
.challenge-fixed-filter>strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text);font-size:10px}
.challenge-ranking-filter-btn{width:100%;height:43px;padding-inline:12px;box-shadow:0 8px 18px color-mix(in srgb,var(--primary) 20%,transparent)}

.challenge-ranking-context{display:flex;align-items:center;flex-wrap:wrap;gap:7px;padding:12px 2px 13px}
.challenge-context-pill{min-height:28px;padding:0 10px;display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;background:var(--surface-2);color:var(--muted);font-size:9px;font-weight:800}
.challenge-reset-pill b{margin-left:4px;color:var(--primary);font-variant-numeric:tabular-nums}

.challenge-ranking-table-card{padding:0!important;overflow:hidden;border-radius:14px!important}
.challenge-ranking-table{width:100%;border-collapse:collapse;table-layout:fixed}
.challenge-ranking-table thead tr{background:color-mix(in srgb,var(--surface-2) 74%,var(--surface))}
.challenge-ranking-table th{height:52px;padding:0 18px;color:var(--muted);font-size:9px;font-weight:850;text-transform:uppercase;letter-spacing:.035em;text-align:left;border-bottom:1px solid var(--line)}
.challenge-ranking-table th:nth-child(1){width:76px;text-align:center}
.challenge-ranking-table th:nth-child(3){width:23%}
.challenge-ranking-table th:nth-child(4){width:15%}
.challenge-ranking-table th:nth-child(5){width:17%}
.challenge-ranking-table td{height:67px;padding:0 18px;border-bottom:1px solid var(--line);vertical-align:middle}
.challenge-ranking-table tbody tr:last-child td{border-bottom:0}
.challenge-ranking-row{transition:background .16s ease}
.challenge-ranking-row:hover{background:color-mix(in srgb,var(--primary) 3.5%,transparent)}
.challenge-ranking-row.leaderboard-champion-row{background:linear-gradient(90deg,color-mix(in srgb,#e7b53c 7%,var(--surface)),transparent 58%)}
.challenge-ranking-table .leaderboard-rank-cell{text-align:center;padding-inline:12px}
.challenge-ranking-table .leaderboard-player{min-width:0}
.challenge-ranking-table .leaderboard-wpm{color:var(--primary);font-size:14px}
.challenge-ranking-table .leaderboard-accuracy{min-width:54px;justify-content:center}

.challenge-ranking-empty{min-height:148px;display:grid;place-items:center;align-content:center;gap:6px;text-align:center}
.challenge-ranking-empty>span{width:38px;height:38px;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--primary) 28%,var(--line));border-radius:12px;background:var(--primary-soft);color:var(--primary);font-size:15px}
.challenge-ranking-empty strong{margin-top:3px;color:var(--text);font-size:11.5px}
.challenge-ranking-empty small{color:var(--muted);font-size:9px}
.challenge-ranking-pagination{margin-top:13px}

@media(max-width:980px){
  .challenge-ranking-filter{grid-template-columns:1fr 1fr}
  .challenge-ranking-table th:nth-child(3),.challenge-ranking-table td:nth-child(3){display:none}
  .challenge-ranking-table th:nth-child(4){width:22%}
  .challenge-ranking-table th:nth-child(5){width:22%}
}
@media(max-width:680px){
  .challenge-ranking-hero{align-items:flex-start;flex-direction:column;gap:10px}
  .challenge-ranking-summary{width:100%;grid-template-columns:auto auto 1fr;align-items:center;justify-items:start;gap:8px}
  .challenge-ranking-summary strong{font-size:18px}
  .challenge-ranking-summary span{justify-self:end;margin:0}
  .challenge-ranking-filter{grid-template-columns:1fr;gap:11px;padding:13px!important}
  .challenge-ranking-context{overflow-x:auto;flex-wrap:nowrap;padding-bottom:11px;scrollbar-width:none}
  .challenge-ranking-context::-webkit-scrollbar{display:none}
  .challenge-context-pill{flex:0 0 auto}
  .challenge-ranking-table th,.challenge-ranking-table td{padding-inline:10px}
  .challenge-ranking-table th:nth-child(1){width:56px}
  .challenge-ranking-table th:nth-child(5),.challenge-ranking-table td:nth-child(5){display:none}
  .challenge-ranking-table th:nth-child(4){width:29%}
  .challenge-ranking-table .tf-identicon{display:none}
  .challenge-ranking-table .leaderboard-player{gap:0}
  .challenge-ranking-table .leaderboard-player-copy small{display:none}
  .challenge-ranking-pagination .leaderboard-page-summary,.challenge-ranking-pagination .leaderboard-page-current{display:none}
  .challenge-ranking-pagination{justify-content:center}
}

/* ===== v6.6.40-typing-state-stability.css ===== */
/* Keyzira v6.6.40 — normal typing layout authority
   Prevent cross-mode settings from making Test look like fullscreen/focus mode. */
@media (min-width:981px){
  .typing-tool-page{
    width:calc(100% - 52px)!important;
    max-width:1160px!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
}
.typing-tool-page .tf-main-typing-stage .word-viewport{
  box-sizing:border-box!important;
  width:100%!important;
  overflow:hidden!important;
  contain:paint!important;
}
.typing-tool-page .tf-main-typing-stage .word-stream{
  font-size:var(--typing-size,22px)!important;
  line-height:1.5!important;
  gap:5px 9px!important;
  align-content:flex-start!important;
}
.typing-tool-page .tf-main-typing-stage .test-word{
  padding:1px 3px!important;
  min-height:0!important;
  white-space:nowrap!important;
}
/* Focus mode exists only when explicitly enabled from MAIN TEST settings. */
body:not(.focus-test) .typing-tool-page .premium-typing-panel{
  position:static!important;
  inset:auto!important;
  width:auto!important;
  max-width:none!important;
}

/* ===== v6.6.41-unified-typing-feedback.css ===== */
/* Keyzira v6.6.41 compatibility.
Practice + Daily Challenge inherit Main Test feedback directly since v6.6.42.
Duel rules below are preserved from v6.6.41. */
#duel-word-viewport .duel-word.correct{color:var(--green)!important;text-decoration:none!important}
#duel-word-viewport .duel-word.wrong{color:var(--red)!important;text-decoration:underline!important;text-decoration-color:color-mix(in srgb,var(--red) 55%,transparent)!important;text-underline-offset:4px}
#duel-word-viewport .letter-correct{color:var(--green)!important}
#duel-word-viewport .letter-wrong,
#duel-word-viewport .letter-extra{color:var(--red)!important;background:var(--red-soft)!important;border-radius:3px}
#duel-word-viewport .letter-pending{color:inherit}

/* ===== v6.6.42-test-mold-practice-challenge.css ===== */
/* Keyzira v6.6.42 — structural glue only.
No word-box, font, input or active-word visual values are duplicated here. */
.tf-test-mold-scope{box-sizing:border-box}
.tf-test-mold-scope .tf-mode-test-metrics{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
}
.tf-test-mold-scope .tf-mode-test-metrics .metric:nth-child(3){border-right:0 !important}
.tf-test-mold-scope .tf-mode-test-actions{
  align-items:center;
  justify-content:center;
  padding-bottom:16px;
}
.tf-test-mold-scope .tf-mode-test-actions .challenge-pb{margin-left:8px}

.practice-arena:fullscreen > .tf-test-mold-scope,
.challenge-arena:fullscreen > .tf-test-mold-scope{
  width:min(1180px,100%) !important;
  max-width:1180px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
@media(max-width:720px){
  .tf-test-mold-scope .tf-mode-test-metrics{grid-template-columns:1fr !important}
  .tf-test-mold-scope .tf-mode-test-metrics .metric{
    border-right:0 !important;
    border-bottom:1px solid var(--line) !important;
  }
  .tf-test-mold-scope .tf-mode-test-metrics .metric:last-child{border-bottom:0 !important}
  .tf-test-mold-scope .tf-mode-test-actions{flex-direction:column}
}

/* ===== v6.6.44-notification-center.css ===== */
.keyzira-notifications{position:relative;flex:0 0 auto}.notification-trigger{position:relative;width:40px;height:40px;border:1px solid var(--line);background:var(--card);color:var(--text);border-radius:12px;display:grid;place-items:center;cursor:pointer}.notification-trigger:hover,.notification-trigger.has-unread{border-color:color-mix(in srgb,var(--primary) 45%,var(--line));background:color-mix(in srgb,var(--primary) 7%,var(--card))}.notification-trigger svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.notification-badge{position:absolute;right:-5px;top:-5px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff;border:2px solid var(--card);font-size:10px;font-weight:900;line-height:14px}.notification-panel{position:absolute;z-index:1500;right:0;top:calc(100% + 11px);width:min(390px,calc(100vw - 24px));background:color-mix(in srgb,var(--card) 97%,transparent);border:1px solid var(--line);border-radius:18px;box-shadow:0 22px 65px rgba(20,18,55,.20);overflow:hidden;opacity:0;visibility:hidden;transform:translateY(-7px) scale(.985);transform-origin:top right;transition:.15s;backdrop-filter:blur(18px)}.notification-panel.open{opacity:1;visibility:visible;transform:none}.notification-panel-head{min-height:66px;padding:13px 14px 12px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--primary) 3%,var(--card))}.notification-panel-head>div{display:grid;gap:2px}.notification-panel-head strong{font-size:16px}.notification-kicker{font-size:8px;font-weight:900;letter-spacing:.14em;color:var(--primary)}.notification-panel-head button{border:0;background:transparent;color:var(--primary);font-weight:750;font-size:10px;cursor:pointer}.notification-list{max-height:min(560px,68vh);overflow:auto}.notification-item{position:relative;display:grid;grid-template-columns:38px minmax(0,1fr);gap:10px;padding:13px 14px;border-bottom:1px solid color-mix(in srgb,var(--line) 76%,transparent);background:var(--card)}.notification-item.unread{background:color-mix(in srgb,var(--primary) 5%,var(--card))}.notification-item.unread:before{content:"";position:absolute;left:0;top:11px;bottom:11px;width:3px;background:var(--primary)}.notification-item-icon{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:color-mix(in srgb,var(--primary) 10%,var(--card));color:var(--primary);font-weight:900}.notification-item-content{min-width:0;display:grid;gap:5px}.notification-item-top{display:flex;justify-content:space-between;gap:8px}.notification-item-top strong{font-size:12px}.notification-item-top time{font-size:9px;color:var(--muted)}.notification-item p{margin:0;color:var(--muted);font-size:10.5px;line-height:1.5}.notification-item-actions{display:flex;gap:7px;margin-top:3px;flex-wrap:wrap}.notification-action,.notification-link{min-height:30px;padding:0 11px;border:1px solid var(--line);border-radius:9px;background:var(--card);color:var(--text);font:inherit;font-size:10px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;cursor:pointer}.notification-action.primary{background:linear-gradient(135deg,var(--primary),var(--primary-2));border-color:transparent;color:#fff}.notification-link{color:var(--primary)}.notification-empty{padding:38px 20px;text-align:center;color:var(--muted)}.notification-empty span{margin:auto;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--primary) 8%,var(--card));color:var(--primary)}.notification-empty p{margin:9px 0 0;font-size:11px}.notification-toast-stack{position:fixed;z-index:5000;right:20px;top:82px;width:min(350px,calc(100vw - 30px));display:grid;gap:9px;pointer-events:none}.notification-toast{width:100%;display:grid;grid-template-columns:36px minmax(0,1fr);gap:10px;text-align:left;padding:11px 13px;border:1px solid var(--line);border-radius:14px;background:var(--card);color:var(--text);box-shadow:0 16px 45px rgba(20,18,55,.20);pointer-events:auto;cursor:pointer}.notification-toast>span:first-child{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--primary) 10%,var(--card));color:var(--primary)}.notification-toast>span:last-child{display:grid;gap:2px;min-width:0}.notification-toast strong{font-size:11px}.notification-toast small{color:var(--muted);font-size:9.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.v6-duel-invite-hint{display:block;text-align:center;margin-top:5px;color:var(--muted);font-size:8px}@media(max-width:980px){.notification-panel{position:fixed;right:12px;top:68px}}@media(max-width:620px){.notification-trigger{width:36px;height:36px}.notification-panel{left:10px;right:10px;width:auto;top:64px}.notification-toast-stack{left:12px;right:12px;top:72px;width:auto}}

/* ===== v6.6.45-notification-theme-fix.css ===== */

/* Keyzira v6.6.45 — Notification Center theme/opacity fix
   v6.6.44 referenced --card, which does not exist in Keyzira's theme tokens.
   This layer intentionally uses the real --surface / --surface-2 tokens and
   makes the notification UI fully opaque in both themes. */

.keyzira-notifications{
  position:relative;
  isolation:isolate;
}

.notification-trigger{
  background:var(--surface) !important;
  color:var(--text) !important;
  border-color:var(--line) !important;
  box-shadow:0 4px 14px color-mix(in srgb,var(--text) 5%,transparent);
}

.notification-trigger:hover,
.notification-trigger.has-unread{
  background:var(--surface-2) !important;
  border-color:color-mix(in srgb,var(--primary) 52%,var(--line)) !important;
  box-shadow:0 6px 18px color-mix(in srgb,var(--primary) 12%,transparent);
}

.notification-badge{
  border-color:var(--surface) !important;
}

/* IMPORTANT: no transparency / backdrop bleed. */
.notification-panel{
  background:var(--surface) !important;
  border:1px solid var(--line-strong) !important;
  box-shadow:
    0 28px 70px rgba(40,25,90,.18),
    0 8px 24px rgba(40,25,90,.10) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

.notification-panel-head{
  background:var(--surface-2) !important;
  border-bottom-color:var(--line) !important;
}

.notification-panel-head strong{
  color:var(--text) !important;
}

.notification-panel-head button{
  color:var(--primary) !important;
}

.notification-list{
  background:var(--surface) !important;
  scrollbar-color:var(--line-strong) var(--surface);
}

/* Every row is an opaque card row; page content can never show through it. */
.notification-item{
  background:var(--surface) !important;
  border-bottom-color:var(--line) !important;
  color:var(--text) !important;
}

.notification-item:last-child{
  border-bottom:0 !important;
}

.notification-item.unread{
  background:color-mix(in srgb,var(--primary) 6%,var(--surface)) !important;
}

.notification-item.unread::before{
  border-radius:0 4px 4px 0;
}

.notification-item-icon{
  background:color-mix(in srgb,var(--primary) 10%,var(--surface-2)) !important;
  border:1px solid color-mix(in srgb,var(--primary) 13%,var(--line)) !important;
  color:var(--primary) !important;
}

.notification-item.level-success .notification-item-icon{
  background:color-mix(in srgb,var(--green) 10%,var(--surface-2)) !important;
  color:var(--green) !important;
  border-color:color-mix(in srgb,var(--green) 18%,var(--line)) !important;
}

.notification-item.level-warning .notification-item-icon{
  background:color-mix(in srgb,var(--orange) 11%,var(--surface-2)) !important;
  color:var(--orange) !important;
  border-color:color-mix(in srgb,var(--orange) 18%,var(--line)) !important;
}

.notification-item-top strong{
  color:var(--text) !important;
}

.notification-item-top time,
.notification-item p{
  color:var(--muted) !important;
}

.notification-action,
.notification-link{
  background:var(--surface-2) !important;
  border-color:var(--line-strong) !important;
  color:var(--text) !important;
}

.notification-action:hover,
.notification-link:hover{
  border-color:color-mix(in srgb,var(--primary) 45%,var(--line)) !important;
  background:color-mix(in srgb,var(--primary) 5%,var(--surface-2)) !important;
}

.notification-action.primary{
  background:linear-gradient(135deg,var(--primary),var(--primary-2)) !important;
  color:#fff !important;
  border-color:transparent !important;
  box-shadow:0 7px 18px var(--primary-shadow);
}

.notification-link{
  color:var(--primary) !important;
}

.notification-empty,
.notification-loading{
  background:var(--surface) !important;
  color:var(--muted) !important;
}

.notification-empty span{
  background:var(--surface-2) !important;
  border:1px solid var(--line) !important;
  color:var(--primary) !important;
}

/* Toasts also had the same undefined --card background problem. */
.notification-toast{
  background:var(--surface) !important;
  border-color:var(--line-strong) !important;
  color:var(--text) !important;
  box-shadow:
    0 22px 55px rgba(40,25,90,.16),
    0 6px 18px rgba(40,25,90,.09) !important;
}

.notification-toast > span:first-child{
  background:var(--surface-2) !important;
  border:1px solid var(--line) !important;
  color:var(--primary) !important;
}

.notification-toast strong{
  color:var(--text) !important;
}

.notification-toast small{
  color:var(--muted) !important;
}

/* Explicit dark treatment rather than relying on opacity tricks. */
html[data-theme="dark"] .notification-trigger{
  background:var(--surface-2) !important;
  border-color:var(--line-strong) !important;
  box-shadow:0 5px 18px rgba(0,0,0,.24);
}

html[data-theme="dark"] .notification-trigger:hover,
html[data-theme="dark"] .notification-trigger.has-unread{
  background:var(--surface-3) !important;
}

html[data-theme="dark"] .notification-badge{
  border-color:var(--surface-2) !important;
}

html[data-theme="dark"] .notification-panel{
  background:var(--surface) !important;
  border-color:var(--line-strong) !important;
  box-shadow:
    0 32px 76px rgba(0,0,0,.58),
    0 8px 26px rgba(0,0,0,.36) !important;
}

html[data-theme="dark"] .notification-panel-head{
  background:var(--surface-2) !important;
}

html[data-theme="dark"] .notification-item{
  background:var(--surface) !important;
}

html[data-theme="dark"] .notification-item.unread{
  background:color-mix(in srgb,var(--primary) 9%,var(--surface)) !important;
}

html[data-theme="dark"] .notification-action,
html[data-theme="dark"] .notification-link{
  background:var(--surface-2) !important;
  border-color:var(--line-strong) !important;
}

html[data-theme="dark"] .notification-toast{
  background:var(--surface-2) !important;
  border-color:var(--line-strong) !important;
  box-shadow:
    0 28px 66px rgba(0,0,0,.52),
    0 8px 22px rgba(0,0,0,.34) !important;
}

/* Keep the dropdown visually separate from the server-clock bar below it. */
.notification-panel::before{
  content:"";
  position:absolute;
  top:-6px;
  right:17px;
  width:11px;
  height:11px;
  transform:rotate(45deg);
  background:var(--surface-2);
  border-left:1px solid var(--line-strong);
  border-top:1px solid var(--line-strong);
  z-index:2;
}

@media(max-width:980px){
  .notification-panel::before{display:none}
}

@media(max-width:620px){
  .notification-panel{
    border-radius:15px !important;
    box-shadow:0 22px 52px rgba(40,25,90,.16) !important;
  }
  html[data-theme="dark"] .notification-panel{
    box-shadow:0 26px 62px rgba(0,0,0,.52) !important;
  }
}

/* ===== v6.6.47-guest-identity.css ===== */

/* Keyzira v6.6.47 — guest identity clarity + account claim UX */

.guest-account-chip{
  min-width:132px;
  height:40px;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  gap:8px;
  padding:5px 10px 5px 6px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--surface);
  color:var(--text);
}

.guest-account-avatar{
  width:28px;
  height:28px;
  flex:0 0 28px;
  display:grid;
  place-items:center;
  border-radius:9px;
  background:color-mix(in srgb,var(--primary) 9%,var(--surface-2));
  border:1px solid color-mix(in srgb,var(--primary) 18%,var(--line));
  color:var(--primary);
  font-size:10px;
  font-weight:900;
}

.guest-account-copy{
  min-width:0;
  display:grid;
  line-height:1.05;
  gap:3px;
}

.guest-account-copy small{
  color:var(--muted);
  font-size:7.5px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.guest-account-copy strong{
  max-width:112px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--text);
  font-size:9.5px;
  font-weight:850;
}

/* The user's own competitor entry is impossible to miss without making
   the whole table look like a selected admin grid. */
.leaderboard-row.leaderboard-current-row,
tr.leaderboard-current-row{
  position:relative;
  background:color-mix(in srgb,var(--primary) 5%,var(--surface)) !important;
}

tr.leaderboard-current-row td:first-child{
  box-shadow:inset 3px 0 0 var(--primary);
}

.leaderboard-you-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:17px;
  padding:1px 6px;
  border-radius:999px;
  background:color-mix(in srgb,var(--primary) 10%,var(--surface-2));
  border:1px solid color-mix(in srgb,var(--primary) 24%,var(--line));
  color:var(--primary);
  font-size:7px !important;
  font-weight:900 !important;
  font-style:normal !important;
  letter-spacing:.05em;
  vertical-align:middle;
}

#leader-list li.leaderboard-current-row{
  border-radius:9px;
  background:color-mix(in srgb,var(--primary) 6%,var(--surface-2)) !important;
  box-shadow:inset 3px 0 0 var(--primary);
}

.guest-transfer-confirmation{
  width:100%;
  box-sizing:border-box;
  margin:12px 0 4px;
  padding:11px 12px;
  display:grid;
  grid-template-columns:32px minmax(0,1fr);
  align-items:center;
  gap:10px;
  border:1px solid color-mix(in srgb,var(--green) 28%,var(--line));
  border-radius:12px;
  background:color-mix(in srgb,var(--green) 6%,var(--surface));
  text-align:left;
}

.guest-transfer-confirmation>span{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:9px;
  background:color-mix(in srgb,var(--green) 12%,var(--surface-2));
  color:var(--green);
  font-weight:900;
}

.guest-transfer-confirmation>div{
  min-width:0;
  display:grid;
  gap:3px;
}

.guest-transfer-confirmation strong{
  color:var(--text);
  font-size:10.5px;
}

.guest-transfer-confirmation small{
  color:var(--muted);
  font-size:9px;
  line-height:1.45;
}

html[data-theme="dark"] .guest-account-chip{
  background:var(--surface-2);
  border-color:var(--line-strong);
}

html[data-theme="dark"] .guest-account-avatar{
  background:color-mix(in srgb,var(--primary) 14%,var(--surface-3));
  border-color:color-mix(in srgb,var(--primary) 28%,var(--line-strong));
}

html[data-theme="dark"] tr.leaderboard-current-row,
html[data-theme="dark"] .leaderboard-row.leaderboard-current-row{
  background:color-mix(in srgb,var(--primary) 9%,var(--surface)) !important;
}

html[data-theme="dark"] #leader-list li.leaderboard-current-row{
  background:color-mix(in srgb,var(--primary) 11%,var(--surface-2)) !important;
}

@media(max-width:1399px){
  .guest-account-chip{
    min-width:0;
    padding-right:7px;
  }
  .guest-account-copy small{display:none}
  .guest-account-copy strong{max-width:82px}
}

@media(max-width:720px){
  .guest-account-chip{
    width:36px;
    min-width:36px;
    height:36px;
    padding:3px;
    justify-content:center;
  }
  .guest-account-avatar{
    width:28px;
    height:28px;
  }
  .guest-account-copy{display:none}
}

/* ===== v6.6.48-stable-centered-header.css ===== */

/* Keyzira v6.6.48 — Stable centered public header
   Root cause fixed:
   the desktop header used `brand | remaining-space | actions`.
   When guest identity/auth actions grew, the nav was centered only inside
   the remaining space and visibly slid left. The nav is now independently
   centered on wide desktops. */

/* ----------------------------------------------------------
   1400–1599
   There is enough room for the product controls, but NOT enough
   room for logo + 7/8 categories + guest identity + auth actions
   in a visually stable single row. Use the established hamburger
   pattern instead of squeezing or shifting the category navigation.
   ---------------------------------------------------------- */
@media (min-width:1400px) and (max-width:1599px){
  body:not(.admin-mode) .site-header{
    height:66px !important;
    padding:6px 12px 0 !important;
    overflow:visible !important;
  }

  body:not(.admin-mode) .header-inner{
    position:relative !important;
    width:calc(100% - 16px) !important;
    max-width:1480px !important;
    height:54px !important;
    padding:0 10px 0 14px !important;
    display:grid !important;
    grid-template-columns:minmax(165px,1fr) 38px auto !important;
    align-items:center !important;
    gap:8px !important;
    border-radius:13px !important;
    overflow:visible !important;
  }

  body:not(.admin-mode) .brand{
    grid-column:1 !important;
    justify-self:start !important;
    min-width:0 !important;
  }

  body:not(.admin-mode) .mobile-menu{
    display:grid !important;
    position:static !important;
    grid-column:2 !important;
    width:36px !important;
    height:36px !important;
    border-radius:9px !important;
    font-size:15px !important;
    z-index:82 !important;
  }

  body:not(.admin-mode) .main-nav{
    display:none !important;
    position:absolute !important;
    z-index:81 !important;
    top:61px !important;
    left:0 !important;
    right:0 !important;
    width:auto !important;
    height:auto !important;
    padding:9px !important;
    border:1px solid var(--line) !important;
    border-radius:13px !important;
    background:var(--surface) !important;
    box-shadow:0 18px 45px rgba(8,10,24,.22) !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    align-items:stretch !important;
    justify-content:stretch !important;
    gap:5px !important;
    overflow:visible !important;
  }

  body:not(.admin-mode) .main-nav.open{
    display:grid !important;
  }

  body:not(.admin-mode) .main-nav a{
    width:100% !important;
    min-width:0 !important;
    height:39px !important;
    padding:0 11px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    border-radius:8px !important;
    color:var(--muted) !important;
    font-size:11px !important;
    font-weight:720 !important;
    white-space:nowrap !important;
  }

  body:not(.admin-mode) .main-nav a:hover,
  body:not(.admin-mode) .main-nav a.active{
    background:var(--primary-soft) !important;
    color:var(--primary) !important;
  }

  body:not(.admin-mode) .main-nav a.active::after{
    display:none !important;
  }

  body:not(.admin-mode) .header-actions{
    grid-column:3 !important;
    justify-self:end !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:6px !important;
    min-width:max-content !important;
  }

  /* Keep the guest's actual generated name visible at this width.
     The menu is what collapses, not the user's identity. */
  body:not(.admin-mode) .guest-account-chip{
    min-width:118px !important;
    max-width:132px !important;
  }

  body:not(.admin-mode) .guest-account-copy{
    display:grid !important;
  }

  body:not(.admin-mode) .guest-account-copy small{
    display:none !important;
  }

  body:not(.admin-mode) .guest-account-copy strong{
    display:block !important;
    max-width:86px !important;
  }
}


/* ----------------------------------------------------------
   1600+
   True centered desktop navigation:
        [ flexible left rail ] [ NAV ] [ flexible right rail ]
   Both rails are exactly equal, so changing account/guest controls
   can no longer move the category navigation away from screen center.
   ---------------------------------------------------------- */
@media (min-width:1600px){
  body:not(.admin-mode) .site-header{
    height:70px !important;
    padding:7px 12px 0 !important;
    overflow:visible !important;
  }

  body:not(.admin-mode) .header-inner{
    position:relative !important;
    width:calc(100% - 36px) !important;
    max-width:1680px !important;
    height:55px !important;
    padding:0 16px !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) max-content minmax(0,1fr) !important;
    align-items:center !important;
    column-gap:18px !important;
    border-radius:14px !important;
    overflow:visible !important;
  }

  body:not(.admin-mode) .brand{
    grid-column:1 !important;
    justify-self:start !important;
    min-width:0 !important;
    max-width:210px !important;
  }

  body:not(.admin-mode) .mobile-menu{
    display:none !important;
  }

  body:not(.admin-mode) .main-nav{
    grid-column:2 !important;
    justify-self:center !important;
    width:max-content !important;
    min-width:0 !important;
    max-width:none !important;
    height:100% !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:15px !important;
    overflow:visible !important;
  }

  body:not(.admin-mode) .main-nav a{
    flex:0 0 auto !important;
    min-width:0 !important;
    height:100% !important;
    padding:0 !important;
    font-size:11.8px !important;
    font-weight:720 !important;
    white-space:nowrap !important;
  }

  body:not(.admin-mode) .header-actions{
    grid-column:3 !important;
    justify-self:end !important;
    min-width:0 !important;
    max-width:100% !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:6px !important;
  }

  /* The identity remains readable; it no longer participates in
     calculating the nav center because of the symmetric grid above. */
  body:not(.admin-mode) .guest-account-chip{
    min-width:126px !important;
    max-width:142px !important;
  }

  body:not(.admin-mode) .guest-account-copy strong{
    max-width:94px !important;
  }
}


/* At common 1600–1749 screens, keep the category block compact enough
   to leave a clean visual gap before the right-side controls. */
@media (min-width:1600px) and (max-width:1749px){
  body:not(.admin-mode) .header-inner{
    width:calc(100% - 28px) !important;
    padding-inline:14px !important;
    column-gap:13px !important;
  }

  body:not(.admin-mode) .main-nav{
    gap:12px !important;
  }

  body:not(.admin-mode) .main-nav a{
    font-size:11.2px !important;
  }

  body:not(.admin-mode) .theme-quick-toggle{
    width:58px !important;
  }

  body:not(.admin-mode) .language-picker{
    padding-inline:4px !important;
  }

  body:not(.admin-mode) .guest-account-chip{
    min-width:120px !important;
    max-width:128px !important;
  }

  body:not(.admin-mode) .guest-account-copy strong{
    max-width:82px !important;
  }
}


/* Very large desktops can breathe without moving the nav center. */
@media (min-width:1900px){
  body:not(.admin-mode) .header-inner{
    max-width:1820px !important;
    padding-inline:18px !important;
    column-gap:22px !important;
  }

  body:not(.admin-mode) .main-nav{
    gap:18px !important;
  }

  body:not(.admin-mode) .main-nav a{
    font-size:12px !important;
  }
}


/* Dark dropdown must remain opaque when the 1400–1599 menu is open. */
html[data-theme="dark"] body:not(.admin-mode) .main-nav.open{
  background:var(--surface) !important;
  border-color:var(--line-strong) !important;
  box-shadow:0 22px 55px rgba(0,0,0,.42) !important;
}

/* ===== v6.6.49-test-hero-stats.css ===== */

/* Keyzira v6.6.49 — Test page hero statistics
   Replaces the tiny circular glyphs/text with actual compact product cards.
   Scoped to typing-tool-page so other page headers remain untouched. */

.typing-tool-page .hero-proof.hero-proof-cards{
  width:auto;
  min-width:560px;
  display:grid;
  grid-template-columns:repeat(3,minmax(155px,1fr));
  align-items:stretch;
  justify-content:end;
  gap:10px;
  position:relative;
}

/* Keep the subtle Keyzira dot texture, but move it behind the card group. */
.typing-tool-page .hero-proof.hero-proof-cards::before{
  inset:-34px -18px -30px -80px;
  opacity:.22;
  mask-image:linear-gradient(90deg,transparent,#000 28%,#000);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 28%,#000);
}

.typing-tool-page .hero-proof-cards .proof-card{
  position:relative;
  min-width:0;
  min-height:78px;
  padding:13px 14px;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  gap:12px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:15px;
  background:
    linear-gradient(145deg,
      color-mix(in srgb,var(--proof-accent) 5%,var(--surface)),
      var(--surface) 56%);
  box-shadow:
    0 12px 28px rgba(37,42,82,.055),
    inset 0 1px 0 rgba(255,255,255,.58);
  white-space:normal;
}

.typing-tool-page .hero-proof-cards .proof-card::before{
  content:"";
  position:absolute;
  left:14px;
  right:14px;
  top:0;
  height:2px;
  border-radius:0 0 4px 4px;
  background:linear-gradient(90deg,var(--proof-accent),transparent 90%);
  opacity:.72;
}

.typing-tool-page .hero-proof-cards .proof-card::after{
  content:"";
  position:absolute;
  width:62px;
  height:62px;
  right:-26px;
  bottom:-30px;
  border-radius:50%;
  background:var(--proof-accent);
  opacity:.045;
  pointer-events:none;
}

.typing-tool-page .hero-proof-cards .proof-card-tests{
  --proof-accent:#7458ff;
  --proof-soft:#eeeaff;
}

.typing-tool-page .hero-proof-cards .proof-card-languages{
  --proof-accent:#22abd1;
  --proof-soft:#e4f8fd;
}

.typing-tool-page .hero-proof-cards .proof-card-players{
  --proof-accent:#25b979;
  --proof-soft:#e4f8ef;
}

/* Proper icon tile instead of text symbols such as ⌁ / ◎ / ♟. */
.typing-tool-page .hero-proof-cards .proof-icon{
  width:44px;
  height:44px;
  flex:0 0 44px;
  display:grid;
  place-items:center;
  border-radius:12px;
  color:var(--proof-accent);
  background:color-mix(in srgb,var(--proof-accent) 10%,var(--surface-2));
  border:1px solid color-mix(in srgb,var(--proof-accent) 16%,var(--line));
  box-shadow:
    0 7px 17px color-mix(in srgb,var(--proof-accent) 12%,transparent),
    inset 0 1px 0 rgba(255,255,255,.55);
}

.typing-tool-page .hero-proof-cards .proof-icon svg{
  width:23px;
  height:23px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.typing-tool-page .hero-proof-cards .proof-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:3px;
}

.typing-tool-page .hero-proof-cards .proof-copy strong{
  display:block;
  color:var(--text);
  font-size:23px;
  line-height:1;
  font-weight:900;
  letter-spacing:-.55px;
  font-variant-numeric:tabular-nums;
}

.typing-tool-page .hero-proof-cards .proof-copy small{
  display:block;
  margin:0;
  color:var(--muted);
  font-size:11.5px;
  line-height:1.25;
  font-weight:720;
  letter-spacing:-.08px;
}

/* Dark theme: use real opaque surfaces and stronger icon separation. */
html[data-theme="dark"] .typing-tool-page .hero-proof-cards .proof-card{
  background:
    linear-gradient(145deg,
      color-mix(in srgb,var(--proof-accent) 8%,var(--surface-2)),
      var(--surface) 66%);
  border-color:var(--line-strong);
  box-shadow:
    0 15px 32px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.025);
}

html[data-theme="dark"] .typing-tool-page .hero-proof-cards .proof-icon{
  background:color-mix(in srgb,var(--proof-accent) 15%,var(--surface-2));
  border-color:color-mix(in srgb,var(--proof-accent) 30%,var(--line-strong));
  box-shadow:0 8px 20px color-mix(in srgb,var(--proof-accent) 12%,transparent);
}

html[data-theme="dark"] .typing-tool-page .hero-proof-cards .proof-copy small{
  color:color-mix(in srgb,var(--muted) 92%,#fff 8%);
}


/* Common 1600–1999 desktop. Keep the cards clean and readable rather than
   spacing the old stat dots very far apart. */
@media (min-width:1600px) and (max-width:1999px){
  .typing-tool-page .hero-proof.hero-proof-cards{
    min-width:540px !important;
    gap:9px !important;
  }

  .typing-tool-page .hero-proof-cards .proof-card{
    min-height:76px;
    padding:12px 13px;
  }
}


/* Laptop / compact desktop: hero can stack via the existing premium-home rule,
   and the three stat cards still stay as one row when space permits. */
@media (max-width:1320px){
  .typing-tool-page .hero-proof.hero-proof-cards{
    min-width:480px;
    grid-template-columns:repeat(3,minmax(145px,1fr));
    gap:8px;
  }

  .typing-tool-page .hero-proof-cards .proof-card{
    min-height:73px;
    padding:11px 12px;
    gap:10px;
  }

  .typing-tool-page .hero-proof-cards .proof-icon{
    width:40px;
    height:40px;
    flex-basis:40px;
    border-radius:11px;
  }

  .typing-tool-page .hero-proof-cards .proof-icon svg{
    width:21px;
    height:21px;
  }

  .typing-tool-page .hero-proof-cards .proof-copy strong{
    font-size:20px;
  }

  .typing-tool-page .hero-proof-cards .proof-copy small{
    font-size:10.5px;
  }
}


/* Existing hero becomes a column <=1060. Fill that row elegantly. */
@media (max-width:1060px){
  .typing-tool-page .hero-proof.hero-proof-cards{
    width:100%;
    min-width:0;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
  }

  .typing-tool-page .hero-proof-cards .proof-card{
    min-height:76px;
  }
}


/* Mobile: still show all 3 stats. The old CSS hid Global Players <=480px;
   this redesign intentionally keeps the information visible. */
@media (max-width:760px){
  .typing-tool-page .hero-proof.hero-proof-cards{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:7px !important;
  }

  .typing-tool-page .hero-proof-cards .proof-card{
    min-height:72px;
    padding:9px 8px;
    gap:7px;
    border-radius:12px;
  }

  .typing-tool-page .hero-proof-cards .proof-icon{
    width:34px;
    height:34px;
    flex-basis:34px;
    border-radius:9px;
  }

  .typing-tool-page .hero-proof-cards .proof-icon svg{
    width:18px;
    height:18px;
  }

  .typing-tool-page .hero-proof-cards .proof-copy strong{
    font-size:18px;
  }

  .typing-tool-page .hero-proof-cards .proof-copy small{
    font-size:9px;
    line-height:1.15;
  }
}

@media (max-width:520px){
  .typing-tool-page .hero-proof.hero-proof-cards{
    grid-template-columns:1fr 1fr !important;
  }

  .typing-tool-page .hero-proof-cards .proof-card:last-child{
    display:flex !important;
    grid-column:1 / -1;
  }

  .typing-tool-page .hero-proof-cards .proof-card{
    min-height:68px;
  }

  .typing-tool-page .hero-proof-cards .proof-copy small{
    font-size:9.5px;
  }
}

/* ===== v6.6.51-adsense-readiness.css ===== */
.trust-page{padding-top:34px;padding-bottom:50px}.trust-hero{max-width:850px;margin:0 auto 24px;text-align:center}.trust-hero h1{font-size:clamp(32px,5vw,54px);letter-spacing:-1.7px;margin:8px 0 12px}.trust-hero p{max-width:760px;margin:0 auto;color:var(--muted);line-height:1.75;font-size:15px}.trust-hero small{display:block;margin-top:12px;color:var(--muted);font-size:11px}.trust-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:20px;align-items:start}.trust-main{padding:30px}.trust-section+ .trust-section{border-top:1px solid var(--line);margin-top:24px;padding-top:24px}.trust-section h2{font-size:20px;letter-spacing:-.35px;margin:0 0 9px}.trust-section p{margin:0;color:var(--muted);font-size:14px;line-height:1.8}.trust-inline-links{margin-top:10px!important}.trust-inline-links a{color:var(--primary);font-weight:750}.trust-side{display:grid;gap:14px;position:sticky;top:86px}.trust-nav-card,.trust-contact-card,.trust-ad-card{padding:18px}.trust-nav-card strong{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:10px;color:var(--muted)}.trust-nav-card a{display:block;padding:10px 11px;border-radius:9px;text-decoration:none;color:var(--text);font-size:13px;font-weight:700}.trust-nav-card a:hover,.trust-nav-card a.active{background:color-mix(in srgb,var(--primary) 9%,transparent);color:var(--primary)}.trust-contact-card small{display:block;color:var(--muted);margin-bottom:6px}.trust-contact-card a{word-break:break-all;color:var(--primary);font-weight:800}.trust-ad-card strong{font-size:13px}.trust-ad-card p{font-size:11.5px;line-height:1.65;color:var(--muted);margin:7px 0 0}.trust-contact-form{display:grid;gap:14px}.trust-form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.trust-contact-form label{display:grid;gap:6px;font-size:11px;font-weight:800}.trust-contact-form input,.trust-contact-form textarea{width:100%;border:1px solid var(--line);background:var(--surface-2,var(--surface));color:var(--text);border-radius:10px;padding:11px 12px;font:inherit;outline:none}.trust-contact-form input:focus,.trust-contact-form textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 12%,transparent)}.trust-form-note{font-size:10.5px!important;line-height:1.55!important}.trust-success,.trust-error{padding:11px 13px;border-radius:10px;font-size:12px;font-weight:750}.trust-success{background:#e9f9ef;color:#16864d}.trust-error{background:#fff0f2;color:#be3652}.contact-honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;opacity:0!important}.publisher-value-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:22px}.publisher-value-card{border:1px solid var(--line);border-radius:13px;padding:17px;background:color-mix(in srgb,var(--surface) 96%,var(--primary) 4%)}.publisher-value-card h3{font-size:15px;margin:0 0 7px;letter-spacing:-.2px}.publisher-value-card p{font-size:12.5px!important;line-height:1.7!important;margin:0!important;color:var(--muted)}.footer-trust-links{display:flex;flex-wrap:wrap;gap:9px 14px;margin-top:9px}.adsense-readiness-check{margin-top:16px;padding:14px;border:1px solid var(--admin-line);border-radius:11px;background:var(--admin-surface-2)}.adsense-readiness-check h3{font-size:12px;margin:0 0 9px}.adsense-readiness-check ul{margin:0;padding-left:18px;color:var(--admin-muted);font-size:10.5px;line-height:1.75}.adsense-code-status{display:inline-flex;align-items:center;gap:7px;margin-top:10px;font-size:10px;font-weight:800}.adsense-code-status i{width:7px;height:7px;border-radius:50%;background:#aeb5c3}.adsense-code-status.ready i{background:#20a663}@media(max-width:900px){.trust-layout{grid-template-columns:1fr}.trust-side{position:static}.publisher-value-grid{grid-template-columns:1fr}.trust-form-row{grid-template-columns:1fr}}@media(max-width:560px){.trust-main{padding:20px}.trust-page{padding-top:22px}.trust-hero{text-align:left}.trust-hero p{margin:0}.trust-hero h1{font-size:36px}}

.keyzira-guide-library{margin-top:28px}.guide-library-head{margin-bottom:14px}.guide-library-head h2{margin:6px 0 0;font-size:clamp(24px,3vw,34px);letter-spacing:-.7px}


/* v6.6.54 — Trust / policy pages glow containment fix */
.trust-page{
  position:relative;
  isolation:isolate;
  padding-top:34px;
  padding-bottom:50px;
}
.trust-page::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:250px;
  pointer-events:none;
  z-index:-1;
  background:
    radial-gradient(ellipse 620px 240px at 10% 0%, color-mix(in srgb,var(--primary) 10%, transparent), transparent 72%),
    radial-gradient(ellipse 520px 220px at 92% 4%, color-mix(in srgb,var(--secondary) 6%, transparent), transparent 72%),
    linear-gradient(180deg, color-mix(in srgb,var(--surface) 88%, transparent) 0%, transparent 100%);
}
.trust-hero,
.trust-layout{
  position:relative;
  z-index:1;
}
.trust-hero{
  padding:8px 0 6px;
}
.trust-main,
.trust-nav-card,
.trust-contact-card,
.trust-ad-card{
  background:color-mix(in srgb,var(--surface) 98%, var(--bg));
  backdrop-filter:none;
}
.trust-main{
  box-shadow:0 18px 44px rgba(40,25,90,.06);
}
.trust-side{ top:96px; }

@media(max-width:900px){
  .trust-page::before{height:190px}
}
@media(max-width:560px){
  .trust-page::before{height:150px}
  .trust-hero{padding-top:4px}
}

/* ===== v6.6.52-footer-consent.css ===== */
/* Keyzira v6.6.52 — compact footer + consent controls */
.typeflow-footer{margin-top:44px;overflow:visible}.typeflow-footer:before{height:170px;opacity:.72}.typeflow-footer-inner{max-width:1240px;padding:32px 24px 18px}
.footer-main-grid{grid-template-columns:minmax(280px,1.35fr) minmax(140px,.62fr) minmax(170px,.72fr) minmax(230px,.9fr);gap:clamp(28px,3.4vw,52px);padding:0 0 26px;align-items:start}.footer-brand-column p{max-width:390px;margin:15px 0 10px;line-height:1.65}.footer-tagline{display:block;margin-top:4px}.footer-link-column>strong,.footer-contact-column>strong{margin:2px 0 14px}.footer-link-column a{margin:0 0 10px;line-height:1.35}.footer-email-card{max-width:280px;min-height:58px;padding:9px 10px;border-radius:12px}.footer-email-card>span{width:36px;height:36px;flex-basis:36px}.footer-email-card b{max-width:190px}.footer-bottom{min-height:0;padding:17px 0 1px;align-items:center;gap:16px}.footer-bottom>div.footer-legal-links{display:flex;align-items:center;justify-content:flex-end;gap:13px;flex-wrap:wrap}.footer-bottom a,.footer-cookie-preferences{font:inherit;color:var(--muted);white-space:nowrap}.footer-cookie-preferences{appearance:none;border:0;background:none;padding:0;cursor:pointer}.footer-cookie-preferences:hover{color:var(--primary)}.footer-language-chip{padding:5px 8px;border:1px solid var(--line);border-radius:7px;background:var(--surface);font-size:9.5px;font-weight:850}
.keyzira-consent[hidden],.keyzira-consent-modal[hidden]{display:none!important}.keyzira-consent{position:fixed;z-index:210;left:50%;bottom:max(18px,env(safe-area-inset-bottom));transform:translateX(-50%);width:min(1120px,calc(100vw - 28px));display:flex;align-items:center;justify-content:space-between;gap:22px;padding:17px 18px;border:1px solid color-mix(in srgb,var(--primary) 20%,var(--line));border-radius:16px;background:color-mix(in srgb,var(--surface) 94%,var(--bg));box-shadow:0 24px 70px rgba(8,10,24,.22);backdrop-filter:blur(18px)}.keyzira-consent-copy{display:flex;align-items:flex-start;gap:13px;min-width:0}.keyzira-consent-icon{width:38px;height:38px;flex:0 0 38px;display:grid;place-items:center;border-radius:11px;background:var(--primary-soft);color:var(--primary);font-size:21px;font-weight:800}.keyzira-consent-copy strong{display:block;font-size:13px;margin:1px 0 4px}.keyzira-consent-copy p{margin:0;max-width:680px;color:var(--muted);font-size:11.5px;line-height:1.55}.keyzira-consent-copy a{color:var(--primary);font-weight:750}.keyzira-consent-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;flex:0 0 auto}.consent-button{min-height:38px;padding:0 13px;border-radius:10px;border:1px solid var(--line);font:inherit;font-size:11.5px;font-weight:800;cursor:pointer;transition:.15s}.consent-button.ghost{background:transparent;color:var(--muted)}.consent-button.secondary{background:var(--surface);color:var(--text)}.consent-button.primary{border-color:var(--primary);background:var(--primary);color:#fff}.consent-button:hover{transform:translateY(-1px);box-shadow:0 8px 20px color-mix(in srgb,var(--primary) 12%,transparent)}
.keyzira-consent-modal{position:fixed;z-index:230;inset:0;display:grid;place-items:center;padding:20px}.consent-modal-backdrop{position:absolute;inset:0;border:0;background:rgba(7,8,18,.62);backdrop-filter:blur(5px);cursor:default}.consent-modal-card{position:relative;width:min(560px,100%);max-height:min(760px,calc(100vh - 38px));overflow:auto;border:1px solid var(--line);border-radius:18px;background:var(--surface);box-shadow:0 32px 100px rgba(0,0,0,.34);padding:21px}.consent-modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding-bottom:16px;border-bottom:1px solid var(--line)}.consent-modal-kicker{font-size:9px;letter-spacing:.12em;color:var(--primary);font-weight:900}.consent-modal-head h2{margin:5px 0 0;font-size:22px;letter-spacing:-.45px}.consent-modal-close{width:34px;height:34px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2,var(--surface));color:var(--text);font-size:20px;cursor:pointer}.consent-option{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px 2px;border-bottom:1px solid var(--line);cursor:pointer}.consent-option strong{font-size:13px}.consent-option p,.consent-ads-note p{margin:5px 0 0;color:var(--muted);font-size:11px;line-height:1.55}.consent-option.locked{cursor:default}.consent-required{flex:0 0 auto;padding:5px 8px;border-radius:99px;background:var(--primary-soft);color:var(--primary);font-size:9.5px;font-weight:850}.consent-switch{position:relative;width:42px;height:24px;flex:0 0 42px}.consent-switch input{position:absolute;opacity:0;pointer-events:none}.consent-switch i{position:absolute;inset:0;border-radius:99px;background:color-mix(in srgb,var(--muted) 28%,transparent);transition:.18s}.consent-switch i:after{content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.2);transition:.18s}.consent-switch input:checked+i{background:var(--primary)}.consent-switch input:checked+i:after{transform:translateX(18px)}.consent-switch input:focus-visible+i{outline:3px solid color-mix(in srgb,var(--primary) 22%,transparent);outline-offset:2px}.consent-ads-note{margin:15px 0 0;padding:13px 14px;border-radius:11px;background:color-mix(in srgb,var(--primary) 6%,var(--surface));border:1px solid color-mix(in srgb,var(--primary) 14%,var(--line))}.consent-ads-note strong{font-size:11.5px}.consent-modal-footer{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-top:18px}.consent-modal-footer a{font-size:11px;color:var(--primary);font-weight:750}html.consent-modal-open,html.consent-modal-open body{overflow:hidden}
@media(max-width:1080px){.footer-main-grid{grid-template-columns:1.3fr .7fr .8fr}.footer-contact-column{grid-column:auto;display:flex;gap:0}.footer-contact-column>strong{margin:2px 0 14px}.footer-admin-shortcut{margin-top:12px}.footer-brand-column{grid-column:1/-1}.keyzira-consent{align-items:flex-start}.keyzira-consent-actions{max-width:360px}}@media(max-width:780px){.typeflow-footer-inner{padding:26px 16px 16px}.footer-main-grid{grid-template-columns:1fr 1fr;gap:24px 28px;padding-bottom:22px}.footer-brand-column{grid-column:1/-1}.footer-contact-column{grid-column:1/-1}.footer-bottom{align-items:flex-start;flex-direction:column}.footer-bottom>div.footer-legal-links{justify-content:flex-start}.keyzira-consent{bottom:max(10px,env(safe-area-inset-bottom));flex-direction:column;gap:14px;padding:15px}.keyzira-consent-actions{width:100%;max-width:none;display:grid;grid-template-columns:1fr 1fr}.keyzira-consent-actions .ghost{grid-column:1/-1;order:3}.consent-button{width:100%}}@media(max-width:480px){.typeflow-footer{margin-top:34px}.footer-main-grid{grid-template-columns:1fr;gap:20px}.footer-brand-column,.footer-contact-column{grid-column:auto}.footer-link-column,.footer-contact-column{border-top:1px solid var(--line);padding-top:18px}.footer-bottom>div.footer-legal-links{gap:10px 13px}.keyzira-consent-copy{gap:10px}.keyzira-consent-icon{width:34px;height:34px;flex-basis:34px}.keyzira-consent-actions{grid-template-columns:1fr}.keyzira-consent-actions .ghost{grid-column:auto;order:0}.consent-modal-card{padding:17px;border-radius:15px}.consent-modal-footer{align-items:stretch;flex-direction:column}.consent-modal-footer .consent-button{width:100%}}

/* ===== v6.6.53-footer-polish.css ===== */
/* Keyzira v6.6.53 — footer visual polish + visible legal navigation */
.typeflow-footer{
  margin-top:44px;
  border-top:1px solid var(--line);
  background:color-mix(in srgb,var(--surface) 88%,var(--bg));
  overflow:hidden;
}
.typeflow-footer:before{
  inset:0;
  height:auto;
  opacity:1;
  background:
    radial-gradient(circle at 13% 0,color-mix(in srgb,var(--primary) 8%,transparent),transparent 40%),
    radial-gradient(circle at 84% 8%,color-mix(in srgb,var(--primary-2) 7%,transparent),transparent 38%),
    linear-gradient(180deg,color-mix(in srgb,var(--surface) 94%,var(--bg)) 0%,color-mix(in srgb,var(--surface) 88%,var(--bg)) 100%);
}
.typeflow-footer-inner{
  max-width:1280px;
  padding:32px 24px 18px;
}
.footer-main-grid{
  display:grid;
  grid-template-columns:minmax(270px,1.35fr) minmax(120px,.58fr) minmax(145px,.66fr) minmax(160px,.75fr) minmax(220px,.92fr);
  gap:clamp(24px,2.6vw,42px);
  align-items:start;
  padding:0 0 28px;
}
.footer-brand-column p{max-width:385px;margin:15px 0 9px;line-height:1.65}
.footer-tagline{margin-top:3px}
.footer-link-column>strong,.footer-contact-column>strong{margin:2px 0 14px}
.footer-link-column a{margin:0 0 10px;line-height:1.35}
.footer-legal-column a{white-space:normal}
.footer-email-card{max-width:270px}
.footer-bottom{
  min-height:52px;
  padding:15px 0 0;
  border-top:1px solid color-mix(in srgb,var(--line) 88%,transparent);
  align-items:center;
  gap:18px;
}
.footer-bottom>div.footer-legal-links{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  flex-wrap:wrap;
}
.footer-cookie-preferences{
  display:inline-flex;
  align-items:center;
  min-height:29px;
  padding:0 9px;
  border:1px solid var(--line);
  border-radius:8px;
  background:color-mix(in srgb,var(--surface) 92%,transparent);
  color:var(--muted);
  font-size:10.5px;
  font-weight:720;
}
.footer-cookie-preferences:hover{
  border-color:color-mix(in srgb,var(--primary) 34%,var(--line));
  color:var(--primary);
  background:var(--primary-soft);
}
.footer-language-chip{padding:6px 8px}

@media(max-width:1180px){
  .footer-main-grid{
    grid-template-columns:minmax(280px,1.25fr) repeat(3,minmax(145px,.68fr));
    gap:28px 34px;
  }
  .footer-brand-column{grid-column:1/-1}
  .footer-contact-column{grid-column:1/-1;display:grid;grid-template-columns:145px minmax(240px,300px) auto;align-items:center;gap:18px}
  .footer-contact-column>strong,.footer-admin-shortcut{margin:0}
}
@media(max-width:780px){
  .typeflow-footer-inner{padding:27px 16px 16px}
  .footer-main-grid{grid-template-columns:1fr 1fr;gap:24px 28px;padding-bottom:23px}
  .footer-brand-column{grid-column:1/-1}
  .footer-contact-column{grid-column:1/-1;display:flex;gap:0}
  .footer-contact-column>strong{margin:2px 0 14px}
  .footer-admin-shortcut{margin-top:12px}
  .footer-bottom{padding-top:16px;align-items:flex-start;flex-direction:column}
  .footer-bottom>div.footer-legal-links{justify-content:flex-start}
}
@media(max-width:480px){
  .typeflow-footer{margin-top:34px}
  .footer-main-grid{grid-template-columns:1fr;gap:0}
  .footer-brand-column{padding-bottom:22px}
  .footer-link-column,.footer-contact-column{grid-column:auto;border-top:1px solid var(--line);padding:18px 0 7px}
  .footer-link-column>strong,.footer-contact-column>strong{margin:0 0 12px}
  .footer-bottom{margin-top:4px}
}

/* ===== v6.6.76-account-change-limits.css ===== */
/* Keyzira v6.6.76 — account change cooldown feedback */
.account-change-hint,
.account-password-policy-hint{
  display:block;
  margin-top:7px;
  color:var(--muted);
  font-size:11.5px;
  line-height:1.5;
  font-weight:650;
}
.account-change-hint.is-locked{
  color:#a36c08;
  font-weight:750;
}
.account-username-field .account-field-shell input[readonly]{
  cursor:not-allowed;
  opacity:.78;
  background:color-mix(in srgb,var(--surface-2) 82%,var(--surface));
}
.account-change-cooldown{
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin:0 0 16px;
  padding:14px 16px;
  border:1px solid color-mix(in srgb,#f2a72f 34%,var(--line));
  border-radius:14px;
  background:color-mix(in srgb,#fff5dc 58%,var(--surface));
}
.account-change-cooldown>span{
  width:34px;
  height:34px;
  flex:0 0 34px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:color-mix(in srgb,#f2a72f 14%,var(--surface));
  color:#c98108;
  font-weight:900;
}
.account-change-cooldown strong{
  display:block;
  color:var(--text);
  font-size:13px;
  line-height:1.45;
}
.account-change-cooldown small{
  display:block;
  margin-top:3px;
  color:var(--muted);
  font-size:11.5px;
  line-height:1.5;
}
.account-password-form .security-submit:disabled{
  cursor:not-allowed;
  opacity:.52;
  box-shadow:none;
  transform:none;
}
html[data-theme="dark"] .account-change-cooldown{
  background:color-mix(in srgb,#5a4218 30%,var(--surface));
  border-color:color-mix(in srgb,#d7962b 32%,var(--line));
}
@media(max-width:720px){
  .account-change-hint,.account-password-policy-hint{font-size:11px}
  .account-change-cooldown{padding:12px 13px}
}

/* v6.6.77b notification delete control - global pages */
.notification-item-meta{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.notification-delete{appearance:none;-webkit-appearance:none;width:24px;height:24px;min-width:24px;min-height:24px;padding:0!important;margin:0;border:0!important;outline:0;border-radius:7px;background:transparent!important;box-shadow:none!important;color:var(--muted);display:grid;place-items:center;font:700 16px/1 system-ui;cursor:pointer;transition:background .15s,color .15s}
.notification-delete:hover{background:color-mix(in srgb,#ef4444 10%,var(--card))!important;color:#dc2626}
.notification-delete:focus-visible{outline:2px solid color-mix(in srgb,var(--primary) 55%,transparent);outline-offset:1px}
.notification-panel-head button:disabled,.notification-panel-head button.is-disabled{opacity:.42;cursor:default;pointer-events:none}


/* ===== v6.6.77-practice-challenge-restart-countdown.css ===== */
.word-viewport.tf-reading-card{position:relative;}
.typing-restart-countdown{
  position:absolute;
  inset:0;
  z-index:8;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:inherit;
  background:color-mix(in srgb, var(--surface, #ffffff) 86%, transparent);
  -webkit-backdrop-filter:blur(5px);
  backdrop-filter:blur(5px);
  color:var(--accent, #6d5dfc);
  font-size:clamp(58px, 9vw, 104px);
  font-weight:900;
  line-height:1;
  letter-spacing:-.055em;
  text-shadow:0 10px 32px color-mix(in srgb, var(--accent, #6d5dfc) 24%, transparent);
  user-select:none;
  pointer-events:none;
}
.typing-restart-countdown[hidden]{display:none !important;}
html[data-theme="dark"] .typing-restart-countdown{
  background:color-mix(in srgb, #0c1018 88%, transparent);
  color:#9c86ff;
}