/*
 * input : login.html 的结构（#stage 动画画布、.card 登录卡、#sound、#toast）
 * output: 登录页视觉 —— 玻璃拟态卡片 + 旋转渐变描边、分段入场、聚焦光晕、按钮流光、错误抖动、成功收起；≤640px 底部抽屉
 * pos   : 登录页唯一样式表；与看板浅色主题同一套红/金/蓝配色
 */
:root {
  --red: #e5212f; --red-2: #ff4d5a; --gold: #f5a524; --blue: #2563eb; --ink: #1c2230; --muted: #6b7384;
  --glass: rgba(255, 255, 255, .8); --edge: rgba(255, 255, 255, .85);
  --ease: cubic-bezier(.2, .8, .2, 1);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #f7f9fc; color: var(--ink);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; }
#stage { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; display: block; }
.veil { position: fixed; inset: 0; pointer-events: none;
  background: radial-gradient(60% 70% at 50% 55%, rgba(247, 249, 252, .0) 40%, rgba(247, 249, 252, .55) 100%); }

/* ---------------- 卡片 ---------------- */
.auth { position: fixed; inset: 0; display: grid; place-items: center; padding: 24px; pointer-events: none; }
.card {
  position: relative; width: min(400px, 100%); padding: 34px 32px 26px; border-radius: 26px; pointer-events: auto;
  background: var(--glass); border: 1px solid var(--edge);
  backdrop-filter: blur(30px) saturate(140%); -webkit-backdrop-filter: blur(30px) saturate(140%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 24px 60px rgba(15, 23, 42, .14), 0 6px 18px rgba(229, 33, 47, .06);
  animation: rise 1s var(--ease) .35s both;
}
.ring { position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; pointer-events: none; overflow: hidden;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.ring::before { content: ""; position: absolute; inset: -60%;
  background: conic-gradient(from 0deg, transparent 0 55%, rgba(229, 33, 47, .9) 68%, rgba(245, 165, 36, .95) 78%, rgba(37, 99, 235, .8) 88%, transparent 100%);
  animation: spin 6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes rise { from { opacity: 0; transform: translateY(26px) scale(.96); filter: blur(10px); } to { opacity: 1; transform: none; filter: none; } }
.card > *:not(.ring) { animation: fade .7s var(--ease) both; }
.card > .brand { animation-delay: .65s; } .card > .field:nth-of-type(1) { animation-delay: .75s; }
.card > .field:nth-of-type(2) { animation-delay: .82s; } .card > .go { animation-delay: .9s; } .card > .foot { animation-delay: .98s; }
@keyframes fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.brand { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.logo { width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center; flex: none;
  background: linear-gradient(145deg, var(--red-2), var(--red)); box-shadow: 0 10px 24px rgba(229, 33, 47, .35); }
.logo svg { width: 27px; height: 27px; }
.brand h1 { margin: 0; font-size: 23px; letter-spacing: 2px; }
.brand p { margin: 2px 0 0; color: var(--muted); font-size: 13px; letter-spacing: 1px; }

/* ---------------- 输入框 ---------------- */
.field { position: relative; display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 14px; margin-bottom: 14px;
  border-radius: 14px; background: rgba(255, 255, 255, .92); border: 1px solid rgba(15, 23, 42, .08); color: #94a3b8;
  transition: border-color .25s, box-shadow .25s, background .25s, color .25s; }
.field svg { width: 20px; height: 20px; flex: none; }
.field input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; font: inherit; font-size: 16px; color: var(--ink); }
.field input::placeholder { color: #a3acba; }
.field:focus-within { background: #fff; border-color: rgba(229, 33, 47, .45); color: var(--red);
  box-shadow: 0 0 0 4px rgba(229, 33, 47, .1), 0 8px 22px rgba(245, 165, 36, .14); }
.eye { border: 0; background: none; color: #94a3b8; padding: 6px; cursor: pointer; display: grid; place-items: center; border-radius: 8px; }
.eye:hover, .eye.on { color: var(--blue); }
.err { min-height: 20px; margin: 2px 2px 10px; font-size: 13px; color: var(--red); }

/* ---------------- 按钮 ---------------- */
.go { position: relative; width: 100%; height: 54px; border: 0; border-radius: 15px; cursor: pointer; overflow: hidden;
  font: inherit; font-size: 17px; font-weight: 700; letter-spacing: 4px; color: #fff;
  background: linear-gradient(110deg, #ff4d5a 0%, #e5212f 45%, #f08a24 100%); background-size: 180% 100%;
  box-shadow: 0 12px 26px rgba(229, 33, 47, .32); transition: transform .2s var(--ease), box-shadow .2s, background-position .6s; }
.go:hover { transform: translateY(-1px); background-position: 100% 0; box-shadow: 0 16px 32px rgba(229, 33, 47, .38); }
.go:active { transform: translateY(1px) scale(.99); }
.shine { position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent); animation: shine 3.2s ease-in-out 1.6s infinite; }
@keyframes shine { 0% { left: -60%; } 45%, 100% { left: 130%; } }
.spin { display: none; position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px;
  border: 2.5px solid rgba(255, 255, 255, .45); border-top-color: #fff; border-radius: 50%; animation: spin .8s linear infinite; }
.go.busy span { visibility: hidden; } .go.busy .spin { display: block; } .go.busy { pointer-events: none; }

.foot { display: flex; justify-content: center; gap: 6px; margin-top: 18px; font-size: 13px; color: var(--muted); }
.foot button { border: 0; background: none; padding: 0; font: inherit; color: var(--blue); font-weight: 600; cursor: pointer; }

/* ---------------- 状态动效 ---------------- */
.card.shake { animation: shake .45s var(--ease); }
@keyframes shake { 20% { transform: translateX(-10px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(3px); } }
.card.ok { animation: leave .7s var(--ease) forwards; }
@keyframes leave { to { opacity: 0; transform: translateY(-18px) scale(.94); filter: blur(8px); } }
body.ok::after { content: ""; position: fixed; inset: 0; background: radial-gradient(circle at 50% 50%, #fff 0%, rgba(255, 255, 255, .9) 40%, #f7f9fc 100%);
  animation: flash .8s ease-out .25s both; }
@keyframes flash { from { opacity: 0; } to { opacity: 1; } }

#toast { position: fixed; left: 50%; top: 22px; transform: translate(-50%, -140%); padding: 10px 20px; border-radius: 999px;
  background: rgba(28, 34, 48, .92); color: #fff; font-size: 14px; box-shadow: 0 10px 24px rgba(15, 23, 42, .2);
  opacity: 0; visibility: hidden; transition: transform .45s var(--ease), opacity .3s, visibility .45s; z-index: 10; pointer-events: none; }
#toast.show { transform: translate(-50%, 0); opacity: 1; visibility: visible; transition: transform .45s var(--ease), opacity .2s; }

/* ---------------- 声音按钮（与开场动画一致） ---------------- */
#sound { position: fixed; right: calc(18px + env(safe-area-inset-right)); bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 5;
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; padding: 0; cursor: pointer;
  background: rgba(255, 255, 255, .85); color: #1e293b; border: 1px solid #e2e8f0; box-shadow: 0 4px 14px rgba(15, 23, 42, .08); }
#sound svg { width: 21px; height: 21px; }
#sound .wave { display: none; } #sound.on .wave { display: inline; } #sound.on .x { display: none; }

/* ---------------- H5：底部抽屉 ---------------- */
@media (max-width: 640px) {
  .auth { place-items: end stretch; padding: 0; }
  .card { width: 100%; border-radius: 26px 26px 0 0; padding: 26px 22px calc(22px + env(safe-area-inset-bottom));
    border-bottom: 0; animation-name: sheet; }
  @keyframes sheet { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: none; } }
  .card::after { content: ""; position: absolute; top: 9px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 4px; background: rgba(15, 23, 42, .15); }
  .brand { margin-bottom: 20px; } .field { height: 50px; } .go { height: 52px; }
  #sound { top: calc(14px + env(safe-area-inset-top)); bottom: auto; right: 14px; }
}
@media (prefers-reduced-motion: reduce) { .card, .card > *, .ring::before, .shine { animation: none !important; } }