:root { color-scheme: light; font-family: "PingFang SC", "Microsoft YaHei", sans-serif; color: #172033; background: #f3f6fb; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
button, input { font: inherit; }
.public-page { min-height: 100vh; padding: 7vh 24px; background: radial-gradient(circle at 20% 0%, #dbeafe, transparent 34%), #f3f6fb; }
.public-shell { width: min(1180px, 100%); margin: auto; }
.public-header { display: flex; align-items: end; gap: 24px; margin-bottom: 26px; }
.public-header h1 { margin: 0; font-size: clamp(28px, 4vw, 42px); letter-spacing: .04em; }
.eyebrow { margin: 0 0 5px; color: #55708f; font: 600 12px/1.2 ui-monospace, monospace; letter-spacing: .14em; }
.public-status { margin: 0 0 5px auto; color: #58677c; font-size: 14px; }
.public-status span { display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: #31a36b; box-shadow: 0 0 0 4px #dff5e8; }
.display-card { position: relative; overflow: hidden; border: 1px solid #dce5f0; border-radius: 18px; background: rgba(255,255,255,.8); box-shadow: 0 24px 70px rgba(31, 54, 83, .12); }
.mask-notice { position: absolute; z-index: 2; top: 20px; right: 22px; padding: 7px 11px; border: 1px solid rgba(255,255,255,.5); border-radius: 999px; color: #fff; background: rgba(23,32,51,.55); font-size: 12px; backdrop-filter: blur(7px); }
.scroll-viewport { height: min(66vh, 650px); overflow: hidden; filter: blur(2px); }
.public-rows-viewport { height: calc(100% - 49px); overflow: hidden; }
.scroll-track { animation: public-scroll 90s linear infinite; }
table { width: 100%; border-collapse: collapse; color: #304057; font-size: 14px; table-layout: fixed; }
th { position: sticky; top: 0; z-index: 1; color: #5f6d80; background: #eef3f9; font-weight: 600; }
th, td { padding: 16px 18px; border-bottom: 1px solid #e7edf4; text-align: left; white-space: nowrap; }
@keyframes public-scroll { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@media (prefers-reduced-motion: reduce) { .scroll-track { animation-play-state: paused; } }
@media (max-width: 700px) { .public-page { padding: 28px 14px; } .public-header { display: block; } .public-status { margin-top: 14px; } .scroll-viewport { height: 70vh; } th, td { padding: 14px 16px; } }
.admin-page { min-height: 100vh; padding: 48px 24px; background: #f3f6fb; }
.login-card, .admin-shell { width: min(1160px, 100%); margin: auto; }
.login-card { width: min(430px, 100%); margin-top: 10vh; padding: 36px; border: 1px solid #dce5f0; border-radius: 18px; background: #fff; box-shadow: 0 20px 55px rgba(31,54,83,.1); }
h1, h2 { color: #172033; } .login-card h1 { margin: 8px 0 0; font-size: 28px; } .muted { color: #66768b; }
form label { display: grid; gap: 8px; margin: 17px 0; color: #3b4a5e; font-size: 14px; font-weight: 600; }
input { width: 100%; min-height: 42px; padding: 9px 11px; border: 1px solid #cbd6e3; border-radius: 8px; color: #172033; background: #fff; outline: none; }
input:focus { border-color: #2166b1; box-shadow: 0 0 0 3px #dbeafe; }
button { min-height: 40px; padding: 8px 15px; border: 0; border-radius: 8px; color: #fff; background: #2166b1; cursor: pointer; font-weight: 600; } button:disabled { cursor: not-allowed; opacity: .45; }
.button-secondary { color: #38506b; border: 1px solid #cbd6e3; background: #fff; } .form-message { min-height: 20px; font-size: 14px; } .error { color: #bf3b3b; } .success { color: #16834a; }
.admin-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 28px; }.admin-header h1 { margin: 5px 0 0; font-size: 30px; }.toolbar { display: flex; align-items: end; gap: 14px; margin-bottom: 12px; }.search-label { flex: 1; max-width: 520px; }
.admin-table-card { overflow: hidden; border: 1px solid #dce5f0; border-radius: 14px; background: #fff; }.table-wrap { overflow-x: auto; }.admin-table-card table { min-width: 900px; }.admin-table-card th { position: static; }.admin-table-card td { white-space: normal; overflow-wrap: anywhere; }.link-button { min-height: 40px; padding: 3px 5px; color: #2166b1; background: transparent; }.link-button.danger { color: #bf3b3b; }.empty { padding: 44px; text-align: center; color: #66768b; }.pagination { display: flex; align-items: center; justify-content: end; gap: 12px; padding: 14px; color: #66768b; font-size: 14px; }
.form-panel { position: fixed; z-index: 5; inset: 0; width: min(620px, calc(100% - 32px)); height: fit-content; max-height: calc(100vh - 32px); overflow: auto; margin: auto; padding: 26px; border: 1px solid #dce5f0; border-radius: 16px; background: #fff; box-shadow: 0 28px 100px rgba(20,36,61,.3); }.form-panel::before { content: ''; position: fixed; z-index: -1; inset: 0; background: rgba(15,23,42,.3); }.panel-heading { display: flex; align-items: center; justify-content: space-between; }.panel-heading h2 { margin: 0; }.icon-button { min-height: 40px; width: 40px; height: 40px; padding: 0; color: #66768b; background: transparent; font-size: 26px; }.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }.field-error { min-height: 18px; color: #bf3b3b; font-size: 12px; font-weight: 400; }.form-actions { display: flex; justify-content: end; gap: 10px; margin-top: 24px; }
@media (max-width: 700px) { .admin-page { padding: 24px 14px; }.login-card { margin-top: 5vh; padding: 26px 20px; }.admin-header, .toolbar { align-items: stretch; flex-direction: column; }.toolbar button { width: 100%; }.field-grid { grid-template-columns: 1fr; }.form-panel { padding: 22px 18px; } }