:root{--primary-color:#667eea;--secondary-color:#764ba2;--success-color:#48bb78;--warning-color:#ed8936;--danger-color:#f56565;--bg-light:#f7fafc;--bg-dark:#1a202c;--text-light:#2d3748;--text-dark:#e2e8f0}*{box-sizing:border-box;margin:0;padding:0}.algo-learning-platform{background:var(--bg-light);min-height:100vh;color:var(--text-light);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;transition:background .3s,color .3s}[data-theme=dark] .algo-learning-platform{background:var(--bg-dark);color:var(--text-dark)}.platform-header{background:linear-gradient(135deg,var(--primary-color)0%,var(--secondary-color)100%);color:#fff;z-index:100;padding:24px 40px;position:sticky;top:0;box-shadow:0 4px 12px #0000001a}.header-content{justify-content:space-between;align-items:center;max-width:1400px;margin:0 auto;display:flex}.logo-section h1{margin-bottom:4px;font-size:2em;font-weight:700}.logo-section p{opacity:.95;font-size:.95em}.theme-toggle{color:#fff;cursor:pointer;background:#fff3;border:2px solid #ffffff4d;border-radius:50%;justify-content:center;align-items:center;width:50px;height:50px;font-size:1.5em;transition:all .3s;display:flex}.theme-toggle:hover{background:#ffffff4d;transform:rotate(180deg)scale(1.1)}.platform-main{max-width:1400px;min-height:calc(100vh - 200px);margin:0 auto;padding:40px}.search-filter-bar{flex-wrap:wrap;align-items:center;gap:20px;margin-bottom:32px;display:flex}.search-input{background:#fff;border:2px solid #e2e8f0;border-radius:10px;flex:1;min-width:300px;padding:14px 20px;font-size:1em;transition:all .3s}.search-input:focus{border-color:var(--primary-color);outline:none;box-shadow:0 0 0 3px #667eea1a}[data-theme=dark] .search-input{color:var(--text-dark);background:#2d3748;border-color:#4a5568}.difficulty-filters{gap:12px;display:flex}.filter-btn{color:var(--text-light);cursor:pointer;background:#fff;border:2px solid #e2e8f0;border-radius:8px;padding:10px 20px;font-size:.95em;font-weight:600;transition:all .2s}.filter-btn:hover{border-color:var(--primary-color);color:var(--primary-color)}.filter-btn.active{background:var(--primary-color);color:#fff;border-color:var(--primary-color)}[data-theme=dark] .filter-btn{color:var(--text-dark);background:#2d3748;border-color:#4a5568}[data-theme=dark] .filter-btn.active{background:var(--primary-color);border-color:var(--primary-color)}.problems-grid{grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:24px;display:grid}.no-results{text-align:center;color:#718096;padding:60px 20px;font-size:1.2em}.problem-detail-section{animation:.3s fadeIn}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.back-button{color:var(--text-light);cursor:pointer;background:#fff;border:2px solid #e2e8f0;border-radius:8px;margin-bottom:24px;padding:12px 24px;font-size:1em;font-weight:600;transition:all .2s}.back-button:hover{background:var(--primary-color);color:#fff;border-color:var(--primary-color);transform:translate(-4px)}[data-theme=dark] .back-button{color:var(--text-dark);background:#2d3748;border-color:#4a5568}.problem-header-detail{margin-bottom:32px}.problem-header-detail h1{color:var(--text-light);margin-bottom:16px;font-size:2.5em}[data-theme=dark] .problem-header-detail h1{color:var(--text-dark)}.problem-meta-detail{align-items:center;gap:12px;display:flex}.difficulty-badge{color:#fff;text-transform:uppercase;letter-spacing:.5px;border-radius:20px;padding:8px 20px;font-size:.85em;font-weight:600}.difficulty-badge.easy{background:var(--success-color)}.difficulty-badge.medium{background:var(--warning-color)}.difficulty-badge.hard{background:var(--danger-color)}.category-badge{color:var(--text-light);background:#edf2f7;border-radius:20px;padding:8px 20px;font-size:.85em;font-weight:600}[data-theme=dark] .category-badge{color:var(--text-dark);background:#4a5568}.tabs-container{border-bottom:2px solid #e2e8f0;gap:8px;margin:32px 0;display:flex;overflow-x:auto}[data-theme=dark] .tabs-container{border-bottom-color:#4a5568}.tab{color:#718096;cursor:pointer;white-space:nowrap;background:0 0;border:none;border-bottom:3px solid #0000;padding:14px 24px;font-size:1em;font-weight:600;transition:all .2s}.tab:hover{color:var(--primary-color)}.tab.active{color:var(--primary-color);border-bottom-color:var(--primary-color)}.tab-content{margin-top:32px}.problem-section{background:#fff;border-radius:12px;margin:24px 0;padding:32px;box-shadow:0 2px 8px #0000001a}[data-theme=dark] .problem-section{background:#2d3748}.problem-section h2{color:var(--primary-color);margin-bottom:20px;font-size:1.8em;font-weight:700}.problem-section p{color:var(--text-light);font-size:1.05em;line-height:1.8}[data-theme=dark] .problem-section p{color:var(--text-dark)}.constraints-list{padding:0;list-style:none}.constraints-list li{border-left:4px solid var(--primary-color);background:#f7fafc;border-radius:4px;margin:8px 0;padding:12px}[data-theme=dark] .constraints-list li{background:#1a202c}.constraints-list code{color:var(--primary-color);font-family:Fira Code,Courier New,monospace;font-weight:600}.example-box{border-left:4px solid var(--success-color);background:#f7fafc;border-radius:8px;margin:16px 0;padding:20px}[data-theme=dark] .example-box{background:#1a202c}.example-box h4{color:var(--success-color);margin-bottom:12px;font-size:1.1em}.example-box p{margin:8px 0;font-size:1em}.example-box code{color:#e53e3e;background:#fff;border-radius:4px;padding:4px 8px;font-family:Fira Code,Courier New,monospace}[data-theme=dark] .example-box code{background:#2d3748}.optimal-section{border:3px solid var(--success-color);background:linear-gradient(135deg,#d4fc79 0%,#96e6a1 100%)}[data-theme=dark] .optimal-section{background:linear-gradient(135deg,#1a3a1a 0%,#2d5a2d 100%)}.optimal-section h2{color:#22543d;text-align:center}[data-theme=dark] .optimal-section h2{color:#9ae6b4}.optimal-section h3{color:#22543d;text-align:center;margin:16px 0;font-size:1.8em}[data-theme=dark] .optimal-section h3{color:#c6f6d5}.why-section,.constraint-analysis{margin:24px 0}.why-section h4,.constraint-analysis h4{color:#22543d;margin-bottom:12px;font-size:1.2em}[data-theme=dark] .why-section h4,[data-theme=dark] .constraint-analysis h4{color:#9ae6b4}.why-section ul,.constraint-analysis p{color:#2d3748}[data-theme=dark] .why-section ul,[data-theme=dark] .constraint-analysis p{color:#e2e8f0}.why-section li{margin:12px 0;line-height:1.6}.approaches-intro{text-align:center;background:#fff;border-radius:12px;margin-bottom:32px;padding:32px;box-shadow:0 2px 8px #0000001a}[data-theme=dark] .approaches-intro{background:#2d3748}.approaches-intro h2{color:var(--primary-color);margin-bottom:12px;font-size:2em}.approaches-intro p{color:#718096;font-size:1.1em}.tradeoffs-tab h2{color:var(--primary-color);text-align:center;margin-bottom:24px;font-size:2.2em}.tradeoff-intro{background:#fff;border-radius:12px;margin:24px 0;padding:32px;box-shadow:0 2px 8px #0000001a}[data-theme=dark] .tradeoff-intro{background:#2d3748}.tradeoff-intro p{margin:16px 0;font-size:1.1em;line-height:1.8}.highlight-text{border-left:4px solid var(--warning-color);color:#744210;background:#fff5e6;border-radius:4px;padding:16px;font-weight:600}[data-theme=dark] .highlight-text{color:#f6ad55;background:#3a2a1a}.tradeoff-example{background:#fff;border-radius:12px;margin:32px 0;padding:32px;box-shadow:0 2px 8px #0000001a}[data-theme=dark] .tradeoff-example{background:#2d3748}.tradeoff-example h3{color:var(--primary-color);margin-bottom:12px;font-size:1.6em}.scenario{color:#718096;margin-bottom:24px;font-size:1.05em;font-style:italic}.options-comparison{grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;margin:24px 0;display:grid}.option-card{background:#f7fafc;border:2px solid #e2e8f0;border-radius:12px;padding:24px}[data-theme=dark] .option-card{background:#1a202c;border-color:#4a5568}.option-card h4{color:var(--primary-color);margin-bottom:12px;font-size:1.3em}.inline-code{color:#e53e3e;background:#fff;border-radius:6px;margin:12px 0;padding:12px;font-family:Fira Code,Courier New,monospace;font-size:.9em;display:block}[data-theme=dark] .inline-code{background:#2d3748}.option-card .pros,.option-card .cons{margin:16px 0}.option-card ul{color:var(--text-light);margin:8px 0 0 20px}[data-theme=dark] .option-card ul{color:var(--text-dark)}.option-card li{margin:6px 0;line-height:1.5}.vs-divider{color:var(--warning-color);text-align:center;font-size:1.5em;font-weight:700}.tradeoff-conclusion{border-left:4px solid var(--warning-color);color:#744210;background:#fff5e6;border-radius:8px;margin-top:24px;padding:20px;font-size:1.05em}[data-theme=dark] .tradeoff-conclusion{color:#f6ad55;background:#3a2a1a}.platform-footer{color:#fff;text-align:center;background:#2d3748;margin-top:60px;padding:32px 40px}.platform-footer p{margin:8px 0;font-size:1em}.platform-footer p:first-child{font-size:1.1em;font-weight:600}@media (max-width:768px){.platform-main{padding:20px}.logo-section h1{font-size:1.5em}.problems-grid{grid-template-columns:1fr}.search-filter-bar{flex-direction:column;align-items:stretch}.search-input{min-width:100%}.difficulty-filters{justify-content:center}.options-comparison{grid-template-columns:1fr}.vs-divider{margin:12px 0;transform:rotate(90deg)}.tabs-container{gap:4px}.tab{padding:12px 16px;font-size:.9em}}
