:root{--color-bg-primary:#090b0f;--color-bg-secondary:#11141a;--color-bg-tertiary:#171b23;--color-surface:#151922;--color-surface-hover:#1b202b;--color-surface-active:#202636;--color-border:#ffffff14;--color-border-strong:#ffffff24;--color-text-primary:#fff;--color-text-secondary:#a7adba;--color-text-muted:#707785;--color-primary:#7c8cff;--color-primary-hover:#8d70ff;--color-primary-soft:#7c5cff24;--color-accent-blue:#4f8cff;--color-accent-purple:#8b5cf6;--color-success:#34d399;--color-warning:#fbbf24;--color-danger:#f87171;--font-family-base:Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-size-xs:.75rem;--font-size-sm:.875rem;--font-size-md:1rem;--font-size-lg:1.125rem;--font-size-xl:1.25rem;--font-size-2xl:1.5rem;--font-size-3xl:1.875rem;--font-size-4xl:2.25rem;--font-weight-regular:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--line-height-tight:1.2;--line-height-normal:1.5;--line-height-relaxed:1.7;--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;--radius-sm:6px;--radius-md:10px;--radius-lg:14px;--radius-xl:18px;--radius-full:9999px;--shadow-sm:0 2px 8px #0000002e;--shadow-md:0 8px 24px #0000003d;--shadow-lg:0 16px 40px #00000052;--sidebar-width:250px;--topbar-height:72px;--content-max-width:1400px;--breakpoint-mobile:768px;--breakpoint-tablet:1024px;--breakpoint-desktop:1200px}*{box-sizing:border-box}html{background:var(--color-bg-primary);scroll-behavior:smooth;min-width:320px}body{background:var(--color-bg-primary);min-width:320px;min-height:100vh;color:var(--color-text-primary);font-family:var(--font-family-base);font-size:var(--font-size-md);line-height:var(--line-height-normal);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0}button,input,textarea,select{font:inherit}button{cursor:pointer;border:0}input,textarea,select{color:inherit}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}ul,ol{margin:0;padding:0;list-style:none}h1,h2,h3,h4,h5,h6,p{margin-top:0}::selection{background:var(--color-primary);color:#fff}.app-layout{min-height:100vh}.main-content{max-width:1450px;margin-left:230px;padding:110px 55px 70px}@media (width<=750px){.main-content{margin-left:0;padding:95px 17px 100px}}.topbar{height:var(--topbar-height);border-bottom:1px solid var(--color-border);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:100;background:#0b0d10f0;align-items:center;padding:0 28px;display:flex;position:fixed;top:0;left:0;right:0}.brand{width:230px;font-weight:var(--font-weight-bold);align-items:center;gap:11px;display:flex}.brand-mark{border-radius:var(--radius-md);background:var(--color-primary);color:#fff;width:34px;height:34px;font-weight:var(--font-weight-bold);place-items:center;display:grid}.header-search{flex:1;max-width:560px}.header-search input{background:var(--color-surface);border:1px solid var(--color-border);width:100%;color:var(--color-text-primary);border-radius:12px;outline:none;padding:12px 18px}.header-search input::placeholder{color:var(--color-text-muted)}.header-search input:focus{border-color:var(--color-primary)}.header-actions{align-items:center;gap:16px;margin-left:auto;display:flex}.icon-button{width:40px;height:40px;color:var(--color-text-secondary);border-radius:var(--radius-md);background:0 0;place-items:center;display:grid;position:relative}.icon-button:hover{background:var(--color-surface-hover);color:var(--color-text-primary)}.notification-dot{background:var(--color-danger);border-radius:50%;width:7px;height:7px;position:absolute;top:8px;right:8px}.profile-mini{background:0 0;padding:0}.avatar{background:var(--color-surface-tertiary,var(--color-bg-tertiary));border:1px solid var(--color-border);color:#fff;width:38px;height:38px;font-weight:var(--font-weight-bold);border-radius:50%;place-items:center;display:grid}.sidebar{top:var(--topbar-height);background:var(--color-surface);border-right:1px solid var(--color-border);z-index:50;width:230px;padding:25px 15px;position:fixed;bottom:0;left:0}.nav-section{flex-direction:column;gap:5px;display:flex}.nav-item{width:100%;color:var(--color-text-muted);border-radius:var(--radius-md);text-align:left;background:0 0;align-items:center;gap:13px;padding:12px 14px;transition:background .2s,color .2s;display:flex}.nav-item:hover{background:var(--color-surface-hover);color:var(--color-text-primary)}.nav-item.active{background:var(--color-surface-active);color:var(--color-text-primary)}.nav-item span:first-child{text-align:center;width:20px}.nav-divider{background:var(--color-border);height:1px;margin:20px 5px}.sidebar-bottom{border-top:1px solid var(--color-border);padding-top:15px;position:absolute;bottom:25px;left:15px;right:15px}.mobile-nav{display:none}@media (width<=750px){.topbar{height:64px;padding:0 16px}.brand{width:auto}.brand>span,.header-search,.sidebar{display:none}.mobile-nav{border:1px solid var(--color-border);border-radius:var(--radius-xl);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:200;background:#101319f5;height:65px;padding:5px;display:flex;position:fixed;bottom:10px;left:10px;right:10px}.mobile-nav-item{color:var(--color-text-muted);background:0 0;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:3px;display:flex}.mobile-nav-item.active{color:var(--color-primary)}.mobile-nav-item span{font-size:18px}.mobile-nav-item small{font-size:9px}}.page-header{max-width:800px;margin-bottom:45px}.eyebrow{color:var(--color-primary);letter-spacing:.13em;margin-bottom:10px;font-size:11px;font-weight:800;display:inline-block}.page-header h1{letter-spacing:-1.8px;margin:0;font-size:clamp(34px,4vw,58px);line-height:1.05}.page-header h1 span{color:var(--color-primary)}.page-header p{max-width:650px;color:var(--color-text-secondary);margin-top:18px;margin-bottom:0;font-size:16px;line-height:1.7}.primary-button{background:var(--color-primary);color:#fff;border-radius:var(--radius-md);font-weight:var(--font-weight-bold);padding:12px 20px;transition:background .2s,transform .2s}.primary-button:hover{background:var(--color-primary-hover);transform:translateY(-1px)}.primary-button:focus-visible,.text-button:focus-visible,.save-button:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.primary-button.full{width:100%}.text-button{color:var(--color-primary);font-weight:var(--font-weight-bold);background:0 0}.progress-banner{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);justify-content:space-between;align-items:center;margin-bottom:55px;padding:30px;display:flex}.small-label{letter-spacing:.12em;color:var(--color-text-muted);font-size:10px;font-weight:800}.progress-banner h2{margin:8px 0}.progress-banner p{color:var(--color-text-secondary);margin:0}.progress-circle{border:5px solid var(--color-primary);border-radius:50%;flex:none;place-items:center;width:82px;height:82px;font-size:16px;display:grid}.section-heading{justify-content:space-between;align-items:flex-end;margin-bottom:20px;display:flex}.section-heading h2{margin:0}.content-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;display:grid}.knowledge-card,.challenge-preview{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:23px}.knowledge-card{flex-direction:column;display:flex}.card-top{justify-content:space-between;align-items:center;display:flex}.category{border-radius:var(--radius-sm);background:var(--color-surface-active);color:var(--color-primary);letter-spacing:.08em;padding:6px 9px;font-size:10px;font-weight:800;display:inline-block}.save-button{color:var(--color-text-muted);background:0 0;font-size:20px}.save-button.saved{color:var(--color-primary)}.knowledge-card h3{margin:20px 0 12px;font-size:21px;line-height:1.25}.knowledge-card p,.challenge-preview p{color:var(--color-text-secondary);font-size:14px;line-height:1.6}.creator{align-items:center;gap:10px;margin-top:22px;display:flex}.creator div{flex-direction:column;display:flex}.creator strong{font-size:13px}.creator span{color:var(--color-text-muted);font-size:11px}.avatar.small{background:var(--color-bg-tertiary);border:1px solid var(--color-border);color:#fff;width:34px;height:34px;font-size:13px;font-weight:var(--font-weight-bold);border-radius:50%;flex:none;place-items:center;display:grid}.card-footer{color:var(--color-text-muted);flex-wrap:wrap;gap:10px;margin:20px 0;font-size:11px;display:flex}.challenge-preview{background:linear-gradient(145deg, var(--color-surface-hover), var(--color-surface));flex-direction:column;justify-content:center;display:flex}.challenge-preview h3{margin-bottom:0;font-size:25px;line-height:1.25}.challenge-stats{color:var(--color-text-muted);gap:15px;margin:10px 0 25px;font-size:12px;display:flex}@media (width<=1000px){.content-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.challenge-preview{grid-column:span 2}}@media (width<=750px){.page-header{margin-bottom:35px}.page-header h1{font-size:clamp(34px,9vw,46px)}.progress-banner{align-items:flex-start;gap:20px;margin-bottom:40px;padding:22px}.progress-banner h2{font-size:20px}.progress-circle{border-width:4px;width:70px;height:70px;font-size:14px}.section-heading{align-items:center}.section-heading h2{font-size:21px}.content-grid{grid-template-columns:1fr}.challenge-preview{grid-column:auto}}.explore-page{width:100%}.explore-page .page-header{margin-bottom:42px}.explore-page .page-header h1{max-width:760px}.explore-page .page-header p{max-width:680px}.search-large{gap:10px;width:100%;max-width:850px;margin-bottom:50px;display:flex}.search-large input{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);min-width:0;color:var(--color-text-primary);outline:none;flex:1;padding:15px 18px}.search-large input::placeholder{color:var(--color-text-muted)}.search-large input:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-soft)}.search-large .primary-button{flex-shrink:0}.explore-page .section-heading{margin-bottom:22px}.categories-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;display:grid}.category-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);text-align:left;min-height:120px;color:var(--color-text-primary);flex-direction:column;justify-content:flex-start;align-items:flex-start;padding:18px;transition:border-color .2s,background .2s,transform .2s;display:flex}.category-card:hover{background:var(--color-surface-hover);border-color:var(--color-primary);transform:translateY(-2px)}.category-card:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.category-card strong{font-size:var(--font-size-md);font-weight:var(--font-weight-semibold);line-height:var(--line-height-tight);display:block}.category-card span{color:var(--color-text-muted);font-size:var(--font-size-xs);margin-top:10px;display:block}.explore-selection{color:var(--color-text-secondary);margin-top:-32px;margin-bottom:32px}.explore-selection strong{color:var(--color-primary)}@media (width<=1100px){.categories-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (width<=750px){.explore-page .page-header{margin-bottom:32px}.search-large{flex-direction:column;max-width:none;margin-bottom:38px}.search-large input,.search-large .primary-button{width:100%}.categories-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.category-card{min-height:110px;padding:15px}}@media (width<=480px){.categories-grid{grid-template-columns:1fr}}