:root{--app-bg: #121212;--surface-bg: #1E1E1E;--card-bg: #2C2C2C;--card-border: #444444;--card-hover-border: var(--accent-pink);--text-primary: #E0E0E0;--text-secondary: #A0A0A0;--text-on-accent: #FFFFFF;--accent-yellow: #FFEB3B;--accent-orange: #FF9800;--accent-pink: #E91E63;--accent-purple: #9C27B0;--button-hover-brightness: 1.1;--button-disabled-bg: #4A4A4A;--button-disabled-text: #777777;--input-bg: rgba(40, 40, 40, .7);--input-border: #555555;--input-focus-border: var(--accent-orange);--input-gradient-border: linear-gradient(90deg, var(--accent-yellow), var(--accent-orange), var(--accent-pink));--error-text: #FF8A80;--error-bg: rgba(255, 138, 128, .1);--shadow-color: rgba(0, 0, 0, .3);--focus-shadow-color: rgba(233, 30, 99, .3);--flashcard-width-actual: 220px;--flashcard-height: 160px}body{font-family:Google Sans,Roboto,Arial,sans-serif;margin:0;background-color:var(--app-bg);color:var(--text-primary);display:flex;flex-direction:column;align-items:center;min-height:100vh;padding:20px;box-sizing:border-box;background-attachment:fixed}.container{background-color:var(--app-bg);padding:40px;border-radius:16px;width:90%;max-width:800px;text-align:center;margin-top:30px;margin-bottom:30px}h1{margin-bottom:15px;font-size:2.8em;font-weight:500;background:linear-gradient(90deg,var(--accent-yellow),var(--accent-orange),var(--accent-pink));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-fill-color:transparent;padding-bottom:5px}p{margin-bottom:25px;color:var(--text-secondary);line-height:1.6}textarea{width:calc(100% - 32px);padding:15px;margin-bottom:25px;border:2px solid transparent;border-radius:10px;font-size:16px;min-height:120px;background-color:var(--input-bg);color:var(--text-primary);resize:vertical;transition:box-shadow .3s ease;position:relative;background-clip:padding-box;outline:none}textarea:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;margin:-2px;border-radius:inherit;background:var(--input-gradient-border)}textarea:focus{box-shadow:0 0 0 3px var(--focus-shadow-color);background-color:#2d2e30cc}button{background-image:linear-gradient(90deg,var(--accent-yellow),var(--accent-orange),var(--accent-pink));color:var(--text-on-accent);padding:14px 28px;border:none;border-radius:10px;cursor:pointer;font-size:16px;font-weight:500;transition:filter .3s ease,box-shadow .2s ease,transform .1s ease;box-shadow:0 2px 4px var(--shadow-color)}button:hover{filter:brightness(var(--button-hover-brightness));box-shadow:0 4px 8px var(--shadow-color);transform:translateY(-1px)}button:active{transform:translateY(0);filter:brightness(.95);box-shadow:0 2px 4px var(--shadow-color)}button:focus{outline:none;box-shadow:0 0 0 4px var(--focus-shadow-color),0 4px 8px var(--shadow-color)}button:disabled{background-image:none;background-color:var(--button-disabled-bg);color:var(--button-disabled-text);cursor:not-allowed;box-shadow:none;transform:none;filter:none}.error-message{color:var(--error-text);margin-top:20px;font-weight:500;min-height:1.5em;background-color:var(--error-bg);border-radius:6px;padding:8px 12px;display:none}.flashcards-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--flashcard-width-actual, 220px),1fr));gap:20px;margin-top:30px;justify-content:center}.flashcard{background-color:transparent;width:100%;height:var(--flashcard-height);border:none;border-radius:12px;cursor:pointer;perspective:1200px;box-shadow:none}.flashcard-inner{position:relative;width:100%;height:100%;text-align:center;transition:transform .7s cubic-bezier(.4,0,.2,1);transform-style:preserve-3d;border-radius:12px;box-shadow:0 4px 15px var(--shadow-color);transform:rotateY(0)}.flashcard.flipped .flashcard-inner{transform:rotateY(180deg)}.flashcard-front,.flashcard-back{position:absolute;width:100%;height:100%;-webkit-backface-visibility:hidden;backface-visibility:hidden;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:15px;box-sizing:border-box;border-radius:12px;border:1px solid var(--card-border);background-color:var(--card-bg);overflow:hidden;transition:border-color .3s}.flashcard-back{transform:rotateY(180deg)}.flashcard:not(.flipped):hover .flashcard-inner{transform:translateY(-3px) scale(1.02) rotateY(0);box-shadow:0 8px 25px var(--shadow-color)}.flashcard.flipped:hover .flashcard-inner{transform:translateY(-3px) scale(1.02) rotateY(180deg);box-shadow:0 8px 25px var(--shadow-color)}.flashcard:hover .flashcard-front,.flashcard:hover .flashcard-back{border-color:var(--card-hover-border)}.term{font-size:1.25em;font-weight:500;color:var(--text-primary)}.definition{font-size:.95em;color:var(--text-secondary);line-height:1.5}footer.page-footer{width:100%;text-align:center;padding:20px 0;margin-top:auto;color:var(--text-secondary);font-size:.9em}@media (max-width: 768px){.container{padding:30px;margin-top:20px;margin-bottom:20px}h1{font-size:2.3em}textarea{min-height:100px;padding:12px}button{padding:12px 24px;font-size:15px}.flashcards-container{gap:15px;grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr))}.term{font-size:1.15em}.definition{font-size:.9em}}@media (max-width: 480px){body{padding:10px}.container{padding:20px 15px;margin-top:10px;margin-bottom:15px;width:95%}h1{font-size:2em}p{font-size:.9em;margin-bottom:20px}textarea{min-height:90px;font-size:14px;margin-bottom:20px;padding:10px}button{padding:12px 20px;font-size:15px;width:100%;box-sizing:border-box}.flashcards-container{gap:12px;margin-top:25px;grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr))}.flashcard{height:150px}.flashcard-front,.flashcard-back{padding:10px}.term{font-size:1em}.definition{font-size:.8em;line-height:1.4}footer.page-footer{font-size:.8em;padding:15px 0}}@media (max-width: 360px){h1{font-size:1.8em}.flashcards-container{grid-template-columns:repeat(auto-fill,minmax(min(100%,130px),1fr))}.flashcard{height:140px}}