:root {
  --ink: #102142;
  --muted: #6d7e9b;
  --line: #dee7f3;
  --paper: #f5f8fc;
  --blue: #1268ff;
  --blue-deep: #0a50ca;
  --cyan: #47d9ff;
  --navy: #071b4a;
  --danger: #cd4355;
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
}

* { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; }
body { min-width: 320px; margin: 0; background: var(--paper); color: var(--ink); }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .45; }
a { color: inherit; }
svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

.loading-page, .auth-page { display: grid; min-height: 100vh; place-items: center; padding: 24px; background: linear-gradient(135deg, #f6f9fd, #e8f3ff); }
.loading-page > div { color: var(--muted); text-align: center; }
.loading-page i { display: inline-block; width: 29px; height: 29px; border: 3px solid #bfdbff; border-top-color: var(--blue); border-radius: 50%; animation: spin .76s linear infinite; }
.loading-page p { margin: 12px 0 0; font-size: .86rem; }
@keyframes spin { to { transform: rotate(1turn); } }
.error-card { max-width: 390px; padding: 27px; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 16px 38px rgba(20,54,102,.1); }
.error-card h1 { margin: 0 0 8px; font-size: 1.2rem; }
.error-card p { margin: 0 0 18px; line-height: 1.6; }

.site-page { min-height: 100vh; overflow: hidden; background: linear-gradient(180deg, #071b4a 0, #0c306f 495px, #f5f8fc 495px); }
.site-wrap { width: min(1160px, calc(100% - 40px)); margin: 0 auto; }
.site-header { padding: 18px 0; }
.brand { display: inline-flex; align-items: center; gap: 11px; color: #fff; text-decoration: none; }
.brand img { display: block; width: auto; max-width: 173px; height: 38px; object-fit: contain; }
.brand span { padding-left: 11px; border-left: 1px solid rgba(255,255,255,.24); font-size: .8rem; font-weight: 700; letter-spacing: .06em; }
.landing-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(245px, .75fr); gap: clamp(30px, 7vw, 92px); min-height: 399px; padding: 25px 0 62px; color: #fff; }
.hero-copy { z-index: 1; padding-top: 19px; }
.hero-copy > small { color: #8aeaff; font-size: .7rem; font-weight: 800; letter-spacing: .18em; }
.hero-copy h1 { max-width: 640px; margin: 12px 0 0; font-size: clamp(2.55rem, 5.9vw, 5.15rem); line-height: .97; letter-spacing: -.07em; }
.hero-copy h1 span { display: block; margin-top: 8px; color: #82e5ff; font-size: .49em; letter-spacing: -.04em; }
.hero-description { max-width: 550px; margin: 18px 0 0; color: #d0e4ff; font-size: 1rem; line-height: 1.7; }
.entry-panel { max-width: 645px; margin-top: 26px; padding: 16px; border: 1px solid rgba(157,219,255,.38); border-radius: 17px; background: rgba(5,26,73,.42); box-shadow: inset 0 1px 0 rgba(255,255,255,.1); backdrop-filter: blur(12px); }
.entry-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; margin-bottom: 11px; }
.entry-head b { font-size: .96rem; }.entry-head span { color: #b5d5f7; font-size: .73rem; }
.entry-actions { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 9px; }
.entry-button { display: inline-flex; min-height: 46px; justify-content: center; gap: 8px; align-items: center; padding: 0 10px; border: 0; border-radius: 10px; color: #06193d; background: linear-gradient(110deg, #72e7ff, #288eff); font-size: .82rem; font-weight: 800; transition: transform .16s ease, filter .16s ease; }
.entry-button:hover, .button-primary:hover, .button-outline:hover, .contact-actions button:hover { transform: translateY(-1px); filter: brightness(1.04); }
.entry-light { border: 1px solid rgba(171,226,255,.4); color: #ecf8ff; background: rgba(42,136,238,.18); }
.official-link { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 4px 10px; width: 100%; margin-top: 11px; padding: 10px 0 0; border: 0; border-top: 1px solid rgba(185,226,255,.18); color: #d7ebff; text-align: left; background: transparent; }
.official-link small { grid-column: 1 / -1; color: #aac9e8; font-size: .67rem; }
.official-link b { overflow: hidden; color: #f2f9ff; font-size: .77rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.official-link svg { align-self: center; color: #8beaff; }
.entry-panel > p { margin: 11px 0 0; color: #d7edff; font-size: .77rem; line-height: 1.6; }
.service-link { display: inline-flex; gap: 8px; align-items: center; margin-top: 13px; padding: 9px 0; border: 0; color: #c4ebff; background: transparent; font-size: .81rem; font-weight: 750; }
.service-link svg { color: #7ee8ff; font-size: 1.05rem; }
.hero-visual { position: relative; min-height: 300px; align-self: center; }
.hero-visual::before { position: absolute; inset: 5% 0 0; border: 1px solid rgba(128,216,255,.2); border-radius: 50%; background: repeating-linear-gradient(0deg, transparent 0 35px, rgba(120,207,255,.08) 35px 36px), repeating-linear-gradient(90deg, transparent 0 35px, rgba(120,207,255,.08) 35px 36px); content: ""; transform: rotate(-13deg); }
.hero-visual > .hero-logo { position: absolute; top: 20%; left: 8%; display: grid; width: min(100%, 335px); min-height: 164px; place-items: center; padding: 20px 23px; border: 1px solid rgba(200,244,255,.58); border-radius: 27px; background: linear-gradient(145deg, rgba(83,195,255,.22), rgba(7,48,123,.72)); box-shadow: -24px 30px 58px rgba(0,5,34,.43), inset 12px 14px 30px rgba(255,255,255,.12); transform: rotate(-8deg); }
.hero-logo img { display: block; width: 100%; height: auto; max-height: 123px; object-fit: contain; filter: drop-shadow(0 8px 16px rgba(0,11,58,.35)); }
.hero-visual > i { position: absolute; top: 15%; right: 15%; width: 30px; height: 30px; border-radius: 50%; background: #77e5ff; box-shadow: 0 0 0 11px rgba(119,229,255,.13), 0 0 32px #77e5ff; }.hero-visual > i::after { position: absolute; bottom: -214px; left: -221px; width: 16px; height: 16px; border-radius: 50%; background: #3e97ff; box-shadow: 0 0 0 8px rgba(62,151,255,.14), 0 0 26px #3e97ff; content: ""; }
.landing-section { padding-top: 52px; }.section-title { margin-bottom: 19px; }.section-title small { color: var(--blue); font-size: .67rem; font-weight: 850; letter-spacing: .16em; }.section-title h2 { margin: 5px 0; font-size: clamp(1.72rem, 3.2vw, 2.38rem); letter-spacing: -.055em; }.section-title p { margin: 0; color: var(--muted); font-size: .87rem; }
.contacts-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 13px; }.contact-card { display: flex; min-height: 164px; flex-direction: column; justify-content: space-between; gap: 15px; padding: 17px; border: 1px solid var(--line); border-radius: 17px; background: #fff; box-shadow: 0 10px 25px rgba(18,59,120,.05); }
.contact-head { display: flex; gap: 12px; align-items: center; min-width: 0; }.contact-logo { display: grid; width: 52px; height: 52px; flex: 0 0 52px; place-items: center; overflow: hidden; border: 1px solid #d5e8ff; border-radius: 14px; color: var(--blue); background: #f0f7ff; }.contact-logo img { width: 100%; height: 100%; object-fit: contain; background: #fff; }.contact-logo svg { font-size: 1.38rem; }
.contact-head small, .wechat-card > div > small { color: var(--blue); font-size: .68rem; font-weight: 800; letter-spacing: .08em; }.contact-head h3 { overflow: hidden; max-width: 100%; margin: 3px 0 0; font-size: .98rem; text-overflow: ellipsis; white-space: nowrap; }.contact-head p { margin: 4px 0 0; color: var(--muted); font-size: .71rem; line-height: 1.45; }
.contact-actions { display: flex; gap: 8px; }.contact-actions button { display: inline-flex; min-height: 36px; flex: 1; justify-content: center; gap: 6px; align-items: center; padding: 0 8px; border: 1px solid #c7ddff; border-radius: 9px; color: var(--blue-deep); background: #f4f8ff; font-size: .75rem; font-weight: 750; transition: transform .16s ease, filter .16s ease; }.contact-actions svg { font-size: 1rem; }.contact-actions .button-blue { border-color: var(--blue); color: #fff; background: var(--blue); }
.wechat-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 13px; }.wechat-card { display: grid; grid-template-columns: 113px minmax(0,1fr); gap: 15px; align-items: center; min-height: 145px; padding: 15px; border: 1px solid var(--line); border-radius: 17px; background: #fff; box-shadow: 0 10px 25px rgba(18,59,120,.05); }.wechat-image { display: grid; width: 113px; height: 113px; place-items: center; padding: 7px; overflow: hidden; border: 1px solid #dae4f1; border-radius: 12px; background: #fff; cursor: zoom-in; }.wechat-image img { width: 100%; height: 100%; object-fit: contain; }.wechat-card h3 { margin: 3px 0 0; font-size: 1rem; }.wechat-card p { margin: 7px 0 0; color: var(--muted); font-size: .76rem; line-height: 1.52; }.plain-link { display: inline-flex; gap: 6px; align-items: center; margin-top: 8px; padding: 0; border: 0; color: var(--blue); background: transparent; font-size: .77rem; font-weight: 750; }
.activities-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 15px; }.activity-card { position: relative; min-height: 232px; overflow: hidden; padding: 0; border: 0; border-radius: 17px; color: #fff; text-align: left; background: #174e9e; box-shadow: 0 13px 28px rgba(9,49,110,.12); }.activity-image, .activity-image img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .28s ease; }.activity-card:hover .activity-image img { transform: scale(1.035); }.activity-mask { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,22,59,.03) 30%, rgba(5,22,59,.88) 100%); }.activity-text { position: absolute; right: 20px; bottom: 18px; left: 20px; display: grid; gap: 4px; }.activity-text small { color: #8eeaff; font-size: .68rem; font-weight: 800; letter-spacing: .1em; }.activity-text b { font-size: 1.33rem; }.activity-text em { color: #e7f1ff; font-size: .77rem; font-style: normal; line-height: 1.5; }
.site-footer { margin-top: 55px; padding: 21px 0; border-top: 1px solid #dce5f1; color: #718097; background: #f5f8fc; font-size: .71rem; }.site-footer .site-wrap { display: flex; justify-content: space-between; gap: 20px; }

.modal-overlay { position: fixed; z-index: 80; inset: 0; display: grid; place-items: center; padding: 20px; }.modal-backdrop { position: absolute; inset: 0; border: 0; background: rgba(5,15,40,.72); backdrop-filter: blur(5px); }.lightbox, .support-dialog { position: relative; z-index: 1; width: min(720px,100%); max-height: calc(100vh - 40px); overflow: auto; border-radius: 17px; background: #fff; box-shadow: 0 28px 85px rgba(0,0,0,.42); }.lightbox header, .support-dialog header { display: flex; justify-content: space-between; gap: 13px; align-items: start; padding: 16px 18px; border-bottom: 1px solid var(--line); }.lightbox h2 { margin: 0; font-size: 1.06rem; }.lightbox header p { margin: 5px 0 0; color: var(--muted); font-size: .78rem; }.lightbox > img { display: block; width: 100%; max-height: calc(100vh - 210px); object-fit: contain; background: #fff; }.lightbox footer { display: flex; justify-content: center; padding: 15px; }.round-button, .mini-button { display: grid; width: 33px; height: 33px; place-items: center; border: 1px solid #d2dfef; border-radius: 8px; color: #53647d; background: #fff; }.round-button { border-radius: 50%; }.support-dialog { width: min(960px,100%); height: min(700px, calc(100vh - 40px)); }.support-dialog iframe { display: block; width: 100%; height: calc(100% - 65px); border: 0; background: #fff; }
.campaign-page { display: grid; min-height: 100vh; place-items: center; padding: 22px; background: radial-gradient(circle at 50% 0, #174ea1, #071a48 70%); }.campaign-card { width: min(430px,100%); padding: 25px; border: 1px solid rgba(188,229,255,.42); border-radius: 24px; color: #fff; text-align: center; background: rgba(4,22,59,.72); box-shadow: 0 30px 75px rgba(0,0,0,.38); backdrop-filter: blur(13px); }.campaign-brand { display: flex; justify-content: center; }.campaign-brand .brand span { display: none; }.campaign-brand .brand img { max-width: 170px; height: 38px; }.campaign-card > small { display: block; margin-top: 22px; color: #83eaff; font-size: .68rem; font-weight: 800; letter-spacing: .16em; }.campaign-card h1 { margin: 8px 0; font-size: 1.56rem; }.campaign-card p { margin: 0 0 17px; color: #d5e9ff; font-size: .86rem; line-height: 1.6; }.campaign-card img { display: block; width: min(100%,290px); margin: 0 auto 17px; padding: 9px; border-radius: 14px; background: #fff; }.campaign-action { width: 100%; }.campaign-card > em { display: block; margin-top: 13px; color: #abc8eb; font-size: .71rem; font-style: normal; }

.auth-card { width: min(430px,100%); padding: 30px; border: 1px solid var(--line); border-radius: 19px; background: #fff; box-shadow: 0 18px 45px rgba(22,63,116,.09); }.auth-card > a img { display: block; width: auto; max-width: 170px; height: 41px; object-fit: contain; }.auth-card h1 { margin: 21px 0 8px; font-size: 1.52rem; letter-spacing: -.04em; }.auth-card > p { margin: 0 0 19px; color: var(--muted); font-size: .87rem; line-height: 1.62; }
.admin-page { display: grid; grid-template-columns: 220px minmax(0,1fr); min-height: 100vh; background: var(--paper); }.admin-sidebar { position: sticky; top: 0; display: flex; height: 100vh; flex-direction: column; padding: 20px 12px; border-right: 1px solid #dde6f2; background: #fff; }.admin-brand { display: flex; gap: 8px; align-items: center; padding: 5px 8px 19px; color: var(--ink); text-decoration: none; }.admin-brand img { width: 121px; height: 31px; object-fit: contain; }.admin-brand span { color: var(--muted); font-size: .68rem; font-weight: 700; }.admin-sidebar nav { display: grid; gap: 2px; }.admin-sidebar nav > small { margin: 14px 8px 4px; color: #929fb2; font-size: .64rem; font-weight: 800; letter-spacing: .1em; }.admin-sidebar nav button { width: 100%; padding: 9px 10px; border: 0; border-radius: 8px; color: #52627a; text-align: left; background: transparent; font-size: .83rem; }.admin-sidebar nav button:hover { color: var(--blue); background: #f2f7ff; }.admin-sidebar nav button.active { color: var(--blue); background: #eaf3ff; font-weight: 800; }.admin-user { display: flex; justify-content: space-between; gap: 9px; align-items: center; margin-top: auto; padding: 15px 8px 2px; border-top: 1px solid #e8edf5; color: var(--muted); font-size: .75rem; }.admin-user span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.admin-user button { padding: 0; border: 0; color: var(--blue); background: transparent; font-size: .75rem; }
.admin-main { min-width: 0; padding: 30px clamp(20px,4vw,58px) 52px; }.admin-header { display: flex; justify-content: space-between; gap: 18px; align-items: start; margin-bottom: 23px; }.admin-header h1 { margin: 0; font-size: clamp(1.5rem,3vw,2rem); letter-spacing: -.055em; }.admin-header p { margin: 6px 0 0; color: var(--muted); font-size: .85rem; }.admin-content { display: grid; gap: 16px; }.admin-loading { padding: 48px 0; color: var(--muted); text-align: center; }
.admin-card { overflow: hidden; border: 1px solid #e0e8f3; border-radius: 14px; background: #fff; box-shadow: 0 6px 20px rgba(26,64,112,.035); }.admin-card > header { display: flex; justify-content: space-between; gap: 15px; align-items: start; padding: 17px 19px; border-bottom: 1px solid #e8eef6; }.admin-card h2 { margin: 0; font-size: 1rem; }.admin-card header p { margin: 5px 0 0; color: var(--muted); font-size: .77rem; line-height: 1.55; }.card-body { padding: 19px; }
.button-primary, .button-outline { display: inline-flex; min-height: 39px; justify-content: center; gap: 8px; align-items: center; padding: 0 13px; border-radius: 9px; font-size: .8rem; font-weight: 750; text-decoration: none; transition: transform .16s ease, filter .16s ease; }.button-primary { border: 1px solid var(--blue); color: #fff; background: var(--blue); }.button-outline { border: 1px solid #cad9ec; color: #385574; background: #fff; }.text-button, .danger-button { padding: 4px 2px; border: 0; background: transparent; font-size: .75rem; }.text-button { color: var(--blue); }.danger-button { color: var(--danger); }
.metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }.metrics article { padding: 17px; border: 1px solid #e0e8f3; border-radius: 13px; background: #fff; }.metrics small { color: var(--muted); font-size: .74rem; }.metrics b { display: block; margin-top: 8px; font-size: 1.63rem; letter-spacing: -.05em; }
.admin-columns { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }.quick-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; padding: 17px; }.quick-actions button { min-height: 48px; border: 1px solid #dce7f5; border-radius: 9px; color: #315476; text-align: left; background: #f8fbff; font-size: .79rem; }.quick-actions button:hover { border-color: #b9d6ff; color: var(--blue); }.bars { display: flex; height: 157px; gap: 8px; align-items: end; padding: 14px 17px 20px; }.bars > div { display: grid; height: 100%; flex: 1; gap: 5px; align-items: end; }.bars i { display: block; min-height: 5px; border-radius: 5px 5px 1px 1px; background: linear-gradient(#50d6ff,#1c6fff); }.bars span { color: #8190a7; font-size: .63rem; text-align: center; }.chart-empty { display: grid; height: 157px; place-items: center; color: var(--muted); }
.simple-list, .target-list { display: grid; margin: 0; padding: 0; list-style: none; }.simple-list li { display: flex; justify-content: space-between; gap: 14px; align-items: center; min-height: 57px; padding: 11px 17px; border-bottom: 1px solid #edf1f7; }.simple-list li:last-child { border-bottom: 0; }.simple-list b, .simple-list small { display: block; }.simple-list small { margin-top: 3px; color: var(--muted); font-size: .7rem; }.simple-list time, .simple-list strong { color: #58708c; font-size: .74rem; white-space: nowrap; }.empty-list { padding: 22px !important; color: var(--muted); text-align: center; }
.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; }.form-grid label { display: grid; gap: 6px; color: #43536c; font-size: .77rem; font-weight: 700; }.form-grid input, .form-grid select, .form-grid textarea { width: 100%; min-height: 39px; padding: 8px 10px; border: 1px solid #ccd9e8; border-radius: 8px; outline: none; color: var(--ink); background: #fff; font-size: .83rem; font-weight: 500; }.form-grid textarea { min-height: 77px; resize: vertical; }.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(18,104,255,.1); }.form-grid small { color: var(--muted); font-size: .68rem; font-weight: 500; line-height: 1.43; }.span-two { grid-column: 1 / -1; }.check { display: flex !important; grid-template-columns: auto 1fr; align-items: center; gap: 8px !important; min-height: 39px; }.check input { width: 16px; min-height: 16px; accent-color: var(--blue); }.actions, .save-row { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }.save-row { justify-content: flex-end; }
.settings-stack { display: grid; gap: 16px; }.brand-card { display: grid; grid-template-columns: 150px minmax(0,1fr); gap: 20px; }.brand-preview { display: grid; align-content: start; justify-items: center; gap: 9px; padding: 14px; border: 1px dashed #cbddec; border-radius: 11px; color: var(--muted); font-size: .71rem; text-align: center; }.brand-preview img { width: 100%; max-width: 126px; height: 70px; object-fit: contain; }.sort-card { grid-column: 1 / -1; display: grid; grid-template-columns: 180px minmax(0,1fr); gap: 18px; padding-top: 17px; border-top: 1px solid #e8eef6; }.sort-card h3 { margin: 0; font-size: .9rem; }.sort-card p { margin: 5px 0 0; color: var(--muted); font-size: .73rem; line-height: 1.5; }.sections-order { display: grid; gap: 7px; }.sections-order > div { display: flex; justify-content: space-between; gap: 11px; align-items: center; padding: 8px 10px; border: 1px solid #dfe8f3; border-radius: 8px; background: #f9fbfe; }.sections-order b, .sections-order small { display: block; }.sections-order b { font-size: .77rem; }.sections-order small { margin-top: 2px; color: var(--muted); font-size: .66rem; }.sections-order aside, .sort-buttons { display: flex; gap: 4px; }.mini-button { width: 27px; height: 27px; border-radius: 7px; }
.content-grid { display: grid; grid-template-columns: minmax(300px,.94fr) minmax(0,1.06fr); gap: 16px; align-items: start; }.records { display: grid; }.record { display: grid; grid-template-columns: 52px minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 13px 17px; border-bottom: 1px solid #edf1f7; }.record:last-child { border-bottom: 0; }.record-image { display: grid; width: 52px; height: 52px; place-items: center; overflow: hidden; border: 1px solid #dce7f4; border-radius: 10px; color: var(--blue); background: #f1f7ff; }.record-image img { width: 100%; height: 100%; object-fit: contain; background: #fff; }.record-copy { overflow: hidden; }.record-copy b, .record-copy span, .record-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.record-copy b { font-size: .85rem; }.record-copy span { margin-top: 3px; color: #56657b; font-size: .75rem; }.record-copy small { margin-top: 3px; color: #8793a5; font-size: .68rem; }.record-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; align-items: center; }.status { display: inline-flex; padding: 3px 7px; border-radius: 99px; color: #758398; background: #eef2f7; font-size: .66rem; font-style: normal; font-weight: 750; white-space: nowrap; }.status.on { color: #1d8a55; background: #e7f7ee; }.status.warn { color: #a36c09; background: #fff5db; }.status.off { color: #b13b4a; background: #feecef; }
.toolbar { display: flex; justify-content: space-between; gap: 17px; align-items: center; }.toolbar h2 { margin: 0; font-size: 1.13rem; }.toolbar p { margin: 5px 0 0; color: var(--muted); font-size: .77rem; }.codes-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; }.code-card { display: grid; gap: 15px; padding: 18px; border: 1px solid #e0e8f3; border-radius: 13px; background: #fff; }.code-card h2 { margin: 10px 0 3px; font-size: 1rem; }.code-card p { margin: 0; color: var(--muted); font-size: .75rem; }.code-card dl { display: grid; grid-template-columns: repeat(2,1fr); margin: 0; padding: 11px 0; border-top: 1px solid #edf1f7; border-bottom: 1px solid #edf1f7; }.code-card dl div + div { padding-left: 15px; border-left: 1px solid #edf1f7; }.code-card dt { color: var(--muted); font-size: .67rem; }.code-card dd { margin: 4px 0 0; font-size: 1.1rem; font-weight: 800; }.code-card footer { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.drawer-overlay { position: fixed; z-index: 90; inset: 0; display: flex; justify-content: flex-end; }.drawer-backdrop { position: absolute; inset: 0; border: 0; background: rgba(6,21,51,.37); backdrop-filter: blur(2px); }.drawer { position: relative; z-index: 1; width: min(690px,100%); height: 100%; overflow: auto; padding: 21px; border-left: 1px solid #dce6f3; background: #f6f9fd; box-shadow: -22px 0 56px rgba(0,0,0,.15); }.drawer > header { display: flex; justify-content: space-between; gap: 12px; align-items: start; margin-bottom: 16px; }.drawer > header h2 { margin: 0; font-size: 1.24rem; }.drawer > header p { margin: 5px 0 0; color: var(--muted); font-size: .76rem; }.drawer section { margin-top: 14px; padding: 16px; border: 1px solid #dfe8f3; border-radius: 12px; background: #fff; }.drawer section h3 { margin: 0 0 14px; font-size: .9rem; }.scan-card { display: grid; grid-template-columns: 126px 1fr; gap: 15px; align-items: center; padding: 14px; border: 1px solid #d5e6f8; border-radius: 12px; background: #fff; }.scan-card img { width: 126px; height: 126px; padding: 5px; border: 1px solid #e0e8f3; border-radius: 9px; background: #fff; }.scan-card b, .scan-card span, .scan-card a { display: block; }.scan-card b { font-size: .87rem; }.scan-card span { overflow: hidden; margin-top: 5px; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .69rem; text-overflow: ellipsis; white-space: nowrap; }.scan-card a { margin-top: 10px; color: var(--blue); font-size: .77rem; text-decoration: none; }.target-list li { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 11px 0; border-bottom: 1px solid #edf1f7; }.target-list li:last-child { border-bottom: 0; }.target-list b, .target-list small { display: block; }.target-list b { font-size: .83rem; }.target-list small { margin-top: 3px; color: var(--muted); font-size: .69rem; }.target-list aside { display: flex; flex-wrap: wrap; justify-content: end; gap: 7px; align-items: center; }
.notice { padding: 10px; border: 1px solid #cee3ff; border-radius: 8px; color: #386083; background: #f2f8ff; font-size: .75rem; font-weight: 500 !important; line-height: 1.6; }.notice code { color: var(--blue); }.steps { display: grid; gap: 10px; margin: 0; padding: 18px 18px 18px 37px; color: #50617a; font-size: .81rem; line-height: 1.5; }.table-wrap { overflow: auto; }.table-wrap table { width: 100%; min-width: 700px; border-collapse: collapse; }.table-wrap th, .table-wrap td { padding: 12px 17px; border-bottom: 1px solid #edf1f7; color: #56667e; text-align: left; vertical-align: top; font-size: .75rem; }.table-wrap th { color: #8a97aa; font-size: .65rem; letter-spacing: .07em; text-transform: uppercase; }.table-wrap td b, .table-wrap td small { display: block; }.table-wrap td b { color: var(--ink); font-size: .81rem; }.table-wrap td small { margin-top: 3px; color: #7f8da1; }.account-card { max-width: 670px; }.empty-admin { padding: 40px 20px; text-align: center; }.empty-admin h2 { margin: 0; }.empty-admin p { margin: 8px 0 18px; color: var(--muted); }
.toast-root { position: fixed; z-index: 200; top: 16px; right: 16px; display: grid; gap: 8px; width: min(360px, calc(100vw - 32px)); }.toast { padding: 11px 13px; border: 1px solid #d4e0ee; border-radius: 10px; color: #38516d; background: #fff; box-shadow: 0 13px 30px rgba(24,61,108,.14); font-size: .81rem; animation: toast .18s ease; }.toast.success { border-color: #bbe8ce; color: #227449; background: #f0fbf5; }.toast.error { border-color: #f0c7ce; color: #a63848; background: #fff5f6; } @keyframes toast { from { opacity: 0; transform: translateY(-5px); } }

@media (max-width: 960px) {
  .landing-hero { grid-template-columns: 1fr; min-height: auto; padding-bottom: 47px; }.hero-visual { display: none; }.hero-copy { padding-top: 12px; }.contacts-grid, .wechat-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .admin-page { grid-template-columns: 1fr; }.admin-sidebar { z-index: 30; height: auto; flex-direction: row; align-items: center; gap: 12px; overflow: auto; padding: 10px 15px; border-right: 0; border-bottom: 1px solid #dde6f2; }.admin-brand { flex: 0 0 auto; padding: 0; }.admin-brand span, .admin-user { display: none; }.admin-sidebar nav { display: flex; gap: 3px; }.admin-sidebar nav > small { display: none; }.admin-sidebar nav button { width: auto; flex: 0 0 auto; padding: 8px 9px; white-space: nowrap; }.content-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .site-page { background: linear-gradient(180deg, #071b4a 0, #0c306f 450px, #f5f8fc 450px); }.site-wrap { width: min(100% - 28px,1160px); }.site-header { padding: 14px 0; }.brand img { max-width: 150px; height: 34px; }.brand span { display: none; }.landing-hero { padding: 18px 0 43px; }.hero-copy h1 { font-size: clamp(2.28rem,13vw,3.62rem); }.hero-description { margin-top: 16px; font-size: .9rem; }.entry-panel { margin-top: 21px; padding: 14px; }.entry-head { display: grid; gap: 3px; }.entry-actions { grid-template-columns: 1fr; }.landing-section { padding-top: 39px; }.contacts-grid, .wechat-grid, .activities-grid { grid-template-columns: 1fr; }.wechat-card { grid-template-columns: 101px minmax(0,1fr); }.wechat-image { width: 101px; height: 101px; }.site-footer { margin-top: 37px; }.site-footer .site-wrap { display: grid; gap: 5px; }
  .admin-main { padding: 21px 14px 42px; }.admin-header { display: grid; margin-bottom: 18px; }.admin-header h1 { font-size: 1.46rem; }.metrics, .admin-columns, .codes-grid, .form-grid { grid-template-columns: 1fr; }.quick-actions { grid-template-columns: 1fr; }.brand-card, .sort-card { grid-template-columns: 1fr; }.brand-preview { grid-template-columns: 100px 1fr; align-items: center; justify-items: start; }.brand-preview img { height: 48px; }.record { grid-template-columns: 44px minmax(0,1fr); padding: 12px; }.record-image { width: 44px; height: 44px; }.record-actions { grid-column: 1 / -1; justify-content: flex-start; }.toolbar { align-items: start; flex-direction: column; }.drawer { padding: 15px; }.scan-card { grid-template-columns: 96px 1fr; }.scan-card img { width: 96px; height: 96px; }.target-list li { align-items: start; flex-direction: column; }.target-list aside { justify-content: start; }.auth-card { padding: 25px 20px; }
}

/* New 2028 logo palette: keep the public landing page in the same clean
   azure/cyan family as the transparent brand mark instead of deep navy. */
.site-page {
  background:
    radial-gradient(circle at 84% 8%, rgba(104, 238, 255, .72), transparent 29%),
    radial-gradient(circle at 12% 0, rgba(232, 251, 255, .25), transparent 31%),
    linear-gradient(135deg, #006fe7 0%, #088cff 54%, #28c6fb 100%) 0 0 / 100% 495px no-repeat,
    #f5f8fc;
}
.hero-copy > small { color: #d9fbff; }
.hero-copy h1 span { color: #dffcff; }
.hero-description { color: #effcff; }
.entry-panel {
  border-color: rgba(238, 253, 255, .48);
  background: rgba(0, 91, 202, .22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.26), 0 16px 34px rgba(0, 76, 179, .15);
}
.entry-head span, .official-link small { color: #d9f8ff; }
.official-link { border-top-color: rgba(232, 252, 255, .28); color: #effcff; }
.official-link b { color: #fff; }
.service-link { color: #effcff; }
.hero-visual::before { border-color: rgba(232,252,255,.36); background: repeating-linear-gradient(0deg, transparent 0 35px, rgba(238,253,255,.13) 35px 36px), repeating-linear-gradient(90deg, transparent 0 35px, rgba(238,253,255,.13) 35px 36px); }
.hero-visual > .hero-logo { border-color: rgba(238,253,255,.72); background: linear-gradient(145deg, rgba(238,253,255,.32), rgba(0,111,231,.34)); box-shadow: -24px 30px 58px rgba(0,72,172,.26), inset 12px 14px 30px rgba(255,255,255,.25); }

@media (max-width: 640px) {
  .site-page {
    background:
      radial-gradient(circle at 85% 0, rgba(105, 238, 255, .64), transparent 34%),
      linear-gradient(135deg, #006fe7 0%, #088cff 55%, #28c6fb 100%) 0 0 / 100% 450px no-repeat,
      #f5f8fc;
  }
}

/* QR-first public homepage. The surface is deliberately opaque: the blue and
   cyan match the 2028 mark, while every interactive card is solid white or a
   very pale blue so copy and QR codes stay legible in WeChat's browser. */
.site-page {
  min-height: 100vh;
  overflow: visible;
  background: #effaff;
}
.site-header {
  padding: 18px 0;
  background: linear-gradient(105deg, #087cf0 0%, #14a8f4 54%, #52dce8 100%);
}
.site-page .site-wrap { width: min(1160px, calc(100% - 40px)); }
.brand { color: #fff; }
.qr-primary {
  display: grid;
  grid-template-columns: minmax(214px, 244px) minmax(0, 1fr);
  gap: clamp(24px, 5vw, 64px);
  align-items: center;
  margin: 24px 0 0;
  padding: clamp(26px, 4.2vw, 52px);
  border: 1px solid #087cf0;
  border-radius: 24px;
  color: #fff;
  background: linear-gradient(118deg, #087cf0 0%, #14a8f4 55%, #52dce8 100%);
  box-shadow: 0 18px 42px rgba(4, 104, 206, .18);
}
.qr-primary-copy { min-width: 0; }
.qr-primary-copy > small {
  display: block;
  margin-bottom: 9px;
  color: #e7fbff;
  font-size: .7rem;
  font-weight: 850;
  letter-spacing: .18em;
}
.qr-primary h1 {
  max-width: 620px;
  margin: 0;
  color: #fff;
  font-size: clamp(2rem, 4vw, 3.45rem);
  line-height: 1.14;
  letter-spacing: -.055em;
}
.qr-primary p {
  max-width: 610px;
  margin: 15px 0 0;
  color: #f5feff;
  font-size: clamp(.94rem, 1.5vw, 1.08rem);
  line-height: 1.78;
}
.qr-primary-note {
  display: inline-flex;
  margin-top: 17px;
  padding: 7px 11px;
  border: 1px solid #d6f8ff;
  border-radius: 999px;
  color: #07549b;
  background: #f4feff;
  font-size: .77rem;
  font-weight: 800;
}
.qr-primary-code {
  display: grid;
  gap: 9px;
  justify-items: center;
  width: 100%;
  padding: 12px;
  border: 1px solid #d4f6ff;
  border-radius: 17px;
  color: #07549b;
  background: #fff;
  box-shadow: 0 12px 28px rgba(4, 91, 172, .16);
  font-size: .73rem;
  font-weight: 800;
}
.qr-primary-code:hover { transform: translateY(-1px); filter: brightness(.995); }
.qr-primary-code:focus-visible, .entry-button:focus-visible, .official-link:focus-visible {
  outline: 3px solid #083f86;
  outline-offset: 3px;
}
.qr-primary-image {
  display: grid;
  width: 100%;
  aspect-ratio: 1;
  place-items: center;
  padding: 7px;
  border: 1px solid #d9e9f4;
  border-radius: 11px;
  background: #fff;
}
.qr-primary-image img { display: block; width: 100%; height: 100%; object-fit: contain; }
.landing-section { padding-top: 35px; }
.section-title { margin-bottom: 14px; }
.section-title small { color: #087cf0; }
.section-title h2 { color: #102142; }
.section-title p { color: #526b87; }
.platform-card {
  padding: 16px;
  border: 1px solid #c9e8fb;
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 10px 25px rgba(21, 112, 187, .08);
}
.entry-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.entry-button {
  display: inline-flex;
  min-height: 49px;
  justify-content: center;
  gap: 8px;
  align-items: center;
  padding: 0 12px;
  border: 1px solid #a9dcf9;
  border-radius: 11px;
  color: #07549b;
  background: #f1fbff;
  font-size: .83rem;
  font-weight: 800;
}
.entry-button:first-child { border-color: #087cf0; color: #fff; background: #087cf0; }
.entry-button:hover { transform: translateY(-1px); filter: brightness(.99); }
.official-link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 10px;
  width: 100%;
  margin-top: 12px;
  padding: 11px 12px;
  border: 1px solid #d3ecfa;
  border-radius: 11px;
  color: #07549b;
  text-align: left;
  background: #f8fdff;
}
.official-link small { grid-column: 1 / -1; color: #4e718e; font-size: .67rem; }
.official-link b { overflow: hidden; color: #0d538f; font-size: .78rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.official-link svg { align-self: center; color: #087cf0; }
.platform-tip { margin: 12px 2px 0; color: #526b87; font-size: .78rem; line-height: 1.65; }
.wechat-card, .contact-card, .activity-card { box-shadow: 0 10px 25px rgba(21, 112, 187, .08); }
.wechat-card, .contact-card { border-color: #cfe7f7; }
.site-footer { margin-top: 39px; border-top-color: #cfe8f8; color: #526b87; background: #f7fcff; }

@media (max-width: 760px) {
  .site-header { padding: 14px 0; }
  .site-page .site-wrap { width: min(100% - 28px, 1160px); }
  .qr-primary {
    grid-template-columns: 1fr;
    gap: 22px;
    margin-top: 15px;
    padding: 25px 20px 21px;
    border-radius: 19px;
    text-align: center;
  }
  .qr-primary-copy > small { margin-bottom: 8px; }
  .qr-primary h1 { font-size: clamp(1.82rem, 9vw, 2.45rem); }
  .qr-primary p { margin-right: auto; margin-left: auto; font-size: .91rem; line-height: 1.7; }
  .qr-primary-note { margin-top: 14px; }
  .qr-primary-code { width: min(224px, 100%); justify-self: center; padding: 10px; }
  .landing-section { padding-top: 31px; }
  .entry-actions { grid-template-columns: 1fr; }
  .platform-card { padding: 13px; border-radius: 14px; }
  .contacts-grid, .wechat-grid, .activities-grid { grid-template-columns: 1fr; }
}