@charset "UTF-8";

        /* ============================================================
           登录 / 注册 — iOS 原生风格（按 Apple HIG + iOS 26 材质校准）
           参考：developer.apple.com/design/human-interface-guidelines
                 /color · /materials · /buttons · /segmented-controls

           配色：全部用 iOS 动态系统色的「语义角色」，不写死品牌蓝
                 tint / accent ....... systemBlue   #007AFF（按钮走 0A84FF→0070E0 渐变）
                 canvas .............. systemGroupedBackground #F2F2F7
                 card ................ systemBackground #FFFFFF（毛玻璃 .regularMaterial）
                 label ............... #000000
                 次要文字 ............ secondaryLabel rgba(60,60,67,.60)
                 占位符 / 图标 ....... tertiaryLabel  rgba(60,60,67,.30)
                 分隔线 .............. separator      rgba(60,60,67,.20)
                 错误 / 成功 ......... systemRed #FF3B30 / systemGreen #34C759
                 深色模式跟随系统自动切换（prefers-color-scheme）

           结构：分段控件 UISegmentedControl（带滑动滑块）
                 · 内嵌分组列表 Inset Grouped（图标 + 输入行 + 发丝分隔线）
                 · 行内动作（眼睛）44×44pt 命中区
                 · 视图中唯一的 prominent 填充按钮
           交互：按压态 / 焦点态 / 弹簧曲线 / 44pt 命中区 / 尊重「减弱动态效果」

           想恢复纯白底：把下面 --canvas 改成 #FFFFFF，--canvas-glow 改成 none 即可。

           契约：保留 .tab-button[data-tab]、.tab-pane、.auth-form、.form-input、
                 .input-action[data-toggle-password]、.qq-avatar、.field-tip、
                 .alert-error/.alert-success、.is-invalid 等类名与全部 id，
                 页面底部 JS 逻辑零改动（仅新增分段控件滑块的一行 class 切换）。
           ============================================================ */
        :root {
            color-scheme: light dark;

            /* ===== iOS 系统色（浅色模式实色） ===== */
            --system-blue: #007AFF;
            --system-blue-light: #0A84FF;
            --system-blue-deep: #0070E0;
            --system-indigo: #5856D6;
            --system-green: #34C759;
            --system-red: #FF3B30;

            /* ===== 语义角色 =====
               要换主题色只改这 3 行（tint / tint-soft / tint-ring）+
               下面 --system-blue-* 两个渐变色，其余不用动。
                 systemBlue   #007AFF / 渐变 #0A84FF→#0070E0   ← 当前
                 systemIndigo #5856D6 / 渐变 #6E6CE8→#4A48C4
                 systemTeal   #30B0C7 / 渐变 #3FC4DA→#2694A8
                 graphite     #8E8E93 / 渐变 #A0A0A6→#6E6E73 */
            --tint: #007AFF;
            --tint-soft: rgba(0, 122, 255, .10);
            --tint-ring: rgba(0, 122, 255, .22);
            --label: #000000;
            --label-2: rgba(60, 60, 67, .60);
            --label-3: rgba(60, 60, 67, .30);
            --separator: rgba(60, 60, 67, .20);
            --fill: rgba(120, 120, 128, .12);
            --fill-strong: rgba(120, 120, 128, .20);
            --surface: #FFFFFF;
            --card: rgba(255, 255, 255, .76);
            --card-stroke: rgba(255, 255, 255, .72);
            --chip: rgba(255, 255, 255, .62);
            --chip-stroke: rgba(255, 255, 255, .80);
            --ok-text: #248A3D;
            --bad-text: #D70015;
            --danger: var(--system-red);

            /* ===== 画布 =====
               半透明系统色做的柔光，模拟 iOS 壁纸景深；不引入任何背景图 */
            --canvas: #F2F2F7;
            --canvas-glow:
                radial-gradient(84% 48% at 6% -8%, rgba(0, 122, 255, .18) 0%, rgba(0, 122, 255, 0) 62%),
                radial-gradient(80% 46% at 104% 106%, rgba(88, 86, 214, .15) 0%, rgba(88, 86, 214, 0) 62%),
                linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 34%);

            /* ===== 形状 / 节奏（8pt 网格） ===== */
            --r-card: 26px;
            --r-group: 16px;
            --r-control: 14px;
            --gap: 14px;
            --spring: cubic-bezier(.34, 1.22, .64, 1);
            --ease: cubic-bezier(.32, .72, 0, 1);
        }

        @media (prefers-color-scheme: dark) {
            :root {
                --tint: #0A84FF;
                --tint-soft: rgba(10, 132, 255, .16);
                --tint-ring: rgba(10, 132, 255, .32);
                --label: #FFFFFF;
                --label-2: rgba(235, 235, 245, .60);
                --label-3: rgba(235, 235, 245, .32);
                --separator: rgba(84, 84, 88, .60);
                --fill: rgba(120, 120, 128, .32);
                --fill-strong: rgba(120, 120, 128, .44);
                --surface: #1C1C1E;
                --card: rgba(28, 28, 30, .74);
                --card-stroke: rgba(255, 255, 255, .10);
                --chip: rgba(44, 44, 46, .66);
                --chip-stroke: rgba(255, 255, 255, .10);
                --ok-text: #30D158;
                --bad-text: #FF453A;
                --canvas: #000000;
                --canvas-glow:
                    radial-gradient(84% 48% at 6% -8%, rgba(10, 132, 255, .26) 0%, rgba(10, 132, 255, 0) 62%),
                    radial-gradient(80% 46% at 104% 106%, rgba(94, 92, 230, .20) 0%, rgba(94, 92, 230, 0) 62%);
            }
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
        }

        html {
            -webkit-text-size-adjust: 100%;
            overflow-x: hidden;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
                         "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
            background-color: var(--canvas);
            background-image: var(--canvas-glow);
            background-repeat: no-repeat;
            color: var(--label);
            min-height: 100vh;
            min-height: 100dvh;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow-x: hidden;
            padding: calc(30px + env(safe-area-inset-top)) 20px calc(30px + env(safe-area-inset-bottom));
            letter-spacing: -0.01em;
            text-rendering: optimizeLegibility;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        ::selection {
            background: var(--tint-ring);
        }

        .container {
            position: relative;
            width: 100%;
            max-width: 396px;
        }

        /* ===== 顶部快捷入口：iOS 工具栏小胶囊（毛玻璃） ===== */
        .top-links {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 8px;
            margin-bottom: 18px;
            animation: riseIn .5s .26s var(--ease) both;
        }

        .top-links > a {
            display: inline-flex;
            align-items: center;
            height: 32px;
            padding: 0 14px;
            border-radius: 999px;
            font-size: 13px;
            font-weight: 500;
            color: var(--label-2);
            text-decoration: none;
            background: var(--chip);
            -webkit-backdrop-filter: blur(18px) saturate(180%);
            backdrop-filter: blur(18px) saturate(180%);
            box-shadow: inset 0 0 0 .5px var(--chip-stroke), 0 1px 2px rgba(16, 24, 40, .06);
            transition: color .2s ease, transform .18s var(--spring);
        }

        .top-links > a:hover { color: var(--label); }
        .top-links > a:active { transform: scale(.95); }

        /* ===== 主卡片：.regularMaterial 毛玻璃 ===== */
        .auth-card {
            position: relative;
            z-index: 1;
            padding: 26px 22px 18px;
            border-radius: var(--r-card);
            background: var(--card);
            -webkit-backdrop-filter: blur(30px) saturate(180%);
            backdrop-filter: blur(30px) saturate(180%);
            box-shadow:
                inset 0 0 0 .5px var(--card-stroke),
                0 1px 1.5px rgba(16, 24, 40, .05),
                0 14px 30px -14px rgba(16, 24, 40, .22),
                0 44px 70px -36px rgba(16, 24, 40, .30);
            animation: cardIn .62s var(--spring) both;
        }

        /* 卡片背后的柔光，让白色卡片浮起来（不参与裁剪） */
        .container::after {
            content: "";
            position: absolute;
            left: 50%;
            top: 6%;
            width: 104%;
            height: 58%;
            transform: translateX(-50%);
            background: radial-gradient(58% 52% at 50% 40%, rgba(0, 122, 255, .18), rgba(0, 122, 255, 0) 72%);
            filter: blur(30px);
            pointer-events: none;
            z-index: 0;
        }

        @keyframes cardIn {
            from { opacity: 0; transform: translateY(16px) scale(.986); }
            to   { opacity: 1; transform: none; }
        }

        @keyframes riseIn {
            from { opacity: 0; transform: translateY(10px); }
            to   { opacity: 1; transform: none; }
        }

        /* ===== 品牌区 ===== */
        .card-header {
            padding: 2px 0 20px;
            text-align: center;
            animation: riseIn .52s .04s var(--ease) both;
        }

        .brand-icon {
            width: 66px;
            height: 66px;
            margin: 0 auto 14px;
            background: #fff;
            /* iOS App 图标圆角 ≈ 22.37% */
            border-radius: 22.37%;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            box-shadow:
                0 0 0 .5px rgba(0, 0, 0, .06),
                0 10px 22px -10px rgba(0, 64, 140, .45),
                0 2px 6px rgba(16, 24, 40, .10);
        }

        .brand-icon img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: inherit;
            display: block;
        }

        .card-title {
            font-size: 26px;
            line-height: 1.2;
            font-weight: 700;
            letter-spacing: -0.028em;
            color: var(--label);
        }

        /* ===== 分段控件：UISegmentedControl =====
           轨道 tertiarySystemFill、圆角 11px、内缩 2px，
           选中项是白色滑块 + 弹簧位移，文字统一 label 色 */
        .tab-nav {
            position: relative;
            display: flex;
            height: 38px;
            padding: 2px;
            margin: 0 0 18px;
            background: var(--fill);
            border-radius: 11px;
            animation: riseIn .52s .10s var(--ease) both;
        }

        .tab-thumb {
            position: absolute;
            top: 2px;
            left: 2px;
            width: calc(50% - 2px);
            height: calc(100% - 4px);
            border-radius: 9px;
            background: var(--surface);
            box-shadow:
                inset 0 0 0 .5px rgba(0, 0, 0, .04),
                0 3px 8px rgba(0, 0, 0, .12),
                0 1px 1px rgba(0, 0, 0, .04);
            transition: transform .34s var(--spring);
            pointer-events: none;
        }

        .tab-nav.is-register .tab-thumb { transform: translateX(100%); }

        .tab-button {
            position: relative;
            z-index: 1;
            flex: 1;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            height: 34px;
            border: none;
            background: transparent;
            border-radius: 9px;
            font-family: inherit;
            font-size: 14px;
            font-weight: 600;
            color: var(--label);
            cursor: pointer;
            transition: opacity .2s ease, transform .2s var(--spring);
        }

        .tab-button:active { opacity: .55; transform: scale(.97); }
        .tab-button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--tint-ring); }

        /* ===== 提示条：iOS 26 的淡色胶囊 ===== */
        .alert {
            display: flex;
            align-items: flex-start;
            gap: 8px;
            margin: 0 0 14px;
            padding: 11px 13px;
            border-radius: 14px;
            font-size: 13.5px;
            line-height: 1.5;
            animation: alertIn .34s var(--spring) both;
        }

        .alert svg { width: 16px; height: 16px; flex: none; margin-top: 1.5px; }
        .alert-error { background: rgba(255, 59, 48, .10); color: var(--bad-text); }
        .alert-success { background: rgba(52, 199, 89, .12); color: var(--ok-text); }

        @keyframes alertIn {
            from { opacity: 0; transform: translateY(-6px) scale(.98); }
            to   { opacity: 1; transform: none; }
        }

        /* ===== 「添加其他账号」提示（从切换账号列表过来时显示） ===== */
        .add-hint {
            display: flex;
            align-items: flex-start;
            gap: 8px;
            margin: 0 0 14px;
            padding: 11px 13px;
            border-radius: 14px;
            font-size: 13.5px;
            line-height: 1.5;
            color: var(--tint);
            background: var(--tint-soft);
            animation: alertIn .34s var(--spring) both;
        }

        .add-hint svg { width: 16px; height: 16px; flex: none; margin-top: 1.5px; }

        /* ===== 标签页内容 ===== */
        .tab-content {
            animation: riseIn .52s .14s var(--ease) both;
        }

        .tab-pane { display: none; }

        .tab-pane.active {
            display: block;
            animation: paneIn .34s var(--ease) both;
        }

        @keyframes paneIn {
            from { opacity: 0; transform: translateY(6px); }
            to   { opacity: 1; transform: none; }
        }

        .auth-form {
            display: flex;
            flex-direction: column;
            gap: var(--gap);
        }

        /* ===== 内嵌分组列表：Inset Grouped =====
           白底圆角容器 + 发丝分隔线，iOS「设置」同款 */
        .field-group {
            background: var(--surface);
            border-radius: var(--r-group);
            overflow: hidden;
            box-shadow:
                inset 0 0 0 .5px var(--separator),
                0 1px 2px rgba(16, 24, 40, .04);
        }

        .field-row {
            display: flex;
            align-items: center;
            gap: 11px;
            min-height: 54px;
            padding: 0 14px;
            transition: background .2s var(--ease);
        }

        .field-row + .field-row {
            border-top: .5px solid var(--separator);
        }

        .field-row:focus-within { background: var(--tint-soft); }

        .field-icon {
            flex: none;
            display: grid;
            place-items: center;
            width: 22px;
            height: 22px;
            color: var(--label-3);
            transition: color .2s ease;
        }

        .field-icon svg { width: 20px; height: 20px; }
        .field-row:focus-within .field-icon { color: var(--tint); }

        .input-wrap {
            position: relative;
            flex: 1 1 auto;
            min-width: 0;
            display: flex;
            align-items: center;
        }

        .form-input {
            width: 100%;
            height: 54px;
            border: none;
            background: transparent;
            font-family: inherit;
            /* 17px：body 字号，同时避免 iOS Safari 聚焦时自动放大页面 */
            font-size: 17px;
            letter-spacing: -0.01em;
            color: var(--label);
            caret-color: var(--tint);
            padding: 0;
            outline: none;
            appearance: none;
            -webkit-appearance: none;
            border-radius: 0;
        }

        .form-input::placeholder { color: var(--label-3); }

        .form-input--pw,
        .form-input--qq { padding-right: 46px; }

        /* 校验失败：红字 + 整行淡红底（:has 不支持的旧内核只退化到红字） */
        .form-input.is-invalid { color: var(--bad-text); }
        .form-input.is-invalid::placeholder { color: rgba(255, 59, 48, .55); }
        .field-row:has(.is-invalid) { background: rgba(255, 59, 48, .07); }
        .field-row:has(.is-invalid) .field-icon { color: var(--system-red); }

        /* 自动填充：抹掉浏览器默认的黄底，保持分组行干净 */
        .form-input:-webkit-autofill,
        .form-input:-webkit-autofill:hover,
        .form-input:-webkit-autofill:focus {
            -webkit-text-fill-color: var(--label);
            -webkit-box-shadow: 0 0 0 999px var(--surface) inset;
            transition: background-color 9999s ease-in-out 0s;
        }

        /* ===== 行内动作按钮（眼睛）：命中区 44×44pt ===== */
        .input-action {
            position: absolute;
            top: 50%;
            right: -9px;
            transform: translateY(-50%);
            width: 44px;
            height: 44px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: none;
            background: transparent;
            border-radius: 12px;
            color: var(--label-3);
            cursor: pointer;
            transition: color .2s ease, background .2s ease, transform .16s var(--spring);
        }

        .input-action:hover { color: var(--label-2); background: var(--fill); }
        .input-action:active { background: var(--fill-strong); transform: translateY(-50%) scale(.92); }
        .input-action.is-on { color: var(--tint); }
        .input-action svg { width: 20px; height: 20px; }
        .input-action .eye-off { display: none; }
        .input-action.is-on .eye-open { display: none; }
        .input-action.is-on .eye-off { display: block; }

        /* ===== QQ 头像预览（边输边出） ===== */
        .qq-avatar {
            position: absolute;
            top: 50%;
            right: -3px;
            transform: translateY(-50%) scale(.7);
            width: 32px;
            height: 32px;
            border-radius: 50%;
            overflow: hidden;
            background: var(--fill);
            box-shadow: 0 0 0 2px var(--surface), 0 1px 3px rgba(16, 24, 40, .16);
            opacity: 0;
            pointer-events: none;
            transition: opacity .25s ease, transform .34s var(--spring);
        }

        .qq-avatar.is-show { opacity: 1; transform: translateY(-50%) scale(1); }
        .qq-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

        /* ===== 字段提示 ===== */
        .field-tip {
            margin: -4px 4px 0;
            font-size: 13px;
            line-height: 1.5;
            color: var(--label-3);
            transition: color .2s ease;
        }

        .field-tip.is-ok { color: var(--ok-text); }
        .field-tip.is-bad { color: var(--bad-text); }

        /* ===== 主按钮：视图中唯一的 prominent 按钮 =====
           HIG：accent 底色填充、圆角连续、必须有按压态 */
        .btn {
            width: 100%;
            height: 52px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            border: none;
            border-radius: var(--r-control);
            font-family: inherit;
            font-size: 17px;
            font-weight: 600;
            letter-spacing: -0.01em;
            cursor: pointer;
            user-select: none;
            -webkit-user-select: none;
            touch-action: manipulation;
            transition: transform .16s var(--spring), filter .2s ease, box-shadow .2s ease;
        }

        .btn svg { width: 18px; height: 18px; }
        .btn-block { margin-top: 2px; }

        .btn-primary {
            color: #fff;
            background-image: linear-gradient(180deg, var(--system-blue-light) 0%, var(--system-blue-deep) 100%);
            box-shadow:
                inset 0 .5px 0 rgba(255, 255, 255, .28),
                0 10px 20px -10px rgba(0, 112, 224, .70),
                0 2px 6px rgba(0, 60, 140, .16);
        }

        .btn-primary:hover { filter: brightness(1.04); }

        .btn-primary:active {
            filter: brightness(.93);
            transform: scale(.975);
            box-shadow:
                inset 0 .5px 0 rgba(255, 255, 255, .18),
                0 4px 10px -6px rgba(0, 112, 224, .60);
        }

        .btn:focus-visible {
            outline: none;
            box-shadow: 0 0 0 4px var(--tint-ring), 0 8px 18px -10px rgba(0, 112, 224, .70);
        }

        /* ===== 次级操作：文字按钮（用样式区分主次，不用尺寸） ===== */
        .aux-links {
            margin-top: 6px;
            text-align: center;
        }

        .aux-links a {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 44px;
            padding: 0 12px;
            font-size: 15px;
            color: var(--tint);
            text-decoration: none;
            border-radius: 10px;
            transition: opacity .2s ease;
        }

        .aux-links a:active { opacity: .5; }
        .aux-links a:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--tint-ring); }

        /* ===== 卡片页脚 ===== */
        .footer {
            margin-top: 20px;
            padding-top: 14px;
            border-top: .5px solid var(--separator);
            text-align: center;
            font-size: 12px;
            line-height: 1.9;
            color: var(--label-2);
        }

        .footer a {
            color: inherit;
            text-decoration: none;
            transition: color .2s ease, opacity .2s ease;
        }

        .footer a:hover { color: var(--label); }
        .footer a:active { opacity: .5; }
        .footer .dot { opacity: .4; margin: 0 8px; }

        /* ===== 兜底：不支持毛玻璃时退回实色 ===== */
        @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
            .auth-card { background: var(--surface); }
            .top-links > a { background: var(--surface); }
        }

        /* ===== 小屏适配 ===== */
        @media (max-width: 480px) {
            body {
                padding: calc(22px + env(safe-area-inset-top)) 16px calc(22px + env(safe-area-inset-bottom));
            }

            .auth-card { padding: 22px 18px 16px; border-radius: 24px; }
            .card-title { font-size: 24px; }
            .brand-icon { width: 60px; height: 60px; }
            .card-header { padding-bottom: 18px; }
        }

        @media (max-height: 700px) {
            body { padding-top: 18px; padding-bottom: 18px; }
        }

        /* ===== 减弱动态效果 ===== */
        @media (prefers-reduced-motion: reduce) {
            *,
            *::before,
            *::after {
                animation-duration: .001ms !important;
                animation-delay: 0s !important;
                transition-duration: .001ms !important;
            }
        }

        /* ===== 会员商城入口（2026-10-11）=====
           站长反馈：原来底下一行小字「会员商城」在手机上几乎看不见。
           改成图标 + 两行文字的整块按钮，标题不换行、不省略；窄屏直接隐藏副标题，保证「会员商城」四个字完整。 */
        .shop-entry{display:flex;align-items:center;gap:12px;margin:16px 0 0;padding:13px 14px;
            border:1px solid var(--tint-ring);border-radius:14px;background:var(--tint-soft);
            text-decoration:none;color:inherit;transition:transform .12s ease;
            -webkit-tap-highlight-color:transparent}
        .shop-entry:active{transform:scale(.99)}
        .shop-entry-ic{width:40px;height:40px;border-radius:12px;flex-shrink:0;display:flex;
            align-items:center;justify-content:center;color:#fff;
            background:linear-gradient(135deg,#0A84FF,#0070E0);box-shadow:0 6px 14px var(--tint-ring)}
        .shop-entry-ic svg{width:21px;height:21px}
        .shop-entry-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
        .shop-entry-tx b{font-size:15px;font-weight:700;color:var(--label);white-space:nowrap}
        .shop-entry-tx i{font-style:normal;font-size:11.5px;color:var(--label-2);line-height:1.5;
            overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
        .shop-entry-go{flex-shrink:0;font-size:13px;font-weight:600;color:var(--tint);white-space:nowrap}
        @media (max-width: 360px) { .shop-entry-tx i { display: none; } }