:root{--bg-main:#fcfaf8;--sidebar-bg:#2d3436;--card-bg:#fff;--primary:#4a69bd;--primary-light:#e0e7ff;--text-main:#2f3640;--text-muted:#7f8c8d;--border:#dcdde1;--accent:#e67e22;--shadow:0 10px 25px -5px #0000000d;--sidebar-width:280px}*{box-sizing:border-box;margin:0;padding:0;font-family:Segoe UI,Roboto,Helvetica,Arial,sans-serif}body{background-color:var(--bg-main);color:var(--text-main);line-height:1.6}.app-container{height:100vh;display:flex}.sidebar{width:var(--sidebar-width);background:var(--sidebar-bg);color:#dfe6e9;flex-direction:column;padding:30px 20px;display:flex}.logo-container{border-bottom:1px solid #ffffff1a;margin-bottom:30px;padding-bottom:40px}.logo-container h2{color:#fff;letter-spacing:1px;font-size:1.2rem;font-weight:700}.nav-menu{flex-direction:column;flex:1;gap:10px;display:flex}.nav-btn{color:#b2bec3;cursor:pointer;background:0 0;border:none;border-radius:8px;align-items:center;gap:15px;padding:12px 15px;font-weight:500;transition:all .3s;display:flex}.nav-btn:hover{color:#fff;background:#ffffff0d}.nav-btn.active{background:var(--primary);color:#fff;box-shadow:0 4px 15px #4a69bd4d}.nav-icon{background:#ffffff1a;border-radius:4px;justify-content:center;align-items:center;width:24px;height:24px;font-size:.8rem;display:flex}.main-content{flex:1;padding:40px 50px;overflow-y:auto}.content-header{margin-bottom:40px}.content-header h1{color:#1e272e;margin-bottom:10px;font-size:2.2rem}.badge{background:var(--primary-light);color:var(--primary);border-radius:5px;padding:5px 15px;font-size:.85rem;font-weight:600;display:inline-block}.content-grid{grid-template-columns:1fr 1fr;gap:30px;display:grid}.card{background:var(--card-bg);box-shadow:var(--shadow);border:1px solid #f1f2f6;border-radius:12px;flex-direction:column;display:flex}.card-header{background:#fafbfc;border-bottom:1px solid #f1f2f6;border-radius:12px 12px 0 0;padding:20px 25px}.card-header h3{color:#2f3542;align-items:center;gap:10px;font-size:1.1rem;display:flex}.card-body{padding:25px}.concept-box{border-left:5px solid var(--accent);color:#4b4b4b;background:#f8f9fa;border-radius:0 8px 8px 0;margin-bottom:25px;padding:20px}.code-editor-wrapper{background:#1e1e1e;border:1px solid #333;border-radius:8px;margin-top:10px;overflow:hidden}.code-editor-header{background:#2d2d2d;border-bottom:1px solid #1e1e1e;justify-content:space-between;align-items:center;padding:10px 15px;display:flex}.mac-dots{gap:6px;display:flex}.mac-dots .dot{border-radius:50%;width:12px;height:12px}.dot.red{background:#ff5f56}.dot.yellow{background:#ffbd2e}.dot.green{background:#27c93f}.code-editor-title{color:#9ca3af;text-align:center;flex:1;font-family:Consolas,monospace;font-size:.85rem}.copy-btn{cursor:pointer;background:0 0;border:none;border-radius:4px;align-items:center;gap:5px;padding:4px 8px;transition:background .2s;display:flex}.copy-btn:hover{background:#ffffff1a}.summary-box{background:#fffcf0;border:1px solid #f3e9b5;border-radius:8px;margin-bottom:25px;padding:20px}.summary-box h4{color:#856404;margin-bottom:10px;font-size:.95rem}.summary-box ul{list-style-type:none}.summary-box li{color:#5d5d5d;margin-bottom:8px;padding-left:20px;font-size:.95rem;position:relative}.summary-box li:before{content:"✅";position:absolute;left:0}.pdf-raw-text{color:#95a5a6;white-space:pre-wrap;background:#f9f9f9;border:1px dashed #ddd;border-radius:8px;max-height:300px;padding:15px;font-size:.85rem;overflow-y:auto}.scroll-area{max-height:700px;overflow-y:auto}.qa-section{background:#f0f4ff;border:1px solid #e3e7f1;border-radius:10px;margin-top:25px;overflow:hidden}.qa-header{background:var(--primary);color:#fff;align-items:center;gap:10px;padding:14px 20px;display:flex}.qa-header h4{color:#fff;margin:0;font-size:.95rem}.qa-item{cursor:pointer;border-bottom:1px solid #e3e7f1;padding:14px 20px;transition:background .2s}.qa-item:last-child{border-bottom:none}.qa-item:hover{background:#e8edfb}.qa-question{color:#2f3542;align-items:center;gap:8px;font-size:.9rem;font-weight:600;display:flex}.qa-answer{border-left:4px solid var(--primary);color:#555;background:#fff;border-radius:0 6px 6px 0;margin-top:10px;padding:12px 16px;font-size:.88rem;line-height:1.6}