:root{--bg-primary: #0a0a0f;--bg-secondary: #12121a;--bg-card: rgba(20, 20, 30, .8);--bg-card-hover: rgba(30, 30, 45, .9);--text-primary: #f5f5f7;--text-secondary: #a1a1aa;--text-muted: #71717a;--accent-purple: #a855f7;--accent-pink: #ec4899;--accent-orange: #f97316;--gradient-primary: linear-gradient(135deg, var(--accent-purple), var(--accent-pink));--gradient-secondary: linear-gradient(135deg, var(--accent-pink), var(--accent-orange));--gradient-bg: radial-gradient(ellipse at top, rgba(168, 85, 247, .15) 0%, transparent 50%), radial-gradient(ellipse at bottom right, rgba(236, 72, 153, .1) 0%, transparent 50%);--border-color: rgba(255, 255, 255, .08);--border-glow: rgba(168, 85, 247, .3);--shadow-card: 0 4px 24px rgba(0, 0, 0, .4);--shadow-glow: 0 0 40px rgba(168, 85, 247, .15);--header-height: 64px;--border-radius: 12px;--border-radius-lg: 20px;--transition-fast: .15s ease;--transition-normal: .25s ease;--transition-slow: .4s cubic-bezier(.4, 0, .2, 1)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:var(--bg-primary);color:var(--text-primary);min-height:100vh;line-height:1.6}#root{min-height:100vh}.password-gate{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg-primary);background-image:var(--gradient-bg);padding:1.5rem}.gate-container{text-align:center;max-width:380px;width:100%}.gate-logo{display:flex;align-items:center;justify-content:center;gap:.75rem;margin-bottom:.5rem}.logo-icon{width:56px;height:56px;background:var(--gradient-primary);border-radius:var(--border-radius);display:flex;align-items:center;justify-content:center;font-size:1.75rem;font-weight:700;color:#fff;box-shadow:var(--shadow-glow)}.gate-logo h1{font-size:2.5rem;font-weight:700;background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.gate-subtitle{color:var(--text-secondary);font-size:1rem;margin-bottom:2.5rem}.gate-form{display:flex;flex-direction:column;gap:.75rem}.input-wrapper{position:relative;display:flex}.gate-form input{flex:1;background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--border-radius);padding:1rem 3.5rem 1rem 1.25rem;font-size:1rem;color:var(--text-primary);outline:none;transition:var(--transition-normal)}.gate-form input::placeholder{color:var(--text-muted)}.gate-form input:focus{border-color:var(--accent-purple);box-shadow:0 0 0 3px #a855f726}.gate-form input.error{border-color:#ef4444;box-shadow:0 0 0 3px #ef444426}.submit-btn{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:40px;height:40px;background:var(--gradient-primary);border:none;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:var(--transition-fast)}.submit-btn:hover{transform:translateY(-50%) scale(1.05)}.submit-btn svg{width:20px;height:20px;color:#fff}.error-text{color:#ef4444;font-size:.875rem}.gate-form.shake{animation:shake .5s ease}@keyframes shake{0%,to{transform:translate(0)}20%,60%{transform:translate(-8px)}40%,80%{transform:translate(8px)}}.app{min-height:100vh;background:var(--bg-primary);background-image:var(--gradient-bg)}.app-header{height:var(--header-height);background:#0a0a0fcc;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--border-color);display:flex;align-items:center;justify-content:space-between;padding:0 1.5rem;position:sticky;top:0;z-index:100}.header-brand{display:flex;align-items:center;gap:.5rem}.header-logo{width:36px;height:36px;background:var(--gradient-primary);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:1.25rem;font-weight:700;color:#fff}.header-brand h1{font-size:1.25rem;font-weight:600;background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.view-toggle{display:flex;background:var(--bg-card);border-radius:var(--border-radius);padding:4px;border:1px solid var(--border-color)}.toggle-btn{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:transparent;border:none;border-radius:8px;color:var(--text-secondary);font-size:.875rem;font-weight:500;cursor:pointer;transition:var(--transition-fast)}.toggle-btn svg{width:18px;height:18px}.toggle-btn:hover{color:var(--text-primary)}.toggle-btn.active{background:var(--gradient-primary);color:#fff}.logout-btn{width:40px;height:40px;background:transparent;border:1px solid var(--border-color);border-radius:8px;color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:var(--transition-fast)}.logout-btn:hover{background:#ef44441a;border-color:#ef4444;color:#ef4444}.logout-btn svg{width:20px;height:20px}.app-main{padding:2rem 1.5rem;max-width:1400px;margin:0 auto}.grid-view{animation:fadeIn .3s ease}.grid-header{display:flex;align-items:baseline;gap:1rem;margin-bottom:1.5rem}.grid-header h2{font-size:1.5rem;font-weight:600}.term-count{color:var(--text-muted);font-size:.875rem}.vocab-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.25rem}.vocab-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--border-radius-lg);padding:1.5rem;transition:var(--transition-normal);cursor:default}.vocab-card:hover{background:var(--bg-card-hover);border-color:var(--border-glow);transform:translateY(-2px);box-shadow:var(--shadow-glow)}.card-header{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;margin-bottom:.75rem}.term-name{font-size:1.125rem;font-weight:600;line-height:1.3}.category-badge{flex-shrink:0;padding:.25rem .625rem;background:#a855f726;border:1px solid rgba(168,85,247,.3);border-radius:6px;font-size:.75rem;font-weight:500;color:var(--accent-purple);text-transform:uppercase;letter-spacing:.02em}.card-definition{color:var(--text-secondary);font-size:.9375rem;line-height:1.65}.flashcard-view{display:flex;flex-direction:column;align-items:center;animation:fadeIn .3s ease}.flashcard-header{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:600px;margin-bottom:2rem}.flashcard-header h2{font-size:1.5rem;font-weight:600}.flashcard-controls{display:flex;gap:.5rem}.control-btn{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:var(--bg-card);border:1px solid var(--border-color);border-radius:8px;color:var(--text-secondary);font-size:.875rem;font-weight:500;cursor:pointer;transition:var(--transition-fast)}.control-btn:hover{background:var(--bg-card-hover);border-color:var(--accent-purple);color:var(--text-primary)}.control-btn svg{width:16px;height:16px}.flashcard-container{display:flex;align-items:center;justify-content:center;gap:1.5rem;width:100%;max-width:800px;margin-bottom:2rem}.nav-btn{width:48px;height:48px;background:var(--bg-card);border:1px solid var(--border-color);border-radius:50%;color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:var(--transition-fast);flex-shrink:0}.nav-btn:hover{background:var(--bg-card-hover);border-color:var(--accent-purple);color:var(--text-primary);transform:scale(1.05)}.nav-btn svg{width:24px;height:24px}.flashcard{width:100%;max-width:600px;height:400px;perspective:1000px;cursor:pointer}.flashcard-inner{position:relative;width:100%;height:100%;transition:transform .6s cubic-bezier(.4,0,.2,1);transform-style:preserve-3d}.flashcard.flipped .flashcard-inner{transform:rotateY(180deg)}.flashcard-front,.flashcard-back{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--border-radius-lg);padding:2rem;display:flex;flex-direction:column;backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:var(--transition-normal)}.flashcard:hover .flashcard-front,.flashcard:hover .flashcard-back{border-color:var(--border-glow);box-shadow:var(--shadow-glow)}.flashcard-front{align-items:center;justify-content:center;text-align:center}.flashcard-front .category-badge{margin-bottom:1rem}.flashcard-front .term-title{font-size:2rem;font-weight:700;margin-bottom:1.5rem}.flip-hint{color:var(--text-muted);font-size:.875rem}.flashcard-back{transform:rotateY(180deg);overflow-y:auto}.flashcard-back .category-badge{align-self:flex-start;margin-bottom:.75rem}.flashcard-back .term-title-small{font-size:1.5rem;font-weight:600;margin-bottom:1.25rem;background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.flashcard-back .term-definition{color:var(--text-secondary);font-size:1.125rem;line-height:1.7}.flashcard-progress{display:flex;flex-direction:column;align-items:center;gap:.75rem;width:100%;max-width:480px}.progress-text{color:var(--text-secondary);font-size:.875rem;font-weight:500}.progress-bar{width:100%;height:4px;background:var(--bg-card);border-radius:2px;overflow:hidden}.progress-fill{height:100%;background:var(--gradient-primary);border-radius:2px;transition:width .3s ease}.keyboard-hint{color:var(--text-muted);font-size:.8125rem;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;justify-content:center}.keyboard-hint kbd{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;padding:0 .5rem;background:var(--bg-card);border:1px solid var(--border-color);border-radius:4px;font-family:inherit;font-size:.75rem}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 768px){.app-header{padding:0 1rem}.header-brand h1,.toggle-btn span{display:none}.toggle-btn{padding:.5rem .75rem}.app-main{padding:1.5rem 1rem}.vocab-grid{grid-template-columns:1fr}.flashcard-container{gap:.75rem}.nav-btn{width:40px;height:40px}.flashcard{max-width:100%;height:360px}.flashcard-front,.flashcard-back{padding:1.5rem}.flashcard-front .term-title{font-size:1.5rem}.keyboard-hint{display:none}}@media (max-width: 480px){.gate-logo h1{font-size:2rem}.flashcard-header{flex-direction:column;align-items:flex-start;gap:1rem}.flashcard-controls{width:100%}.control-btn{flex:1;justify-content:center}}