/**
 * 青创大赛评分系统 · 共享 UI 令牌与动效
 * 深蓝金品牌语言 · 按钮 / 入场 / 微交互
 */
:root {
  --navy-950: #050e30;
  --navy-900: #061444;
  --navy-800: #0a1a4d;
  --navy-700: #14275e;
  --navy-600: #1a3fa0;
  --gold-400: #f5d78e;
  --gold-500: #e8c56a;
  --gold-600: #d4a843;
  --gold-700: #c9a23e;
  --ink-gold: #26200a;
  --text-soft: #cfe0ff;
  --text-mute: #9fb3e8;
  --text-body: #dbe6ff;
  --danger: #ff9d9d;
  --ok: #6fe09b;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.45, 0.64, 1);
  --dur-fast: 0.18s;
  --dur: 0.32s;
  --dur-slow: 0.55s;
  --radius-btn: 12px;
  --radius-card: 18px;
  --shadow-gold: 0 10px 28px rgba(212, 168, 67, 0.28);
  --shadow-lift: 0 14px 40px rgba(0, 0, 0, 0.35);
}

@keyframes ui-fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ui-fade-scale {
  from { opacity: 0; transform: scale(0.96) translateY(12px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes ui-slide-right {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes ui-shimmer {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
@keyframes ui-pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232, 197, 106, 0.35); }
  50%      { box-shadow: 0 0 28px 4px rgba(232, 197, 106, 0.22); }
}
@keyframes ui-soft-breathe {
  0%, 100% { opacity: 0.35; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(1.03); }
}
@keyframes ui-rank-in {
  from { opacity: 0; transform: translateY(22px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes ui-photo-in {
  from { opacity: 0; transform: scale(1.06); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes ui-badge-shine {
  0%   { background-position: 120% 0; }
  100% { background-position: -20% 0; }
}
@keyframes ui-toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(16px) scale(0.96); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
@keyframes ui-notice-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* —— 通用金渐变主按钮 —— */
.ui-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 22px;
  border: 0;
  border-radius: var(--radius-btn);
  cursor: pointer;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1;
  text-decoration: none;
  color: var(--ink-gold);
  background: linear-gradient(135deg, #f0d48a 0%, #e8c56a 40%, #d4a843 100%);
  background-size: 180% 180%;
  box-shadow: var(--shadow-gold), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition:
    transform var(--dur-fast) var(--ease-spring),
    box-shadow var(--dur) var(--ease-out),
    filter var(--dur-fast) ease,
    background-position 0.6s ease,
    opacity var(--dur-fast) ease;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.ui-btn:hover:not(:disabled) {
  transform: translateY(-2px) scale(1.01);
  background-position: 100% 50%;
  box-shadow: 0 14px 36px rgba(212, 168, 67, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  filter: brightness(1.04);
}
.ui-btn:active:not(:disabled) {
  transform: translateY(1px) scale(0.985);
  box-shadow: 0 4px 14px rgba(212, 168, 67, 0.22), inset 0 2px 4px rgba(0, 0, 0, 0.12);
  filter: brightness(0.98);
}
.ui-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}
.ui-btn:focus-visible {
  outline: 2px solid var(--gold-400);
  outline-offset: 3px;
}

.ui-btn-block { width: 100%; }
.ui-btn-lg {
  min-height: 56px;
  padding: 0 28px;
  font-size: 17px;
  border-radius: 14px;
  letter-spacing: 0.18em;
}
.ui-btn-sm {
  min-height: 36px;
  padding: 0 14px;
  font-size: 13px;
  letter-spacing: 0.06em;
  border-radius: 9px;
}

.ui-btn-ghost {
  color: var(--gold-400);
  background: rgba(5, 16, 52, 0.55);
  border: 1px solid rgba(232, 197, 106, 0.45);
  box-shadow: none;
  backdrop-filter: blur(8px);
}
.ui-btn-ghost:hover:not(:disabled) {
  background: rgba(232, 197, 106, 0.92);
  color: var(--ink-gold);
  border-color: transparent;
  box-shadow: var(--shadow-gold);
}

.ui-btn-blue {
  color: #fff;
  background: linear-gradient(135deg, #3d6fe0 0%, #2f5fd0 55%, #254db8 100%);
  box-shadow: 0 8px 22px rgba(47, 95, 208, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.ui-btn-blue:hover:not(:disabled) {
  box-shadow: 0 12px 28px rgba(47, 95, 208, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.ui-btn-soft {
  color: #51608c;
  background: #eef1f8;
  border: 1px solid #d8e0f0;
  box-shadow: none;
  font-weight: 600;
}
.ui-btn-soft:hover:not(:disabled) {
  background: #e4e9f4;
  border-color: #c5d0e8;
  box-shadow: 0 4px 12px rgba(30, 50, 120, 0.08);
  filter: none;
}

.ui-btn-danger {
  color: #fff;
  background: linear-gradient(135deg, #e85a5a 0%, #d64545 100%);
  box-shadow: 0 8px 20px rgba(214, 69, 69, 0.28);
}
.ui-btn-danger:hover:not(:disabled) {
  box-shadow: 0 12px 26px rgba(214, 69, 69, 0.38);
}

/* —— 返回首页（高对比实心按钮） —— */
.back-home {
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 20px 0 16px;
  border-radius: 12px;
  border: 0;
  background: linear-gradient(135deg, #f3d894 0%, #e8c56a 45%, #d4a843 100%);
  color: #1a1506;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-decoration: none;
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.25) inset,
    0 1px 0 rgba(255, 255, 255, 0.4) inset;
  transition:
    transform 0.2s cubic-bezier(0.34, 1.45, 0.64, 1),
    box-shadow 0.22s ease,
    filter 0.2s ease;
  animation: ui-fade-up 0.4s ease both;
}
.back-home::before {
  content: "←";
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}
.back-home:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
  box-shadow:
    0 12px 30px rgba(212, 168, 67, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.3) inset;
}
.back-home:active {
  transform: translateY(1px) scale(0.98);
  filter: brightness(0.98);
}

/* —— 客户体验密码提示（浅色高对比卡片） —— */
.demo-hint {
  margin-top: 20px;
  padding: 16px 16px 14px;
  border-radius: 14px;
  border: 1px solid rgba(232, 197, 106, 0.55);
  background: linear-gradient(180deg, #fff8e8 0%, #f5e6c0 100%);
  color: #3a2e0e;
  font-size: 13px;
  line-height: 1.65;
  text-align: left;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
  animation: ui-notice-in 0.45s ease 0.12s both;
}
.demo-hint .demo-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #7a6220;
  margin-bottom: 8px;
  letter-spacing: 0.04em;
}
.demo-hint .demo-pass {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  margin: 4px 0 8px;
  border-radius: 12px;
  background: #1c2548;
  border: 1px solid #d4a843;
  box-shadow: inset 0 0 0 1px rgba(245, 215, 142, 0.15);
}
.demo-hint .demo-pass b,
.demo-hint b.demo-pass-text {
  display: inline-block;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  font-family: Consolas, "Courier New", monospace;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: 0.28em;
  color: #ffe9a8;
  text-shadow: 0 0 18px rgba(245, 215, 142, 0.35);
}
.demo-hint .demo-note {
  display: block;
  font-size: 12px;
  color: #6b5720;
  opacity: 1;
}
.demo-hint .demo-codes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}
.demo-hint .demo-code {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid #e0c57a;
  border-radius: 12px;
  background: #fffdf6;
  color: #3a2e0e;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  box-shadow: 0 2px 8px rgba(80, 60, 10, 0.08);
  transition:
    transform 0.2s cubic-bezier(0.34, 1.45, 0.64, 1),
    background 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}
.demo-hint .demo-code:hover {
  background: #fff4d4;
  border-color: #d4a843;
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(180, 140, 40, 0.2);
}
.demo-hint .demo-code:active {
  transform: scale(0.98);
}
.demo-hint .demo-code .dn {
  font-size: 11px;
  font-weight: 700;
  color: #8a7028;
}
.demo-hint .demo-code strong {
  font-family: Consolas, "Courier New", monospace;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: #1c2548;
}
.demo-hint .demo-code .dt {
  font-size: 10px;
  color: #9a8040;
}
@media (max-width: 420px) {
  .demo-hint .demo-codes { grid-template-columns: 1fr; }
}

/* —— 活动技术支持 —— */
.support-contact {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 22px 20px 18px;
  border: 1px solid rgba(232, 197, 106, 0.48);
  border-radius: 20px;
  background: linear-gradient(160deg, rgba(17, 39, 99, 0.96), rgba(5, 16, 52, 0.95));
  color: #fff;
  text-align: center;
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(12px);
}
.support-contact::before {
  content: "";
  position: absolute;
  top: 0;
  left: 14%;
  right: 14%;
  height: 3px;
  border-radius: 0 0 999px 999px;
  background: linear-gradient(90deg, #dd5b7d, #b95aa4 52%, #8f63cf);
  box-shadow: 0 0 18px rgba(185, 90, 164, 0.48);
}
.support-contact__title {
  margin-bottom: 13px;
  color: #f5d78e;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.16em;
}
.support-contact__qr {
  width: 100%;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
}
.support-contact__qr img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 9px;
}
.support-contact__phone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  margin-top: 14px;
  padding: 0 10px;
  border-radius: 11px;
  background: linear-gradient(135deg, #f3d894, #e8c56a 48%, #d4a843);
  color: #26200a;
  font-family: "Arial Narrow", Arial, "Microsoft YaHei", sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.035em;
  line-height: 1.25;
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(212, 168, 67, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transition: transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur) var(--ease-out), filter var(--dur-fast) ease;
}
.support-contact__phone::before {
  content: "☎";
  margin-right: 6px;
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 15px;
}
.support-contact__phone:hover {
  color: #26200a;
  filter: brightness(1.05);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(212, 168, 67, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.42);
}
.support-contact__phone:active { transform: translateY(1px) scale(0.985); }
.support-contact__phone:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
.support-contact__note {
  margin-top: 9px;
  color: rgba(207, 224, 255, 0.72);
  font-size: 11px;
  letter-spacing: 0.05em;
}