:root{
  --bg:#0b1020;
  --panel:#121735;
  --text:#e7e9f4;
  --muted:#aab0d4;
  --primary:#6c8cff;
  --primary-700:#5876e6;
  --accent:#5de4c7;
  --danger:#ff6b6b;
  --success:#4ade80;
  --warning:#fbbf24;
  --border:rgba(255,255,255,.08);
  --shadow:0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);
  background:radial-gradient(1200px 800px at 80% -10%, rgba(92,131,255,.15), transparent 60%),
             radial-gradient(900px 700px at -10% 30%, rgba(93,228,199,.12), transparent 60%),
             var(--bg);
}

.app{display:flex;flex-direction:column;height:100%;max-width:1200px;margin:0 auto;padding:16px;gap:12px}

.app__header{
  display:flex;align-items:center;justify-content:space-between;
  background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:12px 14px;box-shadow:var(--shadow)
}

.brand{display:flex;align-items:center;gap:12px}
.brand__logo{width:40px;height:40px;display:grid;place-items:center;font-size:24px;background:#0f1430;border:1px solid var(--border);border-radius:10px}
.brand__title{font-size:18px;margin:0;font-weight:700}
.brand__subtitle{margin:0;color:var(--muted);font-size:12px}

.main-nav{display:flex;gap:8px}
.nav-link{color:var(--muted);text-decoration:none;padding:8px 12px;border-radius:8px;transition:.2s ease;font-size:14px}
.nav-link:hover{color:var(--text);background:rgba(255,255,255,.05)}
.nav-link.active{color:var(--primary);background:rgba(108,140,255,.1)}

.toolbar{display:flex;align-items:center;gap:10px}
.field{display:flex;flex-direction:column;gap:6px}
.field__label{font-size:12px;color:var(--muted)}
.field__control{appearance:none;background:#0f1430;border:1px solid var(--border);color:var(--text);padding:10px 12px;border-radius:10px}

.btn{cursor:pointer;appearance:none;border:1px solid var(--border);border-radius:10px;padding:10px 14px;background:#0f1430;color:var(--text);transition:.2s ease;font-size:14px;font-weight:500}
.btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.2)}
.btn:active{transform:translateY(0)}
.btn--primary{background:linear-gradient(180deg, var(--primary), var(--primary-700));border-color:transparent}
.btn--outline{background:transparent;border-color:var(--primary);color:var(--primary)}
.btn--success{background:linear-gradient(180deg, var(--success), #22c55e);border-color:transparent}
.btn--soft{background:#0f1430}

/* Hero Section */
.hero-section{display:flex;align-items:center;gap:40px;padding:40px 0;min-height:400px}
.hero-content{flex:1}
.hero-title{font-size:3rem;font-weight:700;margin:0 0 16px 0;background:linear-gradient(135deg, var(--primary), var(--accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hero-subtitle{font-size:1.2rem;color:var(--muted);margin:0 0 32px 0;line-height:1.6}
.hero-stats{display:flex;gap:24px;margin-bottom:32px}
.stat{text-align:center}
.stat-number{display:block;font-size:2rem;font-weight:700;color:var(--primary)}
.stat-label{color:var(--muted);font-size:14px}
.hero-actions{display:flex;gap:16px}
.hero-visual{flex:1;position:relative;height:400px}
.floating-card{position:absolute;background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:20px;box-shadow:var(--shadow);max-width:200px}
.floating-card.card-1{top:20px;left:20px;animation:float 6s ease-in-out infinite}
.floating-card.card-2{top:120px;right:40px;animation:float 6s ease-in-out infinite 2s}
.floating-card.card-3{bottom:40px;left:60px;animation:float 6s ease-in-out infinite 4s}
.card-icon{font-size:2rem;margin-bottom:12px}
.floating-card h3{margin:0 0 8px 0;font-size:16px}
.floating-card p{margin:0;color:var(--muted);font-size:14px;line-height:1.4}

@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* Features Section */
.features-section{padding:60px 0}
.section-title{text-align:center;font-size:2.5rem;margin:0 0 40px 0;font-weight:700}
.features-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));gap:24px}
.feature-card{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:24px;text-align:center;transition:.3s ease}
.feature-card:hover{transform:translateY(-4px);box-shadow:0 20px 40px rgba(0,0,0,.3)}
.feature-icon{font-size:3rem;margin-bottom:16px}
.feature-card h3{margin:0 0 12px 0;font-size:18px;font-weight:600}
.feature-card p{margin:0;color:var(--muted);line-height:1.5}

/* AI Chat Section */
.ai-chat-section{padding:40px 0}
.chat-container{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:24px;box-shadow:var(--shadow)}
.chat-header{text-align:center;margin-bottom:24px}
.chat-header h3{margin:0 0 8px 0;font-size:24px}
.chat-header p{margin:0;color:var(--muted)}
.chat-interface{max-height:400px;overflow:hidden}
.messages{max-height:300px;overflow-y:auto;padding:16px;background:#0f1430;border-radius:12px;margin-bottom:16px}
.composer{display:flex;gap:12px;align-items:center}
.composer__input{flex:1;background:#0f1430;border:1px solid var(--border);border-radius:10px;padding:12px 16px;color:var(--text);font-size:14px}

/* Message Styles */
.message{display:flex;gap:12px;margin-bottom:16px}
.message__avatar{width:32px;height:32px;border-radius:50%;background:#0f1430;border:1px solid var(--border);display:grid;place-items:center;font-size:14px}
.message__bubble{max-width:80%;background:#0f1430;border:1px solid var(--border);border-radius:12px;padding:12px 16px}
.message--user .message__bubble{background:linear-gradient(135deg, rgba(108,140,255,.2), rgba(108,140,255,.1));border-color:rgba(108,140,255,.3)}
.message--bot .message__bubble{background:#0f1430}

/* Footer */
.app__footer{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:24px;margin-top:auto}
.footer-content{display:grid;grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));gap:24px;margin-bottom:24px}
.footer-section h4{margin:0 0 12px 0;font-size:16px;font-weight:600}
.footer-section ul{list-style:none;padding:0;margin:0}
.footer-section li{margin-bottom:8px}
.footer-section a{color:var(--muted);text-decoration:none;transition:.2s ease}
.footer-section a:hover{color:var(--text)}
.footer-bottom{text-align:center;padding-top:16px;border-top:1px solid var(--border);color:var(--muted);font-size:12px}

/* Courses Page */
.courses-main{padding:20px 0}
.courses-header{text-align:center;margin-bottom:40px}
.courses-header h1{font-size:2.5rem;margin:0 0 16px 0;font-weight:700}
.courses-header p{font-size:1.1rem;color:var(--muted);margin:0}
.courses-filters{display:flex;flex-direction:column;gap:16px;margin-bottom:32px}
.search-box{display:flex;gap:12px;max-width:400px;margin:0 auto}
.search-input{flex:1;background:#0f1430;border:1px solid var(--border);border-radius:10px;padding:12px 16px;color:var(--text);font-size:14px}
.search-btn{background:var(--primary);border:none;border-radius:10px;padding:12px 16px;color:white;cursor:pointer;font-size:16px}
.filter-controls{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.filter-select{background:#0f1430;border:1px solid var(--border);border-radius:8px;padding:8px 12px;color:var(--text);font-size:14px}
.courses-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(350px, 1fr));gap:24px}
.course-card{background:var(--panel);border:1px solid var(--border);border-radius:16px;overflow:hidden;transition:.3s ease}
.course-card:hover{transform:translateY(-4px);box-shadow:0 20px 40px rgba(0,0,0,.3)}
.course-image{height:120px;background:linear-gradient(135deg, var(--primary), var(--accent));position:relative;padding:16px}
.course-category{position:absolute;top:12px;left:12px;background:rgba(0,0,0,.3);color:white;padding:4px 8px;border-radius:6px;font-size:12px;font-weight:500}
.course-difficulty{position:absolute;top:12px;right:12px;background:rgba(0,0,0,.3);color:white;padding:4px 8px;border-radius:6px;font-size:12px;font-weight:500}
.course-difficulty.beginner{background:rgba(34,197,94,.8)}
.course-difficulty.intermediate{background:rgba(251,191,36,.8)}
.course-difficulty.advanced{background:rgba(239,68,68,.8)}
.course-content{padding:20px}
.course-title{margin:0 0 12px 0;font-size:18px;font-weight:600;line-height:1.3}
.course-description{color:var(--muted);margin:0 0 16px 0;line-height:1.5;font-size:14px}
.course-meta{display:flex;gap:16px;margin-bottom:16px;font-size:12px;color:var(--muted)}
.course-rating{display:flex;align-items:center;gap:8px;margin-bottom:20px}
.stars{color:var(--warning)}
.rating-text{font-size:12px;color:var(--muted)}
.course-footer{display:flex;justify-content:space-between;align-items:center}
.course-price{font-size:18px;font-weight:600}
.course-price .free{color:var(--success)}
.course-enroll-btn{font-size:12px;padding:8px 16px}

/* Coding Challenges Page */
.coding-main{padding:20px 0}
.coding-header{text-align:center;margin-bottom:40px}
.coding-header h1{font-size:2.5rem;margin:0 0 16px 0;font-weight:700}
.coding-header p{font-size:1.1rem;color:var(--muted);margin:0}
.coding-container{display:grid;grid-template-columns:300px 1fr;gap:24px;height:600px}
.challenges-sidebar{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:20px;overflow-y:auto}
.challenges-filters{margin-bottom:20px}
.challenges-filters .filter-select{width:100%;margin-bottom:12px}
.challenges-list{display:flex;flex-direction:column;gap:12px}
.challenge-item{background:#0f1430;border:1px solid var(--border);border-radius:12px;padding:16px;cursor:pointer;transition:.2s ease}
.challenge-item:hover{border-color:var(--primary)}
.challenge-item.active{border-color:var(--primary);background:rgba(108,140,255,.1)}
.challenge-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.challenge-header h4{margin:0;font-size:14px;font-weight:600}
.challenge-difficulty{font-size:10px;padding:2px 6px;border-radius:4px;font-weight:500}
.challenge-difficulty.easy{background:rgba(34,197,94,.2);color:var(--success)}
.challenge-difficulty.medium{background:rgba(251,191,36,.2);color:var(--warning)}
.challenge-difficulty.hard{background:rgba(239,68,68,.2);color:var(--danger)}
.challenge-description{font-size:12px;color:var(--muted);margin:0 0 8px 0;line-height:1.4}
.challenge-category{font-size:10px;color:var(--primary);font-weight:500}
.coding-workspace{display:flex;flex-direction:column;gap:20px}
.problem-description{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:20px}
.problem-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.problem-header h2{margin:0;font-size:20px;font-weight:600}
.problem-meta{display:flex;gap:8px}
.difficulty-badge,.category-badge{background:rgba(108,140,255,.2);color:var(--primary);padding:4px 8px;border-radius:6px;font-size:12px;font-weight:500}
.problem-content{margin-bottom:20px;line-height:1.6}
.problem-examples{margin-top:20px}
.example{margin-bottom:16px}
.example h4{margin:0 0 8px 0;font-size:14px;font-weight:600}
.example-io{background:#0f1430;border:1px solid var(--border);border-radius:8px;padding:12px;font-size:12px}
.example-io div{margin-bottom:4px}
.example-io div:last-child{margin-bottom:0}
.code-editor-section{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:20px}
.editor-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.language-selector{display:flex;align-items:center;gap:8px}
.language-selector label{font-size:14px;color:var(--muted)}
.language-select{background:#0f1430;border:1px solid var(--border);border-radius:6px;padding:6px 8px;color:var(--text);font-size:12px}
.editor-actions{display:flex;gap:8px}
.code-editor{background:#0f1430;border:1px solid var(--border);border-radius:12px;overflow:hidden}
.code-textarea{width:100%;height:200px;background:transparent;border:none;padding:16px;color:var(--text);font-family:'Monaco','Menlo','Ubuntu Mono',monospace;font-size:14px;line-height:1.5;resize:none}
.code-textarea:focus{outline:none}
.test-results{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:20px}
.results-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.results-header h3{margin:0;font-size:18px;font-weight:600}
.score-display{text-align:center}
.score-percentage{font-size:2rem;font-weight:700;color:var(--primary)}
.score-details{color:var(--muted);font-size:14px}
.test-cases{display:flex;flex-direction:column;gap:12px}
.test-case{background:#0f1430;border:1px solid var(--border);border-radius:8px;padding:12px}
.test-case.passed{border-color:var(--success)}
.test-case.failed{border-color:var(--danger)}
.test-case.error{border-color:var(--warning)}
.test-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.test-name{font-weight:500;font-size:14px}
.test-status{font-size:12px;padding:2px 6px;border-radius:4px;font-weight:500}
.test-status.passed{background:rgba(34,197,94,.2);color:var(--success)}
.test-status.failed{background:rgba(239,68,68,.2);color:var(--danger)}
.test-status.error{background:rgba(251,191,36,.2);color:var(--warning)}
.test-details{font-size:12px;color:var(--muted)}
.test-details div{margin-bottom:4px}
.test-error{color:var(--danger);font-size:12px}

/* Resume Analyzer Page */
.resume-main{padding:20px 0}
.resume-header{text-align:center;margin-bottom:40px}
.resume-header h1{font-size:2.5rem;margin:0 0 16px 0;font-weight:700}
.resume-header p{font-size:1.1rem;color:var(--muted);margin:0}
.resume-container{max-width:800px;margin:0 auto}
.resume-input-section{margin-bottom:40px}
.input-header{text-align:center;margin-bottom:24px}
.input-header h2{margin:0 0 8px 0;font-size:24px;font-weight:600}
.input-header p{color:var(--muted);margin:0}
.resume-textarea-container{margin-bottom:24px}
.resume-textarea{width:100%;background:#0f1430;border:1px solid var(--border);border-radius:12px;padding:16px;color:var(--text);font-size:14px;line-height:1.6;resize:vertical;font-family:inherit}
.textarea-actions{display:flex;gap:12px;justify-content:center}
.resume-tips{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:20px}
.resume-tips h3{margin:0 0 16px 0;font-size:16px;font-weight:600}
.resume-tips ul{margin:0;padding-left:20px;color:var(--muted)}
.resume-tips li{margin-bottom:8px;line-height:1.5}
.resume-analysis-section{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:24px}
.analysis-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:32px}
.analysis-header h2{margin:0;font-size:24px;font-weight:600}
.overall-score{text-align:center}
.score-circle{width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg, var(--primary), var(--accent));display:flex;flex-direction:column;align-items:center;justify-content:center;color:white}
.score-number{font-size:24px;font-weight:700;line-height:1}
.score-label{font-size:10px;opacity:0.9}
.analysis-content{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-bottom:32px}
.analysis-sections h3,.analysis-details h3{margin:0 0 16px 0;font-size:18px;font-weight:600}
.sections-grid{display:flex;flex-direction:column;gap:16px}
.section-score{display:flex;align-items:center;gap:12px}
.section-name{min-width:120px;font-size:14px;font-weight:500}
.section-score-bar{flex:1;height:8px;background:#0f1430;border-radius:4px;overflow:hidden}
.score-fill{height:100%;background:linear-gradient(90deg, var(--primary), var(--accent));transition:width 0.3s ease}
.section-score-number{min-width:40px;text-align:right;font-size:14px;font-weight:600}
.analysis-details>div{margin-bottom:24px}
.analysis-details ul{margin:0;padding-left:20px;color:var(--muted)}
.analysis-details li{margin-bottom:8px;line-height:1.5}
.keywords-tags{display:flex;flex-wrap:wrap;gap:8px}
.keyword-tag{background:rgba(108,140,255,.2);color:var(--primary);padding:4px 8px;border-radius:6px;font-size:12px;font-weight:500}
.analysis-actions{display:flex;gap:16px;justify-content:center}

/* Interview Prep Page */
.interview-main{padding:20px 0}
.interview-header{text-align:center;margin-bottom:40px}
.interview-header h1{font-size:2.5rem;margin:0 0 16px 0;font-weight:700}
.interview-header p{font-size:1.1rem;color:var(--muted);margin:0}
.interview-container{display:grid;grid-template-columns:300px 1fr;gap:24px;min-height:600px}
.interview-sidebar{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:20px}
.categories-section,.difficulty-section{margin-bottom:24px}
.categories-section h3,.difficulty-section h3{margin:0 0 16px 0;font-size:16px;font-weight:600}
.categories-list{display:flex;flex-direction:column;gap:8px}
.category-item{background:#0f1430;border:1px solid var(--border);border-radius:8px;padding:12px;cursor:pointer;transition:.2s ease}
.category-item:hover{border-color:var(--primary)}
.category-item.active{border-color:var(--primary);background:rgba(108,140,255,.1)}
.category-name{font-weight:500;margin-bottom:4px}
.category-count{font-size:12px;color:var(--muted)}
.difficulty-filters{display:flex;flex-direction:column;gap:8px}
.difficulty-option{display:flex;align-items:center;gap:8px;cursor:pointer}
.difficulty-option input[type="radio"]{accent-color:var(--primary)}
.difficulty-label{font-size:14px}
.practice-actions{display:flex;flex-direction:column;gap:12px}
.interview-workspace{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:24px}
.welcome-message{text-align:center;padding:40px 20px}
.welcome-icon{font-size:4rem;margin-bottom:16px}
.welcome-message h2{margin:0 0 16px 0;font-size:24px;font-weight:600}
.welcome-message p{color:var(--muted);margin:0 0 32px 0;line-height:1.6}
.quick-stats{display:flex;justify-content:center;gap:32px}
.stat-item{text-align:center}
.stat-number{display:block;font-size:1.5rem;font-weight:700;color:var(--primary)}
.stat-label{color:var(--muted);font-size:12px}
.practice-session{display:none}
.session-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid var(--border)}
.session-info h3{margin:0 0 8px 0;font-size:20px;font-weight:600}
.session-meta{display:flex;gap:16px;font-size:14px;color:var(--muted)}
.session-controls{display:flex;gap:8px}
.question-content{margin-bottom:32px}
.question-text{margin-bottom:24px;line-height:1.6;font-size:16px}
.question-hint,.question-answer{background:#0f1430;border:1px solid var(--border);border-radius:8px;padding:16px;margin-bottom:16px}
.question-hint h4,.question-answer h4{margin:0 0 12px 0;font-size:16px;font-weight:600}
.related-topics{margin-top:16px}
.related-topics h5{margin:0 0 8px 0;font-size:14px;font-weight:600}
.topic-tags{display:flex;flex-wrap:wrap;gap:6px}
.topic-tag{background:rgba(108,140,255,.2);color:var(--primary);padding:3px 8px;border-radius:4px;font-size:11px}
.session-progress{margin-top:32px}
.progress-bar{height:8px;background:#0f1430;border-radius:4px;overflow:hidden;margin-bottom:8px}
.progress-fill{height:100%;background:linear-gradient(90deg, var(--primary), var(--accent));transition:width 0.3s ease;width:0%}
.progress-text{text-align:center;font-size:14px;color:var(--muted)}

/* Profile Page */
.profile-main{padding:20px 0}
.profile-header{display:flex;align-items:center;gap:24px;margin-bottom:40px;text-align:center}
.profile-avatar{flex-shrink:0}
.avatar-circle{width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg, var(--primary), var(--accent));display:grid;place-items:center;font-size:2rem;color:white}
.profile-info h1{margin:0 0 8px 0;font-size:2.5rem;font-weight:700}
.profile-info p{color:var(--muted);margin:0;font-size:1.1rem}
.profile-stats{display:grid;grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));gap:20px;margin-bottom:40px}
.stat-card{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:20px;display:flex;align-items:center;gap:16px}
.stat-icon{font-size:2rem}
.stat-content{flex:1}
.stat-number{display:block;font-size:1.5rem;font-weight:700;color:var(--primary)}
.stat-label{color:var(--muted);font-size:14px}
.profile-content{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.level-progress-section,.achievements-section,.learning-activity,.leaderboard-section{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:24px}
.level-progress-section h2,.achievements-section h2,.learning-activity h2,.leaderboard-section h2{margin:0 0 20px 0;font-size:20px;font-weight:600}
.level-progress{margin-bottom:24px}
.level-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.level-text{font-weight:600}
.exp-text{color:var(--muted);font-size:14px}
.progress-bar{height:12px;background:#0f1430;border-radius:6px;overflow:hidden;margin-bottom:8px}
.progress-fill{height:100%;background:linear-gradient(90deg, var(--primary), var(--accent));transition:width 0.3s ease;width:0%}
.progress-percentage{text-align:center;font-size:14px;color:var(--muted)}
.achievements-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));gap:16px}
.achievement-card{background:#0f1430;border:1px solid var(--border);border-radius:12px;padding:16px;display:flex;align-items:center;gap:16px;transition:.2s ease}
.achievement-card:hover{transform:translateY(-2px)}
.achievement-card.locked{opacity:0.6}
.achievement-icon{font-size:2rem}
.achievement-content{flex:1}
.achievement-name{margin:0 0 4px 0;font-size:16px;font-weight:600}
.achievement-description{margin:0 0 8px 0;color:var(--muted);font-size:12px;line-height:1.4}
.achievement-points{color:var(--primary);font-size:12px;font-weight:500}
.achievement-status{font-size:1.2rem}
.activity-timeline{display:flex;flex-direction:column;gap:16px}
.activity-item{display:flex;gap:16px;padding:16px;background:#0f1430;border-radius:8px}
.activity-icon{font-size:1.2rem}
.activity-content{flex:1}
.activity-title{margin:0 0 4px 0;font-size:14px;font-weight:600}
.activity-description{margin:0 0 8px 0;color:var(--muted);font-size:12px;line-height:1.4}
.activity-time{color:var(--muted);font-size:11px}
.leaderboard{display:flex;flex-direction:column;gap:12px}
.leaderboard-entry{display:flex;align-items:center;gap:16px;padding:16px;background:#0f1430;border-radius:8px;transition:.2s ease}
.leaderboard-entry:hover{transform:translateX(4px)}
.leaderboard-entry.top-3{background:linear-gradient(135deg, rgba(108,140,255,.1), rgba(93,228,199,.1));border:1px solid var(--primary)}
.rank{width:32px;height:32px;background:var(--primary);color:white;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:14px}
.user-info{flex:1}
.username{font-weight:600;margin-bottom:4px}
.user-stats{font-size:12px;color:var(--muted)}
.points{font-weight:600;color:var(--primary)}

/* Loading and Error States */
.loading-spinner{width:40px;height:40px;border:4px solid var(--border);border-top:4px solid var(--primary);border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 16px}
@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
.courses-loading,.no-courses{text-align:center;padding:40px;color:var(--muted)}
.no-courses-icon{font-size:4rem;margin-bottom:16px}
.error{color:var(--danger);text-align:center;padding:20px}

/* Responsive Design */
@media (max-width: 768px){
  .app{padding:10px}
  .app__header{flex-direction:column;gap:16px;text-align:center}
  .main-nav{flex-wrap:wrap;justify-content:center}
  .hero-section{flex-direction:column;text-align:center;gap:24px}
  .hero-title{font-size:2rem}
  .hero-stats{justify-content:center}
  .hero-actions{justify-content:center}
  .features-grid{grid-template-columns:1fr}
  .courses-grid{grid-template-columns:1fr}
  .coding-container{grid-template-columns:1fr}
  .challenges-sidebar{order:2}
  .profile-content{grid-template-columns:1fr}
  .profile-stats{grid-template-columns:repeat(2, 1fr)}
  .achievements-grid{grid-template-columns:1fr}
  .analysis-content{grid-template-columns:1fr}
  .footer-content{grid-template-columns:1fr;text-align:center}
}

@media (max-width: 480px){
  .hero-title{font-size:1.5rem}
  .section-title{font-size:2rem}
  .courses-header h1,.coding-header h1,.resume-header h1,.interview-header h1,.profile-header h1{font-size:2rem}
  .profile-stats{grid-template-columns:1fr}
  .hero-actions{flex-direction:column;align-items:center}
  .filter-controls{flex-direction:column;align-items:center}
  .search-box{flex-direction:column}
  .search-btn{width:100%}
}

/* Light Theme */
[data-theme="light"]{
  --bg:#f5f7ff;
  --panel:#ffffff;
  --text:#0e1330;
  --muted:#5b6185;
  --primary:#4f6bed;
  --primary-700:#405ad6;
  --border:rgba(0,0,0,.08);
  --shadow:0 10px 30px rgba(0,0,0,.1);
}