math_cms/resources/css/app.css

/* 使用系统字体栈，避免依赖外部CDN */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    :root {
        /* 使用系统字体：PingFang SC (macOS), 苹方-简 (iOS), 微软雅黑 (Windows), 文泉驿微米黑 (Linux) */
        --font-sans: 'PingFang SC', 'PingFang SC Regular', 'Hiragino Sans GB', 'Microsoft YaHei', 'WenQuanYi Micro Hei', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
    }

    body {
        @apply bg-slate-50 text-slate-900 font-sans antialiased;
    }

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

    /* 自定义滚动条 */
    ::-webkit-scrollbar {
        @apply w-2 h-2;
    }

    ::-webkit-scrollbar-track {
        @apply bg-slate-100 rounded-lg;
    }

    ::-webkit-scrollbar-thumb {
        @apply bg-slate-300 rounded-lg hover:bg-slate-400 transition-colors duration-200;
    }

    ::-webkit-scrollbar-thumb:hover {
        @apply bg-slate-400;
    }
}

@layer components {

    /* 教材管理页面美化 */
    .textbook-page {
        @apply bg-slate-50 min-h-screen;
    }

    .textbook-header {
        @apply mb-6 p-6 bg-gradient-to-r from-blue-50 to-purple-50 rounded-xl border border-blue-100 shadow-sm;
    }

    .textbook-header h1 {
        @apply text-3xl font-bold text-blue-600 mb-2;
    }

    .textbook-header p {
        @apply text-sm text-slate-600;
    }

    /* 卡片美化 */
    .textbook-card {
        @apply bg-white rounded-xl shadow-lg border border-slate-200 p-6 transition-all duration-300 hover:shadow-xl;
    }

    .textbook-card-header {
        @apply mb-4 p-4 bg-slate-50 rounded-lg border border-slate-200;
    }

    .textbook-card-header h2 {
        @apply text-lg font-semibold text-slate-900;
    }

    .textbook-card-header p {
        @apply text-sm text-slate-600 mt-1;
    }

    /* 表格美化 */
    .textbook-table {
        @apply w-full border-collapse overflow-hidden rounded-lg shadow-sm border border-slate-200 bg-white;
    }

    .textbook-table thead th {
        @apply px-6 py-4 text-left text-xs font-semibold text-slate-600 uppercase tracking-wider bg-slate-50;
    }

    .textbook-table tbody tr {
        @apply transition-colors duration-200 hover:bg-slate-50;
    }

    .textbook-table tbody td {
        @apply px-6 py-4 text-sm text-slate-900 border-t border-slate-200;
    }

    /* 按钮美化 */
    .textbook-btn {
        @apply px-4 py-2 rounded-lg font-medium transition-all duration-200;
    }

    .textbook-btn-primary {
        @apply bg-blue-600 text-white hover:bg-blue-700 shadow-sm hover:shadow-md;
    }

    .textbook-btn-secondary {
        @apply bg-white text-slate-700 border border-slate-300 hover:bg-slate-50;
    }

    .textbook-btn-danger {
        @apply bg-red-600 text-white hover:bg-red-700 shadow-sm hover:shadow-md;
    }

    /* 表单美化 */
    .textbook-form-field {
        @apply mb-4;
    }

    .textbook-form-label {
        @apply block text-sm font-medium text-slate-700 mb-2;
    }

    .textbook-form-input {
        @apply w-full px-4 py-3 text-sm border border-slate-300 rounded-lg transition-all duration-200 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 focus:outline-none hover:border-slate-400;
    }

    /* 徽章美化 */
    .textbook-badge {
        @apply inline-flex items-center px-3 py-1 rounded-full text-xs font-medium;
    }

    .textbook-badge-primary {
        @apply bg-blue-100 text-blue-800;
    }

    .textbook-badge-success {
        @apply bg-green-100 text-green-800;
    }

    .textbook-badge-warning {
        @apply bg-yellow-100 text-yellow-800;
    }

    .textbook-badge-danger {
        @apply bg-red-100 text-red-800;
    }

    /* 状态指示器 */
    .textbook-status {
        @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
    }

    .textbook-status-active {
        @apply bg-green-100 text-green-800;
    }

    .textbook-status-inactive {
        @apply bg-red-100 text-red-800;
    }

    .textbook-status-pending {
        @apply bg-yellow-100 text-yellow-800;
    }

    /* Filament 登录页面定制 */
    .fi-logo {
        display: none !important;
    }

    .fi-logo::after {
        content: '数学知识图谱管理系统' !important;
        display: inline-block !important;
        font-size: 1.25rem !important;
        font-weight: 600 !important;
        color: #0ea5e9 !important;
    }

    /* 玻璃态面板 */
    .glass-panel {
        @apply rounded-2xl border border-white/20 bg-white/70 shadow-lg backdrop-blur-md transition-all duration-300 hover:shadow-xl dark:border-white/10 dark:bg-slate-900/60;
    }

    /* 卡片组件 */
    .metric-card {
        @apply rounded-xl border border-slate-200/80 bg-white/90 px-6 py-5 shadow-sm transition-all duration-300 hover:shadow-md hover:scale-[1.02] dark:border-slate-700/80 dark:bg-slate-900/50;
    }

    /* 渐变背景 */
    .gradient-bg {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }

    .gradient-bg-light {
        background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    }

    /* 现代化按钮 */
    .btn-modern {
        @apply relative inline-flex items-center justify-center px-6 py-3 text-sm font-medium text-white bg-primary-600 rounded-lg shadow-md transition-all duration-300 hover:bg-primary-700 hover:shadow-lg hover:scale-105 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 active:scale-95;
    }

    .btn-modern-outline {
        @apply relative inline-flex items-center justify-center px-6 py-3 text-sm font-medium text-primary-600 bg-transparent border border-primary-600 rounded-lg shadow-sm transition-all duration-300 hover:bg-primary-50 hover:shadow-md hover:scale-105 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 active:scale-95;
    }

    /* 输入框样式 */
    .input-modern {
        @apply w-full px-4 py-3 text-sm border border-slate-300 rounded-lg transition-all duration-200 focus:border-primary-500 focus:ring-2 focus:ring-primary-200 focus:outline-none hover:border-slate-400 dark:bg-slate-800 dark:border-slate-600 dark:text-slate-100 dark:hover:border-slate-500;
    }

    /* 表格样式增强 */
    .table-modern {
        @apply w-full border-collapse overflow-hidden rounded-lg shadow-sm border border-slate-200 dark:border-slate-700;
    }

    .table-modern thead th {
        @apply px-6 py-4 text-left text-xs font-semibold text-slate-600 uppercase tracking-wider bg-slate-50/50 dark:bg-slate-800/50 dark:text-slate-300;
    }

    .table-modern tbody tr {
        @apply transition-colors duration-200 hover:bg-slate-50/70 dark:hover:bg-slate-800/50;
    }

    .table-modern tbody td {
        @apply px-6 py-4 text-sm text-slate-900 border-t border-slate-200 dark:border-slate-700 dark:text-slate-100;
    }

    /* 导航栏样式 */
    .navbar-modern {
        @apply backdrop-blur-md bg-white/80 shadow-sm border-b border-slate-200/50 dark:bg-slate-900/80 dark:border-slate-700/50;
    }

    /* 侧边栏样式 */
    .sidebar-modern {
        @apply bg-white border-r border-slate-200 dark:bg-slate-900 dark:border-slate-700;
    }

    /* 页面标题 */
    .page-title {
        @apply text-3xl font-bold text-slate-900 mb-2 dark:text-white;
    }

    .page-subtitle {
        @apply text-sm text-slate-600 dark:text-slate-400;
    }

    /* 状态指示器 */
    .status-online {
        @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900/50 dark:text-green-400;
    }

    .status-offline {
        @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800 dark:bg-red-900/50 dark:text-red-400;
    }

    .status-pending {
        @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-900/50 dark:text-yellow-400;
    }

    /* 加载动画 */
    .loading-spinner {
        @apply inline-block w-4 h-4 border-2 border-slate-300 border-t-primary-600 rounded-full animate-spin;
    }

    /* 动画效果 */
    .animate-fade-in {
        @apply animate-fadeIn;
    }

    .animate-slide-up {
        @apply animate-slideUp;
    }

    /* OCR记录详情页面特有样式 */
    .ocr-record-table {
        @apply table-zebra table-compact;
    }

    .ocr-record-table thead th {
        @apply bg-base-200 text-sm font-semibold text-base-content/80;
    }

    .ocr-record-table tbody tr {
        @apply hover:bg-base-100;
    }

    .ocr-record-table tbody td {
        @apply border-t border-base-300;
        vertical-align: middle;
    }

    /* 时间轴样式增强 */
    .timeline.timeline-vertical .timeline-middle .timeline-box {
        @apply border-2 shadow-lg transition-all duration-300 hover:scale-110;
    }

    .timeline.timeline-vertical .timeline-middle .timeline-box:hover {
        @apply transform hover:scale-125 hover:shadow-xl;
    }

    /* 状态徽章增强 */
    .status-badge {
        @apply inline-flex items-center gap-1 px-3 py-1 rounded-full text-xs font-medium transition-all duration-200;
    }

    .status-badge:hover {
        @apply transform hover:scale-105;
    }

    /* Filament 页面头部统一样式 */
    .fi-header {
        @apply mb-6 flex flex-wrap items-start justify-between gap-3 rounded-xl bg-white/90 px-5 py-4 shadow-sm ring-1 ring-slate-200/80 backdrop-blur-sm;
    }

    .fi-header-heading {
        @apply text-2xl font-bold text-slate-900 leading-tight;
    }

    .fi-header-subheading {
        @apply mt-1 text-sm text-slate-600;
    }

    /* Filament 内置面包屑全局样式 */
    .fi-breadcrumbs {
        @apply mb-4 flex items-center rounded-lg bg-base-100 px-4 py-2 shadow-sm ring-1 ring-base-200;
    }

    .fi-breadcrumbs-list {
        @apply breadcrumbs text-sm text-base-content/70;
    }

    .fi-breadcrumbs-item-label {
        @apply inline-flex items-center gap-1 text-base-content/70 transition-colors duration-150 hover:text-primary-600;
    }

    .fi-breadcrumbs-item .fi-breadcrumbs-item-separator {
        @apply text-base-300;
    }

    /* 当前节点加粗，禁用 hover 色 */
    .fi-breadcrumbs-item:last-child .fi-breadcrumbs-item-label {
        @apply font-semibold text-base-content cursor-default hover:text-base-content;
    }

    /* 头部栏里的面包屑去掉额外下边距 */
    .fi-header nav.fi-breadcrumbs {
        @apply mb-0;
    }

    /* 面包屑样式增强（全局） */
    nav[aria-label="Breadcrumb"],
    .breadcrumb-modern {
        @apply mb-4 flex items-center rounded-xl bg-white/80 px-4 py-2 shadow-sm ring-1 ring-slate-200/80 backdrop-blur-sm;
    }

    nav[aria-label="Breadcrumb"] ol,
    .breadcrumb-modern ol {
        @apply flex items-center gap-3 text-sm text-slate-600;
    }

    nav[aria-label="Breadcrumb"] a,
    .breadcrumb-modern a {
        @apply inline-flex items-center gap-1 text-slate-600 transition-colors duration-150 hover:text-primary-600;
    }

    nav[aria-label="Breadcrumb"] .crumb-current,
    .breadcrumb-modern .crumb-current {
        @apply inline-flex items-center gap-1 font-semibold text-slate-900;
    }

    nav[aria-label="Breadcrumb"] .crumb-divider,
    .breadcrumb-modern .crumb-divider {
        @apply h-4 w-px bg-slate-200;
    }

    /* 图片预览框架 */
    .mockup-window {
        @apply border border-slate-300 rounded-t-lg overflow-hidden;
    }

    .mockup-browser-toolbar {
        @apply bg-slate-200 px-2 py-1 flex items-center gap-1 border-b border-slate-300;
    }

    .mockup-browser-content {
        @apply bg-white;
        min-height: 200px;
    }

    .mockup-browser-dot {
        @apply w-2 h-2 rounded-full bg-slate-300;
    }

    /* OCR置信度指示器 */
    .confidence-indicator {
        @apply w-2 h-2 rounded-full;
        transition: all 0.3s ease;
    }

    .confidence-high {
        @apply bg-green-500;
    }

    .confidence-medium {
        @apply bg-yellow-500;
    }

    .confidence-low {
        @apply bg-red-500;
    }

    /* AI分析结果卡片 */
    .ai-result-card {
        @apply bg-gradient-to-br from-success/10 to-success/5 border border-success/20 rounded-lg p-4;
    }

    .ai-result-card.high-score {
        @apply from-success/10 to-success/5;
    }

    .ai-result-card.medium-score {
        @apply from-yellow/10 to-yellow/5;
    }

    .ai-result-card.low-score {
        @apply from-error/10 to-error/5;
    }

    /* 提交按钮区域 */
    .submit-analysis-section {
        @apply bg-gradient-to-r from-primary/5 to-primary/10 border border-primary/20 rounded-xl p-6 transition-all duration-300;
    }

    .submit-analysis-section:hover {
        @apply bg-primary/10 border-primary/30;
    }

    .submit-analysis-section.completed {
        @apply bg-gradient-to-r from-success/5 to-success/10 border border-success/20;
    }

    /* 响应式优化 */
    @media (max-width: 768px) {
        .stats-vertical,
        .stats-horizontal {
            @apply grid grid-cols-2;
        }

        .ocr-record-table {
            @apply text-xs;
        }

        .ocr-record-table th,
        .ocr-record-table td {
            @apply px-2 py-1;
        }

        /* 移动端隐藏部分列 */
        .mobile-hidden {
            @apply hidden;
        }
    }

    @media (max-width: 480px) {
        .stats-vertical,
        .stats-horizontal {
            @apply grid grid-cols-1;
        }

        .ocr-record-table {
            @apply text-xs;
        }

        .mobile-sm-only {
            @apply block;
        }

        .mobile-hidden {
            @apply hidden;
        }
    }

    /* 深色模式适配 */
    @media (prefers-color-scheme: dark) {
        .mockup-window {
            @apply border-slate-700;
        }

        .mockup-browser-toolbar {
            @apply bg-slate-800 border-slate-700;
        }

        .mockup-browser-content {
            @apply bg-slate-800;
        }

        .mockup-browser-dot {
            @apply bg-slate-600;
        }
    }

    /* 毛玻璃效果 */
    .frosted-glass {
        @apply bg-white/10 backdrop-blur-lg border border-white/20 shadow-xl;
    }

    .frosted-glass-dark {
        @apply bg-slate-900/10 backdrop-blur-lg border border-slate-700/20 shadow-xl;
    }

    /* 悬停效果 */
    .hover-lift {
        @apply transition-transform duration-300 hover:-translate-y-1 hover:shadow-lg;
    }

    /* 统计卡片特殊样式 */
    .stat-card {
        @apply relative overflow-hidden rounded-xl border border-slate-200 bg-gradient-to-br from-white to-slate-50 p-6 shadow-sm transition-all duration-300 hover:shadow-md hover:border-primary-200 dark:border-slate-700 dark:from-slate-800 dark:to-slate-900 dark:hover:border-primary-800;
    }

    .stat-card::before {
        content: '';
        @apply absolute inset-0 bg-gradient-to-br from-primary-500/10 to-transparent opacity-0 transition-opacity duration-300;
    }

    .stat-card:hover::before {
        @apply opacity-100;
    }

    /* 徽章样式 */
    .badge-modern {
        @apply inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium transition-colors duration-200;
    }

    .badge-primary {
        @apply bg-primary-100 text-primary-800 dark:bg-primary-900/50 dark:text-primary-300;
    }

    .badge-secondary {
        @apply bg-secondary-100 text-secondary-800 dark:bg-secondary-900/50 dark:text-secondary-300;
    }

    .badge-success {
        @apply bg-green-100 text-green-800 dark:bg-green-900/50 dark:text-green-400;
    }

    .badge-warning {
        @apply bg-yellow-100 text-yellow-800 dark:bg-yellow-900/50 dark:text-yellow-400;
    }

    .badge-error {
        @apply bg-red-100 text-red-800 dark:bg-red-900/50 dark:text-red-400;
    }

    /* 分割线 */
    .divider-modern {
        @apply my-6 border-0 border-t border-slate-200 dark:border-slate-700;
    }

    /* =========================================
       全局输入框美化 (Global Input Polish)
       ========================================= */

    /* 
       策略：
       1. 对于登录页 (.fi-simple-layout)，我们禁用 Filament 的 wrapper 样式，直接对 input 应用 DaisyUI 组件样式。
       2. 对于后台管理页，我们保留 Filament 的 wrapper 结构（为了兼容前缀/后缀图标），但用 CSS 模拟 DaisyUI 的外观。
    */

    /* --- 登录页面 (Simple Layout) --- */

    /* 移除 Filament wrapper 的默认样式 */
    .fi-simple-layout .fi-input-wrp {
        @apply ring-0 shadow-none bg-transparent !important;
    }

    /* 直接对 input 应用 DaisyUI 样式 */
    .fi-simple-layout input:not([type='checkbox']):not([type='radio']),
    .fi-simple-layout select {
        @apply input input-bordered input-primary w-full bg-white text-gray-900 !important;
        height: 2.75rem !important;
        /* 修复高度 */
    }

    .fi-simple-layout input:focus,
    .fi-simple-layout select:focus {
        @apply outline-none border-primary-500 ring-2 ring-primary-500/20 !important;
    }

    /* 登录按钮美化 */
    .fi-simple-layout .fi-btn {
        @apply btn btn-primary w-full text-white font-bold shadow-lg hover:shadow-xl transition-all duration-300 !important;
        border: none !important;
    }

    /* 复选框美化 */
    .fi-simple-layout input[type='checkbox'] {
        @apply checkbox checkbox-primary rounded border-gray-300 !important;
    }

    /* 链接美化 */
    .fi-simple-layout a {
        @apply link link-primary hover:link-hover transition-colors !important;
    }

    /* --- 后台管理页面 (Admin Panel) --- */

    /* 模拟 DaisyUI input-bordered 的外观 */
    .fi-input-wrp,
    .fi-select-input {
        @apply bg-white border border-base-300 shadow-sm rounded-lg transition-all duration-200 !important;
        /* 覆盖 Filament 的默认 ring */
        box-shadow: none !important;
        ring: 0 !important;
    }

    /* 聚焦状态 */
    .fi-input-wrp:focus-within,
    .fi-select-input:focus-within {
        @apply border-primary-500 ring-2 ring-primary-500/20 !important;
    }

    /* 内部 input 保持透明 */
    .fi-input-wrp input,
    .fi-select-input select {
        @apply bg-transparent border-none shadow-none ring-0 focus:ring-0 !important;
    }

    /* 暗色模式适配 */
    :is(.dark) .fi-simple-layout input:not([type='checkbox']):not([type='radio']),
    :is(.dark) .fi-simple-layout select {
        @apply bg-base-200 text-base-content border-base-content/20 !important;
    }

    :is(.dark) .fi-input-wrp,
    :is(.dark) .fi-select-input {
        @apply bg-base-200 border-base-content/20 !important;
    }

    :is(.dark) .fi-simple-layout .fi-btn {
        @apply btn-primary text-white !important;
    }

    /* =========================================
       教材管理表单美化 (Textbook Form Polish)
       ========================================= */

    /* 表单容器美化 */
    .fi-fo-component-ctn {
        @apply space-y-6 !important;
    }

    /* 表单字段组美化 */
    .fi-fo-field-wrp {
        @apply mb-5 !important;
    }

    /* 标签美化 */
    .fi-fo-field-wrp-label {
        @apply text-sm font-semibold text-slate-700 mb-2 flex items-center gap-2 !important;
    }

    .fi-fo-field-wrp-label sup {
        @apply text-red-500 font-bold !important;
    }

    /* 输入框容器 - 玻璃态效果 */
    .fi-input-wrp {
        @apply bg-white/90 backdrop-blur-sm border-2 border-slate-200 rounded-xl shadow-sm transition-all duration-300 overflow-hidden !important;
    }

    .fi-input-wrp:hover {
        @apply border-slate-300 shadow-md !important;
    }

    .fi-input-wrp:focus-within {
        @apply border-blue-500 shadow-lg shadow-blue-500/10 ring-4 ring-blue-500/10 !important;
    }

    /* 输入框本体 */
    .fi-input-wrp input,
    .fi-input-wrp textarea {
        @apply bg-transparent px-4 py-3 text-slate-800 placeholder-slate-400 text-base !important;
    }

    .fi-input-wrp input::placeholder,
    .fi-input-wrp textarea::placeholder {
        @apply text-slate-400 !important;
    }

    /* 选择框美化 */
    .fi-select-wrp {
        @apply bg-white/90 backdrop-blur-sm border-2 border-slate-200 rounded-xl shadow-sm transition-all duration-300 !important;
    }

    .fi-select-wrp:hover {
        @apply border-slate-300 shadow-md !important;
    }

    .fi-select-wrp:focus-within {
        @apply border-blue-500 shadow-lg shadow-blue-500/10 ring-4 ring-blue-500/10 !important;
    }

    /* 原生选择框 */
    .fi-select-input {
        @apply bg-white/90 backdrop-blur-sm border-2 border-slate-200 rounded-xl shadow-sm px-4 py-3 text-slate-800 transition-all duration-300 !important;
    }

    .fi-select-input:hover {
        @apply border-slate-300 shadow-md !important;
    }

    .fi-select-input:focus {
        @apply border-blue-500 shadow-lg shadow-blue-500/10 ring-4 ring-blue-500/10 outline-none !important;
    }

    /* 多选框美化 */
    .fi-checkbox-input {
        @apply w-5 h-5 rounded-lg border-2 border-slate-300 text-blue-600 transition-all duration-200 cursor-pointer !important;
    }

    .fi-checkbox-input:hover {
        @apply border-blue-400 !important;
    }

    .fi-checkbox-input:checked {
        @apply bg-blue-600 border-blue-600 !important;
    }

    .fi-checkbox-input:focus {
        @apply ring-4 ring-blue-500/20 !important;
    }

    /* Radio 美化 */
    .fi-radio-input {
        @apply w-5 h-5 border-2 border-slate-300 text-blue-600 transition-all duration-200 cursor-pointer !important;
    }

    .fi-radio-input:hover {
        @apply border-blue-400 !important;
    }

    .fi-radio-input:checked {
        @apply border-blue-600 !important;
    }

    .fi-radio-input:focus {
        @apply ring-4 ring-blue-500/20 !important;
    }

    /* Toggle 开关美化 */
    .fi-toggle-input {
        @apply w-11 h-6 bg-slate-200 rounded-full transition-all duration-300 cursor-pointer !important;
    }

    .fi-toggle-input:checked {
        @apply bg-blue-600 !important;
    }

    /* 文本域美化 */
    .fi-textarea-wrp {
        @apply bg-white/90 backdrop-blur-sm border-2 border-slate-200 rounded-xl shadow-sm transition-all duration-300 !important;
    }

    .fi-textarea-wrp:hover {
        @apply border-slate-300 shadow-md !important;
    }

    .fi-textarea-wrp:focus-within {
        @apply border-blue-500 shadow-lg shadow-blue-500/10 ring-4 ring-blue-500/10 !important;
    }

    .fi-textarea-wrp textarea {
        @apply bg-transparent px-4 py-3 text-slate-800 placeholder-slate-400 text-base min-h-[120px] !important;
    }

    /* 帮助文本美化 */
    .fi-fo-field-wrp-hint {
        @apply mt-2 text-xs text-slate-500 flex items-center gap-1 !important;
    }

    .fi-fo-field-wrp-hint::before {
        content: '💡';
        @apply text-sm;
    }

    /* 错误提示美化 */
    .fi-fo-field-wrp-error-message {
        @apply mt-2 text-sm text-red-600 flex items-center gap-1 bg-red-50 px-3 py-2 rounded-lg !important;
    }

    .fi-fo-field-wrp-error-message::before {
        content: '⚠️';
    }

    /* 表单区块美化 */
    .fi-fo-section {
        @apply bg-white/60 backdrop-blur-sm rounded-2xl border border-slate-200/50 p-6 mb-6 shadow-sm !important;
    }

    .fi-fo-section-header {
        @apply pb-4 mb-4 border-b border-slate-200 !important;
    }

    .fi-fo-section-header-heading {
        @apply text-lg font-bold text-slate-800 !important;
    }

    .fi-fo-section-header-description {
        @apply text-sm text-slate-500 mt-1 !important;
    }

    /* =========================================
       表单按钮美化 (Enhanced Form Actions)
       ========================================= */

    /* 按钮容器 */
    .fi-ac {
        @apply flex items-center justify-between gap-4 pt-8 mt-8 border-t border-slate-200 bg-gradient-to-r from-slate-50 to-white px-6 py-6 rounded-xl shadow-sm !important;
    }

    /* 基础按钮样式重写 - 扩展到所有按钮 */
    .fi-btn,
    button[wire*="click"],
    button[type="submit"],
    button[type="button"],
    .fi-icon-btn,
    .fi-dropdown-list-item-button {
        @apply transition-all duration-300 !important;
    }

    /* ===== 主要按钮 (保存/提交) ===== */
    button.fi-btn[class*="bg-primary"],
    a.fi-btn[class*="bg-primary"],
    .fi-btn-fi-color-primary,
    button[type="submit"] {
        @apply bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 text-white font-semibold px-8 py-3 rounded-xl shadow-lg shadow-blue-500/30 transition-all duration-300 hover:shadow-xl hover:shadow-blue-500/40 hover:-translate-y-0.5 focus:ring-4 focus:ring-blue-500/20 active:translate-y-0 active:shadow-md border-0 relative overflow-hidden !important;
    }

    button.fi-btn[class*="bg-primary"]::before,
    a.fi-btn[class*="bg-primary"]::before,
    .fi-btn-fi-color-primary::before,
    button[type="submit"]::before {
        content: '';
        @apply absolute inset-0 bg-gradient-to-r from-white/0 via-white/20 to-white/0 transition-transform duration-700;
        transform: translateX(-100%);
    }

    button.fi-btn[class*="bg-primary"]:hover::before,
    a.fi-btn[class*="bg-primary"]:hover::before,
    .fi-btn-fi-color-primary:hover::before,
    button[type="submit"]:hover::before {
        transform: translateX(100%);
    }

    button.fi-btn[class*="bg-primary"]:hover,
    a.fi-btn[class*="bg-primary"]:hover,
    .fi-btn-fi-color-primary:hover,
    button[type="submit"]:hover {
        @apply shadow-blue-500/40 !important;
    }

    /* ===== 次要按钮 (取消/返回) ===== */
    button.fi-btn[class*="bg-gray"],
    a.fi-btn[class*="bg-gray"],
    .fi-btn-fi-color-gray {
        @apply bg-white hover:bg-slate-50 text-slate-700 font-semibold px-8 py-3 rounded-xl border-2 border-slate-200 shadow-md hover:shadow-lg transition-all duration-300 hover:-translate-y-0.5 focus:ring-4 focus:ring-slate-300/50 active:translate-y-0 active:shadow-sm !important;
    }

    button.fi-btn[class*="bg-gray"]:hover,
    a.fi-btn[class*="bg-gray"]:hover,
    .fi-btn-fi-color-gray:hover {
        @apply border-slate-300 text-slate-900 !important;
    }

    /* ===== 成功按钮 (保存并创建另一个) ===== */
    button.fi-btn[class*="bg-success"],
    a.fi-btn[class*="bg-success"],
    .fi-btn-fi-color-success {
        @apply bg-gradient-to-r from-emerald-600 to-teal-600 hover:from-emerald-700 hover:to-teal-700 text-white font-semibold px-8 py-3 rounded-xl shadow-lg shadow-emerald-500/30 transition-all duration-300 hover:shadow-xl hover:shadow-emerald-500/40 hover:-translate-y-0.5 focus:ring-4 focus:ring-emerald-500/20 active:translate-y-0 active:shadow-md border-0 relative overflow-hidden !important;
    }

    button.fi-btn[class*="bg-success"]::before,
    a.fi-btn[class*="bg-success"]::before,
    .fi-btn-fi-color-success::before {
        content: '';
        @apply absolute inset-0 bg-gradient-to-r from-white/0 via-white/20 to-white/0 transition-transform duration-700;
        transform: translateX(-100%);
    }

    button.fi-btn[class*="bg-success"]:hover::before,
    a.fi-btn[class*="bg-success"]:hover::before,
    .fi-btn-fi-color-success:hover::before {
        transform: translateX(100%);
    }

    button.fi-btn[class*="bg-success"]:hover,
    a.fi-btn[class*="bg-success"]:hover,
    .fi-btn-fi-color-success:hover {
        @apply shadow-emerald-500/40 !important;
    }

    /* ===== 危险按钮 (删除) ===== */
    button.fi-btn[class*="bg-danger"],
    a.fi-btn[class*="bg-danger"],
    .fi-btn-fi-color-danger {
        @apply bg-gradient-to-r from-red-500 to-rose-500 hover:from-red-600 hover:to-rose-600 text-white font-semibold px-8 py-3 rounded-xl shadow-lg shadow-red-500/30 transition-all duration-300 hover:shadow-xl hover:shadow-red-500/40 hover:-translate-y-0.5 focus:ring-4 focus:ring-red-500/20 active:translate-y-0 active:shadow-md border-0 relative overflow-hidden !important;
    }

    button.fi-btn[class*="bg-danger"]::before,
    a.fi-btn[class*="bg-danger"]::before,
    .fi-btn-fi-color-danger::before {
        content: '';
        @apply absolute inset-0 bg-gradient-to-r from-white/0 via-white/20 to-white/0 transition-transform duration-700;
        transform: translateX(-100%);
    }

    button.fi-btn[class*="bg-danger"]:hover::before,
    a.fi-btn[class*="bg-danger"]:hover::before,
    .fi-btn-fi-color-danger:hover::before {
        transform: translateX(100%);
    }

    button.fi-btn[class*="bg-danger"]:hover,
    a.fi-btn[class*="bg-danger"]:hover,
    .fi-btn-fi-color-danger:hover {
        @apply shadow-red-500/40 !important;
    }

    /* ===== 警告按钮 ===== */
    button.fi-btn[class*="bg-warning"],
    a.fi-btn[class*="bg-warning"],
    .fi-btn-fi-color-warning {
        @apply bg-gradient-to-r from-amber-500 to-orange-500 hover:from-amber-600 hover:to-orange-600 text-white font-semibold px-8 py-3 rounded-xl shadow-lg shadow-amber-500/30 transition-all duration-300 hover:shadow-xl hover:shadow-amber-500/40 hover:-translate-y-0.5 focus:ring-4 focus:ring-amber-500/20 active:translate-y-0 active:shadow-md border-0 relative overflow-hidden !important;
    }

    button.fi-btn[class*="bg-warning"]::before,
    a.fi-btn[class*="bg-warning"]::before,
    .fi-btn-fi-color-warning::before {
        content: '';
        @apply absolute inset-0 bg-gradient-to-r from-white/0 via-white/20 to-white/0 transition-transform duration-700;
        transform: translateX(-100%);
    }

    button.fi-btn[class*="bg-warning"]:hover::before,
    a.fi-btn[class*="bg-warning"]:hover::before,
    .fi-btn-fi-color-warning:hover::before {
        transform: translateX(100%);
    }

    button.fi-btn[class*="bg-warning"]:hover,
    a.fi-btn[class*="bg-warning"]:hover,
    .fi-btn-fi-color-warning:hover {
        @apply shadow-amber-500/40 !important;
    }

    /* ===== 操作按钮 (编辑/查看) ===== */
    .fi-btn-fi-color-secondary {
        @apply bg-gradient-to-r from-indigo-500 to-purple-600 hover:from-indigo-600 hover:to-purple-700 text-white font-semibold px-6 py-2.5 rounded-lg shadow-md transition-all duration-300 hover:shadow-lg hover:-translate-y-0.5 !important;
    }

    /* ===== 通用轮廓按钮 ===== */
    .fi-outlined.fi-btn,
    button.fi-btn.outline,
    a.fi-btn.outline {
        @apply bg-white hover:bg-slate-50 text-slate-700 border-2 border-slate-200 shadow-sm hover:shadow-md transition-all duration-300 hover:-translate-y-0.5 !important;
    }

    .fi-outlined.fi-btn:hover,
    button.fi-btn.outline:hover,
    a.fi-btn.outline:hover {
        @apply border-slate-300 text-slate-900 !important;
    }

    /* ===== 表格操作按钮 ===== */
    .fi-table .fi-btn,
    [data-fi-table] button,
    .fi-bulk-action,
    .fi-dropdown-list-item-button {
        @apply transition-all duration-300 !important;
    }

    .fi-table .fi-btn:hover,
    [data-fi-table] button:hover,
    .fi-bulk-action:hover,
    .fi-dropdown-list-item-button:hover {
        @apply -translate-y-0.5 shadow-lg !important;
    }

    /* ===== 批量操作按钮 ===== */
    .fi-bulk-action-group .fi-btn {
        @apply mx-1 !important;
    }

    /* ===== 响应式按钮 ===== */
    @media (max-width: 640px) {
        .fi-ac {
            @apply flex-col !important;
        }

        .fi-ac .fi-btn {
            @apply w-full justify-center !important;
        }

        .fi-btn,
        button[type="submit"],
        button[type="button"],
        a.fi-btn {
            @apply px-6 py-3 text-sm !important;
        }

        .fi-table .fi-btn {
            @apply px-3 py-2 text-xs !important;
        }
    }

    /* KeyValue 组件美化 */
    .fi-fo-key-value {
        @apply bg-white/80 backdrop-blur-sm rounded-xl border-2 border-slate-200 overflow-hidden !important;
    }

    .fi-fo-key-value-header {
        @apply bg-slate-50 px-4 py-3 border-b border-slate-200 !important;
    }

    .fi-fo-key-value-row {
        @apply flex items-center border-b border-slate-100 last:border-b-0 !important;
    }

    .fi-fo-key-value-row input {
        @apply px-4 py-3 text-slate-800 !important;
    }

    /* TagsInput 美化 */
    .fi-fo-tags-input {
        @apply bg-white/90 backdrop-blur-sm border-2 border-slate-200 rounded-xl p-2 transition-all duration-300 !important;
    }

    .fi-fo-tags-input:focus-within {
        @apply border-blue-500 shadow-lg shadow-blue-500/10 ring-4 ring-blue-500/10 !important;
    }

    .fi-fo-tags-input-tag {
        @apply bg-blue-100 text-blue-800 px-3 py-1 rounded-lg text-sm font-medium !important;
    }

    /* Repeater 美化 */
    .fi-fo-repeater-item {
        @apply bg-white/80 backdrop-blur-sm rounded-xl border-2 border-slate-200 p-4 mb-4 transition-all duration-300 !important;
    }

    .fi-fo-repeater-item:hover {
        @apply border-slate-300 shadow-md !important;
    }

    /* 文件上传美化 */
    .fi-fo-file-upload {
        @apply bg-white/90 backdrop-blur-sm border-2 border-dashed border-slate-300 rounded-xl p-8 text-center transition-all duration-300 !important;
    }

    .fi-fo-file-upload:hover {
        @apply border-blue-400 bg-blue-50/50 !important;
    }

    .fi-fo-file-upload-icon {
        @apply text-slate-400 mb-3 !important;
    }

    /* 日期选择器美化 */
    .fi-fo-date-time-picker {
        @apply bg-white/90 backdrop-blur-sm border-2 border-slate-200 rounded-xl shadow-sm transition-all duration-300 !important;
    }

    .fi-fo-date-time-picker:focus-within {
        @apply border-blue-500 shadow-lg shadow-blue-500/10 ring-4 ring-blue-500/10 !important;
    }

    /* 富文本编辑器美化 */
    .fi-fo-rich-editor {
        @apply bg-white/90 backdrop-blur-sm border-2 border-slate-200 rounded-xl overflow-hidden transition-all duration-300 !important;
    }

    .fi-fo-rich-editor:focus-within {
        @apply border-blue-500 shadow-lg shadow-blue-500/10 !important;
    }

    .fi-fo-rich-editor-toolbar {
        @apply bg-slate-50 border-b border-slate-200 px-3 py-2 !important;
    }

    .fi-fo-rich-editor-content {
        @apply px-4 py-3 min-h-[200px] !important;
    }
}

@layer utilities {

    /* 文字渐变 */
    .text-gradient {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    /* 隐藏滚动条 */
    .no-scrollbar {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .no-scrollbar::-webkit-scrollbar {
        display: none;
    }

    /* 混合模式 */
    .mix-blend-multiply {
        mix-blend-mode: multiply;
    }

    .mix-blend-screen {
        mix-blend-mode: screen;
    }
}