@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
    .content-auto {
        content-visibility: auto;
    }
    .text-shadow {
        text-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    .text-shadow-lg {
        text-shadow: 0 4px 8px rgba(0,0,0,0.2);
    }
    .text-shadow-xl {
        text-shadow: 0 8px 16px rgba(0,0,0,0.3);
    }
    .transition-all-300 {
        transition: all 0.3s ease;
    }
    .transition-all-500 {
        transition: all 0.5s ease;
    }
    .transition-all-700 {
        transition: all 0.7s ease;
    }
    .transition-transform-300 {
        transition: transform 0.3s ease;
    }
    .transition-opacity-300 {
        transition: opacity 0.3s ease;
    }
    .transition-colors-300 {
        transition: colors 0.3s ease;
    }
    .bg-gradient-uos {
        background: linear-gradient(135deg, #1E40AF 0%, #3B82F6 100%);
    }
    .bg-gradient-linux {
        background: linear-gradient(135deg, #2ECC71 0%, #27AE60 100%);
    }
    .bg-gradient-windows {
        background: linear-gradient(135deg, #0078D4 0%, #1E40AF 100%);
    }
    .bg-gradient-macos {
        background: linear-gradient(135deg, #0071E3 0%, #0051CB 100%);
    }
    .bg-gradient-ubuntu {
        background: linear-gradient(135deg, #E95420 0%, #C74A1A 100%);
    }
    .bg-gradient-fedora {
        background: linear-gradient(135deg, #3C6EB4 0%, #2A5298 100%);
    }
    .bg-gradient-deepin {
        background: linear-gradient(135deg, #3A8EE6 0%, #2979FF 100%);
    }
    .card-hover {
        @apply transition-all duration-300 hover:shadow-xl hover:-translate-y-1;
    }
    .card-hover-glow {
        @apply transition-all duration-300 hover:shadow-xl hover:-translate-y-1 hover:shadow-primary/20;
    }
    .glass-effect {
        @apply bg-white bg-opacity-80 backdrop-blur-sm;
    }
    .glass-effect-dark {
        @apply bg-gray-900 bg-opacity-80 backdrop-blur-sm;
    }
    .glass-effect-colored {
        @apply bg-white bg-opacity-70 backdrop-blur-md border border-white/20;
    }
    .animate-float {
        animation: float 3s ease-in-out infinite;
    }
    .animate-pulse-slow {
        animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }
    .animate-bounce-slow {
        animation: bounce 3s infinite;
    }
    .animate-shake {
        animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
    }
    .animate-fade-in {
        animation: fadeIn 0.6s ease-in-out;
    }
    .animate-slide-up {
        animation: slideUp 0.6s ease-out;
    }
    .animate-slide-in-left {
        animation: slideInLeft 0.6s ease-out;
    }
    .animate-slide-in-right {
        animation: slideInRight 0.6s ease-out;
    }
    .animate-zoom-in {
        animation: zoomIn 0.5s ease-out;
    }
    .animate-zoom-out {
        animation: zoomOut 0.5s ease-out;
    }
    .animate-pulse-glow {
        animation: pulseGlow 2s ease-in-out infinite;
    }
    .hover-scale {
        @apply transition-transform duration-300 hover:scale-105;
    }
    .hover-scale-lg {
        @apply transition-transform duration-300 hover:scale-110;
    }
    .hover-scale-sm {
        @apply transition-transform duration-300 hover:scale-95;
    }
    .hover-rotate {
        @apply transition-transform duration-300 hover:rotate-3;
    }
    .hover-skew {
        @apply transition-transform duration-300 hover:skew-x-3;
    }
    
    /* 响应式设计增强 */
    .responsive-text {
        @apply text-sm sm:text-base md:text-lg lg:text-xl;
    }
    .responsive-title {
        @apply text-xl sm:text-2xl md:text-3xl lg:text-4xl xl:text-5xl;
    }
    .responsive-padding {
        @apply p-4 sm:p-6 md:p-8 lg:p-10;
    }
    .responsive-margin {
        @apply m-4 sm:m-6 md:m-8 lg:m-10;
    }
    .responsive-gap {
        @apply gap-2 sm:gap-4 md:gap-6 lg:gap-8;
    }
    .responsive-grid {
        @apply grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5;
    }
    .responsive-container {
        @apply px-4 sm:px-6 md:px-8 lg:px-10 xl:px-12;
    }
    .responsive-shadow {
        @apply shadow-sm sm:shadow md:shadow-lg lg:shadow-xl;
    }
    .responsive-radius {
        @apply rounded-md sm:rounded-lg md:rounded-xl lg:rounded-2xl;
    }
    .responsive-btn {
        @apply px-4 py-2 sm:px-5 sm:py-2.5 md:px-6 md:py-3 text-sm sm:text-base;
    }
    .responsive-card {
        @apply p-4 sm:p-5 md:p-6 rounded-lg sm:rounded-xl transition-all duration-300;
    }
    .responsive-flex {
        @apply flex flex-col sm:flex-row sm:items-center;
    }
    .responsive-nav {
        @apply space-x-2 sm:space-x-4 md:space-x-6 lg:space-x-8;
    }
    .responsive-image {
        @apply w-full h-auto object-cover;
    }
    .responsive-aspect {
        @apply aspect-video sm:aspect-[4/3] md:aspect-[16/9];
    }
    .text-balance {
        text-wrap: balance;
    }
    .text-pretty {
        text-wrap: pretty;
    }
    
    /* 移动端优化 */
    .mobile-menu {
        @apply fixed inset-0 bg-white z-50 transform transition-transform duration-300 ease-in-out;
    }
    .mobile-menu-closed {
        @apply translate-x-full;
    }
    .mobile-menu-open {
        @apply translate-x-0;
    }
    .touch-friendly {
        @apply min-h-12 min-w-12 flex items-center justify-center;
    }
    .no-scrollbar {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    .no-scrollbar::-webkit-scrollbar {
        display: none;
    }
    
    /* 大屏幕优化 */
    .desktop-grid {
        @apply grid-cols-1 lg:grid-cols-2 xl:grid-cols-3;
    }
    .desktop-sidebar {
        @apply hidden lg:block;
    }
    .desktop-header {
        @apply py-4 lg:py-6;
    }
    
    /* 交互反馈样式 */
    .btn-primary {
        @apply bg-primary hover:bg-primary/90 text-white font-medium py-2 px-6 rounded-lg transition-all duration-300 shadow-md hover:shadow-lg hover:-translate-y-0.5 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:ring-offset-2;
    }
    .btn-secondary {
        @apply bg-secondary hover:bg-secondary/90 text-white font-medium py-2 px-6 rounded-lg transition-all duration-300 shadow-md hover:shadow-lg hover:-translate-y-0.5 focus:outline-none focus:ring-2 focus:ring-secondary/50 focus:ring-offset-2;
    }
    .btn-accent {
        @apply bg-accent hover:bg-accent/90 text-white font-medium py-2 px-6 rounded-lg transition-all duration-300 shadow-md hover:shadow-lg hover:-translate-y-0.5 focus:outline-none focus:ring-2 focus:ring-accent/50 focus:ring-offset-2;
    }
    .btn-outline {
        @apply border-2 border-primary text-primary hover:bg-primary hover:text-white font-medium py-2 px-6 rounded-lg transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:ring-offset-2;
    }
    .btn-ghost {
        @apply bg-transparent hover:bg-gray-100 text-gray-700 font-medium py-2 px-6 rounded-lg transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2;
    }
    .btn-danger {
        @apply bg-red-600 hover:bg-red-700 text-white font-medium py-2 px-6 rounded-lg transition-all duration-300 shadow-md hover:shadow-lg hover:-translate-y-0.5 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2;
    }
    .btn-success {
        @apply bg-green-600 hover:bg-green-700 text-white font-medium py-2 px-6 rounded-lg transition-all duration-300 shadow-md hover:shadow-lg hover:-translate-y-0.5 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2;
    }
    
    /* 表单元素样式 */
    .input-primary {
        @apply w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-all duration-300 placeholder:text-gray-400;
    }
    .input-secondary {
        @apply w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-secondary focus:border-transparent transition-all duration-300 placeholder:text-gray-400;
    }
    .input-error {
        @apply w-full px-4 py-2 border border-red-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-red-500 transition-all duration-300 placeholder:text-gray-400;
    }
    .input-success {
        @apply w-full px-4 py-2 border border-green-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500 transition-all duration-300 placeholder:text-gray-400;
    }
    
    /* 复选框和单选框 */
    .checkbox-primary {
        @apply w-4 h-4 text-primary focus:ring-primary border-gray-300 rounded transition-all duration-300;
    }
    .radio-primary {
        @apply w-4 h-4 text-primary focus:ring-primary border-gray-300 transition-all duration-300;
    }
    
    /* 链接样式 */
    .link-primary {
        @apply text-primary hover:text-primary/80 font-medium underline-offset-2 hover:underline transition-all duration-300;
    }
    .link-secondary {
        @apply text-secondary hover:text-secondary/80 font-medium underline-offset-2 hover:underline transition-all duration-300;
    }
    .link-accent {
        @apply text-accent hover:text-accent/80 font-medium underline-offset-2 hover:underline transition-all duration-300;
    }
    .link-dark {
        @apply text-dark hover:text-dark/80 font-medium underline-offset-2 hover:underline transition-all duration-300;
    }
    
    /* 选择框样式 */
    .select-primary {
        @apply w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-all duration-300 bg-white;
    }
    
    /* 文本区域样式 */
    .textarea-primary {
        @apply w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-all duration-300 placeholder:text-gray-400 resize-none;
    }
    
    /* 加载状态 */
    .loading-spinner {
        @apply animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-primary;
    }
    .loading-pulse {
        @apply animate-pulse bg-gray-200 rounded-lg;
    }
    
    /* 工具提示样式 */
    .tooltip {
        @apply relative inline-block;
    }
    .tooltip .tooltip-text {
        @apply invisible absolute z-10 py-2 px-3 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm opacity-0 transition-opacity duration-300 w-max bottom-full left-1/2 -translate-x-1/2 mb-2;
    }
    .tooltip:hover .tooltip-text {
        @apply visible opacity-100;
    }
    
    /* 徽章样式 */
    .badge {
        @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
    }
    .badge-primary {
        @apply bg-primary/10 text-primary;
    }
    .badge-secondary {
        @apply bg-secondary/10 text-secondary;
    }
    .badge-accent {
        @apply bg-accent/10 text-accent;
    }
    .badge-success {
        @apply bg-green-100 text-green-800;
    }
    .badge-danger {
        @apply bg-red-100 text-red-800;
    }
    .badge-warning {
        @apply bg-yellow-100 text-yellow-800;
    }
    .badge-info {
        @apply bg-blue-100 text-blue-800;
    }
}

/* 自定义滚动条 */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
    transition: all 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: #a1a1a1;
}

/* 平滑滚动 */
html {
    scroll-behavior: smooth;
}

/* 选择文本样式 */
::selection {
    background-color: rgba(59, 130, 246, 0.2);
    color: #1E40AF;
}

/* 禁用状态 */
.disabled {
    @apply opacity-50 cursor-not-allowed pointer-events-none;
}

/* 焦点样式 */
.focus-visible {
    @apply outline-none ring-2 ring-primary ring-offset-2;
}

/* 过渡动画 */
.transition-all-smooth {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 变换原点 */
.transform-origin-center {
    transform-origin: center;
}

/* 透视效果 */
.perspective {
    perspective: 1000px;
}

/* 3D变换 */
.transform-3d {
    transform-style: preserve-3d;
}

/* 布局辅助类 */

/* Flex布局辅助类 */
.flex-center {
    @apply flex items-center justify-center;
}
.flex-start {
    @apply flex items-start justify-start;
}
.flex-end {
    @apply flex items-end justify-end;
}
.flex-between {
    @apply flex items-center justify-between;
}
.flex-around {
    @apply flex items-center justify-around;
}
.flex-evenly {
    @apply flex items-center justify-evenly;
}
.flex-col-center {
    @apply flex flex-col items-center justify-center;
}
.flex-col-start {
    @apply flex flex-col items-start justify-start;
}
.flex-col-end {
    @apply flex flex-col items-end justify-end;
}
.flex-col-between {
    @apply flex flex-col items-center justify-between;
}
.flex-col-around {
    @apply flex flex-col items-center justify-around;
}
.flex-wrap {
    @apply flex flex-wrap;
}
.flex-nowrap {
    @apply flex flex-nowrap;
}
.flex-1 {
    @apply flex-1;
}
.flex-2 {
    @apply flex-2;
}
.flex-3 {
    @apply flex-3;
}

/* Grid布局辅助类 */
.grid-center {
    @apply grid place-items-center;
}
.grid-cols-1 {
    @apply grid-cols-1;
}
.grid-cols-2 {
    @apply grid-cols-2;
}
.grid-cols-3 {
    @apply grid-cols-3;
}
.grid-cols-4 {
    @apply grid-cols-4;
}
.grid-cols-5 {
    @apply grid-cols-5;
}
.grid-cols-6 {
    @apply grid-cols-6;
}
.grid-rows-1 {
    @apply grid-rows-1;
}
.grid-rows-2 {
    @apply grid-rows-2;
}
.grid-rows-3 {
    @apply grid-rows-3;
}
.grid-rows-4 {
    @apply grid-rows-4;
}
.grid-rows-5 {
    @apply grid-rows-5;
}
.grid-rows-6 {
    @apply grid-rows-6;
}

/* 定位辅助类 */
.relative {
    position: relative;
}
.absolute {
    position: absolute;
}
.fixed {
    position: fixed;
}
.sticky {
    position: sticky;
}
.inset-0 {
    @apply inset-0;
}
.inset-x-0 {
    @apply inset-x-0;
}
.inset-y-0 {
    @apply inset-y-0;
}
.top-0 {
    top: 0;
}
.right-0 {
    right: 0;
}
.bottom-0 {
    bottom: 0;
}
.left-0 {
    left: 0;
}
.top-1\/2 {
    top: 50%;
}
.left-1\/2 {
    left: 50%;
}
.translate-x-1\/2 {
    transform: translateX(-50%);
}
.translate-y-1\/2 {
    transform: translateY(-50%);
}
.translate-center {
    @apply -translate-x-1\/2 -translate-y-1\/2;
}

/* 间距辅助类 */
.mt-1 {
    @apply mt-1;
}
.mt-2 {
    @apply mt-2;
}
.mt-3 {
    @apply mt-3;
}
.mt-4 {
    @apply mt-4;
}
.mt-5 {
    @apply mt-5;
}
.mt-6 {
    @apply mt-6;
}
.mt-8 {
    @apply mt-8;
}
.mt-10 {
    @apply mt-10;
}
.mt-12 {
    @apply mt-12;
}
.mb-1 {
    @apply mb-1;
}
.mb-2 {
    @apply mb-2;
}
.mb-3 {
    @apply mb-3;
}
.mb-4 {
    @apply mb-4;
}
.mb-5 {
    @apply mb-5;
}
.mb-6 {
    @apply mb-6;
}
.mb-8 {
    @apply mb-8;
}
.mb-10 {
    @apply mb-10;
}
.mb-12 {
    @apply mb-12;
}
.ml-1 {
    @apply ml-1;
}
.ml-2 {
    @apply ml-2;
}
.ml-3 {
    @apply ml-3;
}
.ml-4 {
    @apply ml-4;
}
.ml-5 {
    @apply ml-5;
}
.ml-6 {
    @apply ml-6;
}
.ml-8 {
    @apply ml-8;
}
.ml-10 {
    @apply ml-10;
}
.ml-12 {
    @apply ml-12;
}
.mr-1 {
    @apply mr-1;
}
.mr-2 {
    @apply mr-2;
}
.mr-3 {
    @apply mr-3;
}
.mr-4 {
    @apply mr-4;
}
.mr-5 {
    @apply mr-5;
}
.mr-6 {
    @apply mr-6;
}
.mr-8 {
    @apply mr-8;
}
.mr-10 {
    @apply mr-10;
}
.mr-12 {
    @apply mr-12;
}
.p-1 {
    @apply p-1;
}
.p-2 {
    @apply p-2;
}
.p-3 {
    @apply p-3;
}
.p-4 {
    @apply p-4;
}
.p-5 {
    @apply p-5;
}
.p-6 {
    @apply p-6;
}
.p-8 {
    @apply p-8;
}
.p-10 {
    @apply p-10;
}
.p-12 {
    @apply p-12;
}
.pt-1 {
    @apply pt-1;
}
.pt-2 {
    @apply pt-2;
}
.pt-3 {
    @apply pt-3;
}
.pt-4 {
    @apply pt-4;
}
.pt-5 {
    @apply pt-5;
}
.pt-6 {
    @apply pt-6;
}
.pt-8 {
    @apply pt-8;
}
.pt-10 {
    @apply pt-10;
}
.pt-12 {
    @apply pt-12;
}
.pb-1 {
    @apply pb-1;
}
.pb-2 {
    @apply pb-2;
}
.pb-3 {
    @apply pb-3;
}
.pb-4 {
    @apply pb-4;
}
.pb-5 {
    @apply pb-5;
}
.pb-6 {
    @apply pb-6;
}
.pb-8 {
    @apply pb-8;
}
.pb-10 {
    @apply pb-10;
}
.pb-12 {
    @apply pb-12;
}
.pl-1 {
    @apply pl-1;
}
.pl-2 {
    @apply pl-2;
}
.pl-3 {
    @apply pl-3;
}
.pl-4 {
    @apply pl-4;
}
.pl-5 {
    @apply pl-5;
}
.pl-6 {
    @apply pl-6;
}
.pl-8 {
    @apply pl-8;
}
.pl-10 {
    @apply pl-10;
}
.pl-12 {
    @apply pl-12;
}
.pr-1 {
    @apply pr-1;
}
.pr-2 {
    @apply pr-2;
}
.pr-3 {
    @apply pr-3;
}
.pr-4 {
    @apply pr-4;
}
.pr-5 {
    @apply pr-5;
}
.pr-6 {
    @apply pr-6;
}
.pr-8 {
    @apply pr-8;
}
.pr-10 {
    @apply pr-10;
}
.pr-12 {
    @apply pr-12;
}

/* 容器辅助类 */
.container {
    @apply mx-auto px-4;
}
.container-sm {
    @apply mx-auto px-4 max-w-3xl;
}
.container-md {
    @apply mx-auto px-4 max-w-4xl;
}
.container-lg {
    @apply mx-auto px-4 max-w-5xl;
}
.container-xl {
    @apply mx-auto px-4 max-w-6xl;
}
.container-2xl {
    @apply mx-auto px-4 max-w-7xl;
}

/* 溢出辅助类 */
.overflow-hidden {
    overflow: hidden;
}
.overflow-auto {
    overflow: auto;
}
.overflow-x-auto {
    overflow-x: auto;
}
.overflow-y-auto {
    overflow-y: auto;
}

/* 显示辅助类 */
.block {
    display: block;
}
.inline {
    display: inline;
}
.inline-block {
    display: inline-block;
}
.hidden {
    display: none;
}

/* 可见性辅助类 */
.visible {
    visibility: visible;
}
.invisible {
    visibility: hidden;
}

/* 遮罩辅助类 */
.overlay {
    @apply absolute inset-0 bg-black bg-opacity-50;
}
.overlay-light {
    @apply absolute inset-0 bg-white bg-opacity-50;
}
.overlay-gradient {
    @apply absolute inset-0 bg-gradient-to-t from-black/70 to-transparent;
}

/* 响应式显示辅助类 */
.sm-block {
    @apply hidden sm:block;
}
.sm-hidden {
    @apply block sm:hidden;
}
.md-block {
    @apply hidden md:block;
}
.md-hidden {
    @apply block md:hidden;
}
.lg-block {
    @apply hidden lg:block;
}
.lg-hidden {
    @apply block lg:hidden;
}
.xl-block {
    @apply hidden xl:block;
}
.xl-hidden {
    @apply block xl:hidden;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

@keyframes shake {
    10%, 90% {
        transform: translateX(-1px);
    }
    20%, 80% {
        transform: translateX(2px);
    }
    30%, 50%, 70% {
        transform: translateX(-3px);
    }
    40%, 60% {
        transform: translateX(3px);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

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

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes zoomOut {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.9);
    }
}

@keyframes pulseGlow {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
    }
}

/* 文本效果和排版样式 */

/* 字体大小 */
.text-xs {
    @apply text-xs;
}
.text-sm {
    @apply text-sm;
}
.text-base {
    @apply text-base;
}
.text-lg {
    @apply text-lg;
}
.text-xl {
    @apply text-xl;
}
.text-2xl {
    @apply text-2xl;
}
.text-3xl {
    @apply text-3xl;
}
.text-4xl {
    @apply text-4xl;
}
.text-5xl {
    @apply text-5xl;
}
.text-6xl {
    @apply text-6xl;
}
.text-7xl {
    @apply text-7xl;
}
.text-8xl {
    @apply text-8xl;
}
.text-9xl {
    @apply text-9xl;
}

/* 字重 */
.font-thin {
    @apply font-thin;
}
.font-extralight {
    @apply font-extralight;
}
.font-light {
    @apply font-light;
}
.font-normal {
    @apply font-normal;
}
.font-medium {
    @apply font-medium;
}
.font-semibold {
    @apply font-semibold;
}
.font-bold {
    @apply font-bold;
}
.font-extrabold {
    @apply font-extrabold;
}
.font-black {
    @apply font-black;
}

/* 行高 */
.leading-none {
    @apply leading-none;
}
.leading-tight {
    @apply leading-tight;
}
.leading-snug {
    @apply leading-snug;
}
.leading-normal {
    @apply leading-normal;
}
.leading-relaxed {
    @apply leading-relaxed;
}
.leading-loose {
    @apply leading-loose;
}

/* 文本对齐 */
.text-left {
    @apply text-left;
}
.text-center {
    @apply text-center;
}
.text-right {
    @apply text-right;
}
.text-justify {
    @apply text-justify;
}

/* 文本装饰 */
.text-underline {
    text-decoration: underline;
}
.text-line-through {
    text-decoration: line-through;
}
.text-overline {
    text-decoration: overline;
}
.text-no-underline {
    text-decoration: none;
}

/* 文本变换 */
.text-uppercase {
    text-transform: uppercase;
}
.text-lowercase {
    text-transform: lowercase;
}
.text-capitalize {
    text-transform: capitalize;
}

/* 文本颜色 */
.text-primary {
    @apply text-primary;
}
.text-secondary {
    @apply text-secondary;
}
.text-accent {
    @apply text-accent;
}
.text-dark {
    @apply text-dark;
}
.text-light {
    @apply text-light;
}
.text-white {
    @apply text-white;
}
.text-black {
    @apply text-black;
}
.text-gray-50 {
    @apply text-gray-50;
}
.text-gray-100 {
    @apply text-gray-100;
}
.text-gray-200 {
    @apply text-gray-200;
}
.text-gray-300 {
    @apply text-gray-300;
}
.text-gray-400 {
    @apply text-gray-400;
}
.text-gray-500 {
    @apply text-gray-500;
}
.text-gray-600 {
    @apply text-gray-600;
}
.text-gray-700 {
    @apply text-gray-700;
}
.text-gray-800 {
    @apply text-gray-800;
}
.text-gray-900 {
    @apply text-gray-900;
}

/* 文本阴影 */
.text-shadow {
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.text-shadow-lg {
    text-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
.text-shadow-xl {
    text-shadow: 0 8px 16px rgba(0,0,0,0.3);
}
.text-shadow-2xl {
    text-shadow: 0 12px 24px rgba(0,0,0,0.4);
}

/* 文本描边 */
.text-stroke {
    -webkit-text-stroke: 1px currentColor;
}
.text-stroke-2 {
    -webkit-text-stroke: 2px currentColor;
}
.text-stroke-3 {
    -webkit-text-stroke: 3px currentColor;
}

/* 文本发光 */
.text-glow {
    text-shadow: 0 0 5px currentColor;
}
.text-glow-lg {
    text-shadow: 0 0 10px currentColor;
}
.text-glow-xl {
    text-shadow: 0 0 15px currentColor;
}

/* 字体样式 */
.font-italic {
    font-style: italic;
}
.font-oblique {
    font-style: oblique;
}
.font-normal-style {
    font-style: normal;
}

/* 字间距 */
.tracking-tighter {
    letter-spacing: -0.05em;
}
.tracking-tight {
    letter-spacing: -0.025em;
}
.tracking-normal {
    letter-spacing: 0;
}
.tracking-wide {
    letter-spacing: 0.025em;
}
.tracking-wider {
    letter-spacing: 0.05em;
}
.tracking-widest {
    letter-spacing: 0.1em;
}

/* 词间距 */
.word-spacing-tight {
    word-spacing: -0.1em;
}
.word-spacing-normal {
    word-spacing: 0;
}
.word-spacing-wide {
    word-spacing: 0.1em;
}
.word-spacing-wider {
    word-spacing: 0.2em;
}

/* 文本溢出 */
.truncate {
    @apply truncate;
}
.truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.truncate-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.truncate-4 {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 文本选择 */
.text-selection-primary::selection {
    @apply bg-primary/20 text-primary;
}
.text-selection-secondary::selection {
    @apply bg-secondary/20 text-secondary;
}
.text-selection-accent::selection {
    @apply bg-accent/20 text-accent;
}

/* 响应式文本 */
.responsive-text {
    @apply text-sm sm:text-base md:text-lg lg:text-xl;
}
.responsive-title {
    @apply text-xl sm:text-2xl md:text-3xl lg:text-4xl xl:text-5xl;
}

/* 排版辅助类 */
.typography {
    @apply text-gray-700 leading-relaxed;
}
.typography h1 {
    @apply text-3xl md:text-4xl font-bold mb-6 text-dark;
}
.typography h2 {
    @apply text-2xl md:text-3xl font-bold mb-5 text-dark;
}
.typography h3 {
    @apply text-xl md:text-2xl font-semibold mb-4 text-dark;
}
.typography h4 {
    @apply text-lg md:text-xl font-semibold mb-3 text-dark;
}
.typography h5 {
    @apply text-base md:text-lg font-medium mb-2 text-dark;
}
.typography h6 {
    @apply text-sm md:text-base font-medium mb-2 text-dark;
}
.typography p {
    @apply mb-4;
}
.typography ul {
    @apply mb-4 pl-5 list-disc;
}
.typography ol {
    @apply mb-4 pl-5 list-decimal;
}
.typography li {
    @apply mb-2;
}
.typography a {
    @apply text-primary hover:text-primary/80 underline-offset-2 hover:underline;
}
.typography blockquote {
    @apply border-l-4 border-primary pl-4 italic text-gray-600 mb-4;
}

/* 代码样式 */
.code {
    @apply bg-gray-100 text-gray-800 px-2 py-0.5 rounded font-mono text-sm;
}
.code-block {
    @apply bg-gray-900 text-gray-100 p-4 rounded-lg font-mono text-sm overflow-x-auto;
}

/* 表格样式 */
.table {
    @apply w-full border-collapse;
}
.table th {
    @apply bg-gray-100 border border-gray-300 px-4 py-2 text-left font-semibold;
}
.table td {
    @apply border border-gray-300 px-4 py-2;
}
.table tr:hover {
    @apply bg-gray-50;
}

/* 卡片和组件样式 */

/* 基础卡片 */
.card {
    @apply bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300;
}
.card-body {
    @apply p-6;
}
.card-header {
    @apply p-6 border-b border-gray-200;
}
.card-footer {
    @apply p-6 border-t border-gray-200 bg-gray-50;
}

/* 悬浮卡片 */
.card-hover {
    @apply transition-all duration-300 hover:shadow-xl hover:-translate-y-1;
}
.card-hover-glow {
    @apply transition-all duration-300 hover:shadow-xl hover:-translate-y-1 hover:shadow-primary/20;
}
.card-hover-scale {
    @apply transition-all duration-300 hover:shadow-xl hover:scale-105;
}

/* 渐变卡片 */
.card-gradient {
    @apply bg-gradient-to-br from-primary to-secondary text-white rounded-lg shadow-lg overflow-hidden;
}
.card-gradient-body {
    @apply p-6;
}

/* 玻璃卡片 */
.card-glass {
    @apply bg-white bg-opacity-80 backdrop-blur-sm rounded-lg shadow-md border border-white/20 overflow-hidden;
}
.card-glass-dark {
    @apply bg-gray-900 bg-opacity-80 backdrop-blur-sm rounded-lg shadow-md border border-gray-800/20 overflow-hidden text-white;
}

/* 边框卡片 */
.card-border {
    @apply border-2 border-gray-200 rounded-lg p-6 transition-all duration-300 hover:border-primary hover:shadow-md;
}

/* 阴影卡片 */
.card-shadow {
    @apply bg-white rounded-lg shadow-lg p-6;
}
.card-shadow-sm {
    @apply bg-white rounded-lg shadow-sm p-6;
}
.card-shadow-xl {
    @apply bg-white rounded-lg shadow-xl p-6;
}

/* 圆角卡片 */
.card-rounded {
    @apply bg-white rounded-2xl shadow-md p-6;
}
.card-rounded-lg {
    @apply bg-white rounded-3xl shadow-md p-6;
}

/* 响应式卡片 */
.card-responsive {
    @apply bg-white rounded-lg shadow-md p-4 sm:p-6 md:p-8 transition-all duration-300;
}

/* 导航栏样式 */
.navbar {
    @apply bg-white shadow-md sticky top-0 z-50;
}
.navbar-container {
    @apply container mx-auto px-4 py-3;
}
.navbar-brand {
    @apply text-xl font-bold text-primary;
}
.navbar-nav {
    @apply flex space-x-6;
}
.navbar-link {
    @apply text-gray-700 hover:text-primary font-medium transition-all duration-300;
}
.navbar-link-active {
    @apply text-primary font-medium;
}

/* 页脚样式 */
.footer {
    @apply bg-gray-900 text-white py-12;
}
.footer-container {
    @apply container mx-auto px-4;
}
.footer-title {
    @apply text-lg font-semibold mb-4;
}
.footer-link {
    @apply text-gray-400 hover:text-white transition-all duration-300;
}
.footer-social {
    @apply flex space-x-4;
}
.footer-social-link {
    @apply text-gray-400 hover:text-white transition-all duration-300 text-xl;
}

/* 按钮组样式 */
.btn-group {
    @apply flex space-x-2;
}
.btn-group-vertical {
    @apply flex flex-col space-y-2;
}

/* 输入组样式 */
.input-group {
    @apply flex items-center border border-gray-300 rounded-lg overflow-hidden;
}
.input-group-prepend {
    @apply bg-gray-100 px-4 py-2 border-r border-gray-300;
}
.input-group-append {
    @apply bg-gray-100 px-4 py-2 border-l border-gray-300;
}
.input-group-text {
    @apply w-full px-4 py-2 focus:outline-none;
}

/* 徽章组样式 */
.badge-group {
    @apply flex flex-wrap gap-2;
}

/* 卡片网格 */
.card-grid {
    @apply grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6;
}

/* 特色卡片 */
.feature-card {
    @apply bg-white rounded-xl shadow-md p-6 text-center transition-all duration-300 hover:shadow-xl hover:-translate-y-1;
}
.feature-card-icon {
    @apply text-4xl text-primary mb-4;
}
.feature-card-title {
    @apply text-xl font-bold mb-2;
}
.feature-card-text {
    @apply text-gray-600;
}

/* 产品卡片 */
.product-card {
    @apply bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300 hover:shadow-xl hover:-translate-y-1;
}
.product-card-image {
    @apply w-full h-48 object-cover;
}
.product-card-body {
    @apply p-6;
}
.product-card-title {
    @apply text-lg font-semibold mb-2;
}
.product-card-price {
    @apply text-xl font-bold text-primary mb-4;
}

/* 服务卡片 */
.service-card {
    @apply bg-white rounded-xl shadow-md p-6 transition-all duration-300 hover:shadow-xl hover:-translate-y-1;
}
.service-card-icon {
    @apply text-3xl text-primary mb-3;
}
.service-card-title {
    @apply text-lg font-semibold mb-2;
}
.service-card-text {
    @apply text-gray-600;
}

/* 团队卡片 */
.team-card {
    @apply bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300 hover:shadow-xl hover:-translate-y-1;
}
.team-card-image {
    @apply w-full h-64 object-cover;
}
.team-card-body {
    @apply p-6 text-center;
}
.team-card-name {
    @apply text-lg font-semibold mb-1;
}
.team-card-position {
    @apply text-gray-500 text-sm mb-3;
}
.team-card-social {
    @apply flex justify-center space-x-4;
}

/* 博客卡片 */
.blog-card {
    @apply bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300 hover:shadow-xl hover:-translate-y-1;
}
.blog-card-image {
    @apply w-full h-48 object-cover;
}
.blog-card-body {
    @apply p-6;
}
.blog-card-date {
    @apply text-gray-500 text-sm mb-2;
}
.blog-card-title {
    @apply text-lg font-semibold mb-2;
}
.blog-card-text {
    @apply text-gray-600 mb-4;
}

/* 通知卡片 */
.notification-card {
    @apply bg-white rounded-lg shadow-md p-4 border-l-4 transition-all duration-300;
}
.notification-card-primary {
    @apply border-l-primary;
}
.notification-card-success {
    @apply border-l-green-500;
}
.notification-card-warning {
    @apply border-l-yellow-500;
}
.notification-card-danger {
    @apply border-l-red-500;
}

/* 标签卡片 */
.tag-card {
    @apply inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-gray-100 text-gray-800 hover:bg-gray-200 transition-all duration-300;
}

/* 进度条卡片 */
.progress-card {
    @apply bg-white rounded-lg shadow-md p-6;
}
.progress-card-title {
    @apply text-sm font-medium text-gray-700 mb-2;
}
.progress-bar {
    @apply h-2 bg-gray-200 rounded-full overflow-hidden;
}
.progress-bar-fill {
    @apply h-full bg-primary rounded-full transition-all duration-500;
}

/* 统计卡片 */
.stat-card {
    @apply bg-white rounded-lg shadow-md p-6 transition-all duration-300 hover:shadow-xl;
}
.stat-card-icon {
    @apply text-3xl text-primary mb-3;
}
.stat-card-value {
    @apply text-2xl font-bold mb-1;
}
.stat-card-label {
    @apply text-gray-500 text-sm;
}

/* 加载卡片 */
.loading-card {
    @apply bg-white rounded-lg shadow-md p-6 flex justify-center items-center;
}

/* 空状态卡片 */
.empty-card {
    @apply bg-white rounded-lg shadow-md p-8 text-center;
}
.empty-card-icon {
    @apply text-5xl text-gray-300 mb-4;
}
.empty-card-title {
    @apply text-lg font-semibold mb-2;
}
.empty-card-text {
    @apply text-gray-500;
}

/* 错误卡片 */
.error-card {
    @apply bg-red-50 border border-red-200 rounded-lg p-6;
}
.error-card-icon {
    @apply text-3xl text-red-500 mb-3;
}
.error-card-title {
    @apply text-lg font-semibold text-red-800 mb-2;
}
.error-card-text {
    @apply text-red-700;
}

/* 成功卡片 */
.success-card {
    @apply bg-green-50 border border-green-200 rounded-lg p-6;
}
.success-card-icon {
    @apply text-3xl text-green-500 mb-3;
}
.success-card-title {
    @apply text-lg font-semibold text-green-800 mb-2;
}
.success-card-text {
    @apply text-green-700;
}

/* 警告卡片 */
.warning-card {
    @apply bg-yellow-50 border border-yellow-200 rounded-lg p-6;
}
.warning-card-icon {
    @apply text-3xl text-yellow-500 mb-3;
}
.warning-card-title {
    @apply text-lg font-semibold text-yellow-800 mb-2;
}
.warning-card-text {
    @apply text-yellow-700;
}

/* 信息卡片 */
.info-card {
    @apply bg-blue-50 border border-blue-200 rounded-lg p-6;
}
.info-card-icon {
    @apply text-3xl text-blue-500 mb-3;
}
.info-card-title {
    @apply text-lg font-semibold text-blue-800 mb-2;
}
.info-card-text {
    @apply text-blue-700;
}