*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;font-family:'Noto Sans SC',-apple-system,BlinkMacSystemFont,sans-serif;font-size:14px;color:#303133;background:#f0f2f5}
a{color:#409EFF;text-decoration:none}a:hover{color:#66b1ff}
ul{list-style:none}
input,select,textarea,button{font-family:inherit;font-size:inherit}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-thumb{background:#c0c4cc;border-radius:3px}
::-webkit-scrollbar-track{background:transparent}
product-sidebar,purchase-sidebar{display:block;height:100%}
.app{display:flex;height:100vh;overflow:hidden}
.sidebar{width:220px;height:100%;background:#304156;color:#bfcbd9;display:flex;flex-direction:column;transition:width .3s;flex-shrink:0;overflow:hidden}
.sidebar.collapsed{width:64px}
.sidebar-logo{height:50px;display:flex;align-items:center;padding:0 16px;background:#263445;white-space:nowrap;overflow:hidden}
.sidebar-logo .logo-icon{width:32px;height:32px;background:#409EFF;border-radius:6px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:16px;flex-shrink:0}
.sidebar-logo .logo-text{margin-left:10px;font-size:15px;font-weight:700;color:#fff}
.sidebar.collapsed .logo-text{display:none}
.sidebar-nav{flex:1;overflow-y:auto;padding:8px 0}
.nav-item{display:flex;align-items:center;padding:0 20px;height:44px;cursor:pointer;transition:all .2s;white-space:nowrap;overflow:hidden}
.nav-item:hover{background:#263445;color:#fff}
.nav-item.active{background:#409EFF;color:#fff}
.nav-item .nav-icon{width:20px;text-align:center;font-size:16px;flex-shrink:0}
.nav-item .nav-label{margin-left:10px;font-size:14px}
.sidebar.collapsed .nav-label{display:none}
.sidebar-toggle{height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer;border-top:1px solid #3a4a5e;transition:background .2s;font-size:12px;color:#bfcbd9}
.sidebar-toggle:hover{background:#263445}
.main-area{flex:1;display:flex;flex-direction:column;overflow:hidden}
.header{height:50px;background:#fff;border-bottom:1px solid #e4e7ed;display:flex;align-items:center;justify-content:space-between;padding:0 20px;flex-shrink:0}
.breadcrumb{display:flex;align-items:center;gap:6px;color:#97a8be;font-size:13px}
.breadcrumb .current{color:#303133;font-weight:500}
.header-right{display:flex;align-items:center;gap:16px}
.header-right .notify{position:relative;cursor:pointer;font-size:18px;color:#606266}
.header-right .notify .badge-dot{position:absolute;top:-6px;right:-8px;background:#f56c6c;color:#fff;font-size:10px;padding:1px 5px;border-radius:8px}
.user-info{display:flex;align-items:center;gap:8px;cursor:pointer}
.user-avatar{width:30px;height:30px;background:#409EFF;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:500}
.content{flex:1;overflow-y:auto;padding:16px}
.page{display:none}.page.active{display:block}
.card{background:#fff;border-radius:4px;box-shadow:0 1px 4px rgba(0,0,0,.08);margin-bottom:16px}
.card-header{padding:14px 20px;border-bottom:1px solid #ebeef5;display:flex;align-items:center;justify-content:space-between}
.card-header h3{font-size:15px;font-weight:500;color:#303133}
.card-body{padding:20px}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:16px}
.stat-card{background:#fff;border-radius:4px;box-shadow:0 1px 4px rgba(0,0,0,.08);padding:20px;display:flex;align-items:center;gap:16px}
.stat-icon{width:52px;height:52px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:24px}
.stat-icon.blue{background:#ecf5ff;color:#409EFF}
.stat-icon.green{background:#f0f9eb;color:#67c23a}
.stat-icon.orange{background:#fdf6ec;color:#e6a23c}
.stat-icon.purple{background:#f4f0ff;color:#9b59b6}
.stat-info .stat-value{font-size:24px;font-weight:700;color:#303133}
.stat-info .stat-label{font-size:13px;color:#909399;margin-top:4px}
.table-wrapper{overflow-x:auto}
table{width:100%;border-collapse:collapse}
thead th{background:#fafafa;padding:10px 12px;text-align:left;font-weight:500;color:#606266;border-bottom:1px solid #ebeef5;white-space:nowrap;font-size:13px}
tbody td{padding:10px 12px;border-bottom:1px solid #ebeef5;color:#606266;font-size:13px}
tbody tr:hover{background:#f5f7fa}
tbody tr:nth-child(even){background:#fafbfc}
tbody tr:nth-child(even):hover{background:#f5f7fa}
.badge{display:inline-block;padding:2px 10px;border-radius:10px;font-size:12px;font-weight:500}
.badge-gray{background:#f4f4f5;color:#909399}
.badge-orange{background:#fdf6ec;color:#e6a23c}
.badge-blue{background:#ecf5ff;color:#409EFF}
.badge-cyan{background:#e8f8f5;color:#13c2c2}
.badge-green{background:#f0f9eb;color:#67c23a}
.badge-red{background:#fef0f0;color:#f56c6c}
.badge-purple{background:#f4f0ff;color:#9b59b6}
.badge-teal{background:#e0f7fa;color:#00897b}
.btn{display:inline-flex;align-items:center;gap:4px;padding:8px 16px;border:1px solid #dcdfe6;border-radius:4px;background:#fff;color:#606266;cursor:pointer;transition:all .2s;font-size:13px;white-space:nowrap}
.btn:hover{color:#409EFF;border-color:#c6e2ff;background:#ecf5ff}
.btn-primary{background:#409EFF;color:#fff;border-color:#409EFF}
.btn-primary:hover{background:#66b1ff;border-color:#66b1ff;color:#fff}
.btn-success{background:#67c23a;color:#fff;border-color:#67c23a}
.btn-success:hover{background:#85ce61;border-color:#85ce61;color:#fff}
.btn-warning{background:#e6a23c;color:#fff;border-color:#e6a23c}
.btn-warning:hover{background:#ebb563;border-color:#ebb563;color:#fff}
.btn-danger{background:#f56c6c;color:#fff;border-color:#f56c6c}
.btn-danger:hover{background:#f78989;border-color:#f78989;color:#fff}
.btn-text{border:none;background:none;color:#409EFF;padding:4px 8px}
.btn-text:hover{color:#66b1ff}
.btn-text.danger{color:#f56c6c}
.btn-text.danger:hover{color:#f78989}
.btn-sm{padding:5px 12px;font-size:12px}
.form-group{margin-bottom:16px}
.form-group label{display:block;margin-bottom:6px;font-size:13px;color:#606266;font-weight:500}
.form-group label .required{color:#f56c6c;margin-right:2px}
.form-control{width:100%;height:34px;padding:0 12px;border:1px solid #dcdfe6;border-radius:4px;color:#606266;transition:border-color .2s;outline:none}
.form-control:focus{border-color:#409EFF}
select.form-control{cursor:pointer}
textarea.form-control{height:auto;padding:8px 12px;resize:vertical}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.form-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 16px}
.form-row-4{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:0 16px}
.toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap;gap:10px}
.toolbar-left{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.toolbar-right{display:flex;align-items:center;gap:10px}
.search-input{width:240px;height:34px;padding:0 12px 0 34px;border:1px solid #dcdfe6;border-radius:4px;outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23c0c4cc' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85zm-5.242.156a5 5 0 1 1 0-10 5 5 0 0 1 0 10z'/%3E%3C/svg%3E") 10px center no-repeat}
.search-input:focus{border-color:#409EFF}
.filter-select{height:34px;padding:0 30px 0 12px;border:1px solid #dcdfe6;border-radius:4px;outline:none;background:#fff;cursor:pointer}
.filter-select:focus{border-color:#409EFF}
.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);z-index:1000;display:none;align-items:center;justify-content:center;animation:fadeIn .2s}
.modal-overlay.show{display:flex}
.modal{background:#fff;border-radius:6px;width:720px;max-height:85vh;display:flex;flex-direction:column;animation:slideDown .25s;box-shadow:0 8px 30px rgba(0,0,0,.15)}
.modal.modal-lg{width:900px}
.modal.modal-xl{width:1100px}
.section-title{font-size:14px;font-weight:600;color:#303133;padding:8px 0;border-bottom:1px solid #ebeef5;margin-bottom:12px}
.modal-header{padding:16px 20px;border-bottom:1px solid #ebeef5;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.modal-header h3{font-size:16px;font-weight:500}
.modal-close{width:28px;height:28px;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:4px;color:#909399;font-size:18px;border:none;background:none}
.modal-close:hover{background:#f5f7fa;color:#606266}
.modal-body{padding:20px;overflow-y:auto;flex:1}
.modal-footer{padding:12px 20px;border-top:1px solid #ebeef5;display:flex;justify-content:flex-end;gap:10px;flex-shrink:0}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideDown{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}
.tabs{display:flex;border-bottom:2px solid #e4e7ed;margin-bottom:16px}
.tab-item{padding:8px 20px;cursor:pointer;color:#909399;font-size:14px;border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .2s}
.tab-item:hover{color:#409EFF}
.tab-item.active{color:#409EFF;border-bottom-color:#409EFF;font-weight:500}
.tab-pane{display:none}.tab-pane.active{display:block}
.detail-header{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.detail-header .back-btn{cursor:pointer;color:#909399;font-size:18px;padding:4px 8px;border-radius:4px}
.detail-header .back-btn:hover{color:#409EFF;background:#ecf5ff}
.detail-header h3{font-size:16px;font-weight:500}
.detail-info{display:grid;grid-template-columns:repeat(4,1fr);gap:12px 24px;margin-bottom:20px}
.detail-info .info-item{}
.detail-info .info-label{font-size:12px;color:#909399;margin-bottom:2px}
.detail-info .info-value{font-size:14px;color:#303133}
.pagination{display:flex;align-items:center;justify-content:flex-end;gap:4px;margin-top:16px}
.page-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:1px solid #dcdfe6;border-radius:4px;cursor:pointer;color:#606266;background:#fff;font-size:13px}
.page-btn:hover{color:#409EFF;border-color:#409EFF}
.page-btn.active{background:#409EFF;color:#fff;border-color:#409EFF}
.page-info{font-size:13px;color:#909399;margin-right:8px}
.alert-list{}
.alert-item{display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-bottom:1px solid #f2f3f5}
.alert-item:last-child{border-bottom:none}
.alert-dot{width:8px;height:8px;border-radius:50%;margin-top:5px;flex-shrink:0}
.alert-dot.up{background:#f56c6c}
.alert-dot.down{background:#67c23a}
.alert-dot.info{background:#409EFF}
.alert-content{flex:1}
.alert-content .alert-title{font-size:13px;color:#303133}
.alert-content .alert-meta{font-size:12px;color:#909399;margin-top:2px}
.bom-level-0{background:#fff}
.bom-level-1{background:#f5f9ff}
.bom-level-2{background:#f0f5ff}
.bom-level-3{background:#eaf0ff}
.bom-path{color:#909399;font-size:12px}
.step-params{display:none;background:#fafbfc;border-left:3px solid #409EFF;margin:4px 0;padding:8px 12px;font-size:12px}
.step-params.show{display:block}
.param-table{width:100%;border-collapse:collapse}
.param-table th{background:#f0f2f5;padding:6px 10px;text-align:left;font-weight:500;color:#606266;font-size:12px;border-bottom:1px solid #ebeef5}
.param-table td{padding:6px 10px;border-bottom:1px solid #f2f3f5;color:#606266;font-size:12px}
.clickable-row{cursor:pointer}
.clickable-row:hover{background:#ecf5ff !important}
.status-tag{display:inline-flex;align-items:center;gap:4px}
.status-tag::before{content:'';width:6px;height:6px;border-radius:50%}
.status-tag.active::before{background:#67c23a}
.status-tag.draft::before{background:#909399}
.status-tag.pending::before{background:#e6a23c}
.tree-node{padding:6px 8px;cursor:pointer;border-radius:4px;display:flex;align-items:center;gap:6px;font-size:13px;transition:background .15s}
.tree-node:hover{background:#f0f7ff}
.tree-node.active{background:#e6f1ff;color:#409eff}
.tree-icon{font-size:14px;flex-shrink:0}
.tree-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tree-actions{opacity:0;transition:opacity .15s}
.tree-node:hover .tree-actions{opacity:1}

.page-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:#fff;border-bottom:1px solid #ebeef5;margin:-20px -20px 20px;border-radius:8px 8px 0 0}
.page-header-left{display:flex;align-items:center;gap:12px}
.page-header-left h2{margin:0;font-size:18px;font-weight:600}
.page-header-right{display:flex;align-items:center;gap:8px}

.switch{position:relative;display:inline-block;width:36px;height:20px}
.switch input{opacity:0;width:0;height:0}
.switch .slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:#dcdfe6;transition:.3s;border-radius:20px}
.switch .slider:before{position:absolute;content:'';height:16px;width:16px;left:2px;bottom:2px;background:#fff;transition:.3s;border-radius:50%}
.switch input:checked+.slider{background:#409EFF}
.switch input:checked+.slider:before{transform:translateX(16px)}