/**
 * ============================================
 * 灵涵速推 - 全局 Design System
 * ============================================
 * 
 * 统一组件系统，所有页面必须复用
 * 
 * 【卡片类型】
 * 1. BannerCard - 顶部大卡 (aspect-ratio: 2.2/1)
 * 2. FeatureCard - 功能卡 (height: 110px, 2列grid)
 * 3. VipCard - 会员卡 (height: 150px)
 * 
 * 【布局规则】
 * - 页面左右 padding: 16px
 * - 模块间距: 16px
 * - 卡片间距: 12px
 * - 统一圆角: 16px
 */

/* ========================================
   1. CSS 变量 - 全局设计令牌
   ======================================== */
:root {
    /* 字与骨架（Logo深蓝风格） */
    --ds-ink: #0f172a;
    --ds-text-primary: #0f172a;

    /* 强调 */
    --ds-primary: #1a365d;
    --ds-primary-light: #2d4a73;
    --ds-primary-dark: #0f172a;
    --accent-slate-900: #1a365d;
    --accent-slate-800: #152951;
    --accent-slate-750: #0f172a;
    
    /* 背景色 - 与 common --h5-canvas 一致（浅雾底 + 冷白卡） */
    --ds-bg-page: #eff4f2;
    --ds-bg-secondary: #e6eeeb;
    --ds-bg-card: #fcfdfd;
    --ds-text-secondary: #334155;
    --ds-text-muted: #64748b;
    --ds-text-inverse: #ffffff;
    
    /* 边框 - 简洁风格 */
    --ds-border-light: rgba(15, 23, 42, 0.055);
    --ds-border-medium: rgba(15, 23, 42, 0.09);
    
    /* 阴影 - 轻、漫射 */
    --ds-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.045);
    --ds-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.05), 0 20px 40px rgba(15, 23, 42, 0.06);
    --ds-shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.07), 0 40px 64px rgba(15, 23, 42, 0.08);
    --ds-shadow-card: 0 4px 20px rgba(15, 23, 42, 0.055), 0 0 0 1px rgba(15, 23, 42, 0.035);
    
    /* ========================================
       统一间距系统 (8/12/16/24)
       ======================================== */
    --ds-spacing-xs: 8px;
    --ds-spacing-sm: 12px;
    --ds-spacing-md: 16px;
    --ds-spacing-lg: 24px;
    --ds-spacing-xl: 32px;
    
    /* 页面边距 */
    --ds-page-padding: 16px;
    
    /* 模块间距 */
    --ds-section-gap: 16px;
    
    /* 卡片间距 */
    --ds-card-gap: 12px;
    
    /* ========================================
       统一圆角 (全部 16px)
       ======================================== */
    --ds-radius: 16px;
    --ds-radius-sm: 12px;
    --ds-radius-xs: 8px;
    
    /* ========================================
       卡片尺寸规范
       ======================================== */
    /* BannerCard - 顶部大卡 */
    --ds-banner-ratio: 2.2 / 1;
    --ds-banner-padding: 16px;
    
    /* FeatureCard - 功能卡 */
    --ds-feature-height: 110px;
    --ds-feature-padding: 12px;
    
    /* VipCard - 会员卡 */
    --ds-vip-height: 150px;
    --ds-vip-padding: 16px;
    
    /* 安全区域 */
    --ds-safe-top: env(safe-area-inset-top, 0px);
    --ds-safe-bottom: env(safe-area-inset-bottom, 0px);

    /**
     * 界面主题（「我的 → 界面主题」）在 html[data-h5-skin] 上会覆盖以下变量。
     * 未选皮肤时在此提供默认值，使工具内页、chip、上传区等可统一写 var(--as-blue)，避免 #1d4fff / 青绿混用。
     */
    --as-blue: #2563eb;
    --as-primary: #0f172a;
}

/* ========================================
   2. BannerCard - 顶部大卡组件
   ======================================== */

/**
 * BannerCard 使用说明:
 * - 用于: 首页banner / 智能体顶部 / 活动展示 / 功能页顶部
 * - 必须使用 aspect-ratio，禁止写死高度
 * - 统一圆角 16px
 */
.ds-banner-card {
    width: 100%;
    aspect-ratio: var(--ds-banner-ratio);
    border-radius: var(--ds-radius);
    padding: var(--ds-banner-padding);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
    
    /* 默认深色渐变背景（深青灰；变量由 common.css :root 提供） */
    background: var(--page-hero-gradient, linear-gradient(135deg, #1a2a33 0%, #1e3a44 52%, #1c323b 100%));
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 14px 48px rgba(8, 12, 24, 0.28);
}

/* Banner 光斑效果 - 右上 */
.ds-banner-card::before {
    content: '';
    position: absolute;
    top: -48%;
    right: -18%;
    width: min(300px, 78vw);
    height: min(300px, 78vw);
    background: radial-gradient(circle, rgba(255, 255, 255, 0.07) 0%, transparent 68%);
    pointer-events: none;
    z-index: 0;
}

/* Banner 光斑效果 - 左下 */
.ds-banner-card::after {
    content: '';
    position: absolute;
    bottom: -38%;
    left: -12%;
    width: min(240px, 62vw);
    height: min(240px, 62vw);
    background: radial-gradient(circle, rgba(255, 255, 255, 0.045) 0%, transparent 72%);
    pointer-events: none;
    z-index: 0;
}

/* Banner 噪点纹理 */
.ds-banner-card .ds-banner-noise {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    opacity: 0.035;
    pointer-events: none;
    z-index: 0;
}

/* Banner 内容容器 */
.ds-banner-card .ds-banner-content {
    position: relative;
    z-index: 1;
}

/* Banner 装饰图标 */
.ds-banner-card .ds-banner-decor {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 44px;
    height: 44px;
    opacity: 0.5;
    pointer-events: none;
    z-index: 0;
    color: rgba(255, 255, 255, 0.35);
}

.ds-banner-card .ds-banner-decor svg {
    width: 100%;
    height: 100%;
    display: block;
    filter: drop-shadow(0 2px 10px rgba(255, 255, 255, 0.12));
}

/* Banner 徽章 */
.ds-banner-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    margin-bottom: var(--ds-spacing-sm);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.98);
    background: rgba(0, 0, 0, 0.38);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 100px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.ds-banner-badge .ds-badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 10px rgba(34, 197, 94, 0.65);
    flex-shrink: 0;
    animation: ds-badge-pulse 2.2s ease-in-out infinite;
}

@keyframes ds-badge-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.85; transform: scale(1.08); }
}

/* Banner 标题 */
.ds-banner-title {
    font-size: clamp(1.125rem, 3.5vw, 1.45rem);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.03em;
    color: rgba(255, 255, 255, 0.98);
    margin: 0 0 8px 0;
}

/* Banner 副标题 */
.ds-banner-subtitle {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.72);
    margin: 0;
}

/* Banner Emoji 图标 */
.ds-banner-emoji {
    font-size: 2.125rem;
    line-height: 1;
    margin-bottom: var(--ds-spacing-sm);
    filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.2));
}

/* ========================================
   3. FeatureCard - 功能卡组件
   ======================================== */

/**
 * FeatureCard 使用说明:
 * - 用于: 工具入口 / 功能列表
 * - 固定高度 110px
 * - 2列 grid 布局
 * - 统一圆角 16px
 */

/* 功能卡网格容器 */
.ds-feature-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--ds-card-gap);
}

/* 单个功能卡 */
.ds-feature-card {
    height: var(--ds-feature-height);
    background: var(--ds-bg-card);
    border: 1px solid var(--ds-border-light);
    border-radius: var(--ds-radius);
    padding: var(--ds-feature-padding);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: var(--ds-spacing-sm);
    transition: all 0.2s ease;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

.ds-feature-card:active {
    transform: scale(0.98);
    background: var(--ds-bg-secondary);
}

/* 功能卡图标 */
.ds-feature-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--ds-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ds-text-inverse);
    flex-shrink: 0;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
}

.ds-feature-icon svg {
    width: 20px;
    height: 20px;
}

.ds-feature-icon i {
    font-size: 18px;
}

/* 功能卡文字区 */
.ds-feature-info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.ds-feature-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--ds-text-primary);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ds-feature-desc {
    font-size: 12px;
    color: var(--ds-text-muted);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 功能卡标签 (HOT/NEW) */
.ds-feature-tag {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 6px;
    color: #fff;
}

.ds-feature-tag.hot {
    background: linear-gradient(135deg, #ef4444, #dc2626);
}

.ds-feature-tag.new {
    background: linear-gradient(135deg, var(--ds-primary), var(--ds-primary-light));
}

/* ========================================
   4. VipCard - 会员卡组件
   ======================================== */

/**
 * VipCard 使用说明:
 * - 用于: 用户信息 / 会员展示
 * - 固定高度 150px (唯一允许写死高度的卡片)
 * - 统一圆角 16px
 */
.ds-vip-card {
    width: 100%;
    height: var(--ds-vip-height);
    border-radius: var(--ds-radius);
    padding: var(--ds-vip-padding);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
}

/* VIP卡扫光效果 */
.ds-vip-card .ds-card-shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255,255,255,0.03) 25%,
        rgba(255,255,255,0.15) 50%,
        rgba(255,255,255,0.03) 75%,
        transparent 100%
    );
    transform: skewX(-20deg);
    animation: ds-card-sweep 4s ease-in-out infinite;
    z-index: 3;
    pointer-events: none;
}

@keyframes ds-card-sweep {
    0% { left: -100%; }
    50%, 100% { left: 150%; }
}

/* VIP卡装饰 */
.ds-vip-card .ds-card-decor {
    position: absolute;
    top: 10px;
    right: 14px;
    font-size: 42px;
    opacity: 0.12;
    z-index: 1;
}

/* VIP卡内容 */
.ds-vip-card .ds-vip-inner {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* VIP卡头部 - 用户信息 */
.ds-vip-header {
    display: flex;
    align-items: center;
    gap: var(--ds-spacing-sm);
}

.ds-vip-avatar {
    width: 48px;
    height: 48px;
    border-radius: var(--ds-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.ds-vip-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ds-vip-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--ds-text-inverse);
    margin-bottom: 4px;
}

.ds-vip-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: rgba(255,255,255,0.95);
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(10px);
    padding: 4px 10px;
    border-radius: 20px;
}

.ds-vip-badge i {
    font-size: 11px;
}

/* VIP卡底部 - 统计信息 */
.ds-vip-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-top: var(--ds-spacing-xs);
    border-top: 1px solid rgba(255,255,255,0.12);
}

.ds-vip-stat-label {
    font-size: 12px;
    color: rgba(255,255,255,0.7);
    margin-bottom: 4px;
}

.ds-vip-stat-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--ds-text-inverse);
}

.ds-vip-days {
    text-align: right;
}

.ds-vip-days-num {
    font-size: 24px;
    font-weight: 700;
    color: var(--ds-text-inverse);
    line-height: 1;
}

.ds-vip-days-label {
    font-size: 11px;
    color: rgba(255,255,255,0.7);
    margin-top: 2px;
}

/* VIP卡颜色变体 */

/* 普通用户 - 灰蓝 */
.ds-vip-card.vip-none {
    background: linear-gradient(135deg, #475569 0%, #334155 100%);
    border: 1px solid rgba(255,255,255,0.08);
}

/* 月卡会员 - 清新蓝 */
.ds-vip-card.vip-month {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 50%, #0369a1 100%);
    border: 1px solid rgba(125,211,252,0.3);
    box-shadow: 0 8px 32px rgba(14,165,233,0.25);
}

/* 年卡会员 - 尊贵紫 */
.ds-vip-card.vip-year {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 50%, #6d28d9 100%);
    border: 1px solid rgba(167,139,250,0.3);
    box-shadow: 0 8px 32px rgba(139,92,246,0.25);
}

/* 永久会员 - 金色 */
.ds-vip-card.vip-forever {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 50%, #b45309 100%);
    border: 1px solid rgba(251,191,36,0.3);
    box-shadow: 0 8px 32px rgba(245,158,11,0.25);
}

.ds-vip-card.vip-forever .ds-card-shine {
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255,215,0,0.05) 25%,
        rgba(255,215,0,0.25) 50%,
        rgba(255,215,0,0.05) 75%,
        transparent 100%
    );
}

/* ========================================
   5. 页面布局组件
   ======================================== */

/* 页面容器 */
.ds-page {
    padding: 0 var(--ds-page-padding);
}

/* 区块容器 */
.ds-section {
    margin-bottom: var(--ds-section-gap);
}

/* 区块标题 */
.ds-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--ds-spacing-sm);
}

.ds-section-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--ds-text-primary);
}

.ds-section-more {
    font-size: 13px;
    color: var(--ds-text-muted);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ========================================
   6. 通用工具类
   ======================================== */

/* 图标渐变背景 */
.ds-icon-gradient-1 { background: linear-gradient(135deg, var(--accent-slate-900, #1a2a33), var(--accent-light, #2a4f5c)); }
.ds-icon-gradient-2 { background: linear-gradient(135deg, #0ea5e9, #06b6d4); }
.ds-icon-gradient-3 { background: linear-gradient(135deg, #10b981, #34d399); }
.ds-icon-gradient-4 { background: linear-gradient(135deg, #f59e0b, #fbbf24); }
.ds-icon-gradient-5 { background: linear-gradient(135deg, #ef4444, #f87171); }
.ds-icon-gradient-6 { background: linear-gradient(135deg, #8b5cf6, #a78bfa); }
.ds-icon-gradient-7 { background: linear-gradient(135deg, #ec4899, #db2777); }
.ds-icon-gradient-8 { background: linear-gradient(135deg, #14b8a6, #0d9488); }
.ds-icon-gradient-9 { background: linear-gradient(135deg, #3b82f6, #2563eb); }

/* 间距工具类 */
.ds-mt-xs { margin-top: var(--ds-spacing-xs); }
.ds-mt-sm { margin-top: var(--ds-spacing-sm); }
.ds-mt-md { margin-top: var(--ds-spacing-md); }
.ds-mt-lg { margin-top: var(--ds-spacing-lg); }

.ds-mb-xs { margin-bottom: var(--ds-spacing-xs); }
.ds-mb-sm { margin-bottom: var(--ds-spacing-sm); }
.ds-mb-md { margin-bottom: var(--ds-spacing-md); }
.ds-mb-lg { margin-bottom: var(--ds-spacing-lg); }

.ds-pt-xs { padding-top: var(--ds-spacing-xs); }
.ds-pt-sm { padding-top: var(--ds-spacing-sm); }
.ds-pt-md { padding-top: var(--ds-spacing-md); }
.ds-pt-lg { padding-top: var(--ds-spacing-lg); }

.ds-pb-xs { padding-bottom: var(--ds-spacing-xs); }
.ds-pb-sm { padding-bottom: var(--ds-spacing-sm); }
.ds-pb-md { padding-bottom: var(--ds-spacing-md); }
.ds-pb-lg { padding-bottom: var(--ds-spacing-lg); }

/* ========================================
   7. 3列功能卡网格 (用于首页工具)
   ======================================== */
.ds-feature-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.ds-feature-grid-3 .ds-feature-card {
    height: auto;
    min-height: 0;
    padding: 14px 8px 12px;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.ds-feature-grid-3 .ds-feature-icon {
    width: 42px;
    height: 42px;
    margin-bottom: 8px;
}

.ds-feature-grid-3 .ds-feature-info {
    text-align: center;
}

.ds-feature-grid-3 .ds-feature-name {
    white-space: normal;
    text-align: center;
    margin-bottom: 4px;
}

.ds-feature-grid-3 .ds-feature-desc {
    text-align: center;
    font-size: 12px;
}