/* 基础与主题变量 */
:root {
  --text: #e7f2ff;
  --muted: #bfe9ff;
  --panel-bg: rgba(14, 18, 29, 0.6);
  --panel-border: rgba(255, 255, 255, 0.18);
  --focus: rgba(91, 227, 255, 0.85);
  --accent1: #5be3ff;
  --accent2: #ff6ac1;
  --accent3: #ffd86f;
  --accent4: #7df48f;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Microsoft YaHei", sans-serif;
  /* 背景图 + 顶层暗化渐变，保证可读性与适配屏幕 */
  background:
    linear-gradient(180deg, rgba(4,7,14,.20), rgba(4,7,14,.40)),
    url('../images/background.jpg');
  background-position: center center;
  background-size: cover;        /* 等比填充整个视窗 */
  background-repeat: no-repeat;
}

/* 环境光背景 */
.ambient {
  position: fixed; inset: -10vmax; z-index: -2;
  background:
    radial-gradient(1200px circle at 8% 12%, #0ea5e9 0, transparent 55%),
    radial-gradient(900px circle at 80% 18%, #a855f7 0, transparent 60%),
    radial-gradient(700px circle at 30% 85%, #22d3ee 0, transparent 60%);
  filter: blur(60px);
  opacity: .45;
  animation: drift 24s ease-in-out infinite alternate;
}

/* 斜向流光线条 */
.flow-lines {
  position: fixed; inset: 0; z-index: -1;
  background: repeating-linear-gradient(120deg,
    rgba(255,255,255,.05) 0 12px,
    rgba(255,255,255,.14) 12px 14px,
    rgba(255,255,255,.05) 14px 26px);
  background-size: 200% 200%;
  mix-blend-mode: color-dodge;
  opacity: .12;
  animation: moveLines 12s linear infinite;
}

/* 布局 */
.wrap { min-height: 100vh; display: flex; gap: 2rem; align-items: center; justify-content: center; flex-wrap: wrap; padding: 6vmin; }

.brand {
  width: 22rem; max-width: 28vw; min-width: 18rem;
  padding: 1.6rem 1.6rem; border-radius: 1rem;
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.15);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1rem;
}
.brand-text { display: grid; gap: .4rem; }
.brand-logo {
  width: clamp(72px, 9vw, 120px); height: auto; object-fit: contain;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.35));
}
.brand .city {
  margin: 0 0 .6rem; font-size: 3.2rem; font-weight: 800; letter-spacing: .12rem;
  background: linear-gradient(90deg, #fff 0, #c3f9ff 50%, #fff 100%);
  -webkit-background-clip: text; color: transparent;
  background-size: 200% auto; animation: textShimmer 6s linear infinite;
}
.brand .hotel {
  display: inline-block; margin: 0; font-weight: 600; font-size: 1rem; color: #eaf6ff;
  background: rgba(255,255,255,.14); padding: .4rem .9rem; border-radius: .6rem;
}

.panel {
  position: relative; width: min(520px, 85vw);
  padding: 2.2rem 2.4rem; border-radius: 1.2rem; overflow: hidden;
  background: var(--panel-bg);
  backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid var(--panel-border);
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
  transform-style: preserve-3d;
}
/* 渐变边缘的流光与扫光 */
.panel::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; z-index: 0;
  background: linear-gradient(120deg, #8cb782, #e8e6d9);
  background-size: 300% 300%; filter: blur(10px); opacity: .55;
  animation: borderFlow 8s linear infinite;
  mix-blend-mode: color-dodge; pointer-events: none;
}
.panel::after {
  content: ""; position: absolute; inset: -6%; border-radius: inherit; z-index: 0;
  background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,.06) 48%, rgba(255,255,255,.12) 50%, rgba(255,255,255,.06) 52%, transparent 65%);
  filter: blur(14px);
  opacity: .35;
  transform: translateX(-120%);
  animation: shimmer 5.5s ease-in-out infinite;
  mix-blend-mode: soft-light; pointer-events: none;
}
.panel.success::before { background: linear-gradient(120deg, var(--accent4), var(--accent1), var(--accent4)); }

.panel-header { position: relative; z-index: 1; }
.panel-header h2 { margin: 0; font-weight: 800; letter-spacing: .12rem; text-align: center; }
.panel-header p { margin: .4rem 0 1.2rem; text-align: center; opacity: .9; }

.form { position: relative; z-index: 1; }
.input-group {
  display: flex; align-items: center; gap: .8rem;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.16);
  padding: .8rem 1rem; border-radius: .8rem;
  margin: .8rem 0; position: relative;
}
.input-group:focus-within {
  border-color: transparent;
  box-shadow: 0 0 0 1px var(--focus), 0 0 14px rgba(91,227,255,.4);
}
.icon { color: var(--muted); display: flex; align-items: center; }
.input-group input {
  flex: 1; border: none; outline: none; background: transparent; color: var(--text);
  font-size: 16px; letter-spacing: .02rem;
}
.toggle-pw {
  appearance: none; border: none; background: transparent; color: var(--muted);
  cursor: pointer; padding: .2rem .4rem; border-radius: .4rem; transition: color .2s ease;
}
.toggle-pw:hover { color: #ffffff; }

.actions { display: flex; gap: .8rem; margin-top: 1rem; }
.btn {
  position: relative; display: inline-flex; justify-content: center; align-items: center; height: 44px;
  padding: 0 1.2rem; border-radius: .8rem; overflow: hidden; cursor: pointer;
  color: #e9f6ff; background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.22);
}
.btn.primary { background: linear-gradient(120deg, rgba(91,227,255,.15), rgba(255,106,193,.18)); border-color: rgba(91,227,255,.4); }
.btn.primary::before {
  content: ""; position: absolute; inset: -2px; z-index: -1;
  background: linear-gradient(120deg, var(--accent1), var(--accent2), var(--accent3), var(--accent1));
  background-size: 200% 200%; filter: blur(10px); opacity: .55;
  animation: btnGlow 4s linear infinite;
}
.btn.primary::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.2), transparent);
  transform: translateX(-100%); animation: shimmer 2.2s linear infinite;
}
.btn.ghost { background: transparent; border-color: rgba(255,255,255,.18); color: #cde6ff; }
.btn .ripple { position: absolute; border-radius: 50%; transform: scale(0); opacity: .7; pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,.85) 0, rgba(255,255,255,.15) 60%, transparent 70%);
  animation: ripple 700ms ease-out forwards;
}

.links { text-align: right; margin-top: .5rem; }
.links a { color: #9edcff; text-decoration: none; opacity: .9; }
.links a:hover { color: #c9f1ff; }

.toast {
  position: absolute; left: 50%; top: .6rem; transform: translateX(-50%) translateY(-20px);
  padding: .5rem .9rem; border-radius: .7rem; font-weight: 600; background: rgba(37,56,85,.65);
  border: 1px solid var(--panel-border); color: var(--text); backdrop-filter: blur(8px);
  opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.cursor-light {
  position: fixed; width: 22vmax; height: 22vmax; border-radius: 50%;
  pointer-events: none; background: radial-gradient(closest-side, rgba(255,255,255,.18), rgba(255,255,255,0));
  mix-blend-mode: color-dodge; filter: blur(40px); left: -100vw; top: -100vh; z-index: 2;
}

/* 动画 */
@keyframes drift {
  0% { transform: translate3d(0,0,0) scale(1); }
  50% { transform: translate3d(2vmax,-2vmax,0) scale(1.05); }
  100% { transform: translate3d(-1vmax,1vmax,0) scale(1); }
}
@keyframes moveLines { 0% { background-position: 0 0; } 100% { background-position: 400px 400px; } }
@keyframes textShimmer { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
@keyframes borderFlow { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
@keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
@keyframes btnGlow { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
@keyframes ripple { to { transform: scale(8); opacity: 0; } }