/* ============================================================
   会员权益系统 - 科技感 / 潮流主题（全站通用层）
   作用域：任何引入本文件的页面（无需 body 加类）
   设计：深色星际背景 + 霓虹青/紫 + 毛玻璃 + 动态流光
   说明：本文件作为 style.css / teaching-style.css 之上的覆盖层，
        通过“后加载即生效”的层叠规则统一整站视觉，不改变任何
        PHP 业务逻辑。tool/ 子工具与后端若不引入本文件则不受影响。
   ============================================================ */

/* —— 科技风本地设计 token —— */
:root {
    --tech-bg-0: #060912;
    --tech-bg-1: #0a0f1f;
    --tech-bg-2: #0d1426;
    --tech-cyan: #22d3ee;
    --tech-cyan-soft: rgba(34, 211, 238, 0.55);
    --tech-violet: #a855f7;
    --tech-violet-soft: rgba(168, 85, 247, 0.5);
    --tech-blue: #3b82f6;
    --tech-text: #e6edf6;
    --tech-text-muted: #93a4bd;
    --tech-glass: rgba(18, 26, 46, 0.55);
    --tech-glass-border: rgba(120, 160, 220, 0.18);
    --tech-glow: 0 0 24px rgba(34, 211, 238, 0.25);
    --tech-glow-strong: 0 0 36px rgba(34, 211, 238, 0.45);
    --tech-radius: 14px;
    --tech-radius-lg: 20px;
}

/* ============================================================
   动态背景层
   ============================================================ */
.page-bg {
    position: relative;
    background:
        radial-gradient(1200px 600px at 12% -10%, rgba(34, 211, 238, 0.18), transparent 60%),
        radial-gradient(1000px 700px at 110% 10%, rgba(168, 85, 247, 0.20), transparent 55%),
        radial-gradient(900px 600px at 50% 120%, rgba(59, 130, 246, 0.16), transparent 60%),
        linear-gradient(160deg, var(--tech-bg-1), var(--tech-bg-0) 60%, var(--tech-bg-2));
    overflow: hidden;
}

/* 粒子 canvas：固定铺满，置于内容之下 */
#tech-bg {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

/* 缓慢漂移的光晕，增强“潮流”氛围 */
.page-bg::before,
.page-bg::after {
    content: "";
    position: fixed;
    border-radius: 50%;
    filter: blur(80px);
    z-index: 0;
    pointer-events: none;
    opacity: 0.5;
    animation: techFloat 18s ease-in-out infinite alternate;
}

.page-bg::before {
    width: 420px;
    height: 420px;
    top: -120px;
    left: -80px;
    background: radial-gradient(circle, var(--tech-cyan), transparent 70%);
}

.page-bg::after {
    width: 480px;
    height: 480px;
    bottom: -160px;
    right: -120px;
    background: radial-gradient(circle, var(--tech-violet), transparent 70%);
    animation-delay: -9s;
}

@keyframes techFloat {
    from { transform: translate(0, 0) scale(1); }
    to   { transform: translate(60px, 40px) scale(1.15); }
}

/* 让内容浮在背景之上 */
.container {
    position: relative;
    z-index: 1;
}

/* ============================================================
   导航栏：深色毛玻璃 + 霓虹 logo
   ============================================================ */
.nav-bar {
    background: rgba(10, 15, 31, 0.55);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--tech-glass-border);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
}

.nav-logo {
    color: var(--tech-text);
    letter-spacing: 1px;
}

.nav-logo::before {
    background: linear-gradient(135deg, var(--tech-cyan), var(--tech-violet));
    box-shadow: var(--tech-glow);
}

.nav-link {
    color: var(--tech-text-muted);
}

.nav-link:hover,
.nav-link.active {
    color: var(--tech-cyan);
    text-shadow: 0 0 12px var(--tech-cyan-soft);
}

.nav-link.active::after {
    content: "";
    position: absolute;
    left: var(--spacing-md);
    right: var(--spacing-md);
    bottom: -2px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--tech-cyan), var(--tech-violet));
    box-shadow: var(--tech-glow);
}

/* ============================================================
   页面横幅 page-banner：深色霓虹渐变
   ============================================================ */
.page-banner {
    background: linear-gradient(120deg, rgba(34, 211, 238, 0.16), rgba(168, 85, 247, 0.20));
    border: 1px solid var(--tech-glass-border);
    box-shadow: 0 8px 40px rgba(34, 211, 238, 0.12);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
    color: var(--tech-text);
}

.page-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.12) 50%, transparent 70%);
    background-size: 220% 100%;
    animation: techShine 6s linear infinite;
    pointer-events: none;
}

.page-banner-icon {
    background: linear-gradient(135deg, var(--tech-cyan), var(--tech-violet));
    border-color: rgba(255, 255, 255, 0.35);
    box-shadow: var(--tech-glow);
}

.page-banner-title {
    background: linear-gradient(90deg, #ffffff, var(--tech-cyan));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ============================================================
   卡片：毛玻璃 + 霓虹描边 + 悬浮流光
   ============================================================ */
.glass-card,
.stat-card {
    background: var(--tech-glass);
    border: 1px solid var(--tech-glass-border);
    border-radius: var(--tech-radius);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--tech-text);
    position: relative;
    overflow: hidden;
}

.glass-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--tech-cyan-soft), transparent);
    opacity: 0.8;
}

.glass-card:hover,
.stat-card:hover {
    border-color: var(--tech-cyan-soft);
    box-shadow: var(--tech-glow-strong), 0 12px 40px rgba(0, 0, 0, 0.45);
    transform: translateY(-3px);
}

.stat-label {
    color: var(--tech-text-muted);
}

.stat-value {
    color: var(--tech-text);
}

.stat-value.points {
    background: linear-gradient(90deg, var(--tech-cyan), var(--tech-violet));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.section-title {
    color: var(--tech-text);
    border-bottom-color: var(--tech-glass-border);
}

.section-title::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 1em;
    margin-right: var(--spacing-sm);
    vertical-align: -2px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--tech-cyan), var(--tech-violet));
    box-shadow: var(--tech-glow);
}

/* ============================================================
   登录卡
   ============================================================ */
.login-card {
    max-width: 420px;
    margin: 0 auto;
    text-align: left;
}

.login-card .section-title {
    text-align: center;
    font-size: var(--font-size-xl);
    background: linear-gradient(90deg, #ffffff, var(--tech-cyan));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    border: none;
}

.login-card .section-title::before { display: none; }

/* 表单控件：深色输入 + 霓虹聚焦 */
.form-group label {
    color: var(--tech-text-muted);
}

.form-input,
.form-select {
    background: rgba(8, 12, 24, 0.6);
    border: 1px solid var(--tech-glass-border);
    color: var(--tech-text);
    border-radius: var(--tech-radius);
}

.form-input::placeholder {
    color: rgba(147, 164, 189, 0.6);
}

.form-input:focus,
.form-select:focus {
    border-color: var(--tech-cyan);
    box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.18), var(--tech-glow);
}

/* ============================================================
   按钮：霓虹渐变 + 流光
   ============================================================ */
.btn-primary {
    position: relative;
    background: linear-gradient(120deg, var(--tech-cyan), var(--tech-blue) 55%, var(--tech-violet));
    color: #04111a;
    font-weight: 700;
    border-radius: var(--tech-radius);
    overflow: hidden;
    box-shadow: var(--tech-glow);
}

.btn-primary::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.55) 50%, transparent 65%);
    background-size: 220% 100%;
    animation: techShine 4s linear infinite;
}

.btn-primary:hover {
    color: #04111a;
    transform: translateY(-2px);
    box-shadow: var(--tech-glow-strong);
}

.btn-primary:active {
    transform: translateY(0);
}

.btn-danger {
    background: linear-gradient(120deg, #f43f5e, #ef4444);
    color: #fff;
    border-radius: var(--tech-radius);
}

.btn-danger:hover {
    color: #fff;
}

.btn-link {
    color: var(--tech-cyan);
}

.btn-link:hover {
    color: var(--tech-violet);
    text-shadow: 0 0 12px var(--tech-violet-soft);
}

.demo-tip {
    color: var(--tech-text-muted);
    border-top-color: var(--tech-glass-border);
}

/* ============================================================
   提示框 alert：科技描边
   ============================================================ */
.alert {
    border-radius: var(--tech-radius);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.alert-success {
    background: rgba(52, 211, 153, 0.12);
    border-color: rgba(52, 211, 153, 0.4);
    color: #6ee7b7;
}

.alert-danger {
    background: rgba(244, 63, 94, 0.12);
    border-color: rgba(244, 63, 94, 0.4);
    color: #fda4af;
}

.alert-warning {
    background: rgba(250, 204, 21, 0.12);
    border-color: rgba(250, 204, 21, 0.4);
    color: #fde68a;
}

/* ============================================================
   功能入口 feature-item：霓虹卡片
   ============================================================ */
.feature-item {
    background: rgba(14, 21, 40, 0.6);
    border: 1px solid var(--tech-glass-border);
    border-radius: var(--tech-radius);
    color: var(--tech-text);
    overflow: hidden;
}

.feature-item:hover {
    border-color: var(--tech-cyan-soft);
    box-shadow: var(--tech-glow-strong);
    transform: translateY(-4px);
}

.feature-icon {
    filter: drop-shadow(0 0 10px var(--tech-cyan-soft));
    transition: transform var(--transition-normal);
}

.feature-item:hover .feature-icon {
    transform: scale(1.12) rotate(-4deg);
}

.feature-title {
    color: var(--tech-text);
}

.feature-desc {
    color: var(--tech-text-muted);
}

/* ============================================================
   模态框 modal：深色毛玻璃
   ============================================================ */
.modal-overlay {
    background: rgba(4, 8, 18, 0.7);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.modal-card {
    background: var(--tech-bg-2);
    border: 1px solid var(--tech-glass-border);
    border-radius: var(--tech-radius-lg);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), var(--tech-glow);
    color: var(--tech-text);
}

.modal-card .section-title {
    color: var(--tech-text);
    border: none;
}

.modal-close {
    color: var(--tech-text-muted);
}

.modal-close:hover {
    color: #fda4af;
}

.modal-tip {
    color: var(--tech-text-muted);
}

.modal-tip strong {
    color: #6ee7b7;
}

/* ============================================================
   页脚
   ============================================================ */
.footer {
    color: var(--tech-text-muted);
    border-top-color: var(--tech-glass-border);
}

.footer a {
    color: var(--tech-cyan);
}

/* ============================================================
   首页布局：两行模块（上下堆叠，替代原左右两栏）
   ============================================================ */

/* .two-col 从横向两栏改为纵向单列堆叠 */
.two-col {
    grid-template-columns: 1fr !important;
    gap: var(--spacing-lg);
}

.two-col > .glass-card.feature-cards {
    width: 100%;
}

/* 每行功能模块内部：卡片网格自适应（桌面端充分利用宽度） */
.two-col .feature-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
}

/* 第一行模块自动标题（签到/兑换/记录区） */
.two-col > .feature-cards:nth-child(1) {
    position: relative;
}

.two-col > .feature-cards:nth-child(1)::before {
    content: '功能中心';
    display: block;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--tech-text);
    margin-bottom: var(--spacing-md);
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(34,211,238,0.2);
    background: linear-gradient(90deg, var(--tech-cyan), var(--tech-purple));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* 第二行模块标题强化 */
.two-col > .feature-cards:nth-child(2) > .section-title {
    font-size: 1.1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(168,85,247,0.2);
}

/* ============================================================
   入场动画：加载时元素依次淡入上浮
   ============================================================ */
.nav-bar,
.page-banner,
.glass-card,
.stat-card,
.feature-cards {
    animation: techRise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.page-banner { animation-delay: 0.05s; }
.stat-card:nth-child(1) { animation-delay: 0.12s; }
.stat-card:nth-child(2) { animation-delay: 0.18s; }
.stat-card:nth-child(3) { animation-delay: 0.24s; }
.stat-card:nth-child(4) { animation-delay: 0.30s; }
.feature-cards:nth-of-type(1) { animation-delay: 0.30s; }
.feature-cards:nth-of-type(2) { animation-delay: 0.38s; }
.login-card { animation-delay: 0.15s; }

@keyframes techRise {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes techShine {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

/* ============================================================
   教学类页面（teaching-style.css）覆盖：翻转卡片 / 分类标题
   ============================================================ */
.front,
.back {
    background: var(--tech-glass);
    border: 1px solid var(--tech-glass-border);
    color: var(--tech-text);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.card:hover .flipper {
    box-shadow: var(--tech-glow-strong);
}

.card-icon {
    filter: drop-shadow(0 0 10px var(--tech-cyan-soft));
}

.card-title {
    color: var(--tech-text);
}

.card-desc {
    color: var(--tech-text-muted);
}

.action-btn {
    background: linear-gradient(120deg, var(--tech-cyan), var(--tech-blue) 55%, var(--tech-violet));
    color: #04111a;
    border-radius: var(--tech-radius);
    box-shadow: var(--tech-glow);
    font-weight: 700;
}

.action-btn:hover {
    background: linear-gradient(120deg, var(--tech-cyan), var(--tech-blue) 55%, var(--tech-violet));
    transform: translateY(-2px);
    box-shadow: var(--tech-glow-strong);
}

/* ============================================================
   个人中心页面（profile.php）覆盖
   ============================================================ */

/* 用户信息头部卡片：橙色 → 霓虹毛玻璃 */
.profile-header {
    background: var(--tech-glass) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--tech-glass-border);
    box-shadow: var(--tech-shadow-md), inset 0 1px 0 rgba(255,255,255,0.06);
    color: var(--tech-text);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.profile-header:hover {
    transform: translateY(-3px);
    box-shadow: var(--tech-glow-cyan);
}

/* 头像圆圈：霓虹描边 + 微光 */
.profile-avatar {
    background: linear-gradient(135deg, var(--tech-cyan), var(--tech-blue)) !important;
    border: 2px solid var(--tech-cyan) !important;
    box-shadow: 0 0 16px rgba(34,211,238,0.35);
    text-shadow: 0 0 8px rgba(34,211,238,0.5);
}

.profile-name {
    background: linear-gradient(90deg, var(--tech-cyan), var(--tech-purple));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: 1px;
}

.profile-meta {
    color: var(--tech-text-secondary);
}

.profile-email {
    color: var(--tech-text-muted);
}

/* 统计卡片增强 */
.stat-card {
    position: relative;
    overflow: hidden;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--tech-cyan), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.stat-card:hover::before {
    opacity: 1;
}

.stat-value {
    font-weight: 600;
    font-size: 1.05em;
    color: var(--tech-cyan);
}

/* 表单区域标题 */
.section-title {
    color: var(--tech-text) !important;
    border-bottom: none !important;
    position: relative;
    padding-bottom: 0.5rem;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 40px; height: 2px;
    background: linear-gradient(90deg, var(--tech-cyan), var(--tech-purple));
    border-radius: 1px;
}

/* 以下两项为页面内联 <style> 的兜底覆盖（内联晚于外链，需 !important） */
.category-title {
    color: var(--tech-text) !important;
    border-left-color: var(--tech-cyan) !important;
}

.single-card .front {
    background: var(--tech-glass) !important;
    border-color: var(--tech-glass-border) !important;
    color: var(--tech-text) !important;
}

/* ============================================================
   无障碍：尊重“减少动态效果”偏好
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
    #tech-bg { display: none; }
}