/* ============================================================
   UI Pro Max 增强层 — 现代化视觉升级
   动效 / 聚焦环 / 渐变 / 骨架屏 / 无障碍 / 细节打磨
   基于现有设计系统（app.css）之上，不改变功能与布局结构
   ============================================================ */

:root {
    /* 动效令牌 */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out-back: cubic-bezier(0.16, 1, 0.3, 1);

    /* 骨架屏 */
    --skeleton-start: #eef2f7;
    --skeleton-end: #e2e8f0;

    /* 主色渐变（升级版按钮/高亮） */
    --gradient-primary-modern: linear-gradient(135deg, #1a56c4 0%, #2f6fe0 55%, #3b82f6 100%);
}

/* ============ 全局渲染细节 ============ */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }

::selection { background: rgba(26, 86, 196, 0.16); color: var(--color-text); }

/* 数字等宽对齐 */
.question-card__meta, .home-question-row__meta, .home-command__metric strong,
.practice-session__summary strong, .stats strong, .leaderboard-row__score,
.question-detail__stats strong, .member-cell strong, .score-number {
    font-variant-numeric: tabular-nums;
}

/* 滚动条 */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--color-text-disabled);
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--color-border-dark); }

/* ============ 无障碍：键盘焦点 ============ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
label:has(input:focus-visible) {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* ============ 按钮：动效升级 ============ */
.btn {
    transition:
        transform var(--transition-fast),
        box-shadow var(--transition-fast),
        background-color var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast),
        opacity var(--transition-fast);
    will-change: transform;
}
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

/* Primary：渐变 + 层级阴影 + 微上浮 */
.btn--primary {
    background-image: var(--gradient-primary-modern);
    box-shadow: 0 1px 2px rgba(26, 86, 196, 0.18), 0 3px 10px rgba(26, 86, 196, 0.14);
}
.btn--primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(26, 86, 196, 0.22), 0 8px 20px rgba(26, 86, 196, 0.18);
    background-image: linear-gradient(135deg, #1550b8 0%, #2563cf 55%, #3478ec 100%);
}
.btn--primary:active { transform: translateY(0) scale(0.97); box-shadow: 0 1px 2px rgba(26, 86, 196, 0.2); }

.btn--ghost:hover { transform: translateY(-1px); border-color: var(--color-border-dark); }
.btn--ghost:active { transform: translateY(0) scale(0.97); }

/* 按钮 loading spinner */
.btn.is-loading { pointer-events: none; opacity: 0.85; }
.btn.is-loading::after {
    content: '';
    width: 0.95em;
    height: 0.95em;
    margin-left: 8px;
    vertical-align: -2px;
    display: inline-block;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: ui-spin 0.7s linear infinite;
}
@keyframes ui-spin { to { transform: rotate(360deg); } }

/* ============ 输入框：聚焦光环 ============ */
.input,
input[type="text"], input[type="search"], input[type="password"], input[type="email"],
input[type="tel"], input[type="number"], input[type="date"], textarea, select {
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}
.input:focus,
input[type="text"]:focus, input[type="search"]:focus, input[type="password"]:focus,
input[type="email"]:focus, input[type="tel"]:focus, input[type="number"]:focus,
input[type="date"]:focus, textarea:focus, select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(26, 86, 196, 0.13);
    outline: none;
}

/* ============ 卡片：悬停上浮 ============ */
.question-card,
.home-question-row,
.practice-session__review-question,
.practice-session__group-item,
.member-cell,
.dashboard-card {
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
.question-card:hover,
.home-question-row:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.07), 0 1px 3px rgba(15, 23, 42, 0.05);
    border-color: var(--color-border-medium);
}
.home-question-row { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4); background: #fff; }

/* ============ 标签：胶囊统一 ============ */
.tag { border-radius: var(--radius-full); }

/* ============ Alert：滑入 + 圆角细节 ============ */
@keyframes ui-slide-in {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: none; }
}
.alert { animation: ui-slide-in 0.28s var(--ease-out-back); border-left-width: 4px; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05); }

/* ============ Toast：滑入 ============ */
@keyframes ui-toast-in {
    from { opacity: 0; transform: translateY(-10px) scale(0.96); }
    to { opacity: 1; transform: none; }
}
.toast { animation: ui-toast-in 0.3s var(--ease-out-back); }

/* ============ 骨架屏 ============ */
.skeleton {
    position: relative;
    overflow: hidden;
    background: var(--skeleton-start);
    border-radius: var(--radius-md);
}
.skeleton::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.65), transparent);
    transform: translateX(-100%);
    animation: ui-shimmer 1.5s infinite;
}
@keyframes ui-shimmer { 100% { transform: translateX(100%); } }

/* ============ 分页：悬停/当前页 ============ */
.pagination li a { transition: all var(--transition-fast); }
.pagination li a:hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08); }

/* ============ 首页 Hero：左上渐变光斑（完全位于容器内，无溢出） ============ */
.home-command { position: relative; }
/* app.css 用了未定义的 --space-7 导致 padding 失效（内容贴边），此处补回 */
.home-command { padding: 28px; }
.home-command::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(26, 86, 196, 0.09) 0%, rgba(26, 86, 196, 0) 62%);
    pointer-events: none;
}
.home-command::after {
    content: '';
    position: absolute;
    top: -140px;
    right: -140px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(14, 165, 233, 0.08) 0%, rgba(14, 165, 233, 0) 62%);
    pointer-events: none;
}
.home-command__main,
.home-command__summary { position: relative; z-index: 1; }

/* 移动端 hero：标题层级、标签紧凑 */
@media (max-width: 768px) {
    .home-command h1 { font-size: 22px; line-height: 1.35; }
    .home-command__eyebrow-row { gap: 6px 8px; }
    .home-command__eyebrow-note { padding: 3px 7px; font-size: 11px; }
    .home-command::after { width: 200px; height: 200px; top: -90px; right: -90px; }
}

/* ============ 题库单题页：组内合屏 ============ */
.practice-group__intro {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-bottom: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-primary-border);
    border-radius: var(--radius-md);
    background: var(--color-primary-lightest);
    color: var(--color-primary-active);
    font-size: var(--text-sm);
}
.practice-group__item {
    margin-bottom: var(--space-5);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: #fff;
}
.practice-group__head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
    flex-wrap: wrap;
}
.practice-group__result-item {
    margin-bottom: var(--space-4);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: #fff;
}
.practice-group__result-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}
.practice-group__result-answer {
    margin-bottom: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--color-bg-inset);
    border-radius: var(--radius);
}
.practice-group__result-detail {
    margin-top: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius);
}
.practice-group__result-detail summary { cursor: pointer; font-weight: var(--fw-semibold); }

/* ============ VIP 付费墙提示 ============ */
.vip-gate {
    text-align: center;
    padding: var(--space-4);
    border: 1px dashed var(--color-primary-border);
    border-radius: var(--radius-md);
    background: var(--color-primary-lightest);
}
.vip-gate p { margin: 6px 0 var(--space-3); color: var(--color-text-muted); font-size: var(--text-sm); }

/* ============ 练习页：选项悬停/选中反馈 ============ */
.option-item {
    transition: border-color var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}
.option-item:hover {
    border-color: var(--color-primary-border);
    background-color: var(--color-primary-lightest);
}
.option-item:active { transform: scale(0.995); }

/* 音频播放卡 */
.practice__audio, .audio-player { box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05); }

/* 答题结果卡 */
.practice__result {
    background: var(--color-bg-hover);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
}

/* ============ 登录/注册页卡片 ============ */
.auth__card {
    background: linear-gradient(180deg, #ffffff 0%, var(--color-primary-lightest) 140%);
    border: 1px solid var(--color-border);
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.04);
}
.auth__title { letter-spacing: -0.02em; }

/* ============ 会员中心：我的权益（后台限制总览） ============ */
.member-quota {
    margin: var(--space-4) 0;
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, #ffffff 0%, var(--color-primary-lightest) 140%);
}
.member-quota__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}
.member-quota__head h2 {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    font-size: var(--text-md);
    font-weight: var(--fw-bold);
}
.member-quota__head a {
    color: var(--color-primary);
    font-size: var(--text-xs);
    font-weight: var(--fw-semibold);
    white-space: nowrap;
}
.member-quota__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-3);
}
.member-quota__grid > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding: var(--space-3);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius);
    background: #fff;
}
.member-quota__grid span { color: var(--color-text-muted); font-size: 11px; }
.member-quota__grid strong { font-size: var(--text-lg); font-variant-numeric: tabular-nums; }
.member-quota__grid small { color: var(--color-text-light); font-size: 10px; }
@media (max-width: 768px) {
    .member-quota__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============ 会员中心：工具卡片悬停 ============ */
.member-tools a {
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
.member-tools a:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08); }
.member-tools > a[aria-disabled="true"] { opacity: .58; cursor: not-allowed; }
.member-tools > a[aria-disabled="true"]:hover { transform: none; border-color: var(--color-border); box-shadow: none; color: var(--color-text); }

/* ============ 区块标题：现代间距 ============ */
.section__header h2 { letter-spacing: -0.01em; }
.section__header { margin-bottom: var(--space-4); }

/* ============ 表格行悬停 ============ */
.admin-table tbody tr, table tbody tr { transition: background-color var(--transition-fast); }

/* ============ 页面内容入场 ============ */
@keyframes ui-fade-up {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}
.site-main > .container > .home-command,
.site-main > .container > .section,
.site-main > .container > .home-workspace,
.site-main > .container > .practice-session,
.site-main > .container > .question-list-page,
.site-main > .container > .member-page {
    animation: ui-fade-up 0.35s var(--ease-out-back);
}

/* ============ 移动端细节 ============ */
@media (max-width: 768px) {
    .question-card:active,
    .home-question-row:active,
    .home-shortcuts a:active { transform: scale(0.985); }
    .btn--primary { box-shadow: 0 2px 8px rgba(26, 86, 196, 0.2); }
    .home-command::before { width: 260px; height: 260px; }
}

/* ============ 减少动效偏好 ============ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* Home announcement hierarchy: make operational notices visible without competing with the hero. */
.home-notices { border: 2px solid var(--color-primary-border, #bfdbfe); box-shadow: 0 8px 24px rgba(37,99,235,.08); }
.home-notices .section__header h2 { color: var(--color-primary); font-size: 1.05rem; }
.home-notices li:first-child a { padding-top: 12px; font-weight: 600; color: var(--color-text); }

/* Member learning and entitlement center */
.member-insights{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(240px,1fr) minmax(240px,1fr);gap:var(--space-3);margin:var(--space-4) 0}.member-insight-card{display:flex;min-height:208px;flex-direction:column;padding:18px;border:1px solid var(--color-border);border-radius:var(--radius-lg);background:#fff;box-shadow:0 8px 20px rgba(15,23,42,.045)}.member-insight-card--track{background:linear-gradient(135deg,#f5fcfb 0%,#fff 58%)}.member-insight-card__head,.member-promotion__head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.member-insight-card__head>div>span,.member-promotion__head>div>span{display:block;margin-bottom:3px;color:#14776e;font-size:10px;font-weight:800;letter-spacing:.08em}.member-insight-card h2,.member-promotion h2{display:flex;align-items:center;gap:7px;margin:0;color:var(--color-text);font-size:var(--text-md)}.member-insight-card__head>a{display:inline-flex;align-items:center;gap:2px;color:var(--color-primary);font-size:var(--text-xs);font-weight:700;white-space:nowrap}.member-insight-kpi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-top:16px}.member-insight-kpi>div{display:flex;min-width:0;flex-direction:column;gap:2px}.member-insight-kpi strong{color:#173f3d;font-size:18px;font-variant-numeric:tabular-nums}.member-insight-kpi span,.member-insight-note,.member-rank-main span,.member-rank-sub,.member-weak-list small,.member-insight-empty span{color:var(--color-text-muted);font-size:11px;line-height:1.5}.member-insight-kpi .is-up strong{color:#08776b}.member-insight-kpi .is-down strong{color:#b45343}.member-trend-bars{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));align-items:end;gap:7px;min-height:72px;margin-top:12px;padding-top:5px;border-bottom:1px solid #dceae8}.member-trend-bar{display:flex;min-width:0;height:72px;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px}.member-trend-bar span{display:block;width:min(22px,100%);height:var(--bar-height);min-height:3px;border-radius:7px 7px 2px 2px;background:linear-gradient(180deg,#31b4a4,#08776d);transition:height .22s ease}.member-trend-bar.is-empty span{background:#dfeceb}.member-trend-bar small{color:#7d9492;font-size:10px;font-variant-numeric:tabular-nums}.member-insight-note{margin:9px 0 0}.member-rank-main{display:flex;flex-direction:column;gap:5px;margin:auto 0 8px}.member-rank-main strong{color:#173f3d;font-size:18px}.member-rank-main em{color:#b66b0e;font-size:30px;font-style:normal;font-variant-numeric:tabular-nums}.member-rank-sub{padding-top:10px;border-top:1px solid #eef3f2}.member-insight-empty{display:flex;align-items:center;gap:10px;margin:auto 0;color:#70a7a0}.member-insight-empty>div{display:flex;flex-direction:column;gap:2px}.member-insight-empty strong{color:#375c5a;font-size:13px}.member-weak-list{display:grid;gap:8px;margin:auto 0}.member-weak-list>div{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:8px;align-items:baseline;padding:8px 9px;border-radius:10px;background:#f7fbfa}.member-weak-list span{overflow:hidden;color:#365a58;font-size:12px;font-weight:700;text-overflow:ellipsis;white-space:nowrap}.member-weak-list strong{color:#ab5b38;font-size:14px;font-variant-numeric:tabular-nums}.member-weak-list small{grid-column:1/-1}.member-quota__grid{grid-template-columns:repeat(auto-fit,minmax(145px,1fr))}.member-promotion{margin:var(--space-4) 0;padding:18px;border:1px solid #d8eae7;border-radius:var(--radius-lg);background:linear-gradient(135deg,#f4fbfa,#fff 62%);box-shadow:0 8px 20px rgba(15,23,42,.04)}.member-promotion__body{display:grid;grid-template-columns:minmax(240px,.9fr) minmax(0,1.1fr);gap:14px;align-items:stretch;margin-top:14px}.member-referral-code{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:7px;align-items:center;padding:14px;border:1px solid #cae7e1;border-radius:12px;background:#fff}.member-referral-code>span,.member-referral-code small{grid-column:1/-1;color:var(--color-text-muted);font-size:11px}.member-referral-code strong{overflow:hidden;color:#08776d;font-size:18px;letter-spacing:.08em;text-overflow:ellipsis;white-space:nowrap}.member-referral-code button{min-height:36px}.member-promotion__metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:hidden;border:1px solid #dcebe8;border-radius:12px;background:#fff}.member-promotion__metrics>div{display:flex;min-height:65px;flex-direction:column;justify-content:center;padding:10px 12px;border-right:1px solid #edf4f2;border-bottom:1px solid #edf4f2}.member-promotion__metrics>div:nth-child(2n){border-right:0}.member-promotion__metrics>div:nth-last-child(-n+2){border-bottom:0}.member-promotion__metrics strong{color:#183f3d;font-size:17px;font-variant-numeric:tabular-nums}.member-promotion__metrics span{margin-top:2px;color:var(--color-text-muted);font-size:11px}.member-commission-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px;margin-top:12px}.member-commission-list>div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;padding:9px 10px;border:1px solid #dbeae8;border-radius:10px;background:#fff}.member-commission-list span{overflow:hidden;color:#395b59;font-size:12px;font-weight:700;text-overflow:ellipsis;white-space:nowrap}.member-commission-list small{color:var(--color-text-muted);font-size:10px}.member-commission-list strong{grid-row:1/3;grid-column:2;align-self:center;color:#08776d;font-size:13px;font-variant-numeric:tabular-nums}.member-promotion__locked{display:flex;align-items:center;gap:12px;margin-top:14px;padding:15px;border:1px dashed #c8ddd9;border-radius:12px;background:rgba(255,255,255,.7);color:#65948e}.member-promotion__locked>div{display:flex;flex-direction:column;gap:3px}.member-promotion__locked strong{color:#365a57;font-size:13px}.member-promotion__locked p{margin:0;color:var(--color-text-muted);font-size:12px;line-height:1.55}
@media (max-width:980px){.member-insights{grid-template-columns:repeat(2,minmax(0,1fr))}.member-insight-card--track{grid-column:1/-1}.member-promotion__body{grid-template-columns:1fr}}
@media (max-width:620px){.member-insights{grid-template-columns:1fr}.member-insight-card--track{grid-column:auto}.member-insight-card{min-height:0;padding:15px}.member-insight-kpi{gap:5px}.member-insight-kpi strong{font-size:16px}.member-promotion{padding:15px}.member-promotion__head{align-items:center}.member-promotion__head h2{font-size:15px}.member-promotion__body{gap:10px}.member-referral-code{grid-template-columns:minmax(0,1fr) auto}.member-promotion__metrics>div{padding:9px}.member-commission-list{grid-template-columns:1fr}.member-trend-bars{gap:5px}}
.member-promotion__rates{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:12px}.member-promotion__rates>div{display:flex;min-width:0;flex-direction:column;gap:2px;padding:10px 11px;border:1px solid #dcebe8;border-radius:10px;background:rgba(255,255,255,.82)}.member-promotion__rates span,.member-promotion__rates small,.member-promotion__notice{color:var(--color-text-muted);font-size:11px;line-height:1.45}.member-promotion__rates strong{color:#183f3d;font-size:16px;font-variant-numeric:tabular-nums}.member-promotion__notice{margin:10px 0 0;padding-left:10px;border-left:3px solid #a8d9d1}@media (max-width:620px){.member-promotion__rates{grid-template-columns:repeat(2,minmax(0,1fr))}}