/* ============================================================
   Sua 登录页 侘寂新视觉皮肤 v1（login.html / 上线皮肤）
   基于 login-concept.html 概念稿提炼：
   - 左侧撕纸 + 液态玻璃卡片（.paper-*）
   - 右侧悬挂木柱场景（.scene-*/ .face-* / .spirit-*）
   - 侘寂社交图标按钮（替代微信文字按钮 + 新增 GitHub）
   仅作用于渲染层，不触碰 login.html 的表单逻辑 / 字段 / 备案。
   放在 auth.css、forest-bg.css 之后引入以保证覆盖。
   ============================================================ */

/* ============ 舞台：左右分屏（flex 兜底，避免 grid 拉伸计算异常） ============ */
/* 关键修复：body(.auth-page) 用了 grid + place-items:center，会把 main 收缩居中，
   导致内部 flex 容器宽度不足、右侧 scene 被挤成 0 宽。改为 stretch 让 main 铺满整屏 */
html body.auth-page { place-items: stretch; }

.auth-page.auth-wabi {
    display: flex !important;
    justify-self: stretch;
    align-self: stretch;
    flex-direction: row;
    align-items: stretch;
    justify-content: flex-start;
    width: 100%;
    height: 100svh;
    min-height: 100svh;
    padding: 0;
    column-gap: clamp(8px, 2vw, 32px);
    position: relative;
    z-index: 2;
    box-sizing: border-box;
}

.auth-column.auth-wabi-col {
    display: flex; align-items: center; justify-content: center;
    flex: 0 0 46%;
    width: 46%;
    min-width: 420px;
    max-width: 640px;
    padding: clamp(28px, 5vh, 64px) clamp(20px, 3vw, 48px);
    box-sizing: border-box;
}

/* ============ 撕纸 + 液态玻璃卡片 ============ */
.paper-card {
    position: relative;
    width: min(420px, 100%);
    transform: rotate(-.5deg);
    filter: drop-shadow(0 30px 48px rgba(23,49,39,.22)) drop-shadow(0 5px 12px rgba(23,49,39,.10));
}
/* 撕口纤维层：比纸面大一圈、颜色更深，衬出不规则毛边 */
.paper-fiber {
    position: absolute; inset: -15px; z-index: 0;
    background: rgba(176,168,146,.55);
    filter: url(#tornEdgeDeep);
    pointer-events: none;
}
/* 撕裂边缘 + 玻璃材质（滤镜只作用于背景层，内容不受影响） */
.paper-bg {
    position: absolute; inset: -12px; z-index: 1;
    background:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)' opacity='.05'/%3E%3C/svg%3E"),
        linear-gradient(128deg, rgba(255,254,249,.92) 0%, rgba(250,248,240,.86) 42%, rgba(242,244,236,.78) 100%);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    backdrop-filter: blur(14px) saturate(1.2);
    filter: url(#tornEdge);
}
/* 玻璃高光：顶部折射亮线 + 左上斜射光 */
.paper-card::before {
    content: ""; position: absolute; left: 4%; right: 4%; top: 6px; height: 1.5px; z-index: 3;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.95) 30%, rgba(255,255,255,.55) 60%, transparent);
    pointer-events: none;
}
.paper-card::after {
    content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background:
        radial-gradient(120% 55% at 18% -6%, rgba(255,255,255,.5), transparent 55%),
        radial-gradient(90% 45% at 88% 106%, rgba(125,158,158,.10), transparent 60%);
}
/* 和纸胶带：贴住纸片上方，强化「一张撕下来的纸」感 */
.paper-tape {
    position: absolute; top: -18px; left: 50%; width: 118px; height: 30px; z-index: 5;
    transform: translateX(-50%) rotate(-1.6deg);
    background: linear-gradient(100deg, rgba(212,224,208,.78), rgba(190,210,192,.62));
    box-shadow: 0 2px 6px rgba(23,49,39,.14), inset 0 1px rgba(255,255,255,.5);
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
    filter: url(#tornEdge);
    pointer-events: none;
}

/* 表单卡本体：掏空原有玻璃/边框，让撕纸背景层做纸面 */
.paper-card .auth-card {
    position: relative;
    z-index: 4;
    width: 100%;
    padding: clamp(30px, 4vw, 40px) clamp(28px, 4vw, 40px) 30px;
    border: 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    border-radius: 0;
}

/* 注册/找回卡片更高时仍保留内部滚动 */
.paper-card .auth-card { max-height: calc(100svh - 96px); }

/* ============ 右侧：悬挂场景 ============ */
.scene-side {
    position: relative;
    flex: 1 1 auto;
    flex-grow: 1;
    min-width: 0;
    min-height: 100%;
    width: auto;
    height: 100%;
    overflow: hidden;
    user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
    cursor: grab; outline: none; touch-action: none;
}
.scene-side.grabbing { cursor: grabbing; }
.scene-side img { -webkit-user-drag: none; user-select: none; pointer-events: none; }

.hanger { position: absolute; left: 50%; top: -16px; width: 0; height: 0; transform-origin: 0 0; will-change: transform; }
.cord {
    position: absolute; left: -2.5px; top: 0; width: 5px; height: 230px; border-radius: 2.5px;
    background:
        repeating-linear-gradient(52deg, #b39a72 0 3px, #8f7a55 3px 6px),
        linear-gradient(90deg, rgba(0,0,0,.18), rgba(255,255,255,.14) 45%, rgba(0,0,0,.22));
    background-blend-mode: multiply;
    box-shadow: 1px 1px 2px rgba(23,49,39,.25);
    transform-origin: top center;
}
.hang-body { position: absolute; left: 0; top: 0; will-change: transform; }
.ring {
    position: absolute; left: -8px; top: 226px; width: 16px; height: 16px; border-radius: 50%;
    border: 2.5px solid #b08d4f;
    box-shadow: inset 0 1px 2px rgba(255,255,255,.5), 0 1px 2px rgba(23,49,39,.25);
}
.eyelet {
    position: absolute; left: -6px; top: 238px; width: 12px; height: 20px;
    border-radius: 4px 4px 2px 2px;
    background: linear-gradient(90deg, #8a6a38, #cfa75f 45%, #96763e);
    box-shadow: 0 1px 2px rgba(23,49,39,.3);
}

/* 正四方体木柱：272 × 360 × 272，四个面完全相同 */
.card3d-wrap {
    position: absolute; left: -136px; top: 254px;
    width: 272px; height: 360px;
    perspective: 1600px;
}
.card3d { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; will-change: transform; }
.face {
    position: absolute; overflow: hidden;
    backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.face-main {
    inset: 0; border-radius: 4px;
    background: linear-gradient(163deg, #faf7f0 0%, #f1ede2 100%);
    padding: 13px;
    box-shadow: 0 26px 52px rgba(23,49,39,.20), inset 0 0 0 1px rgba(23,49,39,.08);
}
.face-main::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: 4px;
    background: linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,0) 16%, rgba(255,255,255,0) 84%, rgba(23,49,39,.12));
}
.face-main .mat {
    height: 100%; display: flex; flex-direction: column;
    border: 1px solid rgba(176,141,79,.55);
    box-shadow: inset 0 0 0 3px #fbf9f3, inset 0 0 0 4px rgba(176,141,79,.28);
}
.photo { height: 62%; margin: 10px 10px 0; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(23,49,39,.12); }
.photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 32%; display: block; }
.caption { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 6px 14px 10px; }
.caption .en { font-family: "Marcellus", serif; color: #a5854f; font-size: 9.5px; letter-spacing: .34em; text-indent: .34em; }
.caption .cn { margin-top: 7px; font: 600 19px/1.2 "Noto Serif SC", serif; color: #173127; letter-spacing: .22em; text-indent: .22em; }
.caption .rule { width: 26px; height: 1px; margin: 10px 0; background: rgba(176,141,79,.55); }
.caption .desc { color: #6c7f74; font-size: 11.5px; line-height: 1.95; letter-spacing: .06em; }
.caption .atelier { margin-top: 9px; font-family: "Marcellus", serif; color: #9aa79d; font-size: 8px; letter-spacing: .3em; text-indent: .3em; }

.face-front { transform: translateZ(136px); }
.face-right { transform: rotateY(90deg) translateZ(136px); }
.face-back  { transform: rotateY(180deg) translateZ(136px); }
.face-left  { transform: rotateY(-90deg) translateZ(136px); }

.face-wood {
    width: 272px; height: 272px; left: 0; top: 44px;
    background:
        radial-gradient(circle at 30% 40%, rgba(0,0,0,.10) 0 6px, transparent 8px),
        radial-gradient(circle at 68% 62%, rgba(0,0,0,.08) 0 5px, transparent 7px),
        repeating-linear-gradient(93deg, rgba(0,0,0,.09) 0 2px, transparent 2px 9px),
        linear-gradient(100deg, #7a6248, #6b5540 45%, #54422f);
    box-shadow:
        inset 0 0 0 1px rgba(0,0,0,.18),
        inset 0 0 0 9px rgba(0,0,0,.07),
        inset 0 0 0 10px rgba(255,255,255,.05);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.face-wood .carve {
    font-family: "Marcellus", serif; font-weight: 600;
    letter-spacing: .48em; text-indent: .48em;
    color: #4e3c29;
    text-shadow: 0 -1px 0 rgba(255,235,205,.20), 0 1px 1px rgba(0,0,0,.5);
}
.face-wood .carve.sub { font-size: 13px; letter-spacing: .62em; text-indent: .62em; opacity: .85; }
.face-top .carve { font-size: 27px; transform: rotate(180deg); }
.face-bottom .carve.main { font-size: 27px; }
.face-top    { transform: rotateX(90deg)  translateZ(180px); }
.face-bottom { transform: rotateX(-90deg) translateZ(180px); }

/* 小精灵 */
.spirit {
    position: absolute; left: 0; top: 202px; width: 46px; height: 46px;
    transform: translate(-50%, 0); z-index: 2;
    border-radius: 42% 58% 50% 50% / 52% 48% 56% 44%;
    background:
        radial-gradient(120% 80% at 72% 16%, #fffef9, transparent 55%),
        radial-gradient(farthest-side at 50% 0%, #fdfbf3, #e9e5d6 92%);
    box-shadow: inset 0 -4px 8px rgba(23,49,39,.07), 0 4px 10px rgba(23,49,39,.16);
    transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}
.spirit.curious { transform: translate(-50%, 3px) rotate(-5deg); }
.spirit-crown { position: absolute; top: -7px; left: 15px; right: 15px; height: 14px; z-index: 2; pointer-events: none; }
.spirit-crown .leaf {
    position: absolute; top: 0; left: 0; right: 0; margin: auto; width: 15px; height: 9px;
    background: linear-gradient(138deg, #86a88a, #5f8567 88%);
    border-radius: 0 68% 0 68%; transform: rotate(-6deg);
    box-shadow: 0 1px 2px rgba(23,49,39,.2);
}
.spirit-blush { position: absolute; top: 22px; width: 9px; height: 5px; border-radius: 50%;
    background: radial-gradient(circle, rgba(216,138,116,.52), rgba(216,138,116,0) 70%);
    opacity: .78; transition: opacity .3s, transform .3s, background .3s; }
.spirit-blush.left { left: 2px; } .spirit-blush.right { right: 2px; }
.spirit.shy .spirit-blush { opacity: 1; background: radial-gradient(circle, rgba(222,126,104,.72), rgba(222,126,104,0) 72%); }
.spirit.curious .spirit-blush.left { transform: translateX(-1px); }
.spirit.curious .spirit-blush.right { transform: translateX(1px); }
.spirit-eye {
    position: absolute; top: 15px; width: 12px; height: 13px; border-radius: 50%;
    background: #fff;
    box-shadow: inset 0 -1px 2px rgba(23,49,39,.16), 0 0 0 1px rgba(176,141,79,.12);
    overflow: hidden;
}
.spirit-eye.left { left: 9px; } .spirit-eye.right { right: 9px; }
.spirit-eye::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(23,49,39,.08), transparent 42%);
}
.pupil {
    position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px;
    border-radius: 50%; background: #2b3a33; will-change: transform;
}
.pupil::after {
    content: ""; position: absolute; left: 1px; top: 1px; width: 2px; height: 2px;
    border-radius: 50%; background: rgba(255,255,255,.85);
}
.spirit-hand {
    position: absolute; top: 30px; width: 14px; height: 14px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fbf9f3, #e9e5d8 80%);
    box-shadow: 0 1px 3px rgba(23,49,39,.18); z-index: 3;
    transition: top .28s cubic-bezier(.34,1.4,.64,1), left .28s cubic-bezier(.34,1.4,.64,1), right .28s cubic-bezier(.34,1.4,.64,1);
}
.spirit-hand.left { left: 2px; } .spirit-hand.right { right: 2px; left: auto; }
.spirit.shy .spirit-hand.left { top: 12px; left: 6px; }
.spirit.shy .spirit-hand.right { top: 12px; right: 6px; }
.spirit.shy.peek .spirit-hand.left { top: 15px; left: 3px; }
.spirit.shy.peek .spirit-hand.right { top: 15px; right: 3px; }
.spirit.jump { animation: spirit-jump .6s cubic-bezier(.34,1.56,.64,1); }
@keyframes spirit-jump {
    0% { transform: translate(-50%, 0) scale(1); }
    35% { transform: translate(-50%, -14px) scale(1.05, .95); }
    70% { transform: translate(-50%, 2px) scale(.96, 1.04); }
    100% { transform: translate(-50%, 0) scale(1); }
}

.scene-hint {
    position: absolute; left: 50%; bottom: 42px; transform: translateX(-50%);
    color: #81968b; font-size: 11px; letter-spacing: .3em; white-space: nowrap;
    transition: opacity .9s ease, transform .9s ease;
}
.scene-hint.gone { opacity: 0; transform: translateX(-50%) translateY(8px); pointer-events: none; }

/* 地面投影：跟随木柱摆动与拉伸变化 */
.floor-shadow {
    position: absolute; left: 50%; top: 702px; width: 300px; height: 34px;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at center, rgba(23,49,39,.30), rgba(23,49,39,0) 66%);
    filter: blur(4px); pointer-events: none; will-change: transform, opacity;
}

/* ============ 侘寂社交图标按钮（覆盖 auth.css 的微信文字按钮） ============ */
.social-entry { display: flex; justify-content: center; gap: 20px; }
.social-entry .social-btn,
.auth-page.auth-wabi .wechat-entry .social-btn,
.auth-page.auth-wabi .wechat-entry .wechat-btn {
    position: relative; width: 48px; height: 48px; border-radius: 50%;
    border: 1px solid rgba(67,94,77,.22);
    background: rgba(255,255,255,.55);
    box-shadow: 0 1px 2px rgba(23,49,39,.05);
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0;
    color: #59635c;
    font-size: 0;
    cursor: pointer; transition: transform .25s, background .25s, border-color .25s;
}
.social-btn:hover { transform: translateY(-1px); background: rgba(67,94,77,.06); border-color: rgba(67,94,77,.38); }
.social-btn:active { transform: translateY(0); }
.social-icon { width: 21px; height: 21px; }
.social-icon.wechat,
.social-btn .wechat-icon { width: 21px; height: 21px; color: #7b9b7f; }
.social-icon.github { color: #59635c; }

/* ============ QQ 登录：腾讯官方 1.3 规格「纯企鹅图标」（QQ 互联审核规范） ============ */
/* 采用方案 A：16×16 官方原图（Connect_logo_1.png）放进与微信 / GitHub 同款的
   48px 圆形按钮里并排，视觉与全站社交按钮统一。
   「QQ帐号登录」文案不常驻显示，改为**悬停提示**（.qq-icon-btn::after，
   文案取自 data-tip）。同时保留原生 title 属性做兜底与读屏可访问性
   （aria-label 同样保留，屏幕阅读器与爬虫都能读到「QQ帐号登录」）。
   标识图形本身未自绘、未改色；此处只做尺寸呈现与容器排版。 */
.qq-icon-btn .qq-official-icon {
    display: block;
    width: 21px;    /* 16×16 原图按整数倍放大到 21px，与同排图标视觉尺寸对齐 */
    height: 21px;
}

/* ============ QQ 登录：审核期临时规范版（2026-10-25，审核通过后整节删除） ============ */
/* 背景：QQ互联《网站审核规范》两条硬性要求——①「QQ登录按钮图标必须按照规范严格执行，
   不允许做任何修改」；②「放置的位置必须易于用户查找」。此前把 16×16 纯企鹅图标
   塞进与微信/GitHub 同款的 48px 圆形按钮排、文字只做悬停提示，被审以「位置不规范」驳回。
   现临时改为腾讯官方「用QQ帐号登录」按钮原图（Connect_logo_3.png，120×24），
   原生尺寸 1:1 呈现、独立成行居中置于社交图标行下方。
   ⚠️ 审核通过后恢复（QQ 登录彼时仍未真正接入，无 AppID/AppKey，不宜常驻大按钮）：
      1) 删除本节全部规则；
      2) 删除 login.html 两处 .qq-official-row 临时块；
      3) 取消 login.html 两处【审核通过后恢复】注释块注释（.qq-icon-btn 图标按钮），
         其规则 .qq-icon-btn .qq-official-icon 保留未删，无需恢复。 */
.qq-official-row {
    display: flex;
    justify-content: center;
    margin-top: 18px;
}
.qq-official-row .qq-official-btn {
    display: block;
    padding: 0;
    border: none;
    background: none;
    line-height: 0;
    cursor: pointer;
    transition: transform .25s ease;
}
.qq-official-row .qq-official-btn img {
    display: block;
    width: 120px;   /* Connect_logo_3.png 原生尺寸，1:1 展示，禁止缩放改色 */
    height: 24px;
}
.qq-official-row .qq-official-btn:hover { transform: translateY(-1px); }
.qq-official-row .qq-official-btn:active { transform: translateY(0); }
.qq-official-row .qq-official-btn:focus-visible {
    outline: 2px solid #5F7D6C;
    outline-offset: 3px;
    border-radius: 2px;
}
/* 小屏（<380px）下官方按钮 120px 宽仍可容纳，无需额外断点 */

/* ============ 社交按钮悬停提示气泡（微信 / GitHub / QQ / 支付宝通用） ============ */
/* 白色液态玻璃：半透白底 + 模糊 + 内高光（顶部亮线）+ 柔和投影，
   与登录页暖灰白基调一致，不用高饱和品牌色。
   文案统一取自各按钮的 data-tip；原生 title 属性保留做兜底与读屏可访问性。 */
.social-btn { position: relative; }

/* 主气泡 */
.social-btn::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    padding: 6px 11px;
    border-radius: 10px;
    /* 液态玻璃：白底半透 + backdrop 模糊 */
    background: rgba(255,255,255,.62);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
    backdrop-filter: blur(14px) saturate(180%);
    /* 内高光：顶部一道亮线，玻璃感的关键 */
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.95),
        inset 0 0 0 1px rgba(255,255,255,.42),
        0 6px 18px rgba(23,49,39,.10),
        0 2px 6px rgba(23,49,39,.06);
    color: #3D5449;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .02em;
    line-height: 1.5;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s ease, transform .2s ease;
    z-index: 20;
}
/* 气泡小尖角（同样玻璃质感） */
.social-btn::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 5px);
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 8px;
    height: 8px;
    border-radius: 1.5px;
    background: rgba(255,255,255,.62);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
    backdrop-filter: blur(14px) saturate(180%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s ease;
    z-index: 20;
}
.social-btn:hover::after,
.social-btn:hover::before,
.social-btn:focus-visible::after,
.social-btn:focus-visible::before {
    opacity: 1;
}
.social-btn:hover::after,
.social-btn:focus-visible::after {
    transform: translateX(-50%) translateY(0);
}

/* 有 data-tip 的按钮才显示气泡；无 data-tip 的（如动态 OAuth 渠道）不加气泡 */
.social-btn:not([data-tip])::after,
.social-btn:not([data-tip])::before { content: none; }

.qq-official-entry {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 16px;
}

/* ============ 响应式 ============ */
/* 动态 OAuth 渠道容器（微软/Google/微博/支付宝）：
   与外层 .social-entry 同为 flex 容器，gap 继承即可；
   这里只做「内联 span 变 flex」和换行保护 —— 渠道多时不至于挤成一行溢出 */
.oauth-providers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-left: 0;
}
@media (max-width: 420px) {
  .oauth-providers { gap: 14px; }
  .social-entry { gap: 14px; }
}

/* 各渠道图标配色：与站点低饱和基调一致，不引入高饱和品牌色块 */
.social-icon.microsoft { color: #5a6b7a; }
.social-icon.google { color: #6b8e8e; }
.social-icon.weibo { color: #b5763a; }
.social-icon.alipay { color: #4a8c9c; }
/* 桌面端（Mac / Windows）：木柱放大 */
@media (min-width: 901px) {
    .hanger { scale: 1.15; }
}
@media (min-width: 1600px) and (min-height: 950px) {
    .hanger { scale: 1.3; }
    .floor-shadow { top: 795px; }
}
@media (max-height: 860px) and (min-width: 901px) {
    .hanger { scale: .9; }
    .floor-shadow { top: 548px; }
    .scene-hint { bottom: 18px; }
    .paper-card .auth-card { padding: 30px 36px 26px; }
}

/* 移动端：场景在上，表单在下 */
@media (max-width: 900px) {
    .auth-page.auth-wabi {
        flex-direction: column;
        height: auto;
        min-height: 100svh;
        /* 场景区高度与挂饰缩放放变量里，挂饰 top 由它们反推 —— 见下面 .hanger */
        --scene-h: 280px;
        --hg-s: .62;
    }
    @supports (height: 100svh) {
        .auth-page.auth-wabi { --scene-h: clamp(276px, 42svh, 306px); }
    }
    /* body 也被 auth.css 设成了 grid（.auth-page{display:grid}），于是它和 main、备案栏
       一起当 grid item 被塞进同一行 —— 备案栏即使改回 static 仍叠在表单上。
       移动端让 body 退回普通块级流，main 与备案栏自然上下相接。 */
    html body.auth-page {
        display: block;
        height: auto;
        min-height: 100svh;
    }
    /* 必须显式盖回 height / min-height：
       基础规则里写了 .scene-side{height:100%;min-height:100%}，移动端只改了 flex 和 width，
       于是 flex item 的 min-height 压过 flex-basis —— 场景区被撑成整屏高(844px)，
       挂饰卡浮在顶上、下面空一大片，登录表单被推到视口之外（"下面的还没出来"）。 */
    .scene-side {
        order: -1;
        flex: 0 0 var(--scene-h);
        width: 100%;
        height: auto;
        min-height: 0;
        touch-action: pan-y;   /* 原 none：手机在场景区上下滑不动页面 */
    }
    /* hanger 原点 = H-6-614s ⇒ 小精灵顶=H-6-419s、卡片顶=H-6-360s、卡片底=H-6，
       卡片底部恒贴场景区下沿，下方不留空白；s=.62 是"精灵含叶冠能完整露出"的上限。 */
    .hanger { top: calc(var(--scene-h) - 6px - 614 * var(--hg-s) * 1px); scale: var(--hg-s); }
    .floor-shadow { top: calc(var(--scene-h) - 20px); width: 158px; }
    .scene-hint { display: none; }
    .auth-column.auth-wabi-col { flex: 1 1 auto; width: 100%; min-width: 0; max-width: none; padding: 0 18px 26px; justify-content: flex-start; }
    .paper-card { transform: rotate(-.3deg); }
    /* 备案栏是行内 style="position:fixed"，只能用 !important 把它放回文档流（否则压住表单输入框与主按钮） */
    #icp-filing-bar { position: static !important; padding: 14px 0 12px !important; }
}

/* 平板竖屏 / 折叠屏展开：同一个挂饰放大一档，否则卡片在这些宽度上太空 */
@media (min-width: 600px) and (max-width: 900px) {
    .auth-page.auth-wabi { --hg-s: .82; --scene-h: 400px; }
    @supports (height: 100svh) {
        .auth-page.auth-wabi { --scene-h: clamp(360px, 40svh, 430px); }
    }
    .floor-shadow { width: 220px; }
    .auth-column.auth-wabi-col { padding: 0 26px 30px; }
    .paper-card { width: min(520px, 100%); }
}