/* 玩家前台共享 UI — 素净易读：灰白底、单强调色、字重克制 */
:root {
  --ga-muted: #f2f2f3;
  --ga-card: #ffffff;
  --ga-line: #e4e4e7;
  --ga-line-2: #d4d4d8;
  --ga-txt-1: #18181b;
  --ga-txt-2: #3f3f46;
  --ga-txt-3: #71717a;
  --ga-indigo: #3f5f7a;
  --ga-indigo-2: #547896;
  --ga-green: #3d7a5a;
  --ga-amber: #9a7040;
  --ga-red: #b54a4a;
  --ga-radius: 4px;
  --ga-radius-sm: 3px;
  --ga-shadow-sm: none;
  --ga-font: "Microsoft YaHei UI", "PingFang SC", "Segoe UI", "Noto Sans SC", sans-serif;
}

html, body.player-page { height: 100%; }
body.player-page {
  margin: 0;
  font-family: var(--ga-font);
  font-size: 14px;
  font-weight: 400;
  color: var(--ga-txt-1);
  background: var(--ga-muted);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.player-page .app { min-height: 100%; display: flex; flex-direction: column; }

/* 顶栏 */
body.player-page .topbar {
  background: #fff;
  border-bottom: 1px solid var(--ga-line);
  padding: 0 20px;
  height: 50px;
  display: flex;
  align-items: center;
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 50;
}
body.player-page .topbar .brand { display: flex; align-items: center; gap: 10px; }
body.player-page .topbar .brand .bm {
  width: 26px; height: 26px; border-radius: 3px;
  background: var(--ga-indigo);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 12px;
}
body.player-page .topbar .brand .bt {
  font-weight: 600; font-size: 14px; color: var(--ga-txt-1); letter-spacing: 0;
}
body.player-page .topbar .brand .bs {
  font-size: 12px; color: var(--ga-txt-3); font-weight: 400;
}
body.player-page .scope-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: 3px; font-size: 12px; font-weight: 500;
  color: var(--ga-txt-2); background: #f4f4f5; border: 1px solid var(--ga-line);
}
body.player-page .topbar .nav-link,
body.player-page .topbar .nav-btn {
  color: var(--ga-txt-2); text-decoration: none; font-size: 13px;
  padding: 5px 11px; border-radius: 3px; border: 1px solid var(--ga-line);
  background: #fff; cursor: pointer; font-family: inherit;
}
body.player-page .topbar .nav-link:hover,
body.player-page .topbar .nav-btn:hover {
  background: #f4f4f5; color: var(--ga-txt-1);
}

/* 登录页 */
body.player-login-page {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding: 24px;
}
.login-shell { width: min(400px, 100%); }
.login-brand { text-align: center; margin-bottom: 18px; }
.login-logo {
  width: 40px; height: 40px; margin: 0 auto 12px; border-radius: 3px;
  background: var(--ga-indigo);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 600;
}
.login-brand h1 {
  margin: 0 0 6px; font-size: 18px; color: var(--ga-txt-1); font-weight: 600;
}
.login-brand p { margin: 0; font-size: 13px; color: var(--ga-txt-3); line-height: 1.6; }
body.player-page .ck-panel.ck-login { margin: 0; }
body.player-login-page #siteLicenseBanner { margin: 0 0 12px; }

.topbar .spacer { flex: 1; }
.topbar .nav-link {
  color: var(--ga-txt-2);
  text-decoration: none;
  font-size: 13px;
  padding: 5px 11px;
  border-radius: 3px;
  border: 1px solid var(--ga-line);
  background: #fff;
  white-space: nowrap;
}
.topbar .nav-link:hover {
  background: #f4f4f5;
  color: var(--ga-txt-1);
}
.topbar .chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 3px;
  font-size: 12px;
  color: var(--ga-txt-2);
  background: #f4f4f5;
  border: 1px solid var(--ga-line);
  white-space: nowrap;
  font-weight: 400;
}
.topbar .chip .d {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ga-txt-3);
}
.topbar .chip.ok {
  background: #f3f6f4;
  color: #3d5c48;
  border-color: #d5e0d8;
}
.topbar .chip.ok .d { background: var(--ga-green); }

#siteLicenseBanner {
  margin: 12px 20px 0;
  padding: 10px 12px;
  border-radius: 3px;
  border: 1px solid #e8d0d0;
  background: #faf6f6;
  color: #8a4545;
  font-size: 13px;
  line-height: 1.6;
}

/* 卡密面板 */
body.player-page .ck-panel {
  background: #fff;
  border: 1px solid var(--ga-line);
  border-radius: 4px;
  margin: 12px 20px 0;
  overflow: hidden;
}
body.player-page .ck-panel.verified {
  border-color: #d5e0d8;
  background: #f7faf8;
}
.ck-hd {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--ga-line);
  background: #fafafa;
}
.ck-title {
  font-weight: 600;
  font-size: 13px;
  color: var(--ga-txt-1);
}
body.player-page .ck-panel.verified .ck-title { color: var(--ga-green); }
.ck-expiry {
  margin-left: auto;
  font-size: 12px;
  color: var(--ga-txt-3);
}
.ck-bd { padding: 14px; }
.ck-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.ck-input {
  flex: 1;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--ga-line-2);
  border-radius: 3px;
  font-size: 14px;
  font-family: inherit;
  color: var(--ga-txt-1);
  background: #fff;
  outline: none;
}
.ck-input:focus { border-color: var(--ga-indigo); }
.ck-btn {
  height: 36px;
  padding: 0 16px;
  border: 1px solid var(--ga-indigo);
  border-radius: 3px;
  background: var(--ga-indigo);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.ck-btn:hover { background: var(--ga-indigo-2); border-color: var(--ga-indigo-2); }
.ck-btn:disabled { opacity: .5; cursor: not-allowed; }
.ck-error {
  color: var(--ga-red);
  font-size: 13px;
  margin-top: 8px;
  min-height: 18px;
  line-height: 1.5;
}
.ck-hint {
  color: var(--ga-txt-3);
  font-size: 12px;
  margin-top: 8px;
  line-height: 1.65;
}
.ck-hint a { color: var(--ga-indigo); text-decoration: none; }
.ck-hint a:hover { text-decoration: underline; }
.ck-reset {
  padding: 5px 12px;
  background: #fff;
  border: 1px solid var(--ga-line);
  border-radius: 3px;
  color: var(--ga-txt-2);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
}
.ck-reset:hover { background: #f4f4f5; }
.ck-verified-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
}
.ck-verified-msg {
  flex: 1;
  color: var(--ga-txt-2);
  font-size: 13px;
  line-height: 1.6;
}

/* 弹窗 */
.ga-dialog-mask {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  background: rgba(24, 24, 27, .4);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ga-dialog {
  width: min(420px, calc(100vw - 32px));
  background: #fff;
  border: 1px solid var(--ga-line);
  border-radius: 4px;
  box-shadow: 0 10px 30px rgba(24, 24, 27, .12);
  overflow: hidden;
  font-family: var(--ga-font);
}
.ga-dialog .gd-hd {
  padding: 16px 16px 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.ga-dialog .gd-ic {
  width: 30px;
  height: 30px;
  border-radius: 3px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: var(--ga-indigo);
}
.ga-dialog .gd-ic.ok { background: var(--ga-green); }
.ga-dialog .gd-ic.err { background: var(--ga-red); }
.ga-dialog .gd-ic.warn { background: var(--ga-amber); }
.ga-dialog .gd-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--ga-txt-1);
  line-height: 1.4;
}
.ga-dialog .gd-bd {
  padding: 4px 16px 16px 56px;
  color: var(--ga-txt-2);
  font-size: 13.5px;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
}
.ga-dialog .gd-ft {
  padding: 10px 16px 14px;
  border-top: 1px solid var(--ga-line);
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  background: #fafafa;
}
.ga-dialog .gd-ft .ga-btn {
  height: 34px;
  padding: 0 14px;
  font-size: 13px;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ga-line-2);
  background: #fff;
  color: var(--ga-txt-1);
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  user-select: none;
}
.ga-dialog .gd-ft .ga-btn:hover { background: #f4f4f5; }
.ga-dialog .gd-ft .ga-btn.primary {
  min-width: 72px;
  background: var(--ga-indigo);
  color: #fff;
  border-color: var(--ga-indigo);
}
.ga-dialog .gd-ft .ga-btn.primary:hover {
  background: var(--ga-indigo-2);
  border-color: var(--ga-indigo-2);
}

body.player-page .ck-panel.ck-inline { margin: 0; }

.ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: -0.15em;
  flex-shrink: 0;
  color: currentColor;
}
.ico svg { width: 100%; height: 100%; display: block; }
.ico-sm { width: 14px; height: 14px; }
.ico-md { width: 16px; height: 16px; }
.ico-lg { width: 18px; height: 18px; }
.ico-xl { width: 20px; height: 20px; }
.ico-title { width: 16px; height: 16px; margin-right: 5px; color: var(--ga-txt-3); }
body.player-page .ck-panel.verified .ico-title { color: var(--ga-green); }
.tb-btn .ico, .btn .ico, .ck-btn .ico, .ga-btn .ico { margin-right: 4px; }
.sb-icon.ico { width: 16px; height: 16px; margin-right: 8px; }
.es-icon.ico { width: 32px; height: 32px; margin: 0 auto 8px; color: var(--ga-txt-3); }
.stat-icon.ico { width: 22px; height: 22px; color: var(--ga-txt-3); }
.ga-dialog .gd-ic svg { width: 16px; height: 16px; }
.card-title .ico, .ic-title .ico, .ck-title .ico { margin-right: 5px; vertical-align: -3px; }

@media (max-width: 768px) {
  body.player-page .ck-panel { margin: 12px 12px 0; }
  #siteLicenseBanner { margin: 12px 12px 0; }
  .ck-row { flex-direction: column; align-items: stretch; }
  .ck-btn { width: 100%; }
}