/* ============ GEO CMS 管理后台样式 ============ */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px; color: #2c3444; background: #eef1f6;
}
a { text-decoration: none; color: inherit; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: 14px; }

/* ---------- 布局 ---------- */
.layout { display: flex; min-height: 100vh; }
.sidebar {
  width: 230px; flex: 0 0 230px; background: #1f2733; color: #c5cdd8;
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.logo {
  height: 64px; display: flex; flex-direction: column; justify-content: center;
  padding: 0 20px; color: #fff; font-size: 18px; font-weight: 700; letter-spacing: 1px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.logo small { font-size: 11px; font-weight: 400; color: #7b8798; letter-spacing: 3px; margin-top: 2px; }
.menu { padding: 12px 0; flex: 1; }

.menu-title { padding: 14px 20px 6px; font-size: 12px; color: #6b7686; }
.menu-item {
  display: flex; align-items: center; padding: 12px 20px; cursor: pointer; user-select: none;
  color: #c5cdd8; transition: all .18s; font-size: 14px; border-left: 3px solid transparent;
}
.menu-item:hover { background: #28323f; color: #fff; }
.menu-item .arrow {
  width: 0; height: 0; margin-right: 10px; border-left: 5px solid #7b8798;
  border-top: 4px solid transparent; border-bottom: 4px solid transparent; transition: transform .2s;
}
.menu-group.open .menu-item .arrow { transform: rotate(90deg); }
.submenu { display: none; background: #19202a; }
.menu-group.open .submenu { display: block; }
.submenu a {
  display: block; padding: 10px 20px 10px 46px; color: #97a2b0; font-size: 13px; transition: all .15s;
  border-left: 3px solid transparent;
}
.submenu a:hover { color: #fff; background: #212b38; }
.submenu a.active { color: #fff; background: #263243; border-left-color: #3b82f6; }
.sidebar .foot { padding: 14px 20px; font-size: 11px; color: #566174; border-top: 1px solid rgba(255,255,255,.06); }

/* ---------- 顶栏 ---------- */
.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.topbar {
  height: 64px; background: #fff; display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px; box-shadow: 0 1px 4px rgba(31,45,61,.08); position: sticky; top: 0; z-index: 50;
}
.crumb { font-size: 16px; font-weight: 600; color: #2c3444; }
.user-info { display: flex; align-items: center; gap: 12px; color: #6b7686; }
.user-info .avatar {
  width: 34px; height: 34px; border-radius: 50%; background: #3b82f6; color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600;
}
.user-info a.logout { color: #e5484d; }
.user-info a.logout:hover { text-decoration: underline; }

.content { padding: 24px; flex: 1; }
.panel { background: #fff; border-radius: 10px; padding: 20px; box-shadow: 0 1px 4px rgba(31,45,61,.06); margin-bottom: 20px; }
.panel-title { font-size: 15px; font-weight: 600; margin-bottom: 16px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.panel-title .ops { display: flex; gap: 10px; }

/* ---------- 通用组件 ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 6px; border: none; border-radius: 6px;
  padding: 8px 16px; font-size: 14px; transition: all .15s; background: #3b82f6; color: #fff;
}
.btn:hover { background: #2f6fe0; }
.btn.green { background: #16a34a; } .btn.green:hover { background: #12813c; }
.btn.red { background: #e5484d; } .btn.red:hover { background: #cf3a3f; }
.btn.ghost { background: #fff; color: #47546a; border: 1px solid #d5dbe5; }
.btn.ghost:hover { border-color: #3b82f6; color: #3b82f6; }
.btn.sm { padding: 4px 10px; font-size: 12px; border-radius: 4px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid #eef1f5; font-size: 13px; }
.table th { background: #f7f9fc; color: #667085; font-weight: 600; white-space: nowrap; }
.table tr:hover td { background: #fafbfd; }

.tag {
  display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 12px;
  background: #eff4ff; color: #3b82f6; border: 1px solid #d6e4ff; margin: 1px;
}
.tag.green { background: #ecfdf3; color: #12813c; border-color: #c7f0d6; }
.tag.orange { background: #fff6e6; color: #c77700; border-color: #ffe0a3; }
.tag.red { background: #fef0f0; color: #d92d20; border-color: #fbc9c9; }
.tag.gray { background: #f2f4f7; color: #667085; border-color: #e0e4eb; }

.empty { text-align: center; color: #98a2b3; padding: 40px 0; }

/* ---------- 表单 ---------- */
.form-row { margin-bottom: 14px; }
.form-row label { display: block; font-size: 13px; color: #47546a; margin-bottom: 6px; font-weight: 600; }
.input, select.input, textarea.input {
  width: 100%; padding: 8px 12px; border: 1px solid #d5dbe5; border-radius: 6px; outline: none;
  transition: border .15s, box-shadow .15s; background: #fff;
}
.input:focus { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,.12); }
textarea.input { resize: vertical; min-height: 90px; }

/* ---------- 卡片网格 ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.stat-card { background: #fff; border-radius: 10px; padding: 20px; box-shadow: 0 1px 4px rgba(31,45,61,.06); }
.stat-card .num { font-size: 28px; font-weight: 700; color: #1f2733; }
.stat-card .label { color: #667085; font-size: 13px; margin-top: 4px; }
.stat-card.blue .num { color: #3b82f6; }
.stat-card.green .num { color: #16a34a; }
.stat-card.orange .num { color: #c77700; }
.stat-card.purple .num { color: #7c3aed; }

/* ---------- 左右结构页面 ---------- */
.split { display: flex; gap: 20px; align-items: flex-start; }
.split-left { width: 300px; flex: 0 0 300px; }
.split-right { flex: 1; min-width: 0; }
@media (max-width: 1000px) { .split { flex-direction: column; } .split-left { width: 100%; flex: none; } }

.lib-list { display: flex; flex-direction: column; gap: 8px; max-height: 640px; overflow-y: auto; }
.lib-item {
  border: 1px solid #e4e8ef; border-radius: 8px; padding: 12px 14px; cursor: pointer;
  transition: all .15s; background: #fff; position: relative;
}
.lib-item:hover { border-color: #93b4f5; }
.lib-item.active { border-color: #3b82f6; background: #f3f7ff; box-shadow: 0 0 0 1px #3b82f6 inset; }
.lib-item .lib-name { font-weight: 600; font-size: 14px; margin-bottom: 4px; word-break: break-all; }
.lib-item .lib-meta { font-size: 12px; color: #8a94a6; }
.lib-item .lib-remark { font-size: 12px; color: #a1aab8; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lib-item .lib-ops { position: absolute; right: 10px; top: 8px; display: none; }
.lib-item:hover .lib-ops { display: flex; gap: 6px; }
.lib-ops button { border: none; background: none; color: #98a2b3; font-size: 12px; padding: 2px; }
.lib-ops button:hover { color: #3b82f6; }
.lib-ops button.del:hover { color: #e5484d; }

/* ---------- 词块 chip ---------- */
.chip-box { border: 1px solid #e4e8ef; border-radius: 8px; padding: 12px; background: #fbfcfe; }
.chip-box-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.chip-box-head .name { font-weight: 600; font-size: 13px; }
.chip-box-head .ops { display: flex; gap: 8px; }
.chip-box-head .ops a { font-size: 12px; color: #3b82f6; cursor: pointer; }
.chip-box-head .ops a:hover { text-decoration: underline; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 30px; max-height: 130px; overflow-y: auto; }
.chip {
  padding: 4px 12px; border-radius: 14px; border: 1px solid #d5dbe5; background: #fff;
  font-size: 13px; cursor: pointer; user-select: none; transition: all .12s; color: #47546a;
}
.chip:hover { border-color: #3b82f6; color: #3b82f6; }
.chip.on { background: #3b82f6; border-color: #3b82f6; color: #fff; }
.chip .x { margin-left: 6px; color: #c94a4f; }

/* ---------- 格式卡片 ---------- */
.format-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.format-card {
  border: 1px solid #e4e8ef; border-radius: 8px; padding: 10px 12px; cursor: pointer;
  transition: all .15s; background: #fff;
}
.format-card:hover { border-color: #93b4f5; }
.format-card.on { border-color: #3b82f6; background: #f3f7ff; box-shadow: 0 0 0 1px #3b82f6 inset; }
.format-card .fmt-name { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.format-card .fmt-demo { font-size: 12px; color: #98a2b3; word-break: break-all; }
.custom-format-row { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; align-items: center; }
.custom-format-row select { flex: 1; min-width: 90px; }

/* ---------- 豆包关键词页 ---------- */
.db-answer { white-space: pre-wrap; word-break: break-all; line-height: 1.8; color: #47546a; font-size: 14px; background: #fbfcfe; border: 1px solid #e4e8ef; border-radius: 8px; padding: 14px; }

/* ---------- 导入地域名弹窗 ---------- */
.tpl-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; background: #f6f8fc; border: 1px solid #e4e8ef; border-radius: 8px; padding: 10px 12px; margin-bottom: 14px; }
.tpl-bar .tpl-label { font-size: 13px; font-weight: 600; color: #47546a; }
.tpl-bar select.input { width: 220px; }
.region-grid { display: grid; grid-template-columns: 7fr 6fr; gap: 18px; }
.region-left { border-right: 1px solid #e4e8ef; padding-right: 18px; }
.region-crumbs { margin-bottom: 8px; font-size: 13px; color: #47546a; }
.region-crumbs a { color: #3b82f6; cursor: pointer; }
.region-crumbs a:hover { text-decoration: underline; }
.region-tree { border: 1px solid #e4e8ef; border-radius: 8px; height: 330px; overflow-y: auto; background: #fbfcfe; }
.region-node { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-bottom: 1px solid #f0f2f7; font-size: 13px; }
.region-node:last-child { border-bottom: none; }
.region-node:hover { background: #f3f7ff; }
.region-node .nm { cursor: pointer; color: #2c5bd9; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.region-node .nm:hover { text-decoration: underline; }
.region-node .leaf { flex: 1; color: #47546a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.region-node .meta { color: #98a2b3; font-size: 12px; flex-shrink: 0; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.region-tip { margin-top: 8px; color: #98a2b3; font-size: 12px; }
.radio-list { display: flex; flex-direction: column; gap: 8px; }
.radio-item { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 400; color: #47546a; cursor: pointer; }
.region-preview { border: 1px solid #e4e8ef; border-radius: 8px; padding: 10px; background: #fbfcfe; min-height: 60px; max-height: 160px; overflow-y: auto; display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start; }
.region-preview .chip { cursor: default; background: #eef4ff; border-color: #d6e4ff; color: #2c5bd9; }
@media (max-width: 760px) { .region-grid { grid-template-columns: 1fr; } .region-left { border-right: none; padding-right: 0; } }
.custom-format-row .plus { color: #98a2b3; }

/* ---------- 弹窗 ---------- */
.modal-mask {
  display: none; position: fixed; inset: 0; background: rgba(15,23,42,.5); z-index: 1000;
  align-items: flex-start; justify-content: center; overflow-y: auto; padding: 40px 16px;
}
.modal-mask.show { display: flex; }
.modal {
  background: #fff; border-radius: 12px; width: 720px; max-width: 100%;
  box-shadow: 0 20px 50px rgba(15,23,42,.25); animation: pop .18s ease;
}
.modal.wide { width: 960px; }
@keyframes pop { from { transform: translateY(-12px); opacity: 0; } to { transform: none; opacity: 1; } }
.modal-head { padding: 16px 20px; border-bottom: 1px solid #eef1f5; display: flex; justify-content: space-between; align-items: center; }
.modal-head h3 { font-size: 16px; }
.modal-close { border: none; background: none; font-size: 20px; color: #98a2b3; line-height: 1; }
.modal-close:hover { color: #2c3444; }
.modal-body { padding: 20px; max-height: 65vh; overflow-y: auto; }
.modal-foot { padding: 14px 20px; border-top: 1px solid #eef1f5; display: flex; justify-content: flex-end; gap: 10px; }

/* ---------- 预览结果 ---------- */
.preview-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; flex-wrap: wrap; gap: 8px; }
.preview-count { font-size: 13px; color: #47546a; }
.preview-count b { color: #16a34a; font-size: 16px; }
.preview-list {
  border: 1px solid #e4e8ef; border-radius: 8px; background: #fbfcfe; padding: 12px;
  display: flex; flex-wrap: wrap; gap: 6px; max-height: 260px; overflow-y: auto;
}
.preview-list .chip { cursor: default; background: #eef4ff; border-color: #d6e4ff; color: #2c5bd9; }
.warn-text { color: #c77700; font-size: 12px; }

.step-title { font-size: 13px; font-weight: 600; color: #47546a; margin: 18px 0 10px; display: flex; align-items: center; gap: 8px; }
.step-title .no { background: #3b82f6; color: #fff; width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; }
.step-title:first-child { margin-top: 0; }

/* ---------- 登录页 ---------- */
.login-page {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #1f2733 0%, #2b3b55 60%, #3b82f6 130%);
}
.login-box { background: #fff; border-radius: 14px; padding: 36px; width: 380px; box-shadow: 0 24px 60px rgba(0,0,0,.35); }
.login-box h1 { font-size: 20px; text-align: center; margin-bottom: 6px; }
.login-box .sub { text-align: center; color: #98a2b3; font-size: 13px; margin-bottom: 24px; }
.login-box .form-row input { padding: 11px 12px; }
.login-box .btn { width: 100%; padding: 11px; font-size: 15px; justify-content: center; margin-top: 4px; }
.err-msg { background: #fef0f0; color: #d92d20; border: 1px solid #fbc9c9; padding: 9px 12px; border-radius: 6px; font-size: 13px; margin-bottom: 14px; }

/* ---------- toast ---------- */
#toast {
  position: fixed; top: 20px; left: 50%; transform: translateX(-50%) translateY(-80px); z-index: 2000;
  padding: 10px 20px; border-radius: 8px; color: #fff; font-size: 14px; transition: transform .25s;
  box-shadow: 0 8px 24px rgba(15,23,42,.25); background: #2c3444; max-width: 80vw;
}
#toast.ok { background: #16a34a; }
#toast.err { background: #e5484d; }
#toast.show { transform: translateX(-50%) translateY(0); }

.pager { display: flex; gap: 6px; justify-content: flex-end; margin-top: 14px; flex-wrap: wrap; }
.pager a, .pager span.cur {
  padding: 5px 11px; border: 1px solid #d5dbe5; border-radius: 5px; font-size: 13px; color: #47546a; background: #fff;
}
.pager span.cur { background: #3b82f6; border-color: #3b82f6; color: #fff; }