/* ╔══════════════════════════════════════════════════════════╗
   ║  🌊 极致液态玻璃 - Liquid Glass ULTIMATE               ║
   ║  纯白背景 + 满级玻璃效果                                ║
   ╚══════════════════════════════════════════════════════════╝ */

/* ─── 1. 纯白底 + 彩色浮动光斑（更强可见度） ─── */
body {
    background: #ffffff;
    color: #1d1d1f;
    position: relative;
    overflow-x: hidden;
}

body::before {
    content: '';
    position: fixed;
    inset: -50%;
    width: 200%;
    height: 200%;
    background:
        radial-gradient(ellipse 600px 600px at 15% 25%, rgba(139, 92, 246, 0.12) 0%, transparent 70%),
        radial-gradient(ellipse 500px 500px at 85% 75%, rgba(236, 72, 153, 0.10) 0%, transparent 70%),
        radial-gradient(ellipse 700px 700px at 50% 50%, rgba(59, 130, 246, 0.08) 0%, transparent 70%),
        radial-gradient(ellipse 400px 400px at 75% 15%, rgba(251, 191, 36, 0.08) 0%, transparent 70%);
    animation: orb-drift 25s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: 0;
}

@keyframes orb-drift {
    0%   { transform: translate(0, 0) rotate(0deg) scale(1); }
    33%  { transform: translate(3%, 8%) rotate(120deg) scale(1.05); }
    66%  { transform: translate(-4%, 5%) rotate(240deg) scale(0.95); }
    100% { transform: translate(2%, -3%) rotate(360deg) scale(1); }
}

main, nav, .fixed {
    position: relative;
    z-index: 1;
}

/* ─── 2. 极致液态玻璃卡片 ─── */
.glass-card {
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(120px) saturate(380%) brightness(1.18) contrast(1.04);
    -webkit-backdrop-filter: blur(120px) saturate(380%) brightness(1.18) contrast(1.04);
    border-radius: 24px;
    border: 0.5px solid rgba(255, 255, 255, 0.65);
    box-shadow:
        inset 0 0.5px 0 rgba(255, 255, 255, 0.9),
        inset 0 -0.5px 0 rgba(0, 0, 0, 0.03),
        0 2px 8px rgba(0, 0, 0, 0.02),
        0 8px 32px rgba(0, 0, 0, 0.04);
    transition:
        transform 0.55s cubic-bezier(0.25, 1, 0.5, 1),
        box-shadow 0.55s cubic-bezier(0.25, 1, 0.5, 1),
        background 0.55s ease,
        border-color 0.55s ease;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

/* 顶部光泽反射（模拟玻璃上边缘的光线反射） */
.glass-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        170deg,
        rgba(255, 255, 255, 0.55) 0%,
        rgba(255, 255, 255, 0.18) 30%,
        transparent 55%,
        rgba(255, 248, 240, 0.06) 100%
    );
    pointer-events: none;
    z-index: 1;
}

/* 彩虹折射边框（hover 时激活） */
.glass-card::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: conic-gradient(
        from var(--glass-angle, 0deg),
        rgba(255, 100, 100, 0.5),
        rgba(100, 255, 150, 0.5),
        rgba(100, 150, 255, 0.5),
        rgba(255, 200, 100, 0.5),
        rgba(200, 100, 255, 0.5),
        rgba(255, 100, 100, 0.5)
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    z-index: 3;
    filter: blur(0.5px);
}

.glass-card > * {
    position: relative;
    z-index: 2;
}

/* 鼠标追踪高光点 */
.glass-card .glass-specular {
    position: absolute;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.7) 0%,
        rgba(255, 255, 255, 0.2) 20%,
        rgba(180, 160, 255, 0.06) 45%,
        transparent 70%
    );
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.2s ease;
    mix-blend-mode: soft-light;
}

/* ─── Hover 状态 ─── */
.glass-card:hover {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.85);
    transform: translateY(-4px) scale(1.008);
    box-shadow:
        inset 0 0.5px 0 rgba(255, 255, 255, 1),
        inset 0 -1px 2px rgba(0, 0, 0, 0.02),
        0 4px 12px rgba(0, 0, 0, 0.03),
        0 16px 48px rgba(0, 0, 0, 0.06),
        0 0 0 0.5px rgba(255, 255, 255, 0.4),
        0 0 40px rgba(180, 160, 255, 0.06);
}

.glass-card:hover::after {
    opacity: 1;
    animation: prism-spin 4s linear infinite;
}

.glass-card:hover .glass-specular {
    opacity: 1;
}

@keyframes prism-spin {
    to { --glass-angle: 360deg; }
}

/* 注册 CSS 自定义属性 */
@property --glass-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

/* ─── 3. 极致玻璃导航栏 ─── */
.glass-nav {
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(140px) saturate(400%) brightness(1.2) contrast(1.03);
    -webkit-backdrop-filter: blur(140px) saturate(400%) brightness(1.2) contrast(1.03);
    border-bottom: 0.5px solid rgba(255, 255, 255, 0.5);
    box-shadow:
        0 0.5px 0 rgba(255, 255, 255, 0.7),
        0 4px 24px rgba(0, 0, 0, 0.03);
    transition: all 0.45s cubic-bezier(0.25, 1, 0.5, 1);
}

.glass-nav.scrolled {
    background: rgba(255, 255, 255, 0.42);
    border-bottom-color: rgba(255, 255, 255, 0.7);
    box-shadow:
        0 0.5px 0 rgba(255, 255, 255, 0.9),
        0 8px 32px rgba(0, 0, 0, 0.06);
}

/* ─── 4. 导航胶囊 ─── */
.nav-pill {
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 16px;
    padding: 5px;
    backdrop-filter: blur(20px) saturate(180%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 1px 3px rgba(0, 0, 0, 0.04);
}

.nav-link {
    padding: 9px 18px;
    border-radius: 11px;
    color: #6e6e73;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 500;
    position: relative;
}

.nav-link:hover {
    color: #1d1d1f;
    background: rgba(255, 255, 255, 0.5);
}

.nav-link-active {
    background: rgba(255, 255, 255, 0.85);
    color: #1d1d1f;
    font-weight: 600;
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.06),
        0 4px 12px rgba(0, 0, 0, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 1);
}

/* ─── 5. 极致玻璃按钮（紫粉渐变 + 强辉光） ─── */
.btn-glass {
    background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 40%, #ec4899 100%);
    background-size: 200% 200%;
    background-position: 0% 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.5);
    border-radius: 14px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        inset 0 -1px 0 rgba(0, 0, 0, 0.05),
        0 4px 16px rgba(139, 92, 246, 0.3),
        0 8px 32px rgba(236, 72, 153, 0.2);
    color: #fff;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;
}

/* 按钮上的光泽扫过 */
.btn-glass::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        110deg,
        transparent 20%,
        rgba(255, 255, 255, 0.35) 45%,
        rgba(255, 255, 255, 0.35) 55%,
        transparent 80%
    );
    transform: translateX(-100%);
    transition: transform 0.6s ease;
    pointer-events: none;
}

.btn-glass:hover {
    background-position: 100% 50%;
    transform: translateY(-3px) scale(1.03);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.45),
        0 8px 24px rgba(139, 92, 246, 0.4),
        0 16px 48px rgba(236, 72, 153, 0.3),
        0 0 0 2px rgba(139, 92, 246, 0.15);
}

.btn-glass:hover::before {
    transform: translateX(100%);
}

.btn-glass:active {
    transform: translateY(0) scale(0.97);
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.1),
        0 2px 8px rgba(139, 92, 246, 0.3);
}

/* ─── 6. 极致玻璃输入框 ─── */
.glass-input {
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(20px) saturate(180%);
    border: 1.5px solid rgba(0, 0, 0, 0.08);
    border-radius: 14px;
    padding: 12px 16px;
    color: #1d1d1f;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow:
        inset 0 1px 2px rgba(0, 0, 0, 0.04),
        inset 0 0 0 0 rgba(139, 92, 246, 0),
        0 1px 3px rgba(0, 0, 0, 0.04);
}

.glass-input:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.75);
    border-color: rgba(139, 92, 246, 0.5);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 1),
        inset 0 0 0 4px rgba(139, 92, 246, 0.08),
        0 0 0 4px rgba(139, 92, 246, 0.12),
        0 8px 24px rgba(139, 92, 246, 0.12);
}

.glass-input::placeholder {
    color: #86868b;
}

/* ─── 7. 极致进度条 ─── */
.progress-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06);
}

.progress-fill {
    border-radius: 999px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(90deg, #8b5cf6 0%, #a855f7 50%, #ec4899 100%);
    background-size: 200% 100%;
    animation: progress-gradient 3s ease infinite;
    box-shadow:
        0 0 12px rgba(139, 92, 246, 0.4),
        0 0 24px rgba(236, 72, 153, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

@keyframes progress-gradient {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.progress-fill::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.6) 50%,
        transparent 100%
    );
    animation: shimmer 1.8s ease-in-out infinite;
}

@keyframes shimmer {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(200%); }
}

/* ─── 8. 玻璃标签 ─── */
.glass-badge {
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 999px;
    padding: 5px 14px;
    font-size: 12px;
    color: #1d1d1f;
    font-weight: 500;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 1);
}

/* ─── 9. 玻璃分割线 ─── */
.glass-divider {
    border-color: rgba(0, 0, 0, 0.06);
    position: relative;
}

.glass-divider::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
}

/* ─── 10. 文字颜色 ─── */
.text-primary   { color: #1d1d1f; }
.text-secondary { color: #6e6e73; }
.text-muted     { color: #86868b; }

/* ─── 11. 玻璃 Toast ─── */
.glass-toast {
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(60px) saturate(250%);
    border: 1.5px solid rgba(255, 255, 255, 0.85);
    border-radius: 16px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 1),
        0 8px 32px rgba(0, 0, 0, 0.1),
        0 2px 8px rgba(0, 0, 0, 0.06);
}

/* ─── 12. 悬浮辉光（给特定卡片加） ─── */
.glass-glow {
    position: relative;
}

.glass-glow::after {
    content: '';
    position: absolute;
    inset: -24px;
    border-radius: inherit;
    background: radial-gradient(
        ellipse at center,
        rgba(139, 92, 246, 0.15) 0%,
        rgba(236, 72, 153, 0.08) 40%,
        transparent 70%
    );
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    z-index: -1;
    filter: blur(20px);
}

.glass-glow:hover::after {
    opacity: 1;
}

/* ─── 13. 折射边框高级卡片 ─── */
.glass-card-premium {
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(120px) saturate(400%) brightness(1.15);
    border-radius: 24px;
    position: relative;
    border: none;
}

.glass-card-premium::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 26px;
    padding: 2px;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 1),
        rgba(255, 255, 255, 0.2),
        rgba(255, 255, 255, 1),
        rgba(255, 255, 255, 0.2)
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

/* ─── 14. 浮动 + 脉冲动效 ─── */
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-8px); }
}

.animate-float {
    animation: float 4s ease-in-out infinite;
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 20px rgba(139, 92, 246, 0.15); }
    50% { box-shadow: 0 0 48px rgba(139, 92, 246, 0.3); }
}

.animate-pulse-glow {
    animation: pulse-glow 3s ease-in-out infinite;
}

/* ─── 15. 入场动画 ─── */
@keyframes slide-up-glass {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.96);
        filter: blur(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

.animate-slide-up {
    animation: slide-up-glass 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes fade-in-glass {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
    animation: fade-in-glass 0.5s ease both;
}

/* ─── 16. 响应式 ─── */
@media (max-width: 768px) {
    .glass-card {
        border-radius: 18px;
    }
    .glass-nav {
        backdrop-filter: blur(40px) saturate(200%);
    }
    body::before {
        background:
            radial-gradient(ellipse 400px 400px at 20% 30%, rgba(139, 92, 246, 0.08) 0%, transparent 70%),
            radial-gradient(ellipse 300px 300px at 80% 70%, rgba(236, 72, 153, 0.06) 0%, transparent 70%);
    }
}

/* ─── 17. 减少动效偏好 ─── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    body::before { animation: none; }
    .glass-card:hover { transform: none; }
}

/* ============================================
   🍎 Apple Liquid Glass - Capsule Buttons
   ============================================ */

/* 通用胶囊按钮基础 */
.btn-apple,
.btn-checkin {
    border-radius: 9999px !important;  /* 完全胶囊形 */
    font-weight: 600;
    letter-spacing: -0.01em;
    transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
    position: relative;
    overflow: hidden;
}

/* 品牌色胶囊 (primary) */
.btn-apple-primary,
.btn-checkin {
    background: rgba(79, 70, 229, 0.12);
    color: #4f46e5;
    border: 1px solid rgba(79, 70, 229, 0.15);
}

.btn-apple-primary:hover,
.btn-checkin:hover {
    background: rgba(79, 70, 229, 0.18);
    transform: scale(1.02);
    box-shadow: 0 2px 12px rgba(79, 70, 229, 0.15);
}

.btn-apple-primary:active,
.btn-checkin:active {
    transform: scale(0.97);
}

/* 成功态胶囊 (checked in) */
.btn-apple-success {
    background: rgba(34, 197, 94, 0.12);
    color: #16a34a;
    border: 1px solid rgba(34, 197, 94, 0.15);
}

/* 次要操作胶囊 */
.btn-apple-secondary {
    background: rgba(0, 0, 0, 0.04);
    color: #1d1d1f;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.btn-apple-secondary:hover {
    background: rgba(0, 0, 0, 0.07);
}

/* 链接式文字按钮 (替代裸露的 <a> 链接) */
.link-apple {
    color: #4f46e5;
    font-weight: 500;
    font-size: 0.8125rem;
    text-decoration: none;
    padding: 4px 10px;
    border-radius: 9999px;
    transition: all 0.2s ease;
    background: transparent;
}

.link-apple:hover {
    background: rgba(79, 70, 229, 0.08);
}

/* ============================================
   🍎 Apple Liquid Glass - Icon Tinting
   ============================================ */
.tint-brand { color: #4f46e5; }
.tint-blue { color: #3b82f6; }
.tint-green { color: #16a34a; }
.tint-orange { color: #f97316; }
.tint-yellow { color: #eab308; }
.tint-red { color: #ef4444; }

/* 图标容器 (统一尺寸 + tinted 背景) */
.icon-circle {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.icon-circle.brand { background: rgba(79, 70, 229, 0.1); color: #4f46e5; }
.icon-circle.blue { background: rgba(59, 130, 246, 0.1); color: #3b82f6; }
.icon-circle.green { background: rgba(34, 197, 94, 0.1); color: #16a34a; }
.icon-circle.orange { background: rgba(249, 115, 22, 0.1); color: #f97316; }
.icon-circle.yellow { background: rgba(234, 179, 8, 0.1); color: #eab308; }

/* ============================================
   🍎 Apple Liquid Glass - Depth Layers
   ============================================ */

/* Layer 0: 页面背景 (aurora-bg 已有) */
/* Layer 1: 内容卡片 */
.glass-card {
    background: rgba(255, 255, 255, 0.55) !important;
    backdrop-filter: saturate(180%) blur(20px) !important;
    -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
    border: 0.5px solid rgba(255, 255, 255, 0.7) !important;
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.02),
        0 4px 16px rgba(0, 0, 0, 0.03),
        inset 0 0.5px 0 rgba(255, 255, 255, 0.8) !important;
}

/* Layer 2: 悬浮元素 (nav, toast, tab bar) - 更高模糊度 */
.glass-nav,
.apple-tab-bar,
#global-toast .glass-card,
#toast-container .glass-card {
    background: rgba(255, 255, 255, 0.72) !important;
    backdrop-filter: saturate(200%) blur(25px) !important;
    -webkit-backdrop-filter: saturate(200%) blur(25px) !important;
}

/* Layer 3: 模态/弹窗 (最高层) */
.glass-modal {
    background: rgba(255, 255, 255, 0.82) !important;
    backdrop-filter: saturate(220%) blur(30px) !important;
    -webkit-backdrop-filter: saturate(220%) blur(30px) !important;
    box-shadow:
        0 8px 40px rgba(0, 0, 0, 0.08),
        inset 0 0.5px 0 rgba(255, 255, 255, 0.9) !important;
}

/* 卡片 hover 时的深度提升 */
.glass-card.card-hover:hover {
    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.03),
        0 8px 24px rgba(0, 0, 0, 0.05),
        inset 0 0.5px 0 rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(255, 255, 255, 0.85) !important;
}

/* 进度条液态化 */
.progress-bar-animated {
    border-radius: 9999px;
    background: linear-gradient(90deg, #818cf8, #6366f1, #4f46e5) !important;
    box-shadow: 0 0 8px rgba(99, 102, 241, 0.3);
}

/* ============================================================
   APPLE LIQUID GLASS SYSTEM — WWDC25 Design Language
   Complete optical simulation: reflection + refraction + specular + distortion
   ============================================================ */

/* --- 0. CSS Custom Properties (Design Tokens) --- */
:root {
    --lg-specular: rgba(255, 255, 255, 0.85);
    --lg-refraction: linear-gradient(135deg, 
        rgba(255,255,255,0.4) 0%, 
        rgba(255,255,255,0.05) 40%, 
        rgba(255,255,255,0.0) 60%, 
        rgba(255,255,255,0.15) 100%);
    --lg-border-light: rgba(255, 255, 255, 0.65);
    --lg-border-dark: rgba(0, 0, 0, 0.06);
    --lg-shadow-ambient: rgba(0, 0, 0, 0.04);
    --lg-shadow-direct: rgba(0, 0, 0, 0.06);
    --lg-highlight: rgba(255, 255, 255, 0.95);
    --lg-rainbow: linear-gradient(
        135deg,
        rgba(255,100,100,0.15) 0%,
        rgba(255,200,50,0.12) 20%,
        rgba(100,255,150,0.12) 40%,
        rgba(100,180,255,0.15) 60%,
        rgba(180,100,255,0.12) 80%,
        rgba(255,100,200,0.15) 100%
    );
    --lg-transition-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --lg-transition-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* --- 1. Aurora Background Enhancement --- */
.aurora-bg {
    background: 
        radial-gradient(ellipse 80% 60% at 10% 20%, rgba(120,119,198,0.25) 0%, transparent 60%),
        radial-gradient(ellipse 60% 80% at 90% 80%, rgba(99,179,237,0.2) 0%, transparent 55%),
        radial-gradient(ellipse 70% 50% at 50% 50%, rgba(167,139,250,0.15) 0%, transparent 50%),
        radial-gradient(ellipse 50% 70% at 80% 10%, rgba(251,146,60,0.1) 0%, transparent 50%),
        linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
    background-attachment: fixed !important;
    position: relative;
}

/* Animated aurora layer */
.aurora-bg::before {
    content: '';
    position: fixed;
    inset: -50%;
    width: 200%;
    height: 200%;
    background: 
        radial-gradient(ellipse 40% 30% at 30% 40%, rgba(139,92,246,0.12) 0%, transparent 70%),
        radial-gradient(ellipse 35% 45% at 70% 60%, rgba(59,130,246,0.1) 0%, transparent 70%),
        radial-gradient(ellipse 30% 35% at 50% 30%, rgba(236,72,153,0.08) 0%, transparent 70%);
    animation: aurora-drift 25s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: 0;
}

@keyframes aurora-drift {
    0%   { transform: translate(0, 0) rotate(0deg) scale(1); }
    33%  { transform: translate(3%, -2%) rotate(1deg) scale(1.02); }
    66%  { transform: translate(-2%, 3%) rotate(-0.5deg) scale(0.98); }
    100% { transform: translate(1%, -1%) rotate(0.5deg) scale(1.01); }
}

/* Ensure content sits above aurora */
.aurora-bg > * {
    position: relative;
    z-index: 1;
}

/* --- 2. Liquid Glass Card (Core) --- */
.glass-card {
    background: rgba(255, 255, 255, 0.55) !important;
    backdrop-filter: saturate(180%) blur(20px) brightness(1.02) !important;
    -webkit-backdrop-filter: saturate(180%) blur(20px) brightness(1.02) !important;
    border: 0.5px solid var(--lg-border-light) !important;
    box-shadow:
        0 1px 2px var(--lg-shadow-ambient),
        0 4px 16px var(--lg-shadow-direct),
        inset 0 0.5px 0 var(--lg-highlight),
        inset 0 -0.5px 0 rgba(0,0,0,0.03) !important;
    transition: 
        transform 0.4s var(--lg-transition-spring),
        box-shadow 0.4s var(--lg-transition-smooth),
        border-color 0.3s ease !important;
    position: relative;
    overflow: hidden;
}

/* Specular highlight bar (top arc reflection) */
.glass-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        var(--lg-specular) 30%, 
        var(--lg-specular) 70%, 
        transparent 100%);
    opacity: 0.7;
    pointer-events: none;
    z-index: 2;
}

/* Refraction overlay (subtle rainbow on hover) */
.glass-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--lg-rainbow);
    opacity: 0;
    transition: opacity 0.5s var(--lg-transition-smooth);
    pointer-events: none;
    z-index: 1;
    mix-blend-mode: soft-light;
}

.glass-card:hover::after {
    opacity: 1;
}

.glass-card.card-hover:hover {
    transform: translateY(-2px) scale(1.005);
    box-shadow:
        0 2px 4px var(--lg-shadow-ambient),
        0 12px 32px rgba(0,0,0,0.08),
        0 0 0 0.5px rgba(255,255,255,0.5),
        inset 0 0.5px 0 var(--lg-highlight),
        inset 0 -0.5px 0 rgba(0,0,0,0.02) !important;
    border-color: rgba(255,255,255,0.9) !important;
}

/* --- 3. Liquid Glass Nav Bar --- */
.glass-nav {
    background: rgba(255, 255, 255, 0.6) !important;
    backdrop-filter: saturate(200%) blur(25px) brightness(1.03) !important;
    -webkit-backdrop-filter: saturate(200%) blur(25px) brightness(1.03) !important;
    border-bottom: 0.5px solid rgba(255,255,255,0.5) !important;
    box-shadow:
        0 0.5px 0 rgba(255,255,255,0.8),
        0 4px 20px rgba(0,0,0,0.04) !important;
    transition: all 0.3s var(--lg-transition-smooth);
}

/* Scrolled state — add via JS or use this as enhanced default */
.glass-nav.scrolled,
.glass-nav[data-scrolled="true"] {
    background: rgba(255, 255, 255, 0.78) !important;
    backdrop-filter: saturate(220%) blur(30px) brightness(1.05) !important;
    -webkit-backdrop-filter: saturate(220%) blur(30px) brightness(1.05) !important;
    box-shadow:
        0 0.5px 0 rgba(255,255,255,0.9),
        0 8px 32px rgba(0,0,0,0.06) !important;
}

/* Nav pill container */
.nav-pill {
    background: rgba(255,255,255,0.35) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 0.5px solid rgba(255,255,255,0.4) !important;
    box-shadow: inset 0 0.5px 0 rgba(255,255,255,0.6) !important;
}

/* Active nav link — liquid glass pill */
.nav-link-active {
    background: rgba(255,255,255,0.7) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow:
        0 1px 3px rgba(0,0,0,0.06),
        inset 0 0.5px 0 rgba(255,255,255,0.9) !important;
    color: #1e293b !important;
    border: 0.5px solid rgba(255,255,255,0.6) !important;
}

/* --- 4. Capsule Buttons (Liquid Press) --- */
.btn-apple,
button[class*="btn"],
a[class*="btn"],
.btn-primary,
.btn-secondary,
.btn-outline {
    border-radius: 9999px !important;
    position: relative;
    overflow: hidden;
    transition: 
        transform 0.25s var(--lg-transition-spring),
        box-shadow 0.3s var(--lg-transition-smooth),
        background 0.3s ease !important;
}

/* Specular shine on buttons */
.btn-apple::before,
button[class*="btn"]::before,
a[class*="btn"]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 15%;
    right: 15%;
    height: 50%;
    background: linear-gradient(180deg, 
        rgba(255,255,255,0.5) 0%, 
        rgba(255,255,255,0) 100%);
    border-radius: 9999px 9999px 50% 50%;
    pointer-events: none;
    opacity: 0.6;
}

.btn-apple:hover,
button[class*="btn"]:hover,
a[class*="btn"]:hover {
    transform: scale(1.03);
    box-shadow: 
        0 4px 16px rgba(0,0,0,0.1),
        0 0 20px rgba(99,102,241,0.15) !important;
}

.btn-apple:active,
button[class*="btn"]:active,
a[class*="btn"]:active {
    transform: scale(0.97);
    transition-duration: 0.1s !important;
}

/* Primary button liquid glass */
.btn-primary,
.btn-apple.primary {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
    border: 0.5px solid rgba(255,255,255,0.3) !important;
    box-shadow:
        0 2px 8px rgba(99,102,241,0.3),
        inset 0 0.5px 0 rgba(255,255,255,0.4) !important;
    color: white !important;
}

/* Secondary / outline button */
.btn-secondary,
.btn-outline {
    background: rgba(255,255,255,0.5) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 0.5px solid rgba(255,255,255,0.6) !important;
    box-shadow:
        0 1px 4px rgba(0,0,0,0.04),
        inset 0 0.5px 0 rgba(255,255,255,0.8) !important;
}

/* --- 5. Apple Tab Bar (Mobile Bottom) --- */
.apple-tab-bar {
    background: rgba(255, 255, 255, 0.72) !important;
    backdrop-filter: saturate(220%) blur(30px) brightness(1.05) !important;
    -webkit-backdrop-filter: saturate(220%) blur(30px) brightness(1.05) !important;
    border-top: 0.5px solid rgba(255,255,255,0.6) !important;
    box-shadow:
        0 -1px 0 rgba(255,255,255,0.8),
        0 -4px 20px rgba(0,0,0,0.04) !important;
}

.apple-tab-bar a,
.apple-tab-bar button {
    border-radius: 16px !important;
    transition: all 0.3s var(--lg-transition-spring) !important;
}

.apple-tab-bar a.active,
.apple-tab-bar button.active,
.apple-tab-bar a[aria-current="page"] {
    background: rgba(99,102,241,0.12) !important;
    color: #4f46e5 !important;
    box-shadow: inset 0 0.5px 0 rgba(255,255,255,0.5) !important;
}

/* --- 6. Modal Liquid Entrance --- */
.glass-modal {
    background: rgba(255, 255, 255, 0.82) !important;
    backdrop-filter: saturate(220%) blur(35px) brightness(1.03) !important;
    -webkit-backdrop-filter: saturate(220%) blur(35px) brightness(1.03) !important;
    border: 0.5px solid rgba(255,255,255,0.7) !important;
    box-shadow:
        0 24px 80px rgba(0,0,0,0.12),
        0 8px 24px rgba(0,0,0,0.06),
        inset 0 0.5px 0 var(--lg-highlight),
        inset 0 -0.5px 0 rgba(0,0,0,0.03) !important;
    animation: modal-liquid-enter 0.5s var(--lg-transition-spring) both;
}

@keyframes modal-liquid-enter {
    0% {
        opacity: 0;
        transform: scale(0.92) translateY(10px);
        filter: blur(8px);
    }
    60% {
        transform: scale(1.01) translateY(-2px);
        filter: blur(0px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
        filter: blur(0px);
    }
}

/* Modal backdrop */
.modal-backdrop,
[data-modal-backdrop] {
    background: rgba(0,0,0,0.2) !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    animation: backdrop-fade 0.3s ease both;
}

@keyframes backdrop-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* --- 7. Staggered Entrance Animation --- */
@keyframes card-entrance {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.97);
        filter: blur(4px);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

.glass-card[data-animate] {
    animation: card-entrance 0.6s var(--lg-transition-spring) both;
}

.glass-card[data-animate]:nth-child(1) { animation-delay: 0ms; }
.glass-card[data-animate]:nth-child(2) { animation-delay: 60ms; }
.glass-card[data-animate]:nth-child(3) { animation-delay: 120ms; }
.glass-card[data-animate]:nth-child(4) { animation-delay: 180ms; }
.glass-card[data-animate]:nth-child(5) { animation-delay: 240ms; }
.glass-card[data-animate]:nth-child(6) { animation-delay: 300ms; }
.glass-card[data-animate]:nth-child(7) { animation-delay: 360ms; }
.glass-card[data-animate]:nth-child(8) { animation-delay: 420ms; }
.glass-card[data-animate]:nth-child(n+9) { animation-delay: 480ms; }

/* --- 8. Progress Bar Liquid --- */
.progress-bar-animated {
    border-radius: 9999px !important;
    background: linear-gradient(90deg, #818cf8, #6366f1, #4f46e5) !important;
    box-shadow: 
        0 0 12px rgba(99,102,241,0.35),
        inset 0 0.5px 0 rgba(255,255,255,0.4) !important;
    position: relative;
    overflow: hidden;
}

/* Shimmer effect on progress bar */
.progress-bar-animated::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255,255,255,0.35) 50%, 
        transparent 100%);
    animation: progress-shimmer 2.5s ease-in-out infinite;
}

@keyframes progress-shimmer {
    0%   { left: -60%; }
    100% { left: 160%; }
}

/* --- 9. Form Inputs Liquid Glass --- */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="date"],
select,
textarea {
    background: rgba(255,255,255,0.45) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 0.5px solid rgba(255,255,255,0.5) !important;
    border-radius: 14px !important;
    box-shadow:
        inset 0 1px 3px rgba(0,0,0,0.04),
        inset 0 0.5px 0 rgba(255,255,255,0.6) !important;
    transition: all 0.3s var(--lg-transition-smooth) !important;
}

input:focus,
select:focus,
textarea:focus {
    background: rgba(255,255,255,0.65) !important;
    border-color: rgba(99,102,241,0.4) !important;
    box-shadow:
        0 0 0 3px rgba(99,102,241,0.1),
        inset 0 1px 3px rgba(0,0,0,0.03),
        inset 0 0.5px 0 rgba(255,255,255,0.8) !important;
    outline: none !important;
}

/* --- 10. Scrollbar Liquid Glass --- */
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.12);
    border-radius: 9999px;
    border: 1px solid rgba(255,255,255,0.3);
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(0,0,0,0.2);
}

/* --- 11. Utility Classes --- */
/* Add data-animate to cards for stagger entrance */
/* Add data-scrolled to nav via JS for scroll-aware depth */

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .aurora-bg::before {
        animation: none !important;
    }
}

/* Dark mode support (future-proofing) */
@media (prefers-color-scheme: dark) {
    :root {
        --lg-specular: rgba(255, 255, 255, 0.15);
        --lg-border-light: rgba(255, 255, 255, 0.12);
        --lg-highlight: rgba(255, 255, 255, 0.1);
    }
}