/* =============================================================================
   Clobar 统一登录组件样式（Unified Login Component） — 唯一来源
   =============================================================================
   本文件与 assets/clobar-auth.js 一起，是全平台登录页面的**唯一来源**。

   两层结构：

   第 1 层 @layer clobar-auth-base
       只有独立模块（<html data-clobar-auth-standalone>）才会命中。它是主站
       index.html 里那批被登录壳用到的基础原语（配色变量、.app-shell / .topbar /
       .content / .section / .publish-textarea / .publish-button / .feed-meta …）
       的同值副本，让没有主站整套样式的模块也能长出同一张登录页。
       主站不带这个属性，整层对主站完全惰性；而且它在 @layer 里，任何非分层
       规则都压得住它，不会影响任何既有页面。

   第 2 层（非分层）
       登录页真正的视觉定义：.auth-* 与 .app-shell[data-login-screen] 全部规则。
       这些规则是**从 index.html 原样搬过来**的，index.html 里已删除，不存在第二份。
       以后改登录页外观只改这里，主站、创作中心和后续模块同步生效。

   注意：本文件在 index.html 里通过 <link> 引入，位置在内联 <style> **之后**，
   以保持这些规则原有的"更靠后取胜"级联关系。
   ============================================================================= */

@layer clobar-auth-base {
html[data-clobar-auth-standalone] {
        --primary: #1f8bff;
        --primary-dark: #1473e6;
        --primary-soft: #eaf4ff;
        --bg: #f3f6fb;
        --panel: #ffffff;
        --panel-soft: #edf2f7;
        --text: #1f2a37;
        --muted: #7a8798;
        --line: rgba(18, 36, 60, 0.08);

        /* UI Polish Phase 1 -- design tokens. Values are taken from whichever value was
           already most common for that role across the stylesheet (see the audit report),
           not new sizes -- this is a cleanup/unification pass, not a redesign. 375px and
           430px intentionally share one scale this phase (no fluid/responsive type yet). */
        --fs-caption: 0.68rem;
        --fs-meta: 0.74rem;
        --fs-body: 0.92rem;
        --fs-title: 1.05rem;
        --fs-section: 1.15rem;
        --fs-hero: 1.7rem;
        --fs-h1: 2rem;

        --lh-tight: 1.25;
        --lh-normal: 1.5;
        --lh-loose: 1.7;

        --space-1: 4px;
        --space-2: 8px;
        --space-3: 12px;
        --space-4: 16px;
        --space-5: 24px;

        --radius-sm: 8px;
        --radius-md: 12px;
        --radius-lg: 18px;
        --radius-xl: 24px;

        --card-padding: 12px 14px;
        --section-gap: 22px;
        --feed-gap: 12px;

        --media-cover-ratio: 16 / 9;
      }

html[data-clobar-auth-standalone] * {
        box-sizing: border-box;
      }

html[data-clobar-auth-standalone], html[data-clobar-auth-standalone] body {
        margin: 0;
        min-height: 100%;
        font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
        background: var(--bg);
        color: var(--text);
      }

html[data-clobar-auth-standalone] body {
        display: flex;
        align-items: flex-start;
        justify-content: center;
        min-height: 100vh;
        padding: 24px 0;
      }

html[data-clobar-auth-standalone] .app-shell {
        width: 430px;
        /* Bottom Nav proximity pass: at desktop widths (the <=430px media query already
           gives the shell 100dvh) a flat 560px floor left a big strip of plain body
           background between the shell's rounded bottom edge and the floating .bottom-nav
           on any viewport taller than ~630px. Tying the floor to the viewport instead (body
           contributes 24px top + 24px bottom padding) makes .content's flex:1 fill that
           space the same way it already does on mobile, so the shell's own background
           extends down near the nav. .content's own bottom padding (unchanged) is still
           what keeps real content from being covered by the floating nav -- this only
           changes how far the shell's background reaches, not content layout/height. */
        min-height: calc(100vh - 48px);
        height: auto;
        background: linear-gradient(180deg, #f7fbff 0%, #eef3f8 100%);
        border-radius: 30px;
        box-shadow: 0 24px 48px rgba(24, 82, 148, 0.12);
        overflow: visible;
        position: relative;
        border: 1px solid rgba(255, 255, 255, 0.7);
        display: flex;
        flex-direction: column;
      }

html[data-clobar-auth-standalone] .app-shell[hidden] {
        display: none;
      }

html[data-clobar-auth-standalone] .topbar {
        display: flex;
        align-items: center;
        /* 固定布局铁律（2026-08-28）：顶部导航**永不换行**。
           原来是 flex-wrap:wrap + row-gap:10px —— 一旦某个标签变长到放不下，整排按钮会
           折到第二行、顶栏高度从 70px 涨到 80px+，下面所有内容跟着下移。这正是铁律第 4 条
           明令禁止的"换行撑高导航"。改成 nowrap 之后，空间不足由上面那些固定宽度 + 省略号
           吸收，按钮的行和坐标恒定。 */
        flex-wrap: nowrap;
        /* 顶部留白收紧（2026-08-27）：上 30px / 下 26px 收到 16px / 14px。只动上下，
           左右仍由既有规则（含窄屏媒体查询的 6px）决定，右侧按钮的尺寸和顺序一律未动。
           .topbar 本身是 align-items:center，所以 Logo+名称与右侧搜索/EN/加好友/＋/九宫格
           仍然自动共用同一条视觉中线，不需要任何单独补偿。 */
        padding: 16px 10px 14px;
        background: rgba(255, 255, 255, 0.7);
        backdrop-filter: blur(8px);
        border-bottom: 1px solid var(--line);
        box-shadow: 0 4px 16px rgba(31, 70, 110, 0.04);
      }

html[data-clobar-auth-standalone] .topbar-row {
        display: flex;
        align-items: center;
        /* 同上：这一排也不允许折行。 */
        flex-wrap: nowrap;
        min-width: 0;
        flex: 1 1 auto;
        position: relative;
        z-index: 11;
      }

html[data-clobar-auth-standalone] .topbar-spacer {
        flex: 0 0 4px;
      }

html[data-clobar-auth-standalone] .publish-button {
        padding: 8px 12px;
        border: 0;
        border-radius: 12px;
        background: var(--primary-soft);
        color: var(--primary-dark);
        box-shadow: 0 5px 12px rgba(31, 139, 255, 0.08);
        font: inherit;
        font-size: 0.82rem;
        font-weight: 700;
        cursor: pointer;
      }

html[data-clobar-auth-standalone] .topbar .publish-button {
        flex-shrink: 0;
        padding: 6px 12px;
        font-size: 13px;
        font-weight: 600;
        border-radius: 8px;
        margin-right: 4px;
      }

html[data-clobar-auth-standalone] .publish-button:hover, html[data-clobar-auth-standalone] .publish-button:focus-visible {
        background: rgba(31, 139, 255, 0.16);
        outline: none;
      }

html[data-clobar-auth-standalone] .publish-textarea {
        display: block;
        width: 100%;
        padding: 10px;
        border: 1px solid var(--line);
        border-radius: 12px;
        color: var(--text);
        font: inherit;
      }

html[data-clobar-auth-standalone] textarea.publish-textarea {
        min-height: 120px;
        resize: vertical;
      }

html[data-clobar-auth-standalone] input.publish-textarea, html[data-clobar-auth-standalone] select.publish-textarea {
        min-height: 46px;
      }

html[data-clobar-auth-standalone] select.publish-textarea {
        height: 46px;
        line-height: 1.2;
        padding-top: 0;
        padding-bottom: 0;
      }

html[data-clobar-auth-standalone] .me-field-dialog-input {
        display: block;
        width: 100%;
        padding: 10px;
        border: 1px solid var(--line);
        border-radius: 12px;
        color: var(--text);
        font: inherit;
        margin-bottom: 12px;
      }

html[data-clobar-auth-standalone] .publish-textarea[hidden], html[data-clobar-auth-standalone] .me-field-dialog-input[hidden] {
        display: none;
      }

html[data-clobar-auth-standalone] .brand {
        display: flex;
        align-items: center;
        gap: 10px;
        font-weight: 700;
        font-size: 1.8rem;
        letter-spacing: 0.5px;
      }

html[data-clobar-auth-standalone] .brand-logo {
        display: block;
        width: 36px;
        height: 36px;
        object-fit: contain;
        flex-shrink: 0;
      }

html[data-clobar-auth-standalone] .content {
        flex: 1;
        min-height: 0;
        padding: 18px 18px 76px;
      }

html[data-clobar-auth-standalone] .hero-card {
        background: linear-gradient(135deg, #ffffff 0%, #edf6ff 100%);
        border: 1px solid rgba(31, 139, 255, 0.08);
        /* UI Polish Phase 2B: lighter radius/shadow only -- padding and border are
           deliberately untouched (approved as "frame feels heavy", not "card is too big"). */
        border-radius: var(--radius-lg);
        padding: 18px 16px;
        box-shadow: 0 6px 16px rgba(31, 139, 255, 0.06);
      }

html[data-clobar-auth-standalone] .mini-title {
        font-size: var(--fs-meta);
        color: var(--primary-dark);
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

html[data-clobar-auth-standalone] .avatar-slot {
        display: grid;
        place-items: center;
        flex-shrink: 0;
        overflow: hidden;
        /* ID Logo shape unification: square + small radius is now the app-wide default for
           every Identity/Target avatar -- Bottom Nav's own Identity avatar is the one
           deliberate exception, restored to circular just below via
           [data-identity-button-avatar] (higher specificity, so it wins over this rule
           regardless of source order). */
        border-radius: 8px;
        background: linear-gradient(135deg, #dfeeff, #9dc5ff);
        color: var(--primary-dark);
        font-weight: 800;
      }

html[data-clobar-auth-standalone] .avatar-slot[hidden] {
        display: none;
      }

html[data-clobar-auth-standalone] .avatar-sm {
        width: 26px;
        height: 26px;
        font-size: 0.72rem;
      }

html[data-clobar-auth-standalone] .avatar-md {
        width: 38px;
        height: 38px;
        font-size: 0.88rem;
      }

html[data-clobar-auth-standalone] h1 {
        margin: 10px 0 8px;
        font-size: var(--fs-h1);
        line-height: var(--lh-tight);
      }

html[data-clobar-auth-standalone] .subtitle {
        margin: 0;
        color: var(--muted);
        font-size: var(--fs-body);
        line-height: var(--lh-normal);
      }

html[data-clobar-auth-standalone] .section {
        margin-top: var(--section-gap);
      }

html[data-clobar-auth-standalone] .section-title {
        margin: 0 4px 12px;
        font-size: var(--fs-section);
        font-weight: 700;
      }

html[data-clobar-auth-standalone] .nets-categories {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 8px;
      }

html[data-clobar-auth-standalone] .nets-category {
        padding: 11px 10px;
        border: 1px solid var(--line);
        border-radius: 14px;
        background: var(--panel);
        color: var(--muted);
        font: inherit;
        font-size: 0.78rem;
        font-weight: 700;
        cursor: pointer;
      }

html[data-clobar-auth-standalone] .nets-category.active, html[data-clobar-auth-standalone] .nets-category:hover, html[data-clobar-auth-standalone] .nets-category:focus-visible {
        border-color: rgba(31, 139, 255, 0.28);
        background: var(--primary-soft);
        color: var(--primary-dark);
        outline: none;
      }

html[data-clobar-auth-standalone] .org-apply-success {
        margin: 0 0 var(--space-3);
        padding: var(--space-3) var(--space-4);
        border: 1px solid rgba(31, 139, 255, 0.24);
        border-radius: var(--radius-md);
        background: var(--primary-soft);
        color: var(--primary-dark);
        font-size: var(--fs-body);
        font-weight: 700;
        line-height: var(--lh-normal);
      }

html[data-clobar-auth-standalone] .feed-meta {
        /* UI Polish Phase 2C: scoped, slightly darker than --muted (#7a8798) for legibility
           -- the shared token itself is untouched, so nothing else using --muted moves. */
        color: #5f6b7a;
        font-size: var(--fs-meta);
        line-height: var(--lh-normal);
        margin-top: 2px;
      }

@media (max-width: 430px) {
html[data-clobar-auth-standalone] body {
          padding: 0;
          background: linear-gradient(180deg, #f7fbff 0%, #eef3f8 100%);
        }

html[data-clobar-auth-standalone] .app-shell {
          width: 100%;
          /* 明确清掉基础规则里的 min-height: calc(100vh - 48px)。移动端不需要任何高度
             地板 —— 底部导航是 fixed 的，不靠壳的高度定位。 */
          min-height: 0;
          height: auto;
          border-radius: 0;
          border: none;
          overflow: visible;
          background: transparent;
          /* 壳原来被拉满一屏时，这道投影落在视口外看不见；现在壳只有内容高，投影就会在
             内容结束的地方拖出一条横向暗带。移动端壳本来就没有圆角和边框（上面两行），
             投影也一并去掉 —— 它是"浮起来的卡片"才需要的。 */
          box-shadow: none;
        }

html[data-clobar-auth-standalone] .topbar {
          padding-left: 6px;
          padding-right: 6px;
        }

html[data-clobar-auth-standalone] .topbar-spacer {
          flex-basis: 6px;
        }

html[data-clobar-auth-standalone] .topbar .publish-button {
          margin-right: 2px;
        }

html[data-clobar-auth-standalone] .content {
          overflow: visible;
          /* 内容高度以实际内容为准：父级 .app-shell 在移动端已经没有高度地板，这里再把
             flex:1 关掉，保证任何情况下都不会被 flex 拉伸出空白。 */
          flex: 0 1 auto;
          /* UI Polish Phase 2B: .bottom-nav actually occupies height(81px) + its own
             bottom offset(12px) = 93px from the viewport edge -- 80px left the last card
             in a real list (measured with Publisher's 3-post Published list) tucked ~13px
             under the floating nav at both 375px and 430px. 96px clears that with a little
             margin to spare. 这一条是给正文留出与底部导航等高的安全区，不是用来撑高页面。

             加上 env(safe-area-inset-bottom)：.bottom-nav 自己的偏移是
             max(12px, env(safe-area-inset-bottom))，在带 Home Indicator 的机型上它会整体
             上移（34px 的机型上移 22px），而正文只留 96px 就会被盖住最后一行。让正文的安全区
             跟着同一个 env 走，两边永远对得上；不支持 env 的浏览器回落到 0，结果与现在逐像素
             一致。 */
          padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
        }
}
}

/* ============================ 登录页视觉定义（唯一来源） ============================ */

/* ===== 登录 / 注册页顶栏与标题区（2026-08-30）=====
         整段只作用在 [data-login-screen] 这一层里的元素上：登录后的 App 顶栏
         （.topbar 那一套 Identity/Target/搜索/九宫格）不共用任何一条，位置不受影响。 */
      .auth-topbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
      }

.auth-brand {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
      }

/* 品牌字样：去掉「云吧」，字号更小、不加粗 —— 顶栏而不是大标题。 */
      .auth-brand-name {
        font-size: 1.02rem;
        font-weight: 500;
        letter-spacing: 0.01em;
        color: var(--text);
        white-space: nowrap;
      }

/* 右侧导航组。flex-shrink:0 是这一组"位置固定"的关键：语言按钮在 EN 和 中
         之间换字、宽度变化时，收缩的是左边的品牌区，Login / Register 不会被挤动。
         整组 nowrap，手机端只收紧 gap，不换行。 */
      .auth-nav {
        display: flex;
        align-items: center;
        gap: 6px;
        flex: 0 0 auto;
        white-space: nowrap;
      }

/* 三颗按钮各自给一个 min-width：EN ⇄ 中文、Login ⇄ 登录 的字宽不一样，不定死
         盒子的话每次切语言这一排都会横向抖一下、Login / Register 跟着挪位置。
         定死之后语言切换只换字，按钮位置一个像素不动。 */
      .auth-nav-btn {
        min-width: 40px;
        text-align: center;
        padding: 5px 9px;
        border: 1px solid transparent;
        border-radius: 999px;
        background: none;
        color: var(--primary-dark);
        font: inherit;
        font-size: var(--fs-caption);
        font-weight: 700;
        line-height: 1.2;
        cursor: pointer;
        white-space: nowrap;
      }

.auth-nav-btn:hover,
      .auth-nav-btn:focus-visible {
        background: var(--primary-soft);
        outline: none;
      }

/* 当前所在页面的那颗高亮。 */
      .auth-nav-btn.is-current {
        background: var(--primary-soft);
        border-color: var(--line);
      }

.auth-nav-btn[data-auth-nav] {
        min-width: 62px;
      }

.auth-nav-sep {
        color: var(--line);
        font-size: var(--fs-caption);
      }

/* 标题和说明同一行；放不下时说明换到第二行，标题不会被压扁。 */
      .auth-heading-row {
        display: flex;
        align-items: baseline;
        flex-wrap: wrap;
        gap: 6px;
        margin-top: var(--space-2);
        padding: 0 2px;
      }

.auth-heading {
        font-size: 1.05rem;
        font-weight: 700;
        color: var(--text);
      }

.auth-heading-sep {
        color: var(--muted);
      }

.auth-heading-sub {
        color: var(--muted);
        font-size: var(--fs-caption);
      }

/* 表单里的提交按钮只为回车提交而存在，不占任何视觉空间。
         用 clip 而不是 display:none —— display:none 的按钮不参与隐式提交。 */
      .auth-hidden-submit {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        border: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
      }

.auth-links-row {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        margin-top: var(--space-2);
      }

/* 注册入口字号明显加大（原来是 --fs-caption，太小），但仍然不是标题级。 */
      /* 提高一级特异性：.auth-switch-link 的 font-size 定义在这段之后，
         单类选择器会赢，必须用两个类才压得住。 */
      .auth-switch-link.auth-switch-link--strong {
        font-size: 0.95rem;
        margin-top: 0;
      }

.auth-forgot-link {
        border: 0;
        background: none;
        color: var(--muted);
        font: inherit;
        font-size: var(--fs-caption);
        padding: 4px 0;
        cursor: pointer;
        text-decoration: underline;
      }

.auth-forgot-link:hover,
      .auth-forgot-link:focus-visible {
        color: var(--primary-dark);
        outline: none;
      }

/* Registration v1: login <-> register toggle link on the account screen. Plain text
         link, not a card/button -- it's a secondary way out of the current form, not an
         action within it. */
      .auth-switch-link {
        display: block;
        width: 100%;
        margin-top: var(--space-2);
        padding: 6px 0;
        border: 0;
        background: none;
        color: var(--primary-dark);
        font: inherit;
        font-size: var(--fs-caption);
        font-weight: 700;
        text-align: center;
        cursor: pointer;
      }

/* ===== 登录页移动端 / 平板视觉（2026-08-31）=====
         整段只作用在 .app-shell[data-login-screen] 里，登录后的 App 顶栏、正文、
         其他页面一条都不共用。只改视觉：没有动认证逻辑、注册逻辑、session/
         localStorage、Identity/Target，也没有动任何后端接口。

         这一段**放在**上面那批 .auth-* 基础规则之后，并且每条都带
         .app-shell[data-login-screen] 前缀 —— 特异性 (0,3,0) 高于第 3646 行那个
         430px 媒体块里的裸类选择器 (0,1,0)。所以手机端的收紧规则必须也写成同样
         带前缀的形式，见本段末尾自己的 @media，靠"同特异性 + 更靠后"生效。 */

      /* 全页统一纯黑。--text 是 #1f2a37（偏蓝深灰）、--muted 是 #7a8798（浅灰），
         两个都达不到要求的"黑"，所以登录页单开一个 ink 变量，不去动全局调色板
         （改 --text 会波及整个 App）。 */
      .app-shell[data-login-screen] {
        --auth-ink: #000;
      }

.app-shell[data-login-screen] .auth-brand-name,
      .app-shell[data-login-screen] .auth-heading,
      .app-shell[data-login-screen] .auth-heading-sub,
      .app-shell[data-login-screen] .auth-heading-sep,
      .app-shell[data-login-screen] .auth-remember-toggle,
      .app-shell[data-login-screen] .auth-switch-link,
      .app-shell[data-login-screen] .auth-inline-forgot,
      .app-shell[data-login-screen] .feed-meta,
      .app-shell[data-login-screen] .publish-textarea {
        color: var(--auth-ink);
      }

/* 提示文字：浏览器默认 placeholder 会再叠一层低透明度，opacity:1 是必须的，
         否则设了颜色也还是灰的。#4a4a4a 而不是纯黑 —— placeholder 要能和真正输入
         的黑色内容区分开，否则用户分不清框里是提示还是已填的值。 */
      .app-shell[data-login-screen] .publish-textarea::placeholder {
        color: #4a4a4a;
        opacity: 1;
      }

/* 1. 品牌区整体右移，logo 与文字的组合更居中、更平衡。logo 图形本身不动。 */
      .app-shell[data-login-screen] .auth-brand {
        margin-left: 14px;
        gap: 10px;
      }

/* 3. EN / 登录 / 注册：三颗都放大，三颗都有同一种圆角背景框。
         min-width 仍然是"语言切换不挤动"的关键：EN ⇄ 中文、Login ⇄ 登录 字宽不同，
         盒子不定死的话每次切语言这一排都会横向抖。 */
      .app-shell[data-login-screen] .auth-nav-btn {
        min-width: 58px;
        padding: 8px 14px;
        font-size: 0.88rem;
        font-weight: 700;
        color: var(--auth-ink);
        background: #eef1f5;
        border: 1px solid rgba(0, 0, 0, 0.16);
        border-radius: 999px;
      }

/* 88px：实测 "Register" 在 0.88rem 下的自然宽度是 86px。min-width 必须 >= 它，
         否则英文按内容撑到 86、切回中文缩回 min-width，这一排每次切语言就横移 2px。 */
      .app-shell[data-login-screen] .auth-nav-btn[data-auth-nav] {
        min-width: 88px;
      }

.app-shell[data-login-screen] .auth-nav-btn:hover,
      .app-shell[data-login-screen] .auth-nav-btn:focus-visible {
        background: #e2e7ee;
        outline: none;
      }

/* 当前所在页面那颗：底色加深一档，不靠颜色区分（全黑字），靠背景。 */
      .app-shell[data-login-screen] .auth-nav-btn.is-current {
        background: var(--primary-soft);
        border-color: rgba(0, 0, 0, 0.34);
      }

/* 三颗都有了自己的边框，中间的竖线就成了多余的视觉噪音。 */
      .app-shell[data-login-screen] .auth-nav-sep {
        display: none;
      }

/* 4. 说明行字号放大、纯黑。登录页那一行的"登录 ·"已在 DOM 里去掉，
         这条同时也服务注册页 / 忘记密码页保留下来的标题行。 */
      .app-shell[data-login-screen] .auth-heading-sub {
        font-size: 0.98rem;
        font-weight: 500;
        line-height: 1.35;
      }

.app-shell[data-login-screen] .auth-heading-row {
        margin-top: 12px;
        margin-bottom: 2px;
      }

/* 7. 输入框：16px 是 iOS 的硬门槛 —— 小于 16px 时 Safari 会在聚焦输入框的瞬间
         自动放大整页，iPad / iPhone 上表现为"点一下输入框页面就跳"。所以这里钉死
         16px，不用 rem。 */
      .app-shell[data-login-screen] .publish-textarea {
        font-size: 16px;
        padding: 12px 14px;
      }

/* 5. 记住登录名这一行：字号加大，复选框跟着放大到手指友好的尺寸。 */
      .app-shell[data-login-screen] .auth-remember-row {
        margin: 2px 4px 14px;
        gap: 12px;
      }

.app-shell[data-login-screen] .auth-remember-toggle {
        font-size: 0.95rem;
        gap: 10px;
      }

.app-shell[data-login-screen] .auth-remember-toggle input[type="checkbox"] {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
      }

/* 5. 右侧由"忘记此登录名"换成"忘记密码？"，走的还是原来那个
         data-show-forgot 处理器，没有新增逻辑。 */
      .auth-inline-forgot {
        border: 0;
        background: none;
        padding: 4px 0;
        font: inherit;
        font-size: 0.95rem;
        font-weight: 600;
        color: var(--auth-ink);
        text-decoration: underline;
        cursor: pointer;
        flex-shrink: 0;
      }

.app-shell[data-login-screen] .auth-switch-link.auth-switch-link--strong {
        font-size: 1rem;
      }

.app-shell[data-login-screen] .auth-links-row {
        gap: 6px;
        margin-top: 14px;
      }

/* ===== 登录页改版（2026-08-31 第二轮）=====
         顶栏三颗功能键移除、说明文字进 placeholder、记住登录名换成「确认登录」。
         同样整段只作用在 .app-shell[data-login-screen] 内。 */

      /* 3. 顶栏只剩 logo + 品牌文字，整组居中。 */
      .app-shell[data-login-screen] .auth-topbar {
        justify-content: center;
      }

.app-shell[data-login-screen] .auth-brand {
        margin-left: 0;
        gap: 10px;
      }

.app-shell[data-login-screen] .auth-brand-name {
        font-size: 1.15rem;
        font-weight: 600;
        color: var(--auth-ink);
      }

/* 4. 第二行：标题在左，语言切换在右，同一行。登录 / 注册 / 忘记密码三页共用。 */
      .auth-heading-row--login {
        justify-content: space-between;
        align-items: center;
        flex-wrap: nowrap;
      }

/* 注册页 / 忘记密码页的标题是「标题 · 说明」两段，包成一组再和按钮分列两端：
         说明文字长的时候在组内换行，按钮的位置不受影响。 */
      .auth-heading-text {
        display: flex;
        align-items: baseline;
        flex-wrap: wrap;
        gap: 6px;
        min-width: 0;
      }

.app-shell[data-login-screen] .auth-heading {
        font-size: 1.12rem;
        font-weight: 700;
        color: var(--auth-ink);
      }

/* 语言切换：黑色、清晰、明确可点（给一个轻框，不做多余装饰）。
         min-width 钉死是因为 EN ⇄ 中文 字宽不同，不定死的话每次切语言这颗会变宽变窄。 */
      .auth-lang-inline {
        /* 58px：实测「中文」在 0.92rem 下自然宽 56px。min-width 必须 >= 它，否则
           EN(50) ⇄ 中文(56) 之间盒子会变宽，而这颗是右对齐的，宽度一变左边缘就横移。 */
        min-width: 58px;
        padding: 6px 12px;
        border: 1px solid rgba(0, 0, 0, 0.22);
        border-radius: 999px;
        background: none;
        color: var(--auth-ink);
        font: inherit;
        font-size: 0.92rem;
        font-weight: 600;
        line-height: 1.2;
        text-align: center;
        white-space: nowrap;
        cursor: pointer;
        flex-shrink: 0;
      }

.auth-lang-inline:hover,
      .auth-lang-inline:focus-visible {
        background: #eef1f5;
        outline: none;
      }

/* 认证页的主提交按钮。2026-08-31 起登录 shell 内四页共用同一颗样式：
         登录「确认登录」/ 注册「注册」/ 忘记密码「继续」/ 组织申请「提交审核」。
         整宽、49px 高（超过 44px 的触摸下限），iPad 和手机上都是大触控区。
         文字用黑色而不是继承 .publish-button 的 var(--primary-dark)：浅蓝底(#eaf4ff)
         配蓝字对比度只有约 4:1，是全页最不清晰的一处；黑字 + 明确边框对比度 21:1，
         既符合"文字黑色"，也让它一眼就是个按钮。
         只加样式类，三个 <form> 的 submit 处理器、字段、校验、接口一律没动。 */
      .app-shell[data-login-screen] .auth-confirm-submit {
        display: block;
        width: 100%;
        margin-top: 4px;
        padding: 14px 16px;
        border: 1px solid rgba(0, 0, 0, 0.28);
        border-radius: 12px;
        color: var(--auth-ink);
        font-size: 1.02rem;
        font-weight: 700;
      }

.app-shell[data-login-screen] .auth-confirm-submit:hover,
      .app-shell[data-login-screen] .auth-confirm-submit:focus-visible {
        background: #dbeaff;
        outline: none;
      }

/* 5. 注册 / 忘记密码：黑色、不加粗、无下划线，仍然可点。 */
      .auth-links-row--login {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px 22px;
      }

.app-shell[data-login-screen] .auth-switch-link--plain {
        display: inline;
        width: auto;
        margin-top: 0;
        padding: 6px 2px;
        color: var(--auth-ink);
        font-size: 0.95rem;
        font-weight: 400;
        text-decoration: none;
      }

/* 2026-09-03 最小范围修复：上面那条 display:inline 会覆盖掉浏览器 UA 样式表给
   [hidden] 的 display:none，导致带 hidden 属性的这类链接（登录表单里的
   data-creator-login-cancel「取消」）照样渲染并占位。
   只针对 .auth-switch-link--plain 这一个类恢复 hidden 语义，**不使用**任何影响
   全站所有 [hidden] 元素的全局规则；对不带 hidden 的同类元素零影响。 */
.auth-switch-link--plain[hidden] {
        display: none !important;
      }

.app-shell[data-login-screen] .auth-switch-link--plain:hover,
      .app-shell[data-login-screen] .auth-switch-link--plain:focus-visible {
        outline: none;
        opacity: 0.62;
      }

@media (max-width: 430px) {
.app-shell[data-login-screen] .auth-brand-name {
          font-size: 1.06rem;
        }

.app-shell[data-login-screen] .auth-heading {
          font-size: 1.05rem;
        }

.auth-lang-inline {
          min-width: 50px;
          padding: 6px 10px;
          font-size: 0.88rem;
        }

.app-shell[data-login-screen] .auth-switch-link--plain {
          font-size: 0.92rem;
        }

.auth-links-row--login {
          gap: 6px 16px;
        }


      }

@media (max-width: 430px) {
.app-shell[data-login-screen] .auth-brand {
          margin-left: 8px;
          gap: 8px;
        }

.app-shell[data-login-screen] .auth-nav-btn {
          min-width: 50px;
          padding: 7px 9px;
          font-size: 0.82rem;
        }

/* 74px = "Register" 在 0.82rem 下的自然宽度上限。低于它英文会撑破盒子、
           切回中文又缩回去，这一排就会左右抖。 */
        .app-shell[data-login-screen] .auth-nav-btn[data-auth-nav] {
          min-width: 74px;
        }

.app-shell[data-login-screen] .auth-remember-toggle,
        .app-shell[data-login-screen] .auth-inline-forgot {
          font-size: 0.9rem;
        }

.app-shell[data-login-screen] .auth-heading-sub {
          font-size: 0.94rem;
        }


      }

/* v0.11.1 Remember Login Email -- same generic checkbox-row look as
         .geo-follow-toggle, not shared directly since the two are unrelated features. */
      .auth-remember-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        margin: 0 4px 10px;
      }

.auth-remember-toggle {
        display: flex;
        align-items: center;
        gap: 8px;
        color: var(--text);
        font-size: 0.78rem;
      }

/* "忘记此邮箱" -- only shown (via [hidden] toggled in JS) when a remembered email
         actually exists, so a user can clear it immediately without having to type a
         password and submit the form just to trigger the uncheck-and-login clear path. */
      .auth-forget-email-link {
        border: 0;
        background: none;
        padding: 0;
        color: var(--primary-dark);
        font: inherit;
        font-size: 0.72rem;
        font-weight: 700;
        cursor: pointer;
        flex-shrink: 0;
      }

@media (max-width: 430px) {
/* Registration Form Mobile Overflow hotfix: scoped to the login/register/
           identity-picker shell only (the [data-login-screen] instance of .app-shell --
           [data-app-shell], the authenticated shell, is untouched). Bounding height to
           100dvh and giving the shell its own overflow-y:auto makes THIS box the page's
           scroll container, rather than relying on document/body-level scroll -- the more
           reliable pattern for a focused input to auto-scroll above the mobile keyboard,
           and it doesn't depend on any specific mobile browser's keyboard-avoidance
           heuristics for plain page scroll. Register's fields/submit button were always
           reachable via programmatic scroll (nothing was clipped by overflow:hidden), but
           this makes real touch-scroll and keyboard-focus-scroll behave the same way. Short
           content (the login form) is visually unaffected -- bounding the height doesn't
           show a scrollbar or move anything when there's nothing to scroll. */
        .app-shell[data-login-screen] {
          height: 100dvh;
          overflow-y: auto;
          -webkit-overflow-scrolling: touch;
        }

.app-shell[data-login-screen] .content {
          padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
        }

/* 手机端登录页：右侧三颗按钮**保持一行**，空间不足时收紧内边距和间距，
           绝不换到第二行（分隔符先收，最后才动按钮内边距）。 */
        .auth-nav {
          gap: 3px;
        }

.auth-nav-btn {
          padding: 5px 6px;
          min-width: 36px;
        }

/* 62px 是 "Register" 在这个字号下的自然宽度上限：低于它，英文会撑破盒子，
           切到中文又缩回去，这一排就会左右抖。 */
        .auth-nav-btn[data-auth-nav] {
          min-width: 62px;
        }

.auth-brand-name {
          font-size: 0.96rem;
        }


      }


