/**
 * 共享样式 - Material Design Dark Theme
 * 设计系统：MD 沉浸式暗色 + 玻璃拟态层 + 微交互 + WCAG AAA 可访问性
 */

:root {
    /* ===== 背景层次（Material Design Elevation）===== */
    --bg-primary: #121212;        /* 底层 / 页面背景 */
    --bg-paper: #1e1e1e;          /* 卡片 */
    --bg-card: #2d2d2d;           /* 容器 / 输入框 */
    --bg-elevated: #252525;       /* 悬浮层 / 弹窗 */
    --bg-overlay: rgba(18, 18, 18, 0.72);   /* 全局遮罩 */

    /* ===== 文字层次 ===== */
    --text-primary: #e0e0e0;      /* 主文字 - 与 #121212 对比度 12.6:1 ✓ */
    --text-secondary: #b0b0b0;    /* 次要文字 - 对比度 7.4:1 ✓ WCAG AAA */
    --text-muted: #808080;        /* 禁用 / 占位 */
    --text-on-accent: #121212;    /* 强调色上的反色文字 */

    /* ===== 强调色（Material Design A700）===== */
    --accent-primary: #cf6679;    /* 玫红 - 主操作/警示 */
    --accent-secondary: #03dac6;  /* 青绿 - 次要操作/链接 */
    --accent-warm: #ffb74d;       /* 琥珀 - 高亮/警告 */
    --accent-success: #4caf50;    /* 成功 - 绿 */
    --accent-info: #64b5f6;       /* 信息 - 蓝 */
    --accent-error: #cf6679;      /* 错误 - 玫红 */

    /* ===== 强调色柔和（半透明叠加）===== */
    --accent-primary-soft: rgba(207, 102, 121, 0.12);
    --accent-primary-glow: rgba(207, 102, 121, 0.28);
    --accent-secondary-soft: rgba(3, 218, 198, 0.12);
    --accent-secondary-glow: rgba(3, 218, 198, 0.28);
    --accent-warm-soft: rgba(255, 183, 77, 0.12);
    --accent-warm-glow: rgba(255, 183, 77, 0.28);
    --accent-info-soft: rgba(100, 181, 246, 0.12);

    /* ===== 边框 / 描边 ===== */
    --border-light: #333333;
    --border-medium: #444444;
    --border-strong: #555555;
    --border-glass: rgba(255, 255, 255, 0.08);
    --border-glass-strong: rgba(255, 255, 255, 0.14);

    /* ===== 阴影（Material 4 层 Elevation）===== */
    --shadow-soft: 0 2px 12px rgba(0, 0, 0, 0.32);
    --shadow-medium: 0 4px 24px rgba(0, 0, 0, 0.44);
    --shadow-strong: 0 8px 40px rgba(0, 0, 0, 0.56);
    --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    --shadow-focus: 0 0 0 3px rgba(3, 218, 198, 0.35);

    /* ===== 圆角 ===== */
    --radius-xs: 6px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-pill: 9999px;

    /* ===== 间距 ===== */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;

    /* ===== 字号 ===== */
    --fs-xs: 11px;
    --fs-sm: 13px;
    --fs-base: 14px;
    --fs-md: 15px;
    --fs-lg: 17px;
    --fs-xl: 20px;
    --fs-2xl: 24px;
    --fs-3xl: 32px;

    /* ===== 动效曲线 ===== */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --duration-fast: 150ms;
    --duration-base: 240ms;
    --duration-slow: 360ms;

    /* ===== 字体 ===== */
    --font-sans: "Noto Sans SC", -apple-system, "PingFang SC",
                 "Microsoft YaHei", "Helvetica Neue", sans-serif;
    --font-serif: "Noto Serif SC", "Georgia", "STSong", serif;
    --font-mono: "DM Mono", "JetBrains Mono", "Cascadia Code",
                 "SF Mono", Consolas, "Courier New", monospace;
}

/* ========== 基础重置 ========== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    color-scheme: dark;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-sans);
    background: var(--bg-primary);
    color: var(--text-primary);
    min-height: 100vh;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

img, svg, video, canvas {
    max-width: 100%;
    display: block;
}

/* ============================================================
   试卷题目内配图 - 三端全局适配（学生端/家长端/超管端）
   - .question-text / .question-content / .hd-q-content / .wrong-question 等
     容器内的 <img> 都会自动套用此规则
   - 配套逻辑：image_generate_helper.php 生成的 <img> 带 class="question-image"
   ============================================================ */
.question-text img,
.question-content img,
.hd-q-content img,
.wrong-question img,
.exam-question img,
.question-list img,
.question-card img,
img.question-image {
    max-width: 100%;
    width: auto;
    height: auto;
    display: block;
    margin: 10px 0;
    border-radius: 8px;
    border: 1px solid rgba(3, 218, 198, 0.18);
    background: rgba(255, 255, 255, 0.03);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    object-fit: contain;
    cursor: zoom-in;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.question-text img:hover,
.question-content img:hover,
.hd-q-content img:hover,
.wrong-question img:hover,
img.question-image:hover {
    transform: scale(1.02);
    box-shadow: 0 6px 24px rgba(3, 218, 198, 0.25);
    border-color: rgba(3, 218, 198, 0.5);
}
.question-text img[style*="display:none"],
.question-content img[style*="display:none"] {
    display: none !important;
}
img.question-image {
    max-height: 360px;        /* PC 端最高 360px，避免大图撑屏 */
    margin: 12px auto;        /* 居中显示 */
}
img.question-image + br,
.question-content br + img.question-image,
.question-text br + img.question-image {
    margin-top: 4px;
}
img.question-image[src*=".svg"] {
    background: transparent;  /* SVG 透明背景时不显示白底 */
}
/* 移动端：图片占满宽度，加点内边距 */
@media (max-width: 768px) {
    .question-text img,
    .question-content img,
    .hd-q-content img,
    .wrong-question img,
    img.question-image {
        max-width: calc(100vw - 48px);
        max-height: 280px;
        margin: 10px 0;
        border-radius: 6px;
    }
}
/* 超小屏幕：< 480px（家长端侧栏、错题打印等） */
@media (max-width: 480px) {
    .question-text img,
    .question-content img,
    .hd-q-content img,
    .wrong-question img,
    img.question-image {
        max-width: calc(100vw - 32px);
        max-height: 220px;
    }
}
/* 打印模式：图片保持原色，避免被深色滤镜覆盖 */
@media print {
    .question-text img,
    .question-content img,
    .hd-q-content img,
    .wrong-question img,
    img.question-image {
        max-width: 100% !important;
        max-height: none !important;
        box-shadow: none !important;
        border: 1px solid #ddd !important;
        background: transparent !important;
    }
}

/* Lightbox 弹出动画 */
@keyframes utilsLightboxFade {
    from { opacity: 0; transform: scale(0.96); }
    to   { opacity: 1; transform: scale(1); }
}
.utils-image-lightbox img {
    animation: utilsLightboxZoom 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes utilsLightboxZoom {
    from { transform: scale(0.85); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: transparent;
    color: inherit;
}

/* ========== 可访问性：键盘焦点环（WCAG AAA 4px）========== */
:focus-visible {
    outline: 3px solid var(--accent-secondary);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
    transition: outline-offset var(--duration-fast) var(--ease-out);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    box-shadow: var(--shadow-focus);
    outline: none;
}

/* 减少动画（用户偏好） */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ========== 按钮体系 ========== */
.btn-primary {
    padding: 12px 24px;
    background: var(--accent-primary);
    color: #ffffff;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-size: var(--fs-base);
    font-weight: 600;
    cursor: pointer;
    transition:
        transform var(--duration-base) var(--ease-spring),
        box-shadow var(--duration-base) var(--ease-out),
        background var(--duration-fast) var(--ease-out);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 44px;
    user-select: none;
    box-shadow: var(--shadow-soft);
}
.btn-primary:hover {
    background: #d97a8a;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px var(--accent-primary-glow);
}
.btn-primary:active {
    transform: translateY(0) scale(0.98);
    box-shadow: var(--shadow-soft);
}
.btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.btn-secondary {
    padding: 12px 24px;
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-sm);
    font-size: var(--fs-base);
    font-weight: 600;
    cursor: pointer;
    transition:
        transform var(--duration-base) var(--ease-spring),
        border-color var(--duration-fast) var(--ease-out),
        background var(--duration-fast) var(--ease-out);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 44px;
    user-select: none;
}
.btn-secondary:hover {
    background: var(--bg-elevated);
    border-color: var(--text-secondary);
    transform: translateY(-1px);
}
.btn-secondary:active {
    transform: translateY(0) scale(0.98);
}

.btn-text {
    padding: 8px 16px;
    background: transparent;
    color: var(--accent-secondary);
    border: none;
    border-radius: var(--radius-sm);
    font-size: var(--fs-base);
    font-weight: 500;
    cursor: pointer;
    transition:
        background var(--duration-fast) var(--ease-out),
        color var(--duration-fast) var(--ease-out);
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}
.btn-text:hover {
    background: var(--accent-secondary-soft);
}
.btn-text:active {
    transform: scale(0.97);
}

.btn-icon {
    width: 44px;
    height: 44px;
    padding: 0;
    background: transparent;
    color: var(--text-secondary);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition:
        background var(--duration-fast) var(--ease-out),
        color var(--duration-fast) var(--ease-out),
        transform var(--duration-base) var(--ease-spring);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn-icon:hover {
    background: var(--bg-card);
    color: var(--text-primary);
}
.btn-icon:active {
    transform: scale(0.92);
}

/* ========== 表单 ========== */
.form-group {
    margin-bottom: var(--space-5);
}
.form-group label {
    display: block;
    margin-bottom: var(--space-2);
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    font-weight: 500;
    letter-spacing: 0.2px;
}
.form-group input:not([type="checkbox"]):not([type="radio"]),
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 16px;
    background: #ffffff;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    color: #2c2420;
    font-size: var(--fs-base);
    font-family: inherit;
    min-height: 44px;
    transition:
        border-color var(--duration-fast) var(--ease-out),
        background var(--duration-fast) var(--ease-out),
        box-shadow var(--duration-fast) var(--ease-out);
}
/* 表单内的 checkbox/radio 保持原生样式，避免被上述规则覆盖 */
.form-group input[type="checkbox"],
.form-group input[type="radio"] {
    width: auto;
    min-height: auto;
    padding: 0;
    background: transparent;
    border: none;
    color: inherit;
    accent-color: var(--accent-secondary);
}
.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--text-muted);
}
.form-group input:hover,
.form-group select:hover,
.form-group textarea:hover {
    border-color: var(--border-strong);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--accent-secondary);
    background: #ffffff;
    box-shadow: 0 0 0 3px var(--accent-secondary-soft);
}
.form-group input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* 覆盖浏览器自动填充样式，防止深色模式下背景/文字颜色冲突导致看不见 */
.form-group input:-webkit-autofill,
.form-group input:-webkit-autofill:hover,
.form-group input:-webkit-autofill:focus,
.form-group input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
    box-shadow: 0 0 0 1000px #ffffff inset !important;
    -webkit-text-fill-color: #2c2420 !important;
    caret-color: #2c2420;
    transition: background-color 5000s ease-in-out 0s;
}

/* ========== 卡片体系 ========== */
.card {
    background: var(--bg-paper);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    box-shadow: var(--shadow-soft);
    transition:
        transform var(--duration-base) var(--ease-out),
        box-shadow var(--duration-base) var(--ease-out),
        border-color var(--duration-fast) var(--ease-out);
}
.card:hover {
    border-color: var(--border-medium);
}
.card-interactive {
    cursor: pointer;
}
.card-interactive:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
    border-color: var(--accent-secondary);
}
.card-interactive:active {
    transform: translateY(0);
}

/* 玻璃拟态卡片 */
.card-glass {
    background: rgba(30, 30, 30, 0.6);
    backdrop-filter: blur(16px) saturate(1.2);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    border: 1px solid var(--border-glass-strong);
    border-radius: var(--radius-lg);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* 强调卡片 - 顶部彩条 */
.card-accent {
    position: relative;
    overflow: hidden;
}
.card-accent::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg,
        var(--accent-secondary),
        var(--accent-warm),
        var(--accent-primary));
    background-size: 200% 100%;
    animation: shimmerBar 4s linear infinite;
}
@keyframes shimmerBar {
    0%   { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

/* ========== 加载状态 ========== */
.global-loader {
    position: fixed;
    inset: 0;
    background: var(--bg-overlay);
    backdrop-filter: blur(8px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    z-index: 9999;
    animation: fadeIn var(--duration-base) var(--ease-out);
}
.global-loader-text {
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    letter-spacing: 0.5px;
}

.spinner {
    width: 48px;
    height: 48px;
    border: 3px solid var(--border-light);
    border-top-color: var(--accent-secondary);
    border-right-color: var(--accent-warm);
    border-radius: 50%;
    animation: spin 0.9s linear infinite;
    box-shadow: 0 0 24px var(--accent-secondary-soft);
}
@keyframes spin {
    to { transform: rotate(360deg); }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Skeleton 骨架屏 */
.skeleton {
    background: linear-gradient(
        90deg,
        var(--bg-card) 0%,
        var(--bg-elevated) 50%,
        var(--bg-card) 100%
    );
    background-size: 200% 100%;
    animation: skeletonShimmer 1.5s linear infinite;
    border-radius: var(--radius-sm);
}
@keyframes skeletonShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ========== Toast 提示（顶部弹出）========== */
.toast {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(-100px);
    padding: 12px 20px;
    border-radius: var(--radius-md);
    font-size: var(--fs-base);
    font-weight: 500;
    z-index: 10000;
    opacity: 0;
    box-shadow: var(--shadow-medium);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    transition:
        transform var(--duration-base) var(--ease-spring),
        opacity var(--duration-base) var(--ease-out);
    max-width: 90vw;
    border: 1px solid transparent;
}
.toast.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}
.toast-success {
    background: var(--accent-success);
    color: #ffffff;
}
.toast-error {
    background: var(--accent-error);
    color: #ffffff;
}
.toast-info {
    background: var(--bg-elevated);
    color: var(--text-primary);
    border-color: var(--border-medium);
}
.toast-warning {
    background: #f59e0b;
    color: #000000;
    border-color: #d97706;
}

/* ========== 弹窗 ========== */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: var(--bg-overlay);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9998;
    padding: var(--space-4);
    animation: fadeIn var(--duration-base) var(--ease-out);
}
.modal-dialog {
    background: var(--bg-elevated);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    max-width: 440px;
    width: 100%;
    box-shadow: var(--shadow-strong);
    animation: modalIn var(--duration-base) var(--ease-spring);
}
@keyframes modalIn {
    from {
        opacity: 0;
        transform: scale(0.92) translateY(8px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}
.modal-title {
    font-size: var(--fs-xl);
    font-weight: 600;
    text-align: center;
    margin-bottom: var(--space-5);
    color: var(--text-primary);
    letter-spacing: 0.3px;
}
.modal-body {
    font-size: var(--fs-base);
    line-height: 1.7;
    margin-bottom: var(--space-6);
    color: var(--text-secondary);
}
.modal-message {
    font-size: var(--fs-md);
    margin-bottom: var(--space-6);
    text-align: center;
}
.modal-actions {
    display: flex;
    gap: var(--space-3);
    justify-content: center;
}

/* ========== 考试确认弹窗 ========== */
.exam-confirm-notices {
    text-align: left;
    background: var(--bg-card);
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-light);
}
.exam-confirm-notice-title {
    font-size: var(--fs-md);
    font-weight: 600;
    margin-bottom: var(--space-3);
    color: var(--text-primary);
}
.exam-confirm-notice-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.exam-confirm-notice-list li {
    position: relative;
    padding: 6px 0 6px 22px;
    font-size: var(--fs-sm);
    line-height: 1.6;
    color: var(--text-secondary);
}
.exam-confirm-notice-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 14px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-primary);
    box-shadow: 0 0 8px var(--accent-primary-glow);
}

/* ========== 徽章 / 状态标签 ========== */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    font-size: var(--fs-xs);
    font-weight: 500;
    border-radius: var(--radius-pill);
    background: var(--bg-card);
    color: var(--text-secondary);
    border: 1px solid var(--border-light);
    white-space: nowrap;
    line-height: 1.6;
}
.badge-success {
    background: rgba(76, 175, 80, 0.15);
    color: #66bb6a;
    border-color: rgba(76, 175, 80, 0.3);
}
.badge-error {
    background: var(--accent-primary-soft);
    color: var(--accent-primary);
    border-color: rgba(207, 102, 121, 0.3);
}
.badge-warning {
    background: var(--accent-warm-soft);
    color: var(--accent-warm);
    border-color: rgba(255, 183, 77, 0.3);
}
.badge-info {
    background: var(--accent-info-soft);
    color: var(--accent-info);
    border-color: rgba(100, 181, 246, 0.3);
}
.badge-accent {
    background: var(--accent-secondary-soft);
    color: var(--accent-secondary);
    border-color: rgba(3, 218, 198, 0.3);
}

/* ========== 登录页面 ========== */
.login-page,
.login-choice-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(ellipse 80% 60% at 50% 0%,
            rgba(3, 218, 198, 0.06), transparent 60%),
        radial-gradient(ellipse 60% 50% at 100% 100%,
            rgba(207, 102, 121, 0.05), transparent 60%),
        linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    padding: var(--space-5);
    position: relative;
    overflow: hidden;
}
.login-page::before,
.login-choice-page::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(0deg,
            transparent, transparent 2px,
            rgba(255, 255, 255, 0.012) 2px,
            rgba(255, 255, 255, 0.012) 3px);
    pointer-events: none;
    mix-blend-mode: screen;
}

.login-box {
    background: var(--bg-paper);
    border: 1px solid var(--border-light);
    padding: var(--space-12) var(--space-10);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-strong);
    width: 100%;
    max-width: 420px;
    position: relative;
    z-index: 1;
    animation: modalIn 0.5s var(--ease-spring);
}
.login-box::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg,
        rgba(3, 218, 198, 0.08),
        transparent 50%,
        rgba(207, 102, 121, 0.05));
    pointer-events: none;
}
.login-box > * { position: relative; }
.login-box h2 {
    text-align: center;
    margin-bottom: var(--space-8);
    font-size: var(--fs-2xl);
    font-weight: 700;
    background: linear-gradient(135deg,
        var(--text-primary),
        var(--accent-secondary));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.login-choice-content {
    text-align: center;
    max-width: 600px;
    position: relative;
    z-index: 1;
}
.login-choice-content h1 {
    font-size: var(--fs-3xl);
    margin-bottom: var(--space-10);
    font-weight: 700;
}
.login-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-5);
    margin-bottom: var(--space-8);
}
.login-option {
    background: var(--bg-paper);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: var(--space-8) var(--space-6);
    cursor: pointer;
    transition:
        transform var(--duration-base) var(--ease-spring),
        border-color var(--duration-fast) var(--ease-out),
        box-shadow var(--duration-base) var(--ease-out),
        background var(--duration-fast) var(--ease-out);
    text-align: center;
    min-height: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.login-option:hover {
    border-color: var(--accent-secondary);
    background: var(--bg-elevated);
    transform: translateY(-4px);
    box-shadow: 0 12px 32px var(--accent-secondary-soft);
}
.login-option:active {
    transform: translateY(-2px) scale(0.98);
}
.option-icon {
    font-size: 40px;
    margin-bottom: var(--space-4);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: var(--radius-md);
    background: var(--accent-secondary-soft);
    transition: transform var(--duration-base) var(--ease-spring);
}
.login-option:hover .option-icon {
    transform: scale(1.08) rotate(-4deg);
}
.login-option h3 {
    font-size: var(--fs-md);
    margin-bottom: var(--space-2);
    color: var(--text-primary);
    font-weight: 600;
}
.login-option p {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    line-height: 1.5;
}

/* ========== 错误页 ========== */
.error-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    font-size: var(--fs-lg);
    color: var(--text-muted);
    padding: var(--space-5);
    text-align: center;
}

/* ========== 实用工具类 ========== */
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }
.text-accent { color: var(--accent-secondary); }
.text-warm { color: var(--accent-warm); }
.text-error { color: var(--accent-primary); }
.text-success { color: var(--accent-success); }

.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-col { display: flex; flex-direction: column; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }

.cursor-pointer { cursor: pointer; }
.cursor-not-allowed { cursor: not-allowed; }
.no-select { user-select: none; }

.divider {
    height: 1px;
    background: var(--border-light);
    margin: var(--space-4) 0;
    border: 0;
}

.hidden { display: none !important; }
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ========== 响应式 ========== */
@media (max-width: 768px) {
    .login-box {
        padding: var(--space-8) var(--space-6);
    }
    .login-options {
        grid-template-columns: 1fr;
    }
    /* Modal bottom-sheet 移动端适配 */
    .modal-overlay {
        padding: 0;
        align-items: flex-end;
    }
    .modal-dialog {
        padding: 20px 16px max(24px, env(safe-area-inset-bottom));
        max-width: 100%;
        width: 100%;
        border-radius: 16px 16px 0 0;
        animation: modalSlideUp 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    }
    @keyframes modalSlideUp {
        from { transform: translateY(100%); opacity: 0; }
        to { transform: translateY(0); opacity: 1; }
    }
    .modal-actions {
        flex-direction: column-reverse;
        gap: 10px;
    }
    .modal-actions .btn-primary,
    .modal-actions .btn-secondary {
        width: 100%;
        min-height: 48px;
        text-align: center;
    }
    .btn-primary,
    .btn-secondary {
        min-height: 44px; /* 保证触控目标 ≥ 44px */
    }
    /* 全局触控热区 */
    a, button, .btn-icon, .filter-tab, .tag, .pagination button {
        min-height: 44px;
    }
    /* 历史表格移动端优化 */
    .history-table {
        min-width: 0 !important;
    }
    .history-table thead {
        display: none;
    }
    .history-table tbody tr {
        display: block;
        margin-bottom: 10px;
        border-radius: var(--radius-md);
    }
    .history-table tbody tr td {
        display: flex;
        justify-content: space-between;
        padding: 6px 0;
        border-bottom: 1px solid rgba(255,255,255,0.04);
        font-size: 13px;
    }
    .history-table tbody tr td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--text-muted);
        flex-shrink: 0;
    }
    /* 安全区 */
    body {
        overscroll-behavior-y: contain;
    }
}

/* =================================================================
   超级管理后台 — 移动端独立优化（≤768px / ≤480px / 横屏短屏）
   仅 SuperPage（.super-layout 子树）受影响，PC 端零回归
   作用：将桌面端表格/搜索/筛选/分页/表单/弹窗适配为移动端布局
   ================================================================= */
@media (max-width: 768px) {
    /* 1) 顶部 mobile-bar 玻璃拟态强化 */
    .super-layout ~ .super-mobile-bar,
    .super-mobile-bar {
        padding: 10px 14px;
        background: linear-gradient(135deg,
            rgba(26, 26, 26, 0.92),
            rgba(19, 19, 19, 0.92));
        -webkit-backdrop-filter: blur(16px) saturate(1.4);
        backdrop-filter: blur(16px) saturate(1.4);
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04),
                    0 4px 16px rgba(0, 0, 0, 0.4);
    }
    .super-mobile-bar .super-mobile-title {
        font-size: 15px;
        font-weight: 600;
        max-width: calc(100vw - 110px);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        letter-spacing: 0.2px;
    }

    /* 2) Header 收紧 + 防挤压 */
    .super-layout .super-header {
        padding-bottom: 12px;
        margin-bottom: 14px;
        gap: 10px;
    }
    .super-layout .super-header h1 {
        font-size: 19px;
        line-height: 1.3;
    }
    .super-layout .super-header p {
        font-size: 12px;
        margin-top: 2px;
    }
    .super-layout .super-admin-badge {
        padding: 6px 12px;
        font-size: 12px;
    }

    /* 3) 搜索栏：纵向堆叠，全宽 */
    .super-layout .search-bar {
        flex-direction: column;
        gap: 8px;
        margin-bottom: 12px;
    }
    .super-layout .search-bar input,
    .super-layout .search-bar select {
        max-width: 100% !important;
        width: 100%;
        min-height: 44px;
        font-size: 16px; /* iOS 防自动缩放 */
        padding: 11px 14px;
    }
    .super-layout .search-bar > button,
    .super-layout .search-bar .btn {
        width: 100%;
        min-height: 44px;
        padding: 11px 14px;
        font-size: 14px;
    }

    /* 4) 筛选 tab 横向滚动，防换行高度爆炸 */
    .super-layout .filter-tabs-row,
    .super-layout .orders-filter {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        margin-left: -4px;
        margin-right: -4px;
        padding-left: 4px;
        padding-right: 4px;
    }
    .super-layout .filter-tabs-row::-webkit-scrollbar,
    .super-layout .orders-filter::-webkit-scrollbar {
        display: none;
    }
    .super-layout .filter-tab,
    .super-layout .orders-filter .filter-btn {
        flex-shrink: 0;
        scroll-snap-align: start;
        min-height: 36px;
        padding: 7px 14px;
    }
    .super-layout .filter-label {
        flex-shrink: 0;
        min-width: auto;
        margin-right: 4px;
    }

    /* 5) 数据表 → 卡片列表（核心改造） */
    .super-layout .table-container {
        background: transparent;
        border: none;
        border-radius: 0;
        overflow: visible;
        padding: 0;
    }
    .super-layout .data-table {
        min-width: 0 !important;
        width: 100%;
        display: block;
        border-collapse: separate;
    }
    .super-layout .data-table thead {
        display: none;
    }
    .super-layout .data-table tbody {
        display: block;
    }
    .super-layout .data-table tbody tr {
        display: block;
        background: linear-gradient(135deg, #1e1e1e 0%, #181818 100%);
        border: 1px solid #2a2a2a;
        border-radius: 12px;
        margin-bottom: 12px;
        padding: 12px 14px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
        transition:
            transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
            border-color 0.2s ease,
            box-shadow 0.2s ease;
        position: relative;
        overflow: hidden;
    }
    .super-layout .data-table tbody tr::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 3px;
        height: 100%;
        background: linear-gradient(180deg, #03dac6, rgba(3, 218, 198, 0.3));
        opacity: 0.7;
    }
    .super-layout .data-table tbody tr:hover {
        background: rgba(3, 218, 198, 0.04);
    }
    .super-layout .data-table tbody tr:active {
        transform: scale(0.99);
        border-color: rgba(3, 218, 198, 0.4);
        box-shadow: 0 4px 16px rgba(3, 218, 198, 0.12);
    }
    .super-layout .data-table tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 7px 0;
        border-bottom: 1px dashed rgba(255, 255, 255, 0.05);
        font-size: 13.5px;
        gap: 12px;
        text-align: right;
        word-break: break-word;
        min-height: 32px;
    }
    .super-layout .data-table tbody td:last-child {
        border-bottom: none;
        padding-top: 10px;
        padding-bottom: 2px;
    }
    /* 通过 data-label 显示左侧字段标签 */
    .super-layout .data-table tbody td[data-label]::before {
        content: attr(data-label);
        color: #808080;
        font-size: 12px;
        font-weight: 500;
        flex-shrink: 0;
        text-align: left;
        letter-spacing: 0.3px;
    }
    /* 操作列：按钮组横向排列，自动换行 */
    .super-layout .data-table tbody td.actions-cell {
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 6px;
    }
    .super-layout .data-table tbody td.actions-cell .btn,
    .super-layout .data-table tbody td.actions-cell .btn-sm,
    .super-layout .data-table tbody td.actions-cell button {
        min-height: 36px;
        padding: 7px 12px;
        font-size: 12.5px;
        flex: 0 1 auto;
    }

    /* 6) 分页极简化 */
    .super-layout .pagination {
        gap: 4px;
        flex-wrap: wrap;
        padding: 12px 4px;
        justify-content: center;
    }
    .super-layout .pagination button {
        min-width: 40px;
        height: 40px;
        font-size: 13px;
        padding: 0 10px;
    }

    /* 7) 表单：紧凑 + 大触控 */
    .super-layout .settings-form {
        max-width: 100%;
        padding: 16px 14px;
        border-radius: 12px;
    }
    .super-layout .settings-section {
        margin-bottom: 18px;
        padding-bottom: 14px;
    }
    .super-layout .settings-section h3 {
        font-size: 15px;
        margin-bottom: 12px;
    }
    .super-layout .form-group {
        margin-bottom: 14px;
    }
    .super-layout .form-group input,
    .super-layout .form-group select,
    .super-layout .form-group textarea {
        font-size: 16px;       /* iOS 防自动缩放 */
        min-height: 44px;
        padding: 11px 14px;
    }
    .super-layout .btn-save {
        width: 100%;
        padding: 14px;
        font-size: 16px;
    }

    /* 8) Stats / Dashboard mini cards 收紧 */
    .super-layout .stat-card {
        padding: 12px 14px;
    }
    .super-layout .stat-card .value {
        font-size: 22px;
    }
    .super-layout .dashboard-mini-card {
        padding: 10px 12px;
    }
    .super-layout .dashboard-mini-card .mini-icon {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }
    .super-layout .dashboard-mini-card .mini-value {
        font-size: 18px;
    }
    .super-layout .chart-card {
        padding: 14px;
    }
    .super-layout .chart-card h3 {
        font-size: 13px;
    }

    /* 9) 通用按钮组：水平自适应 */
    .super-layout .super-actions-row {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
    .super-layout .super-actions-row > * {
        flex: 1 1 auto;
        min-width: 0;
    }
}

/* 超小屏 ≤480px：进一步紧凑 */
@media (max-width: 480px) {
    .super-mobile-bar .super-mobile-title {
        font-size: 14px;
        max-width: calc(100vw - 100px);
    }
    .super-layout .super-header h1 {
        font-size: 17px;
    }
    .super-layout .data-table tbody tr {
        padding: 10px 12px;
        margin-bottom: 10px;
    }
    .super-layout .data-table tbody td {
        font-size: 13px;
    }
    .super-layout .data-table tbody td[data-label]::before {
        font-size: 11.5px;
    }
    .super-layout .filter-label {
        font-size: 12px;
    }
    .super-layout .stat-card {
        padding: 10px 12px;
    }
    .super-layout .stat-card .value {
        font-size: 20px;
    }
}

/* 横屏短屏（如 iPhone 横向）：抽屉高度修正 */
@media (max-width: 900px) and (max-height: 520px) {
    .super-sidebar {
        padding: 10px 0 16px;
    }
    .super-logo {
        padding: 4px 18px 12px;
        font-size: 15px;
    }
    .menu-group-header {
        padding: 7px 14px;
    }
    .menu-group-body .super-menu-item {
        padding: 6px 14px 6px 36px;
    }
}