:root {
  --navy: #12324a;
  --navy-2: #194c70;
  --blue: #2b7bb2;
  --blue-soft: #eaf4fb;
  --green: #178c62;
  --green-soft: #e7f6ef;
  --amber: #b76b0a;
  --amber-soft: #fff4df;
  --red: #c64343;
  --red-soft: #fff0ef;
  --ink: #14212b;
  --muted: #647584;
  --line: #dce5eb;
  --surface: #ffffff;
  --canvas: #f4f8fb;
  --shadow: 0 18px 50px rgba(18, 50, 74, 0.12);
  --radius: 18px;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; }

body {
  color: var(--ink);
  background: var(--canvas);
  font-family: "Microsoft YaHei", "PingFang SC", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; }

button { cursor: pointer; }

a { color: inherit; }

.local-ribbon {
  position: fixed;
  z-index: 50;
  top: 0;
  left: 0;
  right: 0;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #7d4a00;
  background: #fff4d9;
  border-bottom: 1px solid #f1d69f;
  font-size: 12px;
  letter-spacing: 0.02em;
}

.local-ribbon strong { color: #472900; }

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #efa928;
  box-shadow: 0 0 0 4px rgba(239, 169, 40, 0.15);
}

.brand-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: white;
  border-radius: 13px;
  background: linear-gradient(145deg, #286f9f, #12324a);
  box-shadow: 0 8px 18px rgba(18, 50, 74, 0.22);
  font-weight: 800;
  letter-spacing: -0.08em;
}

.brand-name { font-size: 18px; font-weight: 800; letter-spacing: 0.02em; }
.brand-sub { margin-top: 2px; color: var(--muted); font-size: 11px; }

.btn {
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 11px;
  color: var(--ink);
  background: white;
  font-weight: 700;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.btn:hover { transform: translateY(-1px); }
.btn:disabled { cursor: not-allowed; opacity: .5; transform: none; }
.btn-primary { color: white; background: var(--navy-2); box-shadow: 0 8px 18px rgba(25, 76, 112, .2); }
.btn-primary:hover { background: #1e608e; }
.btn-secondary { border-color: var(--line); background: #fff; }
.btn-danger { color: var(--red); border-color: #efb9b5; background: var(--red-soft); }
.btn-small { min-height: 32px; padding: 0 11px; border-radius: 8px; font-size: 12px; }

.field { display: grid; gap: 7px; }
.field label { color: #344754; font-size: 13px; font-weight: 700; }
.field small { color: var(--muted); font-size: 11px; line-height: 1.5; }

.input, .select, .textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 13px;
  color: var(--ink);
  background: #fbfdfe;
  border: 1px solid #cfdae2;
  border-radius: 10px;
  outline: none;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.textarea { min-height: 100px; resize: vertical; }
.input:focus, .select:focus, .textarea:focus { background: white; border-color: #4b94c3; box-shadow: 0 0 0 4px rgba(75, 148, 195, .13); }

.notice {
  padding: 12px 14px;
  border-radius: 11px;
  color: #2f5a75;
  background: var(--blue-soft);
  border: 1px solid #c9e3f4;
  font-size: 13px;
  line-height: 1.6;
}

.notice-success { color: #146245; background: var(--green-soft); border-color: #bfe4d3; }
.notice-warning { color: #815109; background: var(--amber-soft); border-color: #f0d29c; }
.notice-error { color: #9d3030; background: var(--red-soft); border-color: #efc1be; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 25px;
  padding: 3px 9px;
  border-radius: 999px;
  color: #3e5565;
  background: #edf2f5;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.badge-green { color: #146245; background: var(--green-soft); }
.badge-blue { color: #1f608b; background: var(--blue-soft); }
.badge-amber { color: #87530a; background: var(--amber-soft); }
.badge-red { color: #a23535; background: var(--red-soft); }

.toast-stack {
  position: fixed;
  z-index: 100;
  top: 50px;
  right: 20px;
  display: grid;
  gap: 10px;
  width: min(360px, calc(100vw - 40px));
}

.toast {
  padding: 13px 15px;
  color: #fff;
  background: #1b3548;
  border-radius: 12px;
  box-shadow: 0 14px 35px rgba(15, 37, 53, .24);
  animation: toast-in .18s ease-out;
  font-size: 13px;
  line-height: 1.5;
}

.toast.error { background: #9c3434; }
.toast.success { background: #1e7557; }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.empty-state {
  padding: 46px 20px;
  color: var(--muted);
  text-align: center;
  border: 1px dashed #cbd8e1;
  border-radius: 14px;
  background: #fbfdfe;
}

.hidden { display: none !important; }

@media (max-width: 720px) {
  .local-ribbon { justify-content: flex-start; overflow: hidden; padding: 0 12px; white-space: nowrap; }
}