:root { color-scheme: light; font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif; color: #070707; background: #f7f5ef; }
* { box-sizing: border-box; } body { margin: 0; min-height: 100vh; background: #f7f5ef; display: grid; place-items: center; }
.stage { container-type: inline-size; position: relative; overflow: hidden; width: min(100vw, calc(100vh * .5625)); min-height: min(100vh, calc(100vw / .5625)); aspect-ratio: 9 / 16; padding: 6% 3.8% 5%; display: flex; flex-direction: column; gap: 1.9%; background: radial-gradient(circle at 88% 7%, #fff2a9 0 10%, transparent 26%), linear-gradient(125deg, #fdfcf9 15%, #f7f5ef 57%, #fffdf8); box-shadow: 0 12px 48px #1d1d1d22; }
.stage::before { content: ""; position: absolute; width: 55%; aspect-ratio: 1; border: 1px solid #f5db6a; border-radius: 50%; right: -25%; top: -10%; box-shadow: -13vw 24vw 0 -1px #fff0a655; } .stage::after { content: "· · ·\A · · ·\A · · ·"; white-space: pre; position: absolute; right: 5%; top: 19%; color: #f2d65299; font-size: clamp(20px, 2vw, 38px); line-height: .73; letter-spacing: .2em; }
.hero { position: relative; z-index: 1; text-align: center; min-height: 23%; display: grid; place-content: center; } h1 { margin: 0; font-size: clamp(44px, 10cqw, 104px); line-height: 1.1; letter-spacing: .02em; font-weight: 900; } .hero i { display: block; width: 12%; height: clamp(5px, 1.1cqw, 10px); margin: 4% auto 0; border-radius: 9px; background: #ffd600; }.live-prompts { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: center; }.live-prompt { display: inline-flex; align-items: center; gap: clamp(4px, .8cqw, 8px); color: #4d4236; font-size: clamp(12px, 1.8cqw, 20px); font-weight: 800; white-space: nowrap; }.prompt-icon { display: inline-grid; place-items: center; width: clamp(36px, 6.4cqw, 64px); height: clamp(36px, 6.4cqw, 64px); animation: prompt-float 1.8s ease-in-out infinite; }.live-prompt:last-child .prompt-icon { animation-delay: .45s; }.prompt-icon img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 3px 3px #6240002a); } @keyframes prompt-float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-5px) rotate(2deg); } } @media (prefers-reduced-motion: reduce) { .prompt-icon { animation: none; } }
.settings-trigger { position: absolute; z-index: 3; right: 4%; top: 2.5%; border: 0; background: #ffffffaa; border-radius: 50%; width: 38px; height: 38px; cursor: pointer; font-size: 18px; }
.query-card, .records-card { position: relative; z-index: 1; border-radius: 20px; background: #fffffff0; box-shadow: 0 14px 28px #0000000d; padding: 5% 4%; } .query-card { min-height: 0; margin-top: -3%; padding: 2% 2.7%; } .query-card label { display: block; margin-bottom: 3%; font-weight: 800; font-size: clamp(20px, 3.2cqw, 34px); }
.query-card form { display: flex; gap: 2%; } input { min-width: 0; flex: 1; height: clamp(58px, 12cqw, 120px); padding: 0 6%; border: 2px solid #e8d4b7; border-radius: 20px; background: #fffefa; color: #090909; font-weight: 700; font-size: clamp(20px, 3.1cqw, 34px); letter-spacing: 0; outline-color: #ffd600; } button { font: inherit; font-weight: 800; } #submitButton { width: 34%; border: 0; border-radius: 20px; background: #ffd800; cursor: pointer; color: #080808; font-size: clamp(21px, 4cqw, 42px); box-shadow: inset 0 -2px #e2b900; white-space: nowrap; } #submitButton:disabled { opacity: .58; cursor: wait; }.form-message { min-height: 1.2em; margin: 2% 0 0; color: #a63d2c; font-size: clamp(13px, 2.2cqw, 22px); }
.records-card { flex: 1; min-height: 0; padding: 2.7%; display: flex; flex-direction: column; } table { border-collapse: separate; border-spacing: 0; table-layout: fixed; width: 100%; overflow: hidden; border: 1px solid #f0e2c8; border-radius: 20px; font-size: clamp(16px, 3.8cqw, 40px); } th, td { height: clamp(42px, 8.5cqw, 88px); text-align: center; border-right: 1px solid #f0e7d9; border-bottom: 1px solid #f0e7d9; font-weight: 700; } th:last-child, td:last-child { border-right: none; } tbody tr:last-child td { border-bottom: none; } th { height: clamp(40px, 7.4cqw, 78px); background: #fffbed; color: #816b4f; font-size: calc(.78em + 3px); font-weight: 700; } td { background: #fffefcbb; } td:first-child { letter-spacing: .06em; } .badge { display: inline-grid; place-items: center; min-width: 70%; min-height: 59%; padding: .1em .45em; border-radius: 100px; font-size: .77em; } .很低 { background: #ffd9d9; color: #7c1515; } .低, .偏低 { background: #ffe4cd; color: #7c3315; } .中等 { background: #ffecac; color: #5c3a00; } .良好, .优秀 { background: #d8f6d7; color: #125c2f; } .pending { background: #ece9e2; color: #70695f; font-size: .65em; } .empty-note { margin: auto 0 1.5%; min-height: 1.2em; padding-top: 2%; text-align: center; color: #b3aca2; font-size: clamp(13px, 2.2cqw, 22px); }
.new-row td { animation: appear .45s ease-out; } @keyframes appear { from { background: #fff0a2; transform: translateY(-4px); } to { background: #fffefcbb; transform: translateY(0); } }
dialog { border: 0; border-radius: 20px; box-shadow: 0 20px 60px #0004; max-width: min(90vw, 420px); padding: 0; } dialog::backdrop { background: #0006; } dialog form { position: relative; padding: 30px; display: grid; gap: 12px; } dialog h2 { margin: 0; } dialog textarea { resize: none; font: inherit; padding: 10px; } dialog .close { position: absolute; right: 10px; top: 8px; border: 0; background: transparent; font-size: 25px; cursor: pointer; } .save-button { min-height: 44px; border: 0; border-radius: 20px; background: #ffd800; cursor: pointer; } #settingsMessage { min-height: 1.2em; margin: 0; color: #a63d2c; }
@media (max-width: 520px) { body { display: block; }.stage { width: 100vw; min-height: 177.777vw; box-shadow: none; }.settings-trigger { transform: scale(.8); } }

/* 查询卡片无提示时不预留错误信息高度。 */
.form-message:empty { display: none; }