/* style.css - 页面装修样式 */
:root {
    --primary-gradient: linear-gradient(135deg, #1e6f5c, #289672);
    --card-shadow: 0 20px 35px -12px rgba(0,0,0,0.1);
    --border-radius-card: 1.25rem;
}

body {
    background: linear-gradient(145deg, #eef2f5 0%, #f9fbfd 100%);
    font-family: 'Segoe UI', Roboto, system-ui, -apple-system, 'Poppins', sans-serif;
    padding: 2rem 0 3rem;
}

.main-header {
    text-align: center;
    margin-bottom: 2rem;
}

.main-header h1 {
    font-weight: 700;
    background: var(--primary-gradient);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    letter-spacing: -0.3px;
    font-size: 2.5rem;
}

.main-header p {
    color: #5a6e7a;
    font-size: 1rem;
}

.card-custom {
    border-radius: var(--border-radius-card);
    border: none;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(0px);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: var(--card-shadow);
}

.card-custom:hover {
    transform: translateY(-3px);
    box-shadow: 0 25px 40px -14px rgba(0,0,0,0.15);
}

.card-header-custom {
    background: white;
    border-bottom: 1px solid #e9edf2;
    padding: 1.2rem 1.5rem;
    font-weight: 600;
    font-size: 1.2rem;
    border-radius: var(--border-radius-card) var(--border-radius-card) 0 0 !important;
}

textarea {
    border-radius: 1rem !important;
    border: 1px solid #dee2e6;
    transition: all 0.2s;
}

textarea:focus {
    border-color: #289672;
    box-shadow: 0 0 0 0.2rem rgba(40,150,114,0.2);
}

.btn-soft-primary {
    background: #1e6f5c;
    border: none;
    border-radius: 2rem;
    padding: 0.5rem 1.8rem;
    font-weight: 500;
    transition: 0.2s;
}

.btn-soft-primary:hover {
    background: #0f5243;
    transform: scale(0.98);
    box-shadow: 0 8px 18px rgba(30,111,92,0.3);
}

.btn-outline-secondary-custom {
    border-radius: 2rem;
    padding: 0.5rem 1.5rem;
}

.table th {
    background: #f8fafc;
    font-weight: 600;
    border-bottom-width: 1px;
}

.badge-serial {
    background: #eef2ff;
    color: #1f4f8a;
    font-weight: 600;
    padding: 0.35rem 0.65rem;
    border-radius: 2rem;
}

.copy-btn {
    border-radius: 2rem;
    padding: 0.25rem 1rem;
    font-size: 0.8rem;
    transition: all 0.2s;
}

.action-link {
    text-decoration: none;
    font-weight: 500;
    padding: 0.2rem 0.8rem;
    border-radius: 2rem;
    background: #fff0f0;
    color: #c7362b;
    transition: 0.2s;
}

.action-link:hover {
    background: #fdd8d8;
    color: #a51f15;
}

.footer-note {
    text-align: center;
    margin-top: 2.5rem;
    font-size: 0.8rem;
    color: #7f8c8d;
    border-top: 1px dashed #dce5ec;
    padding-top: 1.5rem;
}

.toast-custom {
    position: fixed;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1100;
    min-width: 240px;
}

.preview-badge {
    background: #f3f6f9;
    border: 1px solid #e2e8f0;
    border-radius: 2rem;
    padding: 0.3rem 0.9rem;
    font-size: 0.8rem;
}

@media (max-width: 768px) {
    .table-responsive {
        border-radius: 1rem;
    }
    .card-header-custom {
        font-size: 1rem;
    }
}