/* ============================================================
 * pk-login.css — 统一透明胶囊登录组件（PTE 落地页）
 * 用法：
 *   <link rel="stylesheet" href="assets/pk-login.css">
 *   <div id="pkLogin" data-pk-theme="cream"></div>
 *   <script src="assets/pk-login.js"></script>
 *   <script>PkLogin.initGated('#pkLogin', { theme:'cream', target:'practice.html' });</script>
 *
 * 设计原则：同一套透明玻璃胶囊，自动适配深浅背景。
 * 浅色主题使用深色文字 + 更实一些的白色玻璃；
 * 深色主题使用白色文字 + 更透的玻璃。
 * ============================================================ */

/* 默认 = 深色背景主题（白字+高透玻璃） */
.pk-login {
  --pk-accent: #f472b6;
  --pk-accent-ink: #fff;

  --pk-ink: #fff;
  --pk-ink-soft: rgba(255,255,255,.85);
  --pk-ink-muted: rgba(255,255,255,.65);
  --pk-placeholder: rgba(255,255,255,.6);
  --pk-err: #ff9a8b;

  --pk-pill-bg: rgba(255,255,255,.16);
  --pk-pill-border: rgba(255,255,255,.28);
  --pk-pill-divider: rgba(255,255,255,.25);
  --pk-pill-shadow: 0 12px 40px rgba(0,0,0,.12);

  --pk-claim-bg: rgba(255,255,255,.13);
  --pk-claim-border: rgba(255,255,255,.22);
  --pk-claim-input-bg: rgba(255,255,255,.12);
  --pk-claim-input-border: rgba(255,255,255,.2);

  --pk-warn: #ffd66e;
  --pk-warn-bg: rgba(255,214,110,.12);
  --pk-warn-border: rgba(255,214,110,.38);
}

/* 浅色背景主题（深字+更实的白色玻璃，保证可读性） */
.pk-login[data-pk-theme="cream"] {
  --pk-accent: #2f4a3c; --pk-accent-ink: #fff;
  --pk-ink: #2f2119;
  --pk-ink-soft: rgba(47,33,25,.82);
  --pk-ink-muted: rgba(47,33,25,.58);
  --pk-placeholder: rgba(47,33,25,.42);
  --pk-err: #b53d2f;
  --pk-pill-bg: rgba(255,255,255,.50);
  --pk-pill-border: rgba(47,33,25,.11);
  --pk-pill-divider: rgba(47,33,25,.15);
  --pk-pill-shadow: 0 12px 40px rgba(47,33,25,.12);
  --pk-claim-bg: rgba(255,255,255,.56);
  --pk-claim-border: rgba(47,33,25,.09);
  --pk-claim-input-bg: rgba(255,255,255,.70);
  --pk-claim-input-border: rgba(47,33,25,.13);
}
.pk-login[data-pk-theme="toonhub"] {
  --pk-accent: #ff7a59; --pk-accent-ink: #fff;
  --pk-ink: #3d2218;
  --pk-ink-soft: rgba(61,34,24,.82);
  --pk-ink-muted: rgba(61,34,24,.58);
  --pk-placeholder: rgba(61,34,24,.42);
  --pk-err: #b53d2f;
  --pk-pill-bg: rgba(255,255,255,.50);
  --pk-pill-border: rgba(61,34,24,.11);
  --pk-pill-divider: rgba(61,34,24,.15);
  --pk-pill-shadow: 0 12px 40px rgba(61,34,24,.12);
  --pk-claim-bg: rgba(255,255,255,.56);
  --pk-claim-border: rgba(61,34,24,.09);
  --pk-claim-input-bg: rgba(255,255,255,.70);
  --pk-claim-input-border: rgba(61,34,24,.13);
}
.pk-login[data-pk-theme="dreamcore"] {
  --pk-accent: #e26d9c; --pk-accent-ink: #fff;
  --pk-ink: #3d1f2d;
  --pk-ink-soft: rgba(61,31,45,.82);
  --pk-ink-muted: rgba(61,31,45,.58);
  --pk-placeholder: rgba(61,31,45,.42);
  --pk-err: #b53d2f;
  --pk-pill-bg: rgba(255,255,255,.50);
  --pk-pill-border: rgba(61,31,45,.11);
  --pk-pill-divider: rgba(61,31,45,.15);
  --pk-pill-shadow: 0 12px 40px rgba(61,31,45,.12);
  --pk-claim-bg: rgba(255,255,255,.56);
  --pk-claim-border: rgba(61,31,45,.09);
  --pk-claim-input-bg: rgba(255,255,255,.70);
  --pk-claim-input-border: rgba(61,31,45,.13);
}

/* 深色背景主题（白字+高透玻璃） */
.pk-login[data-pk-theme="nexus"] { --pk-accent:#38e1c8; --pk-accent-ink:#06231f; }
.pk-login[data-pk-theme="skybridge"] { --pk-accent:#6cc6ff; --pk-accent-ink:#06223a; }
.pk-login[data-pk-theme="velorah"] { --pk-accent:#d9a441; --pk-accent-ink:#2a1f10; }
.pk-login[data-pk-theme="mindloop"] { --pk-accent:#8b7bff; --pk-accent-ink:#fff; }
.pk-login[data-pk-theme="futuristic"] { --pk-accent:#36d1ff; --pk-accent-ink:#042330; }

/* 浅色主题下的警告色（深琥珀，白玻璃上可读） */
.pk-login[data-pk-theme="cream"],
.pk-login[data-pk-theme="toonhub"],
.pk-login[data-pk-theme="dreamcore"] {
  --pk-warn: #8a6d1a;
  --pk-warn-bg: rgba(138,109,26,.08);
  --pk-warn-border: rgba(138,109,26,.3);
}

.pk-login { font-family: inherit; }

/* 容器在父级里占满可用宽度并居中（修复 flex 交叉轴 items-center 下
   容器退化成 fit-content、胶囊条被压缩导致密码框文字偏左的问题） */
.pk-login:not(.pk-login--overlay) { width: 100%; max-width: 580px; margin: 0 auto; }

/* 透明胶囊条 */
.pk-login-pill { max-width: 580px; margin: 0 auto; }
.pk-pill-bar {
  display: flex; align-items: center; gap: 2px;
  background: var(--pk-pill-bg);
  border: 1px solid var(--pk-pill-border);
  border-radius: 999px;
  padding: 5px;
  backdrop-filter: blur(18px) saturate(150%);
  box-shadow: var(--pk-pill-shadow);
}
.pk-pill-bar input {
  flex: 1 1 0; min-width: 0;
  background: transparent; border: none; outline: none;
  padding: 12px 16px; font-size: 15px; color: var(--pk-ink); font-family: inherit;
  text-align: center;
}
.pk-pill-bar input::placeholder { color: var(--pk-placeholder); }
.pk-pill-bar input#pkPw { border-left: 1px solid var(--pk-pill-divider); }
.pk-pill-submit {
  flex: 0 0 auto; border: none; border-radius: 999px; cursor: pointer;
  padding: 12px 24px; font-size: 15px; font-weight: 700;
  color: var(--pk-accent-ink); background: var(--pk-accent);
  font-family: inherit; white-space: nowrap; transition: filter .15s, transform .1s;
}
.pk-pill-submit:hover { filter: brightness(1.08); }
.pk-pill-submit:active { transform: translateY(1px); }
.pk-pill-submit:disabled { opacity: .65; cursor: default; }
.pk-pill-err {
  min-height: 18px; font-size: 13px; color: var(--pk-err); margin: 6px 0 0 16px;
  text-shadow: 0 1px 3px rgba(0,0,0,.08);
}

/* 自助领码 */
.pk-pill-claim-toggle {
  display: table; margin: 14px auto 0; background: none; border: none;
  color: var(--pk-ink); font-size: 13.5px; font-weight: 600; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
  text-shadow: 0 1px 4px rgba(0,0,0,.08); font-family: inherit;
}
.pk-pill-claim-toggle:hover { opacity: .85; }
.pk-pill-claim {
  display: none; max-width: 460px; margin: 14px auto 0;
  background: var(--pk-claim-bg);
  border: 1px solid var(--pk-claim-border);
  border-radius: 18px;
  padding: 18px; color: var(--pk-ink-soft); text-align: center;
  backdrop-filter: blur(16px) saturate(150%);
  box-shadow: var(--pk-pill-shadow);
}
.pk-pill-claim.pk-show { display: block; }
.pk-pill-claim p { font-size: 13px; line-height: 1.6; margin: 0 0 10px; color: var(--pk-ink-soft); }
.pk-pill-claim-row { display: flex; gap: 8px; margin: 10px 0; }
.pk-pill-claim-row input {
  flex: 1; min-width: 0; background: var(--pk-claim-input-bg);
  border: 1px solid var(--pk-claim-input-border); border-radius: 12px;
  padding: 10px 12px; font-size: 14px; color: var(--pk-ink); outline: none; font-family: inherit;
}
.pk-pill-claim-row input::placeholder { color: var(--pk-placeholder); }
.pk-pill-claim-row button {
  flex: 0 0 auto; border: none; border-radius: 12px; cursor: pointer;
  padding: 10px 18px; font-size: 14px; font-weight: 700;
  color: var(--pk-accent-ink); background: var(--pk-accent); font-family: inherit;
}
.pk-pill-claimed {
  font-size: 20px; font-weight: 700; letter-spacing: .05em;
  color: var(--pk-ink); padding: 8px 0 2px; word-break: break-all;
  text-align: center;
  width: 100%;
}
.pk-pill-note { font-size: 11.5px; color: var(--pk-ink-muted); line-height: 1.5; margin: 10px 0 0; }
.pk-pill-warn {
  font-size: 12px; line-height: 1.6; text-align: center;
  color: var(--pk-warn); background: var(--pk-warn-bg);
  border: 1px solid var(--pk-warn-border); border-radius: 10px;
  padding: 8px 10px; margin: 10px 0 0;
}
.pk-pill-warn b { font-weight: 700; }
.pk-pill-claim .pk-pill-err { margin: 8px 0 0; text-align: center; }

/* 返回（浮层模式） */
.pk-pill-back {
  display: block; margin: 16px auto 0; background: none;
  border: 1px solid var(--pk-pill-border); color: var(--pk-ink); font-size: 13px;
  padding: 8px 18px; border-radius: 999px; cursor: pointer; font-family: inherit;
}
.pk-pill-back:hover { background: var(--pk-pill-bg); }

/* 浮层模式（保留但默认不用） */
.pk-login--overlay {
  position: fixed; inset: 0; z-index: 100300;
  display: flex; align-items: center; justify-content: center;
  background: rgba(20,26,22,.55); backdrop-filter: blur(6px);
}

/* 统一黑色按钮（用户 2026-08-15 选定）：覆盖所有主题原强调色，
   进入 / 领取 按钮统一为黑底白字 */
.pk-login,
.pk-login[data-pk-theme] {
  --pk-accent: #1A1A1A;
  --pk-accent-ink: #fff;
}