/* 后台管理样式（自研） */
body { background: #f3f5f9; font-size: 14px; color: #31394d; font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; }
a { text-decoration: none; }

.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #3e7bfa 0%, #6995ff 100%); }
.login-card { background: #fff; border-radius: 14px; padding: 36px 34px; width: min(380px, calc(100vw - 30px)); box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.login-logo { width: 54px; height: 54px; margin: 0 auto 14px; border-radius: 14px; background: linear-gradient(135deg,#3e7bfa,#6995ff); color: #fff; font-size: 26px; display: flex; align-items: center; justify-content: center; }
.login-title { font-size: 18px; text-align: center; margin-bottom: 22px; }

.admin-layout { display: flex; min-height: 100vh; }
.admin-side { width: 210px; background: #22252f; color: #aeb5c4; flex-shrink: 0; position: fixed; top: 0; bottom: 0; overflow-y: auto; }
.admin-brand { color: #fff; font-weight: 700; font-size: 16px; padding: 18px 20px; display: flex; gap: 8px; align-items: center; }
.admin-brand i { color: #6ea0ff; }
.admin-menu { list-style: none; margin: 0; padding: 0; }
.admin-menu a { display: flex; align-items: center; gap: 10px; padding: 11px 20px; color: #aeb5c4; transition: all .15s; font-size: 13.5px; }
.admin-menu a:hover { color: #fff; background: rgba(255,255,255,.06); }
.admin-menu li.active a { color: #fff; background: #3e7bfa; }
.menu-div { border-top: 1px solid rgba(255,255,255,.08); margin: 8px 16px; }
.admin-main { flex: 1; margin-left: 210px; min-width: 0; }
.admin-topbar { background: #fff; padding: 14px 22px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid #e6e9f0; position: sticky; top: 0; z-index: 10; }
.admin-body { padding: 20px 22px; }

.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 18px; }
.stat-card { background: #fff; border-radius: 10px; padding: 16px 18px; box-shadow: 0 1px 3px rgba(0,0,0,.05); }
.stat-num { font-size: 24px; font-weight: 700; color: #3e7bfa; }
.stat-name { color: #8a94a6; font-size: 12.5px; margin-top: 2px; }

.panel { background: #fff; border-radius: 10px; box-shadow: 0 1px 3px rgba(0,0,0,.05); overflow: hidden; }
.panel-head { padding: 12px 16px; border-bottom: 1px solid #eef0f5; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.panel-body { padding: 16px; }
.table { margin: 0; }
.table th { background: #fafbfd; font-size: 12.5px; color: #8a94a6; font-weight: 500; border-top: 0; }
.table th:first-child { padding-left: 20px; }
.table th:last-child { padding-right: 20px; }
.table td { font-size: 13px; vertical-align: middle; }
.table td:first-child { padding-left: 20px; }
.table td:last-child { padding-right: 20px; }
.row-parent td { background: #f7f9ff; }
.btn-mini { display: inline-block; border: 1px solid #d7dce6; color: #5b6478; border-radius: 13px; padding: 2px 10px; font-size: 12px; background: #fff; cursor: pointer; transition: all .15s; white-space: nowrap; }
.btn-mini:hover { border-color: #3e7bfa; color: #3e7bfa; }
.btn-danger-mini:hover { border-color: #e05252; color: #e05252; }
.btn-success-mini:hover { border-color: #3aa757; color: #3aa757; }
.btn-primary-mini { border-color: #3e7bfa; color: #3e7bfa; background: #f1f6ff; }
.btn-sm { white-space: nowrap; flex-shrink: 0; }
.badge-rec { background: #fff3e0; color: #e69100; border: 1px solid #ffcb9d; border-radius: 4px; font-size: 10px; padding: 0 4px; }
.json-area { font-family: Menlo, Consolas, monospace; font-size: 12px; }
code { background: #f2f3f5; padding: 1px 5px; border-radius: 4px; }

/* ===== 菜单/卡片编辑器（紧凑布局） ===== */
.menu-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.menu-item-card { background: #f8f9fc; border: 1px solid #e8ecf3; border-radius: 8px; padding: 10px; width: 320px; }
.menu-card-top { display: flex; align-items: center; gap: 8px; }
.menu-card-fields { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.menu-card-fields .form-control-sm { font-size: 12px; padding: 4px 8px; }
.menu-card-actions { display: flex; gap: 3px; flex-shrink: 0; align-items: center; }

/* 图标预览+选择 */
.icon-pick-wrap { display: flex; flex-direction: column; align-items: center; gap: 2px; flex-shrink: 0; }
.icon-preview-box { width: 36px; height: 36px; border: 1px solid #e0e4ec; border-radius: 6px; display: flex; align-items: center; justify-content: center; background: #fff; font-size: 18px; color: #3e7bfa; }
.icon-pick-wrap .btn-mini { padding: 1px 6px; font-size: 11px; }
.icon-pick-wrap.icon-pick-row { flex-direction: row; align-items: center; gap: 6px; }
.board-icon-box { overflow: hidden; }
.board-icon-preview { width: 100%; height: 100%; object-fit: contain; }
.board-icon-cell { align-items: stretch; gap: 4px; }
.board-icon-cell .bic-row { display: flex; align-items: center; gap: 4px; }
.board-icon-cell .icon-preview-box { width: 30px; height: 30px; font-size: 16px; }
.board-img-box { overflow: hidden; }
.board-drag-handle { cursor: grab; color: #b6bdca; font-size: 14px; letter-spacing: -2px; user-select: none; }
.board-drag-handle:active { cursor: grabbing; }
tr.board-dragging { opacity: .5; background: #eef4ff; }

/* 榜单背景颜色选择器：色块 + 16进制编码 + 透明度 */
.cp-wrap { display: flex; flex-direction: column; gap: 5px; min-width: 185px; }
.cp-row { display: flex; align-items: center; gap: 6px; }
.cp-picker { width: 34px; height: 30px; padding: 0; border: 1px solid #ccc; border-radius: 4px; background: #fff; cursor: pointer; flex-shrink: 0; }
.cp-hex { flex: 1; min-width: 0; font-family: Menlo, Consolas, monospace; font-size: 12px; }
.cp-alpha { flex: 1; min-width: 0; }
.cp-alpha-val { font-size: 11px; color: #8a94a6; width: 34px; text-align: right; flex-shrink: 0; }
.cp-preview { height: 16px; border-radius: 4px; border: 1px solid #e0e4ec; overflow: hidden;
  background-image: linear-gradient(45deg,#e6e8ee 25%,transparent 25%,transparent 75%,#e6e8ee 75%), linear-gradient(45deg,#e6e8ee 25%,transparent 25%,transparent 75%,#e6e8ee 75%);
  background-size: 12px 12px; background-position: 0 0, 6px 6px; }
.cp-preview > i { display: block; height: 100%; }

/* 下拉菜单组 */
.dropdown-group { margin-bottom: 10px; }
.dropdown-items-wrap { padding: 8px 0; margin-left: 44px; border-left: 2px solid #e8ecf3; }
.dropdown-items-wrap.collapsed { display: none; }

/* ===== 推广卡片编辑器 ===== */
.promo-card-item { background: #fff; border: 1px solid #dde2ec; border-radius: 8px; margin-bottom: 10px; overflow: hidden; }
.promo-card-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #fafbfd; border-bottom: 1px solid #eef0f5; }
.promo-card-head .menu-card-fields .form-control-sm { font-size: 12px; padding: 4px 8px; }
.promo-card-preview { width: 40px; height: 40px; border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; }
.promo-links-wrap { padding: 8px 12px; }
.promo-links-wrap.collapsed { display: none; }
.promo-links-list { display: flex; flex-wrap: wrap; gap: 6px; }
.promo-link-row { display: flex; align-items: center; gap: 6px; background: #fafbfd; border: 1px solid #eef0f5; border-radius: 6px; padding: 6px 8px; width: 400px; }
.promo-link-row .menu-card-fields { flex: 1; min-width: 0; }
.promo-link-row .menu-card-fields .form-control-sm { font-size: 12px; padding: 4px 8px; }

/* ===== 图标选择器弹窗 ===== */
.icon-picker-popup { position: absolute; z-index: 9999; background: #fff; border: 1px solid #d7dce6; border-radius: 10px; box-shadow: 0 8px 30px rgba(0,0,0,.15); width: 480px; max-height: 420px; display: none; }
.icon-picker-header { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid #eef0f5; }
.icon-picker-header input { flex: 1; border: 1px solid #d7dce6; border-radius: 6px; padding: 4px 8px; font-size: 12px; outline: none; }
.icon-picker-header input:focus { border-color: #3e7bfa; }
.icon-picker-close { background: none; border: none; font-size: 18px; cursor: pointer; color: #8a94a6; padding: 0 4px; }
.icon-picker-close:hover { color: #e05252; }
.icon-picker-body { padding: 8px 10px; overflow-y: auto; max-height: 360px; }
.icon-picker-body h6 { font-size: 11px; color: #8a94a6; margin: 6px 0 4px; }
.icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 3px; }
.icon-pick-item { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 5px 2px; border-radius: 6px; cursor: pointer; transition: background .15s; border: 1px solid transparent; gap: 1px; }
.icon-pick-item:hover { background: #eef3ff; border-color: #c5d5fa; }
.icon-pick-item i { font-size: 18px; color: #3e7bfa; }
.icon-pick-item span { font-size: 9px; color: #8a94a6; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }

.gap-1 { gap: 4px; }

@media (max-width: 767.98px) {
  .admin-side { width: 60px; }
  .admin-side .admin-brand { font-size: 0; padding: 18px 0; justify-content: center; }
  .admin-side .admin-brand i { font-size: 20px; }
  .admin-menu a { justify-content: center; padding: 12px 0; font-size: 0; }
  .admin-menu a i { font-size: 17px; }
  .admin-main { margin-left: 60px; }
}