/*
<!--
本项目使用lgpl-3 协议，请遵守该协议！
https://www.gnu.org/licenses/lgpl-3.0.txt

GNU LESSER GENERAL PUBLIC LICENSE
Version 3, 29 June 2007
Copyright © 2007 Free Software Foundation, Inc.
Everyone is permitted to copy and distribute verbatim copies of this license document, but changing it is not allowed.
This version of the GNU Lesser General Public License incorporates the terms and conditions of version 3 of the GNU General Public License, supplemented by the additional permissions listed below.

作者:rpg636zjhi(3187735201@qq.com)
github.com/rpg636zjhi
-->*/
/* Material Design 3 完整颜色系统 */
:root {
    /* 主色系 */
    --md-ref-palette-primary0: #000000;
    --md-ref-palette-primary10: #21005D;
    --md-ref-palette-primary20: #381E72;
    --md-ref-palette-primary30: #4F378B;
    --md-ref-palette-primary40: #6750A4;
    --md-ref-palette-primary50: #7F67BE;
    --md-ref-palette-primary60: #9A82DB;
    --md-ref-palette-primary70: #B69DF8;
    --md-ref-palette-primary80: #D0BCFF;
    --md-ref-palette-primary90: #EADDFF;
    --md-ref-palette-primary95: #F6EDFF;
    --md-ref-palette-primary99: #FFFBFE;
    --md-ref-palette-primary100: #FFFFFF;
    
    /* 次要色系 */
    --md-ref-palette-secondary0: #000000;
    --md-ref-palette-secondary10: #1D192B;
    --md-ref-palette-secondary20: #332D41;
    --md-ref-palette-secondary30: #4A4458;
    --md-ref-palette-secondary40: #625B71;
    --md-ref-palette-secondary50: #7A7289;
    --md-ref-palette-secondary60: #958DA5;
    --md-ref-palette-secondary70: #B0A7C0;
    --md-ref-palette-secondary80: #CCC2DC;
    --md-ref-palette-secondary90: #E8DEF8;
    --md-ref-palette-secondary95: #F6EDFF;
    --md-ref-palette-secondary99: #FFFBFE;
    --md-ref-palette-secondary100: #FFFFFF;
    
    /* 第三色系 */
    --md-ref-palette-tertiary0: #000000;
    --md-ref-palette-tertiary10: #31111D;
    --md-ref-palette-tertiary20: #492532;
    --md-ref-palette-tertiary30: #633B48;
    --md-ref-palette-tertiary40: #7D5260;
    --md-ref-palette-tertiary50: #986977;
    --md-ref-palette-tertiary60: #B58392;
    --md-ref-palette-tertiary70: #D29DAC;
    --md-ref-palette-tertiary80: #EFB8C8;
    --md-ref-palette-tertiary90: #FFD8E4;
    --md-ref-palette-tertiary95: #FFECF1;
    --md-ref-palette-tertiary99: #FFFBFA;
    --md-ref-palette-tertiary100: #FFFFFF;
    
    /* 中性色系 */
    --md-ref-palette-neutral0: #000000;
    --md-ref-palette-neutral10: #1C1B1F;
    --md-ref-palette-neutral20: #313033;
    --md-ref-palette-neutral30: #484649;
    --md-ref-palette-neutral40: #605D62;
    --md-ref-palette-neutral50: #787579;
    --md-ref-palette-neutral60: #939094;
    --md-ref-palette-neutral70: #AEAAAE;
    --md-ref-palette-neutral80: #C9C5CA;
    --md-ref-palette-neutral90: #E6E1E5;
    --md-ref-palette-neutral95: #F4EFF4;
    --md-ref-palette-neutral99: #FFFBFE;
    --md-ref-palette-neutral100: #FFFFFF;
    
    /* 中性变体色系 */
    --md-ref-palette-neutral-variant0: #000000;
    --md-ref-palette-neutral-variant10: #1D1A22;
    --md-ref-palette-neutral-variant20: #322F38;
    --md-ref-palette-neutral-variant30: #49454F;
    --md-ref-palette-neutral-variant40: #605D66;
    --md-ref-palette-neutral-variant50: #79747E;
    --md-ref-palette-neutral-variant60: #938F99;
    --md-ref-palette-neutral-variant70: #AEA9B4;
    --md-ref-palette-neutral-variant80: #CAC4D0;
    --md-ref-palette-neutral-variant90: #E7E0EC;
    --md-ref-palette-neutral-variant95: #F5EEFA;
    --md-ref-palette-neutral-variant99: #FFFBFE;
    --md-ref-palette-neutral-variant100: #FFFFFF;
    
    /* 错误色系 */
    --md-ref-palette-error0: #000000;
    --md-ref-palette-error10: #410E0B;
    --md-ref-palette-error20: #601410;
    --md-ref-palette-error30: #8C1D18;
    --md-ref-palette-error40: #B3261E;
    --md-ref-palette-error50: #DC362E;
    --md-ref-palette-error60: #E46962;
    --md-ref-palette-error70: #EC928E;
    --md-ref-palette-error80: #F2B8B5;
    --md-ref-palette-error90: #F9DEDC;
    --md-ref-palette-error95: #FCEEEE;
    --md-ref-palette-error99: #FFFBF9;
    --md-ref-palette-error100: #FFFFFF;
    
    /* 成功色系 */
    --md-ref-palette-success0: #000000;
    --md-ref-palette-success10: #002106;
    --md-ref-palette-success20: #00390F;
    --md-ref-palette-success30: #005319;
    --md-ref-palette-success40: #006E0B;
    --md-ref-palette-success50: #008A29;
    --md-ref-palette-success60: #00A639;
    --md-ref-palette-success70: #00C249;
    --md-ref-palette-success80: #6EDF8A;
    --md-ref-palette-success90: #81C995;
    --md-ref-palette-success95: #C8F0D0;
    --md-ref-palette-success99: #F5FFF6;
    --md-ref-palette-success100: #FFFFFF;
    
    /* 系统颜色映射 */
    --md-sys-color-primary: var(--md-ref-palette-primary40);
    --md-sys-color-on-primary: var(--md-ref-palette-primary100);
    --md-sys-color-primary-container: var(--md-ref-palette-primary90);
    --md-sys-color-on-primary-container: var(--md-ref-palette-primary10);
    
    --md-sys-color-secondary: var(--md-ref-palette-secondary40);
    --md-sys-color-on-secondary: var(--md-ref-palette-secondary100);
    --md-sys-color-secondary-container: var(--md-ref-palette-secondary90);
    --md-sys-color-on-secondary-container: var(--md-ref-palette-secondary10);
    
    --md-sys-color-tertiary: var(--md-ref-palette-tertiary40);
    --md-sys-color-on-tertiary: var(--md-ref-palette-tertiary100);
    --md-sys-color-tertiary-container: var(--md-ref-palette-tertiary90);
    --md-sys-color-on-tertiary-container: var(--md-ref-palette-tertiary10);
    
    /* 表面颜色 */
    --md-sys-color-surface: var(--md-ref-palette-neutral10);
    --md-sys-color-on-surface: var(--md-ref-palette-neutral90);
    --md-sys-color-surface-variant: var(--md-ref-palette-neutral-variant30);
    --md-sys-color-on-surface-variant: var(--md-ref-palette-neutral-variant80);
    
    --md-sys-color-surface-dim: var(--md-ref-palette-neutral6);
    --md-sys-color-surface-bright: var(--md-ref-palette-neutral24);
    --md-sys-color-surface-container-lowest: var(--md-ref-palette-neutral4);
    --md-sys-color-surface-container-low: var(--md-ref-palette-neutral10);
    --md-sys-color-surface-container: var(--md-ref-palette-neutral12);
    --md-sys-color-surface-container-high: var(--md-ref-palette-neutral17);
    --md-sys-color-surface-container-highest: var(--md-ref-palette-neutral22);
    
    /* 轮廓色 */
    --md-sys-color-outline: var(--md-ref-palette-neutral-variant60);
    --md-sys-color-outline-variant: var(--md-ref-palette-neutral-variant30);
    
    /* 错误色 */
    --md-sys-color-error: var(--md-ref-palette-error40);
    --md-sys-color-on-error: var(--md-ref-palette-error100);
    --md-sys-color-error-container: var(--md-ref-palette-error90);
    --md-sys-color-on-error-container: var(--md-ref-palette-error10);
    
    /* 成功色 */
    --md-sys-color-success: var(--md-ref-palette-success60);
    --md-sys-color-on-success: var(--md-ref-palette-success100);
    --md-sys-color-success-container: var(--md-ref-palette-success90);
    --md-sys-color-on-success-container: var(--md-ref-palette-success10);
    
    /* 形状系统 */
    --md-sys-shape-corner-extra-small: 4px;
    --md-sys-shape-corner-small: 8px;
    --md-sys-shape-corner-medium: 12px;
    --md-sys-shape-corner-large: 16px;
    --md-sys-shape-corner-extra-large: 28px;
    --md-sys-shape-corner-full: 9999px;
    
    /* 阴影系统 */
    --md-sys-elevation-level0: none;
    --md-sys-elevation-level1: 0px 1px 3px 1px rgba(0, 0, 0, 0.15), 0px 1px 2px rgba(0, 0, 0, 0.3);
    --md-sys-elevation-level2: 0px 2px 6px 2px rgba(0, 0, 0, 0.15), 0px 1px 2px rgba(0, 0, 0, 0.3);
    --md-sys-elevation-level3: 0px 4px 8px 3px rgba(0, 0, 0, 0.15), 0px 1px 3px rgba(0, 0, 0, 0.3);
    --md-sys-elevation-level4: 0px 6px 10px 4px rgba(0, 0, 0, 0.15), 0px 2px 3px rgba(0, 0, 0, 0.3);
    --md-sys-elevation-level5: 0px 8px 12px 6px rgba(0, 0, 0, 0.15), 0px 4px 4px rgba(0, 0, 0, 0.3);
    
    /* 动画系统 */
    --md-sys-motion-duration-short1: 50ms;
    --md-sys-motion-duration-short2: 100ms;
    --md-sys-motion-duration-short3: 150ms;
    --md-sys-motion-duration-short4: 200ms;
    --md-sys-motion-duration-medium1: 250ms;
    --md-sys-motion-duration-medium2: 300ms;
    --md-sys-motion-duration-medium3: 350ms;
    --md-sys-motion-duration-medium4: 400ms;
    --md-sys-motion-duration-long1: 450ms;
    --md-sys-motion-duration-long2: 500ms;
    --md-sys-motion-duration-long3: 550ms;
    --md-sys-motion-duration-long4: 600ms;
    --md-sys-motion-duration-extra-long1: 700ms;
    --md-sys-motion-duration-extra-long2: 800ms;
    --md-sys-motion-duration-extra-long3: 900ms;
    --md-sys-motion-duration-extra-long4: 1000ms;
    
    --md-sys-motion-easing-linear: cubic-bezier(0, 0, 1, 1);
    --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
    --md-sys-motion-easing-standard-decelerate: cubic-bezier(0, 0, 0, 1);
    --md-sys-motion-easing-standard-accelerate: cubic-bezier(0.3, 0, 1, 1);
    --md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
    --md-sys-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
    --md-sys-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
    
    /* 排版系统 */
    --md-sys-typescale-display-large-font-family: 'Roboto', sans-serif;
    --md-sys-typescale-display-large-font-weight: 400;
    --md-sys-typescale-display-large-font-size: 57px;
    --md-sys-typescale-display-large-line-height: 64px;
    --md-sys-typescale-display-large-letter-spacing: -0.25px;
    
    --md-sys-typescale-display-medium-font-family: 'Roboto', sans-serif;
    --md-sys-typescale-display-medium-font-weight: 400;
    --md-sys-typescale-display-medium-font-size: 45px;
    --md-sys-typescale-display-medium-line-height: 52px;
    
    --md-sys-typescale-display-small-font-family: 'Roboto', sans-serif;
    --md-sys-typescale-display-small-font-weight: 400;
    --md-sys-typescale-display-small-font-size: 36px;
    --md-sys-typescale-display-small-line-height: 44px;
    
    --md-sys-typescale-headline-large-font-family: 'Roboto', sans-serif;
    --md-sys-typescale-headline-large-font-weight: 400;
    --md-sys-typescale-headline-large-font-size: 32px;
    --md-sys-typescale-headline-large-line-height: 40px;
    
    --md-sys-typescale-headline-medium-font-family: 'Roboto', sans-serif;
    --md-sys-typescale-headline-medium-font-weight: 400;
    --md-sys-typescale-headline-medium-font-size: 28px;
    --md-sys-typescale-headline-medium-line-height: 36px;
    
    --md-sys-typescale-headline-small-font-family: 'Roboto', sans-serif;
    --md-sys-typescale-headline-small-font-weight: 400;
    --md-sys-typescale-headline-small-font-size: 24px;
    --md-sys-typescale-headline-small-line-height: 32px;
    
    --md-sys-typescale-title-large-font-family: 'Roboto', sans-serif;
    --md-sys-typescale-title-large-font-weight: 400;
    --md-sys-typescale-title-large-font-size: 22px;
    --md-sys-typescale-title-large-line-height: 28px;
    
    --md-sys-typescale-title-medium-font-family: 'Roboto', sans-serif;
    --md-sys-typescale-title-medium-font-weight: 500;
    --md-sys-typescale-title-medium-font-size: 16px;
    --md-sys-typescale-title-medium-line-height: 24px;
    --md-sys-typescale-title-medium-letter-spacing: 0.15px;
    
    --md-sys-typescale-title-small-font-family: 'Roboto', sans-serif;
    --md-sys-typescale-title-small-font-weight: 500;
    --md-sys-typescale-title-small-font-size: 14px;
    --md-sys-typescale-title-small-line-height: 20px;
    --md-sys-typescale-title-small-letter-spacing: 0.1px;
    
    --md-sys-typescale-label-large-font-family: 'Roboto', sans-serif;
    --md-sys-typescale-label-large-font-weight: 500;
    --md-sys-typescale-label-large-font-size: 14px;
    --md-sys-typescale-label-large-line-height: 20px;
    --md-sys-typescale-label-large-letter-spacing: 0.1px;
    
    --md-sys-typescale-label-medium-font-family: 'Roboto', sans-serif;
    --md-sys-typescale-label-medium-font-weight: 500;
    --md-sys-typescale-label-medium-font-size: 12px;
    --md-sys-typescale-label-medium-line-height: 16px;
    --md-sys-typescale-label-medium-letter-spacing: 0.5px;
    
    --md-sys-typescale-label-small-font-family: 'Roboto', sans-serif;
    --md-sys-typescale-label-small-font-weight: 500;
    --md-sys-typescale-label-small-font-size: 11px;
    --md-sys-typescale-label-small-line-height: 16px;
    --md-sys-typescale-label-small-letter-spacing: 0.5px;
    
    --md-sys-typescale-body-large-font-family: 'Roboto', sans-serif;
    --md-sys-typescale-body-large-font-weight: 400;
    --md-sys-typescale-body-large-font-size: 16px;
    --md-sys-typescale-body-large-line-height: 24px;
    --md-sys-typescale-body-large-letter-spacing: 0.5px;
    
    --md-sys-typescale-body-medium-font-family: 'Roboto', sans-serif;
    --md-sys-typescale-body-medium-font-weight: 400;
    --md-sys-typescale-body-medium-font-size: 14px;
    --md-sys-typescale-body-medium-line-height: 20px;
    --md-sys-typescale-body-medium-letter-spacing: 0.25px;
    
    --md-sys-typescale-body-small-font-family: 'Roboto', sans-serif;
    --md-sys-typescale-body-small-font-weight: 400;
    --md-sys-typescale-body-small-font-size: 12px;
    --md-sys-typescale-body-small-line-height: 16px;
    --md-sys-typescale-body-small-letter-spacing: 0.4px;
}

/* 应用深色主题 */
@media (prefers-color-scheme: dark) {
    :root {
        --md-sys-color-primary: var(--md-ref-palette-primary80);
        --md-sys-color-on-primary: var(--md-ref-palette-primary20);
        --md-sys-color-primary-container: var(--md-ref-palette-primary30);
        --md-sys-color-on-primary-container: var(--md-ref-palette-primary90);
        
        --md-sys-color-secondary: var(--md-ref-palette-secondary80);
        --md-sys-color-on-secondary: var(--md-ref-palette-secondary20);
        --md-sys-color-secondary-container: var(--md-ref-palette-secondary30);
        --md-sys-color-on-secondary-container: var(--md-ref-palette-secondary90);
        
        --md-sys-color-tertiary: var(--md-ref-palette-tertiary80);
        --md-sys-color-on-tertiary: var(--md-ref-palette-tertiary20);
        --md-sys-color-tertiary-container: var(--md-ref-palette-tertiary30);
        --md-sys-color-on-tertiary-container: var(--md-ref-palette-tertiary90);
        
        --md-sys-color-surface: var(--md-ref-palette-neutral10);
        --md-sys-color-on-surface: var(--md-ref-palette-neutral90);
        --md-sys-color-surface-variant: var(--md-ref-palette-neutral-variant30);
        --md-sys-color-on-surface-variant: var(--md-ref-palette-neutral-variant80);
        
        --md-sys-color-surface-dim: var(--md-ref-palette-neutral6);
        --md-sys-color-surface-bright: var(--md-ref-palette-neutral24);
        
        --md-sys-color-outline: var(--md-ref-palette-neutral-variant60);
        --md-sys-color-outline-variant: var(--md-ref-palette-neutral-variant30);
        
        --md-sys-color-error: var(--md-ref-palette-error80);
        --md-sys-color-on-error: var(--md-ref-palette-error20);
        --md-sys-color-error-container: var(--md-ref-palette-error30);
        --md-sys-color-on-error-container: var(--md-ref-palette-error90);
        
        --md-sys-color-success: var(--md-ref-palette-success80);
        --md-sys-color-on-success: var(--md-ref-palette-success20);
        --md-sys-color-success-container: var(--md-ref-palette-success30);
        --md-sys-color-on-success-container: var(--md-ref-palette-success90);
    }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--md-sys-typescale-body-medium-font-family);
    font-size: var(--md-sys-typescale-body-medium-font-size);
    font-weight: var(--md-sys-typescale-body-medium-font-weight);
    line-height: var(--md-sys-typescale-body-medium-line-height);
    letter-spacing: var(--md-sys-typescale-body-medium-letter-spacing);
    background-color: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
    min-height: 100vh;
}

/* 应用容器 */
.app-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* 顶部应用栏 - Material Design 3 风格 */
.top-app-bar {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    height: 64px;
    padding: 0 16px;
    background-color: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
    box-shadow: var(--md-sys-elevation-level1);
}

@media (max-width: 600px) {
    .top-app-bar {
        height: 56px;
    }
}

.top-app-bar__navigation-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-right: 12px;
    border-radius: var(--md-sys-shape-corner-full);
    color: var(--md-sys-color-on-surface);
    cursor: pointer;
    transition: background-color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}

.top-app-bar__navigation-icon:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

.top-app-bar__title {
    font-family: var(--md-sys-typescale-title-large-font-family);
    font-size: var(--md-sys-typescale-title-large-font-size);
    font-weight: var(--md-sys-typescale-title-large-font-weight);
    line-height: var(--md-sys-typescale-title-large-line-height);
    flex-grow: 1;
}

.top-app-bar__actions {
    display: flex;
    gap: 8px;
}

.icon-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--md-sys-shape-corner-full);
    color: var(--md-sys-color-on-surface-variant);
    background: none;
    border: none;
    cursor: pointer;
    transition: background-color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}

.icon-button:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

.icon-button--filled {
    background-color: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}

.icon-button--filled:hover {
    background-color: color-mix(in srgb, var(--md-sys-color-primary) 92%, transparent);
    box-shadow: var(--md-sys-elevation-level2);
}

/* 主内容区域 */
.main-content {
    flex: 1;
    padding: 24px 16px;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

@media (min-width: 840px) {
    .main-content {
        padding: 32px 24px;
    }
}

/* 英雄区域 */
.hero-section {
    margin-bottom: 48px;
    text-align: center;
    padding: 32px 16px;
    border-radius: var(--md-sys-shape-corner-extra-large);
    background: linear-gradient(135deg, 
        var(--md-sys-color-primary-container) 0%, 
        var(--md-sys-color-tertiary-container) 100%);
    color: var(--md-sys-color-on-primary-container);
    box-shadow: var(--md-sys-elevation-level1);
}

@media (min-width: 600px) {
    .hero-section {
        padding: 48px 32px;
    }
}

.hero-title {
    font-family: var(--md-sys-typescale-display-small-font-family);
    font-size: var(--md-sys-typescale-display-small-font-size);
    font-weight: var(--md-sys-typescale-display-small-font-weight);
    line-height: var(--md-sys-typescale-display-small-line-height);
    margin-bottom: 16px;
    color: var(--md-sys-color-on-primary-container);
}

.hero-subtitle {
    font-family: var(--md-sys-typescale-headline-small-font-family);
    font-size: var(--md-sys-typescale-headline-small-font-size);
    font-weight: var(--md-sys-typescale-headline-small-font-weight);
    line-height: var(--md-sys-typescale-headline-small-line-height);
    margin-bottom: 24px;
    color: var(--md-sys-color-on-primary-container);
    opacity: 0.9;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* 卡片组件 */
.card {
    background-color: var(--md-sys-color-surface-container);
    border-radius: var(--md-sys-shape-corner-large);
    padding: 24px;
    box-shadow: var(--md-sys-elevation-level1);
    transition: box-shadow var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard);
}

.card:hover {
    box-shadow: var(--md-sys-elevation-level2);
}

.card--filled {
    background-color: var(--md-sys-color-surface-container-high);
}

.card--outlined {
    background-color: transparent;
    border: 1px solid var(--md-sys-color-outline-variant);
    box-shadow: none;
}

.card__header {
    margin-bottom: 16px;
}

.card__title {
    font-family: var(--md-sys-typescale-headline-small-font-family);
    font-size: var(--md-sys-typescale-headline-small-font-size);
    font-weight: var(--md-sys-typescale-headline-small-font-weight);
    line-height: var(--md-sys-typescale-headline-small-line-height);
    color: var(--md-sys-color-on-surface);
    margin-bottom: 8px;
}

.card__subtitle {
    font-family: var(--md-sys-typescale-title-medium-font-family);
    font-size: var(--md-sys-typescale-title-medium-font-size);
    font-weight: var(--md-sys-typescale-title-medium-font-weight);
    line-height: var(--md-sys-typescale-title-medium-line-height);
    color: var(--md-sys-color-on-surface-variant);
}

.card__content {
    margin-bottom: 24px;
}

.card__actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

/* 按钮组件 */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 24px;
    border-radius: var(--md-sys-shape-corner-full);
    font-family: var(--md-sys-typescale-label-large-font-family);
    font-size: var(--md-sys-typescale-label-large-font-size);
    font-weight: var(--md-sys-typescale-label-large-font-weight);
    line-height: var(--md-sys-typescale-label-large-line-height);
    letter-spacing: var(--md-sys-typescale-label-large-letter-spacing);
    border: none;
    cursor: pointer;
    transition: all var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}

.button--filled {
    background-color: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    box-shadow: var(--md-sys-elevation-level0);
}

.button--filled:hover {
    background-color: color-mix(in srgb, var(--md-sys-color-primary) 92%, transparent);
    box-shadow: var(--md-sys-elevation-level1);
}

.button--filled:active {
    background-color: color-mix(in srgb, var(--md-sys-color-primary) 84%, transparent);
}

.button--outlined {
    background-color: transparent;
    color: var(--md-sys-color-primary);
    border: 1px solid var(--md-sys-color-outline);
}

.button--outlined:hover {
    background-color: rgba(124, 77, 255, 0.08);
}

.button--text {
    background-color: transparent;
    color: var(--md-sys-color-primary);
    padding: 0 12px;
}

.button--text:hover {
    background-color: rgba(124, 77, 255, 0.08);
}

/* 数据展示组件 */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 48px;
}

.stat-item {
    text-align: center;
    padding: 24px 16px;
    background-color: var(--md-sys-color-surface-container-low);
    border-radius: var(--md-sys-shape-corner-medium);
    transition: transform var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized);
}

.stat-item:hover {
    transform: translateY(-4px);
    background-color: var(--md-sys-color-surface-container);
}

.stat-value {
    font-family: var(--md-sys-typescale-display-small-font-family);
    font-size: var(--md-sys-typescale-display-small-font-size);
    font-weight: var(--md-sys-typescale-display-small-font-weight);
    line-height: var(--md-sys-typescale-display-small-line-height);
    color: var(--md-sys-color-primary);
    margin-bottom: 8px;
}

.stat-label {
    font-family: var(--md-sys-typescale-label-medium-font-family);
    font-size: var(--md-sys-typescale-label-medium-font-size);
    font-weight: var(--md-sys-typescale-label-medium-font-weight);
    line-height: var(--md-sys-typescale-label-medium-line-height);
    letter-spacing: var(--md-sys-typescale-label-medium-letter-spacing);
    color: var(--md-sys-color-on-surface-variant);
}

/* 功能网格 */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    margin-bottom: 48px;
}

.feature-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 24px;
    background-color: var(--md-sys-color-surface-container-low);
    border-radius: var(--md-sys-shape-corner-large);
    transition: all var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized);
}

.feature-card:hover {
    background-color: var(--md-sys-color-surface-container);
    transform: translateY(-4px);
}

.feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--md-sys-shape-corner-medium);
    background-color: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
    margin-bottom: 16px;
}

.feature-title {
    font-family: var(--md-sys-typescale-title-large-font-family);
    font-size: var(--md-sys-typescale-title-large-font-size);
    font-weight: var(--md-sys-typescale-title-large-font-weight);
    line-height: var(--md-sys-typescale-title-large-line-height);
    color: var(--md-sys-color-on-surface);
    margin-bottom: 8px;
}

.feature-description {
    font-family: var(--md-sys-typescale-body-medium-font-family);
    font-size: var(--md-sys-typescale-body-medium-font-size);
    font-weight: var(--md-sys-typescale-body-medium-font-weight);
    line-height: var(--md-sys-typescale-body-medium-line-height);
    letter-spacing: var(--md-sys-typescale-body-medium-letter-spacing);
    color: var(--md-sys-color-on-surface-variant);
}

/* 案例展示 */
.showcase-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
    margin-bottom: 48px;
}

.showcase-card {
    border-radius: var(--md-sys-shape-corner-large);
    overflow: hidden;
    background-color: var(--md-sys-color-surface-container);
    box-shadow: var(--md-sys-elevation-level1);
    transition: all var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized);
}

.showcase-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--md-sys-elevation-level3);
}

.showcase-image {
    height: 160px;
    background: linear-gradient(135deg, 
        var(--md-sys-color-primary-container) 0%, 
        var(--md-sys-color-tertiary-container) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.showcase-icon {
    font-size: 64px;
    color: var(--md-sys-color-on-primary-container);
}

.showcase-content {
    padding: 20px;
}

.showcase-title {
    font-family: var(--md-sys-typescale-title-medium-font-family);
    font-size: var(--md-sys-typescale-title-medium-font-size);
    font-weight: var(--md-sys-typescale-title-medium-font-weight);
    line-height: var(--md-sys-typescale-title-medium-line-height);
    letter-spacing: var(--md-sys-typescale-title-medium-letter-spacing);
    color: var(--md-sys-color-on-surface);
    margin-bottom: 8px;
}

.showcase-description {
    font-family: var(--md-sys-typescale-body-small-font-family);
    font-size: var(--md-sys-typescale-body-small-font-size);
    font-weight: var(--md-sys-typescale-body-small-font-weight);
    line-height: var(--md-sys-typescale-body-small-line-height);
    letter-spacing: var(--md-sys-typescale-body-small-letter-spacing);
    color: var(--md-sys-color-on-surface-variant);
    margin-bottom: 12px;
}

.showcase-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tag {
    display: inline-block;
    padding: 4px 10px;
    border-radius: var(--md-sys-shape-corner-full);
    background-color: var(--md-sys-color-surface-container-high);
    color: var(--md-sys-color-on-surface-variant);
    font-family: var(--md-sys-typescale-label-small-font-family);
    font-size: var(--md-sys-typescale-label-small-font-size);
    font-weight: var(--md-sys-typescale-label-small-font-weight);
    line-height: var(--md-sys-typescale-label-small-line-height);
    letter-spacing: var(--md-sys-typescale-label-small-letter-spacing);
}

/* 流程步骤 */
.process-steps {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 48px;
    position: relative;
}

@media (min-width: 840px) {
    .process-steps {
        flex-direction: row;
    }
    
    .process-step {
        flex: 1;
    }
}

.process-step {
    position: relative;
    padding: 24px;
    background-color: var(--md-sys-color-surface-container-low);
    border-radius: var(--md-sys-shape-corner-large);
    text-align: center;
    transition: all var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized);
}

.process-step:hover {
    background-color: var(--md-sys-color-surface-container);
}

.process-step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--md-sys-shape-corner-full);
    background-color: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    font-family: var(--md-sys-typescale-title-large-font-family);
    font-size: var(--md-sys-typescale-title-large-font-size);
    font-weight: var(--md-sys-typescale-title-large-font-weight);
    line-height: var(--md-sys-typescale-title-large-line-height);
    margin: 0 auto 16px;
}

.process-step-title {
    font-family: var(--md-sys-typescale-title-medium-font-family);
    font-size: var(--md-sys-typescale-title-medium-font-size);
    font-weight: var(--md-sys-typescale-title-medium-font-weight);
    line-height: var(--md-sys-typescale-title-medium-line-height);
    letter-spacing: var(--md-sys-typescale-title-medium-letter-spacing);
    color: var(--md-sys-color-on-surface);
    margin-bottom: 8px;
}

/* 底部导航 */
.bottom-navigation {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    background-color: var(--md-sys-color-surface-container);
    border-top: 1px solid var(--md-sys-color-outline-variant);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 16px;
    z-index: 100;
}

.bottom-navigation__items {
    display: flex;
    max-width: 360px;
    width: 100%;
    justify-content: space-around;
}

.bottom-navigation__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 64px;
    border-radius: var(--md-sys-shape-corner-medium);
    color: var(--md-sys-color-on-surface-variant);
    text-decoration: none;
    transition: all var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}

.bottom-navigation__item:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

.bottom-navigation__item--active {
    color: var(--md-sys-color-primary);
}

.bottom-navigation__icon {
    margin-bottom: 4px;
}

.bottom-navigation__label {
    font-family: var(--md-sys-typescale-label-medium-font-family);
    font-size: var(--md-sys-typescale-label-medium-font-size);
    font-weight: var(--md-sys-typescale-label-medium-font-weight);
    line-height: var(--md-sys-typescale-label-medium-line-height);
    letter-spacing: var(--md-sys-typescale-label-medium-letter-spacing);
}

/* 底部应用栏 */
.footer-app-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px 16px;
    background-color: var(--md-sys-color-surface-container);
    border-top: 1px solid var(--md-sys-color-outline-variant);
    margin-top: 80px;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    color: var(--md-sys-color-on-surface-variant);
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: center;
    margin-bottom: 16px;
}

.footer-link {
    color: var(--md-sys-color-on-surface-variant);
    text-decoration: none;
    font-family: var(--md-sys-typescale-label-large-font-family);
    font-size: var(--md-sys-typescale-label-large-font-size);
    font-weight: var(--md-sys-typescale-label-large-font-weight);
    line-height: var(--md-sys-typescale-label-large-line-height);
    letter-spacing: var(--md-sys-typescale-label-large-letter-spacing);
    transition: color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}

.footer-link:hover {
    color: var(--md-sys-color-primary);
}

.footer-copyright {
    color: var(--md-sys-color-on-surface-variant);
    font-family: var(--md-sys-typescale-body-small-font-family);
    font-size: var(--md-sys-typescale-body-small-font-size);
    font-weight: var(--md-sys-typescale-body-small-font-weight);
    line-height: var(--md-sys-typescale-body-small-line-height);
    letter-spacing: var(--md-sys-typescale-body-small-letter-spacing);
    text-align: center;
}

/* 行动召唤卡片样式 */
.cta-card {
    background: linear-gradient(135deg, var(--md-sys-color-primary-container), var(--md-sys-color-tertiary-container));
}

.cta-title {
    color: var(--md-sys-color-on-primary-container);
}

.cta-description {
    color: var(--md-sys-color-on-primary-container);
    opacity: 0.9;
}

.cta-button-primary {
    background-color: var(--md-sys-color-on-primary-container);
    color: var(--md-sys-color-primary-container);
}

.cta-button-secondary {
    color: var(--md-sys-color-on-primary-container);
    border-color: var(--md-sys-color-on-primary-container);
}

.cta-button-secondary:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* 工具类 */
.text-center {
    text-align: center;
}

.mb-16 {
    margin-bottom: 16px;
}

.mb-24 {
    margin-bottom: 24px;
}

.mb-32 {
    margin-bottom: 32px;
}

.mb-48 {
    margin-bottom: 48px;
}

.mt-48 {
    margin-top: 48px;
}

.section-title {
    font-family: var(--md-sys-typescale-headline-medium-font-family);
    font-size: var(--md-sys-typescale-headline-medium-font-size);
    font-weight: var(--md-sys-typescale-headline-medium-font-weight);
    line-height: var(--md-sys-typescale-headline-medium-line-height);
    color: var(--md-sys-color-on-surface);
    margin-bottom: 24px;
}

/* 响应式调整 */
@media (max-width: 600px) {
    .hero-title {
        font-size: var(--md-sys-typescale-headline-large-font-size);
        line-height: var(--md-sys-typescale-headline-large-line-height);
    }
    
    .hero-subtitle {
        font-size: var(--md-sys-typescale-title-large-font-size);
        line-height: var(--md-sys-typescale-title-large-line-height);
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .features-grid {
        grid-template-columns: 1fr;
    }
    
    .showcase-grid {
        grid-template-columns: 1fr;
    }
}

/* 滚动条样式 */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--md-sys-color-surface-container-low);
}

::-webkit-scrollbar-thumb {
    background: var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-corner-full);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--md-sys-color-outline);
}

/* 涟漪动画 */
@keyframes ripple-animation {
    to {
        transform: scale(4);
        opacity: 0;
    }
}