:root {
  color-scheme: light;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  color: #101116;
  background: #eef0f3;
}
* { box-sizing: border-box; }
body { margin: 0; background: #eef0f3; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
.loading, .empty { padding: 56px 20px; text-align: center; color: #737782; }
.topbar { height: 52px; display: flex; align-items: center; justify-content: center; position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.97); border-bottom: 1px solid #eceef1; font-size: 16px; font-weight: 600; }
.topbar .back { position: absolute; left: 16px; border: 0; background: transparent; font-size: 27px; line-height: 1; }
.certificate-page { width: min(100%, 430px); min-height: 100vh; margin: auto; background: #fff; box-shadow: 0 0 30px rgba(0,0,0,.08); }
.hero { padding: 22px 18px 26px; color: #fff; background: radial-gradient(circle at 50% 28%, rgba(17,229,221,.28), transparent 31%), linear-gradient(155deg,#080a0e 0%,#121821 45%,#080a0d 100%); overflow: hidden; }
.truth { font-size: 51px; font-weight: 1000; font-style: italic; letter-spacing: -4px; text-shadow: 0 3px 18px rgba(255,255,255,.23); }
.mask-row { display: flex; justify-content: space-between; margin: 8px 4px 15px; color: #d9dde2; font-size: 10px; }
.display-stage { position: relative; min-height: 350px; border: 1px solid #283440; padding: 24px 19px 18px; background: linear-gradient(90deg, rgba(0,255,240,.07), transparent 18% 82%, rgba(0,255,240,.07)), #0e141b; box-shadow: inset 0 0 30px rgba(56,234,226,.09); }
.display-stage::before, .display-stage::after { content:""; position:absolute; top:10px; bottom:10px; width:3px; background:#25e5df; box-shadow:0 0 11px #25e5df; }
.display-stage::before { left:5px; }.display-stage::after { right:5px; }
.product-frame { margin: 0 auto; width: 82%; padding: 14px; background: #e9edf0; border: 10px solid #202b36; box-shadow: 0 13px 25px rgba(0,0,0,.45); }
.product-frame img { width: 100%; aspect-ratio: 1/1; display:block; object-fit:contain; background:white; }
.platform { width: 88%; height: 28px; margin: -2px auto 11px; border-radius: 50%; background: radial-gradient(ellipse, #fff 0 8%, #aeb6bd 25%, #303942 49%, #d5dce0 55%, #182029 70%); }
.stamp { width: fit-content; margin: 0 auto 15px; padding: 4px 8px; border: 1px solid #dbe0e2; font-size: 9px; }
.product-copy { padding: 13px 11px; border: 1px solid #273542; background: rgba(22,28,37,.94); color: #e3e6e8; }
.product-title { min-height: 36px; font-size: 13px; line-height: 1.45; }
.order-meta { display:grid; grid-template-columns: 54px 1fr; gap:5px; margin-top:15px; font-size:10px; color:#c7ccd0; }
.query-card { margin: 18px; padding: 11px; border: 1px solid #d7d9dd; border-radius: 9px; text-align:center; font-size:12px; color:#5c6067; }
.query-card strong { color:#131419; font-size:14px; }.query-times { margin-top:4px; font-size:10px; line-height:1.5; }
.paper { padding: 2px 22px 46px; text-align:center; }
.cert-title { margin: 13px 0 3px; font-size:42px; font-weight:1000; letter-spacing:-3px; }
.cert-sub { font-size:10px; letter-spacing:5px; font-weight:700; }
.seal { position:relative; width:170px; height:103px; margin:27px auto 30px; display:grid; place-items:center; border:5px double #111; border-radius:50%; transform:rotate(-2deg); font-size:23px; font-weight:900; }
.seal::before { content:"AUTHENTIC"; position:absolute; inset:8px 27px; display:grid; place-items:start center; padding-top:8px; border:2px solid; border-radius:50%; font-size:7px; letter-spacing:2px; }
.number-block { margin: 23px 0; }.number-label { color:#7b7f86; font-size:14px; }.number { margin-top:4px; font-size:27px; font-weight:900; letter-spacing:2px; word-break:break-all; }
.founder-mark { width:38px; margin:38px auto 6px; padding:5px 3px; border-radius:5px; background:#111; color:#fff; font-size:12px; }
.founder { font-size:25px; font-weight:900; }.founder-sub { color:#777; font-size:9px; }
.section { margin-top:40px; text-align:left; }.section h3 { text-align:center; font-size:16px; }.section p { color:#555; font-size:11px; line-height:1.7; }
.feature-grid { display:grid; grid-template-columns:1fr 1fr; gap:2px; margin-top:15px; }
.feature { aspect-ratio:1.22; display:flex; align-items:flex-end; padding:7px; color:white; font-size:11px; background:linear-gradient(145deg,#1a1d22,#6c6f77); }
.form-page, .admin-page { width:min(100%,760px); min-height:100vh; margin:auto; padding:24px 18px 60px; background:#f7f8fa; }
.panel { background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:20px; box-shadow:0 8px 30px rgba(20,25,35,.05); }
.panel h1 { margin:0 0 7px; font-size:25px; }.muted { color:#7b7f88; font-size:13px; line-height:1.6; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:20px; }.field.full { grid-column:1/-1; }
.field label { display:block; margin-bottom:6px; color:#4d5159; font-size:13px; font-weight:600; }
.field input, .field textarea { width:100%; padding:11px 12px; border:1px solid #d7dae0; border-radius:8px; outline:none; background:#fff; }.field textarea { min-height:78px; resize:vertical; }.field input:focus,.field textarea:focus { border-color:#111; box-shadow:0 0 0 3px rgba(0,0,0,.06); }
.image-preview { width:180px; max-width:100%; aspect-ratio:1; object-fit:contain; background:#f3f4f6; border:1px dashed #c8cbd1; border-radius:8px; }
.extractor { padding:16px; border:1px solid #dfe3e8; border-radius:10px; background:#f8f9fb; }
.extractor .actions { margin-top:10px; }
.product-image-choices { display:grid; grid-template-columns:repeat(auto-fill,minmax(92px,1fr)); gap:10px; margin-top:14px; }
.product-image-choice { position:relative; padding:5px; border:2px solid transparent; border-radius:9px; background:#fff; }
.product-image-choice.selected { border-color:#111; box-shadow:0 0 0 2px rgba(0,0,0,.08); }
.product-image-choice img { width:100%; aspect-ratio:1; display:block; object-fit:contain; background:#f2f3f5; border-radius:5px; }
.product-image-choice span { position:absolute; right:7px; bottom:7px; width:22px; height:22px; display:grid; place-items:center; border-radius:50%; color:#fff; background:rgba(0,0,0,.72); font-size:11px; }
.primary, .secondary, .danger { border:0; border-radius:8px; padding:11px 17px; font-weight:700; }.primary { background:#111; color:#fff; }.secondary { background:#e9ebef; color:#202228; }.danger { background:#ffe5e5; color:#a40000; }
.actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
.error { margin-top:12px; color:#b00020; font-size:13px; }.success { color:#087f3e; }
.admin-head { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-bottom:18px; }.admin-head h1 { margin:0; }
.list { display:grid; gap:10px; }.list-item { display:grid; grid-template-columns:1fr auto; gap:12px; align-items:center; padding:15px; border:1px solid #e1e4e8; border-radius:10px; background:#fff; }.list-title { font-weight:700; }.list-meta { margin-top:5px; color:#7c8088; font-size:12px; }
.qr-box { margin:20px 0; padding:18px; text-align:center; background:#fff; border:1px solid #e5e7eb; border-radius:12px; }.qr-box img { width:220px; max-width:100%; }.url { margin-top:9px; font-size:12px; word-break:break-all; color:#565b64; }
@media (max-width:600px) { .form-grid { grid-template-columns:1fr; }.field.full { grid-column:auto; }.admin-head { align-items:flex-start; }.truth { font-size:46px; } }