/* Refonte visuelle majeure - style premium */
:root {
    --bg-main: #060916 !important;
    --sidebar-bg: linear-gradient(185deg, rgba(8, 13, 29, 0.96), rgba(8, 17, 38, 0.9)) !important;
    --card-bg: linear-gradient(165deg, rgba(16, 25, 49, 0.88), rgba(25, 38, 71, 0.5)) !important;
    --accent-primary: #4f8cff !important;
    --accent-secondary: #22d3ee !important;
    --accent-third: #a78bfa !important;
    --accent-glow: rgba(79, 140, 255, 0.35) !important;
    --text-main: #e6edf7 !important;
    --text-dim: #97abc9 !important;
    --text-soft: #c7d4ea !important;
    --border: rgba(141, 167, 208, 0.23) !important;
    --grad-linear: linear-gradient(135deg, #4f8cff 0%, #22d3ee 45%, #a78bfa 100%) !important;
}

* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    background:
        radial-gradient(circle at 12% 8%, rgba(34, 211, 238, 0.12), transparent 34%),
        radial-gradient(circle at 90% 15%, rgba(167, 139, 250, 0.15), transparent 32%),
        radial-gradient(circle at 50% 120%, rgba(79, 140, 255, 0.2), transparent 55%),
        #060916 !important;
    color: var(--text-main) !important;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background-image: linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: radial-gradient(circle at center, black 30%, transparent 95%);
}

.sidebar {
    background: var(--sidebar-bg) !important;
    border-left: 1px solid var(--border) !important;
    box-shadow: -16px 0 48px rgba(2, 6, 23, 0.5) !important;
}

.sidebar::before {
    content: "";
    position: absolute;
    top: 24px;
    left: 18px;
    right: 18px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(141, 167, 208, 0.4), transparent);
}

.brand span,
.text-gradient {
    text-shadow: 0 0 28px rgba(79, 140, 255, 0.25);
}

.sidebar-toggle {
    top: 24px !important;
    right: 24px !important;
    left: auto !important;
    width: 46px !important;
    height: 46px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(79, 140, 255, 0.55) !important;
    background: linear-gradient(155deg, rgba(11, 20, 43, 0.95), rgba(13, 30, 66, 0.9)) !important;
    box-shadow: 0 10px 30px rgba(2, 6, 23, 0.5), 0 0 0 1px rgba(79, 140, 255, 0.25) inset !important;
}

.sidebar-toggle:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 18px 34px rgba(79, 140, 255, 0.2), 0 0 0 1px rgba(79, 140, 255, 0.4) inset !important;
}

body:not(.sidebar-collapsed) .sidebar-toggle {
    right: calc(var(--sidebar-width) - 22px) !important;
}

body.sidebar-collapsed .sidebar-toggle,
.sidebar.hidden ~ .sidebar-toggle {
    right: 24px !important;
}

.sidebar:not(.hidden) ~ .sidebar-toggle {
    right: calc(var(--sidebar-width) + 16px) !important;
}

.nav-link {
    border: 1px solid transparent !important;
    color: var(--text-dim) !important;
    border-radius: 12px !important;
}

.nav-link:hover {
    color: var(--text-main) !important;
    border-color: rgba(79, 140, 255, 0.24) !important;
    background: linear-gradient(120deg, rgba(79, 140, 255, 0.14), rgba(34, 211, 238, 0.08)) !important;
}

.nav-link.active {
    color: #f3f7ff !important;
    border-color: rgba(79, 140, 255, 0.5) !important;
    background: linear-gradient(130deg, rgba(79, 140, 255, 0.24), rgba(167, 139, 250, 0.16)) !important;
    box-shadow: 0 10px 20px rgba(2, 6, 23, 0.35) !important;
}

.main-content {
    background: transparent !important;
}

h1, h2, h3, h4 {
    letter-spacing: -0.02em;
    color: #f3f7ff !important;
}

p {
    color: var(--text-soft);
}

.hero-card,
.service-card,
.project-card,
.feature-card,
.auth-card-login,
.modal-content,
.user-block,
.user-card-container,
.auth-container > * {
    background: var(--card-bg) !important;
    border: 1px solid var(--border) !important;
    box-shadow: 0 22px 55px rgba(2, 6, 23, 0.45), 0 1px 0 rgba(255, 255, 255, 0.03) inset !important;
}

.hero-card,
.auth-card-login,
.modal-content {
    border-radius: 26px !important;
}

.service-card,
.project-card,
.feature-card {
    border-radius: 20px !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
}

.service-card:hover,
.project-card:hover,
.feature-card:hover {
    transform: translateY(-9px) !important;
    border-color: rgba(79, 140, 255, 0.52) !important;
    box-shadow: 0 28px 52px rgba(79, 140, 255, 0.16), 0 16px 28px rgba(2, 6, 23, 0.35) !important;
}

.feature-icon,
.icon-box,
.service-icon-box {
    box-shadow: 0 14px 28px rgba(79, 140, 255, 0.22) !important;
}

.btn-primary,
.btn-order,
.btn-discord,
.btn-secondary {
    position: relative;
    overflow: hidden;
    background: var(--grad-linear) !important;
    color: #f8fbff !important;
    border: 1px solid rgba(126, 179, 255, 0.5) !important;
    border-radius: 14px !important;
    box-shadow: 0 12px 30px rgba(79, 140, 255, 0.28), 0 1px 0 rgba(255, 255, 255, 0.2) inset !important;
}

.btn-primary::before,
.btn-order::before,
.btn-discord::before,
.btn-secondary::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 20%, rgba(255, 255, 255, 0.35) 48%, transparent 74%);
    transform: translateX(-130%);
    transition: transform 0.55s ease;
}

.btn-primary:hover::before,
.btn-order:hover::before,
.btn-discord:hover::before,
.btn-secondary:hover::before {
    transform: translateX(130%);
}

.btn-primary:hover,
.btn-order:hover,
.btn-discord:hover,
.btn-secondary:hover {
    transform: translateY(-3px) !important;
    filter: brightness(1.08) !important;
}

.btn-logout,
.btn-logout-full {
    color: #f5f9ff !important;
    background: linear-gradient(135deg, rgba(79, 140, 255, 0.24), rgba(34, 211, 238, 0.24)) !important;
    border: 1px solid rgba(79, 140, 255, 0.38) !important;
    border-radius: 12px !important;
    padding: 10px 12px !important;
}

.status-badge,
.partner-badge {
    border: 1px solid rgba(141, 167, 208, 0.36) !important;
    backdrop-filter: blur(8px);
}

.pricing-table,
.pricing-table th,
.pricing-table td {
    border-color: rgba(141, 167, 208, 0.22) !important;
}

.pricing-table th {
    background: rgba(79, 140, 255, 0.08) !important;
}

.site-footer,
.main-footer {
    background: linear-gradient(180deg, rgba(6, 11, 24, 0.82), rgba(4, 8, 18, 0.92)) !important;
    border-top: 1px solid rgba(141, 167, 208, 0.26) !important;
    backdrop-filter: blur(8px) !important;
}

.footer-links a {
    color: var(--text-dim) !important;
}

.footer-links a:hover {
    color: #f5f9ff !important;
}

.form-input {
    background: rgba(11, 20, 43, 0.8) !important;
    color: #e6edf7 !important;
    border-color: rgba(79, 140, 255, 0.32) !important;
}

.form-input:focus {
    border-color: rgba(34, 211, 238, 0.72) !important;
    box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.16), 0 0 18px rgba(34, 211, 238, 0.2) !important;
}

.modal,
.modal-overlay {
    background: rgba(2, 6, 23, 0.84) !important;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: rgba(8, 13, 28, 0.85);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(79, 140, 255, 0.8), rgba(34, 211, 238, 0.8));
    border-radius: 999px;
    border: 2px solid rgba(8, 13, 28, 0.85);
}

@media (max-width: 1024px) {
    .hero-card,
    .auth-card-login,
    .modal-content {
        border-radius: 20px !important;
    }

    .service-card,
    .project-card,
    .feature-card {
        border-radius: 16px !important;
    }
}