:root {
  --ink: #14201f;
  --muted: #6e7d7b;
  --line: #dfe8e6;
  --paper: #f4f8f7;
  --card: #ffffff;
  --green: #55b1ad;
  --green-dark: #267f7b;
  --green-soft: #e7f5f3;
  --gold: #d9a520;
  --red: #e6373f;
  --red-soft: #fff0f0;
  --amber: #d79b28;
  --shadow: 0 16px 45px rgba(18, 66, 61, .09);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  color: var(--ink);
  background: var(--paper);
  font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
}
.brand-logo {
  display: block; object-fit: contain;
  transform: scale(1.12); transform-origin: center;
  filter: drop-shadow(0 2px 4px rgba(19, 72, 108, .16));
}
button, input, select { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }
.avatar {
  width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto;
  object-fit: cover; border: 2px solid rgba(255,255,255,.9);
  box-shadow: 0 3px 12px rgba(8, 61, 57, .14);
}
.avatar-fallback {
  display: inline-grid; place-items: center; color: #fff; font-size: 13px; font-weight: 700;
  background: linear-gradient(145deg, var(--green), #62a49b);
}
.avatar-click { cursor: zoom-in; }
.toast {
  position: fixed; left: 50%; bottom: 86px; z-index: 1000;
  transform: translate(-50%, 16px); opacity: 0;
  padding: 11px 18px; max-width: calc(100vw - 40px);
  color: #fff; background: rgba(15, 30, 28, .94); border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0,0,0,.18); transition: .25s ease;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.error { background: #b8242b; }
.lightbox {
  position: fixed; inset: 0; z-index: 999; display: grid; place-items: center;
  background: rgba(5, 12, 11, .88); padding: 24px;
}
.lightbox img { max-width: min(620px, 92vw); max-height: 82vh; border-radius: 20px; box-shadow: 0 30px 90px #000; }
.lightbox button {
  position: fixed; top: 20px; right: 24px; border: 0; background: transparent;
  color: #fff; font-size: 36px; line-height: 1;
}
.spinner {
  width: 30px; height: 30px; margin: 40px auto; border: 3px solid var(--line);
  border-top-color: var(--green); border-radius: 50%; animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }