:root {
  --navy: #102f55;
  --blue: #0b68bf;
  --blue-bright: #0788e5;
  --line: #dde4ec;
  --muted: #6f7d8c;
  --bg: #f3f6f9;
  --white: #fff;
  --green: #13a36e;
  --yellow: #ffb70b;
  --red: #d74343;
  font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
  color: #243446;
  letter-spacing: 0;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); }
button, input, textarea { font: inherit; letter-spacing: 0; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
[hidden] { display: none !important; }

.sidebar { position: fixed; inset: 0 auto 0 0; width: 238px; padding: 25px 16px; background: #0d2d50; color: white; z-index: 10; display: flex; flex-direction: column; }
.brand-mark { display: flex; gap: 12px; align-items: center; padding: 0 10px 30px; }
.brand-mark > span { display: grid; place-items: center; width: 44px; height: 44px; border: 2px solid #52b5ff; color: #52b5ff; font-weight: 800; border-radius: 50%; }
.brand-mark strong, .brand-mark small { display: block; }
.brand-mark strong { font-size: 19px; }
.brand-mark small { margin-top: 4px; color: #91a9bf; }
.sidebar nav { display: grid; gap: 6px; }
.nav-item { border: 0; color: #b5c5d4; background: transparent; height: 48px; border-radius: 6px; text-align: left; padding: 0 15px; font-weight: 600; }
.nav-item:hover, .nav-item.active { color: white; background: #165483; }
.nav-icon { display: inline-block; width: 28px; font-size: 19px; }
.preview-link { margin-top: auto; padding: 13px; color: #b7d9f5; border: 1px solid #315a7e; text-decoration: none; border-radius: 6px; text-align: center; font-size: 14px; }
.admin-main { min-height: 100vh; margin-left: 238px; }
.topbar { height: 92px; padding: 0 34px; background: white; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; }
.topbar h1 { margin: 0 0 5px; font-size: 23px; color: #1c2e40; }
.topbar p { margin: 0; color: var(--muted); font-size: 13px; }
.menu-toggle { display: none; }
.status-pill { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: #edf9f4; color: #28785b; border-radius: 30px; font-size: 13px; }
.status-pill i { width: 8px; height: 8px; border-radius: 50%; background: #2ab67e; }
.view { display: none; padding: 28px 34px 50px; max-width: 1500px; margin: 0 auto; }
.view.active { display: block; }
.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(170px, 1fr)); gap: 18px; margin-bottom: 22px; }
.stat-card { position: relative; min-height: 145px; padding: 23px; background: white; border-top: 3px solid #1d6fbe; box-shadow: 0 5px 18px rgba(21, 48, 75, .06); border-radius: 6px; }
.stat-card.accent { border-color: #16a0df; }.stat-card.warm { border-color: #efa821; }.stat-card.green { border-color: #1baa78; }
.stat-card span, .stat-card small { display: block; color: var(--muted); }
.stat-card strong { display: block; margin: 12px 0 8px; color: #172c40; font-size: 34px; }
.stat-card small { font-size: 12px; }
.panel { background: white; border: 1px solid #e1e7ed; box-shadow: 0 5px 18px rgba(21, 48, 75, .05); border-radius: 7px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 22px; border-bottom: 1px solid var(--line); }
.panel h2, .section-intro h2 { margin: 0 0 6px; color: #1c3248; font-size: 19px; }
.panel-head p, .section-intro p { margin: 0; color: var(--muted); font-size: 13px; }
.primary, .secondary { min-height: 42px; border-radius: 5px; padding: 0 18px; border: 1px solid transparent; font-weight: 700; }
.primary { color: white; background: #1269b5; }
.primary:hover { background: #0d589a; }
.primary:disabled { opacity: .55; cursor: wait; }
.secondary { color: #3d5368; background: white; border-color: #cfd8e1; }
.compact { min-height: 36px; font-size: 13px; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { height: 56px; padding: 0 20px; text-align: left; border-bottom: 1px solid #edf0f3; white-space: nowrap; }
th { color: #657587; background: #f9fafb; font-size: 12px; }
td code, .code-preview-grid code { padding: 5px 8px; color: #0c5996; background: #edf6fc; border-radius: 3px; }
.qr-thumb-button { display: grid; place-items: center; width: 64px; height: 64px; padding: 4px; border: 1px solid #d7e0e8; border-radius: 5px; background: white; transition: border-color .18s, box-shadow .18s; }
.qr-thumb-button:hover { border-color: #1580ce; box-shadow: 0 0 0 3px rgba(21, 128, 206, .1); }
.qr-thumb-button img { display: block; width: 54px; height: 54px; object-fit: contain; }
.empty { padding: 45px; text-align: center; color: #8b98a5; }
.section-intro { margin-bottom: 20px; }
.form-panel { overflow: hidden; }
.form-section { padding: 24px; border-bottom: 1px solid var(--line); }
.form-section h3 { margin: 0 0 20px; color: #29435d; font-size: 16px; }
.form-grid { display: grid; grid-template-columns: repeat(3, minmax(180px, 1fr)); gap: 20px; }
.form-grid label { display: grid; align-content: start; gap: 8px; color: #3b4c5d; font-size: 13px; }
.form-grid label.wide { grid-column: 1 / -1; }
.form-grid input, .form-grid textarea, .toolbar-actions input { width: 100%; border: 1px solid #cfd8e1; border-radius: 5px; background: white; outline: none; color: #21364a; }
.form-grid input { height: 43px; padding: 0 12px; }
.form-grid textarea { padding: 12px; resize: vertical; }
.form-grid input:focus, .form-grid textarea:focus, .toolbar-actions input:focus { border-color: #1580ce; box-shadow: 0 0 0 3px rgba(21, 128, 206, .1); }
.form-grid label small { color: #8995a1; line-height: 1.5; }
.compact-grid { grid-template-columns: minmax(220px, 1fr) minmax(320px, 2fr); }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 20px 24px; background: #fafbfc; }
.result-panel { margin-top: 22px; }
.code-preview-grid { display: flex; flex-wrap: wrap; gap: 10px; padding: 22px; align-items: center; }
.code-preview-grid span { color: var(--muted); font-size: 13px; }
.toolbar-actions { display: flex; gap: 10px; }
.toolbar-actions input { width: 250px; padding: 0 12px; }
.text-button { border: 0; background: none; color: #1167ad; text-decoration: none; padding: 4px; font-size: 13px; }
.qr-dialog { width: min(430px, calc(100% - 28px)); padding: 0; border: 0; border-radius: 7px; color: #243446; box-shadow: 0 24px 70px rgba(6, 27, 48, .28); }
.qr-dialog::backdrop { background: rgba(8, 28, 49, .55); }
.qr-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 20px 22px; border-bottom: 1px solid var(--line); }
.qr-dialog-head h2 { margin: 0 0 5px; font-size: 19px; color: #1c3248; }
.qr-dialog-head p { margin: 0; color: var(--muted); font-size: 13px; }
.icon-button { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; color: #607184; background: #eef2f5; font-size: 25px; line-height: 1; }
.icon-button:hover { color: #233b52; background: #e2e8ed; }
.qr-dialog-body { display: grid; justify-items: center; gap: 14px; padding: 24px 24px 20px; }
.qr-dialog-body img { width: min(300px, 100%); aspect-ratio: 1; object-fit: contain; border: 1px solid #e3e8ed; }
.qr-dialog-body code { padding: 6px 10px; color: #0c5996; background: #edf6fc; border-radius: 3px; font-size: 15px; }
.qr-dialog-body a { width: 100%; overflow-wrap: anywhere; color: #6f7d8c; text-align: center; text-decoration: none; font-size: 12px; line-height: 1.5; }
.qr-dialog-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 22px; border-top: 1px solid var(--line); background: #fafbfc; }
.button-link { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.narrow-panel { max-width: 760px; }
.one-column { grid-template-columns: 1fr; padding: 24px; }
.toast { position: fixed; z-index: 50; right: 24px; bottom: 24px; transform: translateY(25px); opacity: 0; pointer-events: none; padding: 13px 18px; color: white; background: #157452; border-radius: 5px; box-shadow: 0 10px 30px rgba(0,0,0,.2); transition: .2s; }
.toast.show { transform: translateY(0); opacity: 1; }.toast.error { background: #b63f3f; }

.verify-page { min-height: 100vh; background: #ededee; color: #202326; }
.mobile-browser-bar { display: none; }
.verify-hero { min-height: 570px; padding: 52px 20px 110px; text-align: center; color: white; background-color: #0753a1; background-image: linear-gradient(135deg, rgba(8,34,99,.88), rgba(0,130,229,.76) 48%, rgba(3,45,119,.9)), url('/assets/reference-banner.png'); background-position: center; background-size: cover; }
.seal-logo { display: block; width: 174px; height: 174px; margin: 0 auto 20px; border: 0; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px rgba(255,255,255,.45), 0 6px 20px rgba(0,42,98,.25); }
.verify-hero h1 { margin: 0; font-size: 30px; }.verify-hero > p { margin: 8px 0 28px; opacity: .75; font-size: 14px; }
.hero-slogan { font-family: "STKaiti", "KaiTi", serif; font-size: 37px; font-weight: 700; line-height: 1.7; text-shadow: 0 2px 6px rgba(0,0,0,.18); }
.verify-content { width: min(830px, calc(100% - 38px)); margin: -72px auto 0; padding-bottom: 50px; position: relative; }
.ticket { position: relative; padding: 38px 42px; background: rgba(255,255,255,.98); border-bottom: 2px dashed #d9dcdf; }
.ticket:first-child { border-radius: 14px 14px 0 0; }.ticket:last-of-type { border-radius: 0 0 14px 14px; border-bottom: 0; }
.ticket::before, .ticket::after { content: ''; position: absolute; width: 24px; height: 24px; bottom: -13px; background: #ededee; border-radius: 50%; z-index: 1; }
.ticket::before { left: -13px; }.ticket::after { right: -13px; }
.ticket h2 { margin: 0 0 30px; color: #385574; font-size: 28px; }
.code-groups { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.code-groups span { display: grid; place-items: center; min-height: 82px; padding: 0 8px; border-radius: 8px; background-color: #f1f1f1; background-image: repeating-linear-gradient(125deg, rgba(0,0,0,.035) 0 2px, transparent 2px 5px); font-size: clamp(25px, 5vw, 46px); font-weight: 400; overflow-wrap: anywhere; }
.result-ticket { min-height: 540px; }
.verify-state { text-align: center; padding: 20px 0 10px; position: relative; }
.result-icon { display: grid; place-items: center; width: 140px; height: 140px; margin: 0 auto 46px; border-radius: 50%; color: white; background: var(--yellow); font-size: 88px; font-weight: 800; }
.verify-state h3 { margin: 0 0 18px; font-size: 34px; font-weight: 500; }.verify-state p { max-width: 620px; margin: auto; line-height: 1.8; font-size: 24px; }
.verify-state.first .result-icon { background: var(--green); }.verify-state.invalid .result-icon { background: var(--red); }
.approval-stamp { position: absolute; right: 48px; bottom: -12px; width: 150px; height: 150px; object-fit: contain; transform: rotate(-7deg); opacity: 1; }
.product-ticket dl { margin: 0; }.product-ticket dl > div { display: grid; grid-template-columns: 120px 1fr; gap: 20px; padding: 14px 0; border-bottom: 1px solid #edf0f2; }
.product-ticket dt { color: #788694; }.product-ticket dd { margin: 0; color: #263a4e; line-height: 1.6; white-space: pre-wrap; }
.history-ticket p { font-size: 23px; }.timeline-dot { display: flex; align-items: center; gap: 12px; color: #6d7a87; }.timeline-dot i { width: 15px; height: 15px; border-radius: 50%; background: #22bd73; }
.service-line { padding: 28px; text-align: center; color: #747f8a; }.service-line a { color: #326a99; text-decoration: none; }

@media (max-width: 900px) {
  .sidebar { transform: translateX(-100%); transition: .2s; }.menu-open .sidebar { transform: translateX(0); }
  .admin-main { margin-left: 0; }.menu-toggle { display: block; border: 0; background: none; font-size: 24px; }
  .topbar { padding: 0 18px; justify-content: flex-start; gap: 16px; }.status-pill { margin-left: auto; }
  .view { padding: 22px 18px 40px; }.stat-grid { grid-template-columns: repeat(2, 1fr); }
  .form-grid, .compact-grid { grid-template-columns: 1fr 1fr; }.form-grid label.wide { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .status-pill { display: none; }.topbar { height: 74px; }.topbar h1 { font-size: 19px; }.topbar p { display: none; }
  .view { padding: 16px 12px 35px; }.stat-grid { gap: 10px; }.stat-card { min-height: 126px; padding: 16px; }.stat-card strong { font-size: 27px; }
  .form-grid, .compact-grid { grid-template-columns: 1fr; }.form-grid label.wide { grid-column: auto; }.form-section { padding: 18px; }
  .panel-head, .code-toolbar { align-items: flex-start; flex-direction: column; }.toolbar-actions { width: 100%; flex-direction: column; }.toolbar-actions input { width: 100%; height: 42px; }
  .qr-dialog-actions { flex-direction: column; }.qr-dialog-actions .primary, .qr-dialog-actions .secondary { width: 100%; }
  .mobile-browser-bar { height: 84px; padding: 8px 17px; display: flex; align-items: center; justify-content: space-between; background: #f1f1f2; }
  .mobile-browser-bar button { border: 0; background: none; font-size: 43px; font-weight: 200; line-height: 1; }.mobile-browser-bar div { text-align: center; }.mobile-browser-bar strong, .mobile-browser-bar small { display: block; }.mobile-browser-bar strong { font-size: 22px; }.mobile-browser-bar small { margin-top: 3px; color: #747474; }.mobile-browser-bar > span { font-size: 22px; font-weight: 900; }
  .verify-hero { min-height: 430px; padding: 28px 12px 80px; }.seal-logo { width: 126px; height: 126px; }.verify-hero h1 { font-size: 22px; }.verify-hero > p { font-size: 10px; margin-bottom: 18px; }.hero-slogan { font-size: 27px; }
  .verify-content { width: calc(100% - 28px); margin-top: -48px; }.ticket { padding: 26px 20px; }.ticket h2 { margin-bottom: 22px; font-size: 22px; }.code-groups { gap: 6px; }.code-groups span { min-height: 57px; font-size: clamp(18px, 7vw, 28px); padding: 0 3px; }
  .result-ticket { min-height: 400px; }.result-icon { width: 95px; height: 95px; margin-bottom: 35px; font-size: 58px; }.verify-state h3 { font-size: 24px; }.verify-state p { font-size: 17px; }.approval-stamp { width: 105px; height: 105px; right: 8px; bottom: -20px; }
  .product-ticket dl > div { grid-template-columns: 86px 1fr; gap: 10px; }.history-ticket p { font-size: 18px; }
}