*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;width:100%;background-color:#dbe1e7}#root{height:100%;background-color:#dbe1e7}.app-layout{display:flex;flex-direction:column;min-height:100vh}.main-content{flex:1;display:flex;flex-direction:column}.navbar{display:flex;justify-content:space-between;align-items:center;padding:1.2rem 2rem;background:linear-gradient(to right,#0f172a,#1e293b);color:#f8fafc;position:sticky;top:0;z-index:999;box-shadow:0 2px 10px #0003;transition:background .3s ease-in-out}.navbar-logo{font-size:2rem;font-weight:800;font-family:Poppins,Segoe UI,sans-serif;background:linear-gradient(to right,#38bdf8,#9333ea);-webkit-background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:1px;cursor:pointer;transition:transform .3s ease,text-shadow .3s ease}.navbar-logo:hover{transform:scale(1.05);text-shadow:0 2px 10px rgba(56,189,248,.3)}.navbar-links{display:flex;align-items:center;gap:2rem;list-style:none;margin:0;padding:0}.navbar-links li{position:relative}.navbar-links a{position:relative;text-decoration:none;color:#e2e8f0;font-weight:600;font-size:1.1rem;font-family:Inter,Segoe UI,sans-serif;letter-spacing:.3px;padding:.35rem 0;transition:color .3s ease,transform .2s ease}.navbar-links a:after{content:"";position:absolute;left:0;bottom:-4px;height:2px;width:0%;background:linear-gradient(90deg,#38bdf8,#9333ea);transition:width .4s ease;border-radius:1px}.navbar-links a:hover{color:#38bdf8;transform:translateY(-1px)}.navbar-links a:hover:after{width:100%}.navbar-links a.coffee-button{background:linear-gradient(135deg,#ff6b6b,#ee5a6f);padding:.5rem 1rem;border-radius:8px;color:#fff!important;font-weight:600;display:inline-flex;align-items:center;gap:.3rem}.navbar-links a.coffee-button:after{display:none}.navbar-links a.coffee-button:hover{transform:translateY(-2px);box-shadow:0 4px 12px #ff6b6b66;color:#fff!important;background:linear-gradient(135deg,#ff5252,#e53935)}.navbar-links a.pro-link{background:linear-gradient(135deg,#667eea,#764ba2);padding:.5rem 1rem;border-radius:8px;color:#fff!important;font-weight:600}.navbar-links a.pro-link:after{display:none}.navbar-links a.pro-link:hover{transform:translateY(-2px);box-shadow:0 4px 12px #667eea66;color:#fff!important}.navbar-toggle{display:none;flex-direction:column;justify-content:space-between;width:24px;height:18px;cursor:pointer;z-index:1001}.navbar-toggle span{height:3px;width:100%;background-color:#38bdf8;border-radius:2px;transition:all .3s ease}.navbar-toggle.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}.navbar-toggle.open span:nth-child(2){opacity:0}.navbar-toggle.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}@media (max-width: 768px){.navbar-links{position:absolute;top:100%;right:2rem;background-color:#0f172a;flex-direction:column;align-items:flex-start;width:200px;padding:1rem;border-radius:8px;box-shadow:0 10px 20px #0006;display:none}.navbar-links.active{display:flex}.navbar-links li{width:100%}.navbar-links a{width:100%;padding:.5rem 0;color:#f1f5f9}.navbar-toggle{display:flex}}.home{flex:1;display:flex;align-items:center;justify-content:center;padding:2rem;background-color:#fff;overflow-x:hidden}.home-container{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:2rem;max-width:1200px;width:100%;box-sizing:border-box}.home-side-image{max-width:300px;flex-shrink:0;display:flex;justify-content:center;align-items:center;animation:floatY 4s ease-in-out infinite}.home-side-image img{width:100%;height:auto;object-fit:contain;display:block}@keyframes floatY{0%{transform:translateY(0)}50%{transform:translateY(-15px)}to{transform:translateY(0)}}.home-content{background:#ceb8bc;padding:2rem 2.5rem;border-radius:16px;text-align:center;color:#1e293b;flex:1;min-width:300px;box-shadow:0 6px 18px #0000000f}.home-content h1{font-size:clamp(2.5rem,6.5vw,3.5rem);font-weight:1400;margin-bottom:1.2rem;line-height:1.2;letter-spacing:-.5px;background:linear-gradient(90deg,#3f3cbb,#35045d,#092e69);background-size:200%;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:gradientMove 4s ease-in-out infinite alternate;text-align:center}@keyframes gradientMove{0%{background-position:0%}to{background-position:100%}}.start-test-btn{display:inline-block;margin-top:1.5rem;padding:.9rem 1.8rem;font-size:1.1rem;font-weight:600;background:linear-gradient(90deg,#3b82f6,#9333ea);color:#fff;text-decoration:none;border-radius:10px;transition:background .3s ease,transform .2s ease;box-shadow:0 4px 14px #00000026}.start-test-btn:hover{background:linear-gradient(90deg,#2563eb,#7e22ce);transform:scale(1.05)}.highlight{font-style:italic;font-weight:1600;background:linear-gradient(90deg,#07405b,#022f14);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.home-content p{font-size:clamp(1rem,2.2vw,1.25rem);color:#010814;margin-bottom:1.2rem;line-height:1.8;font-weight:400;max-width:640px;margin-inline:auto;text-align:center;opacity:.92;letter-spacing:.2px;text-wrap:balance}@media (max-width: 1024px){.home-container{flex-direction:column;gap:1.5rem}.home-side-image{max-width:180px}.home-content{padding:1.5rem}.home-content h1{font-size:2rem}.home-content p{font-size:1rem}}body{margin:0;padding:0;background:linear-gradient(135deg,#667eea,#764ba2,#f093fb);background-size:400% 400%;animation:gradientShift 15s ease infinite;font-family:Poppins,sans-serif;min-height:100vh;color:#0f172a;position:relative;overflow-x:hidden}.typing-area:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at 20% 50%,rgba(120,119,198,.3) 0%,transparent 50%),radial-gradient(circle at 80% 80%,rgba(255,119,198,.3) 0%,transparent 50%),radial-gradient(circle at 40% 20%,rgba(120,219,255,.3) 0%,transparent 50%);animation:particleFloat 20s ease-in-out infinite;pointer-events:none;z-index:0}@keyframes particleFloat{0%,to{transform:translate(0) scale(1);opacity:.5}33%{transform:translate(30px,-30px) scale(1.1);opacity:.7}66%{transform:translate(-20px,20px) scale(.9);opacity:.6}}.typing-area{min-height:100vh;padding:4rem 2rem;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;z-index:1}.difficulty-selector{display:flex;align-items:center;gap:1rem;margin-bottom:2.5rem;background:#fffffff2;backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);padding:1.25rem 2rem;border-radius:16px;box-shadow:0 8px 32px #0000001f,0 2px 8px #00000014,inset 0 1px #ffffffe6;border:1px solid rgba(255,255,255,.3);transition:all .3s ease;animation:slideDown .5s ease-out}.difficulty-selector:hover{transform:translateY(-2px);box-shadow:0 12px 40px #00000026,0 4px 12px #0000001a,inset 0 1px #ffffffe6}@keyframes slideDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.difficulty-label{font-weight:700;font-size:1.05rem;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-right:.5rem;letter-spacing:.5px;display:flex;align-items:center;gap:.5rem}.difficulty-label:before{content:"⚡";font-size:1.2rem;filter:drop-shadow(0 2px 4px rgba(102,126,234,.3))}.difficulty-buttons{display:flex;gap:.5rem}.difficulty-btn{padding:.7rem 1.4rem;border:2px solid rgba(102,126,234,.3);border-radius:10px;background:#ffffffe6;color:#667eea;font-weight:700;font-size:.95rem;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);font-family:Poppins,sans-serif;position:relative;overflow:hidden;letter-spacing:.3px}.difficulty-btn:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:#667eea1a;transform:translate(-50%,-50%);transition:width .6s,height .6s}.difficulty-btn:hover:not(.disabled):before{width:300px;height:300px}.difficulty-btn:hover:not(.disabled){background:#667eea26;border-color:#667eea;transform:translateY(-3px) scale(1.05);box-shadow:0 8px 16px #667eea4d,0 4px 8px #667eea33;color:#5568d3}.difficulty-btn.active{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-color:#764ba2;box-shadow:0 8px 20px #667eea80,0 4px 10px #764ba24d,inset 0 1px #fff3;transform:scale(1.05);position:relative}.difficulty-btn.active:after{content:"";position:absolute;inset:-2px;background:linear-gradient(135deg,#667eea,#764ba2,#f093fb);border-radius:10px;z-index:-1;opacity:.6;animation:shimmer 2s infinite}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.difficulty-btn.disabled{opacity:.5;cursor:not-allowed;transform:none}.difficulty-btn.disabled:hover{background:#fffc;border-color:#3b82f64d;box-shadow:none;transform:none}.typing-area h2{font-size:2.6rem;font-weight:900;color:#000;margin-bottom:2.5rem;text-shadow:0 2px 8px rgba(0,0,0,.1),0 4px 12px rgba(0,0,0,.15);position:relative;letter-spacing:2px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.1))}.typing-area h2:before{content:"⏱️";position:absolute;left:-3.5rem;top:50%;transform:translateY(-50%);font-size:2rem;animation:timerPulse 1.5s infinite ease-in-out;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}.typing-area h2:after{content:"⏳";position:absolute;right:-3rem;top:50%;transform:translateY(-50%);font-size:2rem;animation:timerPulse 1.5s infinite ease-in-out .75s;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}@keyframes timerPulse{0%,to{opacity:.6;transform:translateY(-50%) scale(1) rotate(0)}50%{opacity:1;transform:translateY(-50%) scale(1.2) rotate(10deg)}}.text-display{background:#ffffffd9;backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border:2px solid rgba(255,255,255,.4);border-radius:24px;padding:3rem 2.5rem;max-width:900px;font-size:1.35rem;line-height:2.4rem;letter-spacing:.4px;word-spacing:4px;box-shadow:0 20px 60px #00000026,0 8px 24px #0000001a,inset 0 1px #ffffffe6,inset 0 -1px #0000000d;color:#1a1a2e;margin-bottom:2.5rem;text-align:left;overflow-y:auto;max-height:280px;scrollbar-width:thin;scrollbar-color:rgba(102,126,234,.5) transparent;transition:all .3s ease;position:relative}.text-display:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#667eea,#764ba2,#f093fb);border-radius:24px 24px 0 0;opacity:.6}.text-display:hover{transform:translateY(-2px);box-shadow:0 24px 72px #0000002e,0 10px 30px #0000001f,inset 0 1px #ffffffe6}.text-display::-webkit-scrollbar{width:8px}.text-display::-webkit-scrollbar-track{background:#ffffff1a;border-radius:10px}.text-display::-webkit-scrollbar-thumb{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:10px;border:2px solid rgba(255,255,255,.2)}.text-display::-webkit-scrollbar-thumb:hover{background:linear-gradient(135deg,#764ba2,#f093fb)}.correct{color:#10b981;font-weight:700;background:linear-gradient(135deg,#10b98126,#0596691a);padding:2px 4px;border-radius:6px;box-shadow:0 2px 4px #10b98133;animation:correctPulse .3s ease;position:relative}@keyframes correctPulse{0%{transform:scale(.95);opacity:.8}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}.incorrect{color:#ef4444;background:linear-gradient(135deg,#ef444433,#dc262626);font-weight:700;padding:2px 4px;border-radius:6px;text-decoration:line-through;box-shadow:0 2px 4px #ef44444d;animation:incorrectShake .3s ease;position:relative}@keyframes incorrectShake{0%,to{transform:translate(0)}25%{transform:translate(-3px)}75%{transform:translate(3px)}}.text-display span{transition:all .2s cubic-bezier(.4,0,.2,1);display:inline-block;position:relative}.text-display span.active{animation:activeBounce .5s cubic-bezier(.4,0,.2,1);border-bottom:3px solid;border-image:linear-gradient(90deg,#667eea,#764ba2) 1;background:linear-gradient(135deg,#667eea1a,#764ba21a);padding:2px 4px;border-radius:4px;box-shadow:0 0 10px #667eea66,inset 0 0 10px #667eea1a;position:relative}.text-display span.active:after{content:"";position:absolute;bottom:-3px;left:0;width:100%;height:3px;background:linear-gradient(90deg,#667eea,#764ba2,#f093fb);animation:cursorBlink 1s infinite;border-radius:2px}@keyframes activeBounce{0%{transform:scale(.9) translateY(2px);opacity:.7}50%{transform:scale(1.15) translateY(-2px);opacity:1}to{transform:scale(1) translateY(0);opacity:1}}@keyframes cursorBlink{0%,to{opacity:1}50%{opacity:.3}}.typing-area textarea{width:100%;max-width:900px;height:200px;padding:2rem 1.75rem;font-size:1.2rem;border:2px solid rgba(255,255,255,.3);border-radius:20px;resize:none;outline:none;background:#ffffffe6;backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);color:#1a1a2e;box-shadow:0 15px 40px #0000001f,0 5px 15px #00000014,inset 0 1px #ffffffe6;transition:all .3s cubic-bezier(.4,0,.2,1);font-family:Poppins,sans-serif;letter-spacing:.3px;line-height:1.8;position:relative}.typing-area textarea::placeholder{color:#667eea80;font-style:italic}.typing-area textarea:focus{border-color:#667eea99;box-shadow:0 20px 50px #667eea40,0 8px 20px #764ba233,0 0 0 4px #667eea26,inset 0 1px #ffffffe6;transform:translateY(-2px);background:#fffffff2}.typing-area textarea:hover:not(:focus){border-color:#667eea66;box-shadow:0 18px 45px #00000026,0 6px 18px #0000001a,inset 0 1px #ffffffe6}.typing-area:after{content:"";position:fixed;bottom:0;left:0;height:4px;background:linear-gradient(90deg,#667eea,#764ba2,#f093fb);width:0%;transition:width .3s ease;z-index:1000;box-shadow:0 -2px 10px #667eea80}@media (max-width: 768px){.typing-area{padding:1.5rem 1rem 1rem;min-height:auto;justify-content:flex-start}.typing-area h2{font-size:1.5rem;letter-spacing:1px;margin-bottom:1.5rem}.typing-area h2:before,.typing-area h2:after{display:none}.difficulty-selector{flex-direction:column;align-items:flex-start;gap:.75rem;padding:1rem;width:100%;max-width:900px;margin-bottom:1.5rem}.difficulty-buttons{width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}.difficulty-btn{padding:.5rem .75rem;font-size:.85rem}.text-display{padding:1.5rem 1.25rem;font-size:1.1rem;line-height:1.8rem;max-height:180px;min-height:150px;border-radius:16px;margin-bottom:1rem;position:relative;z-index:10}.typing-area textarea{height:120px;min-height:120px;font-size:1rem;padding:1.25rem;border-radius:16px;position:relative;z-index:5}.difficulty-selector{padding:1rem 1.25rem;border-radius:14px}}@media (max-width: 768px) and (max-height: 900px){.typing-area{padding-top:1rem;padding-bottom:.5rem}.text-display{max-height:140px;min-height:120px;padding:1.25rem 1rem;font-size:1rem;line-height:1.6rem}.typing-area textarea{height:100px;min-height:100px;padding:1rem}.typing-area h2{font-size:1.3rem;margin-bottom:1rem}}@media (max-width: 480px){.typing-area{padding:1rem .75rem}.text-display{max-height:120px;min-height:100px;padding:1rem .75rem;font-size:.95rem;line-height:1.5rem}.typing-area textarea{height:90px;min-height:90px;padding:.9rem;font-size:.95rem}.typing-area h2{font-size:1.2rem;margin-bottom:.75rem}}.learn-to-type-page{width:100%;max-width:1200px;margin:0 auto;padding:3.5rem 1.75rem;background:linear-gradient(to bottom right,#dbe1e7,#dbe1e7);font-family:Inter,Segoe UI,Tahoma,sans-serif;color:#0f172a;animation:fadeIn .6s ease-in-out;box-sizing:border-box}@keyframes fadeIn{0%{opacity:0;transform:translateY(25px)}to{opacity:1;transform:translateY(0)}}.main-heading{text-align:center;font-size:clamp(2.2rem,6vw,3.2rem);font-weight:900;margin-bottom:3rem;background:linear-gradient(90deg,#3b82f6,#5b21b6);background-size:200% 200%;animation:gradientShift 5s ease infinite;-webkit-background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:1px;text-shadow:0 2px 8px rgba(0,0,0,.04)}@keyframes gradientShift{0%{background-position:0% 50%}to{background-position:100% 50%}}.learn-section{margin-bottom:2.5rem;background:#f9fafb;padding:2rem 1.75rem;border-radius:16px;box-shadow:0 12px 28px #0000000d;transition:transform .3s ease,box-shadow .3s ease}.learn-section:hover{transform:translateY(-2px);box-shadow:0 20px 48px #00000012}.learn-section p,.learn-section ul{font-size:1.1rem;line-height:1.8;color:#1e293b;margin:.5rem 0 1.2rem;letter-spacing:.3px;word-spacing:1px;font-weight:500}.learn-section p code,.finger-item code{font-family:Fira Code,monospace;background:linear-gradient(to right,#e0f2fe,#e9d5ff);padding:.25rem .65rem;border-radius:999px;font-size:.95rem;color:#1e293b;font-weight:600;white-space:nowrap;margin-left:.3rem}.finger-placement-wrapper{display:flex;flex-wrap:wrap;gap:2rem;margin:1.8rem 0 1rem;padding:0;justify-content:space-between}.finger-column{flex:1;min-width:240px}.finger-column h4{font-size:1.15rem;margin-bottom:.8rem;color:#0f172a}.finger-map{display:flex;flex-direction:column;gap:.5rem}.finger-item{font-size:1rem;background:#f1f5f9;padding:.6rem 1rem;border-radius:8px;color:#1e293b;box-shadow:0 2px 4px #0000000a;transition:background .2s ease}.finger-item:hover{background:#e2e8f0}.thumb-info{margin-top:2rem;line-height:1.85;color:#334155}.learn-image{margin:2.5rem auto 0;max-width:500px;width:100%;display:block;border-radius:14px;box-shadow:0 8px 22px #00000014;transition:box-shadow .3s ease,transform .3s ease}.learn-image:hover{box-shadow:0 12px 28px #0000001f;transform:scale(1.02)}@media (max-width: 768px){.finger-placement-wrapper{flex-direction:column}.finger-column{min-width:100%}}.code{font-family:Courier New,monospace;background:#f1f5f9;padding:.3rem .5rem;border-radius:6px;color:#1e293b;font-size:.95rem;word-break:break-word}.closing-message{background:#e0fdf4;padding:2rem 1.5rem;margin-top:3.5rem;border-left:6px solid #10b981;border-radius:14px;text-align:center;font-weight:600;font-size:1.25rem;color:#065f46;box-shadow:0 8px 24px #0000000a;transition:background .3s ease}.closing-message:hover{background:#ccfce8}@media (max-width: 768px){.main-heading{font-size:2rem}.learn-section{padding:1.8rem 1.25rem}.learn-section ul li{font-size:1rem}.finger-layout{flex-direction:column}}@media (max-width: 480px){.learn-to-type-page{padding:2rem 1rem}.main-heading{font-size:1.75rem;margin-bottom:2rem;line-height:1.3}.learn-section{padding:1.5rem 1rem;margin-bottom:2rem}.learn-section p,.learn-section ul{font-size:1rem;line-height:1.6}.finger-item{font-size:.95rem;padding:.6rem .9rem}.finger-column h4{font-size:1rem}.learn-image{max-width:100%;margin-top:1.5rem}.closing-message{font-size:1.1rem;padding:1.5rem 1rem}}.pro-tips-page{width:100%;min-height:100vh;padding:3.5rem 1.75rem;background:linear-gradient(to bottom right,#dbe1e7,#fff);font-family:Inter,Segoe UI,sans-serif;color:#1e293b;animation:fadeIn .6s ease-in-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.main-heading{font-size:clamp(2.2rem,5vw,3.2rem);font-weight:900;text-align:center;margin-bottom:2.5rem;line-height:1.2;background:linear-gradient(90deg,#3b82f6,#261352,#38021d);background-size:300% 300%;animation:gradientMove 6s ease infinite;-webkit-background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:1.1px;text-shadow:0 1px 10px rgba(0,0,0,.05);transition:transform .3s ease,text-shadow .3s ease}.main-heading .emoji{-webkit-background-clip:initial;-webkit-text-fill-color:initial;background:none;color:inherit}.pro-section{max-width:960px;margin:0 auto 3.25rem;background:#f9fbfd;border-radius:16px;padding:2.1rem;box-shadow:0 14px 32px #0000000d;transition:.3s ease}.pro-section:hover{transform:translateY(-2px);box-shadow:0 20px 42px #00000014}.pro-section h2{font-size:1.7rem;margin-bottom:1.1rem;color:#111827;border-left:6px solid #6366f1;padding-left:.9rem}.pro-section p{font-size:1.05rem;line-height:1.75;color:#0f172a;margin-bottom:1.4rem;letter-spacing:.2px;word-spacing:.5px;font-weight:400;transition:color .3s ease}.pro-section ul{list-style:none;padding-left:1.25rem;margin-bottom:1.8rem;position:relative;display:flex;flex-direction:column;gap:1rem}.pro-section ul li{position:relative;padding-left:2rem;font-size:1rem;color:#1e293b;background-color:#f1f5f9;border-radius:8px;padding:.8rem 1rem .8rem 2rem;box-shadow:0 2px 4px #00000008;transition:transform .2s ease}.pro-section ul li:hover{transform:translate(3px)}.pro-section ul li:before{content:"💡";position:absolute;left:.8rem;top:50%;transform:translateY(-50%);font-size:1.1rem;color:#3b82f6}code{background:#e0f2fe;color:#0c4a6e;padding:.25rem .5rem;border-radius:6px;font-size:.9rem;font-family:Courier New,monospace}.pro-banner{width:100%;max-width:540px;margin:2rem auto 0;display:block;border-radius:16px;overflow:hidden;position:relative;z-index:1;box-shadow:0 18px 36px #00000012;transition:transform .35s ease,box-shadow .35s ease;filter:brightness(101%) contrast(103%)}.pro-banner:hover{transform:scale(1.02) translateY(-2px);box-shadow:0 26px 60px #0000001f;filter:brightness(108%) saturate(110%)}.pro-banner:before{content:"";position:absolute;top:50%;left:50%;width:130%;height:130%;transform:translate(-50%,-50%);border-radius:30px;background:radial-gradient(circle,rgba(42,6,113,.25),transparent 70%);z-index:-1;filter:blur(50px);opacity:.6;transition:opacity .3s ease}.pro-banner:hover:before{opacity:.85}.closing-message{max-width:800px;margin:3.5rem auto 0;background:#e0fdf4;padding:1.8rem;border-left:6px solid #10b981}@media (max-width: 768px){.closing-message .main-heading{font-size:2.2rem}.closing-message .pro-section{padding:2rem 1.25rem}.closing-message .pro-section h2{font-size:1.5rem}.closing-message .pro-banner{max-width:100%;margin-top:1.5rem}}.result{min-height:100vh;padding:4rem 2rem;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:Segoe UI,Poppins,sans-serif;color:#1e293b;text-align:center;background:linear-gradient(135deg,#eceff2,#ddd3f7,#cee0f6);background-size:400% 400%;animation:fancyBG 15s ease infinite}@keyframes fancyBG{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.result h2{font-size:2.5rem;font-weight:900;margin-bottom:2rem;color:#0f172a;letter-spacing:1px;text-shadow:1px 1px 4px rgba(0,0,0,.05)}.score-box{background:#e8ae0399;backdrop-filter:blur(12px) saturate(180%);-webkit-backdrop-filter:blur(12px) saturate(180%);border:1px solid rgba(255,255,255,.25);border-radius:20px;padding:2.5rem 3.5rem;box-shadow:0 20px 50px #0000001a;display:flex;gap:2.5rem;justify-content:center;align-items:center;flex-wrap:wrap;max-width:750px;margin-bottom:2.5rem;transition:transform .3s ease}.score-box:hover{transform:translateY(-4px)}.score-box div{text-align:center;min-width:130px}.score-box h3{font-size:2.75rem;color:#000203;margin-bottom:.5rem;font-weight:800}.score-box p{font-size:1rem;color:#06244f;margin-bottom:.25rem}.score-box small{font-size:.85rem;color:#010b1a}.result p{font-size:1rem;color:#210433;margin-top:.5rem}.result-meta{display:flex;flex-direction:column;gap:.5rem;margin-top:1rem;font-size:1rem;color:#210433}.result-meta p{margin:0}.result-meta strong{color:#0f172a;font-weight:600}.btn-group{display:flex;gap:1rem;margin-top:2rem;flex-wrap:wrap}.btn-group button{padding:.85rem 2.25rem;font-size:1.05rem;border:none;border-radius:12px;background:linear-gradient(to right,#0ea5e9,#3b82f6);color:#fff;cursor:pointer;box-shadow:0 8px 25px #0ea5e940;transition:all .3s ease}.btn-group button:hover{background:linear-gradient(to right,#0284c7,#2563eb);transform:translateY(-3px) scale(1.03)}@media (max-width: 768px){.score-box{flex-direction:column;padding:2rem 1.75rem}.btn-group{flex-direction:column;width:100%}.btn-group button{width:100%}}.pro-landing-page{max-width:1200px;margin:0 auto;padding:2rem}.pro-hero{text-align:center;margin-bottom:4rem;padding:3rem 0}.pro-hero h1{font-size:3rem;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:1rem}.pro-subtitle{font-size:1.3rem;color:#666;max-width:600px;margin:0 auto}.error-message{background:#fee;color:#c33;padding:1rem;border-radius:8px;margin-bottom:2rem;text-align:center}.pricing-container{margin-bottom:4rem}.plan-toggle{display:flex;justify-content:center;gap:1rem;margin-bottom:2rem}.plan-toggle button{padding:.75rem 2rem;border:2px solid #ddd;background:#fff;border-radius:8px;cursor:pointer;font-size:1rem;font-weight:500;transition:all .3s}.plan-toggle button.active{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-color:transparent}.save-badge{background:#4caf50;color:#fff;padding:.2rem .5rem;border-radius:4px;font-size:.8rem;margin-left:.5rem}.pricing-cards{display:flex;justify-content:center;gap:2rem}.pricing-card{background:#fff;border:2px solid #e0e0e0;border-radius:16px;padding:2.5rem;max-width:400px;position:relative;transition:transform .3s,box-shadow .3s}.pricing-card:hover{transform:translateY(-5px);box-shadow:0 10px 30px #0000001a}.pricing-card.featured{border:2px solid #667eea;box-shadow:0 5px 20px #667eea33}.discount-badge{position:absolute;top:-15px;right:20px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:.5rem 1rem;border-radius:20px;font-weight:600;font-size:.9rem}.pricing-card h2{font-size:1.5rem;margin-bottom:1rem;color:#333}.price{display:flex;align-items:baseline;margin-bottom:.5rem}.currency{font-size:1.5rem;color:#666}.amount{font-size:3rem;font-weight:700;color:#333;margin:0 .2rem}.period{font-size:1.2rem;color:#666}.original-price{text-decoration:line-through;color:#999;margin-bottom:2rem}.features-list{list-style:none;padding:0;margin:2rem 0;text-align:left}.features-list li{padding:.75rem 0;color:#555;border-bottom:1px solid #f0f0f0}.features-list li:last-child{border-bottom:none}.upgrade-btn{width:100%;padding:1rem 2rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:8px;font-size:1.1rem;font-weight:600;cursor:pointer;transition:transform .2s,box-shadow .2s;margin-top:1rem}.upgrade-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 10px 25px #667eea66}.upgrade-btn:disabled{opacity:.6;cursor:not-allowed}.pro-features-section{margin-top:4rem;padding:3rem 0;background:#f8f9fa;border-radius:16px;padding:3rem}.pro-features-section h2{text-align:center;font-size:2.5rem;margin-bottom:3rem;color:#333}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem}.feature-item{background:#fff;padding:2rem;border-radius:12px;text-align:center;transition:transform .3s}.feature-item:hover{transform:translateY(-5px);box-shadow:0 5px 20px #0000001a}.feature-icon{font-size:3rem;margin-bottom:1rem}.feature-item h3{font-size:1.3rem;margin-bottom:.5rem;color:#333}.feature-item p{color:#666;line-height:1.6}.pro-status-container{max-width:800px;margin:0 auto;text-align:center;padding:3rem;background:#fff;border-radius:16px;box-shadow:0 5px 20px #0000001a}.pro-badge{display:inline-block;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:.5rem 1.5rem;border-radius:20px;font-weight:600;margin-bottom:1rem}.pro-status-container h1{font-size:2.5rem;margin-bottom:1rem;color:#333}.subscription-info{background:#f8f9fa;padding:1.5rem;border-radius:12px;margin:2rem 0;text-align:left}.subscription-info p{margin:.5rem 0;color:#555}.premium-features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem;margin:2rem 0}.feature-card{background:#f8f9fa;padding:1.5rem;border-radius:12px;text-align:left}.feature-card h3{margin-bottom:.5rem;color:#333}.feature-card p{color:#666;margin-bottom:1rem;font-size:.9rem}.feature-link{color:#667eea;text-decoration:none;font-weight:500}.feature-link:hover{text-decoration:underline}.cancel-subscription-btn{padding:.75rem 2rem;background:#f44336;color:#fff;border:none;border-radius:8px;font-weight:500;cursor:pointer;transition:background .3s;margin-top:2rem}.cancel-subscription-btn:hover:not(:disabled){background:#d32f2f}.cancel-subscription-btn:disabled{opacity:.6;cursor:not-allowed}@media (max-width: 768px){.pro-hero h1{font-size:2rem}.pricing-cards{flex-direction:column;align-items:center}.features-grid{grid-template-columns:1fr}}.premium-gate{display:flex;justify-content:center;align-items:center;min-height:60vh;padding:2rem;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:12px;margin:2rem 0}.premium-gate-content{background:#fff;border-radius:16px;padding:3rem;max-width:600px;text-align:center;box-shadow:0 20px 60px #0000004d}.premium-icon{font-size:4rem;margin-bottom:1rem}.premium-gate-content h2{color:#333;margin-bottom:1rem;font-size:2rem}.premium-gate-content>p{color:#666;margin-bottom:2rem;line-height:1.6;font-size:1.1rem}.premium-features-preview{background:#f8f9fa;border-radius:12px;padding:1.5rem;margin:2rem 0;text-align:left}.premium-features-preview h3{color:#333;margin-bottom:1rem;font-size:1.2rem;text-align:center}.premium-features-preview ul{list-style:none;padding:0;margin:0}.premium-features-preview li{padding:.5rem 0;color:#555;font-size:1rem}.upgrade-button{display:inline-block;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:1rem 2.5rem;border-radius:8px;text-decoration:none;font-weight:600;font-size:1.1rem;transition:transform .2s,box-shadow .2s;margin-top:1rem}.upgrade-button:hover{transform:translateY(-2px);box-shadow:0 10px 25px #667eea66}.premium-gate-note{margin-top:1.5rem;font-size:.9rem;color:#888}.premium-gate-note a{color:#667eea;text-decoration:none;font-weight:500}.premium-gate-note a:hover{text-decoration:underline}.premium-gate-loading{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:60vh;gap:1rem}.loading-spinner{width:50px;height:50px;border:4px solid #f3f3f3;border-top:4px solid #667eea;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.streak-tracker{display:flex;flex-direction:column;gap:1.5rem}.streak-card{display:flex;align-items:center;gap:1rem;padding:1.5rem;background:linear-gradient(135deg,#f5f7fa,#c3cfe2);border-radius:12px;transition:transform .3s,box-shadow .3s}.streak-card:hover{transform:translateY(-3px);box-shadow:0 5px 15px #0000001a}.streak-card.current-streak{background:linear-gradient(135deg,#ff6b6b,#ee5a6f);color:#fff}.streak-card.longest-streak{background:linear-gradient(135deg,#feca57,#ff9ff3);color:#fff}.streak-card.total-days{background:linear-gradient(135deg,#48cae4,#023e8a);color:#fff}.streak-icon{font-size:3rem;line-height:1}.streak-info{flex:1}.streak-info h3{margin:0 0 .5rem;font-size:.9rem;font-weight:600;opacity:.9}.streak-number{font-size:2.5rem;font-weight:700;margin:0;line-height:1}.streak-label{margin:.5rem 0 0;font-size:.85rem;opacity:.8}.streak-progress{margin-top:1rem}.progress-bar{width:100%;height:12px;background:#e0e0e0;border-radius:6px;overflow:hidden;margin-bottom:.5rem}.progress-fill{height:100%;background:linear-gradient(90deg,#667eea,#764ba2);border-radius:6px;transition:width .5s ease}.progress-text{text-align:center;font-size:.9rem;color:#666;margin:0}.pro-analytics-page{max-width:1200px;margin:0 auto;padding:2rem}.analytics-header{text-align:center;margin-bottom:3rem}.analytics-header h1{font-size:2.5rem;margin-bottom:.5rem;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.analytics-header p{color:#666;font-size:1.1rem}.analytics-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:2rem}.analytics-card{background:#fff;border-radius:12px;padding:2rem;box-shadow:0 2px 10px #0000001a}.analytics-card.full-width{grid-column:1 / -1}.analytics-card h2{margin-bottom:1.5rem;color:#333;font-size:1.5rem}@media (max-width: 768px){.analytics-grid{grid-template-columns:1fr}.analytics-card.full-width{grid-column:1}}.survival-game{padding:1.5rem;min-height:300px;display:flex;align-items:center;justify-content:center}.game-start,.game-over{text-align:center}.game-start h3,.game-over h3{font-size:1.5rem;margin-bottom:1rem;color:#333}.game-start p,.game-over p{color:#666;margin-bottom:1.5rem}.start-btn,.restart-btn{padding:.75rem 2rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:transform .2s,box-shadow .2s}.start-btn:hover,.restart-btn:hover{transform:translateY(-2px);box-shadow:0 5px 15px #667eea66}.game-active{width:100%}.game-stats{display:flex;justify-content:space-around;margin-bottom:2rem}.stat{display:flex;flex-direction:column;align-items:center;gap:.5rem}.stat-label{font-size:.9rem;color:#666}.stat-value{font-size:1.8rem;font-weight:700;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.word-display{text-align:center;margin-bottom:2rem;padding:2rem;background:#f8f9fa;border-radius:12px}.word-display h2{font-size:2.5rem;color:#333;margin:0;letter-spacing:2px}.word-input{width:100%;padding:1rem;font-size:1.2rem;text-align:center;border:2px solid #ddd;border-radius:8px;outline:none;transition:border-color .3s}.word-input:focus{border-color:#667eea}.final-score{font-size:1.5rem;font-weight:600;color:#667eea;margin-bottom:1.5rem}.pro-games-page{max-width:1200px;margin:0 auto;padding:2rem}.games-header{text-align:center;margin-bottom:3rem}.games-header h1{font-size:2.5rem;margin-bottom:.5rem;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.games-header p{color:#666;font-size:1.1rem}.games-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:2rem}.game-card{background:#fff;border-radius:12px;padding:2rem;box-shadow:0 2px 10px #0000001a;position:relative;transition:transform .3s,box-shadow .3s}.game-card:hover{transform:translateY(-5px);box-shadow:0 5px 20px #00000026}.game-card.coming-soon{opacity:.7}.game-card h2{margin-bottom:1rem;color:#333;font-size:1.5rem}.game-card p{color:#666;margin-bottom:1.5rem;line-height:1.6}.coming-soon-badge{position:absolute;top:1rem;right:1rem;background:#ff9800;color:#fff;padding:.5rem 1rem;border-radius:20px;font-size:.9rem;font-weight:600}@media (max-width: 768px){.games-grid{grid-template-columns:1fr}}.admin-login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:2rem;background:linear-gradient(135deg,#667eea,#764ba2,#f093fb);background-size:400% 400%;animation:gradientShift 15s ease infinite;position:relative}.admin-login-card{background:#fffffff2;backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border:2px solid rgba(255,255,255,.3);border-radius:24px;padding:3rem;max-width:450px;width:100%;box-shadow:0 20px 60px #0003,0 8px 24px #00000026,inset 0 1px #ffffffe6;animation:slideUp .5s ease-out}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.admin-login-header{text-align:center;margin-bottom:2rem}.admin-login-header h1{font-size:2rem;font-weight:800;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:.5rem}.admin-login-header p{color:#666;font-size:.95rem}.admin-login-form{display:flex;flex-direction:column;gap:1.5rem}.form-group label{font-weight:600;color:#333;font-size:.9rem}.error-message{background:#ef44441a;color:#dc2626;padding:.75rem 1rem;border-radius:8px;font-size:.9rem;text-align:center;border:1px solid rgba(239,68,68,.2)}.admin-login-btn{padding:1rem 2rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:12px;font-size:1.05rem;font-weight:700;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #667eea66;margin-top:.5rem}.admin-login-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #667eea80}.admin-login-btn:active{transform:translateY(0)}.admin-login-footer{margin-top:2rem;text-align:center;padding-top:1.5rem;border-top:1px solid rgba(0,0,0,.1)}.admin-login-footer p{font-size:.85rem;color:#999}@media (max-width: 768px){.admin-login-card{padding:2rem 1.5rem}.admin-login-header h1{font-size:1.75rem}}.admin-layout{display:flex;min-height:100vh;background:linear-gradient(135deg,#667eea,#764ba2,#f093fb);background-size:400% 400%;animation:gradientShift 15s ease infinite}@keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.admin-sidebar{width:280px;background:#fffffff2;backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border-right:2px solid rgba(255,255,255,.3);display:flex;flex-direction:column;box-shadow:4px 0 20px #0000001a;position:sticky;top:0;height:100vh;overflow-y:auto}.admin-sidebar-header{padding:2rem 1.5rem;border-bottom:2px solid rgba(102,126,234,.1)}.admin-sidebar-header h2{font-size:1.5rem;font-weight:800;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin:0}.admin-nav{flex:1;padding:1rem 0;display:flex;flex-direction:column;gap:.5rem}.admin-nav-item{display:flex;align-items:center;gap:.75rem;padding:1rem 1.5rem;border:none;background:transparent;color:#666;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;text-align:left;border-left:4px solid transparent;margin:0 .5rem;border-radius:8px;width:calc(100% - 1rem)}.admin-nav-item:hover{background:#667eea1a;color:#667eea;transform:translate(4px)}.admin-nav-item.active{background:linear-gradient(135deg,#667eea26,#764ba226);color:#667eea;border-left-color:#667eea;box-shadow:0 2px 8px #667eea33}.nav-icon{font-size:1.2rem;flex-shrink:0;width:1.5rem;text-align:center}.nav-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.admin-sidebar-footer{padding:1.5rem;border-top:2px solid rgba(102,126,234,.1)}.admin-logout-btn{width:100%;padding:.9rem 1.5rem;background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;border:none;border-radius:12px;font-size:1rem;font-weight:700;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 12px #ef44444d}.admin-logout-btn:hover{transform:translateY(-2px);box-shadow:0 6px 16px #ef444466}.admin-main-content{flex:1;padding:2rem;overflow-y:auto;max-width:1400px;width:100%;margin:0 auto}@media (max-width: 768px){.admin-layout{flex-direction:column}.admin-sidebar{width:100%;height:auto;position:relative;border-right:none;border-bottom:2px solid rgba(255,255,255,.3)}.admin-nav{flex-direction:row;overflow-x:auto;padding:1rem;gap:.5rem}.admin-nav-item{white-space:nowrap;margin:0;border-left:none;border-bottom:4px solid transparent;padding:.75rem 1rem}.admin-nav-item.active{border-left:none;border-bottom-color:#667eea}.admin-main-content{padding:1.5rem 1rem}}.admin-dashboard{width:100%}.dashboard-header{margin-bottom:2rem}.dashboard-header h1{font-size:2.5rem;font-weight:900;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.2);margin-bottom:.5rem}.dashboard-header p{color:#ffffffe6;font-size:1.1rem}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem;margin-top:2rem}.stat-card{background:#fffffff2;backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border:2px solid rgba(255,255,255,.3);border-radius:20px;padding:2rem;display:flex;align-items:center;gap:1.5rem;box-shadow:0 10px 30px #00000026,inset 0 1px #ffffffe6;transition:all .3s ease;animation:slideUp .5s ease-out}.stat-card:nth-child(1){animation-delay:.1s}.stat-card:nth-child(2){animation-delay:.2s}.stat-card:nth-child(3){animation-delay:.3s}.stat-card:nth-child(4){animation-delay:.4s}.stat-card:nth-child(5){animation-delay:.5s}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.stat-card:hover{transform:translateY(-4px);box-shadow:0 15px 40px #0003,inset 0 1px #ffffffe6}.stat-card.full-width{grid-column:1 / -1}.stat-icon{font-size:3rem;filter:drop-shadow(0 2px 4px rgba(0,0,0,.1))}.stat-content{flex:1;min-width:0}.stat-content h3{font-size:2.5rem;font-weight:900;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin:0 0 .5rem;line-height:1;word-wrap:break-word;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}.stat-content p{font-size:1rem;color:#666;font-weight:600;margin:0;word-wrap:break-word;overflow-wrap:break-word}@media (max-width: 768px){.stats-grid{grid-template-columns:1fr}.stat-card{padding:1.5rem}.dashboard-header h1{font-size:2rem}}.content-manager{width:100%}.content-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:2rem;flex-wrap:wrap;gap:1rem}.content-header h1{font-size:2.5rem;font-weight:900;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.2);margin:0 0 .5rem}.content-header p{color:#ffffffe6;font-size:1.1rem;margin:0}.reset-btn{padding:.75rem 1.5rem;background:#fff3;color:#fff;border:2px solid rgba(255,255,255,.3);border-radius:12px;font-weight:700;cursor:pointer;transition:all .3s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.reset-btn:hover{background:#ffffff4d;transform:translateY(-2px)}.difficulty-tabs{display:flex;gap:1rem;margin-bottom:2rem;background:#ffffff1a;padding:.5rem;border-radius:12px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.difficulty-tab{flex:1;padding:.9rem 1.5rem;background:transparent;border:2px solid transparent;border-radius:10px;color:#fffc;font-weight:700;font-size:1rem;cursor:pointer;transition:all .3s ease}.difficulty-tab:hover{background:#ffffff1a;color:#fff}.difficulty-tab.active{background:#fffffff2;color:#667eea;border-color:#ffffff4d;box-shadow:0 4px 12px #0000001a}.paragraph-section{background:#fffffff2;backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border:2px solid rgba(255,255,255,.3);border-radius:20px;padding:2rem;box-shadow:0 10px 30px #00000026,inset 0 1px #ffffffe6}.add-paragraph{margin-bottom:2.5rem;padding-bottom:2rem;border-bottom:2px solid rgba(102,126,234,.1)}.add-paragraph h3{font-size:1.3rem;font-weight:700;color:#333;margin-bottom:1rem}.add-paragraph textarea{width:100%;padding:1rem;border:2px solid rgba(102,126,234,.2);border-radius:12px;font-size:1rem;font-family:inherit;resize:vertical;outline:none;transition:all .3s ease;margin-bottom:1rem}.add-paragraph textarea:focus{border-color:#667eea;box-shadow:0 0 0 4px #667eea1a}.add-btn{padding:.9rem 2rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:12px;font-weight:700;font-size:1rem;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 12px #667eea4d}.add-btn:hover{transform:translateY(-2px);box-shadow:0 6px 16px #667eea66}.paragraphs-list h3{font-size:1.3rem;font-weight:700;color:#333;margin-bottom:1.5rem}.no-paragraphs{text-align:center;padding:3rem;color:#999;font-size:1.1rem}.paragraphs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.5rem}.paragraph-card{background:#fffc;border:2px solid rgba(102,126,234,.1);border-radius:16px;padding:1.5rem;transition:all .3s ease}.paragraph-card:hover{border-color:#667eea4d;box-shadow:0 4px 12px #667eea26;transform:translateY(-2px)}.paragraph-text{color:#333;font-size:.95rem;line-height:1.6;margin:0 0 1rem;word-wrap:break-word}.paragraph-actions{display:flex;gap:.75rem}.edit-btn,.delete-btn{flex:1;padding:.6rem 1rem;border:none;border-radius:8px;font-weight:600;font-size:.9rem;cursor:pointer;transition:all .3s ease}.edit-btn{background:#3b82f61a;color:#3b82f6}.edit-btn:hover{background:#3b82f633;transform:translateY(-1px)}.delete-btn{background:#ef44441a;color:#ef4444}.delete-btn:hover{background:#ef444433;transform:translateY(-1px)}.edit-mode textarea{width:100%;padding:.75rem;border:2px solid #667eea;border-radius:8px;font-size:.95rem;font-family:inherit;resize:vertical;outline:none;margin-bottom:1rem}.edit-actions{display:flex;gap:.75rem}.save-btn,.cancel-btn{flex:1;padding:.6rem 1rem;border:none;border-radius:8px;font-weight:600;font-size:.9rem;cursor:pointer;transition:all .3s ease}.save-btn{background:linear-gradient(135deg,#10b981,#059669);color:#fff}.save-btn:hover{transform:translateY(-1px);box-shadow:0 4px 8px #10b9814d}.cancel-btn{background:#6b72801a;color:#6b7280}.cancel-btn:hover{background:#6b728033}@media (max-width: 768px){.content-header,.difficulty-tabs{flex-direction:column}.paragraphs-grid{grid-template-columns:1fr}}.test-history{width:100%}.history-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:2rem;flex-wrap:wrap;gap:1.5rem}.history-header h1{font-size:2.5rem;font-weight:900;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.2);margin:0 0 .5rem}.history-header p{color:#ffffffe6;font-size:1.1rem;margin:0}.history-controls{display:flex;gap:1rem;align-items:center;flex-wrap:wrap}.filter-select{padding:.75rem 1.25rem;background:#fffffff2;border:2px solid rgba(255,255,255,.3);border-radius:12px;font-size:1rem;font-weight:600;color:#333;cursor:pointer;outline:none;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:all .3s ease}.filter-select:hover{background:#fff;border-color:#667eea80}.filter-select:focus{border-color:#667eea;box-shadow:0 0 0 4px #667eea1a}.clear-btn{padding:.75rem 1.5rem;background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;border:none;border-radius:12px;font-weight:700;font-size:1rem;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 12px #ef44444d}.clear-btn:hover{transform:translateY(-2px);box-shadow:0 6px 16px #ef444466}.history-stats{display:flex;gap:1rem;margin-bottom:2rem}.history-stat-card{flex:1;background:#fffffff2;-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);border:2px solid rgba(255,255,255,.3);border-radius:16px;padding:1.5rem;display:flex;flex-direction:column;align-items:center;gap:.5rem;box-shadow:0 8px 24px #0000001a}.stat-label{font-size:.9rem;color:#666;font-weight:600}.stat-value{font-size:2rem;font-weight:900;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.no-history{background:#fffffff2;-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);border:2px solid rgba(255,255,255,.3);border-radius:20px;padding:4rem 2rem;text-align:center;box-shadow:0 10px 30px #0000001a}.no-history p{font-size:1.2rem;color:#999;margin:.5rem 0}.history-table-container{background:#fffffff2;-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);border:2px solid rgba(255,255,255,.3);border-radius:20px;padding:2rem;box-shadow:0 10px 30px #00000026,inset 0 1px #ffffffe6;overflow-x:auto}.history-table{width:100%;border-collapse:collapse;font-size:.95rem}.history-table thead{background:linear-gradient(135deg,#667eea1a,#764ba21a)}.history-table th{padding:1rem;text-align:left;font-weight:700;color:#333;border-bottom:2px solid rgba(102,126,234,.2)}.history-table td{padding:1rem;border-bottom:1px solid rgba(0,0,0,.05);color:#555}.history-table tbody tr:hover{background:#667eea0d}.wpm-cell{font-weight:700;color:#667eea}.accuracy-cell{font-weight:700;color:#10b981}.net-speed-cell{font-weight:700;color:#764ba2}.typos-cell{color:#ef4444;font-weight:600}.difficulty-badge{display:inline-block;padding:.4rem .9rem;border-radius:8px;font-size:.85rem;font-weight:700;text-transform:capitalize}.difficulty-badge.easy{background:#10b98126;color:#059669}.difficulty-badge.intermediate{background:#3b82f626;color:#2563eb}.difficulty-badge.hard{background:#ef444426;color:#dc2626}@media (max-width: 768px){.history-header{flex-direction:column}.history-controls{width:100%}.filter-select,.clear-btn{flex:1;min-width:150px}.history-table-container{padding:1rem}.history-table{font-size:.85rem}.history-table th,.history-table td{padding:.75rem .5rem}}.admin-settings{width:100%}.settings-header{margin-bottom:2rem}.settings-header h1{font-size:2.5rem;font-weight:900;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.2);margin-bottom:.5rem}.settings-header p{color:#ffffffe6;font-size:1.1rem;margin:0}.settings-message{background:#fffffff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:2px solid rgba(16,185,129,.3);border-radius:12px;padding:1rem 1.5rem;margin-bottom:2rem;font-weight:600;color:#059669;text-align:center;box-shadow:0 4px 12px #10b98133;animation:slideDown .3s ease-out}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.settings-sections{display:flex;flex-direction:column;gap:2rem}.settings-section{background:#fffffff2;-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);border:2px solid rgba(255,255,255,.3);border-radius:20px;padding:2.5rem;box-shadow:0 10px 30px #00000026,inset 0 1px #ffffffe6}.settings-section h2{font-size:1.8rem;font-weight:800;color:#333;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:2px solid rgba(102,126,234,.1)}.current-credentials{background:#667eea0d;padding:1.5rem;border-radius:12px;margin-bottom:2rem}.current-credentials p{margin:.5rem 0;color:#555;font-size:1rem}.current-credentials strong{color:#333;font-weight:700}.credentials-form{display:flex;flex-direction:column;gap:1.5rem}.form-group{display:flex;flex-direction:column;gap:.5rem}.form-group label{font-weight:700;color:#333;font-size:.95rem}.form-group input{padding:.9rem 1.2rem;border:2px solid rgba(102,126,234,.2);border-radius:12px;font-size:1rem;outline:none;transition:all .3s ease;background:#ffffffe6;color:#333}.form-group input:focus{border-color:#667eea;box-shadow:0 0 0 4px #667eea1a;background:#fff}.update-btn{padding:1rem 2rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:12px;font-weight:700;font-size:1rem;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 12px #667eea4d;align-self:flex-start}.update-btn:hover{transform:translateY(-2px);box-shadow:0 6px 16px #667eea66}.feature-toggles{display:flex;flex-direction:column;gap:1.5rem}.feature-toggle{display:flex;justify-content:space-between;align-items:center;padding:1.5rem;background:#667eea0d;border-radius:12px;border:2px solid rgba(102,126,234,.1)}.feature-toggle h3{font-size:1.2rem;font-weight:700;color:#333;margin:0 0 .5rem}.feature-toggle p{color:#666;font-size:.9rem;margin:0}.toggle-btn{padding:.75rem 2rem;border:2px solid rgba(102,126,234,.3);border-radius:12px;font-weight:700;font-size:1rem;cursor:pointer;transition:all .3s ease;background:#6b72801a;color:#6b7280;min-width:80px}.toggle-btn.active{background:linear-gradient(135deg,#10b981,#059669);color:#fff;border-color:#10b981;box-shadow:0 4px 12px #10b9814d}.toggle-btn:hover{transform:translateY(-2px)}.danger-zone{border-color:#ef44444d;background:#ef44440d}.danger-zone h2{color:#dc2626;border-bottom-color:#ef444433}.danger-actions{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1.5rem}.danger-actions h3{font-size:1.3rem;font-weight:700;color:#dc2626;margin:0 0 .5rem}.danger-actions p{color:#666;font-size:.95rem;margin:0}.danger-btn{padding:1rem 2rem;background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;border:none;border-radius:12px;font-weight:700;font-size:1rem;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 12px #ef44444d}.danger-btn:hover{transform:translateY(-2px);box-shadow:0 6px 16px #ef444466}@media (max-width: 768px){.settings-section{padding:1.5rem}.feature-toggle{flex-direction:column;align-items:flex-start;gap:1rem}.toggle-btn{width:100%}.danger-actions{flex-direction:column;align-items:flex-start}.danger-btn{width:100%}}