/* ===== 公共样式 ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}

body {
  font-family: 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif
}

/* iconfont SVG inline icons (阿里巴巴矢量图库风格) */
.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  fill: currentColor;
  vertical-align: middle
}

/* 颜色语义 */
:root {
  --primary: #1677ff;
  --primary-light: #e6f4ff;
  --success: #52c41a;
  --success-light: #f6ffed;
  --warning: #fa8c16;
  --warning-light: #fff7e6;
  --danger: #f5222d;
  --danger-light: #fff1f0;
  --text-primary: #1a1a1a;
  --text-secondary: #595959;
  --text-tertiary: #8c8c8c;
  --border: #e8e8e8;
  --bg: #f5f5f5;
  --white: #fff;
  --sidebar: #001529;
  --sidebar-active: #1677ff;
}

/* 手机壳 750×1334 */
.phone-shell {
  width: 750px;
  min-height: 1334px;
  background: #f5f5f5;
  border-radius: 72px;
  box-shadow: 0 0 0 16px #1a1a1a, 0 40px 100px rgba(0, 0, 0, .45);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column
}

.phone-notch {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: 220px;
  height: 44px;
  background: #1a1a1a;
  border-radius: 22px;
  z-index: 10
}

.status-bar {
  background: #fff;
  height: 72px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 40px 12px;
  font-size: 16px;
  font-weight: 600;
  color: #333;
  flex-shrink: 0
}

.nav-bar {
  background: #fff;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  border-bottom: 1px solid #f0f0f0;
  flex-shrink: 0
}

.nav-bar .nav-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary)
}

.nav-icon-btn {
  width: 52px;
  height: 52px;
  background: #f5f5f5;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  color: #555;
  font-size: 22px
}

.scroll-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px 28px 120px
}

.tab-bar {
  background: #fff;
  border-top: 1px solid #f0f0f0;
  display: flex;
  padding: 14px 0 36px;
  flex-shrink: 0
}

.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  padding: 4px 0
}

.tab-item svg {
  width: 32px;
  height: 32px
}

.tab-item .tab-label {
  font-size: 14px;
  color: #8c8c8c
}

.tab-item.active .tab-label {
  color: var(--primary);
  font-weight: 600
}

.tab-active-line {
  width: 36px;
  height: 4px;
  background: var(--primary);
  border-radius: 2px;
  margin-bottom: 2px
}

/* 卡片 */
.card {
  background: #fff;
  border-radius: 20px;
  padding: 24px;
  margin-bottom: 16px
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px
}

.card-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary)
}

.card-link {
  font-size: 16px;
  color: var(--primary);
  text-decoration: none;
  cursor: pointer
}

/* 按钮 */
.btn {
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
  font-family: inherit
}

.btn-primary {
  background: var(--primary);
  color: #fff
}

.btn-primary:hover {
  background: #0958d9
}

.btn-default {
  background: #fff;
  color: #555;
  border: 1px solid var(--border)
}

.btn-default:hover {
  border-color: var(--primary);
  color: var(--primary)
}

.btn-danger {
  background: var(--danger);
  color: #fff;
  border: 1px solid var(--danger)
}

.btn-danger:hover {
  background: #cf1322;
  border-color: #cf1322;
  color: #fff
}

.btn-danger:disabled {
  background: #f5f5f5;
  color: var(--text-tertiary);
  border-color: var(--border);
  cursor: not-allowed
}

.op-btn,
.btn-xs,
.action-link,
.q-card-actions .btn,
.q-action-btn,
.icon-btn.danger {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.op-btn,
.btn-xs-primary,
.action-link,
.q-card-actions .btn-primary,
.q-action-btn {
  color: var(--primary) !important;
}

.op-btn.warn,
.btn-xs-warning {
  color: var(--warning) !important;
}

.op-btn.danger,
.btn-xs-danger,
.btn-xs.btn-xs-danger,
.action-link.danger,
.q-card-actions .btn-danger,
.q-action-btn.danger,
.icon-btn.danger {
  color: var(--danger) !important;
}

.btn-xs-default,
.q-card-actions .btn-default {
  color: var(--text-secondary) !important;
}

.op-btn:hover,
.btn-xs:hover,
.action-link:hover,
.q-card-actions .btn:hover,
.q-action-btn:hover,
.icon-btn.danger:hover {
  background: var(--primary-light) !important;
}

.op-btn.warn:hover,
.btn-xs-warning:hover {
  background: var(--warning-light) !important;
}

.op-btn.danger:hover,
.btn-xs-danger:hover,
.btn-xs.btn-xs-danger:hover,
.action-link.danger:hover,
.q-card-actions .btn-danger:hover,
.q-action-btn.danger:hover,
.icon-btn.danger:hover {
  background: var(--danger-light) !important;
  color: var(--danger) !important;
}

.op-btn:disabled,
.btn-xs:disabled,
.q-card-actions .btn:disabled,
.icon-btn.danger:disabled {
  background: transparent !important;
  color: var(--text-tertiary) !important;
  border-color: transparent !important;
  cursor: not-allowed;
}

.btn-round {
  border-radius: 24px
}

.btn-sm {
  padding: 6px 14px;
  font-size: 12px
}

.btn-lg {
  padding: 14px 32px;
  font-size: 16px
}

.btn-block {
  width: 100%;
  display: block
}

/* 标签 */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 20px;
  font-weight: 600;
  white-space: nowrap
}

.tag-high {
  background: var(--danger-light);
  color: var(--danger);
  border: 1px solid #ffa39e
}

.tag-mid {
  background: var(--warning-light);
  color: var(--warning);
  border: 1px solid #ffd591
}

.tag-low {
  background: var(--success-light);
  color: var(--success);
  border: 1px solid #b7eb8f
}

.tag-blue {
  background: var(--primary-light);
  color: var(--primary);
  border: 1px solid #91caff
}

.tag-gray {
  background: #f5f5f5;
  color: #8c8c8c;
  border: 1px solid #e0e0e0
}

/* 表单 */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px
}

.form-label {
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 600
}

.form-input {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  color: var(--text-primary);
  outline: none;
  transition: border-color .2s;
  font-family: inherit;
  background: #fff
}

.form-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(22, 119, 255, .1)
}

.form-input::placeholder {
  color: #bfbfbf
}

textarea.form-input {
  resize: none
}

/* 桌面端侧边栏 1920px适配 */
.d-sidebar {
  width: 260px;
  background: var(--sidebar);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  height: 100vh;
  position: relative;
  transition: width .22s ease
}

.d-sidebar.collapsed {
  width: 72px !important
}

.d-sidebar-toggle {
  position: absolute;
  top: 82px;
  right: -12px;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid #d9e4f2;
  border-radius: 50%;
  color: #595959;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
  cursor: pointer;
  transition: transform .22s ease, box-shadow .2s ease
}

.d-sidebar-toggle:hover {
  color: var(--primary);
  box-shadow: 0 3px 10px rgba(22, 119, 255, .25)
}

.d-sidebar.collapsed .d-sidebar-logo {
  justify-content: center;
  padding: 0;
}

.d-sidebar.collapsed .d-sidebar-logo > div:last-child,
.d-sidebar.collapsed .d-user-menu-meta,
.d-sidebar.collapsed .d-user-menu-arrow {
  display: none
}

.d-sidebar.collapsed .d-menu-item,
.d-sidebar.collapsed .d-menu-parent {
  justify-content: center;
  gap: 0;
  padding-left: 0;
  padding-right: 0;
  font-size: 0;
}

.d-sidebar.collapsed .d-menu-parent .menu-arrow,
.d-sidebar.collapsed .d-submenu .d-menu-item::before {
  display: none
}

.d-sidebar.collapsed .d-submenu {
  display: none
}

.d-sidebar.collapsed .d-submenu .d-menu-item {
  padding-left: 0;
  padding-right: 0;
}

.d-sidebar.collapsed .d-sidebar-footer {
  padding-left: 12px;
  padding-right: 12px;
}

.d-sidebar.collapsed .d-user-menu-trigger {
  justify-content: center;
}

.d-sidebar-logo {
  padding: 0 24px;
  height: 72px;
  background: #002140;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0
}

.d-sidebar-logo h3 {
  font-size: 16px;
  color: #fff;
  font-weight: 700
}

.d-sidebar-logo p {
  font-size: 12px;
  color: rgba(255, 255, 255, .45)
}

.d-menu {
  flex: 1;
  padding: 10px 0;
  overflow-y: auto
}

.d-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 24px;
  font-size: 15px;
  color: rgba(255, 255, 255, .65);
  cursor: pointer;
  transition: all .2s;
  text-decoration: none
}

.d-menu-item:hover {
  color: #fff;
  background: rgba(255, 255, 255, .08)
}

.d-menu-item.active {
  background: var(--primary);
  color: #fff
}

.d-menu-item svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0
}

/* 二级菜单 */
.d-menu-group {}

.d-menu-parent {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 24px;
  font-size: 15px;
  color: rgba(255, 255, 255, .65);
  cursor: pointer;
  transition: all .2s;
  user-select: none;
}

.d-menu-parent:hover {
  color: #fff;
  background: rgba(255, 255, 255, .08);
}

.d-menu-parent.open,
.d-menu-parent.active-parent {
  color: #fff;
}

.d-menu-parent .menu-arrow {
  margin-left: auto;
  transition: transform .2s;
  opacity: .5;
}

.d-menu-parent.open .menu-arrow {
  transform: rotate(90deg);
}

.d-submenu {
  display: none;
  background: rgba(0, 0, 0, .15);
}

.d-submenu.open {
  display: block;
}

.d-submenu .d-menu-item {
  padding: 11px 24px 11px 48px;
  font-size: 13px;
}

.d-submenu .d-menu-item::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .4);
  flex-shrink: 0;
  margin-right: -4px;
}

.d-submenu .d-menu-item.active::before {
  background: #fff;
}

.d-sidebar-footer {
  padding: 18px 24px;
  background: #002140;
  position: relative;
  flex-shrink: 0
}

.d-user-menu-trigger {
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  cursor: pointer
}

.d-user-menu-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0
}

.d-user-menu-meta {
  flex: 1;
  min-width: 0
}

.d-user-menu-name {
  font-size: 13px;
  color: #fff;
  font-weight: 600
}

.d-user-menu-role {
  font-size: 11px;
  color: rgba(255, 255, 255, .5)
}

.d-user-menu-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform .2s ease
}

.d-sidebar-footer.open .d-user-menu-arrow {
  transform: rotate(180deg)
}

.d-user-menu-popover {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: calc(100% + 10px);
  background: linear-gradient(180deg, #0b2a46 0%, #08213a 100%);
  border: 1px solid rgba(145, 202, 255, .18);
  border-radius: 12px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .28);
  padding: 6px;
  display: none;
  z-index: 30
}

.d-sidebar-footer.open .d-user-menu-popover {
  display: block
}

.d-user-menu-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: rgba(255, 255, 255, .92);
  font-size: 13px;
  line-height: 1.4;
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
  cursor: pointer
}

.d-user-menu-item:hover {
  background: rgba(105, 177, 255, .14)
}

.d-user-menu-item-danger {
  color: #ffb3b3
}

.d-user-menu-item-danger:hover {
  background: rgba(255, 77, 79, .14);
  color: #ffd6d6
}

/* 个人中心入口暂不提供功能，统一隐藏。 */
.d-user-menu-popover [data-menu-action="profile"] {
  display: none !important
}

.logout-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, .42)
}

.logout-confirm-dialog {
  width: min(420px, 100%);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .18)
}

.logout-confirm-body {
  padding: 28px 24px 24px;
  text-align: center
}

.logout-confirm-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin: 0 auto 12px;
  border-radius: 50%;
  color: #f5222d;
  background: #fff1f0
}

.logout-confirm-title {
  color: #1a1a1a;
  font-size: 16px;
  font-weight: 700
}

.logout-confirm-text {
  margin-top: 8px;
  color: #8c8c8c;
  font-size: 13px;
  line-height: 1.6
}

.logout-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 24px;
  border-top: 1px solid #f0f0f0
}

.d-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0
}

.d-topbar {
  background: #fff;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
  flex-shrink: 0
}

.d-content {
  flex: 1;
  overflow-y: auto;
  padding: 24px 32px
}

.page-action-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap
}

.d-breadcrumb {
  font-size: 14px;
  color: #8c8c8c
}

.d-page-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary)
}

/* 桌面端卡片 */
.d-card {
  background: #fff;
  border-radius: 10px;
  padding: 20px
}

.d-card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center
}

/* 统计卡片 */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 24px
}

.stat-card {
  background: #fff;
  border-radius: 12px;
  padding: 24px
}

.stat-label {
  font-size: 15px;
  color: #8c8c8c;
  margin-bottom: 10px
}

.stat-value {
  font-size: 40px;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 10px
}

.stat-tag {
  display: inline-block;
  font-size: 12px;
  padding: 3px 12px;
  border-radius: 20px;
  font-weight: 600
}

/* 表格 */
.d-table-wrap {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #ebeef5
}

.d-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto
}

.d-table thead tr {
  background: #f5f7fa
}

.d-table th {
  padding: 12px 16px;
  font-size: 13px;
  color: #909399;
  font-weight: 600;
  text-align: left;
  border-bottom: 1px solid #ebeef5;
  border-right: 1px solid #ebeef5;
  white-space: nowrap;
  user-select: none;
  position: relative
}

.d-table th:last-child {
  border-right: none
}

.d-table td {
  padding: 0 16px;
  font-size: 13px;
  color: #606266;
  border-bottom: 1px solid #ebeef5;
  border-right: 1px solid #ebeef5
}

.d-table td:last-child {
  border-right: none
}

.d-table tr:last-child td {
  border-bottom: none
}

/* 斑马纹 */
.d-table tbody tr:nth-child(even) td {
  background: #fafafa
}

.d-table tbody tr:hover td {
  background: #ecf5ff !important
}

.d-table .td-inner {
  padding: 12px 0;
  display: flex;
  align-items: center;
  gap: 10px
}

/* 固定行高（无 td-inner 时） */
.d-table td:not(:has(.td-inner)) {
  height: 48px;
  vertical-align: middle
}

/* 分页 */
.pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  padding: 14px 20px;
  border-top: 1px solid #f0f0f0
}

.page-btn {
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  cursor: pointer;
  background: #fff;
  color: #555
}

.page-btn:hover {
  border-color: var(--primary);
  color: var(--primary)
}

.page-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff
}

/* 管理端列表规范：左侧操作按钮，右侧筛选查询，分页控件在右 */
.d-content .toolbar,
.d-content .filter-bar,
.d-content .top-bar {
  align-items: center;
}

.d-content .toolbar > select:first-of-type,
.d-content .toolbar > .form-select:first-of-type,
.d-content .toolbar > .filter-select:first-of-type,
.d-content .toolbar > .search-box:first-child,
.d-content .toolbar > .search-input-wrap:first-child,
.d-content .toolbar > button:first-child + .search-box,
.d-content .toolbar > button:first-child + .search-input-wrap,
.d-content .filter-bar > select:first-of-type,
.d-content .filter-bar > .form-select:first-of-type,
.d-content .filter-bar > .filter-select:first-of-type,
.d-content .filter-bar > .search-wrap:first-child,
.d-content .filter-bar > button:first-child + .search-wrap,
.d-content .top-bar > select:first-of-type,
.d-content .top-bar > .filter-select:first-of-type {
  margin-left: auto;
}

.d-content .pagination,
.d-content .pagination-wrap {
  justify-content: flex-end;
}

.d-content .pagination > div:last-child,
.d-content .pagination-wrap > .page-btns {
  display: flex;
  gap: 6px;
  margin-left: 0;
}

/* 管理端页面规范：页面分区、页内 tabs、弹窗 */
.d-content .page-tabs,
.settings-layout .page-tabs {
  display: flex;
  align-items: center;
  gap: 24px;
  background: #fff;
  border-radius: 0;
  padding: 0 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid #f0f0f0;
}

.d-content .page-tab,
.settings-layout .page-tab {
  min-height: 48px;
  padding: 0;
  border-radius: 0;
  border-bottom: 2px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  color: #8c8c8c;
  cursor: pointer;
  transition: all .2s;
  white-space: nowrap;
}

.d-content .page-tab:hover,
.settings-layout .page-tab:hover {
  color: var(--primary);
  background: transparent;
}

.d-content .page-tab.active,
.settings-layout .page-tab.active {
  background: transparent;
  color: var(--primary);
  border-bottom-color: var(--primary);
}

.d-content .section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f0f0f0;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}

.layout-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.layout-card {
  background: #fff;
  border: 1px solid #ebeef5;
  border-radius: 8px;
}

.layout-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
}

.layout-toolbar-left,
.layout-toolbar-right,
.layout-actions,
.layout-filters {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.layout-filters {
  justify-content: flex-end;
  margin-left: auto;
}

.layout-filter-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, max-content));
  align-items: center;
  gap: 14px 24px;
  padding: 20px;
}

.layout-filter-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.layout-filter-label {
  font-size: 13px;
  color: var(--text-primary);
  font-weight: 600;
}

.layout-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  padding: 0 20px 18px;
}

.layout-stat-card {
  min-height: 68px;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: #fff;
}

.layout-stat-label {
  font-size: 13px;
  color: var(--text-secondary);
}

.layout-stat-value {
  font-size: 20px;
  line-height: 1;
  font-weight: 800;
  color: var(--text-primary);
}

.layout-split {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 16px;
}

/* 进度条 */
.layout-tree {
  background: #fff;
  border: 1px solid #ebeef5;
  border-radius: 8px;
  padding: 12px;
  min-height: 520px;
}

.layout-tree-search {
  margin-bottom: 12px;
}

.layout-tree-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.layout-tree-item {
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
}

.layout-tree-item:hover {
  background: #f5f7fa;
  color: var(--text-primary);
}

.layout-tree-item.active {
  background: var(--primary-light);
  color: var(--primary);
  font-weight: 700;
}

.layout-tree-item.level-2 {
  padding-left: 26px;
}

.layout-tree-item.level-3 {
  padding-left: 42px;
}

.detail-shell {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.detail-summary {
  background: #fff;
  border: 1px solid #ebeef5;
  border-radius: 8px;
  padding: 20px 24px;
}

.detail-summary-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 14px;
}

.detail-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-primary);
}

.detail-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 28px;
  font-size: 14px;
  color: var(--text-primary);
}

.detail-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.detail-section {
  background: #fff;
  border: 1px solid #ebeef5;
  border-radius: 8px;
  padding: 20px 24px;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px 48px;
}

.detail-field {
  display: flex;
  gap: 8px;
  min-width: 0;
  font-size: 14px;
}

.detail-field-label {
  flex-shrink: 0;
  color: var(--text-secondary);
  font-weight: 600;
}

.detail-field-value {
  min-width: 0;
  color: var(--text-primary);
  word-break: break-word;
}

.detail-field.full {
  grid-column: 1 / -1;
}

.edit-form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px 28px;
}

.edit-form-grid .form-group {
  margin-bottom: 0;
}

.edit-form-grid .form-group.full {
  grid-column: 1 / -1;
}

.edit-footer {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 20px 0 4px;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, .45);
}

.modal-overlay.show {
  display: flex;
}

.modal,
.modal-box {
  width: 560px;
  max-width: min(92vw, 720px);
  max-height: 86vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .18);
}

.modal.modal-sm,
.modal-box.modal-sm {
  width: 420px;
}

.modal.modal-lg,
.modal-box.modal-lg {
  width: 760px;
  max-width: min(94vw, 920px);
}

.modal-title {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 24px 16px;
  margin-bottom: 0;
  border-bottom: 1px solid #f0f0f0;
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
}

.modal-close {
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
  color: #595959;
  font-size: 16px;
  line-height: 1;
  font-family: inherit;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

.modal-close:hover {
  background: #e8e8e8;
  color: #262626;
}

.modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
}

.modal-footer {
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 24px;
  margin-top: 0;
  border-top: 1px solid #f0f0f0;
  background: #fff;
}

.modal > .form-group:first-of-type,
.modal-box > .form-group:first-of-type,
.modal > .form-row:first-of-type,
.modal-box > .form-row:first-of-type {
  margin-top: 20px;
}

.progress-bar {
  height: 6px;
  background: #f0f0f0;
  border-radius: 3px;
  overflow: hidden
}

.progress-fill {
  height: 100%;
  border-radius: 3px;
  transition: width .3s
}

.fill-primary {
  background: var(--primary)
}

.fill-success {
  background: var(--success)
}

.fill-warning {
  background: var(--warning)
}

.fill-danger {
  background: var(--danger)
}

.fill-gradient {
  background: linear-gradient(90deg, var(--danger), var(--warning))
}

/* 返回按钮 */
.back-nav {
  position: fixed;
  top: 20px;
  left: 20px;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 13px;
  z-index: 999;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 6px;
  backdrop-filter: blur(8px)
}

.back-nav:hover {
  background: rgba(0, 0, 0, .75)
}

/* 空状态 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  color: #8c8c8c;
  gap: 12px
}

.empty-state svg {
  width: 64px;
  height: 64px;
  opacity: .3
}

.empty-state p {
  font-size: 14px
}