:root {
  --ink: #10233f;
  --blue: #1769e0;
  --cyan: #16b7c9;
  --spark: #ff785a;
  --mist: #f3f7fb;
}

* { box-sizing: border-box; }
body { font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif; min-height: 100vh; }
.font-data { font-family: "Manrope", ui-sans-serif, sans-serif; }
.glass { background: rgba(255,255,255,.86); backdrop-filter: blur(16px); }
.card { background: #fff; border: 1px solid #e4edf6; border-radius: 20px; box-shadow: 0 12px 35px rgba(18,55,95,.06); }
.card-hover { transition: transform .2s ease, box-shadow .2s ease; }
.card-hover:hover { transform: translateY(-2px); box-shadow: 0 18px 42px rgba(18,55,95,.1); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; border-radius: 12px; padding: .65rem 1rem; font-weight: 700; transition: .18s ease; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-primary { color: white; background: linear-gradient(135deg, #1769e0, #0756c7); box-shadow: 0 8px 18px rgba(23,105,224,.2); }
.btn-primary:hover { filter: brightness(1.05); transform: translateY(-1px); }
.btn-secondary { color: #174a83; background: #eaf3ff; }
.btn-danger { color: #b42318; background: #fff0ee; }
.input { width: 100%; border: 1px solid #dce7f2; border-radius: 12px; background: #fbfdff; padding: .7rem .85rem; outline: none; transition: .18s ease; }
.input:focus { border-color: #4b91ee; box-shadow: 0 0 0 4px rgba(23,105,224,.1); background: #fff; }
.label { display: block; margin-bottom: .4rem; color: #39536e; font-size: .875rem; font-weight: 700; }
.table-wrap { overflow-x: auto; border: 1px solid #e4edf6; border-radius: 16px; }
table { width: 100%; border-collapse: collapse; white-space: nowrap; }
th { background: #f7faff; color: #61758b; font-size: .75rem; letter-spacing: .05em; text-align: left; padding: .85rem 1rem; text-transform: uppercase; }
td { border-top: 1px solid #edf2f7; padding: .85rem 1rem; font-size: .875rem; }
tr:hover td { background: #fbfdff; }
.badge { display: inline-flex; align-items: center; border-radius: 999px; padding: .3rem .65rem; font-size: .75rem; font-weight: 700; }
.badge-green { color: #087443; background: #e7f8ef; }
.badge-red { color: #b42318; background: #fff0ee; }
.badge-yellow { color: #9a5b00; background: #fff6d8; }
.badge-blue { color: #155db8; background: #e9f2ff; }
.spark-rail { position: relative; }
.spark-rail::before { content: ""; position: absolute; left: -1px; top: 22px; bottom: 22px; width: 2px; background: linear-gradient(transparent, #ff785a 18%, #ffb54d 54%, transparent); }
.spark-dot { box-shadow: 0 0 0 5px rgba(255,120,90,.12), 0 0 25px rgba(255,120,90,.6); }
.mesh { background-image: radial-gradient(circle at 10% 10%, rgba(22,183,201,.12), transparent 32%), radial-gradient(circle at 88% 14%, rgba(255,120,90,.12), transparent 28%), linear-gradient(145deg, #f9fcff 0%, #eef5fb 100%); }
.page-enter { animation: enter .28s ease both; }
@keyframes enter { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }