:root{--color-primary: #c9fd5d;--color-primary-hover: #b8ec4c;--color-background: #000000;--color-surface: #111111;--color-surface-hover: #1a1a1a;--color-text: #ffffff;--color-text-secondary: #888888;--color-error: #ff4444;--color-error-bg: rgba(255, 68, 68, .1);--color-success: #4CAF50;--color-success-bg: rgba(76, 175, 80, .1);--color-warning: #FFC107;--color-warning-bg: rgba(255, 193, 7, .1);--color-info: #2196F3;--color-info-bg: rgba(33, 150, 243, .1);--color-border: #333333;--font-family: "Inter", system-ui, -apple-system, sans-serif;--border-radius: 8px;--transition: .15s ease}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-family);background-color:var(--color-background);color:var(--color-text);line-height:1.5;-webkit-font-smoothing:antialiased}.loading-screen{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;color:var(--color-text-secondary)}.loading-spinner{width:32px;height:32px;border:3px solid var(--color-border);border-top-color:var(--color-primary);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.login-callback{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;color:var(--color-text-secondary)}.dashboard-container{display:flex;min-height:100vh}.sidebar{width:260px;background-color:var(--color-surface);border-right:1px solid var(--color-border);display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0}.sidebar-header{padding:24px;border-bottom:1px solid var(--color-border)}.sidebar-header h2{font-size:20px;font-weight:500;color:var(--color-primary)}.sidebar-nav{flex:1;padding:16px 0;overflow-y:auto}.nav-item{display:flex;align-items:center;gap:12px;padding:12px 24px;color:var(--color-text-secondary);text-decoration:none;font-size:14px;transition:all var(--transition)}.nav-item:hover{color:var(--color-text);background-color:var(--color-surface-hover)}.nav-item.active{color:var(--color-primary);background-color:#c9fd5d1a}.nav-icon{font-size:16px;width:20px;text-align:center}.sidebar-footer{padding:16px 24px;border-top:1px solid var(--color-border)}.user-info{display:flex;flex-direction:column;gap:4px;margin-bottom:12px}.user-name{font-size:14px;font-weight:500}.user-email{font-size:12px;color:var(--color-text-secondary)}.logout-button{width:100%;padding:10px 16px;font-size:14px;font-family:var(--font-family);background-color:transparent;border:1px solid var(--color-border);border-radius:var(--border-radius);color:var(--color-text-secondary);cursor:pointer;transition:all var(--transition)}.logout-button:hover{color:var(--color-text);border-color:var(--color-text-secondary)}.main-content{flex:1;margin-left:260px;display:flex;flex-direction:column;max-width:calc(100vw - 260px);overflow-x:hidden}.content-header{padding:24px 32px;border-bottom:1px solid var(--color-border)}.content-header h1{font-size:24px;font-weight:500}.content-body{flex:1;padding:32px;overflow-x:hidden;max-width:100%}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 20px;font-size:14px;font-weight:500;font-family:var(--font-family);border-radius:var(--border-radius);cursor:pointer;transition:all var(--transition);text-decoration:none;border:none}.btn-primary{background-color:var(--color-primary);color:var(--color-background)}.btn-primary:hover:not(:disabled){background-color:var(--color-primary-hover)}.btn-secondary{background-color:transparent;border:1px solid var(--color-border);color:var(--color-text)}.btn-secondary:hover:not(:disabled){background-color:var(--color-surface-hover);border-color:var(--color-text-secondary)}.btn-small{padding:6px 12px;font-size:13px}.btn:disabled{opacity:.5;cursor:not-allowed}.dashboard-page{max-width:1200px}.welcome-section{margin-bottom:32px}.welcome-section h2{font-size:28px;font-weight:500;margin-bottom:8px}.welcome-section p{color:var(--color-text-secondary)}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-bottom:40px}.stat-card{background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--border-radius);padding:20px;display:flex;align-items:center;gap:16px}.stat-icon{font-size:32px}.stat-content{flex:1}.stat-value{font-size:28px;font-weight:600;color:var(--color-primary)}.stat-label{font-size:13px;color:var(--color-text-secondary)}.section{margin-bottom:32px}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.section-header h3{font-size:18px;font-weight:500}.view-all-link{color:var(--color-primary);text-decoration:none;font-size:14px;transition:opacity var(--transition)}.view-all-link:hover{opacity:.8}.courses-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}.course-card{background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--border-radius);overflow:hidden;transition:border-color var(--transition)}.course-card:hover{border-color:var(--color-primary)}.course-image{height:140px;background-color:var(--color-background);overflow:hidden}.course-image img{width:100%;height:100%;object-fit:cover}.course-image-placeholder{height:100%;display:flex;align-items:center;justify-content:center;font-size:48px}.course-content{padding:16px}.course-content h4{font-size:16px;font-weight:500;margin-bottom:8px;line-height:1.3}.course-session{font-size:13px;color:var(--color-text-secondary);margin-bottom:12px}.course-progress{display:flex;align-items:center;gap:12px;margin-bottom:12px}.progress-bar{flex:1;height:6px;background-color:var(--color-background);border-radius:3px;overflow:hidden}.progress-fill{height:100%;background-color:var(--color-primary);border-radius:3px;transition:width .3s ease}.progress-text{font-size:13px;color:var(--color-text-secondary);min-width:35px}.badge{display:inline-block;padding:4px 10px;font-size:12px;font-weight:500;border-radius:4px;text-transform:uppercase}.badge--enrolled{background-color:var(--color-success-bg);color:var(--color-success)}.badge--pending{background-color:var(--color-warning-bg);color:var(--color-warning)}.badge--success{background-color:var(--color-success-bg);color:var(--color-success)}.badge--locked{background-color:var(--color-error-bg);color:var(--color-error)}.badge--info{background-color:var(--color-info-bg);color:var(--color-info)}.loading-state,.empty-state,.error-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center;color:var(--color-text-secondary)}.empty-state p,.error-state p{margin-bottom:20px}.my-courses-page{max-width:1200px}.filter-tabs{display:flex;gap:8px;margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid var(--color-border)}.filter-tab{padding:8px 16px;font-size:14px;font-family:var(--font-family);background-color:transparent;border:1px solid var(--color-border);border-radius:var(--border-radius);color:var(--color-text-secondary);cursor:pointer;transition:all var(--transition)}.filter-tab:hover{color:var(--color-text);border-color:var(--color-text-secondary)}.filter-tab.active{background-color:var(--color-primary);border-color:var(--color-primary);color:var(--color-background)}.courses-list{display:flex;flex-direction:column;gap:16px}.course-list-item{display:flex;gap:20px;background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--border-radius);padding:20px;transition:border-color var(--transition)}.course-list-item:hover{border-color:var(--color-primary)}.course-list-item .course-image{width:180px;height:120px;border-radius:var(--border-radius);flex-shrink:0}.course-details{flex:1;min-width:0}.course-header{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:8px}.course-header h3{font-size:18px;font-weight:500}.course-description{font-size:14px;color:var(--color-text-secondary);margin-bottom:12px;line-height:1.5}.course-meta{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:16px}.meta-item{font-size:13px;color:var(--color-text-secondary)}.course-progress-section{max-width:300px}.progress-info{display:flex;justify-content:space-between;font-size:13px;margin-bottom:6px}.progress-info span:first-child{color:var(--color-text-secondary)}.completed-date{font-size:13px;color:var(--color-success);margin-top:8px}.course-actions{display:flex;flex-direction:column;gap:8px;flex-shrink:0}.profile-page{max-width:800px}.message{padding:12px 16px;border-radius:var(--border-radius);margin-bottom:20px;font-size:14px}.message--success{background-color:var(--color-success-bg);border:1px solid var(--color-success);color:var(--color-success)}.message--error{background-color:var(--color-error-bg);border:1px solid var(--color-error);color:var(--color-error)}.profile-card{background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--border-radius);overflow:hidden}.profile-header{display:flex;align-items:center;gap:20px;padding:24px;border-bottom:1px solid var(--color-border)}.profile-avatar{width:80px;height:80px;border-radius:50%;background-color:var(--color-primary);display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:600;color:var(--color-background);overflow:hidden}.profile-avatar img{width:100%;height:100%;object-fit:cover}.profile-info h2{font-size:24px;font-weight:500;margin-bottom:4px}.profile-email{color:var(--color-text-secondary);margin-bottom:8px}.profile-section{padding:24px;border-bottom:1px solid var(--color-border)}.profile-section:last-child{border-bottom:none}.profile-section h3{font-size:16px;font-weight:500;margin-bottom:20px}.profile-section .section-header{margin-bottom:20px}.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.form-group{display:flex;flex-direction:column;gap:6px}.form-group label{font-size:13px;font-weight:500;color:var(--color-text-secondary)}.form-group input{padding:10px 12px;font-size:14px;font-family:var(--font-family);background-color:var(--color-background);border:1px solid var(--color-border);border-radius:var(--border-radius);color:var(--color-text);transition:border-color var(--transition)}.form-group input:focus{outline:none;border-color:var(--color-primary)}.form-value{font-size:14px;padding:10px 0}.form-hint{font-size:12px;color:var(--color-text-secondary)}.form-actions{display:flex;gap:12px;margin-top:24px}.settings-list{display:flex;flex-direction:column;gap:16px}.setting-item{display:flex;justify-content:space-between;align-items:center;padding:16px;background-color:var(--color-background);border-radius:var(--border-radius)}.setting-info h4{font-size:14px;font-weight:500;margin-bottom:4px}.setting-info p{font-size:13px;color:var(--color-text-secondary)}.placeholder-page{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:400px;text-align:center}.placeholder-icon{font-size:64px;margin-bottom:20px}.placeholder-page h2{font-size:24px;font-weight:500;margin-bottom:8px}.placeholder-page p{color:var(--color-text-secondary);margin-bottom:8px}.coming-soon{display:inline-block;margin-top:16px;padding:8px 16px;background-color:var(--color-surface-hover);border-radius:var(--border-radius);font-size:14px;color:var(--color-primary)}@media(max-width:768px){.sidebar{display:none}.main-content{margin-left:0;max-width:100%}.stats-grid{grid-template-columns:repeat(2,1fr)}.course-list-item{flex-direction:column}.course-list-item .course-image{width:100%;height:180px}.course-actions{flex-direction:row;margin-top:16px}.form-grid{grid-template-columns:1fr}.profile-header{flex-direction:column;text-align:center}}
