:root, .dark { color-scheme: light; --background: #efdbbb; --foreground: #292929; --card: #fff; --border: #cfcfcf; --primary: #2886ed; --primary-foreground: #fff; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
html { margin: 0; background: var(--background); }
body { margin: 0; color: var(--foreground); font-family: 'Microsoft YaHei', 'PingFang SC', 'Heiti SC', Arial, sans-serif; }
button, input { font: inherit; }
button { cursor: pointer; border: 0; }
button:disabled { cursor: wait; opacity: .8; }
button:focus-visible, input:focus-visible { outline: 3px solid #164f91; outline-offset: 3px; }
.poster { container-type: inline-size; position: relative; width: 100%; max-width: 680px; min-height: 100svh; margin: 0 auto; overflow: hidden; background: radial-gradient(ellipse at 15% 24%, #f6e9cc99, transparent 70%), radial-gradient(ellipse at 91% 80%, #dfb58860, transparent 65%), linear-gradient(145deg, #f1dfc2, #ecd0ad); }
.poster::before { content: ''; position: absolute; inset: 0; opacity: .19; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.075' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23957c58' filter='url(%23n)' opacity='.5' d='M0 0h180v180H0z'/%3E%3C/svg%3E"); background-size: 36cqw 36cqw; mix-blend-mode: multiply; }
.brand { position: relative; display: flex; align-items: center; gap: 3.4cqw; margin: 7.6cqw 7.8cqw 0; height: 25cqw; }
.mascot { position: relative; aspect-ratio: 1; overflow: hidden; flex-shrink: 0; clip-path: polygon(40% 0%,46% 1%,56% 9%,61% 7%,68% 15%,82% 11%,88% 14%,90% 22%,86% 35%,96% 44%,100% 58%,96% 75%,88% 87%,73% 96%,52% 100%,31% 97%,15% 87%,6% 73%,3% 56%,8% 37%,0% 16%,22% 4%,31% 26%,34% 7%); }
.mascot img { position: absolute; width: 174.546%; max-width: none; height: auto; left: -39.09%; top: -23.63%; }
.brand-mascot { width: 24cqw; }
.brand-wordmark { flex: 1; min-width: 0; transform: translateY(.3cqw); text-align: center; }
.brand h1 { position: relative; margin: 0; white-space: nowrap; font-family: 'Arial Black', Impact, 'Microsoft YaHei', sans-serif; font-size: 7.15cqw; line-height: 1.12; font-weight: 1000; letter-spacing: .2em; color: #fff; transform: skew(-3deg); text-shadow: .32cqw .4cqw 0 #303030,.15cqw .22cqw 0 #303030; -webkit-text-stroke: .06cqw #fff; }
.brand-wordmark p { margin: 1.1cqw 0 0; white-space: nowrap; font-family: 'Arial Black', Impact, 'Microsoft YaHei', sans-serif; font-weight: 1000; font-size: 2.82cqw; letter-spacing: .18cqw; line-height: 1.3; color: #fff; text-shadow: .32cqw .4cqw 0 #303030,.15cqw .22cqw 0 #303030; }
.verification-panel { position: relative; isolation: isolate; width: 73.4%; height: 112cqw; margin: 11cqw auto 0; background: #fff; }
.watermark { position: absolute; z-index: -1; width: 59cqw; bottom: .6cqw; left: 50%; transform: translateX(-50%); opacity: .22; }
.intro { position: absolute; top: 3.7cqw; left: 50%; transform: translateX(-50%); text-align: center; width: 80cqw; font-size: 3.55cqw; line-height: 1.6; }
.intro p { margin: 0 0 1.2cqw; white-space: nowrap; }
.intro .intro-first { font-size: 3.22cqw; letter-spacing: -.08cqw; }
.circled { position: relative; display: inline-block; }
.circled::after { content: ''; position: absolute; inset: -.7cqw -.9cqw -.3cqw -.6cqw; border: .58cqw solid #e52207; border-radius: 50%; transform: rotate(-13deg); }
.highlight { position: absolute; left: 50%; transform: translateX(-50%); margin: 0; white-space: nowrap; font-size: 3.8cqw; line-height: 1.3; font-weight: 800; text-align: center; }
.highlight::before { content: ''; position: absolute; z-index: -1; left: -2.8cqw; right: -2.8cqw; height: 3.8cqw; top: 2cqw; border-radius: 4cqw; background: #dbe2f5; }
.instruction { top: 32.7cqw; font-size: 3.52cqw; } .instant { top: 41.4cqw; } .instant::before { left: -8cqw; right: -8cqw; }
.hearts { position: absolute; left: 50%; top: 49.5cqw; transform: translateX(-50%); width: 25cqw; display: grid; grid-template-columns: repeat(3,1fr); grid-template-rows: repeat(3,1fr); column-gap: 3.2cqw; row-gap: 3.8cqw; color: #ed003d; font-size: 4.25cqw; line-height: 1; text-align: center; }
.hearts span { display: block; }
.wechat-input { position: absolute; left: 50%; top: 78.8cqw; transform: translateX(-50%); width: 56.5cqw; height: 10.8cqw; border: .23cqw solid #ccc; border-radius: 9cqw; background: #fff; text-align: center; font-size: 4cqw; padding: 0 2cqw; color: #111; }
.wechat-input::placeholder { color: #aaa; opacity: 1; font-size: 3.9cqw; }
.query-button { position: absolute; left: 1.1cqw; right: 1.1cqw; top: 94.7cqw; height: 10.9cqw; border-radius: 8cqw; background: #2886ed; color: #fff; font-size: 4.45cqw; font-weight: 400; }
.query-button:hover, .reset-button:hover { background: #227ddb; }
.query-alert { position: absolute; z-index: 5; left: 50%; top: 41cqw; transform: translateX(-50%); width: max-content; min-width: 50.8cqw; max-width: 66cqw; height: 17.6cqw; display: flex; align-items: center; justify-content: center; padding: 2cqw; border: .23cqw solid #d1d1d1; border-radius: .25cqw; background: #fff; color: #252525; text-align: center; font-size: 3.8cqw; font-weight: 400; box-shadow: none; }
.result-content { position: absolute; inset: 0; text-align: center; }
.verdict { position: absolute; left: 0; right: 0; top: 6.8cqw; margin: 0; font-size: 23cqw; line-height: 1.1; font-weight: 900; color: #405582; outline: none; }
.unknown .verdict { color: #f33a39; top: 3.4cqw; }
.result-divider { position: absolute; top: 34.2cqw; left: 14cqw; right: 14cqw; border-top: .8cqw dashed #cdcdcd; }
.unknown .result-divider { top: 30cqw; }
.result-symbol { position: absolute; left: 50%; top: 38.8cqw; transform: translateX(-50%); width: 8.2cqw; height: 8.2cqw; color: #fff; font-family: Arial,sans-serif; }
.checkmark { border-radius: 50%; background: #00a000; font-size: 7.2cqw; line-height: 8.2cqw; font-weight: 800; }
.warning { top: 35cqw; width: 8cqw; height: 7cqw; background: #dd2508; clip-path: polygon(50% 0,100% 100%,0 100%); font-size: 4.8cqw; line-height: 8.8cqw; font-weight: 900; border-radius: .7cqw; }
.database-caption { position: absolute; top: 50.6cqw; left: -1cqw; right: -1cqw; margin: 0; font-size: 3.1cqw; color: #b7b7b7; white-space: nowrap; }
.unknown .database-caption { top: 46.4cqw; }
.result-label { position: absolute; top: 61cqw; left: 0; right: 0; margin: 0; font-size: 4.2cqw; letter-spacing: 1cqw; font-weight: 800; }
.unknown .result-label { top: 56.8cqw; }
.membership { position: absolute; top: 70.8cqw; left: 0; right: 0; margin: 0; font-size: 4cqw; font-weight: 800; }
.unknown .membership { top: 66.6cqw; }
.membership em { font-style: normal; letter-spacing: .65cqw; color: #e00000; }
.result-advice { position: absolute; top: 80.2cqw; left: 0; right: 0; margin: 0; font-size: 4cqw; font-weight: 800; letter-spacing: .8cqw; color: #e00000; }
.unknown .result-advice { top: 75.7cqw; }
.police-advice { position: absolute; top: 85cqw; left: 0; right: 0; margin: 0; white-space: nowrap; font-size: 3.7cqw; font-weight: 800; letter-spacing: .58cqw; color: #e00000; }
.reset-button { position: absolute; top: 89.7cqw; left: 50%; transform: translateX(-50%); width: 23cqw; height: 9.4cqw; background: #2886ed; color: #fff; border-radius: 6cqw; font-size: 3.2cqw; }
.unknown .reset-button { top: 94.2cqw; }
footer { position: relative; padding: 9.5cqw 0 19.2cqw; text-align: center; color: #fff; font-size: 4.4cqw; font-weight: 700; letter-spacing: 1.45cqw; text-shadow: 0 0 .35cqw #fff8; white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) { button { transition: background .15s; } }

/* Admin */
.admin-shell { min-height: 100svh; display: grid; place-items: center; padding: 48px 20px; background: #f7f8fa; color: #202124; }
.admin-loading { color: #999; font-size: 18px; }
.login-card { width: min(690px, 100%); min-height: 760px; padding: 72px 70px 64px; border: 1px solid #e8e8e8; border-radius: 40px; background: #fff; box-shadow: 0 30px 70px rgb(31 35 41 / 14%); text-align: center; }
.admin-logo { width: 138px; height: 138px; margin: 0 auto; overflow: hidden; border-radius: 50%; background: #efbd80; box-shadow: 0 18px 32px rgb(240 170 88 / 28%); }
.admin-logo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transform: none; }
.login-card h1 { margin: 42px 0 10px; font-size: clamp(31px, 4vw, 43px); font-weight: 800; letter-spacing: -.04em; }
.login-subtitle { margin: 0 0 54px; color: #aaa; font-size: 24px; }
.login-form { text-align: left; }
.login-form label, .add-id-form label { display: block; margin: 0 4px 12px; font-size: 20px; font-weight: 700; }
.login-form input, .add-id-form input { width: 100%; height: 80px; padding: 0 20px; border: 1px solid #d9d9d9; border-radius: 20px; background: #fff; color: #222; font-size: 24px; }
.login-form input:focus, .add-id-form input:focus { border-color: #f2ad59; outline: 4px solid rgb(242 173 89 / 16%); }
.login-form label:not(:first-child) { margin-top: 28px; }
.login-form > button { width: 100%; height: 82px; margin-top: 38px; border-radius: 20px; background: #f2ad59; color: #fff; font-size: 25px; font-weight: 800; box-shadow: 0 18px 34px rgb(242 173 89 / 28%); }
.login-form > button:hover, .add-id-form button:hover { background: #e99b3d; }
.admin-message { margin: 18px 0 0; text-align: center; font-size: 16px; }
.admin-message.error { color: #d9363e; } .admin-message.success { color: #168b54; }
.dashboard-shell { align-items: start; }
.dashboard-card { width: min(980px, 100%); padding: 38px; border-radius: 30px; background: #fff; box-shadow: 0 22px 60px rgb(31 35 41 / 12%); }
.dashboard-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-bottom: 30px; border-bottom: 1px solid #eee; }
.dashboard-brand { display: flex; align-items: center; gap: 20px; }
.dashboard-brand .admin-logo { width: 76px; height: 76px; margin: 0; border-radius: 50%; }
.dashboard-brand h1 { margin: 0; font-size: 28px; } .dashboard-brand p { margin: 6px 0 0; color: #999; }
.logout-button { padding: 11px 18px; border-radius: 12px; background: #f2f3f5; color: #555; }
.add-id-form { margin: 32px 0; padding: 26px; border-radius: 20px; background: #fff8ef; }
.add-id-form > div { display: flex; gap: 12px; }
.add-id-form input { height: 58px; border-radius: 14px; font-size: 18px; }
.add-id-form button { width: 120px; border-radius: 14px; background: #f2ad59; color: #fff; font-size: 18px; font-weight: 800; }
.add-id-form > p { margin: 10px 3px 0; color: #999; font-size: 14px; }
.id-list-heading { display: flex; align-items: center; justify-content: space-between; margin: 30px 4px 16px; }
.id-list-heading h2 { margin: 0; font-size: 23px; } .id-list-heading span { color: #999; }
.id-list { overflow: hidden; border: 1px solid #eee; border-radius: 18px; }
.id-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 22px; border-bottom: 1px solid #eee; }
.id-row:last-child { border-bottom: 0; }.id-row strong { display: block; font-size: 18px; }.id-row small { display: block; margin-top: 5px; color: #aaa; }
.id-row button { padding: 9px 18px; border-radius: 10px; background: #fff0f0; color: #db3942; }
.empty-ids { margin: 0; padding: 60px 20px; color: #aaa; text-align: center; }
.account-panel { margin-top: 34px; padding-top: 28px; border-top: 1px solid #eee; }
.account-panel h2 { margin: 0 0 16px; font-size: 23px; }
.compact-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; margin-bottom: 18px; }
.compact-form input { min-width: 0; height: 50px; padding: 0 14px; border: 1px solid #ddd; border-radius: 12px; }
.compact-form button { padding: 0 20px; border-radius: 12px; background: #f2ad59; color: #fff; font-weight: 700; }
.row-actions { display: flex; gap: 8px; }
.row-actions button:first-child { background: #eef6ff; color: #2878c8; }
.orders-module { margin-top: 30px; }
.module-title h2 { margin: 0; font-size: 25px; }.module-title p { margin: 6px 0 20px; color: #999; }
.order-entry { display: grid; grid-template-columns: repeat(4,1fr); gap: 15px; padding: 24px; border-radius: 20px; background: #fff8ef; }
.order-entry label { display: block; margin: 0 2px 7px; color: #555; font-size: 14px; font-weight: 700; }
.order-entry input,.order-entry select { width: 100%; height: 48px; padding: 0 12px; border: 1px solid #ddd; border-radius: 11px; background: #fff; }
.order-entry button { align-self: end; height: 48px; padding: 0 16px; border-radius: 11px; background: #f2ad59; color: #fff; font-weight: 800; }
#order-cancel { background: #eee; color: #666; }
.order-summary { display: grid; grid-template-columns: repeat(4,1fr); gap: 13px; margin: 22px 0; }
.order-summary > div { padding: 18px; border: 1px solid #eee; border-radius: 15px; background: #fafafa; }.order-summary span { display:block; margin-bottom: 7px; color:#888; font-size:13px; }.order-summary strong { font-size:20px; }.order-summary .profit-card strong,.profit { color:#168b54; font-weight:800; }
.order-table { overflow:auto; border:1px solid #eee; border-radius:16px; }.order-table table { width:100%; min-width:960px; border-collapse:collapse; }.order-table th { padding:13px 15px; background:#fafafa; color:#888; text-align:left; font-size:13px; white-space:nowrap; }.order-table td { padding:15px; border-top:1px solid #eee; white-space:nowrap; }.action { padding:8px 12px; border-radius:9px; background:#eef6ff; color:#2878c8; }.action.delete { background:#fff0f0; color:#db3942; }.order-empty { padding:45px!important; color:#aaa; text-align:center; }
@media (max-width: 640px) {
  .admin-shell { padding: 24px 14px; }
  .login-card { min-height: 0; padding: 48px 24px; border-radius: 28px; }
  .admin-logo { width: 108px; height: 108px; border-radius: 50%; }
  .login-card h1 { margin-top: 30px; font-size: 28px; }
  .login-subtitle { margin-bottom: 38px; font-size: 19px; }
  .login-form input { height: 64px; font-size: 19px; }.login-form > button { height: 66px; }
  .dashboard-card { padding: 22px 16px; border-radius: 22px; }
  .dashboard-header { align-items: flex-start; }.dashboard-brand .admin-logo { width: 58px; height: 58px; }.dashboard-brand h1 { font-size: 20px; }
  .add-id-form { padding: 18px; }.add-id-form > div { flex-direction: column; }.add-id-form button { width: 100%; height: 52px; }
  .compact-form { grid-template-columns: 1fr; }.compact-form button { height: 48px; }
  .order-entry { grid-template-columns: 1fr; }.order-summary { grid-template-columns: repeat(2,1fr); }
}
.dashboard-card{width:min(1320px,100%)}.header-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}.header-actions span{color:#888;font-size:13px}.header-actions button{padding:9px 13px;border-radius:9px;background:#f2f3f5;color:#555}.header-actions .admin-only{background:#fff3e5;color:#d97c14;font-weight:700}
.order-entry{grid-template-columns:1.05fr 1.2fr 1.05fr repeat(4,.9fr) auto;gap:10px;align-items:end;padding:20px}.order-entry input,.order-entry select,.order-entry button{height:44px}.order-entry button{padding:0 18px;white-space:nowrap}.order-entry .money{position:relative}.order-entry .money:before{content:'¥';position:absolute;left:11px;bottom:12px;color:#999}.order-entry .money input{padding-left:27px}.order-entry .money input[readonly]{background:#f5f5f6;color:#168b54;font-weight:800}
.mode-select.mode-daipai,.mode-tag.mode-daipai{color:#4564df;border-color:#aebcff;background:#edf1ff}.mode-select.mode-luru,.mode-tag.mode-luru{color:#d9183b;border-color:#ffb2bf;background:#fff0f3}.mode-tag{display:inline-flex;padding:5px 11px;border-radius:999px;font-size:13px;font-weight:700}.mode-tag.mode-empty{color:#888;background:#f3f3f3}
.orders-panel,.chart-panel{margin-top:18px;border:1px solid #eee;border-radius:18px;overflow:hidden}.order-toolbar{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:16px 18px;border-bottom:1px solid #eee}.period-tabs{display:flex;gap:3px;padding:4px;border-radius:12px;background:#f2f2f5}.period-tabs button{padding:8px 18px;border-radius:9px;background:transparent;color:#666}.period-tabs button.active{background:#fff;color:#e99b3d;font-weight:800;box-shadow:0 2px 8px #0001}.order-toolbar>div:last-child{display:flex;gap:8px}.order-toolbar input,.order-toolbar>div:last-child button{height:38px;padding:0 12px;border:1px solid #ddd;border-radius:9px;background:#fff}
.order-summary{grid-template-columns:repeat(5,1fr)}.chart-panel{padding:22px 24px 30px;overflow:visible}.chart-head{display:flex;justify-content:space-between;align-items:center}.chart-head h2{margin:0;font-size:20px}.chart-head span{color:#999;font-size:13px}.order-chart{height:250px;display:grid;grid-template-columns:repeat(4,1fr);gap:34px;align-items:end;margin-top:16px;padding:10px 40px 0;border-bottom:1px solid #ddd;background:repeating-linear-gradient(to top,transparent 0,transparent 59px,#f1f1f1 60px)}.order-chart>div{height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:8px}.order-chart b{font-size:13px}.order-chart i{display:block;width:min(72px,65%);min-height:4px;border-radius:10px 10px 3px 3px;background:#f2ad59;transition:height .3s}.order-chart #bar-cost{background:#5d7cff}.order-chart #bar-profit{background:#12a66a}.order-chart #bar-ticket{background:#9b68e8}.order-chart span{color:#666;font-size:13px;margin-bottom:-27px;transform:translateY(27px)}
.admin-modal{position:fixed;z-index:30;inset:0;display:grid;place-items:center;padding:20px;background:#20202566}.admin-modal>div{width:min(700px,100%);max-height:85vh;overflow:auto;padding:26px;border-radius:20px;background:#fff;box-shadow:0 25px 70px #0003}.admin-modal h2{margin:0 0 16px}.admin-modal>div>p{color:#999}.modal-close{display:block;margin:20px 0 0 auto;padding:10px 20px;border-radius:10px;background:#eee;color:#555}.floating-status{position:fixed;z-index:50;left:50%;bottom:28px;transform:translateX(-50%);padding:11px 18px;border-radius:12px;background:#222;color:#fff}.floating-status.error{background:#d9363e}.floating-status.success{background:#168b54}
@media(max-width:1050px){.order-entry{grid-template-columns:repeat(2,1fr)}.order-entry>button{grid-column:1/-1}.dashboard-header{align-items:flex-start}.header-actions{max-width:48%}.order-summary{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.order-entry{grid-template-columns:1fr}.header-actions{max-width:none}.order-toolbar{align-items:flex-start;flex-direction:column}.period-tabs{width:100%}.period-tabs button{flex:1}.order-chart{gap:12px;padding-inline:12px}}
.admin-shell,.admin-modal{font-family:'Microsoft YaHei','SimHei','PingFang SC',sans-serif;font-weight:600}.admin-shell input,.admin-shell select,.admin-shell button,.admin-modal input,.admin-modal button{font-weight:600}.dashboard-brand h1,.chart-head h2,.admin-modal h2,.order-summary strong{font-weight:900}.records-dialog{width:min(1100px,100%)!important}.records-summary{grid-template-columns:repeat(4,1fr)}

/* Ticket verification visual polish */
.poster{background:radial-gradient(circle at 16% 13%,rgb(255 246 222 / 78%),transparent 32%),radial-gradient(circle at 88% 76%,rgb(185 119 62 / 25%),transparent 38%),linear-gradient(155deg,#f0dfc2 0%,#e7c79f 52%,#dcae7e 100%)}
.poster::before{opacity:.12;mix-blend-mode:multiply}
.brand{padding:1.2cqw 1.8cqw;border-radius:3cqw}
.brand-mascot{filter:drop-shadow(0 1.2cqw 1.5cqw rgb(91 55 26 / 16%))}
.brand h1{-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision;text-shadow:.28cqw .34cqw 0 rgb(43 40 37 / 82%),0 .85cqw 1.3cqw rgb(84 56 30 / 20%)}
.brand-wordmark p{opacity:.98;text-shadow:.26cqw .32cqw 0 rgb(43 40 37 / 82%),0 .65cqw 1cqw rgb(84 56 30 / 18%)}
.verification-panel{border:1px solid rgb(255 255 255 / 72%);border-radius:2.6cqw;box-shadow:0 2.4cqw 6.5cqw rgb(104 67 31 / 15%),inset 0 0 0 .14cqw rgb(80 56 34 / 4%)}
.verification-panel::after{content:'';position:absolute;z-index:-2;inset:0;border-radius:inherit;background:linear-gradient(180deg,#fff 0%,#fffdfa 100%);pointer-events:none}
.intro{color:#252525;letter-spacing:.015em;font-family:'Microsoft YaHei','SimHei','PingFang SC',sans-serif;font-weight:700}.circled::after{border-color:#e94b31;filter:drop-shadow(0 .2cqw .2cqw rgb(233 75 49 / 15%))}
.highlight{color:#262626}.highlight::before{background:linear-gradient(90deg,rgb(221 229 247 / 35%),#dbe4f8 16%,#dbe4f8 84%,rgb(221 229 247 / 35%));box-shadow:inset 0 .12cqw .2cqw rgb(255 255 255 / 60%)}
.hearts{color:#f10646;text-shadow:0 .3cqw .55cqw rgb(241 6 70 / 18%)}
.wechat-input{border-color:#d9d4cd;background:rgb(255 255 255 / 94%);box-shadow:0 1.1cqw 2.8cqw rgb(62 45 29 / 9%),inset 0 .15cqw .25cqw rgb(255 255 255 / 80%);transition:border-color .2s,box-shadow .2s}
.wechat-input:focus{border-color:#5595e8;outline:0;box-shadow:0 0 0 .55cqw rgb(40 134 237 / 12%),0 1.2cqw 3cqw rgb(62 45 29 / 10%)}
.query-button,.reset-button{background:linear-gradient(135deg,#3394f3,#247dde);box-shadow:0 1.3cqw 2.8cqw rgb(38 119 211 / 25%),inset 0 .16cqw 0 rgb(255 255 255 / 22%);transition:transform .16s,box-shadow .16s,background .16s}
.query-button:hover,.reset-button:hover{background:linear-gradient(135deg,#2587e8,#176fd0);box-shadow:0 1.5cqw 3.2cqw rgb(38 119 211 / 31%)}
.query-button:active,.reset-button:active{transform:translateY(.18cqw)}
.query-alert{border-color:#e5dfd8;border-radius:1.6cqw;box-shadow:0 1.6cqw 4cqw rgb(67 49 31 / 13%)}
.result-divider{border-color:#d9d6d1}.checkmark{box-shadow:0 .7cqw 1.5cqw rgb(0 160 0 / 20%)}.warning{filter:drop-shadow(0 .6cqw 1cqw rgb(221 37 8 / 18%))}
footer{font-family:'Hannotate SC','FZKaTong-M19S','YouYuan','STKaiti','KaiTi',cursive;font-weight:900;font-style:normal;text-shadow:0 .18cqw .2cqw rgb(255 255 255 / 60%),0 .32cqw .65cqw rgb(108 73 39 / 20%)}
footer span,footer i{display:inline-block;font-style:normal;letter-spacing:0}
footer span:nth-of-type(2n){transform:translateY(.2cqw) rotate(1deg)}
footer span:nth-of-type(3n){transform:translateY(-.16cqw) rotate(-1.2deg)}
footer i{margin:0 .65cqw;font-size:.72em;transform:translateY(-.18cqw)}
.page-pet{position:fixed;z-index:20;right:max(10px,calc((100vw - 680px)/2 + 8px));bottom:max(12px,env(safe-area-inset-bottom));width:clamp(138px,30cqw,204px);aspect-ratio:1;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;filter:drop-shadow(0 10px 13px rgb(54 37 24 / 24%));will-change:left,top}
.page-pet::after{content:'';position:absolute;z-index:-1;left:24%;right:24%;bottom:5%;height:8%;border-radius:50%;background:rgb(73 48 29 / 17%);filter:blur(7px);animation:pet-shadow 4.8s ease-in-out infinite}
.page-pet img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;-webkit-user-drag:none;transform-origin:50% 88%;will-change:transform;animation:pet-breathe 2s ease-in-out infinite}
.page-pet.dragging{cursor:grabbing;filter:drop-shadow(0 18px 20px rgb(54 37 24 / 30%))}
.page-pet.dragging img{animation:none;transform:scale(1.08) rotate(-4deg)}
.page-pet.dragging::after{animation:none;transform:scale(.82);opacity:.7}
.pet-speech{position:absolute;z-index:2;right:70%;bottom:78%;width:min(190px,50vw);padding:9px 11px;border:1px solid rgb(224 174 111 / 55%);border-radius:15px 15px 4px 15px;background:linear-gradient(145deg,rgb(255 255 255 / 98%),rgb(255 248 237 / 96%));color:#33271f;font-family:'Microsoft YaHei','PingFang SC',sans-serif;font-size:12px;font-weight:800;line-height:1.45;letter-spacing:.01em;box-shadow:0 8px 22px rgb(77 49 25 / 16%);opacity:0;transform:translateY(9px) scale(.82) rotate(2deg);transform-origin:100% 100%;transition:opacity .22s,transform .38s cubic-bezier(.2,1.45,.4,1);pointer-events:none}
.pet-speech::after{content:'';position:absolute;right:-8px;bottom:1px;width:17px;height:17px;border-right:1px solid rgb(224 174 111 / 55%);border-bottom:1px solid rgb(224 174 111 / 55%);background:#fff;transform:skew(28deg) rotate(-8deg)}
.pet-speech.show{opacity:1;transform:translateY(0) scale(1) rotate(0);animation:speech-alive 2.7s ease-in-out infinite}
.page-pet.speech-right .pet-speech{right:auto;left:66%;border-radius:18px 18px 18px 4px;transform-origin:0 100%}
.page-pet.speech-right .pet-speech::after{right:auto;left:-8px;border-right:0;border-left:1px solid rgb(224 174 111 / 55%);transform:skew(-28deg) rotate(8deg)}
@keyframes pet-adventure{0%,100%{transform:translateY(0) rotate(-2deg) scale(1)}8%{transform:translateY(-8px) rotate(3deg) scale(1.02,.98)}17%{transform:translateY(0) rotate(-1deg) scale(.98,1.03)}31%{transform:translateY(-3px) rotate(2deg)}43%{transform:translateY(-24px) rotate(-5deg) scale(.96,1.06)}51%{transform:translateY(0) rotate(4deg) scale(1.07,.92)}58%{transform:translateY(-7px) rotate(-2deg) scale(.98,1.02)}72%{transform:translateY(0) rotate(0) scale(1)}78%{transform:translateY(0) rotate(-5deg) scaleX(.96)}84%{transform:translateY(-5px) rotate(5deg) scaleX(1.02)}91%{transform:translateY(0) rotate(-2deg)}}
@keyframes pet-shadow{0%,31%,58%,100%{transform:scale(1);opacity:1}43%{transform:scale(.68);opacity:.5}51%{transform:scale(1.12);opacity:.85}}
@keyframes pet-breathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-5px) scale(1.015)}}
@keyframes pet-jump{0%,100%{transform:translateY(0) rotate(0) scale(1)}28%{transform:translateY(-34px) rotate(-7deg) scale(.94,1.08)}55%{transform:translateY(0) rotate(4deg) scale(1.1,.9)}72%{transform:translateY(-10px) rotate(-2deg) scale(.98,1.03)}}
@keyframes pet-wave{0%,100%{transform:rotate(0)}20%{transform:rotate(-9deg) translateX(-5px)}45%{transform:rotate(8deg) translateX(5px)}70%{transform:rotate(-6deg) translateX(-3px)}}
@keyframes pet-peek{0%,100%{transform:translateX(0) rotate(0)}30%{transform:translateX(-16px) rotate(-8deg)}58%{transform:translateX(14px) rotate(7deg)}78%{transform:translateX(-5px) rotate(-2deg)}}
@keyframes pet-squish{0%,100%{transform:scale(1)}25%{transform:translateY(12px) scale(1.12,.82)}48%{transform:translateY(-17px) scale(.92,1.1)}70%{transform:translateY(2px) scale(1.04,.96)}}
@keyframes pet-shake{0%,100%{transform:translateX(0) rotate(0)}15%{transform:translateX(-7px) rotate(-4deg)}30%{transform:translateX(7px) rotate(4deg)}45%{transform:translateX(-6px) rotate(-3deg)}60%{transform:translateX(6px) rotate(3deg)}75%{transform:translateX(-3px) rotate(-2deg)}}
@keyframes pet-hello{0%,100%{transform:rotate(0) translateY(0)}18%{transform:rotate(-12deg) translate(-5px,-7px)}36%{transform:rotate(10deg) translate(5px,-3px)}54%{transform:rotate(-10deg) translate(-4px,-7px)}72%{transform:rotate(8deg) translate(4px,-2px)}86%{transform:rotate(-3deg)}}
@keyframes pet-nod{0%,100%{transform:rotate(0)}24%{transform:rotate(2.2deg)}43%{transform:rotate(-1deg)}61%{transform:rotate(1.7deg)}78%{transform:rotate(-.6deg)}}
@keyframes speech-alive{0%,100%{margin-bottom:0}50%{margin-bottom:4px}}
.page-pet.action-jump img{animation:pet-jump 1.65s ease-in-out}.page-pet.action-wave img{animation:pet-wave 1.65s ease-in-out}.page-pet.action-peek img{animation:pet-peek 1.65s ease-in-out}.page-pet.action-squish img{animation:pet-squish 1.65s ease-in-out}.page-pet.action-shake img{animation:pet-shake 1.45s ease-in-out}.page-pet.action-hello img{animation:pet-hello 1.65s ease-in-out}.page-pet.action-nod img{transform-origin:50% 62%;animation:pet-nod 1.55s ease-in-out}
@media(max-width:520px){.page-pet{right:4px;bottom:max(6px,env(safe-area-inset-bottom));width:130px}.pet-speech{width:min(172px,47vw);padding:8px 10px;font-size:11px}}
@media(prefers-reduced-motion:reduce){.page-pet img,.page-pet::after{animation:none}}
