/* 通用样式 */
body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* 表单样式 */
.input-focus {
    @apply focus:ring-2 focus:ring-primary/50 focus:border-primary focus:outline-none;
}

/* 按钮样式 */
.btn-primary {
    @apply bg-primary text-white px-6 py-2 rounded-md hover:bg-primary/90 transition-all duration-300;
}

.btn-secondary {
    @apply bg-secondary text-white px-6 py-2 rounded-md hover:bg-secondary/90 transition-all duration-300;
}

.btn-danger {
    @apply bg-red-500 text-white px-6 py-2 rounded-md hover:bg-red-600 transition-all duration-300;
}

.btn-outline {
    @apply border border-gray-300 text-gray-700 px-6 py-2 rounded-md hover:bg-gray-50 transition-all duration-300;
}

/* 侧边栏样式 */
.sidebar-link.active {
    background-color: rgba(22, 93, 255, 0.1);
    color: #165DFF;
    border-left: 3px solid #165DFF;
}

.sidebar-link:hover:not(.active) {
    background-color: #f2f3f5;
}

/* 卡片样式 */
.card {
    @apply bg-white rounded-lg shadow-md p-6 transition-all duration-300 hover:shadow-lg;
}

/* 表格样式 */
.table-responsive {
    @apply overflow-x-auto;
}

.table {
    @apply w-full border-collapse;
}

.table th {
    @apply bg-gray-50 px-4 py-3 text-left text-sm font-medium text-gray-500 uppercase tracking-wider border-b;
}

.table td {
    @apply px-4 py-3 whitespace-nowrap text-sm text-gray-500 border-b;
}

/* 分页样式 */
.pagination {
    @apply flex justify-center mt-6;
}

.pagination a, .pagination span {
    @apply px-3 py-1 mx-1 rounded-md text-sm transition-all;
}

.pagination .current {
    @apply bg-primary text-white;
}

.pagination a:hover:not(.current) {
    @apply bg-gray-100;
}

/* 动画效果 */
.fade-in {
    animation: fadeIn 0.3s ease-in-out;
}

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

/* 响应式菜单 */
@media (max-width: 768px) {
    .mobile-menu {
        @apply fixed inset-0 z-50 transform -translate-x-full transition-transform duration-300;
    }
    
    .mobile-menu.active {
        @apply transform translate-x-0;
    }
}

/* 订单页面特定样式 */
.order-container {
    @apply max-w-6xl mx-auto px-4 py-10;
}

.order-summary {
    @apply bg-gray-50 rounded-lg p-6 border border-gray-200;
}

.billing-cycle-toggle {
    @apply flex space-x-4 mb-6;
}

.billing-cycle-toggle label {
    @apply flex items-center cursor-pointer;
}

.billing-cycle-toggle input[type="radio"] {
    @apply mr-2;
}

.plan-details {
    @apply bg-white rounded-lg border border-gray-200 overflow-hidden mb-6;
}

.plan-details-header {
    @apply bg-primary text-white p-4;
}

.plan-details-body {
    @apply p-4;
}

.plan-features {
    @apply space-y-2;
}

.plan-feature {
    @apply flex items-start;
}

.plan-feature i {
    @apply text-green-500 mt-1 mr-2;
}

/* 消息通知样式 */
.message-notification {
    @apply fixed top-4 right-4 px-6 py-3 rounded-md shadow-lg z-50 transition-all duration-300 transform;
}

/* 表格悬停效果 */
.table tr:hover {
    @apply bg-gray-50;
}

/* 输入框错误状态 */
.input-error {
    @apply border-red-500 focus:ring-red-500 focus:border-red-500;
}

/* 成功状态颜色 */
.text-success {
    @apply text-green-500;
}

/* 错误状态颜色 */
.text-error {
    @apply text-red-500;
}

/* 警告状态颜色 */
.text-warning {
    @apply text-yellow-500;
}

/* 卡片悬停效果 */
.card-hover {
    @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
}

/* 订单状态标签 */
.status-badge {
    @apply inline-block px-2 py-1 text-xs rounded-full font-medium;
}

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

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

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