/* ============================================================
   Illustration layer - 文艺插画风 / watercolor paper aesthetic
   Loaded AFTER redesign.css. It re-skins the design tokens and a
   handful of signature components. All original class names and
   layout behaviour are preserved; this is a purely visual layer.
   ============================================================ */

:root {
    /* Paper canvas - warm off-white, like cotton watercolour stock */
    --r-bg: #FAF6EF;
    --r-bg-deep: #F1EAD9;
    --r-surface: #FFFDF8;
    --r-surface-2: #F8F2E7;

    /* Ink text - soft sepia rather than pure black */
    --r-ink: #2E2A24;
    --r-ink-soft: #57503F;
    --r-ink-muted: #8C8370;
    --r-ink-faint: #B8AE97;
    --r-line: rgba(70, 60, 40, 0.10);
    --r-line-strong: rgba(70, 60, 40, 0.18);

    /* Botanical accent - muted terracotta + sage */
    --r-accent: #D98E73;
    --r-accent-deep: #B96A50;
    --r-accent-soft: #F8E9DF;
    --r-accent-ink: #8A4530;
    --r-sage: #8FA88B;
    --r-sage-deep: #6E8A6B;
    --r-sage-soft: #EAF0E6;
    --r-sky: #92A9BE;
    --r-sky-soft: #E9EFF4;

    /* Semantic - hand-tinted, low saturation */
    --r-success: #6E8A6B;
    --r-success-soft: #EAF0E6;
    --r-danger: #C0705F;
    --r-danger-soft: #F7E8E4;
    --r-warning: #C0913F;
    --r-warning-soft: #F8EFDC;
    --r-info: #6B87A0;
    --r-info-soft: #E9EFF4;

    /* Type - handwritten display, calm body */
    --r-font-display: 'ZCOOL KuaiLe', 'Noto Sans SC', 'PingFang SC', sans-serif;
    --r-font-body: 'Noto Sans SC', 'Outfit', -apple-system, 'PingFang SC', sans-serif;

    /* Softer, rounder geometry */
    --r-r-xs: 10px;
    --r-r-sm: 14px;
    --r-r-md: 20px;
    --r-r-lg: 28px;
    --r-r-xl: 36px;

    /* Gentle, papery elevation (no hard dark shadows) */
    --r-shadow-1: 0 1px 0 rgba(255,255,255,0.7), 0 3px 10px rgba(120, 100, 70, 0.06);
    --r-shadow-2: 0 2px 6px rgba(120, 100, 70, 0.07), 0 12px 28px rgba(120, 100, 70, 0.09);
    --r-shadow-3: 0 4px 12px rgba(120, 100, 70, 0.08), 0 22px 48px rgba(120, 100, 70, 0.12);
    --r-shadow-accent: 0 8px 22px rgba(185, 106, 80, 0.22);

    /* Inherit into legacy tokens so untouched components follow */
    --accent: var(--r-accent);
    --accent-hover: #CE8064;
    --accent-deep: var(--r-accent-deep);
    --accent-light: var(--r-accent-soft);
}

/* --- Canvas: layered watercolour washes + fibre texture --- */
body {
    background-color: var(--r-bg);
    background-image:
        radial-gradient(900px 520px at 8% -6%, rgba(217, 142, 115, 0.14), transparent 62%),
        radial-gradient(760px 460px at 98% 2%, rgba(143, 168, 139, 0.13), transparent 60%),
        radial-gradient(700px 520px at 50% 108%, rgba(146, 169, 190, 0.10), transparent 62%);
    background-attachment: fixed;
}

/* Softer grain, like cold-press paper */
body::after {
    opacity: 0.020;
}

/* --- Nav: torn-paper top bar --- */
.glass-nav {
    background: rgba(250, 246, 239, 0.86);
    backdrop-filter: blur(14px) saturate(1.1);
    -webkit-backdrop-filter: blur(14px) saturate(1.1);
    border-bottom: 1px solid var(--r-line);
    box-shadow: 0 1px 0 rgba(255,255,255,0.6), 0 6px 20px rgba(120,100,70,0.05);
}

.glass-nav .brand-text {
    font-family: var(--r-font-display);
    letter-spacing: 0.04em;
    color: var(--r-ink);
}

.glass-nav .nav-link {
    border-radius: var(--r-r-pill);
    transition: background-color var(--r-t-fast) var(--r-ease), color var(--r-t-fast) var(--r-ease);
}
.glass-nav .nav-link:hover {
    background: rgba(217, 142, 115, 0.10);
}
.glass-nav .nav-link.active {
    background: var(--r-accent-soft);
    color: var(--r-accent-ink);
}

/* --- Cards: illustration mounts (paper card + soft inner frame) --- */
.glass-card {
    background: var(--r-surface);
    border: 1px solid var(--r-line);
    border-radius: var(--r-r-lg);
    box-shadow: var(--r-shadow-1);
}
.glass-card::before {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
    border-radius: inherit;
}
.glass-card:hover {
    border-color: rgba(185, 106, 80, 0.26);
    box-shadow: var(--r-shadow-2);
    transform: translateY(-2px);
}

.glass-card-title {
    font-family: var(--r-font-display);
    font-weight: 400;
    letter-spacing: 0.02em;
    color: var(--r-ink);
}

/* --- Buttons: soft inked, tactile --- */
.glass-btn {
    border-radius: var(--r-r-pill);
    transition: transform var(--r-t-fast) var(--r-ease), box-shadow var(--r-t) var(--r-ease), background-color var(--r-t-fast) var(--r-ease);
}
.glass-btn:active { transform: scale(0.97); }

.glass-btn-primary {
    background: linear-gradient(150deg, var(--r-accent), var(--r-accent-deep));
    color: #fff;
    border: none;
    box-shadow: var(--r-shadow-accent);
}
.glass-btn-primary:hover {
    background: linear-gradient(150deg, #E09A80, #C2735A);
    box-shadow: 0 10px 26px rgba(185, 106, 80, 0.28);
}

.glass-btn-secondary {
    background: var(--r-surface-2);
    color: var(--r-ink);
    border: 1px solid var(--r-line-strong);
}
.glass-btn-secondary:hover {
    background: var(--r-accent-soft);
    border-color: rgba(185, 106, 80, 0.28);
    color: var(--r-accent-ink);
}

/* --- Inputs: inset paper field --- */
.glass-input {
    background: var(--r-surface-2);
    border: 1px solid var(--r-line-strong);
    border-radius: var(--r-r-pill);
    color: var(--r-ink);
}
.glass-input:hover { border-color: rgba(120, 100, 70, 0.26); }
.glass-input:focus {
    border-color: var(--r-accent);
    background: var(--r-surface);
    box-shadow: 0 0 0 3px rgba(217, 142, 115, 0.16);
}

/* --- Sidebar: scrapbook panel --- */
.sidebar {
    background: linear-gradient(180deg, #FBF6EC, #F5EDDF);
    border-right: 1px solid var(--r-line);
}
.sidebar-brand-text {
    font-family: var(--r-font-display);
    letter-spacing: 0.03em;
    color: var(--r-ink);
}
.sidebar-brand-icon {
    background: linear-gradient(150deg, var(--r-accent), var(--r-sage));
    color: #fff;
    box-shadow: 0 6px 16px rgba(185, 106, 80, 0.24);
}
.sidebar-section-title {
    font-family: var(--r-font-display);
    color: var(--r-ink-muted);
    letter-spacing: 0.06em;
}
.sidebar-link {
    border-radius: var(--r-r-sm);
    transition: background-color var(--r-t-fast) var(--r-ease), color var(--r-t-fast) var(--r-ease), transform var(--r-t-fast) var(--r-ease);
}
.sidebar-link:hover {
    background: rgba(217, 142, 115, 0.10);
    transform: translateX(2px);
}
.sidebar-link.active {
    background: var(--r-accent-soft);
    color: var(--r-accent-ink);
}

/* --- Chat list: illustration cards, calmer than an IM list --- */
.session-card {
    background: var(--r-surface);
    border: 1px solid var(--r-line);
    border-radius: var(--r-r-md);
    box-shadow: var(--r-shadow-1);
    transition: transform var(--r-t) var(--r-ease), box-shadow var(--r-t) var(--r-ease), border-color var(--r-t) var(--r-ease);
}
.session-card:hover {
    border-color: rgba(185, 106, 80, 0.22);
    box-shadow: var(--r-shadow-2);
    transform: translateY(-2px);
}
.session-avatar {
    border-radius: var(--r-r-sm);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35);
}
.session-name {
    font-family: var(--r-font-display);
    font-weight: 400;
    color: var(--r-ink);
}
.session-source {
    border-radius: var(--r-r-pill);
}

/* --- Chat view: stationery conversation --- */
.chat-view-page {
    background-image:
        radial-gradient(680px 380px at 100% 0%, rgba(143, 168, 139, 0.10), transparent 60%);
}
.chat-peer-name {
    font-family: var(--r-font-display);
    font-weight: 400;
    color: var(--r-ink);
}
.chat-peer-avatar {
    border-radius: var(--r-r-sm);
    box-shadow: var(--r-shadow-1);
}
.chat-source-tag {
    border-radius: var(--r-r-pill);
}
.chat-day-sep span,
.chat-time-sep span {
    background: var(--r-surface-2);
    border: 1px solid var(--r-line);
    color: var(--r-ink-muted);
    border-radius: var(--r-r-pill);
}

.message-bubble {
    background: var(--r-surface);
    border: 1px solid var(--r-line);
    border-radius: 20px;
    border-bottom-left-radius: 6px;
    color: var(--r-ink);
    box-shadow: var(--r-shadow-1);
}
.chat-message.user .message-bubble {
    background: linear-gradient(150deg, var(--r-accent), var(--r-accent-deep));
    border: none;
    color: #fff;
    border-radius: 20px;
    border-bottom-right-radius: 6px;
    box-shadow: 0 6px 16px rgba(185, 106, 80, 0.20);
}
.chat-avatar.bot {
    background: linear-gradient(150deg, var(--r-accent), var(--r-sage));
}
.chat-avatar.user {
    background: linear-gradient(150deg, #A9BCCB, #7C97AE);
}

/* --- Stat cards --- */
.stat-card {
    background: var(--r-surface);
    border: 1px solid var(--r-line);
    border-radius: var(--r-r-md);
    box-shadow: var(--r-shadow-1);
}
.stat-card:hover {
    border-color: rgba(185, 106, 80, 0.20);
    box-shadow: var(--r-shadow-2);
}
.stat-value {
    font-family: var(--r-font-display);
    color: var(--r-ink);
}
.stat-label { color: var(--r-ink-muted); }

/* --- Persona cards --- */
.persona-card {
    background: var(--r-surface);
    border: 1px solid var(--r-line);
    border-radius: var(--r-r-md);
    box-shadow: var(--r-shadow-1);
}
.persona-card:hover { box-shadow: var(--r-shadow-2); }
.persona-card.active {
    border-color: var(--r-accent);
    box-shadow: 0 0 0 3px rgba(217, 142, 115, 0.16), var(--r-shadow-1);
}
.persona-avatar {
    border-radius: var(--r-r-sm);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4);
}

/* --- Auth / hero: framed illustration --- */
.auth-card {
    background: var(--r-surface);
    border: 1px solid var(--r-line);
    border-radius: var(--r-r-xl);
    box-shadow: var(--r-shadow-3);
}
.auth-title {
    font-family: var(--r-font-display);
    letter-spacing: 0.03em;
    color: var(--r-ink);
}
.auth-subtitle { color: var(--r-ink-muted); }

/* --- Bind / QR: keepsake card --- */
.qr-box {
    background: #fff;
    border-radius: var(--r-r-md);
    box-shadow: var(--r-shadow-2);
    border: 1px solid var(--r-line);
}
.bind-prompt {
    background: var(--r-sage-soft);
    border: 1px dashed rgba(110, 138, 107, 0.4);
    border-radius: var(--r-r-md);
}
.bind-prompt-title {
    font-family: var(--r-font-display);
    color: var(--r-sage-deep);
}

/* --- Page headers --- */
.page-title {
    font-family: var(--r-font-display);
    letter-spacing: 0.02em;
    color: var(--r-ink);
}
.page-subtitle,
.page-desc {
    color: var(--r-ink-muted);
}

/* --- Badges / tags --- */
.badge { border-radius: var(--r-r-pill); }
.chat-source-tag.web { color: var(--r-accent-ink); background: var(--r-accent-soft); }

/* --- Toast --- */
.toast {
    background: var(--r-surface);
    border: 1px solid var(--r-line-strong);
    border-radius: var(--r-r-md);
    box-shadow: var(--r-shadow-3);
}

/* --- Profile --- */
.profile-card {
    background: var(--r-surface);
    border: 1px solid var(--r-line);
    border-radius: var(--r-r-lg);
    box-shadow: var(--r-shadow-1);
}
.profile-card-title {
    font-family: var(--r-font-display);
    font-weight: 400;
}

/* --- Nav avatar --- */
.glass-nav .nav-avatar,
.nav-avatar {
    background: linear-gradient(150deg, var(--r-accent), var(--r-sage));
}

/* --- QQ bind illustrated guide --- */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.qq-guide-step {
    transition: transform var(--r-t) var(--r-ease), box-shadow var(--r-t) var(--r-ease), border-color var(--r-t) var(--r-ease);
}
.qq-guide-step:hover {
    transform: translateY(-3px);
    box-shadow: var(--r-shadow-2);
    border-color: rgba(185, 106, 80, 0.24);
}
.qq-guide-shot img {
    transition: transform var(--r-t-slow) var(--r-ease);
}
.qq-guide-step:hover .qq-guide-shot img {
    transform: scale(1.03);
}

/* --- Platform-distinct accents: QQ (azure) vs WeChat (green) --- */
.nav-link-qq,
.sidebar-link-qq .sidebar-label,
.mobile-nav-item.mobile-nav-qq {
    --plat-qq: #12B7F5;
    --plat-qq-soft: rgba(18, 183, 245, 0.12);
}
.nav-link-wx,
.sidebar-link-wx .sidebar-label,
.mobile-nav-item.mobile-nav-wx {
    --plat-wx: #07C160;
    --plat-wx-soft: rgba(7, 193, 96, 0.12);
}

/* PC nav: platform dot marker + hover tint */
.glass-nav .nav-link-qq::before,
.glass-nav .nav-link-wx::before {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
    background: var(--plat-qq);
}
.glass-nav .nav-link-wx::before { background: var(--plat-wx); }
.glass-nav .nav-link-qq:hover { color: var(--plat-qq) !important; }
.glass-nav .nav-link-wx:hover { color: var(--plat-wx) !important; }
.glass-nav .nav-link-qq.active { color: var(--plat-qq) !important; }
.glass-nav .nav-link-wx.active { color: var(--plat-wx) !important; }

/* Sidebar: platform colour on label + soft active/hover background */
.sidebar-link-qq svg { color: var(--plat-qq); }
.sidebar-link-wx svg { color: var(--plat-wx); }
.sidebar-link-qq .sidebar-label { color: var(--plat-qq); font-weight: 600; }
.sidebar-link-wx .sidebar-label { color: var(--plat-wx); font-weight: 600; }
.sidebar-link-qq.active,
.sidebar-link-qq:hover { background: var(--plat-qq-soft); }
.sidebar-link-wx.active,
.sidebar-link-wx:hover { background: var(--plat-wx-soft); }

/* Mobile nav: platform tag chip */
.mobile-nav-item.mobile-nav-qq,
.mobile-nav-item.mobile-nav-wx {
    display: flex;
    align-items: center;
}
.mobile-nav-item.mobile-nav-qq::after,
.mobile-nav-item.mobile-nav-wx::after {
    content: 'QQ';
    font-size: 0.62rem;
    padding: 1px 6px;
    border-radius: 6px;
    margin-left: 8px;
    color: #fff;
    background: var(--plat-qq);
}
.mobile-nav-item.mobile-nav-wx::after {
    content: '微信';
    background: var(--plat-wx);
}

/* Binding page header accent: QQ azure / WeChat green */
.plat-qq .page-title { color: #12B7F5; }
.plat-wx .page-title { color: #07C160; }

/* Binding card platform tinting (QQ page uses .plat-qq wrapper, WeChat .plat-wx) */
.plat-qq .wechat-qr-icon,
.plat-qq .wechat-icon {
    background: rgba(18, 183, 245, 0.12);
    color: #12B7F5;
}
.plat-wx .wechat-qr-icon,
.plat-wx .wechat-icon {
    background: rgba(7, 193, 96, 0.12);
    color: #07C160;
}
.plat-qq .qr-step span { background: #12B7F5; }
.plat-wx .qr-step span { background: #07C160; }
.plat-qq .wechat-bind { border-color: rgba(18, 183, 245, 0.24); }
.plat-wx .wechat-bind { border-color: rgba(7, 193, 96, 0.24); }

/* Boot loading placeholder (shown before first render / during auth check) */
.boot-loading {
    min-height: 70vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    color: var(--text-muted);
    font-size: 0.9rem;
}
.boot-spinner {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 3px solid var(--border);
    border-top-color: var(--accent);
    animation: bootSpin 0.8s linear infinite;
}
@keyframes bootSpin {
    to { transform: rotate(360deg); }
}

/* ============================================================
   移动端全局适配 (Mobile adaptation)
   覆盖所有用户面板页面的窄屏问题：表格横向滚动、硬编码栅格降列、
   固定宽度元素收缩、页面内边距与可点区域优化。
   断点：1024 / 768 / 480 / 380
   ============================================================ */

/* ---- 1. 表格横向滚动：避免 3-6 列表格撑破页面 ---- */
.table-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    margin-bottom: 4px;
}
.table-scroll::-webkit-scrollbar { height: 6px; }
.table-scroll .log-table { min-width: 100%; }
.table-scroll .log-table th,
.table-scroll .log-table td { white-space: nowrap; }

/* 窄屏下让描述列可以换行，避免整表过宽 */
.table-scroll .log-table td.wrap,
.table-scroll .log-table th.wrap { white-space: normal; }

/* ---- 2. 全局防溢出兜底 ---- */
html, body { max-width: 100%; overflow-x: hidden; }

.main-container,
.main-content,
.page-header,
.glass-card,
.form-card {
    max-width: 100%;
    box-sizing: border-box;
}

img, svg, video, canvas { max-width: 100%; height: auto; }

pre, code {
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* 长文本（邮箱、链接、Token）在窄屏不撑破容器 */
.profile-info-value,
.binding-name,
.binding-status,
.page-desc,
.page-title { overflow-wrap: anywhere; }

/* ---- 2b. 移动端导航栏降高，回收纵向空间 ----
   所有偏移量均通过 var(--nav-height) 派生，覆写该变量即可全局生效 */
@media (max-width: 768px) {
    :root { --nav-height: 60px; }
}
@media (max-width: 380px) {
    :root { --nav-height: 56px; }
}

/* ---- 3. 通用页面头部：标题+操作按钮在窄屏换行 ---- */
@media (max-width: 768px) {
    .page-header {
        flex-wrap: wrap !important;
        gap: 10px;
        row-gap: 12px;
    }
    .page-header > div:first-child { min-width: 0; flex: 1 1 100%; }
    .page-header > .glass-btn,
    .page-header > a.glass-btn {
        flex: 0 0 auto;
        align-self: flex-start;
    }

    /* 主内容内边距收紧 */
    .main-content { padding: 20px 14px 72px; }
    .main-container { padding-left: 14px; padding-right: 14px; }

    /* 卡片圆角与内边距在窄屏收紧 */
    .glass-card { padding: 18px 16px; }
    .glass-card-lg { padding: 20px 18px; }

    /* 按钮：窄屏占满一行的场景 */
    .btn-block, .glass-btn.btn-block { width: 100%; }

    /* 表单行在窄屏堆叠 */
    .form-row,
    .form-group-row {
        grid-template-columns: 1fr !important;
        flex-direction: column !important;
    }

    /* 模态框：贴近屏幕边缘并允许内部滚动 */
    .modal-overlay { padding: 12px; align-items: flex-end; }
    .modal {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 88vh;
        overflow-y: auto;
        border-radius: 22px 22px 16px 16px;
    }
    .modal-header { padding: 18px 18px 12px; }
    .modal-body { padding: 16px 18px !important; }
    .modal-footer { padding: 14px 18px !important; flex-wrap: wrap; gap: 8px; }
    .modal-footer .glass-btn { flex: 1 1 45%; }

    /* Toast 在窄屏居中且不溢出 */
    .toast-container { left: 12px; right: 12px; }
    .toast { width: 100%; }
}

/* ---- 4. 窄屏 768px 以下：硬编码栅格降列 ---- */
@media (max-width: 768px) {
    /* 人设卡片网格：最小宽度降低，保证 2 列可容纳 */
    .persona-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

    /* 统计卡 / 快捷入口：至少 2 列 */
    .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

    /* 会员套餐：单列铺满 */
    #plansContainer { grid-template-columns: 1fr !important; }

    /* 邀请统计：3 列保底可读 */
    #inviteStats { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; }

    /* 对话详情页统计条 */
    .chat-stat-bar { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

    /* 行内硬编码两列栅格（人设表单、设置项等）降为单列 */
    [style*="grid-template-columns:1fr 1fr"],
    [style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    /* 人脸/联系方式等两列信息块降为单列 */
    [style*="grid-template-columns:repeat(auto-fit,minmax(280px"],
    [style*="grid-template-columns:repeat(auto-fill,minmax(280px"] {
        grid-template-columns: 1fr !important;
    }
}

/* ---- 5. 480px 以下：紧凑模式 ---- */
@media (max-width: 480px) {
    body { font-size: 14px; }

    h1 { font-size: 1.6rem; }
    h2, .page-title { font-size: 1.24rem; }
    h3 { font-size: 1.1rem; }

    .glass-nav .brand-text { font-size: 1.06rem; }
    .glass-nav .brand-icon { width: 32px; height: 32px; }
    .glass-nav { padding: 0 14px; }

    /* 人设卡片：极小屏单列，避免文字挤压 */
    .persona-grid { grid-template-columns: 1fr !important; }

    /* 统计卡：极小屏单列更易读 */
    .stat-grid { grid-template-columns: 1fr !important; }

    /* 快捷入口保持 2 列（图标型） */
    .action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

    /* 邀请统计在极小屏改为单列，避免三位数字换行 */
    #inviteStats { grid-template-columns: 1fr !important; }

    /* 对话详情统计条单列 */
    .chat-stat-bar { grid-template-columns: 1fr !important; }

    /* 主内容再收紧 */
    .main-content { padding: 16px 12px 68px; }
    .main-container { padding-left: 12px; padding-right: 12px; }
    .glass-card { padding: 16px 14px; }

    /* 页面头部按钮占满整行，便于点按 */
    .page-header > .glass-btn,
    .page-header > a.glass-btn { flex: 1 1 100%; text-align: center; }

    /* 模态框全屏化 */
    .modal-overlay { padding: 0; align-items: flex-end; }
    .modal {
        max-height: 92vh;
        border-radius: 20px 20px 0 0;
    }
    .modal-footer .glass-btn { flex: 1 1 100%; }

    /* 表格最小宽度降低，减少横向滚动距离 */
    .table-scroll .log-table th,
    .table-scroll .log-table td { padding: 10px 12px; }
    .table-scroll .log-table th { font-size: 0.68rem; }
    .table-scroll .log-table td { font-size: 0.8rem; }

    /* 二维码容器自适应，避免固定 220px 在极小屏溢出 */
    .qr-box { padding: 12px; max-width: 100%; box-sizing: border-box; }
    #qrCodeContainer,
    #qrCodeContainer canvas,
    #qrCodeContainer img,
    .qr-code,
    .wechat-qr canvas,
    .wechat-qr img {
        max-width: 100% !important;
        height: auto !important;
    }
}

/* ---- 6. 极小屏 380px 以下：极限收缩 ---- */
@media (max-width: 380px) {
    .glass-nav { padding: 0 10px; }
    .glass-nav .brand-text { font-size: 1rem; }
    .main-content { padding-left: 10px; padding-right: 10px; }
    .glass-card { padding: 14px 12px; }
    .stat-grid { grid-template-columns: 1fr !important; }
    .action-grid { grid-template-columns: 1fr !important; }
    .oauth-primary, .oauth-others { grid-template-columns: 1fr !important; }
}

/* ---- 7. 触控友好：移动端按钮与链接的最小点击区域 ---- */
@media (hover: none) and (pointer: coarse) {
    .glass-btn { min-height: 42px; }
    .btn-xs { min-height: 32px; }
    .sidebar-link,
    .mobile-nav-item { min-height: 44px; }
    /* 移动端去掉 hover 位移动画，避免误触抖动 */
    .sidebar-link:hover { transform: none; }
    /* 输入框字号 >=16px 防止 iOS 聚焦自动放大 */
    input.glass-input,
    textarea.glass-input,
    select.glass-input { font-size: 16px; }
}

/* ---- 8. 横屏手机高度受限时压缩纵向留白 ---- */
@media (max-height: 520px) and (orientation: landscape) {
    .main-content { padding-top: 80px; }
    .modal { max-height: 94vh; }
}

/* ---- 9. 微信/QQ 内嵌 WebView 安全区 ---- */
@supports (padding: max(0px)) {
    .main-content {
        padding-left: max(12px, env(safe-area-inset-left));
        padding-right: max(12px, env(safe-area-inset-right));
    }
}