@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Space+Mono:wght@400;700&family=Aleo:wght@300;400;700&display=swap");:root{--color-bg-primary:#fafafa;--color-bg-secondary:#ffffff;--color-bg-tertiary:#f5f5f5;--color-text-primary:#1a1a1a;--color-text-secondary:#666666;--color-text-tertiary:#999999;--color-accent-purple:#8b5cf6;--color-accent-blue:#3b82f6;--color-accent-teal:#14b8a6;--color-border:#e5e5e5;--color-border-light:#f0f0f0;--color-success:#10b981;--color-warning:#f59e0b;--color-error:#ef4444;--space-unit:0.23rem;--space-xs:calc(var(--space-unit) * 2);--space-sm:calc(var(--space-unit) * 4);--space-md:calc(var(--space-unit) * 6);--space-lg:calc(var(--space-unit) * 8);--space-xl:calc(var(--space-unit) * 12);--space-2xl:calc(var(--space-unit) * 16);--radius-sm:0.5rem;--radius-md:0.9rem;--radius-lg:1.2rem;--radius-full:9999px;--shadow-sm:0 1px 2px 0 rgba(0,0,0,0.05);--shadow-md:0 4px 6px -1px rgba(0,0,0,0.08),0 2px 4px -1px rgba(0,0,0,0.04);--shadow-lg:0 10px 15px -3px rgba(0,0,0,0.08),0 4px 6px -2px rgba(0,0,0,0.04);--font-sans:"Space Grotesk",system-ui,-apple-system,sans-serif;--font-mono:"Space Mono","Courier New",monospace;--font-serif:"Aleo",Georgia,serif}@media (prefers-color-scheme:dark){:root{--color-bg-primary:#0f172a;--color-bg-secondary:#1e293b;--color-bg-tertiary:#334155;--color-text-primary:#f1f5f9;--color-text-secondary:#cbd5e1;--color-text-tertiary:#94a3b8;--color-border:#334155;--color-border-light:#475569}}*{box-sizing:border-box;margin:0;padding:0}html{font-size:16px}body{font-family:var(--font-sans);background-color:var(--color-bg-primary);color:var(--color-text-primary);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}h1,h2,h3,h4,h5,h6{font-weight:600;line-height:1.3;margin-bottom:var(--space-sm)}h1{font-size:2rem}h2{font-size:1.5rem}h3{font-size:1.25rem}h4{font-size:1.125rem}p{margin-bottom:var(--space-sm)}a{color:var(--color-accent-purple);text-decoration:none;transition:color .2s ease}a:hover{color:var(--color-accent-blue)}button{font-family:var(--font-sans);font-weight:500;border:none;cursor:pointer;transition:all .2s ease}button:hover{transform:translateY(-1px)}button:active{transform:translateY(0)}input,select,textarea{font-family:var(--font-sans);font-size:1rem;color:var(--color-text-primary);background-color:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-sm);transition:border-color .2s ease,box-shadow .2s ease}input:focus,select:focus,textarea:focus{outline:none;border-color:var(--color-accent-purple);box-shadow:0 0 0 3px rgba(139,92,246,.1)}code,pre{font-family:var(--font-mono)}.card{background-color:var(--color-bg-secondary);border-radius:var(--radius-md);box-shadow:var(--shadow-md);padding:var(--space-lg)}.badge{display:inline-block;padding:var(--space-xs) var(--space-md);border-radius:var(--radius-full);font-size:.875rem;font-weight:500}.hover-lift{transition:transform .2s,box-shadow .2s}.hover-lift:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.1)}.nav-link:hover{background-color:var(--color-bg-tertiary)}.lesson-card{padding:var(--space-lg);background-color:var(--color-bg-secondary);border-radius:var(--radius-md);border:1px solid var(--color-border);transition:all .2s}.lesson-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.1);border-color:var(--color-accent-purple)}.hint-box{padding:var(--space-lg);background-color:var(--color-bg-secondary);border-left:4px solid var(--color-accent-blue);border-radius:var(--radius-md);margin:var(--space-md) 0}.submission-form{display:flex;flex-direction:column;gap:var(--space-lg)}@keyframes fadeIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.progress-badge{animation:fadeIn .3s ease-out}.form-input:focus{outline:none;border-color:var(--color-accent-purple);box-shadow:0 0 0 3px rgba(147,51,234,.1)}.btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 8px rgba(0,0,0,.15)}.btn:active:not(:disabled){transform:translateY(0)}.btn:disabled{opacity:.6;cursor:not-allowed}.screenshot-preview{max-width:100%}.screenshot-preview,.stat-card{border-radius:var(--radius-md);border:1px solid var(--color-border)}.stat-card{padding:var(--space-lg);background-color:var(--color-bg-secondary)}.form-group,.stat-card{display:flex;flex-direction:column}.form-group{gap:var(--space-sm);margin-bottom:var(--space-lg)}.form-label{font-weight:500}.form-input,.form-label,.form-textarea{color:var(--color-text-primary);font-size:.9375rem}.form-input,.form-textarea{width:100%;padding:var(--space-sm) var(--space-md);border-radius:var(--radius-sm);border:1px solid var(--color-border);background-color:var(--color-bg-secondary);box-sizing:border-box}.form-actions{display:flex;gap:var(--space-md);padding-top:var(--space-lg)}.btn-primary{background:linear-gradient(135deg,var(--color-accent-purple) 0,var(--color-accent-blue) 100%);color:white;box-shadow:var(--shadow-sm);padding:var(--space-md) var(--space-lg);border-radius:var(--radius-md);font-size:1rem;font-weight:600}.btn-primary:hover:not(:disabled){box-shadow:var(--shadow-md)}.header-mascot{animation:mascot-float 3s ease-in-out infinite;transition:transform .3s ease}.header-mascot:hover{animation:mascot-wiggle .5s ease-in-out}@keyframes mascot-float{0%,to{transform:translateY(0)}50%{transform:translateY(-2px)}}@keyframes mascot-wiggle{0%{transform:rotate(0deg)}20%{transform:rotate(-12deg)}40%{transform:rotate(10deg)}60%{transform:rotate(-8deg)}80%{transform:rotate(6deg)}to{transform:rotate(0deg)}}.dashboard-shell{display:flex;min-height:100vh;background-color:var(--color-bg-primary)}.dashboard-main{flex:1 1;padding:var(--space-2xl);overflow-y:auto;min-width:0}.mobile-hamburger{display:none!important}.mobile-overlay{display:none}@media (max-width:768px){.dashboard-layout{flex-direction:column}.sidebar{width:100%;border-right:none;border-bottom:1px solid var(--color-border)}.lesson-workspace{grid-template-columns:1fr}.mobile-hamburger{display:flex!important}.mobile-overlay{display:block!important}.dashboard-sidebar{position:fixed!important;top:0;left:0;bottom:0;z-index:1000;transform:translateX(-100%);transition:transform .25s ease;box-shadow:none;width:280px!important}.dashboard-sidebar.sidebar-open{transform:translateX(0);box-shadow:4px 0 24px rgba(0,0,0,.15)}.dashboard-main{padding:var(--space-lg);padding-top:calc(var(--space-lg) + 56px)}.auth-name-row{grid-template-columns:1fr!important}}