:root{--bg-primary: #F8F9FA;--bg-secondary: #FFFFFF;--text-primary: #212529;--text-secondary: #6C757D;--accent-primary: #007BFF;--accent-hover: #0056B3;--color-success: #28A745;--color-danger: #DC3545;--border-color: #DEE2E6;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;line-height:1.5;font-weight:400;color:var(--text-primary);background-color:var(--bg-primary);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;min-width:320px;min-height:100vh}h1{font-size:2.5em;line-height:1.1;margin-top:0}a{font-weight:500;color:var(--accent-primary);text-decoration:inherit;transition:color .25s}a:hover{color:var(--accent-hover)}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;cursor:pointer;transition:border-color .25s}.spinner-container{display:flex;justify-content:center;align-items:center;padding:40px}.spinner{border:8px solid rgba(255,255,255,.2);border-top:8px solid #61dafb;border-radius:50%;width:60px;height:60px;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.exercise-card-link{text-decoration:none;color:inherit}.exercise-card{background-color:var(--bg-secondary);border:1px solid var(--border-color);border-radius:16px;padding:32px;text-align:center;box-shadow:0 4px 6px #0000000d;transition:transform .2s ease-in-out,box-shadow .2s ease-in-out;cursor:pointer;min-width:180px;display:flex;flex-direction:column;align-items:center;justify-content:center}.exercise-card:hover{transform:scale(1.05);box-shadow:0 10px 20px #0000001a}.card-icon{font-size:2.5rem;color:var(--accent-primary);margin-bottom:16px}.exercise-card-number{font-size:1.8rem;font-weight:600;color:var(--text-primary)}.exercise-card.locked{background-color:#e9ecef;cursor:not-allowed;opacity:.6}.exercise-card.locked .card-icon{color:var(--text-secondary)}.homepage-container{width:100%;text-align:center}.homepage-title{font-weight:700;margin-top:70px;margin-bottom:16px;color:var(--text-primary)}.homepage-subtitle{color:var(--text-secondary);margin-bottom:40px}.exercise-grid{display:flex;flex-wrap:wrap;gap:24px;justify-content:center;width:100%}.progress-trophy{position:absolute;top:100px;right:40px;background-color:var(--bg-secondary);border:1px solid var(--border-color);border-radius:50px;padding:8px 16px;box-shadow:0 4px 8px #0000001a;display:flex;align-items:center;gap:8px}.trophy-icon{color:#ffc107;font-size:1.5rem}.trophy-text{color:var(--text-primary);font-weight:600;font-size:1rem}.pagination-container{display:flex;justify-content:center;align-items:center;gap:16px;margin-top:48px;width:100%}.pagination-button{display:inline-flex;align-items:center;gap:8px;background-color:var(--bg-secondary);color:var(--text-primary);border:1px solid var(--border-color);padding:10px 20px;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:background-color .2s,box-shadow .2s}.pagination-button:hover:not(:disabled){background-color:#e9ecef;box-shadow:0 2px 4px #0000000d}.pagination-button:disabled{opacity:.5;cursor:not-allowed}.page-indicator{color:var(--text-secondary);font-weight:500}.fill-in-the-blank-container{display:flex;gap:16px;align-items:center;width:100%}.answer-input{flex-grow:1;padding:12px 16px;font-size:1.1rem;border:1px solid var(--border-color);border-radius:8px;font-family:Courier New,Courier,monospace}.answer-input:disabled{background-color:#f0f0f0;cursor:not-allowed}.fill-in-the-blank-container .check-button{flex-shrink:0}.drag-and-drop-container{width:100%}.droppable-area{background-color:var(--bg-secondary);border:1px dashed var(--border-color);border-radius:12px;padding:16px;min-height:100px;transition:background-color .2s ease}.draggable-item{-webkit-user-select:none;user-select:none;padding:16px;margin-bottom:8px;background-color:#fff;border:1px solid var(--border-color);border-radius:8px;box-shadow:0 2px 4px #0000000d;cursor:grab;transition:box-shadow .2s ease,background-color .2s ease}.draggable-item:last-child{margin-bottom:0}.draggable-item.dragging{box-shadow:0 8px 16px #00000026}.draggable-item.disabled{cursor:not-allowed;background-color:#f0f0f0;color:var(--text-secondary)}.action-container-dnd{margin-top:24px;text-align:right}.detail-page-container{width:100%;max-width:800px;margin:0 auto;text-align:left}.back-link{display:inline-flex;align-items:center;gap:8px;color:var(--text-secondary);text-decoration:none;margin-bottom:24px;font-size:1rem}.back-link:hover{color:var(--accent-primary)}.exercise-title{font-size:2.8rem;font-weight:700;color:var(--text-primary);margin-bottom:8px}.exercise-statement{font-size:1.2rem;color:var(--text-secondary);margin-bottom:32px}.code-snippet{background-color:#e9ecef;padding:1.5rem;border-radius:12px;text-align:left;color:var(--text-primary);border:1px solid var(--border-color);white-space:pre-wrap;font-family:Courier New,Courier,monospace;font-size:1.1rem;margin-bottom:32px;box-shadow:0 2px 4px #0000000d}.options-title{font-size:1.5rem;font-weight:600;margin-bottom:16px;border-top:1px solid var(--border-color);padding-top:32px}.options-list{display:flex;flex-direction:column;gap:12px}.option-button{display:block;width:100%;padding:16px;font-size:1rem;text-align:left;cursor:pointer;border:1px solid var(--border-color);background-color:var(--bg-secondary);color:var(--text-primary);border-radius:12px;transition:transform .2s,box-shadow .2s,border-color .2s;box-shadow:0 2px 4px #0000000a}.option-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 12px #00000014;border-color:var(--accent-primary)}.option-button:disabled{cursor:not-allowed;opacity:.7}.option-button.correct{background-color:var(--color-success);border-color:var(--color-success);color:#fff}.option-button.incorrect{background-color:var(--color-danger);border-color:var(--color-danger);color:#fff}.option-button.selected{border-color:var(--accent-primary);background-color:#e7f3ff}.action-container{margin-top:32px;text-align:right;border-top:1px solid var(--border-color);padding-top:24px}.check-button{background-color:var(--accent-primary);color:#fff;font-size:1.1rem;font-weight:700;border:none;padding:12px 24px}.check-button:hover{background-color:var(--accent-hover)}.check-button:disabled{background-color:var(--text-secondary);cursor:not-allowed}.auth-layout-container{display:flex;width:100vw;min-height:100vh}.auth-layout-left{flex:1;background:linear-gradient(to right,#007bff,#0056b3);color:#fff;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:40px;text-align:center}.auth-layout-logo{height:120px;margin-bottom:24px}.auth-layout-left h1{font-size:2.5rem;margin-bottom:16px}.auth-layout-left p{font-size:1.2rem;max-width:400px;line-height:1.6}.auth-layout-right{flex:1;display:flex;justify-content:center;align-items:center;background-color:var(--bg-primary)}.mobile-header{display:none;text-align:center}.auth-layout-logo-mobile{height:6rem}@media screen and (max-width: 768px){.auth-layout-container{flex-direction:column}.auth-layout-left{display:none}.auth-layout-right{flex:1;min-height:100vh;width:100%;flex-direction:column;justify-content:center;align-items:center;padding:2rem;box-sizing:border-box;gap:2rem}.mobile-header{display:block}.auth-form{box-shadow:none;width:100%;max-width:400px;padding:0}}.auth-container{display:flex;justify-content:center;align-items:center;padding:40px 0}.auth-form{background-color:var(--bg-secondary);padding:2.5rem;border-radius:16px;box-shadow:0 8px 16px #0000001a;width:100%;max-width:400px;text-align:left}.auth-form h2{text-align:center;margin-bottom:2rem;color:var(--text-primary)}.form-group{margin-bottom:1.5rem}.form-group label{display:block;margin-bottom:.5rem;font-weight:500;color:var(--text-secondary)}.form-group input{width:100%;padding:12px;border:1px solid var(--border-color);border-radius:8px;font-size:1rem;box-sizing:border-box}.auth-button{width:100%;padding:12px;border:none;border-radius:8px;background-color:var(--accent-primary);color:#fff;font-size:1.1rem;font-weight:700;cursor:pointer;transition:background-color .2s}.auth-button:hover{background-color:var(--accent-hover)}.auth-feedback{text-align:center;margin-top:1rem;padding:10px;border-radius:8px}.error-message.auth-feedback{background-color:#f8d7da;color:var(--color-danger)}.success-message.auth-feedback{background-color:#d4edda;color:var(--color-success)}.auth-switch{text-align:center;margin-top:1.5rem;color:var(--text-secondary)}.navbar{background:var(--bg-secondary);height:80px;display:flex;justify-content:center;align-items:center;font-size:1.2rem;position:sticky;top:0;z-index:999;border-bottom:1px solid var(--border-color);box-shadow:0 2px 4px #0000000a}.navbar-container{display:flex;justify-content:space-between;height:80px;width:100%;max-width:1500px;padding:0 50px}.navbar-logo{color:var(--text-primary);justify-self:start;cursor:pointer;text-decoration:none;font-size:1.5rem;display:flex;align-items:center;font-weight:700}.nav-menu{display:flex;align-items:center;list-style:none;text-align:center}.nav-item{height:80px;display:flex;align-items:center}.nav-links{color:var(--text-primary);display:flex;align-items:center;text-decoration:none;padding:0 1rem;height:100%}.nav-links:hover{border-bottom:4px solid var(--accent-primary);transition:all .2s ease-out}.nav-welcome{color:var(--text-secondary);font-size:1rem;padding:0 1rem}.nav-links-btn{background:none;border:none;color:var(--text-primary);padding:0 1rem;font-family:inherit;font-size:1rem;display:flex;align-items:center;height:100%;cursor:pointer}.nav-links-btn:hover{color:var(--accent-primary)}.navbar-logo-desktop{height:60px;width:auto;margin-right:12px;display:block}.navbar-logo-mobile{height:50px;width:auto;display:none}@media screen and (max-width: 768px){.navbar-logo-desktop{display:none}.navbar-logo-mobile{display:block}.navbar-container{padding:0 20px}}.footer{background-color:var(--bg-secondary);padding:2rem 0;margin-top:4rem;border-top:1px solid var(--border-color);color:var(--text-secondary)}.footer-container{max-width:1200px;margin:0 auto;padding:0 2rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px}.footer-copyright{font-size:.9rem}.footer-socials{display:flex;gap:20px}.social-icon-link{color:var(--text-secondary);font-size:1.5rem;transition:color .2s ease-in-out}.social-icon-link:hover{color:var(--accent-primary)}.App{text-align:center;min-height:calc(100vh - 80px);display:flex;flex-direction:column;align-items:center;padding-top:2rem}.main-content{width:100%;max-width:1200px;padding:0 2rem;box-sizing:border-box}.feedback{margin-top:16px;font-size:1.2rem;font-weight:700}.feedback.correct{color:var(--color-success)}.feedback.incorrect{color:var(--color-danger)}.next-button{display:inline-block;margin-top:20px;padding:10px 20px;background-color:var(--accent-primary);color:#fff;text-decoration:none;border-radius:5px;font-weight:700;transition:background-color .2s}.next-button:hover{background-color:var(--accent-hover)}.feedback-container{margin-top:16px}.statement{color:var(--text-secondary)}.code-snippet{background-color:#e9ecef;padding:1rem;border-radius:8px;text-align:left;color:var(--text-primary);border:1px solid var(--border-color);white-space:pre-wrap}.site-container{display:flex;flex-direction:column;min-height:100vh}.main-content{flex-grow:1}