/* 登录 / 注册：独立页面，没有侧栏和顶栏。
   外壳由 common/header.htm 里 $klp_auth 那条分支输出（.klp-app-auth），
   这里只管把内容竖直居中、顶栏收窄成一条「logo + 返回首页」。 */

.klp-app-auth { min-height: 100vh; }
.klp-auth-top { flex: none; height: var(--top-h); display: flex; align-items: center; gap: 4px; padding: 0 28px; }
.klp-auth-top .klp-brand { padding-left: 0; }
.klp-auth-main { display: flex; justify-content: center; padding: 0 24px 24px; }
/* Discuz 的 #wp 在这里只是个透明壳子，别让它吃掉居中。
   竖直居中用 margin auto 而不是 align-items: center——内容比屏幕高时前者不会把顶部顶出可视区。
   **选择器必须带上 #wp**：discuz.css 里有一条 `.wp, #wp { width:auto; margin:0 }`，
   ID 选择器压过 `.klp-auth-main > .wp`，只写类名的话这条规则一个属性都落不了地，
   卡片会被拉满一屏、贴着顶栏（这就是之前「没居中」的原因）。 */
.klp-auth-main > .wp, .klp-auth-main > #wp { width: 100%; display: flex; justify-content: center; margin-block: auto; }
.klp-auth-foot { justify-content: center; border-top: 0; padding: 12px 24px 28px; }

.pg_logging .klp-rail, .pg_register .klp-rail { display: none; }
/* flex-start：默认的 stretch 会把 #main_message 这层透明壳子拉满，卡片底下空出一大片 */
.klp-auth-page { display: flex; justify-content: center; align-items: flex-start; width: 100%; }
.klp-auth { width: 400px; max-width: 100%; padding: 36px 32px 28px; border-radius: 20px; box-shadow: 0 12px 40px rgba(17,20,19,.06); }
html[data-theme="dark"] .klp-auth { box-shadow: none; }
.klp-auth-body { display: flex; flex-direction: column; }
.klp-auth-head { display: flex; flex-direction: column; gap: 4px; margin-bottom: 18px; }
.klp-auth-head .flb { padding: 0; margin: 0; height: auto; border: 0; background: none; display: flex; align-items: center; justify-content: space-between; }
.klp-auth-head .flb em { font-style: normal; font-size: 22px; font-weight: 600; color: var(--text); }
.klp-auth-head .flb em.onerror, .klp-auth-head .flb em.xi1 { font-size: 14px; font-weight: 500; color: var(--danger); }
.klp-auth-sub { margin: 0; font-size: 13.5px; color: var(--text-3); }
.klp-auth-sub a { color: var(--text); font-weight: 500; }
.klp-auth-form { display: flex; flex-direction: column; gap: 14px; }
.klp-auth-lbl { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.klp-auth-lbl label { font-size: 13px; font-weight: 500; color: var(--text-2); }
.klp-auth-select { height: 26px; padding: 0 6px; border: 0; border-radius: 7px; background: var(--hover); color: var(--text-2); font-size: 12px; }
.klp-auth-form .k-inp { height: 42px; border-radius: 11px; }
.klp-auth-more summary { cursor: pointer; list-style: none; width: max-content; }
.klp-auth-more summary::-webkit-details-marker { display: none; }
.klp-auth-more[open] { display: flex; flex-direction: column; gap: 10px; }
.klp-auth-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-3); }
.klp-auth-submit { width: 100%; margin-top: 4px; }
.klp-auth-back { align-self: center; }
.klp-auth-or { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--text-3); margin-top: 4px; }
.klp-auth-or::before, .klp-auth-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.klp-auth-methods { display: flex; flex-wrap: wrap; gap: 8px; }
.klp-auth-methods > p, .klp-auth-methods > div { display: contents; margin: 0; }
.klp-auth-methods img { max-height: 24px; vertical-align: middle; }
/* 由 klp_login_methods() 转换出来的统一按钮 */
.klp-lm { flex: 1 1 0; min-width: 96px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 12px; border-radius: 11px; border: 1px solid var(--line); background: var(--surface); color: var(--text-2); font-size: 13px; font-weight: 500; transition: background .15s ease, border-color .15s ease; }
.klp-lm:hover { background: var(--hover); color: var(--text); }
.klp-lm .k-ic { color: var(--text-3); }
/* QQ 用官方那只企鹅的图（static/qq.png），悬停时按钮带一点 QQ 蓝 */
.klp-lm-qq img { height: 20px; width: auto; display: block; }
.klp-lm-qq:hover { border-color: #12B7F5; background: color-mix(in srgb, #12B7F5 8%, var(--surface)); }
.klp-lm-wx:hover .k-ic { color: #1AAD19; }
.klp-lm-sms:hover .k-ic { color: var(--ink); }
.klp-auth-sec > div { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* 弹窗里的登录 */
.fwin .klp-auth-body { width: 360px; padding: 28px 28px 20px; }
.fwin .klp-auth-head .flb { padding: 0; }

/* 注册页：结构用 template/klpbbs_pc/member/register.htm（从原版抄的 .rfm 表格，
   register.js 靠 tip_xxx / chk_xxx 和表单里 input 的先后顺序工作，不能改），
   这里只把表格拆成单列，外观跟登录卡片对齐。
   QQ 互联的「完善资料 / 绑定已有账号」（member.php?mod=connect）套的是同一份模板，
   但 member_connect_register.php 把 regname 改成了 connect，body 类是 pg_connect，所以两个类一起写 */
:is(.pg_register, .pg_connect) .klp-auth { width: 460px; }
:is(.pg_register, .pg_connect) #returnmessage4 { margin: 0; font-size: 13px; color: var(--danger); }
:is(.pg_register, .pg_connect) #returnmessage4:empty { display: none; }
:is(.pg_register, .pg_connect) #reginfo_a { display: flex; flex-direction: column; gap: 14px; }
:is(.pg_register, .pg_connect) .rfm { border: 0; margin: 0; padding: 0; width: auto; background: none; }
:is(.pg_register, .pg_connect) .rfm table, :is(.pg_register, .pg_connect) .rfm tbody, :is(.pg_register, .pg_connect) .rfm tr { display: block; width: 100%; }
:is(.pg_register, .pg_connect) .rfm th, :is(.pg_register, .pg_connect) .rfm td { display: block; width: auto; padding: 0; text-align: left; }
:is(.pg_register, .pg_connect) .rfm th { margin-bottom: 6px; font-size: 13px; font-weight: 500; color: var(--text-2); }
:is(.pg_register, .pg_connect) .rfm th .rq { color: var(--danger); margin-right: 2px; }
:is(.pg_register, .pg_connect) .rfm .px { width: 100%; height: 42px; border-radius: 11px; }
/* 校验没过时 register.js 会给输入框补一个 er */
:is(.pg_register, .pg_connect) .rfm .px.er { border-color: var(--danger); }

/* 提示改回正常文档流。原版把 .p_tip / .p_chk 画成浮在字段右边的定位块
   （风格编译出来的 common.css 里是 position:absolute + 定宽 390px），那是给两列表单用的；
   单列布局下它们会原地压在下面的说明文字上，这就是注册页「提示重叠」的来源。 */
:is(.pg_register, .pg_connect) .rfm td.tipcol { display: block; }
:is(.pg_register, .pg_connect) .rfm .p_tip,
:is(.pg_register, .pg_connect) .rfm .p_chk { position: static; width: auto; padding-left: 0; background: none; margin-top: 6px; font-size: 12px; line-height: 1.6; }
:is(.pg_register, .pg_connect) .rfm .p_tip { color: var(--text-3); }
:is(.pg_register, .pg_connect) .rfm .p_chk { color: var(--danger); font-weight: 400; font-family: inherit; }
:is(.pg_register, .pg_connect) .rfm .p_chk:empty { display: none; }
/* 校验通过时 register.js 给 td.tipcol 加 .p_right。原版画的是一张 check_right.gif，
   本风格下那个地址编译成了 http:///static/... 是坏的，改成一行文字 */
:is(.pg_register, .pg_connect) .rfm .p_right { background: none; width: auto; }
:is(.pg_register, .pg_connect) .rfm .p_right::after { content: "✓ 可以使用"; display: block; margin-top: 6px; font-size: 12px; color: var(--ok); }

/* 邮箱补全菜单（p_pop）用 #emailmore 当定位锚点，所以它得留在输入框正下方；
   原样式是 position:absolute，在单列里会压住下一行，改成不占高度的锚点 */
:is(.pg_register, .pg_connect) #emailmore { position: static; display: block; height: 0; overflow: hidden; }

/* 验证码那一格：输入框 + 「换一个」一行，「输入下图中的字符」和图片另起一行。
   这段 HTML 是 misc.php 的 updateseccode 现拼的，输入框宽度写在行内 style 里，不用去动 */
:is(.pg_register, .pg_connect) #checkseccodeverify_cS { margin-left: 6px; }
:is(.pg_register, .pg_connect) #vseccode_cS { display: block; margin-top: 10px; font-size: 12px; color: var(--text-3); }
:is(.pg_register, .pg_connect) #vseccode_cS img { margin-top: 6px; border-radius: 8px; cursor: pointer; }
:is(.pg_register, .pg_connect) .rfm td > a.xi2 { margin-left: 8px; font-size: 13px; }
.klp-reg-note { margin: 8px 0 0; font-size: 12px; color: var(--text-3); line-height: 1.7; }
:is(.pg_register, .pg_connect) #layer_reginfo_b { display: flex; flex-direction: column; gap: 12px; }
.klp-reg-agree { display: flex; align-items: center; gap: 6px; }
.klp-reg-agree .klp-auth-check { margin: 0; }
.klp-reg-tipbtn { display: inline-flex; color: var(--text-3); }
.klp-reg-tipbtn:hover { color: var(--text); }
.klp-reg-rule { width: min(640px, 72vw); max-height: 340px; overflow: auto; }

/* QQ 互联页里 qqconnect 插件（template/module.htm 的 register_bottom 钩子）加进来的东西：
   用脚本把 #main_hnav 换成一块 760px 定宽的 .loggingbox（欢迎语 + 「创建新账号 / 已有本站账号」两个页签），
   再在注册表单后面追加 .b1lr 里的绑定表单（<center> 居中、裸 input.txt）。
   插件模板新旧两个风格共用、还带着一段浅色写死的 <style>，不去改它，这里把它收进卡片：
   页签做成分段控件，绑定表单拆成跟注册表单一样的单列。页签文字颜色是行内 style，在 discuz.css 的 klp-fix 层里压 */
.pg_connect .loggingbox { width: auto; margin: 0 0 18px; }
.pg_connect .loging_tit { border: 0; }
.pg_connect .loging_tit > .z { float: none; }
/* 欢迎语带着 .mbn（Discuz 写的 margin-bottom: 5px !important），和页签的间距加在页签的 margin-top 上 */
.pg_connect .loggingbox .welcome { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.4; color: var(--text); }
.pg_connect .loggingbox .welcome strong { font-weight: inherit; }
.pg_connect .loggingbox .welcome span { display: block; margin-top: 4px; font-size: 13.5px; font-weight: 400; color: var(--text-3); }
.pg_connect .loggingbox .tb { float: none; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; height: auto; margin: 12px 0 0; padding: 3px; border: 0; border-radius: var(--r-md); background: var(--hover); }
.pg_connect .loggingbox .tb li { float: none; height: auto; margin: 0; border: 0; background: none; }
.pg_connect .loggingbox .tb a { display: flex; align-items: center; justify-content: center; height: 34px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; font-size: 13.5px; font-weight: 500; line-height: 1; }
.pg_connect .loggingbox .tb .a a { background: var(--surface); box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 0 0 1px var(--line); }
/* discuz.css 给 .tb 的选中项画了一条 ::after 下划线，分段样式不要 */
.pg_connect .loggingbox .tb .a a::after { content: none; }
.pg_connect .b1lr .bm_c { padding: 0; }
.pg_connect .b1lr center { display: flex; flex-direction: column; gap: 6px; text-align: left; }
/* 每格是「标签文字 + 输入框」，「安全提问:」「答案:」是裸文本节点，竖排 flex 后也会自成一行；
   除第一格外行内都写了 margin-top: 8px，加上 gap 正好是注册表单的 14px 行距 */
.pg_connect .b1lr center > div { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 500; color: var(--text-2); }
.pg_connect .b1lr input.txt, .pg_connect .b1lr center select { width: 100%; height: 42px; padding: 0 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); color: var(--text); font: 14px var(--font); box-sizing: border-box; outline: none; }
.pg_connect .b1lr input.txt::placeholder { color: var(--text-3); }
.pg_connect .b1lr input.txt:focus, .pg_connect .b1lr center select:focus { border-color: var(--brand); box-shadow: var(--ring); }
.pg_connect .b1lr br { display: none; }
.pg_connect .b1lr button.pn { width: 100%; height: 44px; margin: 18px 0 0; border-radius: 12px; font-size: 15px; }

/* 开放平台（klpbbs_api）的 OAuth 授权页：插件模板 center_klp.htm 设 $klp_auth_page 借用上面这套独立页外壳。
   顶上只放申请授权的应用图标，下面依次是当前账号、授权范围、按钮 */
.klp-oauth { width: 420px; display: flex; flex-direction: column; gap: 18px; }
.klp-oauth-pair { display: flex; align-items: center; justify-content: center; gap: 8px; padding-top: 4px; }
.klp-oauth-logo { width: 56px; height: 56px; flex: none; display: grid; place-items: center; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background: var(--surface); color: var(--text-3); }
.klp-oauth-logo img { width: 100%; height: 100%; object-fit: contain; }
/* 各应用登记的 logo 都是透明底的横版字标（4:1 上下），字有白有黑，放白底或深底总有一种看不见，
   原版授权页垫的是品牌色，两种字都读得出，这里沿用；宽度跟着 logo 走，不裁成方块 */
.klp-oauth-app { width: auto; height: auto; min-width: 32px; min-height: 40px; max-width: 200px; padding: 8px 12px; background: var(--brand); border-color: transparent; color: #fff; }
.klp-oauth-app img { width: auto; max-width: 100%; height: 40px; }

.klp-oauth-head { text-align: center; display: flex; flex-direction: column; gap: 6px; }
.klp-oauth-head h1 { margin: 0; font-size: 19px; font-weight: 500; line-height: 1.5; color: var(--text-2); }
.klp-oauth-head h1 b { font-weight: 600; color: var(--text); }
.klp-oauth-head .k-mono { color: var(--text-2); font-size: 12.5px; }

.klp-oauth-user { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-md); background: var(--hover); }
.klp-oauth-who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.klp-oauth-who b { font-size: 14px; font-weight: 600; color: var(--text); }
.klp-oauth-user .k-more-link:hover { color: var(--text); }

.klp-oauth-label { margin: 0 0 8px; font-size: 12px; font-weight: 500; color: var(--text-3); }
.klp-oauth-scope ul { margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: var(--r-md); }
.klp-oauth-scope li { display: flex; align-items: center; gap: 10px; padding: 11px 14px; font-size: 13.5px; color: var(--text); }
.klp-oauth-scope li + li { border-top: 1px solid var(--line); }
.klp-oauth-scope li .k-ic { color: var(--ink); }
.klp-oauth-note { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; font-size: 12px; color: var(--text-3); }
.klp-oauth-note .k-ic { flex: none; }

.klp-oauth-act { display: grid; grid-template-columns: 1fr 1.6fr; gap: 10px; margin-top: 2px; }
.klp-oauth-act .k-btn { justify-content: center; }
.klp-oauth-foot { margin: -4px 0 0; text-align: center; font-size: 12px; color: var(--text-3); }
.klp-oauth-foot a { color: var(--ink); margin-left: 2px; }