/* ============ 品牌设计变量（连锁门店统一视觉） ============ */
:root {
  --brand: #e2231a;        /* 品牌主色：亮红 */
  --brand-dark: #b5170e;   /* 主色加深（hover/渐变端） */
  --brand-soft: #fdeceb;   /* 主色浅底 */
  --gold: #e9b04a;         /* 品牌点缀金 */
  --ink: #2b2420;          /* 深棕黑正文 */
  --bg: #f6f3ef;           /* 暖米白页面底 */
  --shadow: 0 1px 3px rgba(43,36,32,.07), 0 2px 10px rgba(43,36,32,.04);
  --ring: 0 0 0 2px rgba(226,35,26,.15);
}

/* 全局：移动优先，简洁清晰 */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--bg); color: var(--ink); font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; font-size: 16px; line-height: 1.5; -webkit-text-size-adjust: 100%; }
a { color: var(--brand); text-decoration: none; }
img { max-width: 100%; display: block; }
button { background: var(--brand); color: #fff; border: 0; padding: 10px 18px; font-size: 16px; border-radius: 6px; cursor: pointer; }
button:hover { background: var(--brand-dark); }
.btn { display: inline-block; background: var(--brand); color: #fff; padding: 8px 14px; border-radius: 6px; }
.btn:hover { background: var(--brand-dark); }
.btn-link { background: none; color: var(--brand); padding: 4px 8px; border: 0; cursor: pointer; font-size: 14px; }
.btn-link.del { color: #c33; }

/* 顶部栏：品牌横幅（亮红渐变 + 金色描边 + 装饰圆） */
.topbar { position: sticky; top: 0; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 12px 14px 13px; background: linear-gradient(135deg, var(--brand-dark), var(--brand) 62%, #e8604f); border-bottom: 3px solid var(--gold); z-index: 10; box-shadow: 0 2px 12px rgba(181,23,14,.3); }
.topbar::after { content: ''; position: absolute; right: -34px; top: -34px; width: 116px; height: 116px; border-radius: 50%; background: rgba(255,255,255,.1); pointer-events: none; }
.topbar::before { content: ''; position: absolute; right: 30px; top: 22px; width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,.07); pointer-events: none; }
.logo { display: flex; align-items: center; gap: 7px; font-weight: bold; color: #fff; order: 1; position: relative; z-index: 1; }
.logo img { height: 30px; width: auto; }
.logo span { font-size: 20px; letter-spacing: 1px; text-shadow: 0 1px 2px rgba(0,0,0,.18); }
.search { order: 2; flex: 1 1 100%; display: flex; position: relative; z-index: 1; }
.search input { flex: 1; min-width: 0; padding: 10px 15px; border: 0; border-radius: 20px; font-size: 16px; background: rgba(255,255,255,.94); outline: none; color: var(--ink); }
.search input:focus { background: #fff; box-shadow: 0 0 0 2px var(--gold); }
.search input::placeholder { color: #a89a8f; }
.search button { flex-shrink: 0; margin-left: 8px; padding: 10px 18px; border: 0; border-radius: 20px; font-size: 15px; background: var(--gold); color: #fff; }

.wrap { max-width: 720px; margin: 0 auto; padding: 12px; }

/* 首页岗位大按钮网格 */
.home-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 20px; }
.cat-btn { display: flex; align-items: center; justify-content: center; height: 76px; background: #fff; border-radius: 10px; color: var(--ink); font-weight: 600; font-size: 18px; box-shadow: var(--shadow); transition: transform .08s; }
.cat-btn:active { background: var(--brand); color: #fff; transform: scale(.97); }

/* 区块标题：品牌竖条 */
.sec-title { margin: 18px 0 10px; font-size: 17px; color: var(--ink); padding-left: 9px; border-left: 4px solid var(--brand); line-height: 1.3; }

/* 列表卡片 */
.list { display: flex; flex-direction: column; gap: 10px; }
.lcard { display: flex; background: #fff; border-radius: 10px; overflow: hidden; box-shadow: var(--shadow); }
.lcard:active { background: var(--brand-soft); }
.lcard-img { width: 110px; height: 110px; flex-shrink: 0; background: var(--brand-soft); display: flex; align-items: center; justify-content: center; color: #aaa; font-size: 12px; }
.lcard-img img { width: 100%; height: 100%; object-fit: cover; }
.lcard-body { flex: 1; padding: 9px 11px; display: flex; flex-direction: column; min-width: 0; }
.lcard-title { font-size: 18px; font-weight: 600; color: var(--ink); margin-bottom: 4px; line-height: 1.3; }
.lcard-summary { font-size: 15px; color: #857a72; line-height: 1.4; max-height: 44px; overflow: hidden; margin-bottom: 4px; }
.lcard-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
.lcard-meta { font-size: 13px; color: #b0a49a; margin-top: auto; }

/* 标签 */
.tag { display: inline-block; padding: 2px 9px; background: #f3ece7; color: #7a6a5f; border-radius: 10px; font-size: 11px; }
.tag-must { background: var(--brand); color: #fff; }

/* 岗位列表内的主题筛选条 */
.tagbar { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 12px; }
.tagchip { padding: 6px 14px; background: #fff; border-radius: 16px; font-size: 14px; color: #5c5049; box-shadow: var(--shadow); }
.tagchip.cur { background: var(--brand); color: #fff; }
.empty { padding: 30px; text-align: center; color: #999; }
.ph-noimg { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--brand); font-size: 17px; font-weight: 600; letter-spacing: 1px; background: linear-gradient(160deg, var(--brand-soft), #f9d7d3); }

/* 分页 */
.pager { display: flex; justify-content: center; align-items: center; gap: 12px; margin: 16px 0; }
.pager a { padding: 6px 14px; border: 1px solid #e5ddd5; border-radius: 6px; background: #fff; color: var(--brand); }
.pager .pg-cur { color: var(--ink); font-size: 14px; }
.pager .pg-disabled { color: #ccc; }

/* 详情页 */
.detail-tags { margin: 8px 0; display: flex; gap: 6px; flex-wrap: wrap; }
.detail-h { font-size: 22px; font-weight: bold; margin: 6px 0; line-height: 1.3; padding-bottom: 9px; border-bottom: 2px solid var(--brand-soft); }
.detail-meta { font-size: 13px; color: #b0a49a; margin-bottom: 12px; }
.video { width: 100%; max-height: 240px; background: #000; margin-bottom: 12px; border-radius: 8px; }
.content { background: #fff; padding: 16px; border-radius: 10px; line-height: 1.75; font-size: 16px; box-shadow: var(--shadow); }
.content img { max-width: 100%; height: auto; margin: 8px 0; border-radius: 6px; }
.content p { margin: 8px 0; }
.content ul, .content ol { padding-left: 24px; margin: 8px 0; }
.content h2, .content h3 { margin: 12px 0 6px; color: var(--brand-dark); }
.content table { width: 100%; border-collapse: collapse; }
.content td, .content th { border: 1px solid #eee; padding: 6px; }

.audio { width: 100%; margin-bottom: 12px; background: #fff; }

/* 返回导航 */
.crumb { display: inline-block; margin: 14px 0 2px; font-size: 14px; color: var(--brand); text-decoration: none; }
.crumb:hover { text-decoration: underline; }

/* 资料反馈（有用/没看懂） */
.fb-block { margin-top: 20px; padding: 16px; background: #fff; border-radius: 10px; text-align: center; box-shadow: var(--shadow); }
.fb-q { color: #666; font-size: 15px; margin-bottom: 10px; }
.fb-form button { padding: 10px 22px; font-size: 15px; margin: 0 6px; border-radius: 20px; }
.fb-form button:hover { opacity: .85; }
.fb-form .fb-down { background: #c33; }  /* 没看懂：红 */
.fb-form .fb-mid { background: var(--gold); }   /* 没用：品牌金 */
.fb-form .fb-up { background: #2f9e63; }    /* 有用：绿 */
.fb-done { color: var(--brand); font-size: 14px; }
.fb-stat { margin-top: 10px; font-size: 13px; color: #999; }

/* 口令页 */
.pass-page { background: linear-gradient(160deg, var(--brand-dark), var(--brand) 60%, #e8604f); min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.pass-box { background: #fff; border-radius: 14px; padding: 30px 24px; max-width: 320px; width: 100%; text-align: center; box-shadow: 0 10px 34px rgba(0,0,0,.22); border-top: 4px solid var(--gold); }
.pass-box h1 { font-size: 20px; margin-bottom: 8px; color: var(--ink); }
.pass-tip { color: #888; font-size: 14px; margin-bottom: 16px; }
.pass-err { color: #c33; margin-bottom: 8px; }
.pass-input { width: 100%; padding: 14px; font-size: 28px; letter-spacing: 12px; text-align: center; border: 2px solid var(--brand); border-radius: 8px; margin-bottom: 16px; outline: none; }
.pass-box button { width: 100%; padding: 12px; }

/* 登录页 */
.login-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 20px; }
.login-box { background: #fff; padding: 24px; border-radius: 10px; max-width: 360px; width: 100%; box-shadow: var(--shadow); border-top: 4px solid var(--brand); }
.login-box h1 { font-size: 20px; margin-bottom: 16px; }
.login-box label { display: block; margin-top: 10px; font-size: 14px; color: #666; }
.login-box input { width: 100%; padding: 8px; margin-top: 4px; border: 1px solid #ddd; border-radius: 4px; font-size: 16px; }
.login-box button { width: 100%; margin-top: 16px; padding: 10px; }

/* 后台 */
.admin { background: var(--bg); }
.admin-bar { display: flex; justify-content: space-between; }
.topbar-user { font-size: 13px; color: rgba(255,255,255,.88); }
.admin-nav { display: flex; gap: 4px; padding: 6px 12px; background: #fff; border-bottom: 1px solid #eee; overflow-x: auto; }
.admin-nav a { padding: 8px 14px; font-size: 14px; color: #5c5049; border-radius: 4px; white-space: nowrap; }
.admin-nav a.cur { background: var(--brand); color: #fff; }
.admin-main { max-width: 960px; margin: 0 auto; padding: 16px 12px; }
.stat-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 20px; }
.stat-card { background: #fff; padding: 16px; border-radius: 10px; text-align: center; box-shadow: var(--shadow); }
.stat-num { font-size: 26px; font-weight: bold; color: var(--brand); }
.admin-table { width: 100%; background: #fff; border-collapse: collapse; border-radius: 8px; overflow: hidden; font-size: 14px; }
.admin-table th, .admin-table td { padding: 8px 10px; border-bottom: 1px solid #eee; text-align: left; }
.admin-table th { background: #f7f4f1; font-weight: 500; color: #5c5049; }
.admin-form { background: #fff; padding: 16px; border-radius: 10px; margin-bottom: 16px; box-shadow: var(--shadow); }
.admin-form label { display: block; margin-top: 10px; font-size: 14px; color: #5c5049; }
.admin-form input[type=text], .admin-form input[type=number], .admin-form input[type=password], .admin-form textarea, .admin-form select { width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; font-size: 15px; margin-top: 4px; }
.admin-form .cat-checks { display: flex; flex-wrap: wrap; gap: 6px; }
.cat-chk { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; background: var(--brand-soft); border-radius: 16px; font-size: 14px; }
.cat-chk input { margin-right: 4px; }
.article-form { padding: 16px; }
.form-actions { margin-top: 16px; }
.inline { display: inline; }
.preview { margin: 6px 0; }
.msg-ok { background: var(--brand-soft); color: var(--brand-dark); padding: 8px 12px; border-radius: 4px; margin-bottom: 10px; }
.note { color: #999; font-size: 13px; margin-top: 4px; }

/* 二维码预览 */
.qr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.qr-item { background: #fff; padding: 12px; border-radius: 8px; text-align: center; }
.qr-item img { width: 100%; max-width: 200px; margin: 0 auto; }
.qr-title { margin-top: 6px; font-size: 14px; color: var(--ink); word-break: break-all; }
.qr-art-group { margin-bottom: 10px; }
.qr-art-group summary { padding: 6px 10px; background: #fff; border-radius: 4px; cursor: pointer; font-size: 14px; }
.qr-art-group .cat-chk { margin: 4px 0 4px 10px; }

/* 零依赖富文本编辑器 */
.rte-toolbar { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px; background: #f7f4f1; border: 1px solid #ddd; border-bottom: 0; border-radius: 4px 4px 0 0; align-items: center; }
.rte-toolbar button { background: #fff; color: #444; border: 1px solid #ddd; padding: 5px 10px; font-size: 13px; border-radius: 3px; cursor: pointer; line-height: 1.2; -webkit-appearance: none; }
.rte-toolbar button:hover { background: var(--brand-soft); border-color: var(--brand); }
.rte-tip { font-size: 12px; color: #c33; margin-left: 6px; }
#editor.rte-editor { position: relative; z-index: 1; min-height: 220px; padding: 12px; border: 1px solid #ddd; border-radius: 0 0 4px 4px; background: #fff; font-size: 15px; line-height: 1.7; outline: none; cursor: text; -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; word-break: break-word; }
#editor.rte-editor:focus { border-color: var(--brand); box-shadow: var(--ring); }
#editor.rte-editor p { margin: 4px 0; min-height: 1.5em; }
#editor.rte-editor img { max-width: 100%; height: auto; margin: 6px 0; border-radius: 4px; }
#editor.rte-editor h2 { font-size: 19px; margin: 12px 0 6px; }
#editor.rte-editor h3 { font-size: 16px; margin: 10px 0 4px; }
#editor.rte-editor ul, #editor.rte-editor ol { padding-left: 24px; margin: 6px 0; }
#editor.rte-editor.is-empty::before { content: attr(data-placeholder); color: #aaa; pointer-events: none; position: absolute; top: 12px; left: 12px; }
.msg-err { background: #fdeaea; color: #c33; padding: 8px 12px; border-radius: 4px; margin-bottom: 10px; }

/* 编辑器取色按钮（文字颜色/背景色） */
.rte-toolbar input[type=color] { width: 34px; height: 28px; padding: 1px; border: 1px solid #ddd; border-radius: 3px; background: #fff; cursor: pointer; }

/* 文章多条音视频行 */
.mv-row { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.mv-row video { width: 120px; background: #000; border-radius: 4px; flex-shrink: 0; }
.mv-row audio { width: 190px; flex-shrink: 0; }
.mv-row input[type=text] { flex: 1; padding: 6px; border: 1px solid #ddd; border-radius: 4px; font-size: 13px; }
.mv-row .btn-link { flex-shrink: 0; }

/* 资料列表序号（数字小的排前面） */
.sort-inp { width: 60px; padding: 4px; text-align: center; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; }

/* 编辑器里插入的视频/音频（不带 controls，点一下选中出现绿框，可删除） */
.rte-editor video, .rte-editor audio { display: block; width: 100%; max-width: 320px; margin: 8px 0; background: #000; border-radius: 4px; min-height: 54px; }
.rte-editor audio { background: #f0f0f0; }
.rte-editor .media-sel { outline: 3px solid var(--brand); outline-offset: 2px; }

/* 正文里编辑器插入的视频/音频 */
.content video { width: 100%; background: #000; border-radius: 4px; margin: 8px 0; }
.content audio { width: 100%; margin: 8px 0; }

/* 页脚 */
.foot { padding: 22px 12px 30px; text-align: center; font-size: 12px; color: #a89a8f; }
.foot b { display: block; font-size: 13px; color: #8a7a6e; margin-bottom: 4px; letter-spacing: 1px; }
.foot-ver { display: block; margin-top: 6px; font-size: 11px; color: #c4b8ae; }