/* 发现身边雷锋 · 证书查询系统
   版式复刻机构证书查询官网：浅粉灰底 / 红头红脚 / 白卡内容区 */
:root {
  --header-red: #D0241C;
  --footer-red: #B91C1C;
  --main-red: #E70012;
  --orange: #E7801C;
  --page-bg: #f9f5f5;
  --row-bg: #F5F6F9;
  --line: #E5E5E5;
  --ink: #333;
  --ink-2: #666;
  --ink-3: #999;
  --font: "Noto Sans SC", sans-serif;
  --form-font: "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }
body {
  margin: 0; min-width: 320px;
  color: var(--ink); background: var(--page-bg);
  font-family: var(--font); font-size: 16px; line-height: 1.6;
}
a { color: var(--main-red); text-decoration: none; }
h1, h2, h3, h6 { margin: 0; font-weight: normal; }
p { margin: 0 0 6px; }

.w1200 { width: 1200px; margin: 0 auto; }
@media (max-width: 1340px) { .w1200 { width: 90%; } }
@media (max-width: 640px) { .w1200 { width: calc(100% - 30px); } }

/* ---------- 头部（黑色横幅 + logo 图） ---------- */
.header { padding: 14px 0; background: var(--header-red); }
.header .logo a { display: inline-block; }
.header .logo img { height: 64px; display: block; }
@media (max-width: 640px) { .header .logo img { height: 36px; } }

/* ---------- 内容白卡 ---------- */
.page_content {
  margin: 20px auto;
  min-height: calc(100vh - 250px);
  background: #fff;
  overflow: hidden;
}
@media (max-width: 640px) { .page_content { min-height: calc(100vh - 218px); } }

/* ---------- 查询区 ---------- */
.certificate_section { margin: 35px auto 0; }
.certificate_section { line-height: normal; }
.certificate_title { text-align: center; }
.certificate_title h6 { font-size: 24px; color: var(--ink); }
.certificate_title p { font-size: 14px; color: var(--ink-3); margin-top: 4px; }
@media (max-width: 640px) {
  .certificate_section { margin-top: 20px; }
  .certificate_title h6 { font-size: 18px; }
}

.certificate_form { margin: 20px auto 0; width: 600px; overflow: hidden; }
.form_group { margin-bottom: 20px; width: 100%; overflow: hidden; }
.item_tit {
  float: left; width: 110px;
  font-size: 16px; color: var(--ink); text-align: right; line-height: 40px;
}
.item_tit span { margin-right: 5px; color: #EF0F0F; }
.item_cont { margin-left: 110px; overflow: hidden; }
.item_cont select,
.item_cont input {
  padding-left: 10px; width: 100%; height: 40px;
  font-size: 14px; color: var(--ink-2);
  border-radius: 3px; border: 1px solid var(--line);
  font-family: var(--form-font); background: #fff; outline: none;
}
.item_cont input::placeholder {
  color: #C0C4CC;
  font-family: var(--form-font);
  opacity: 1;
}
.item_cont input:focus, .item_cont select:focus { border-color: var(--main-red); }
.item_cont select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23999' fill='none' stroke-width='1.5'/%3E%3C/svg%3E") 96% center no-repeat;
}
.item_cont select:invalid { color: #C0C4CC; }
.item_cont select option { color: var(--ink-2); }
.item_cont input.yzm_inp { float: left; width: calc(100% - 120px); }
.img_box {
  float: left;
  display: flex; align-items: center; justify-content: center;
  width: 120px; height: 50px; overflow: hidden; cursor: pointer;
}
.img_box img { width: 120px; height: 50px; }

.btn1, .btn2 {
  display: block; margin: 10px auto 0;
  width: 150px; height: 36px;
  font-size: 16px; color: #fff; border: 0; border-radius: 5px;
  cursor: pointer; font-family: var(--form-font);
}
.btn1 { background: var(--main-red); }
.btn1:hover { background: #c40a1a; }
.btn2 { background: var(--orange); }
.btn2:hover { background: #c46d17; }
@media (max-width: 640px) {
  .certificate_form { margin-top: 10px; padding: 0 15px; width: 100%; }
  .form_group { margin-bottom: 15px; }
  .item_tit { float: none; margin-bottom: 5px; width: 100%; font-size: 14px; text-align: left; line-height: 20px; }
  .item_cont { margin-left: 0; }
  .item_cont select, .item_cont input { height: 30px; line-height: 30px; }
  .item_cont input.yzm_inp { width: calc(100% - 120px); }
  .img_box, .img_box img { height: 30px; }
  .btn1 { width: 100px; height: 30px; font-size: 14px; margin-top: 0; }
}

/* 错误提示 */
.msg { text-align: center; font-size: 14px; margin: 10px 0; min-height: 20px; color: var(--main-red); }
.msg:empty { display: none; }

/* ---------- 结果表格 ---------- */
.result_table { margin: 40px auto 30px; width: 1000px; overflow: hidden; }
.result_table table { width: 100%; border-collapse: collapse; }
.result_table thead th {
  padding: 10px 15px; font-size: 16px; color: #fff;
  text-align: left; background: var(--main-red); border-bottom: 2px solid #fff;
  white-space: nowrap; font-weight: normal;
}
.result_table tbody td {
  padding: 10px 15px; font-size: 16px; color: var(--ink); background: var(--row-bg);
}
.result_table thead th:first-child,
.result_table tbody td:first-child { padding-left: 30px; }
.result_table tbody tr:hover td { background: #eceef4; }
.result_table td a.detail-link { color: var(--main-red); }
.result_table td .st-revoked { color: var(--main-red); }
@media (max-width: 1340px) {
  .result_table { width: 95%; overflow-x: auto; }
  .result_table thead th, .result_table tbody td { padding: 10px; }
}
@media (max-width: 768px) {
  .result_table thead th, .result_table tbody td { font-size: 14px; }
}
@media (max-width: 640px) {
  .result_table { margin-top: 10px; width: 90%; overflow-x: auto; }
  .result_table thead th, .result_table tbody td { padding: 5px 10px; }
  .result_table tbody td:first-child { white-space: nowrap; }
}

.no_data_box { margin: 30px 0; text-align: center; }
.no_data_box .zw {
  display: inline-block; width: 72px; height: 72px; line-height: 72px;
  border: 1px solid var(--line); border-radius: 50%;
  color: var(--ink-3); font-size: 28px;
}
.no_data_box p { margin-top: 10px; font-size: 16px; color: var(--ink-3); line-height: 20px; }
@media (max-width: 640px) { .no_data_box { margin: 15px 0; padding: 0 15px; } .no_data_box p { font-size: 14px; } }

/* ---------- 结果区按钮 ---------- */
.resultbtn_section { margin-bottom: 30px; width: 100%; text-align: center; }
.resultbtn_section a, .resultbtn_section button {
  display: inline-block; margin: 0 8px; width: 90px; height: 33px;
  font-size: 14px; color: var(--main-red); text-align: center; line-height: 31px;
  background: #fff; border-radius: 5px; border: 1px solid var(--main-red);
  cursor: pointer; font-family: inherit;
}
.resultbtn_section a:hover, .resultbtn_section button:hover { color: #fff; background: var(--main-red); text-decoration: none; }
@media (max-width: 768px) { .resultbtn_section .print_btn { display: none; } }

/* ---------- 常见问题弹窗 ---------- */
.pop_questions {
  position: fixed; inset: 0; background: rgba(0, 0, 0, .5); z-index: 9999;
  display: none; align-items: center; justify-content: center;
}
.pop_questions.show { display: flex; }
.questions_panel { width: 800px; max-width: calc(100% - 30px); background: #fff; }
.panel_title {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px; height: 50px; background: var(--header-red);
}
.panel_title h6 { font-size: 18px; color: #fff; }
.panel_title .close {
  border: 0; background: transparent; color: #fff;
  font-size: 24px; cursor: pointer; line-height: 1; padding: 4px 8px;
}
.panel_body { padding: 20px 30px; overflow: hidden; }
.questions_text {
  min-height: 200px; max-height: calc(100vh - 250px); overflow-y: auto;
  font-size: 16px; color: var(--ink); line-height: 30px;
}
.questions_text strong { font-weight: 700; }

/* ---------- 页脚（深红） ---------- */
.footer { padding: 18px 0; background: var(--footer-red); overflow: hidden; }
.footer p { font-size: 14px; color: #fff; line-height: 28px; text-align: center; margin: 0; }
.footer a { color: #fff; }
@media (max-width: 640px) { .footer { padding: 15px 10px; } .footer p { font-size: 12px; line-height: 1.8; } }

/* ---------- 证书详情页（沿用内容白卡） ---------- */
.cert-page { padding: 30px 0 40px; }
.cert-head { text-align: center; margin-bottom: 24px; }
.cert-head h1 { font-size: 24px; color: var(--ink); }
.cert-head .status-line { font-size: 14px; margin-top: 4px; }
.status-ok { color: #0f7b43; }
.status-revoked { color: var(--main-red); }
.cert-layout {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, 1fr);
  gap: 26px; align-items: start;
}
@media (max-width: 860px) { .cert-layout { grid-template-columns: 1fr; } }
.cert-frame { border: 1px solid var(--line); padding: 12px; background: #fff; }
.cert-frame img { width: 100%; height: auto; display: block; }
.cert-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.cert-panel { display: flex; flex-direction: column; gap: 18px; }
.panel-card { border: 1px solid var(--line); padding: 16px 18px; }
.panel-card h3 { font-size: 15px; color: var(--ink); font-weight: 600; margin: 0 0 10px; }
.meta { display: grid; grid-template-columns: 88px 1fr; row-gap: 8px; font-size: 14px; }
.meta dt { color: var(--ink-3); }
.meta dd { margin: 0; }
.mono { font-family: ui-monospace, "SF Mono", Consolas, monospace; }
.qr-box { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.qr-box img { width: 120px; height: 120px; border: 1px solid var(--line); }
.qr-box .cap { font-size: 12.5px; color: var(--ink-3); }
.link-copy { display: flex; gap: 8px; margin-top: 12px; }
.link-copy input {
  flex: 1; min-width: 0; padding: 8px 10px; font-size: 12.5px; font-family: inherit;
  border: 1px solid var(--line); border-radius: 3px; outline: none;
  color: var(--ink-2); background: #fafafa;
}
.notice { font-size: 13px; color: var(--ink-3); line-height: 1.7; }
.pill-valid { color: #0f7b43; }
.pill-revoked { color: var(--main-red); }
.btn-sm { padding: 7px 13px; font-size: 13.5px; }
.btn-outline {
  display: inline-block; border: 1px solid var(--main-red); color: var(--main-red);
  background: #fff; border-radius: 5px; font-family: inherit; cursor: pointer;
}
.btn-outline:hover { color: #fff; background: var(--main-red); text-decoration: none; }
.empty { text-align: center; padding: 40px 20px; color: var(--ink-3); }

/* ---------- 管理后台（保持简约白底） ---------- */
.admin-body { background: #f7f8fa; }
.admin-shell { display: grid; grid-template-columns: 200px 1fr; min-height: 100vh; }
.admin-nav {
  background: #fff; border-right: 1px solid var(--line);
  padding: 18px 12px; display: flex; flex-direction: column; gap: 2px;
  position: sticky; top: 0; height: 100vh;
}
.admin-nav .nav-brand { font-size: 15px; font-weight: 600; color: var(--ink); padding: 4px 10px 16px; }
.admin-nav .nav-brand .brand-mark { color: var(--main-red); }
.admin-nav a.nav-item { color: var(--ink-2); padding: 9px 10px; border-radius: 4px; font-size: 14px; display: block; }
.admin-nav a.nav-item:hover { background: #f7f8fa; color: var(--ink); text-decoration: none; }
.admin-nav a.nav-item.active { background: #fdf2f4; color: var(--main-red); font-weight: 600; }
.admin-nav .nav-foot { margin-top: auto; font-size: 12.5px; color: var(--ink-3); padding: 10px; line-height: 1.9; }
.admin-nav .nav-foot a { color: var(--ink-3); }
.admin-main { padding: 26px 30px 56px; max-width: 1200px; }
.admin-main h1 { font-size: 19px; font-weight: 600; margin-bottom: 18px; }
.admin-tools { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; flex-wrap: wrap; }
.admin-tools form { display: flex; gap: 8px; flex: 1; min-width: 240px; }
.admin-tools input[type="search"], .admin-tools input[type="text"] {
  flex: 1; padding: 8px 11px; border: 1px solid var(--line); border-radius: 4px;
  font-family: inherit; font-size: 14px; outline: none; background: #fff;
}
.admin-tools input:focus { border-color: var(--main-red); }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 20px; }
.stat { background: #fff; border: 1px solid var(--line); padding: 14px 16px; }
.stat .num { font-size: 26px; font-weight: 700; }
.stat .lbl { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }
.stat.red .num { color: var(--main-red); }
.stat.green .num { color: #0f7b43; }
.card { background: #fff; border: 1px solid var(--line); margin-bottom: 18px; }
.card h2 { font-size: 15px; padding: 14px 18px 10px; font-weight: 600; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tbl th {
  text-align: left; font-weight: 600; color: var(--ink-3); font-size: 12.5px;
  padding: 9px 18px; border-bottom: 1px solid var(--line); border-top: 1px solid var(--line);
  background: #f7f8fa; white-space: nowrap;
}
.tbl td { padding: 11px 18px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: none; }
.pill { display: inline-block; padding: 1px 9px; border-radius: 3px; font-size: 12px; border: 1px solid; }
.pill-valid { background: #eef7f1; border-color: #cfe8d8; color: #0f7b43; }
.pill-revoked { background: #fdf0ee; border-color: #f2d4cf; color: var(--main-red); }
.form-card { max-width: 680px; }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 20px; }
@media (max-width: 700px) { .form-grid { grid-template-columns: 1fr; } }
.field { margin: 0 0 16px; }
.field label { display: block; font-size: 14px; color: var(--ink-2); margin-bottom: 6px; }
.field input, select.sel {
  width: 100%; padding: 9px 11px; font-size: 14.5px; font-family: inherit;
  border: 1px solid var(--line); border-radius: 4px; background: #fff; color: var(--ink); outline: none;
}
.field input:focus, select.sel:focus { border-color: var(--main-red); }
.field .hint { font-size: 12.5px; color: var(--ink-3); margin-top: 5px; }
textarea.ta { width: 100%; padding: 9px 11px; font-size: 14.5px; font-family: inherit; border: 1px solid var(--line); border-radius: 4px; outline: none; resize: vertical; }
textarea.ta:focus { border-color: var(--main-red); }
.flashes { list-style: none; padding: 0; margin: 0 0 14px; }
.flashes li { border-radius: 4px; padding: 9px 13px; font-size: 13.5px; margin-bottom: 6px; border: 1px solid; }
.flashes .ok { background: #eef7f1; border-color: #cfe8d8; color: #0f7b43; }
.flashes .error { background: #fdf0ee; border-color: #f2d4cf; color: var(--main-red); }
.inline-form { display: inline; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: 4px; cursor: pointer;
  font-family: inherit; font-size: 14.5px; padding: 10px 18px;
  background: #fff; color: var(--ink-2);
}
.btn:hover { background: #f7f8fa; text-decoration: none; }
.btn-primary { background: var(--main-red); color: #fff; }
.btn-primary:hover { background: #c40a1a; color: #fff; }
.btn-block { width: 100%; }

.login-wrap { max-width: 360px; margin: 10vh auto 0; padding: 0 20px; }
.login-card { background: #fff; border: 1px solid var(--line); padding: 28px; }
.login-card h1 { font-size: 18px; font-weight: 600; margin-bottom: 2px; }
.login-card .sub { color: var(--ink-3); font-size: 13.5px; margin: 0 0 20px; }
.login-foot { text-align: center; color: var(--ink-3); font-size: 12.5px; margin-top: 16px; }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

@media print {
  .header, .footer, .certificate_form, .cert-actions, .resultbtn_section { display: none !important; }
  .page_content { margin: 0; }
  .cert-layout { display: block; }
}

/* ---------- 红金管理后台 ---------- */
.admin-body { background: #f7f1ed; color: #4b2520; }
.admin-shell { grid-template-columns: 230px minmax(0, 1fr); background: #f7f1ed; }
.admin-nav { background: linear-gradient(180deg, #8e101c 0%, #6d0b16 100%); border-right: 0; padding: 22px 14px; color: #fff4de; }
.admin-nav .nav-brand { color: #fff4de; padding: 4px 12px 24px; line-height: 1.65; }
.admin-nav .nav-brand .brand-mark { color: #f6d98c; font-size: 16px; }
.admin-nav a.nav-item { color: #f7dfc1; padding: 11px 12px; border-radius: 6px; font-size: 14px; }
.admin-nav a.nav-item:hover { background: rgba(255,255,255,.11); color: #fff; text-decoration: none; }
.admin-nav a.nav-item.active { background: #d9a441; color: #5c0a12; font-weight: 700; }
.admin-nav .nav-foot, .admin-nav .nav-foot a { color: #edcba8; }
.admin-main { max-width: none; padding: 26px 34px 60px; }
.admin-topline { display: flex; justify-content: space-between; color: #9d5b39; font-size: 13px; margin-bottom: 8px; }
.admin-user { color: #7f111c; font-weight: 600; }
.admin-main h1 { color: #70111a; font-size: 24px; letter-spacing: .04em; }
.admin-mobile-head { display: none; }
.stat { border: 1px solid #ead7bf; border-top: 3px solid #c99331; border-radius: 7px; box-shadow: 0 5px 16px rgba(108,42,20,.05); }
.stat.red .num { color: #9e1120; }
.stat.green .num { color: #8a5a18; }
.stat.warn .num { color: #c37718; }
.card { border: 1px solid #ead7bf; border-radius: 7px; box-shadow: 0 5px 16px rgba(108,42,20,.04); overflow: hidden; }
.card h2 { color: #70111a; }
.tbl th { color: #7c4a31; background: #fbf3e7; border-color: #ead7bf; }
.tbl td { border-color: #f0e2d3; }
.tbl tr:hover td { background: #fffaf3; }
.btn-primary { background: #9e1120; border-color: #9e1120; }
.btn-primary:hover { background: #7d0d18; }
.btn-outline { border-color: #bd7c32; color: #8e1820; }
.btn-outline:hover { background: #9e1120; border-color: #9e1120; color: #fff; }
.btn.danger { color: #a5161e; }
.pill-warn { background: #fff6df; border-color: #efd59a; color: #a66512; }
.avatar-thumb { width: 42px; height: 42px; object-fit: cover; border-radius: 50%; border: 2px solid #d2a143; vertical-align: middle; }
.avatar-missing { color: #a5161e; font-size: 12px; }
.list-summary { color: #95694e; font-size: 13px; margin: 0 0 10px; }
.cert-toolbar form { flex-wrap: wrap; }
.cert-toolbar form .sel { width: auto; min-width: 108px; padding: 8px 10px; }
.table-card { overflow-x: auto; }
.cert-table { min-width: 1000px; }
.pager { display: flex; justify-content: center; align-items: center; gap: 18px; margin: 18px 0; color: #7c4a31; font-size: 13px; }
.pager a { color: #8e1820; border: 1px solid #d5aa6e; background: #fffaf3; padding: 7px 12px; border-radius: 4px; }
.avatar-upload-panel { display: flex; gap: 16px; align-items: center; padding: 14px; margin-bottom: 18px; background: #fff9f0; border: 1px solid #eddbbd; border-radius: 6px; }
.avatar-upload-panel label { display: block; font-size: 14px; color: #6e321f; margin-bottom: 7px; }
.avatar-preview { width: 104px; height: 104px; border: 2px solid #d3a048; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #b17834; background: #fff; overflow: hidden; flex: 0 0 auto; }
.avatar-preview img { width: 100%; height: 100%; object-fit: cover; }
.password-card { max-width: 480px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.section-heading h2 { padding: 0; margin: 0 0 7px; }
.import-rules { margin-top: 22px; padding: 13px 16px; background: #fff9f0; border: 1px solid #eddbbd; color: #7e543b; font-size: 13px; line-height: 1.8; }
.import-rules ul { margin: 6px 0 0 18px; padding: 0; }
.import-result { max-width: 900px; }
.result-codes { color: #8e1820; word-break: break-all; }
.import-errors { margin: 7px 0 0 18px; color: #a5161e; line-height: 1.8; }

@media (max-width: 760px) {
  .admin-shell { display: block; min-height: 100vh; }
  .admin-mobile-head { display: flex; position: sticky; top: 0; z-index: 20; align-items: center; justify-content: space-between; padding: 13px 16px; background: #86101b; color: #fff4de; }
  .admin-mobile-brand { color: #fff4de; font-size: 14px; font-weight: 700; }
  .admin-mobile-brand:hover { color: #fff; text-decoration: none; }
  .admin-menu-button { border: 0; background: transparent; color: #f6d98c; font-size: 23px; cursor: pointer; }
  .admin-nav { display: none; position: fixed; z-index: 19; top: 50px; left: 0; right: 0; height: auto; max-height: calc(100vh - 50px); overflow-y: auto; padding: 15px 16px; }
  .admin-nav.open { display: flex; }
  .admin-nav .nav-brand, .admin-nav .nav-foot { display: none; }
  .admin-main { padding: 18px 14px 40px; }
  .admin-topline { display: none; }
  .admin-main h1 { font-size: 21px; margin-bottom: 14px; }
  .admin-tools form { min-width: 100%; }
  .admin-tools form input[type="search"] { min-width: 0; }
  .avatar-upload-panel { align-items: flex-start; flex-direction: column; }
  .section-heading { align-items: flex-start; flex-direction: column; }
}