/* 管理后台样式 — 工业蓝，简洁专业 */
:root {
  /* 与官网前台 style.css 保持同一套设计令牌，避免调色板漂移 */
  --c-navy-900: #042c53; --c-navy-800: #0c447c; --c-navy-700: #123655;
  --c-blue-600: #185fa5; --c-blue-500: #2a78c2; --c-blue-400: #378add; --c-blue-100: #e6f1fb;
  --c-steel-600: #41566b; --c-steel-500: #5b6b7a; --c-steel-400: #8a98a6;
  --c-line: #dfe5ec; --c-bg-soft: #eef2f6;
  --c-ink: #16222e; --c-ink-soft: #44525f;
  --c-accent: #ef9f27; --c-ok: #1f9d6b; --c-err: #c0392b;
  --font-display: "Barlow Condensed", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-body: "Barlow", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --radius-sm: 6px; --radius: 10px; --radius-lg: 16px;
  --space-3: 12px; --space-4: 16px; --space-5: 24px;
  --admin-bar-h: 56px;
  --admin-content-max: 1000px;
}
* { box-sizing: border-box; }
.admin-body { margin: 0; background: var(--c-bg-soft); color: var(--c-ink); font-family: var(--font-body); }

/* 登录 */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px;
  background: radial-gradient(900px 500px at 80% -10%, rgba(46,139,214,.25), transparent 60%), linear-gradient(160deg, var(--c-navy-900), var(--c-navy-800)); }
.login-card { width: 100%; max-width: 380px; background: #fff; border-radius: 14px; padding: 32px; box-shadow: 0 18px 48px rgba(10,31,51,.25); }
.login-brand { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 18px; }
.login-brand .brand__mark { width: 40px; height: 40px; border-radius: 9px; background: linear-gradient(135deg, var(--c-navy-900), var(--c-blue-600)); display: grid; place-items: center; color: #fff; text-decoration: none; }
.login-brand strong { display: block; font-size: 18px; color: var(--c-navy-900); }
.login-brand small { color: #5b6b7a; font-size: 12px; letter-spacing: .08em; }
.login-card h1 { font-family: var(--font-display); font-size: 25px; line-height: 1.15; margin: 6px 0 4px; color: var(--c-navy-900); text-align: center; }
.login-sub { font-family: var(--font-display); font-size: 14px; letter-spacing: .04em; color: var(--c-steel-500); margin: 0 0 20px; text-align: center; font-weight: 500; }
.login-form { display: grid; gap: 14px; }
.login-form label { display: grid; gap: 6px; font-weight: 600; font-size: 14px; color: var(--c-navy-900); }
.login-form input { padding: 11px 13px; border: 1.5px solid var(--c-line); border-radius: 8px; font-size: 15px; font-family: inherit; }
.login-form input:focus { border-color: var(--c-blue-600); outline: none; box-shadow: 0 0 0 3px rgba(46,139,214,.15); }
.login-err { color: #d6453f; font-size: 13.5px; margin: 0; min-height: 18px; }

/* 登录分隔线 + 企微按钮 */
.login-divider { display: flex; align-items: center; margin: 18px 0; color: var(--c-steel-500); font-size: 12.5px; }
.login-divider::before, .login-divider::after { content: ""; flex: 1; height: 1px; background: #e2e8ef; }
.login-divider span { padding: 0 12px; }
.btn--wecom { background: #07c160; color: #fff; border: 0; padding: 11px 14px; border-radius: 8px; font-size: 15px; font-weight: 600; font-family: inherit; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; transition: background .15s; }
.btn--wecom:hover { background: #06ad56; }
.btn--wecom .ic { width: 20px; height: 20px; }
.bind-tip { font-size: 13.5px; color: #5b6b7a; line-height: 1.6; margin: 0 0 18px; padding: 12px 14px; background: #f0f6ff; border-radius: 8px; border-left: 3px solid var(--c-blue-600); }
.bind-tip strong { color: var(--c-navy-900); }

/* 顶栏 */
.admin-bar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--c-navy-900); color: #fff; padding: 12px 22px; flex-wrap: wrap; min-height: var(--admin-bar-h); }
.admin-bar__left { display: flex; align-items: center; gap: 10px; }
.admin-bar__left .brand__mark { width: 32px; height: 32px; border-radius: 8px; background: linear-gradient(135deg, #0e2a45, var(--c-blue-600)); display: grid; place-items: center; color: #fff; }
.brand__logo-fallback { display: none; width: 24px; height: 24px; }
.brand__logo-img { width: 100%; height: 100%; object-fit: contain; border-radius: inherit; display: block; }
.admin-bar__left strong { font-family: "Barlow Condensed", sans-serif; font-size: 18px; letter-spacing: .02em; }
.admin-user { font-size: 13px; color: #9fb4c8; padding-left: 12px; border-left: 1px solid rgba(255,255,255,.18); }
.admin-bar__right { display: flex; gap: 10px; flex-wrap: wrap; }
.admin-bar .btn { font-family: var(--font-display); font-size: 16px; padding: 9px 18px; }
.admin-bar .btn--light { background: rgba(255,255,255,.12); color: #fff; }
.admin-bar .btn--light:hover { background: rgba(255,255,255,.2); }
/* 顶栏幽灵按钮：深底上默认 navy 文字不可见，改白色文字 + 浅描边 */
.admin-bar .btn--ghost { color: #fff; border-color: rgba(255,255,255,.32); background: transparent; }
.admin-bar .btn--ghost:hover { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.5); }

/* 布局 */
.admin-main { display: grid; grid-template-columns: 220px 1fr; gap: 0; align-items: start; }
@media (max-width: 1000px) { .admin-main { grid-template-columns: 1fr; } .admin-nav { position: static !important; top: auto; } }
.admin-nav { position: sticky; top: var(--admin-bar-h); align-self: start; padding: 18px 12px; display: grid; gap: 2px; }
.admin-nav a { display: block; padding: 9px 12px; border-radius: 8px; color: #44525f; font-weight: 600; font-size: 14px; text-decoration: none; transition: background .15s ease, color .15s ease, transform .15s ease; }
/* 键盘焦点可见性（后台 CRUD 页仅引 admin.css，无前台全局焦点环，此处补齐） */
.admin-body :focus-visible { outline: 3px solid var(--c-blue-400); outline-offset: 2px; border-radius: 6px; }
.admin-nav .nav-group__link:focus-visible, .admin-nav a:focus-visible { outline-offset: -2px; }
.admin-nav a:hover { background: #e1e8ef; color: var(--c-navy-900); transform: translateX(3px); }
.admin-nav a.active { background: var(--c-navy-800); color: #fff; }
.admin-content { padding: 22px; width: 100%; max-width: var(--admin-content-max); margin-inline: auto; display: grid; gap: 20px; }

/* 分区卡片 */
.panel { background: #fff; border: 1px solid var(--c-line); border-radius: 12px; overflow: hidden; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.panel:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(20,83,143,.12); border-color: var(--c-blue-500); }
.panel__head { padding: 14px 18px; background: #f4f6f9; border-bottom: 1px solid var(--c-line); display: flex; align-items: center; justify-content: space-between; }
.panel__head h2 { font-family: "Barlow Condensed", sans-serif; font-size: 20px; margin: 0; color: var(--c-navy-900); }
.panel__head .pill { font-size: 12px; color: #5b6b7a; background: var(--c-bg-soft); padding: 3px 10px; border-radius: 99px; }
.panel__body { padding: 18px; display: grid; gap: 16px; }

/* 字段 */
.field { display: grid; gap: 6px; }
.field > label { font-weight: 600; font-size: 13.5px; color: var(--c-navy-900); white-space: normal; overflow-wrap: anywhere; }
/* hint（如图标可选的长串 forklift/warehouse/...）改为独立成行并允许在任意字符处断行，
   避免长串不换行被 .panel{overflow:hidden} 裁掉而“展示不完整” */
.field .hint { display: block; margin-top: 4px; font-size: 12px; color: var(--c-steel-500); overflow-wrap: anywhere; word-break: break-word; line-height: 1.5; }
.field input, .field textarea, .field select { font-family: inherit; font-size: 14.5px; padding: 10px 12px; border: 1.5px solid var(--c-line); border-radius: 8px; width: 100%; background: #fff; color: var(--c-ink); }
.field textarea { resize: vertical; min-height: 76px; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--c-blue-600); outline: none; box-shadow: 0 0 0 3px rgba(46,139,214,.15); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 600px) { .grid-2 { grid-template-columns: 1fr; } }

/* 数组项 */
.array-item { border: 1px solid var(--c-line); border-radius: 10px; padding: 14px; background: #fafbfc; position: relative; }
.array-item__bar { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.array-item__bar span { margin-right: auto; font-size: 12.5px; font-weight: 700; color: #5b6b7a; letter-spacing: .04em; }
.btn-move { border: 1px solid var(--c-line); background: #fff; color: var(--c-navy-800); width: 28px; height: 28px; border-radius: 7px; cursor: pointer; font-size: 14px; line-height: 1; }
.btn-move:hover:not(:disabled) { background: #e3f0fb; }
.btn-move:disabled { color: #c5cdd6; cursor: not-allowed; }
.btn-x { border: 1px solid var(--c-line); background: #fff; color: #d6453f; width: 28px; height: 28px; border-radius: 7px; cursor: pointer; font-size: 16px; line-height: 1; }
.btn-x:hover { background: #fdeceb; }
.btn-add { margin-top: 4px; border: 1.5px dashed var(--c-blue-600); background: #f1f7fd; color: var(--c-navy-800); padding: 9px 14px; border-radius: 8px; font-weight: 600; cursor: pointer; font-family: inherit; }
.btn-add:hover { background: #e3f0fb; }

/* 图片字段 */
.img-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.img-row input[type="file"] { font-size: 13px; max-width: 240px; }
.img-row .btn-add { margin-top: 0; }
.img-prev { margin-top: 10px; min-height: 0; }
.img-prev img { display: block; max-width: 260px; max-height: 180px; width: auto; border-radius: 8px; border: 1px solid var(--c-line); box-shadow: 0 4px 14px rgba(10,31,51,.1); }

/* Toast */
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--c-ok); color: #fff; padding: 12px 20px; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.2); z-index: 80; font-size: 14.5px; }
.toast.err { background: var(--c-err); }
.toast[hidden] { display: none; }

/* 编辑器加载态（区分“脚本未加载/缓存旧JS”与“正常渲染”） */
.admin-loading { padding: 40px; text-align: center; color: #5b6b7a; font-size: 14.5px; line-height: 1.7; max-width: 520px; margin: 40px auto; background: #fff; border: 1px dashed #cdd8e2; border-radius: 12px; }

/* 系统维护面板 */
.sys-sec { padding: 16px 0; border-bottom: 1px dashed var(--c-line); }
.sys-sec:last-child { border-bottom: 0; padding-bottom: 0; }
.sys-h { font-family: "Barlow Condensed", sans-serif; font-size: 16px; margin: 0 0 6px; color: var(--c-navy-900); }
.sys-desc { font-size: 12.5px; color: var(--c-steel-500); margin: 0 0 12px; line-height: 1.6; }
.sys-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sys-status { font-size: 13px; color: #146c46; font-weight: 600; }
.sys-bklist { margin-top: 12px; display: grid; gap: 8px; }
.sys-bk { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; background: #f7f9fb; border: 1px solid var(--c-line); border-radius: 8px; }
.sys-bk__name { font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; font-size: 13px; color: var(--c-ink); }
.btn-restore { border: 1px solid #cdd8e2; background: #fff; color: var(--c-navy-800); padding: 5px 12px; border-radius: 7px; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 600; white-space: nowrap; }
.btn-restore:hover { background: #e3f0fb; }
.sys-bk__acts { display: flex; gap: 8px; flex-shrink: 0; }
.btn-del { border: 1px solid #eccac8; background: #fff; color: #d6453f; padding: 5px 12px; border-radius: 7px; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 600; white-space: nowrap; transition: background .15s ease, border-color .15s ease; }
.btn-del:hover { background: #fdeceb; border-color: #d6453f; }
.sys-empty { font-size: 13px; color: var(--c-steel-500); margin: 4px 0; }
.sys-empty.err { color: #d6453f; }

/* 日志弹层 */
.modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 20px; }
.modal[hidden] { display: none; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(10,31,51,.5); }
.modal__box { position: relative; width: 100%; max-width: 760px; max-height: 82vh; display: flex; flex-direction: column; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 24px 60px rgba(10,31,51,.35); }
.modal__head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; background: var(--c-navy-900); color: #fff; }
.modal__head strong { font-family: "Barlow Condensed", sans-serif; font-size: 18px; }
.modal__head .btn-x { color: #fff; border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.1); }
.modal__head .btn-x:hover { background: rgba(255,255,255,.2); }
.modal__body { padding: 16px 18px; overflow: auto; }
.sys-stat { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
.sys-stat > div { background: #f4f6f9; border: 1px solid var(--c-line); border-radius: 10px; padding: 10px; text-align: center; }
.sys-stat b { display: block; font-size: 22px; color: var(--c-navy-900); font-family: "Barlow Condensed", sans-serif; }
.sys-stat span { font-size: 12px; color: #5b6b7a; }
.sys-codes { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.sys-codes .code { font-size: 12px; padding: 4px 10px; border-radius: 99px; font-weight: 600; }
.code-2 { background: #e3f3ea; color: #146c46; }
.code-3 { background: #fff4e0; color: #a86a00; }
.code-4 { background: #fdeceb; color: #c0392b; }
.code-5 { background: #f3e6fb; color: #7a3fb0; }
.sys-sub { font-size: 12.5px; color: #5b6b7a; margin: 0 0 10px; line-height: 1.6; }
.sys-pre { margin: 0; padding: 14px; background: #0f1924; color: #cfe3f5; border-radius: 10px; font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; font-size: 12px; line-height: 1.6; white-space: pre-wrap; word-break: break-all; max-height: 46vh; overflow: auto; }
@media (max-width: 600px) { .sys-stat { grid-template-columns: repeat(2, 1fr); } }

/* 访客留言 */
.msg-item { border: 1px solid var(--c-line); border-radius: 10px; padding: 14px 16px; margin-bottom: 12px; background: #fff; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.msg-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(20,83,143,.12); border-color: var(--c-blue-500); }
.msg-item.is-unread { border-left: 3px solid var(--c-blue-600); background: #f6faff; }
.msg-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 8px; }
.msg-topic { background: #e3f0fb; color: var(--c-navy-800); font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 99px; }
.msg-name { font-weight: 700; color: var(--c-navy-900); font-size: 15px; }
.msg-ts { margin-left: auto; color: var(--c-steel-500); font-size: 12.5px; }
.msg-contact { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 8px; color: #5b6b7a; font-size: 13.5px; }
.msg-body { color: #2a3a4a; font-size: 14.5px; line-height: 1.6; white-space: pre-wrap; padding: 8px 0; border-top: 1px dashed var(--c-bg-soft); }
.msg-actions { display: flex; gap: 8px; margin-top: 8px; }
.btn-msg { border: 1px solid var(--c-line); background: #fff; color: var(--c-navy-800); padding: 5px 12px; border-radius: 6px; font-size: 13px; cursor: pointer; font-family: inherit; }
.btn-msg:hover { background: #f1f7fd; }
.btn-msg.btn-del { color: #d6453f; }
.btn-msg.btn-del:hover { background: #fdeceb; }

/* 后台导航分组（二级菜单，可折叠） */
.admin-nav .nav-toggle { align-self: start; margin: 0 8px 6px; padding: 6px 10px; font-size: 12px; font-weight: 600; font-family: inherit; color: var(--c-navy-800); background: #eef3f8; border: 1px solid var(--c-line); border-radius: 7px; cursor: pointer; }
.admin-nav .nav-toggle:hover { background: #e3f0fb; }
.admin-nav .nav-group { margin-bottom: 2px; }
.admin-nav .nav-group__title { position: relative; font-size: 11.5px; font-weight: 700; color: var(--c-steel-500); text-transform: uppercase; letter-spacing: .1em; padding: 12px 26px 5px 12px; cursor: pointer; user-select: none; }
.admin-nav .nav-group__title:hover { color: var(--c-navy-800); }
/* 折叠箭头指示器：展开时朝下（▾），折叠时朝右（▸） */
.admin-nav .nav-group__title::after { content: ""; position: absolute; right: 12px; top: 50%; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-65%) rotate(45deg); transition: transform .2s ease; opacity: .55; }
.admin-nav .nav-group.is-collapsed .nav-group__title::after { transform: translateY(-50%) rotate(-45deg); }
.admin-nav .nav-group__items { display: flex; flex-direction: column; gap: 1px; }
.admin-nav .nav-group.is-collapsed .nav-group__items { display: none; }
.admin-nav .nav-group__link { display: block; padding: 7px 12px 7px 22px; color: #44525f; font-weight: 500; font-size: 13.5px; text-decoration: none; border-radius: 7px; transition: background .15s ease, color .15s ease, transform .15s ease; }
.admin-nav .nav-group__link:hover { background: #eef3f8; color: var(--c-navy-800); transform: translateX(3px); }
.admin-nav .nav-group__link.active { background: var(--c-blue-600); color: #fff; }
.admin-nav .nav-group__link.is-external { color: var(--c-blue-600); font-weight: 700; }
.admin-nav .nav-group__link.is-external::after { content: " ↗"; font-size: 11px; }

/* 独立管理页（CRUD） */
.admin-back { color: #fff; text-decoration: none; font-size: 14px; }
.admin-back:hover { text-decoration: underline; }
.crud-main { max-width: 900px; margin: 0 auto; padding: 24px 20px; }
.crud-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.crud-count { font-size: 13.5px; color: #5b6b7a; }
.crud-list { display: flex; flex-direction: column; gap: 12px; }
.crud-empty { text-align: center; color: var(--c-steel-500); padding: 40px; }
.crud-item { display: flex; gap: 14px; background: #fff; border: 1px solid var(--c-line); border-radius: 10px; padding: 14px 16px; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.crud-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(20,83,143,.12); border-color: var(--c-blue-500); }
.crud-item.is-unread { border-left: 3px solid var(--c-blue-600); background: #f6faff; }
.crud-item__img { width: 90px; height: 68px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.crud-item__body { flex: 1; min-width: 0; }
.crud-item__body h3 { margin: 0 0 4px; font-size: 16px; color: var(--c-navy-900); }
.crud-item__meta { font-size: 12.5px; color: var(--c-steel-500); margin-bottom: 6px; }
.crud-item__summary { margin: 0 0 10px; font-size: 14px; color: #5b6b7a; line-height: 1.5; }
.crud-item__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-del { color: #d6453f; }
.btn-del:hover { background: #fdeceb !important; }
.crud-back { margin-bottom: 16px; }
.crud-h1 { font-family: "Barlow Condensed", sans-serif; font-size: 24px; margin: 0 0 20px; color: var(--c-navy-900); }
.crud-form { display: grid; gap: 16px; background: #fff; padding: 24px; border-radius: 10px; border: 1px solid var(--c-line); }
.crud-form label { display: grid; gap: 6px; font-weight: 600; font-size: 14px; color: var(--c-navy-900); }
.crud-form input, .crud-form textarea { padding: 10px 12px; border: 1.5px solid var(--c-line); border-radius: 8px; font-size: 14.5px; font-family: inherit; }
.crud-form input:focus, .crud-form textarea:focus { border-color: var(--c-blue-600); outline: none; box-shadow: 0 0 0 3px rgba(46,139,214,.15); }
.crud-actions { display: flex; gap: 10px; }
.img-picker { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.img-picker input[type="text"] { flex: 1; min-width: 180px; }
.img-preview { width: 64px; height: 48px; object-fit: cover; border-radius: 6px; border: 1px solid var(--c-line); }
.img-hint { font-size: 12px; font-weight: 400; color: var(--c-steel-500); }
.crud-detail { background: #fff; padding: 24px; border-radius: 10px; border: 1px solid var(--c-line); }
.detail-row { display: flex; gap: 14px; padding: 8px 0; border-bottom: 1px solid #f1f4f7; }
.detail-label { font-weight: 700; color: #5b6b7a; min-width: 80px; }
.detail-body { white-space: pre-wrap; line-height: 1.7; color: #2a3a4a; padding: 12px 0; }
.crud-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--c-ok); color: #fff; padding: 10px 22px; border-radius: 8px; font-size: 14px; opacity: 0; transition: all .3s; z-index: 100; }
.crud-toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0); }
.crud-toast.is-err { background: var(--c-err); }

/* ---- 管理员账户页专属样式 ---- */
.panel--note { background: #eef6ff; border: 1px solid #cfe4fb; border-radius: 12px; padding: 14px 18px; margin-bottom: 4px; }
.panel--note p { margin: 0; color: #1b4f7a; font-size: 14px; line-height: 1.6; }
.adm-name { font-weight: 700; font-size: 15px; color: var(--c-navy-900); }
.adm-display { color: #5b6b7a; font-size: 13px; }
.role-badge { font-size: 12px; padding: 2px 10px; border-radius: 99px; font-weight: 600; white-space: nowrap; }
.role-badge--super { background: #fdeccb; color: #8a5a00; }
.role-badge--normal { background: #e6f0ff; color: var(--c-navy-800); }