*{box-sizing:border-box;margin:0;padding:0}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;height:100vh;display:flex;overflow:hidden;background:#e0e0e0}aside{width:300px;background:#2c3e50;color:#ecf0f1;display:flex;flex-direction:column;border-right:1px solid #34495e}.brand{padding:20px;background:#1a252f;font-weight:700;font-size:1.1rem;border-bottom:1px solid #34495e}.menu-list{list-style:none;padding:10px;overflow-y:auto;flex:1}.menu-section{padding:12px 10px 6px;color:#95a5a6;font-size:.75rem;font-weight:700;text-transform:uppercase}.menu-btn{display:block;width:100%;padding:12px 15px;background:none;border:none;color:#bdc3c7;text-align:left;cursor:pointer;border-radius:6px;transition:all .2s ease;font-size:.95rem}.menu-btn:hover{background:#34495e;color:#fff;transform:translate(4px)}.menu-btn.active{background:#3498db;color:#fff;font-weight:600}main{flex:1;background-color:#e0e0e0;display:flex;flex-direction:column;overflow:hidden}header{background:#fff;padding:15px 30px;box-shadow:0 1px 3px #0000001a;display:flex;justify-content:space-between;align-items:center;z-index:900}.stage-container{flex:1;padding:40px;overflow-y:auto}.moodle-box{max-width:1200px;margin:0 auto;background:#fff;box-shadow:0 4px 20px #0000001a;border-radius:8px;padding:20px;min-height:600px}.helper-text{margin-bottom:12px;color:#7f8c8d;font-size:.85rem;border-bottom:1px solid #eee;padding-bottom:8px}.badge{display:inline-block;padding:4px 8px;border-radius:4px;font-size:.75rem;font-weight:700;text-transform:uppercase}.badge-dev{background:#f1c40f;color:#333}.snippets-area{max-width:1200px;margin:40px auto;display:flex;flex-direction:column;gap:20px}.snippet-card{background:#fff;border:1px solid #ddd;border-radius:8px;padding:20px;box-shadow:0 2px 4px #0000000d}.snippet-card h3{margin-top:0;color:#333;font-size:1.1rem;border-bottom:1px solid #eee;padding-bottom:10px;margin-bottom:15px}.snippet-card pre{background:#f4f6f8;padding:15px;border-radius:6px;overflow-x:auto;font-family:Consolas,Monaco,monospace;font-size:.85rem;color:#2c3e50;border:1px solid #e1e4e8;white-space:pre-wrap}.snippet-note{font-size:.85rem;color:#666;margin-top:10px;line-height:1.4}@media(max-width:768px){.snippets-area{grid-template-columns:1fr}}