/*! tailwindcss v4.1.10 | 用户视角AI管理后台样式 */
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight:initial}}}
@layer theme{
    :root,:host{
        /* 基础字体配置 */
        --font-sans:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
        --font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
        
        /* 核心配色：用户视角的AI科技风 */
        --color-primary-50: #f0f5ff;    /* 浅蓝背景 */
        --color-primary-100: #e1efff;   /* 超浅蓝 */
        --color-primary-500: #2563eb;   /* 主深蓝（按钮/重点） */
        --color-primary-600: #1d4ed8;   /* 深蓝hover */
        --color-primary-700: #1e40af;   /* 深蓝按压 */
        
        --color-secondary-50: #f5f3ff;  /* 浅紫背景 */
        --color-secondary-500: #8b5cf6; /* 极光紫（强调/点缀） */
        --color-secondary-600: #7c3aed; /* 紫hover */
        
        /* 中性色：柔和不刺眼 */
        --color-gray-50: #f9fafb;       /* 页面背景 */
        --color-gray-100: #f3f4f6;      /* 卡片背景 */
        --color-gray-300: #d1d5db;      /* 分割线 */
        --color-gray-500: #6b7280;      /* 次要文字 */
        --color-gray-700: #374151;      /* 常规文字 */
        --color-gray-900: #111827;      /* 标题文字 */
        --color-white: #ffffff;         /* 纯白 */
        
        /* 间距/字体/圆角：用户友好的尺寸 */
        --spacing: 0.25rem;
        --container-5xl: 64rem;
        --text-sm: 0.875rem;
        --text-base: 1rem;
        --text-lg: 1.125rem;
        --text-xl: 1.25rem;
        --text-2xl: 1.5rem;
        --text-3xl: 1.875rem;
        
        --font-weight-medium: 500;
        --font-weight-semibold: 600;
        --font-weight-bold: 700;
        
        --radius-sm: 0.25rem;
        --radius-md: 0.375rem;
        --radius-lg: 0.5rem;
        --radius-xl: 0.75rem;
        --radius-2xl: 1rem;
        
        /* 交互过渡：自然不突兀 */
        --transition-fast: 120ms ease-in-out;
        --transition-normal: 200ms ease-in-out;
        
        /* 阴影：柔和分层 */
        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
        --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
        --shadow-hover: 0 8px 16px -4px rgba(0, 0, 0, 0.08);
    }
}

@layer base{
    *,:after,:before,::backdrop{
        box-sizing: border-box;
        border: 0 solid;
        margin: 0;
        padding: 0;
    }
    html,:host{
        -webkit-text-size-adjust: 100%;
        tab-size: 4;
        line-height: 1.5;
        font-family: var(--font-sans);
        -webkit-tap-highlight-color: transparent;
        scroll-behavior: smooth;
        background-color: var(--color-gray-50);
        color: var(--color-gray-700);
    }
    body{
        min-height: 100vh;
        line-height: 1.6; /* 更易读的行高 */
    }
    h1,h2,h3,h4,h5,h6{
        color: var(--color-gray-900);
        font-weight: var(--font-weight-bold);
        line-height: 1.2; /* 标题更紧凑 */
    }
    a{
        color: var(--color-primary-500);
        text-decoration: none;
        transition: color var(--transition-normal);
    }
    a:hover{
        color: var(--color-primary-600);
    }
    img{
        max-width: 100%;
        height: auto;
        border-radius: var(--radius-lg); /* 图片圆角更友好 */
    }
}

@layer components{
    /* 导航栏：用户第一眼看到的核心区域 */
    .app-nav{
        background-color: var(--color-white);
        box-shadow: var(--shadow-sm);
        padding: 0 1.25rem;
        height: 4rem; /* 更舒适的高度 */
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: sticky;
        top: 0;
        z-index: 100;
    }
    .app-nav__logo{
        display: flex;
        align-items: center;
        gap: 0.75rem;
        font-weight: var(--font-weight-bold);
        font-size: var(--text-lg);
        color: var(--color-gray-900);
    }
    .app-nav__links{
        display: flex;
        gap: 1.5rem;
    }
    .app-nav__link{
        font-size: var(--text-sm);
        color: var(--color-gray-700);
        padding: 0.5rem 0;
        position: relative;
    }
    .app-nav__link:after{
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 0;
        height: 2px;
        background-color: var(--color-primary-500);
        transition: width var(--transition-normal);
    }
    .app-nav__link:hover:after{
        width: 100%;
    }

    /* 核心Banner：用户核心感知区域 */
    .app-banner{
        background: linear-gradient(135deg, var(--color-primary-50) 0%, var(--color-secondary-50) 100%);
        border-radius: var(--radius-2xl);
        padding: 2.5rem 1.5rem;
        margin: 1.5rem 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    @media (min-width: 64rem) {
        .app-banner{
            flex-direction: row;
            text-align: left;
            justify-content: space-between;
            padding: 3rem 2rem;
            min-height: 20rem;
        }
    }
    .app-banner__content{
        max-width: 32rem;
        margin-bottom: 2rem;
    }
    @media (min-width: 64rem) {
        .app-banner__content{
            margin-bottom: 0;
            margin-right: 2rem;
        }
    }
    .app-banner__title{
        font-size: var(--text-3xl);
        margin-bottom: 1rem;
    }
    @media (min-width: 64rem) {
        .app-banner__title{
            font-size: 2.5rem;
        }
    }
    .app-banner__desc{
        color: var(--color-gray-500);
        margin-bottom: 1.5rem;
        line-height: 1.7;
    }
    .app-banner__btn{
        display: inline-block;
        background-color: var(--color-primary-500);
        color: var(--color-white);
        font-weight: var(--font-weight-semibold);
        padding: 0.75rem 1.75rem;
        border-radius: var(--radius-lg);
        transition: all var(--transition-normal);
        box-shadow: var(--shadow-sm);
    }
    .app-banner__btn:hover{
        background-color: var(--color-primary-600);
        box-shadow: var(--shadow-md);
        transform: translateY(-2px);
        color: var(--color-white);
    }
    .app-banner__btn:active{
        transform: translateY(0);
    }
    .app-banner__img{
        max-width: 20rem;
        box-shadow: var(--shadow-md);
    }

    /* 功能卡片：用户快速识别核心价值 */
    .feature-card{
        background-color: var(--color-white);
        border-radius: var(--radius-xl);
        padding: 1.75rem;
        box-shadow: var(--shadow-sm);
        transition: all var(--transition-normal);
        border-top: 3px solid transparent;
    }
    .feature-card:hover{
        box-shadow: var(--shadow-hover);
        transform: translateY(-4px);
        border-top-color: var(--color-secondary-500); /* 顶部色条引导视觉 */
    }
    .feature-card__title{
        font-size: var(--text-lg);
        margin-bottom: 0.75rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    .feature-card__title:before{
        content: '';
        display: inline-block;
        width: 4px;
        height: 1.25rem;
        background-color: var(--color-secondary-500);
        border-radius: var(--radius-sm);
    }
    .feature-card__desc{
        color: var(--color-gray-500);
        font-size: var(--text-sm);
        line-height: 1.6;
    }
}

@layer utilities{
    /* 基础布局工具类 */
    .container{
        max-width: var(--container-5xl);
        margin: 0 auto;
        padding: 0 1rem;
    }
    .grid-3{
        display: grid;
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    @media (min-width: 48rem) {
        .grid-3{
            grid-template-columns: repeat(3, 1fr);
        }
    }
    .py-8{
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
}