*{box-sizing:border-box;margin:0;padding:0}body{font-family:system-ui,Segoe UI,Roboto,sans-serif}.field-row .field{flex:1}input,textarea,select{color:#333;background:#fff;border:1px solid #ccc;border-radius:6px;outline:none;padding:10px 12px;font-family:inherit;font-size:15px;transition:border-color .2s}.dropdown-wrapper{position:relative}.dropdown-trigger{color:#333;cursor:pointer;background:#fff;border:1px solid #ccc;border-radius:6px;align-items:center;min-height:42px;padding:10px 12px;font-size:15px;display:flex}.dropdown-trigger:empty:before{content:"-- Select Tasks --";color:#999}.dropdown-menu{z-index:10;background:#fff;border:1px solid #ccc;border-radius:6px;max-height:200px;margin-top:4px;position:absolute;top:100%;left:0;right:0;overflow-y:auto;box-shadow:0 4px 12px #0000001a}.dropdown-item{cursor:pointer;padding:10px 12px;font-size:14px;transition:background .15s}.dropdown-item:hover{background:#f0f0f0}.chips{flex-wrap:wrap;gap:8px;margin-top:4px;display:flex}.chip{color:#fff;background:#333;border-radius:20px;align-items:center;gap:6px;padding:6px 12px;font-size:13px;display:inline-flex}.chip-close{color:#fff;cursor:pointer;opacity:.7;background:0 0;border:none;padding:0;font-size:16px;line-height:1;transition:opacity .15s}.chip-close:hover{opacity:1}.container{flex-direction:column;align-items:center;min-height:100vh;padding:40px 20px;display:flex}h1{margin-bottom:40px;font-size:36px;font-weight:600}input{color:#333;background:#fff;border:1px solid #ccc;border-radius:6px;outline:none;padding:10px 12px;font-size:15px;transition:border-color .2s}input:focus{border-color:#666}input::placeholder{color:#999}.btn-row{gap:12px;margin-top:10px;display:flex}.roles-table{border:1px solid #ddd;border-radius:8px;width:100%;max-width:800px;overflow:hidden}.table-header,.table-row{text-align:left;align-items:center;padding:12px 16px;display:flex}.table-header{color:#333;background:#f5f5f5;border-bottom:1px solid #ddd;font-size:14px;font-weight:600}.table-row{color:#444;border-bottom:1px solid #eee;font-size:14px}.table-row:last-child{border-bottom:none}.col-name{flex:2}.col-status{flex:1}.col-modules{flex:3}.col-action{text-align:right;flex:1;justify-content:flex-end;gap:8px;display:flex}.btn-edit{color:#0d6efd;cursor:pointer;background:0 0;border:1px solid #0d6efd;border-radius:4px;margin-right:8px;padding:5px 12px;font-size:13px;transition:background .2s,color .2s}.popup{background:#fff;border-radius:10px;flex-direction:column;gap:20px;width:90%;max-width:480px;padding:32px;display:flex}.modules-container{border:2px dashed #ccc;border-radius:6px;flex-wrap:wrap;align-content:flex-start;align-items:flex-start;gap:8px;min-height:60px;padding:12px;display:flex}.sub-tabs{border:1px solid #ddd;border-radius:6px;gap:0;margin-bottom:24px;display:flex;overflow:hidden}.sub-tab{color:#666;cursor:pointer;background:#f5f5f5;border:none;padding:10px 24px;font-size:14px;font-weight:500;transition:background .2s,color .2s}.sub-tab+.sub-tab{border-left:1px solid #ddd}.sub-tab.active{color:#fff;background:#333}.btn-add{color:#fff;cursor:pointer;background:#333;border:none;border-radius:6px;margin-bottom:24px;padding:10px 20px;font-size:15px;font-weight:500;transition:background .2s}.btn-add:hover{background:#555}.modules-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;width:100%;max-width:900px;display:grid}.module-card{border:1px solid #ddd;border-radius:8px;flex-direction:column;gap:8px;padding:16px;display:flex}.module-card-header{justify-content:space-between;align-items:center;display:flex}.module-id{color:#333;background:#f0f0f0;border-radius:12px;padding:4px 10px;font-size:14px;font-weight:600}.module-card-actions{gap:8px;display:flex}.module-img{object-fit:cover;border-radius:6px;width:100%;height:140px}.module-card h3{margin:0;font-size:18px;font-weight:600}.module-desc{color:#666;margin:0;font-size:14px}.module-sub-list{color:#444;font-size:13px}.module-sub-list ul{margin:4px 0 0;padding-left:20px}.badge{border-radius:12px;padding:4px 10px;font-size:12px;font-weight:500}.badge.active{color:#155724;background:#d4edda}.badge.inactive{color:#721c24;background:#f8d7da}.btn-edit{color:#0d6efd;cursor:pointer;background:0 0;border:1px solid #0d6efd;border-radius:4px;padding:5px 12px;font-size:13px;transition:background .2s,color .2s}.btn-edit:hover{color:#fff;background:#0d6efd}.btn-delete{color:#dc3545;cursor:pointer;background:0 0;border:1px solid #dc3545;border-radius:4px;padding:5px 12px;font-size:13px;transition:background .2s,color .2s}.btn-delete:hover{color:#fff;background:#dc3545}.submodule-section{width:100%;max-width:600px}.submodule-top{align-items:center;gap:12px;margin-bottom:24px;display:flex}.module-select{color:#333;background:#fff;border:1px solid #ccc;border-radius:6px;outline:none;flex:1;padding:10px 12px;font-size:15px}.module-select:disabled{color:#999;background:#f5f5f5}.no-sub{color:#999;margin:4px 0 0;font-size:14px}.submodule-list{margin-top:0}.submodule-group{border:1px solid #eee;border-radius:8px;margin-bottom:20px;padding:16px}.submodule-group h3{margin:0 0 8px;font-size:16px}.submodule-group ul{margin:0;padding-left:20px}.submodule-group li{color:#444;align-items:center;gap:8px;margin-bottom:6px;font-size:14px;display:flex}.popup-overlay{z-index:100;background:#00000080;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.popup{background:#fff;border-radius:10px;flex-direction:column;gap:20px;width:90%;max-width:480px;max-height:90vh;padding:32px;display:flex;overflow-y:auto}.popup h2{margin:0;font-size:24px;font-weight:600}input,textarea{color:#333;background:#fff;border:1px solid #ccc;border-radius:6px;outline:none;padding:10px 12px;font-family:inherit;font-size:15px;transition:border-color .2s}input:focus,textarea:focus{border-color:#666}input::placeholder,textarea::placeholder{color:#999}.picture-preview{object-fit:cover;border-radius:6px;width:100%;max-height:150px;margin-top:8px}.toggle-group{border:1px solid #ccc;border-radius:6px;gap:0;display:flex;overflow:hidden}.toggle-btn{cursor:pointer;color:#666;background:#f5f5f5;border:none;flex:1;padding:8px 16px;font-size:14px;transition:background .2s,color .2s}.toggle-btn.active{color:#fff;background:#333}.submodules-container{border:2px dashed #ccc;border-radius:6px;flex-wrap:wrap;align-content:flex-start;align-items:flex-start;gap:8px;min-height:50px;padding:12px;display:flex}.module-chip{color:#fff;background:#333;border-radius:20px;align-items:center;gap:6px;padding:6px 12px;font-size:13px;display:inline-flex}.module-chip .chip-close{color:#fff;cursor:pointer;opacity:.7;background:0 0;border:none;padding:0;font-size:16px;line-height:1;transition:opacity .15s}.module-chip .chip-close:hover{opacity:1}.btn-add-module{color:#666;cursor:pointer;background:0 0;border:2px dashed #ccc;border-radius:20px;padding:6px 14px;font-size:13px;transition:border-color .2s,color .2s}.btn-add-module:hover{color:#333;border-color:#999}.btn-row{gap:12px;display:flex}.btn-back{color:#333;cursor:pointer;background:#f0f0f0;border:none;border-radius:6px;flex:1;padding:10px 20px;font-size:15px;font-weight:500;transition:background .2s}.btn-back:hover{background:#ddd}.btn-next{color:#fff;cursor:pointer;background:#333;border:none;border-radius:6px;flex:1;padding:10px 20px;font-size:15px;font-weight:500;transition:background .2s}.btn-next:hover{background:#555}.add-submodule-select{color:#666;cursor:pointer;background:#fff;border:2px dashed #ccc;border-radius:20px;outline:none;min-width:160px;padding:6px 12px;font-size:13px}.add-submodule-select:hover{border-color:#999}.no-more-subs{color:#999;font-size:13px;font-style:italic}.app{min-height:100vh}.tabs{background:#fafafa;border-bottom:1px solid #ddd;justify-content:center;gap:0;padding:0 20px;display:flex}.tab{color:#666;cursor:pointer;background:0 0;border:none;border-bottom:2px solid #0000;padding:14px 24px;font-size:15px;font-weight:500;transition:color .2s,border-color .2s}.tab:hover{color:#333}.tab.active{color:#000;border-bottom-color:#333}main{padding:0}.tab-content{flex-direction:column;align-items:center;padding:40px 20px;display:flex}.tab-content h1{margin-bottom:40px;font-size:36px;font-weight:600}.form{flex-direction:column;gap:20px;width:100%;max-width:500px;display:flex}.field{flex-direction:column;gap:6px;display:flex}.field-row{gap:16px;display:flex}label{color:#333;font-size:14px;font-weight:500}input,select{color:#333;background:#fff;border:1px solid #ccc;border-radius:6px;outline:none;padding:10px 12px;font-size:15px;transition:border-color .2s}input:focus,select:focus{border-color:#666}input[readonly]{color:#666;cursor:not-allowed;background:#f0f0f0}select:disabled{color:#999;cursor:not-allowed;background:#f5f5f5}.btn-offender{color:#fff;cursor:pointer;background:#333;border:none;border-radius:6px;margin-top:10px;padding:12px 24px;font-size:16px;font-weight:500;transition:background .2s}.btn-offender:hover{background:#555}.placeholder-text{color:#999;font-size:16px}