@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800;900&display=swap');

:root {
    --primary: #ff1493;
    --primary-rgb: 255, 20, 147;
    --secondary: #ff2a85;
    --secondary-rgb: 255, 42, 133;
    --pink-hot: #ff007f;
    --pink-bright: #ff3388;
    --pink-vibrant: #ff5ca8;
    --pink-soft: #ff85c1;
    --pink-light: #ffe4f1;
    --pink-blush: #fff0f7;
    --pink-border: #ffb8dc;
    --text: #1a0814;
    --text-muted: #854d72;
    --bg: #fff0f6;
    --bs-primary: #ff1493;
    --bs-primary-rgb: 255, 20, 147;
    --bs-link-color: #ff1493;
    --bs-link-hover-color: #d6006c;
}

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: var(--text);
    background-color: var(--bg);
    background-image: 
        radial-gradient(circle at 15% 15%, rgba(255, 42, 133, 0.12) 0%, transparent 45%),
        radial-gradient(circle at 85% 25%, rgba(255, 105, 180, 0.15) 0%, transparent 40%),
        radial-gradient(circle at 50% 85%, rgba(255, 0, 127, 0.1) 0%, transparent 50%),
        linear-gradient(180deg, #fff2f8 0%, #ffeaf4 100%);
    background-attachment: fixed;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.5px;
}

.text-dark {
    color: var(--text) !important;
}

.text-muted {
    color: var(--text-muted) !important;
}

.bg-primary-custom {
    background: linear-gradient(135deg, #e6006e 0%, #ff1493 45%, #ff4081 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 20px rgba(255, 20, 147, 0.25);
}

.text-primary-custom {
    color: var(--pink-hot) !important;
}

.bg-secondary-custom {
    background: linear-gradient(135deg, #ff2a85 0%, #ff66b2 100%) !important;
    color: #ffffff !important;
}

.text-secondary-custom {
    color: var(--pink-hot) !important;
}

.text-primary {
    color: var(--pink-hot) !important;
}

.bg-primary {
    background: linear-gradient(135deg, #ff1493 0%, #ff4081 100%) !important;
    color: #ffffff !important;
}

.btn-primary-custom,
.btn-primary {
    background: linear-gradient(135deg, #ff007f 0%, #ff2a85 50%, #ff529a 100%) !important;
    color: #ffffff !important;
    border: none !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(255, 0, 127, 0.38);
    font-weight: 700;
}

.btn-primary-custom:hover,
.btn-primary:hover {
    background: linear-gradient(135deg, #e6006e 0%, #ff1493 50%, #ff4081 100%) !important;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 0, 127, 0.55);
}

.btn-primary-custom:active,
.btn-primary:active {
    transform: translateY(0);
}

.btn-secondary-custom {
    background: linear-gradient(135deg, #ff66b2 0%, #ff2a85 100%) !important;
    color: #ffffff !important;
    border: none !important;
    transition: all 0.3s ease;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(255, 42, 133, 0.3);
    font-weight: 700;
}

.btn-secondary-custom:hover {
    background: linear-gradient(135deg, #ff4097 0%, #e6006e 100%) !important;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 42, 133, 0.45);
}

.btn-outline-primary {
    color: var(--pink-hot) !important;
    border: 2px solid var(--pink-bright) !important;
    background: #ffffff !important;
    font-weight: 700;
    transition: all 0.3s ease;
    box-shadow: 0 2px 10px rgba(255, 42, 133, 0.1);
}

.btn-outline-primary:hover {
    background: linear-gradient(135deg, #ff007f 0%, #ff4081 100%) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 0, 127, 0.4);
}

.modern-card {
    background: #ffffff;
    border: 2px solid var(--pink-border);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(255, 42, 133, 0.08);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.modern-card:hover {
    transform: translateY(-6px);
    border-color: #ff5ca8;
    box-shadow: 0 16px 40px rgba(255, 0, 127, 0.2);
}

.navbar {
    padding-top: 12px;
    padding-bottom: 12px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.2);
}

.navbar-nav .nav-link {
    color: #ffffff !important;
    font-weight: 700;
    font-size: 0.95rem;
    transition: all 0.25s ease;
    padding: 8px 18px !important;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(5px);
}

.navbar-nav .nav-link:hover {
    color: #ff007f !important;
    background: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.navbar-nav .nav-link.active {
    color: #ff007f !important;
    background: #ffffff !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    border-color: #ffffff;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--pink-hot) !important;
    box-shadow: 0 0 0 0.25rem rgba(255, 0, 127, 0.22) !important;
}

.form-check-input:checked {
    background-color: var(--pink-hot) !important;
    border-color: var(--pink-hot) !important;
}

.badge.bg-primary {
    background: linear-gradient(135deg, #ff007f 0%, #ff4081 100%) !important;
    color: #ffffff !important;
    font-weight: 700;
    letter-spacing: 0.3px;
    box-shadow: 0 3px 10px rgba(255, 0, 127, 0.35);
}

.badge.bg-danger {
    background: linear-gradient(135deg, #ff1744 0%, #d50000 100%) !important;
    box-shadow: 0 3px 10px rgba(213, 0, 0, 0.35);
}

.badge.bg-success {
    background: linear-gradient(135deg, #00e676 0%, #00c853 100%) !important;
    box-shadow: 0 3px 10px rgba(0, 200, 83, 0.3);
}

.page-item.active .page-link {
    background: linear-gradient(135deg, #ff007f 0%, #ff4081 100%) !important;
    border-color: transparent !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(255, 0, 127, 0.4);
    font-weight: 700;
}

.page-link {
    color: var(--pink-hot) !important;
    border-radius: 10px !important;
    margin: 0 3px;
    border: 1.5px solid var(--pink-border);
    font-weight: 600;
    background: #ffffff;
}

.page-link:hover {
    background-color: var(--pink-light) !important;
    color: var(--pink-hot) !important;
    border-color: var(--pink-soft);
}

.breadcrumb-item a {
    color: var(--pink-hot) !important;
    font-weight: 600;
}

.skeleton {
    background: #ffd6eb;
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0));
    background-size: 40px 100%;
    background-repeat: no-repeat;
    background-position: left -40px top 0;
    animation: shine 1.2s ease infinite;
}

@keyframes shine {
    to { background-position: right -40px top 0; }
}

.skel-text { width: 100%; height: 20px; border-radius: 6px; margin-bottom: 8px; }
.skel-title { width: 70%; height: 24px; border-radius: 6px; margin-bottom: 12px; }
.skel-img { width: 100%; height: 200px; border-radius: 18px 18px 0 0; }

.swal2-confirm.btn-primary,
.swal2-styled.swal2-confirm {
    background: linear-gradient(135deg, #ff007f 0%, #ff4081 100%) !important;
    box-shadow: 0 6px 20px rgba(255, 0, 127, 0.4) !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
}

footer.bg-primary-custom {
    background: linear-gradient(135deg, #d6006c 0%, #ff1493 50%, #ff4081 100%) !important;
    border-top: 3px solid rgba(255, 255, 255, 0.25);
}