/* 主按钮：金色渐变 + 光晕 + 悬浮上移（对应 demo .btn-primary） */
.button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 20px;
  border: none;
  border-radius: 12px;
  background: var(--grad);
  color: var(--on-gold);
  font-weight: 700;
  font-size: 13.5px;
  box-shadow: 0 0 18px rgba(245, 196, 81, .22);
  cursor: pointer;
  transition: all .25s;
}
.button:hover { transform: translateY(-1px); box-shadow: 0 0 26px rgba(245, 196, 81, .4); filter: none; }
.button:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.button.secondary { color: var(--paper); background: rgba(255, 255, 255, .09); box-shadow: none; }
.button.secondary:hover { background: rgba(255, 255, 255, .16); }
/* 幽灵按钮：金色描边空心（对应 demo .btn-gold-line） */
.button.ghost { min-height: 38px; padding: 0 15px; border: 1px solid rgba(245, 196, 81, .5); color: var(--gold-1); background: transparent; font-weight: 700; font-size: 12.5px; box-shadow: none; }
.button.ghost:hover { background: rgba(245, 196, 81, .1); }
.button.danger { border: 1px solid rgba(255, 155, 155, .45); color: #ffd6d6; background: rgba(255, 155, 155, .08); box-shadow: none; }
.button.small { min-height: 34px; padding: 5px 12px; border-radius: 40px; font-size: 11.5px; }

.field { display: grid; gap: 8px; }
.field label { color: var(--gold-1); font-size: 12px; font-weight: 700; }
.input, .textarea, .select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  outline: none;
  background: rgba(255, 255, 255, .05);
  color: var(--paper);
  transition: border-color .3s;
}
.input::placeholder, .textarea::placeholder { color: var(--faint); }
.select option { background: #15130c; color: var(--paper); }
.input, .select { height: 46px; padding: 0 14px; }
.textarea { min-height: 112px; padding: 13px 14px; line-height: 1.65; resize: vertical; }
.input:focus, .textarea:focus, .select:focus { border-color: var(--gold-1); box-shadow: none; }
.field-help { color: var(--muted); font-size: 11px; line-height: 1.5; }

/* 玻璃卡片：半透明 + 背景模糊 + 上浮入场（对应 demo .glass-card） */
.panel {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--card);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  box-shadow: 0 18px 60px rgba(0, 0, 0, .22);
  animation: slide-up .45s ease both;
}
.panel-body { padding: 22px; }
.panel-title { margin-bottom: 6px; font-size: 17px; }

.tag-list { display: flex; flex-wrap: wrap; gap: 8px; }
.tag { padding: 3px 11px; border: 1px solid rgba(245, 196, 81, .35); border-radius: 50px; color: var(--gold-1); background: rgba(245, 196, 81, .1); font-size: 11.5px; }

/* 空状态：虚线描边（对应 demo .empty） */
.empty-state { padding: 15px 6px; text-align: center; color: var(--muted); font-size: 12.5px; border: 1px dashed rgba(255, 255, 255, .14); border-radius: 12px; }
.empty-state strong { display: block; margin-bottom: 8px; color: var(--paper); font-weight: 700; }
.page .empty-state { padding: 40px 22px; }

/* 底部居中的金色提示（对应 demo #toast） */
.toast-root { position: fixed; left: 50%; bottom: 32px; z-index: 200; display: grid; justify-items: center; gap: 10px; transform: translateX(-50%); }
.toast { max-width: 86vw; padding: 10px 22px; border: 1px solid rgba(245, 196, 81, .45); border-radius: 12px; background: rgba(23, 20, 9, .96); box-shadow: var(--shadow); color: var(--gold-1); font-size: 13px; text-align: center; animation: toast-in .35s ease; }
.toast.error { border-color: rgba(255, 155, 155, .55); color: var(--danger); }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } }

.skeleton { border-radius: 8px; background: linear-gradient(90deg, #14121b, #242130, #14121b); background-size: 200% 100%; animation: shimmer 1.3s infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }

.danger-text { color: var(--danger); }
.success-text { color: var(--success); }

/* 首次访问引导遮罩：黑金卡片居中，点击按钮关闭并按账号×页面记住 */
.onboarding-overlay { position: fixed; inset: 0; z-index: 180; display: grid; place-items: center; padding: 24px; background: rgba(4, 4, 10, .78); backdrop-filter: blur(6px); animation: onboarding-in .3s ease; }
@keyframes onboarding-in { from { opacity: 0; } to { opacity: 1; } }
.onboarding-card { width: min(460px, 92vw); max-height: 84vh; overflow: auto; padding: 30px 32px 26px; border: 1px solid var(--line-gold); border-radius: 18px; background: linear-gradient(160deg, #17130c, var(--ink-0) 65%); box-shadow: var(--shadow), 0 0 60px rgba(245, 196, 81, .08); text-align: left; animation: onboarding-card-in .35s ease; }
@keyframes onboarding-card-in { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
.onboarding-card > .eyebrow { margin: 0 0 6px; }
.onboarding-card h2 { margin: 0 0 10px; color: var(--gold-0); font-size: 22px; }
.onboarding-intro { margin: 0 0 14px; color: var(--paper); font-size: 13.5px; line-height: 1.8; }
.onboarding-points { margin: 0 0 18px; padding: 0 0 0 2px; list-style: none; display: grid; gap: 9px; }
.onboarding-points li { position: relative; padding-left: 22px; color: var(--paper); font-size: 13px; line-height: 1.7; }
.onboarding-points li::before { content: "✦"; position: absolute; left: 0; top: 1px; color: var(--gold-2); font-size: 11px; }
.onboarding-dismiss { width: 100%; }