*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;color:#1a1a2e;background:#f5f5f7;line-height:1.5}
a{color:#2563eb;text-decoration:none}
a:hover{text-decoration:underline}

.site-header{background:#1a1a2e;color:#fff;padding:.75rem 1.5rem;display:flex;align-items:center;gap:.75rem}
.site-title{color:#fff;font-weight:600;font-size:1.1rem}
.site-title:hover{color:#a5b4fc;text-decoration:none}
.breadcrumb{color:#94a3b8;font-size:.9rem}
.breadcrumb a{color:#a5b4fc}

.page-body{max-width:1200px;margin:0 auto;padding:1.5rem}
.content-single{max-width:720px;margin:0 auto}

h1{font-size:1.5rem;margin-bottom:.5rem}
h2{font-size:1.15rem;margin-bottom:.75rem}
.subtitle{color:#64748b;margin-bottom:1.5rem}

.card{background:#fff;border:1px solid #e2e8f0;border-radius:8px;padding:1.25rem;margin-bottom:1.25rem}

.form-group{margin-bottom:1rem}
.form-group label{display:block;font-weight:500;margin-bottom:.25rem;font-size:.9rem}
.form-group input,.form-group textarea,.form-group select{width:100%;padding:.5rem .75rem;border:1px solid #cbd5e1;border-radius:6px;font-size:.95rem;font-family:inherit}
.form-group textarea{resize:vertical}
.form-group input:focus,.form-group textarea:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.1)}

.btn{display:inline-block;padding:.5rem 1rem;border:none;border-radius:6px;font-size:.9rem;font-weight:500;cursor:pointer;text-align:center}
.btn-primary{background:#2563eb;color:#fff}
.btn-primary:hover{background:#1d4ed8;text-decoration:none}
.btn-outline{background:transparent;border:1px solid #cbd5e1;color:#475569}
.btn-outline:hover{background:#f1f5f9;text-decoration:none}
.btn-small{padding:.25rem .75rem;font-size:.85rem}

.course-list,.module-list{list-style:none;padding:0}
.course-list li{padding:.5rem 0;border-bottom:1px solid #f1f5f9}
.course-list li:last-child{border-bottom:none}
.module-item{display:flex;justify-content:space-between;align-items:center;padding:.5rem 0;border-bottom:1px solid #f1f5f9}
.module-item:last-child{border-bottom:none}
.module-title{font-weight:500}

.wizard-layout{display:grid;grid-template-columns:260px 1fr;gap:0;min-height:calc(100vh - 52px)}
.page-body:has(.wizard-layout){max-width:none;padding:0}

.sidebar{background:#fff;border-right:1px solid #e2e8f0;padding:1rem 0;overflow-y:auto}
.sidebar-nav h2{padding:0 1rem .75rem;font-size:.95rem;color:#64748b;border-bottom:1px solid #e2e8f0;margin-bottom:.5rem}
.component-list{list-style:none;padding:0;counter-reset:none}
.component-item{font-size:.85rem}
.component-item a,.component-item span{display:flex;align-items:center;padding:.4rem 1rem;gap:.5rem}
.component-item a:hover{background:#f1f5f9;text-decoration:none}
.component-item.current{background:#eff6ff}
.component-item .active{font-weight:600;color:#2563eb}
.component-item .disabled{color:#94a3b8}
.step-num{width:1.5rem;text-align:center;font-size:.8rem;color:#64748b}
.step-name{flex:1}
.step-icon{width:1.2rem;text-align:center}
.status-approved .step-icon{color:#16a34a}
.status-in_progress .step-icon{color:#2563eb}

.wizard-main{padding:1.5rem 2rem}
.wizard-header{margin-bottom:1.25rem}
.wizard-header h1{font-size:1.25rem}
.progress-bar{height:6px;background:#e2e8f0;border-radius:3px;margin:.5rem 0 .25rem;overflow:hidden}
.progress-fill{height:100%;background:#2563eb;border-radius:3px;transition:width .3s}
.progress-text{font-size:.8rem;color:#64748b}

#workspace{min-height:400px;background:#fff;border:1px solid #e2e8f0;border-radius:8px;padding:1.25rem}