@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap";
:root{--primary-color:#818cf8;--primary-hover:#6366f1;--success-color:#34d399;--warning-color:#fbbf24;--error-color:#f87171;--bg-primary:#0f172a;--bg-secondary:#1e293b;--bg-tertiary:#334155;--text-primary:#f1f5f9;--text-secondary:#cbd5e1;--text-muted:#94a3b8;--border-color:#475569;--border-light:#64748b;--border-radius:12px;--border-radius-sm:8px;--shadow-sm:0 1px 2px 0 #0000004d;--shadow-md:0 4px 6px -1px #0006,0 2px 4px -2px #0000004d;--shadow-lg:0 10px 15px -3px #0006,0 4px 6px -4px #0000004d;--transition:all .2s cubic-bezier(.4,0,.2,1)}:root.light-mode{--bg-primary:#f9fafb;--bg-secondary:#fff;--bg-tertiary:#f3f4f6;--text-primary:#111827;--text-secondary:#374151;--text-muted:#6b7280;--border-color:#d1d5db;--border-light:#e5e7eb;--shadow-sm:0 1px 2px 0 #0000000d;--shadow-md:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;--shadow-lg:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a}*{box-sizing:border-box}html{scroll-behavior:smooth}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:var(--bg-primary);min-height:100vh;color:var(--text-primary);transition:var(--transition);margin:0;padding:0;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;line-height:1.6}code{font-family:Fira Code,source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}
.App{flex-direction:column;min-height:100vh;display:flex}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideIn{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}.App{animation:.6s ease-out fadeIn}h1{background:linear-gradient(135deg,var(--primary-color),var(--success-color));-webkit-text-fill-color:transparent;letter-spacing:-.02em;-webkit-background-clip:text;background-clip:text;margin:0;font-size:clamp(2.5rem,8vw,4.5rem);font-weight:800;line-height:1.1}.App-header{background:var(--bg-secondary);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--border-color);text-align:center;padding:2rem 1rem;position:relative}.App-header:before{content:"";background:linear-gradient(135deg,var(--primary-color)0%,var(--success-color)100%);opacity:.05;z-index:-1;position:absolute;inset:0}.App-header h1{margin-bottom:.5rem}.App-header h1 span{transition:var(--transition);cursor:default;display:inline-block}.App-header h1 span:hover{filter:brightness(1.2);transform:translateY(-2px)scale(1.05)}.theme-toggle{background:var(--bg-tertiary);border:1px solid var(--border-color);color:var(--text-primary);border-radius:var(--border-radius-sm);cursor:pointer;transition:var(--transition);justify-content:center;align-items:center;width:2.5rem;height:2.5rem;padding:.5rem;font-size:1.25rem;display:flex;position:absolute;top:1rem;right:1rem}.theme-toggle:hover{background:var(--primary-color);transform:scale(1.1)}.App-header a{color:var(--text-secondary);transition:var(--transition);border-radius:var(--border-radius-sm);padding:.5rem 1rem;font-size:.9rem;font-weight:500;text-decoration:none;display:inline-block}.App-header a:hover{color:var(--primary-color);background-color:var(--bg-tertiary);transform:translateY(-1px)}.App-body{flex:1;width:100%;max-width:1200px;margin:0 auto;padding:3rem 1rem}.App-body>p{text-align:center;color:var(--text-secondary);max-width:600px;margin-bottom:3rem;margin-left:auto;margin-right:auto;font-size:1.125rem}form{background:var(--bg-secondary);border-radius:var(--border-radius);box-shadow:var(--shadow-lg);border:1px solid var(--border-color);max-width:800px;margin:0 auto;padding:2.5rem}ul{margin:0;padding:0;list-style:none}.form-section{margin-bottom:2.5rem}.form-section h3{color:var(--text-primary);align-items:center;gap:.5rem;margin-bottom:1rem;font-size:1.25rem;font-weight:600;display:flex}.form-section .tip{color:var(--text-muted);background-color:var(--bg-tertiary);border-radius:var(--border-radius-sm);border-left:4px solid var(--primary-color);margin-top:.5rem;padding:.75rem;font-size:.875rem;font-weight:400}.place-list,.wplace-list{flex-wrap:wrap;justify-content:center;gap:.75rem;display:flex}.place-list input,.wplace-list input{border:2px solid var(--border-color);border-radius:var(--border-radius-sm);text-align:center;text-transform:uppercase;background:var(--bg-secondary);width:3.5rem;height:3.5rem;color:var(--text-primary);transition:var(--transition);outline:none;font-size:1.5rem;font-weight:700}.place-list input:focus,.wplace-list input:focus{border-color:var(--primary-color);transform:scale(1.05);box-shadow:0 0 0 3px #818cf833}.place-list input{border-color:var(--success-color);background:linear-gradient(135deg,#10b9811a,#10b9810d)}.place-list input:focus{border-color:var(--success-color);box-shadow:0 0 0 3px #10b9811a}.wplace-list input{border-color:var(--warning-color);background:linear-gradient(135deg,#f59e0b1a,#f59e0b0d)}.wplace-list input:focus{border-color:var(--warning-color);box-shadow:0 0 0 3px #f59e0b1a}.bannedLetters,.rightLetters{border:2px solid var(--border-color);border-radius:var(--border-radius-sm);text-transform:uppercase;background:var(--bg-secondary);width:100%;max-width:400px;height:3rem;color:var(--text-primary);transition:var(--transition);outline:none;margin:0 auto;padding:0 1rem;font-size:1rem;font-weight:500;display:block}.bannedLetters:focus,.rightLetters:focus{border-color:var(--primary-color);box-shadow:0 0 0 3px #818cf833}.bannedLetters{border-color:var(--error-color);background:var(--bg-tertiary);text-align:center}.bannedLetters:focus{border-color:var(--error-color);box-shadow:0 0 0 3px #f8717133}.submitButton{background:linear-gradient(135deg,var(--primary-color),var(--primary-hover));color:#fff;border-radius:var(--border-radius);text-transform:uppercase;letter-spacing:.025em;cursor:pointer;width:100%;max-width:300px;height:3.5rem;transition:var(--transition);box-shadow:var(--shadow-md);border:none;margin:2rem auto 0;font-size:1.125rem;font-weight:600;display:block}.submitButton:hover{box-shadow:var(--shadow-lg);background:linear-gradient(135deg,var(--primary-hover),#3730a3);transform:translateY(-2px)}.submitButton:active{transform:translateY(0)}.filtered-words{background:var(--bg-secondary);border-radius:var(--border-radius);box-shadow:var(--shadow-lg);border:1px solid var(--border-color);max-width:1000px;margin:2rem auto;padding:2.5rem;animation:.6s ease-out fadeIn}.reset-btn{background:linear-gradient(135deg,var(--bg-tertiary),var(--border-color));color:var(--text-primary);border:1px solid var(--border-color);border-radius:var(--border-radius-sm);cursor:pointer;transition:var(--transition);box-shadow:var(--shadow-sm);margin-bottom:2rem;margin-left:auto;margin-right:auto;padding:.75rem 1.5rem;font-size:.875rem;font-weight:600;display:block}.reset-btn:hover{background:var(--primary-color);color:#fff;box-shadow:var(--shadow-md);transform:translateY(-1px)}.filtered-words h2{text-align:center;color:var(--text-primary);margin-bottom:2rem;font-size:1.5rem;font-weight:700}.filtered-words ul{background:var(--bg-tertiary);border-radius:var(--border-radius-sm);border:1px solid var(--border-color);grid-template-columns:repeat(auto-fit,minmax(120px,1fr));justify-content:center;justify-items:center;gap:.75rem;margin:0 auto;padding:1.5rem;display:grid}.filtered-words li{background:var(--bg-secondary);color:var(--text-primary);border-radius:var(--border-radius-sm);text-align:center;text-transform:uppercase;letter-spacing:.05em;border:1px solid var(--border-color);cursor:pointer;transition:var(--transition);box-shadow:var(--shadow-sm);padding:.75rem;font-size:.875rem;font-weight:600}.filtered-words li:hover{background:var(--primary-color);color:#fff;box-shadow:var(--shadow-md);border-color:var(--primary-color);transform:translateY(-2px)}.filtered-words h3{text-align:center;color:var(--text-secondary);margin-top:1.5rem;font-size:1rem;font-weight:500}.counter{text-align:center;background:var(--bg-tertiary);border-radius:var(--border-radius-sm);border:1px solid var(--border-color);max-width:400px;color:var(--text-secondary);margin:2rem auto;padding:1rem;font-size:.875rem;font-weight:500}@media (max-width:768px){.App-header{padding:1.5rem 1rem}h1{font-size:clamp(2rem,10vw,3rem)}.App-body{padding:2rem 1rem}form{padding:1.5rem}.place-list,.wplace-list{gap:.5rem}.place-list input,.wplace-list input{width:3rem;height:3rem;font-size:1.25rem}.filtered-words{padding:1.5rem}.filtered-words ul{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:.5rem}}@media (max-width:480px){.App-body,form{padding:1rem}.place-list input,.wplace-list input{width:2.5rem;height:2.5rem;font-size:1rem}.filtered-words ul{grid-template-columns:repeat(auto-fill,minmax(80px,1fr))}}