:root{--bg:#f5f7fb;--card:#fff;--line:#e9edf5;--text:#303133;--muted:#8a8f99;--primary:#3f7cff;--primary2:#69b8ff;--hover:#edf4ff;--border:#dfe7f3;--success:#67c23a;--danger:#f56c6c}
*{box-sizing:border-box}
html,body{min-height:100%}
body{margin:0;font-family:Arial,"Microsoft YaHei",sans-serif;background:var(--bg);color:var(--text)}
a{color:inherit}
.header{height:54px;background:var(--card);display:flex;align-items:center;justify-content:space-between;padding:0 18px;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.brand{font-weight:700;display:flex;align-items:center;gap:10px}
.brand .mark{width:16px;height:16px;border-radius:4px;background:linear-gradient(135deg,var(--primary),var(--primary2));box-shadow:0 6px 14px rgba(63,124,255,.18)}
.user{color:var(--muted);font-size:13px}
.user a{color:var(--primary);text-decoration:none;margin-left:10px}
.layout{display:flex;min-height:calc(100vh - 54px)}
.sidebar{width:230px;background:var(--card);border-right:1px solid var(--line);overflow:auto}
.sidebar-top{height:58px;display:flex;align-items:center;padding:0 16px;border-bottom:1px solid var(--line);font-weight:700;font-size:16px;color:#222}
.sidebar-top .brand-icon{width:18px;height:18px;border:2px solid var(--primary);border-radius:3px;display:inline-block;margin-right:10px;position:relative}
.sidebar-top .brand-icon:before{content:"";position:absolute;left:2px;right:2px;top:6px;height:2px;background:var(--primary);box-shadow:0 4px 0 var(--primary)}
.menu{padding:8px 0}
.section{margin:2px 0 8px}
.group-title,.menu a{display:flex;align-items:center;gap:10px;height:44px;padding:0 16px 0 20px;color:var(--text);text-decoration:none;font-size:14px;transition:.15s ease}
.group-title{font-weight:600;color:#606266;cursor:pointer;user-select:none}
.menu a{border-left:3px solid transparent}
.menu a:hover,.menu a.active{background:var(--hover);color:var(--primary);border-left-color:var(--primary)}
.indent{padding-left:32px}
.icon{width:16px;display:inline-flex;justify-content:center;flex:0 0 16px;color:inherit;font-size:15px}
.caret{margin-left:auto;color:#b5bcc8;font-size:12px;transition:transform .15s ease}
.section.collapsed .caret{transform:rotate(-90deg)}
.section.collapsed .subitem{display:none}
.content{flex:1;padding:18px}
.card{background:var(--card);border-radius:14px;padding:18px;box-shadow:0 2px 12px rgba(17,24,39,.04)}
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.toolbar-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.muted{color:var(--muted);font-size:13px;margin-top:4px}
.page-breadcrumb{font-size:14px;color:#7b8290;margin-bottom:8px}
.filter-box{margin:14px 0 16px;padding:12px;background:#fafafa;border:1px solid #ebeef5;border-radius:10px}
.filter-row,.search-row{margin-top:10px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.filter-row input,.filter-row select,.search-row input,.search-row select{padding:8px 10px;border:1px solid #dcdfe6;border-radius:8px;background:#fff;outline:none}
.table-list{width:100%;border-collapse:collapse}
.table-list th,.table-list td{border:1px solid #ebeef5;padding:10px 12px;text-align:left;vertical-align:middle}
.table-list th{background:#fafbfd}
.action-links{white-space:nowrap}
.action-links a{color:#409eff;text-decoration:none;margin-right:10px}
.action-links a.danger{color:#f56c6c}
.pager-inline{display:flex;justify-content:space-between;align-items:center;margin-top:16px;color:#909399;font-size:13px}
.status-pill{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;font-size:12px}
.status-pill.on{background:#f0f9eb;color:#67c23a}
.status-pill.off{background:#fef0f0;color:#f56c6c}
.form-grid-1,.form-grid-3,.form-grid-4{display:grid;gap:12px}
.form-grid-1{grid-template-columns:1fr}
.form-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.form-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.field-card{display:block;padding:14px;border:1px solid #ebeef5;border-radius:10px;background:#fafafa;color:#606266}
.field-card input{width:100%;margin-top:8px;padding:10px 12px;border:1px solid #dcdfe6;border-radius:8px;background:#fff;outline:none}
.form-actions{margin-top:18px;display:flex;gap:10px}
.flash-message{margin:12px 0;padding:10px 12px;border-radius:10px;background:#f0f9eb;color:#67c23a;border:1px solid #e1f3d8}
.json-box{margin:0;white-space:pre-wrap;word-break:break-word;background:#f8fafc;padding:12px;border-radius:8px;border:1px solid #edf1f7}
.path-cell{word-break:break-all}

/* Dashboard - 参考代码样式 */
.dashboard-container {
  padding: 16px;
  background: #f5f7fa;
  min-height: calc(100vh - 60px);
}

/* 统计卡片网格 */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.stat-card {
  border-radius: 8px;
  transition: all 0.3s;
  cursor: pointer;
  background: #fff;
  box-shadow: 0 2px 12px rgba(17, 24, 39, .04);
  border: 1px solid #e9edf5;
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.stat-content {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px;
}

.stat-icon {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stat-icon svg {
  width: 32px;
  height: 32px;
}

.stat-info {
  flex: 1;
}

.stat-value {
  font-size: 28px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 14px;
  color: #909399;
}

.stat-growth {
  margin-top: 6px;
  font-size: 12px;
}

.growth-up {
  color: #67c23a;
}

.growth-down {
  color: #f56c6c;
}

/* 快捷功能 */
.quick-actions-card {
  margin-bottom: 16px;
  border-radius: 8px;
}

.quick-actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 16px;
  padding: 14px;
}

.quick-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px;
  background: #f5f7fa;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
  text-decoration: none;
  color: inherit;
}

.quick-action:hover {
  background: #e6e8eb;
  transform: translateY(-2px);
}

.quick-action span {
  font-size: 13px;
  color: #606266;
}

/* 图表区域 */
.charts-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 16px;
}

.chart-card {
  border-radius: 8px;
}

.chart-container {
  width: 100%;
  height: 300px;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid #edf0f5;
  font-size: 15px;
  font-weight: 500;
  color: #303133;
  background: #fff;
}

.card-header svg {
  width: 16px;
  height: 16px;
}

/* 响应式 */
@media screen and (max-width: 768px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .quick-actions-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .charts-row {
    grid-template-columns: 1fr;
  }

  .stat-value {
    font-size: 24px;
  }
}

@media screen and (max-width: 480px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }

  .quick-actions-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 按钮样式 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  font-size: 14px;
  line-height: 1;
  border-radius: 4px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s;
  outline: none;
  font-family: inherit;
}

.btn-primary {
  background: #409eff;
  color: #fff;
  border-color: #409eff;
}

.btn-primary:hover {
  background: #66b1ff;
  border-color: #66b1ff;
}

.btn-secondary {
  background: #fff;
  color: #606266;
  border-color: #dcdfe6;
}

.btn-secondary:hover {
  color: #409eff;
  border-color: #c6e2ff;
  background: #ecf5ff;
}

.btn-success {
  background: #67c23a;
  color: #fff;
  border-color: #67c23a;
}

.btn-success:hover {
  background: #85ce61;
  border-color: #85ce61;
}

.btn-icon {
  font-size: 13px;
  display: inline-flex;
  align-items: center;
}

/* 标签样式 */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  line-height: 1.5;
}
.tag-success { background: #f0f9eb; color: #67c23a; border: 1px solid #e1f3d8; }
.tag-warning { background: #fdf6ec; color: #e6a23c; border: 1px solid #faecd8; }
.tag-info { background: #f4f4f5; color: #909399; border: 1px solid #e9e9eb; }
.tag-primary { background: #ecf5ff; color: #409eff; border: 1px solid #d9ecff; }
.tag-danger { background: #fef0f0; color: #f56c6c; border: 1px solid #fde2e2; }
.tag-default { background: #f4f4f5; color: #909399; border: 1px solid #e9e9eb; }

/* 分页样式 */
.pagination-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid #ebeef5;
  color: #606266;
  font-size: 13px;
}
.pagination-pages {
  display: flex;
  gap: 6px;
  align-items: center;
}
.pagination-pages a,
.pagination-pages span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border-radius: 4px;
  font-size: 13px;
  text-decoration: none;
  cursor: pointer;
}
.pagination-pages a {
  color: #606266;
  background: #f4f4f5;
  border: 1px solid #e9e9eb;
}
.pagination-pages a:hover {
  color: #409eff;
  border-color: #c6e2ff;
}
.pagination-pages span.active {
  color: #fff;
  background: #409eff;
  border: 1px solid #409eff;
}
.pagination-pages span.disabled {
  color: #c0c4cc;
  background: #f4f4f5;
  border: 1px solid #e9e9eb;
  cursor: not-allowed;
}

/* 模态框样式 */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.45);
  align-items: center;
  justify-content: center;
}
.modal-content {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
  max-width: 560px;
  width: 90%;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #ebeef5;
}
.modal-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  color: #303133;
}
.modal-close {
  font-size: 22px;
  color: #909399;
  cursor: pointer;
  line-height: 1;
}
.modal-close:hover {
  color: #409eff;
}
.modal-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}
.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 20px;
  border-top: 1px solid #ebeef5;
}

/* 表单样式 */
.form-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.form-row label {
  width: 100px;
  text-align: right;
  color: #606266;
  font-size: 14px;
  flex-shrink: 0;
}
.form-row input[type="text"],
.form-row input[type="password"],
.form-row input[type="email"],
.form-row input[type="number"],
.form-row textarea,
.form-row select {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s;
  font-family: inherit;
}
.form-row input:focus,
.form-row textarea:focus,
.form-row select:focus {
  border-color: #409eff;
}
.form-row textarea {
  resize: vertical;
}
.form-row .radio-group {
  display: flex;
  gap: 16px;
  align-items: center;
}
.form-row .radio-group label {
  width: auto;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.form-row .radio-group input {
  width: auto;
}
.required {
  color: #f56c6c;
}