:root{--bg-primary: #0a0a0a;--bg-secondary: #111;--border-color: #222;--text-primary: #fff;--text-secondary: #888;--accent: #9EFD38}*{box-sizing:border-box}body{margin:0;background:var(--bg-primary);color:var(--text-primary);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.container{min-height:100vh;padding:2rem 3rem;background:var(--bg-primary);color:var(--text-primary);max-width:100vw;overflow-x:hidden}.title{font-size:2rem;font-weight:600;letter-spacing:-.03em;color:var(--text-primary);margin-bottom:2rem}.titleRow{display:flex;align-items:center;gap:1rem;margin-bottom:2rem}.titleRow .title{margin-bottom:0}.exitButton{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:transparent;border:1px solid var(--border-color);border-radius:8px;color:var(--text-secondary);cursor:pointer;transition:all .2s ease}.exitButton:hover{background:var(--border-color);color:var(--text-primary);border-color:var(--text-secondary)}.card{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:8px;padding:1.5rem;margin-bottom:1.5rem;transition:all .2s ease}.card:hover{border-color:var(--text-secondary)}.buttonPrimary{padding:.75rem 1.5rem;border:1px solid var(--text-primary);border-radius:6px;font-size:.875rem;cursor:pointer;transition:all .2s ease;font-weight:500;background:var(--text-primary);color:var(--bg-primary)}.buttonPrimary:hover{opacity:.8}.buttonPrimary:disabled{opacity:.3;cursor:not-allowed}.buttonSecondary{padding:.75rem 1.5rem;border-radius:6px;font-size:.875rem;cursor:pointer;transition:all .2s ease;font-weight:500;background:transparent;color:var(--text-primary);border:1px solid var(--border-color)}.buttonSecondary:hover{background:var(--border-color);border-color:var(--text-secondary)}.buttonDanger{padding:.625rem 1.25rem;border:1px solid var(--text-secondary);border-radius:6px;font-size:.875rem;cursor:pointer;transition:all .2s ease;font-weight:500;background:transparent;color:var(--text-secondary)}.buttonDanger:hover{background:var(--border-color);color:var(--text-primary)}.ratingButtons{display:flex;gap:.75rem;margin-top:1.5rem}.btnAgain{flex:1;background:transparent;color:var(--text-primary);padding:.875rem;border:1px solid var(--border-color);border-radius:6px;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s ease}.btnAgain:hover{background:var(--border-color)}.btnHard{flex:1;background:transparent;color:var(--text-primary);padding:.875rem;border:1px solid var(--border-color);border-radius:6px;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s ease}.btnHard:hover{background:var(--border-color)}.btnGood{flex:1;background:var(--text-primary);color:var(--bg-primary);padding:.875rem;border:1px solid var(--text-primary);border-radius:6px;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s ease}.btnGood:hover{opacity:.8}.btnEasy{flex:1;background:transparent;color:var(--text-primary);padding:.875rem;border:1px solid var(--border-color);border-radius:6px;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s ease}.btnEasy:hover{background:var(--border-color)}.flashcard{perspective:1000px;width:100%;max-width:550px;height:350px;margin:0 auto}.flashcardInner{position:relative;width:100%;height:100%;transition:transform .5s;transform-style:preserve-3d}.flashcardInner.flipped{transform:rotateY(180deg)}.flashcardFront,.flashcardBack{position:absolute;width:100%;height:100%;backface-visibility:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:8px;padding:2rem;text-align:center}.flashcardBack{transform:rotateY(180deg)}.flashcardWort{font-size:2rem;font-weight:600;letter-spacing:-.02em;margin-bottom:.75rem;color:var(--text-primary)}.flashcardKontext{font-size:1rem;color:var(--text-secondary);font-style:italic}.flashcardUebersetzung{font-size:1.5rem;font-weight:600;color:var(--text-primary)}.flashcardContent{width:100%;color:var(--text-primary);line-height:1.6}.flashcardContent h1{font-size:1.5rem;font-weight:600;margin:.75rem 0}.flashcardContent h2{font-size:1.25rem;font-weight:600;margin:.5rem 0}.flashcardContent p{margin:.5rem 0}.flashcardContent strong{font-weight:600}.flashcardContent em{font-style:italic}.flashcardContent u{text-decoration:underline}.flashcardContent ul{padding-left:1.5rem;margin:.5rem 0}.flashcardContent img{max-width:100%;height:auto;border-radius:6px;margin:.75rem 0}.tableWrapper{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.table{width:100%;min-width:600px;border-collapse:collapse;background:var(--bg-secondary);border-radius:8px;overflow:hidden;border:1px solid var(--border-color)}.table thead{background:var(--bg-primary)}.table th{padding:.875rem 1rem;text-align:left;font-weight:500;font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary)}.table td{padding:.875rem 1rem;border-top:1px solid var(--border-color);font-size:.875rem}.table tbody tr:hover{background:var(--bg-primary)}.form{display:flex;flex-direction:column;gap:1rem}.formGroup{display:flex;flex-direction:column;gap:.375rem}.formLabel{font-weight:500;font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary)}.formInput,.formTextarea,.formSelect{padding:.625rem .875rem;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:6px;color:var(--text-primary);font-size:.875rem;transition:all .2s ease;font-weight:400}.formInput:focus,.formTextarea:focus,.formSelect:focus{outline:none;border-color:var(--text-secondary)}.formSelect{cursor:pointer}.formSelect:hover{border-color:var(--text-secondary)}.formTextarea{min-height:80px;resize:vertical;font-family:inherit}.progressBar{width:100%;height:4px;background:var(--border-color);border-radius:2px;overflow:hidden;margin-bottom:.75rem}.progressBarFill{height:100%;background:var(--text-primary);transition:width .3s ease}.progressText{text-align:center;color:var(--text-secondary);font-size:.875rem;margin-bottom:1.5rem}.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;margin-bottom:2rem}.statCard{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:8px;padding:1.25rem;text-align:center}.statValue{font-size:1.5rem;font-weight:600;color:var(--text-primary);margin-bottom:.25rem}.statLabel{color:var(--text-secondary);font-size:.75rem;text-transform:uppercase;letter-spacing:.05em}.mainGrid{display:grid;grid-template-columns:minmax(200px,280px) minmax(0,1fr);gap:1.5rem;align-items:start;width:100%;max-width:100%}.sidebar{position:sticky;top:2rem;min-width:0;max-width:100%}.mainContent{flex:1;min-width:0;max-width:100%;overflow-x:auto}.flex{display:flex;gap:.75rem;flex-wrap:wrap}.flexBetween{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}.textCenter{text-align:center}.categoryContainer{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:8px;padding:1.25rem;height:-moz-fit-content;height:fit-content;min-height:200px}.categoryHeader{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.25rem;padding-bottom:.875rem;border-bottom:1px solid var(--border-color)}.categoryTitle{font-size:.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary);margin:0}.categoryAddButton{padding:.375rem .75rem;background:var(--text-primary);color:var(--bg-primary);border:none;border-radius:4px;font-size:.75rem;font-weight:500;cursor:pointer;transition:all .2s ease}.categoryAddButton:hover{opacity:.8}.folderItem{display:flex;align-items:center;padding:.5rem;margin-bottom:.125rem;border-radius:4px;transition:all .15s ease;cursor:pointer;position:relative;border:1px solid transparent}.folderItem:hover{background:var(--border-color)}.folderItem.selected{background:var(--border-color);border-color:var(--text-secondary)}.folderItem.dragOver{background:var(--border-color);border:1px dashed var(--text-secondary)}.expandButton{background:none;border:none;color:var(--text-secondary);cursor:pointer;padding:.25rem;margin-right:.375rem;font-size:.625rem;transition:all .15s ease;width:18px;height:18px;display:flex;align-items:center;justify-content:center}.expandButton:hover{color:var(--text-primary)}.expandPlaceholder{width:18px;height:18px;margin-right:.375rem;display:inline-block}.folderContent{display:flex;align-items:center;gap:.5rem;flex:1;padding:.125rem}.folderIcon{font-size:1rem}.folderName{font-size:.875rem;color:var(--text-primary);font-weight:400;word-break:break-word}.folderActions{display:flex;gap:.25rem;opacity:0;transition:opacity .15s ease}.folderItem:hover .folderActions{opacity:1}.addSubfolderButton,.deleteButton{background:transparent;border:1px solid var(--border-color);color:var(--text-secondary);border-radius:4px;padding:.125rem .375rem;cursor:pointer;font-size:.75rem;transition:all .15s ease}.addSubfolderButton:hover,.deleteButton:hover{background:var(--border-color);color:var(--text-primary)}.newFolderForm{margin-bottom:1rem;padding:.875rem;background:var(--bg-primary);border-radius:6px;border:1px solid var(--border-color)}.categoryInput{width:100%;padding:.625rem;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:4px;color:var(--text-primary);font-size:.875rem;margin-bottom:.625rem}.categoryInput:focus{outline:none;border-color:var(--text-secondary)}.categoryFormButtons{display:flex;gap:.5rem}.categorySubmitButton{flex:1;padding:.5rem .75rem;background:var(--text-primary);color:var(--bg-primary);border:none;border-radius:4px;font-size:.75rem;font-weight:500;cursor:pointer}.categorySubmitButton:hover{opacity:.8}.categoryCancelButton{flex:1;padding:.5rem .75rem;background:transparent;color:var(--text-primary);border:1px solid var(--border-color);border-radius:4px;font-size:.75rem;font-weight:500;cursor:pointer}.categoryCancelButton:hover{background:var(--border-color)}.editorContainer{border:1px solid var(--border-color);border-radius:8px;overflow:hidden;background:var(--bg-primary)}.editorToolbar{display:flex;gap:.5rem;padding:.75rem;background:var(--bg-secondary);border-bottom:1px solid var(--border-color);flex-wrap:wrap}.editorToolbar button{padding:.5rem .75rem;background:var(--border-color);border:1px solid var(--border-color);border-radius:4px;color:var(--text-primary);cursor:pointer;font-size:.9rem;transition:all .2s}.editorToolbar button:hover{background:var(--text-secondary);border-color:var(--accent)}.editorToolbar button.active{background:var(--accent);color:#000;border-color:var(--accent)}.editorContent{padding:1rem;min-height:200px;color:var(--text-primary)}.editorContent .ProseMirror{outline:none;min-height:180px}.editorContent .ProseMirror p{margin:.5rem 0}.editorContent .ProseMirror h1{font-size:2rem;font-weight:700;margin:1rem 0}.editorContent .ProseMirror h2{font-size:1.5rem;font-weight:700;margin:.75rem 0}.editorContent .ProseMirror img{max-width:100%;height:auto;border-radius:8px;margin:1rem 0}.editorContent .ProseMirror ul{padding-left:1.5rem;margin:.5rem 0}@media(max-width:1024px){.mainGrid{grid-template-columns:1fr}.sidebar{position:relative;top:0}}@media(max-width:768px){.container{padding:1rem}.title{font-size:1.5rem}.flashcard{height:auto;min-height:280px}.flashcardFront,.flashcardBack{position:relative;height:auto;min-height:280px;padding:1.5rem}.flashcardBack{position:absolute;inset:0}.flashcardWort{font-size:1.5rem}.flashcardUebersetzung{font-size:1.25rem}.ratingButtons{flex-wrap:wrap}.btnAgain,.btnHard,.btnGood,.btnEasy{flex:1 1 45%}.stats{grid-template-columns:repeat(3,1fr);gap:.5rem}.statCard{padding:.75rem}.statValue{font-size:1.25rem}.statLabel{font-size:.65rem}.card{padding:1rem}.flex{flex-direction:column}.flexBetween{flex-direction:column;align-items:stretch}.buttonPrimary,.buttonSecondary{width:100%;text-align:center}}
