:root {
  --ink: #14243a;
  --muted: #8b98aa;
  --red: #00bd91;
  --cream: #e8fbf4;
  --paper: #ffffff;
  --line: #dfe7ec;
  --green: #00c99a;
  --mint: #c9f8e9;
  --mint-soft: #ebfbf5;
  --orange: #ff9d2e;
  --orange-soft: #fff4e4;
}

* { letter-spacing: 0; }

html { background: #f3f6f7; }

body {
  background: #f3f6f7;
  color: var(--ink);
  font-family: "HarmonyOS Sans SC", "MiSans", "PingFang SC", "Microsoft YaHei", sans-serif;
}

.page-noise { display: none; }

.topbar {
  position: relative;
  height: 76px;
  padding: 0 max(20px, calc((100vw - 880px) / 2));
  border-bottom: 1px solid rgba(20, 36, 58, 0.06);
  background: var(--mint);
  backdrop-filter: none;
}

.brand { gap: 10px; }
.brand-mark, .brand-mark img { width: 42px; height: 42px; }
.brand b { font-size: 18px; color: var(--ink); }
.brand small { color: #627286; }
.admin-link { color: #425b72; font-family: inherit; font-size: 12px; font-weight: 600; }

.shell { max-width: 880px; padding: 28px 18px 32px; }

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 178px;
  align-items: center;
  gap: 24px;
  margin-bottom: 16px;
  padding: 26px 28px;
  border-radius: 20px;
  background: var(--mint);
  overflow: hidden;
  position: relative;
}

.hero::after {
  content: "";
  position: absolute;
  right: -42px;
  bottom: -64px;
  width: 180px;
  height: 180px;
  border: 28px solid rgba(0, 189, 145, 0.12);
  border-radius: 50%;
}

.hero h1 {
  margin: 6px 0 10px;
  color: var(--ink);
  font-size: clamp(30px, 5vw, 46px);
  line-height: 1.16;
  font-weight: 800;
}

.hero p { max-width: 590px; color: #4c6072; font-size: 14px; line-height: 1.75; }
.hero-art {
  display: grid;
  place-items: center;
  width: 178px;
  height: 178px;
  padding: 10px;
  border: 1px solid rgba(0, 189, 145, 0.14);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(20, 75, 65, 0.08);
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.hero-art::before, .hero-art::after { display: none; }
.hero-art img { display: block; width: 100%; height: 100%; object-fit: contain; }
.eyebrow { color: #008e70; font-family: inherit; font-size: 11px; font-weight: 800; }

.card {
  padding: 28px;
  border: 1px solid #e4eaee;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(42, 67, 80, 0.06);
}

.section-title { color: var(--ink); font-size: 22px; }
.field { gap: 8px; }
.field label { color: #30445a; font-family: inherit; font-size: 13px; }

.field input, .field select {
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid #dbe3e8;
  border-radius: 11px;
  background: #f8fafb;
  color: var(--ink);
  font: 14px inherit;
}

.field input:focus, .field select:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(0, 201, 154, 0.14);
  background: #fff;
}

.hint { color: #98a4b1; }
.contact-heading { color: var(--ink); font-family: inherit; }
.contact-heading small { color: #91a0ad; }

.consent-row { color: #24384d; font-family: inherit; font-weight: 650; }
.consent-row input { accent-color: var(--green); }

.preflight {
  border: 1px solid #ffe0b2;
  border-radius: 14px;
  background: var(--orange-soft);
  color: #6a4a28;
  font-family: inherit;
}

.submit {
  border-radius: 11px;
  background: var(--green);
  box-shadow: none;
  font-family: inherit;
  font-weight: 750;
}

.submit:hover { background: #00b68c; }
.submit:active { transform: translateY(1px); box-shadow: none; }
.submit:disabled { opacity: 0.65; cursor: wait; }
.text-action { color: #24577d; font-family: inherit; }

.confirm-card h2 { color: #627286; font-family: inherit; }
.confirm-dorm { color: var(--ink); font-family: inherit; font-weight: 800; }
.confirm-grid > div { background: var(--mint-soft); border: 1px solid #d7f4e9; }
.confirm-grid span { color: #718395; }
.confirm-grid strong { color: var(--ink); font-family: inherit; }

.result-head h2 { color: var(--ink); font-family: inherit; }
.pill { background: #e4f9f1; color: #008b6c; font-family: inherit; font-weight: 700; }
.member { border-color: #e8edef; }
.member strong { color: var(--ink); font-family: inherit; }
.member span, .contacts { color: #718195; }

.management-code {
  border-color: #f2bd79;
  background: var(--orange-soft);
}

.management-code strong { color: #e27b14; }
.management-code span, .management-code small { color: #8a6a49; }

.qr-card {
  border: 1px solid #d6f2e8;
  border-radius: 18px;
  background: var(--mint-soft);
}

.qr-card img { box-shadow: 0 5px 16px rgba(31, 63, 70, 0.09); }
.qr-card h3 { color: var(--ink); font-family: inherit; }
.qr-card p { color: #718195; }

.ghost, .danger-ghost {
  min-height: 46px;
  border-radius: 10px;
  background: #fff;
  font-family: inherit;
}

.ghost { border-color: #cddce2; color: #29465f; }
.ghost:hover { border-color: var(--green); color: #008b6c; background: #f2fcf8; }
.danger-ghost { border-color: #f0cbc4; color: #c34e3d; }

.admin-wrap { max-width: 1120px; padding: 30px 20px; }
.admin-top h1 { color: var(--ink); font-family: inherit; }
.stats { gap: 12px; }
.stat { border-color: #e3eaed; border-radius: 14px; background: #fff; }
.stat b { color: var(--green); font-family: inherit; }
.filters input, .filters select { border-color: #dbe3e8; background: #fff; font-family: inherit; }
.table-wrap { border-color: #e1e8eb; border-radius: 14px; }
.data-table { font-family: inherit; }
.data-table th { background: var(--mint-soft); color: #40586b; }
.data-table th, .data-table td { border-color: #e8edef; }
.delete-student { border-color: #efc7c0; background: #fff7f5; font-family: inherit; }
.delete-student:hover { background: #d95947; }

dialog { font-family: inherit; }
.restore-box > input { border-color: #dbe3e8; font-family: inherit; }
.admin-login-back { color: #426079; font-family: inherit; }

footer { color: #9aa7b2; font-family: inherit; }

@media (max-width: 700px) {
  .topbar { height: 68px; padding: 0 16px; }
  .brand-mark, .brand-mark img { width: 38px; height: 38px; }
  .shell { padding: 16px 12px 24px; }
  .hero { margin-bottom: 12px; padding: 20px; border-radius: 16px; }
  .hero { grid-template-columns: minmax(0, 1fr) 104px; gap: 12px; }
  .hero h1 { font-size: 31px; }
  .hero p { font-size: 13px; }
  .hero-art { width: 104px; height: 104px; padding: 6px; border-radius: 12px; }
  .card { padding: 20px; border-radius: 16px; }
  .form-grid { gap: 15px; }
  .preflight { padding: 16px; }
  .result-head h2 { font-size: 25px; line-height: 1.35; }
  .member { flex-direction: column; gap: 6px; }
  .contacts { text-align: left; }
  .qr-card { border-radius: 16px; }
  .admin-wrap { padding: 20px 12px; }
}