@font-face{font-family:"Starboard Display";font-style:normal;font-weight:900;font-display:swap;src:url("/assets/login/fonts/notoserifsc-900-6cb1f5baa36f.woff2") format("woff2")}
@font-face{font-family:"Starboard Round";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/login/fonts/zcoolkuaile-400-ea5289515d23.woff2") format("woff2")}
@font-face{font-family:"Starboard Mono";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/login/fonts/ibmplexmono-400-f6c0be48313e.woff2") format("woff2")}
@font-face{font-family:"Starboard Mono";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/login/fonts/ibmplexmono-500-c4ad59939bca.woff2") format("woff2")}

/* 布局:全屏夜空画布在底;北斗绕「枢」旋转,粒子在枢点聚成「星枢」;登录卡片落在字下方 */
:root {
  --sky: #01030a;        /* 夜空底色 */
  --deep: #0b0f3a;       /* 卡片底 */
  --ice: #cfe6ff;        /* 星光/主文字 */
  --mist: #8fa9cc;       /* 次要文字 */
  --accent: #3d8bff;     /* 按钮主色 */
  --accent-hi: #7cc0ff;  /* 高光 */
  --warn: #ffb86b;       /* 未开通提示 */
  --line: rgba(160, 190, 255, 0.2);
  --font-display: "Starboard Display", "Songti SC", "STSong", serif;
  --font-ui: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
  --font-round: "Starboard Round", "YouYuan", "幼圆", "Yuanti SC", "PingFang SC", sans-serif;
  --font-mono: "Starboard Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --zone: 46vh;
  color-scheme: dark;
}
html, body { height: 100%; margin: 0; }
body {
  background: var(--sky);
  color: var(--ice);
  font-family: var(--font-ui);
  overflow-x: hidden;
}
#sky { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.shell {
  position: relative; z-index: 1;
  min-height: 100%;
  box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center;
  padding-top: var(--zone);
  padding-bottom: 72px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  gap: 14px;
}
.tagline {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--mist);
  margin: 0;
  opacity: 0; transform: translateY(6px);
  transition: opacity .9s ease, transform .9s ease;
}
.ready .tagline { opacity: 1; transform: none; }

.panel {
  opacity: 0; transform: translateY(14px); visibility: hidden;
  transition: opacity .9s ease, transform .9s ease, visibility 0s linear .9s;
  width: min(380px, 100%);
  box-sizing: border-box;
  padding: 26px 26px 20px;
  background: color-mix(in srgb, var(--deep) 62%, transparent);
  border: 1px solid var(--line);
  border-radius: 14px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: flex; flex-direction: column; gap: 14px;
}
.ready .panel { opacity: 1; transform: none; visibility: visible; transition: opacity .9s ease .15s, transform .9s ease .15s; }
.skip {
  position: fixed; z-index: 2;
  right: max(16px, env(safe-area-inset-right, 0px));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  appearance: none; background: transparent; cursor: pointer;
  border: 1px solid var(--line); border-radius: 8px;
  color: var(--mist); font: 12px/1 var(--font-ui); padding: 8px 12px;
  transition: opacity .4s ease;
}
.skip:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 2px; }
.ready .skip { opacity: 0; pointer-events: none; }
.panel h2 { margin: 0; text-align: center; font-size: 20px; font-weight: 600; letter-spacing: .04em; }
.panel .hint { margin: 0; font-size: 13px; line-height: 1.7; color: var(--mist); }

.btn {
  appearance: none; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  height: 46px; border-radius: 10px;
  font: 600 15px/1 var(--font-ui); letter-spacing: .06em;
  color: #fff;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 88%, white), var(--accent));
  box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset, 0 8px 28px -10px var(--accent);
  transition: transform .15s ease, box-shadow .25s ease, filter .25s ease;
}
.btn:hover { box-shadow: 0 0 0 1px rgba(255,255,255,.14) inset, 0 10px 34px -8px var(--accent-hi); filter: brightness(1.08); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 3px; }
.btn[disabled] { cursor: progress; filter: saturate(.7) brightness(.9); }
.btn svg { width: 18px; height: 18px; flex: none; }
.spin { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.status { margin: 0; min-height: 1.6em; font-size: 13px; line-height: 1.6; color: var(--mist); }
.status.warn { color: var(--warn); }
.panel footer {
  border-top: 1px solid var(--line);
  padding-top: 12px;
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font-size: 12px; color: var(--mist);
}
.panel footer .mono { font-family: var(--font-mono); }


@media (max-width: 480px) {
  .panel { padding: 22px 20px 18px; }
}