@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');

/* ========================================
   VARIABLES - DARK (défaut)
======================================== */

:root,
[data-bs-theme="dark"] {
    --bg: #090909;
    --bg-card: #111111;
    --bg-card-hover: #161616;
    --bg-input: #0e0e0e;
    --border: #1a1a1a;
    --border-hover: #2a2a2a;
    --text: #ffffff;
    --text-muted: #6b6b6b;
    --primary: #0d6efd;
    --primary-hover: #0b5ed7;
    --primary-light: rgba(13, 110, 253, 0.12);
    --danger: #dc3545;
    --danger-light: rgba(220, 53, 69, 0.12);
    --warning: #fd7e14;
    --warning-light: rgba(253, 126, 20, 0.12);
    --success: #198754;
    --success-light: rgba(25, 135, 84, 0.12);
    --discord: #5865F2;
    --radius: 8px;
    --radius-lg: 12px;
    --font: 'DM Sans', sans-serif;
    --shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

/* ========================================
   VARIABLES - LIGHT
======================================== */

[data-bs-theme="light"] {
    --bg: #f5f6fa;
    --bg-card: #ffffff;
    --bg-card-hover: #f0f1f5;
    --bg-input: #f8f9fa;
    --border: #e2e4e9;
    --border-hover: #cdd0d6;
    --text: #1a1a2e;
    --text-muted: #6c757d;
    --shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

/* ========================================
   RESET & BASE
======================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font);
    background-color: var(--bg);
    color: var(--text);
    min-height: 100vh;
}

/* ========================================
   BANDEAU PROMOTIONNEL
======================================== */

.site-bandeau {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    padding: 10px 48px 10px 16px;
    text-align: center;
    position: relative;
    z-index: 1100;
    line-height: 1.4;
}

.site-bandeau-content a {
    color: #fff;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.site-bandeau-content a:hover {
    opacity: 0.85;
}

.site-bandeau-close {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    font-size: 18px;
    padding: 4px;
    display: flex;
    transition: color 0.2s;
}

.site-bandeau-close:hover {
    color: #fff;
}

.site-bandeau.hidden {
    display: none;
}

body:has(.v1-layout) .site-bandeau {
    margin-left: 260px;
}

@media (max-width: 768px) {
    .site-bandeau {
        font-size: 12px;
        padding: 8px 40px 8px 12px;
    }

    body:has(.v1-layout) .site-bandeau {
        margin-left: 0;
        position: fixed;
        top: 56px;
        left: 0;
        right: 0;
        z-index: 39;
    }

    body:has(.v1-layout) .site-bandeau ~ .v1-layout .v1-main {
        padding-top: 112px;
    }

    body:has(.v1-layout) .site-bandeau.hidden ~ .v1-layout .v1-main {
        padding-top: 72px;
    }
}

/* Pages standalone (checkout, payment) : flex column pour footer en bas */
body:has(.payment-result-page),
body:has(.checkout-page) {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

body:has(.payment-result-page) .payment-result-page,
body:has(.checkout-page) .checkout-page {
    flex: 1;
}

/* ========================================
   PAGE DE CONNEXION — SPLIT LAYOUT
======================================== */

.login-split {
    display: flex;
    min-height: 100vh;
}

/* — LEFT PANEL — */
.login-left {
    flex: 1;
    background: var(--bg-card);
    border-right: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px;
    position: relative;
    overflow: hidden;
}


.login-left-content {
    position: relative;
    z-index: 1;
    max-width: 480px;
}

.login-left-logo {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 40px;
}

.login-left-logo i {
    font-size: 28px;
    color: var(--primary);
}

.login-left-logo span {
    font-size: 22px;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.5px;
}

.login-left-title {
    font-size: 36px;
    font-weight: 800;
    color: var(--text);
    line-height: 1.25;
    letter-spacing: -0.5px;
    margin-bottom: 48px;
}

.login-left-title span {
    color: var(--text-muted);
    font-weight: 600;
}

.login-left-features {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.login-left-feature {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.login-left-feature-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 10px;
    background: rgba(56, 139, 253, 0.15);
    border: 1px solid rgba(56, 139, 253, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--primary);
}

.login-left-feature strong {
    display: block;
    color: var(--text);
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 2px;
}

.login-left-feature p {
    color: var(--text-muted);
    font-size: 13px;
    margin: 0;
    line-height: 1.4;
}

/* Pattern overlay */
.login-left-pattern {
    position: absolute;
    inset: 0;
    background: url(../img/patterne.png) repeat;
    pointer-events: none;
    background-repeat: no-repeat;
    background-position: center;
}

/* — RIGHT PANEL — */
.login-right {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    position: relative;
    background: var(--bg);
}

.login-form-wrapper {
    width: 100%;
    max-width: 380px;
}

.login-heading {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.5px;
    margin-bottom: 8px;
}

.login-theme-btn {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: all 0.2s ease;
}

.login-theme-btn:hover {
    background: var(--bg-card-hover);
    color: var(--text);
    border-color: var(--border-hover);
}

.login-desc {
    color: var(--text-muted);
    font-size: 14px;
    margin-bottom: 32px;
    line-height: 1.5;
}

.login-auth {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}

.login-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 14px 20px;
    border-radius: var(--radius);
    font-size: 15px;
    font-weight: 600;
    font-family: var(--font);
    text-decoration: none;
    transition: all 0.2s ease;
    border: 1px solid var(--border);
    cursor: pointer;
}

.login-btn-discord {
    background: #5865F2;
    color: #fff;
    border-color: #5865F2;
    box-shadow: 0 4px 12px rgba(88, 101, 242, 0.3);
}

.login-btn-discord:hover {
    background: #4752c4;
    border-color: #4752c4;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(88, 101, 242, 0.4);
}

.login-btn-google {
    background: var(--bg-card);
    color: var(--text);
}

.login-btn-google:hover {
    background: var(--bg-card-hover);
    border-color: var(--border-hover);
    color: var(--text);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.login-separator {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

.login-separator::before,
.login-separator::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

.login-separator span {
    color: var(--text-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
}

.login-info {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 16px;
    font-size: 13px;
    color: var(--text-muted);
    text-align: center;
    margin-bottom: 24px;
    line-height: 1.5;
}

.login-terms {
    color: var(--text-muted);
    font-size: 12px;
    margin: 0;
    line-height: 1.6;
    text-align: center;
}

.login-terms a {
    color: var(--primary);
    text-decoration: none;
}

.login-terms a:hover {
    text-decoration: underline;
}

/* ========================================
   FULLPAGE CENTER (Maintenance / Coming Soon)
======================================== */

.fullpage-center {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    position: relative;
    padding: 40px 20px;
}

.fullpage-pattern {
    position: absolute;
    inset: 0;
    background: url(../img/patterne.png) repeat;
    background-position: center;
    pointer-events: none;
    opacity: 0.5;
}

.fullpage-theme-btn {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}

.fullpage-theme-btn:hover {
    border-color: var(--border-hover);
    background: var(--bg-card-hover);
}

.fullpage-card {
    text-align: center;
    max-width: 480px;
    width: 100%;
}

.fullpage-logo--big {
    font-size: 32px;
    gap: 12px;
    margin-bottom: 32px;
}

.fullpage-logo--big .upfile-icon {
    width: 48px;
    height: 50px;
}

.fullpage-logo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
    text-decoration: none;
    margin-bottom: 24px;
}

.fullpage-title {
    font-size: 32px;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 12px;
    line-height: 1.2;
}

.fullpage-desc {
    font-size: 15px;
    color: var(--text-muted);
    line-height: 1.7;
    margin-bottom: 32px;
}

.fullpage-details {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 32px;
    padding: 20px 24px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    text-align: left;
}

.fullpage-detail {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: var(--text-muted);
}

.fullpage-detail i {
    font-size: 20px;
    color: var(--text);
    min-width: 20px;
}

.fullpage-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-bottom: 28px;
    flex-wrap: wrap;
}

.fullpage-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: var(--radius);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: opacity 0.2s, transform 0.2s;
    cursor: pointer;
    border: none;
}

.fullpage-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.fullpage-btn--primary {
    background: var(--primary);
    color: #fff;
}

.fullpage-btn--discord {
    background: var(--discord);
    color: #fff;
}

.fullpage-btn--outline {
    background: transparent;
    color: var(--text);
    border: 1px solid var(--border);
}

.fullpage-btn--outline:hover {
    border-color: var(--border-hover);
    background: var(--bg-card);
}

.fullpage-footer-text {
    font-size: 13px;
    color: var(--text-muted);
}

.fullpage-footer-text a {
    color: var(--primary);
    text-decoration: none;
}

.fullpage-footer-text a:hover {
    text-decoration: underline;
}

@media (max-width: 480px) {
    .fullpage-title { font-size: 24px; }
    .fullpage-logo--big { font-size: 26px; }
    .fullpage-logo--big .upfile-icon { width: 40px; height: 42px; }
    .fullpage-actions { flex-direction: column; }
}

/* ========================================
   UPFILE ICON (SVG mask — coloriable via color)
======================================== */

.upfile-icon {
    display: inline-block;
    width: 24px;
    height: 25px;
    mask: url(../img/icon.svg) no-repeat center / contain;
    -webkit-mask: url(../img/icon.svg) no-repeat center / contain;
    background-color: currentColor;
    vertical-align: middle;
    flex-shrink: 0;
}

/* ========================================
   DASHBOARD V1 - SIDEBAR LAYOUT
======================================== */

.v1-layout {
    display: flex;
    min-height: 100vh;
}

/* Sidebar */
.v1-sidebar {
    width: 260px;
    background: var(--bg-card);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 50;
    padding: 24px 16px;
    transition: transform 0.3s ease;
    overflow-y: auto;
    overflow-x: hidden;
}

.v1-sidebar-brand {
    display: flex;
    align-items: center;
    gap: 5px;
    text-decoration: none;
    color: var(--text);
    padding: 0 8px;
    margin-bottom: 32px;
}

.v1-sidebar-brand .upfile-icon {
    width: 28px;
    height: 29px;
    color: var(--primary);
}

.v1-sidebar-brand span {
    font-size: 22px;
    font-weight: 700;
}

.v1-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.v1-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--radius);
    color: var(--text-muted);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.15s ease;
    border: none;
    background: none;
    cursor: pointer;
    font-family: var(--font);
    width: 100%;
    text-align: left;
}

.v1-nav-item:hover {
    background: var(--bg-card-hover);
    color: var(--text);
}

.v1-nav-item.active {
    background: var(--primary-light);
    color: var(--primary);
}

.v1-nav-item i {
    font-size: 20px;
}

.v1-nav-divider {
    height: 1px;
    background: var(--border);
    margin: 12px 8px;
}

.v1-nav-label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 8px 14px 4px;
}

/* Storage bar */
.v1-storage {
    padding: 16px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-top: auto;
}

.v1-storage-label {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.v1-storage-label strong {
    color: var(--text);
}

.v1-storage-bar {
    height: 6px;
    background: var(--border);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 12px;
}

.v1-storage-fill {
    height: 100%;
    background-color: var(--primary);
    border-radius: 3px;
    width: 23%;
}

.v1-storage-cta {
    display: block;
    text-align: center;
    padding: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--primary);
    background: var(--primary-light);
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.15s ease;
}

.v1-storage-cta:hover {
    background: var(--primary);
    color: #fff;
}

/* Sidebar user */
.v1-sidebar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

.v1-sidebar-user img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
}

.v1-sidebar-user-info {
    flex: 1;
}

.v1-sidebar-user-name {
    font-size: 14px;
    font-weight: 600;
}

.v1-sidebar-user-plan {
    font-size: 11px;
    color: var(--text-muted);
}

/* Business badge sidebar */
.v1-sidebar-business-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    margin: 0 8px 4px;
    background: var(--primary-light);
    border: 1px solid rgba(13, 110, 253, 0.2);
    border-radius: var(--radius);
    font-size: 12px;
}
.v1-sidebar-business-badge > i {
    font-size: 18px;
    color: var(--primary);
}
.v1-sidebar-business-badge div {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.v1-sidebar-business-name {
    font-weight: 600;
    font-size: 12px;
    line-height: 1.2;
}
.v1-sidebar-business-role {
    font-size: 10px;
    color: var(--text-muted);
}
.v1-business-exit {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.15s;
    font-size: 14px;
}
.v1-business-exit:hover {
    color: var(--danger);
    background: var(--danger-light);
}

/* Spaces switcher */
.v1-sidebar-user[id="spacesSwitcher"] {
    cursor: pointer;
    border-radius: var(--radius);
    transition: background 0.15s;
    position: relative;
}
.v1-sidebar-user[id="spacesSwitcher"]:hover {
    background: var(--bg-card-hover);
}
.v1-spaces-chevron {
    font-size: 16px;
    color: var(--text-muted);
    transition: transform 0.2s;
    margin-left: auto;
}
.v1-spaces-chevron.open {
    transform: rotate(180deg);
}
.v1-invitation-dot {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 8px;
    height: 8px;
    background: var(--warning);
    border-radius: 50%;
    border: 2px solid var(--bg-card);
}

/* Spaces dropdown */
.v1-spaces-dropdown {
    display: none;
    flex-direction: column;
    gap: 2px;
    padding: 6px 8px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--border);
    animation: spacesSlide 0.15s ease;
}
.v1-spaces-dropdown.open {
    display: flex;
}
@keyframes spacesSlide {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}
.v1-spaces-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border: none;
    background: none;
    color: var(--text);
    border-radius: var(--radius);
    cursor: pointer;
    transition: background 0.15s;
    text-align: left;
    width: 100%;
    font-family: var(--font);
    font-size: 13px;
    text-decoration: none;
}
.v1-spaces-item:hover {
    background: var(--bg-card-hover);
}
.v1-spaces-item.active {
    background: var(--primary-light);
}
.v1-spaces-item img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
}
.v1-spaces-item-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--primary-light);
    color: var(--primary);
    font-size: 14px;
    flex-shrink: 0;
}
.v1-spaces-item-name {
    font-weight: 500;
    font-size: 13px;
    display: block;
    line-height: 1.2;
}
.v1-spaces-item-desc {
    font-size: 11px;
    color: var(--text-muted);
    display: block;
}
.v1-spaces-item .ti-check {
    margin-left: auto;
    color: var(--primary);
    font-size: 16px;
}
.v1-spaces-divider {
    height: 1px;
    background: var(--border);
    margin: 4px 0;
}
.v1-spaces-label {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    padding: 4px 8px 2px;
}

/* Mobile header */
.v1-mobile-header {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 56px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    align-items: center;
    padding: 0 12px;
    z-index: 40;
    gap: 0;
}

.v1-mobile-header .v1-sidebar-brand {
    margin-bottom: 0;
    flex: 1;
    justify-content: center;
}

.v1-mobile-header .v1-sidebar-brand span {
    font-size: 18px;
}

.v1-mobile-header .v1-sidebar-brand .upfile-icon {
    width: 22px;
    height: 23px;
}

.v1-mobile-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.v1-mobile-menu-btn,
.v1-mobile-theme-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    background: var(--bg-input);
    color: var(--text);
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 18px;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.v1-mobile-upload-btn {
    height: 36px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font);
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.v1-mobile-upload-btn i {
    font-size: 16px;
}

.v1-mobile-menu-btn:hover,
.v1-mobile-theme-btn:hover {
    background: var(--bg-card-hover);
    border-color: var(--border-hover);
}

.v1-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 45;
}

.v1-sidebar-overlay.show {
    display: block;
}

/* Main */
.v1-main {
    margin-left: 260px;
    flex: 1;
    padding: 32px 40px;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Topbar */
.v1-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 32px;
}

.v1-topbar h1 {
    font-size: 24px;
    font-weight: 700;
}

.v1-topbar-actions {
    display: flex;
    gap: 10px;
}

.v1-btn-upload {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    font-size: 14px;
    font-weight: 600;
    font-family: var(--font);
    cursor: pointer;
    transition: all 0.2s ease;
}

.v1-btn-upload:hover {
    background: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(13, 110, 253, 0.3);
}

/* Feedback Banner */
.v1-feedback-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 20px;
    margin-bottom: 16px;
}
.v1-feedback-left {
    display: flex;
    align-items: center;
    gap: 12px;
}
.v1-feedback-left > i {
    font-size: 22px;
    color: var(--primary);
}
.v1-feedback-left strong {
    display: block;
    font-size: 14px;
    color: var(--text);
}
.v1-feedback-left span {
    font-size: 13px;
    color: var(--text-muted);
}
.v1-feedback-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-size: 13px;
    font-family: var(--font);
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.v1-feedback-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}

/* CTA Banner */
.v1-cta-banner {
    background: linear-gradient(135deg, rgba(13, 110, 253, 0.1) 0%, rgba(111, 66, 193, 0.08) 100%);
    border: 1px solid rgba(13, 110, 253, 0.2);
    border-radius: var(--radius-lg);
    padding: 24px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
}

.v1-cta-content h3 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 4px;
}

.v1-cta-content p {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
}

.v1-cta-btn {
    padding: 10px 24px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
    text-decoration: none;
}

.v1-cta-btn:hover {
    background: var(--primary-hover);
    color: #fff;
    transform: translateY(-1px);
}

/* ─── Bannière dépassement de quota ─── */
.v1-quota-warning {
    background: rgba(255, 152, 0, 0.08);
    border: 1px solid rgba(255, 152, 0, 0.3);
    border-radius: var(--radius-lg);
    padding: 20px 24px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 28px;
}

.v1-quota-warning-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 152, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ff9800;
    font-size: 20px;
}

.v1-quota-warning-content h4 {
    font-size: 15px;
    font-weight: 700;
    color: #ff9800;
    margin: 0 0 8px 0;
}

.v1-quota-warning-content ul {
    margin: 0 0 10px 0;
    padding-left: 18px;
}

.v1-quota-warning-content ul li {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.6;
}

.v1-quota-warning-content ul li strong {
    color: var(--text);
}

.v1-quota-warning-content > p {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0 0 12px 0;
}

.v1-quota-warning-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    background: #ff9800;
    color: #fff;
    border: none;
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font);
    text-decoration: none;
    transition: all 0.2s ease;
}

.v1-quota-warning-btn:hover {
    background: #f57c00;
    color: #fff;
    transform: translateY(-1px);
}

/* Stats row */
.v1-stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 28px;
}

.v1-stat {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px;
}

.v1-stat-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.v1-stat-label {
    font-size: 12px;
    color: var(--text-muted);
}

.v1-stat-badge {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 600;
}

.v1-stat-badge-up {
    background: var(--success-light);
    color: var(--success);
}

.v1-stat-value {
    font-size: 26px;
    font-weight: 700;
}

/* Upload compact */
.v1-upload-compact {
    border: 2px dashed var(--border);
    border-radius: var(--radius-lg);
    padding: 28px;
    text-align: center;
    margin-bottom: 28px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 20px;
}

.v1-upload-compact:hover,
.v1-upload-compact.dragover {
    border-color: var(--primary);
    background: var(--primary-light);
}

.v1-upload-icon-box {
    width: 56px;
    height: 56px;
    background: var(--primary-light);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.v1-upload-icon-box i {
    font-size: 28px;
    color: var(--primary);
}

.v1-upload-text {
    text-align: left;
}

.v1-upload-text h3 {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 2px;
}

.v1-upload-text p {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
}

/* Files table */
.v1-section-title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.v1-section-title i {
    color: var(--primary);
}

.v1-table-wrapper {
    overflow-x: auto;
}

.v1-files-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 6px;
}

.v1-files-table th {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    padding: 8px 16px;
    font-weight: 600;
}

.v1-files-table td {
    padding: 14px 16px;
    background: var(--bg-card);
    font-size: 14px;
    vertical-align: middle;
}

.v1-files-table tr td:first-child {
    border-radius: var(--radius) 0 0 var(--radius);
}

.v1-files-table tr td:last-child {
    border-radius: 0 var(--radius) var(--radius) 0;
}

.v1-files-table tbody tr {
    transition: all 0.15s ease;
}

.v1-files-table tbody tr:hover td {
    background: var(--bg-card-hover);
}

.v1-file-name-col {
    display: flex;
    align-items: center;
    gap: 12px;
}

.v1-file-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.v1-file-icon i {
    font-size: 18px;
}

.v1-file-icon-img {
    background: var(--primary-light);
}
.v1-file-icon-img i { color: var(--primary); }

.v1-file-icon-archive {
    background: var(--warning-light);
}
.v1-file-icon-archive i { color: var(--warning); }

.v1-file-icon-audio {
    background: var(--success-light);
}
.v1-file-icon-audio i { color: var(--success); }

.v1-file-icon-video {
    background: rgba(111, 66, 193, 0.12);
}
.v1-file-icon-video i { color: #6f42c1; }

.v1-timer-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 20px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text-muted);
}

.v1-timer-warning {
    background: var(--warning-light);
    border-color: transparent;
    color: var(--warning);
}

.v1-timer-pinned {
    background: var(--success-light);
    border-color: transparent;
    color: var(--success);
}

.v1-timer-shared {
    background: rgba(99, 102, 241, 0.12);
    border-color: transparent;
    color: #818cf8;
    font-size: 11px;
    margin-left: 8px;
}

.v1-timer-uploaded-by {
    background: rgba(245, 158, 11, 0.12);
    border-color: transparent;
    color: #f59e0b;
    font-size: 11px;
    margin-left: 8px;
}

.v1-table-actions {
    display: flex;
    gap: 4px;
    justify-content: flex-end;
}

.v1-table-actions button {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    color: var(--text-muted);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
    font-size: 16px;
}

.v1-table-actions button:hover {
    background: var(--bg-input);
    color: var(--text);
}

.v1-table-actions .v1-act-danger:hover {
    background: var(--danger-light);
    color: var(--danger);
}

.v1-table-actions .v1-act-danger:hover {
    background: var(--danger-light);
    color: var(--danger);
}

.v1-table-actions .v1-act-edit:hover {
    background: var(--primary-light);
    color: var(--primary);
}

/* ========================================
   FILE SETTINGS MODAL
======================================== */

.fs-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.fs-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.fs-modal {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    width: 520px;
    max-width: 94vw;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    transform: scale(0.95) translateY(8px);
    opacity: 0;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.fs-overlay.active .fs-modal {
    transform: scale(1) translateY(0);
    opacity: 1;
}

/* Header */
.fs-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 24px 24px 0;
}

.fs-header-icon {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: var(--radius);
    background: var(--primary-light);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.fs-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--text);
    margin: 0;
}

.fs-filename {
    font-size: 13px;
    color: var(--text-muted);
    margin: 2px 0 0;
}

.fs-close {
    margin-left: auto;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    color: var(--text-muted);
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 18px;
    transition: all 0.15s;
}

.fs-close:hover {
    background: var(--bg-input);
    color: var(--text);
}

/* Body */
.fs-body {
    padding: 20px 24px;
    overflow-y: auto;
    flex: 1;
}

.fs-quota-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(255, 152, 0, 0.1);
    border: 1px solid rgba(255, 152, 0, 0.3);
    border-radius: var(--radius);
    margin-bottom: 8px;
    font-size: 12px;
    color: #ff9800;
    line-height: 1.5;
}

.fs-quota-alert i {
    flex-shrink: 0;
    font-size: 16px;
}

.fs-quota-alert a {
    color: #ff9800;
    font-weight: 600;
    text-decoration: underline;
}

.fs-section {
    padding: 16px 0;
    border-bottom: 1px solid var(--border);
}

.fs-section:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.fs-section:first-child {
    padding-top: 0;
}

.fs-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.fs-label i {
    font-size: 16px;
    color: var(--text-muted);
}

.fs-label-sm {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    margin-bottom: 8px;
    display: block;
}

/* Toggle group (Temporaire / Permanent, Public / Privé) */
.fs-toggle-group {
    display: flex;
    gap: 8px;
}

.fs-toggle {
    flex: 1;
    padding: 10px 16px;
    border: 1px solid var(--border);
    background: var(--bg-input);
    color: var(--text-muted);
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 500;
    font-family: var(--font);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.15s;
}

.fs-toggle:hover {
    border-color: var(--primary);
    color: var(--text);
}

.fs-toggle.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

/* Sub option (expiration) */
.fs-sub-option {
    margin-top: 12px;
    transition: all 0.2s;
}

.fs-sub-option.hidden {
    display: none;
}

/* Chips (expiration durations) */
.fs-chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
}

.fs-chips::-webkit-scrollbar {
    height: 4px;
}

.fs-chips::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
}

.fs-chip {
    padding: 7px 14px;
    border: 1px solid var(--border);
    background: var(--bg-input);
    color: var(--text-muted);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    font-family: var(--font);
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
    flex-shrink: 0;
}

.fs-chip:hover {
    border-color: var(--primary);
    color: var(--text);
}

.fs-chip.active {
    background: var(--primary-light);
    border-color: var(--primary);
    color: var(--primary);
    font-weight: 600;
}

.fs-chip:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

/* Switch toggle */
.fs-switch-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.fs-switch-label {
    font-size: 13px;
    color: var(--text-muted);
}

.fs-switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
    flex-shrink: 0;
}

.fs-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.fs-switch-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 22px;
    transition: all 0.2s;
}

.fs-switch-slider::before {
    content: "";
    position: absolute;
    height: 16px;
    width: 16px;
    left: 2px;
    bottom: 2px;
    background: var(--text-muted);
    border-radius: 50%;
    transition: all 0.2s;
}

.fs-switch input:checked + .fs-switch-slider {
    background: var(--primary);
    border-color: var(--primary);
}

.fs-switch input:checked + .fs-switch-slider::before {
    transform: translateX(18px);
    background: #fff;
}

/* Input group */
.fs-input-group {
    position: relative;
    margin-top: 10px;
}

.fs-input {
    width: 100%;
    padding: 10px 14px;
    padding-right: 40px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-size: 13px;
    font-family: var(--font);
    outline: none;
    transition: border-color 0.2s;
}

.fs-input:focus {
    border-color: var(--primary);
}

.fs-input-btn {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: var(--radius);
    transition: color 0.15s;
}

.fs-input-btn:hover {
    color: var(--text);
}

.fs-input-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 16px;
    pointer-events: none;
}

/* Password field */
.fs-password-field {
    transition: all 0.2s;
}

/* User search results */
.fs-user-results {
    margin-top: 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-input);
    max-height: 160px;
    overflow-y: auto;
}

.fs-user-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    cursor: pointer;
    transition: background 0.1s;
}

.fs-user-item:hover {
    background: var(--bg-card-hover);
}

.fs-user-item img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
}

.fs-user-item div {
    display: flex;
    flex-direction: column;
}

.fs-user-item strong {
    font-size: 13px;
    color: var(--text);
    font-weight: 600;
}

.fs-user-item span {
    font-size: 11px;
    color: var(--text-muted);
}

/* Selected users (cards) */
.fs-selected-users {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.fs-user-tag {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 16px 10px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    min-width: 80px;
}

.fs-user-tag img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
}

.fs-user-tag span {
    font-size: 11px;
    font-weight: 500;
    color: var(--text);
    text-align: center;
    max-width: 70px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fs-user-tag button {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 20px;
    height: 20px;
    border: none;
    background: var(--danger);
    color: #fff;
    border-radius: 50%;
    cursor: pointer;
    font-size: 12px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s;
}

.fs-user-tag:hover button {
    opacity: 1;
}

/* Footer */
.fs-footer {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    padding: 16px 24px;
    border-top: 1px solid var(--border);
}

/* Stats boxes */
.fs-stats-row {
    display: flex;
    gap: 12px;
    margin-top: 10px;
}

.fs-stat-box {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.fs-stat-box > i {
    font-size: 22px;
    color: var(--primary);
}

.fs-stat-box > div {
    display: flex;
    flex-direction: column;
}

.fs-stat-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.2;
}

.fs-stat-label {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 500;
}

/* Disabled section (plan gate) */
.fs-section-disabled {
    opacity: 0.4;
    pointer-events: none;
    position: relative;
}

/* Plan badge in modal */
.fs-plan-badge {
    display: inline-block;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 700;
    border-radius: 10px;
    background: var(--primary-light);
    color: var(--primary);
    margin-left: 6px;
    vertical-align: middle;
}

/* Field hint in modal */
.fs-field-hint {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 6px;
}

/* Settings plan badge inline */
.settings-plan-badge-inline {
    display: inline-block;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 700;
    border-radius: 10px;
    background: rgba(255, 193, 7, 0.15);
    color: #ffc107;
    margin-left: 6px;
    vertical-align: middle;
}

/* --- Subscription details --- */
.settings-sub-details {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.settings-sub-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
}
.settings-sub-row span {
    color: var(--text-muted);
}

/* --- Invoices list --- */
.settings-invoices-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.settings-invoice-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid var(--v1-border);
    gap: 16px;
}
.settings-invoice-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.settings-invoice-item:first-child {
    padding-top: 0;
}
.settings-invoice-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.settings-invoice-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(13, 110, 253, 0.1);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.settings-invoice-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.settings-invoice-desc {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.settings-invoice-date {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}
.settings-invoice-right {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-shrink: 0;
}
.settings-invoice-amount {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}
.settings-invoice-price {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-color);
}
.settings-invoice-badge {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 600;
    background: var(--v1-bg-card);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.settings-invoice-paid {
    background: rgba(34, 197, 94, 0.12);
    color: #22c55e;
}
.settings-invoice-open {
    background: rgba(245, 158, 11, 0.12);
    color: #f59e0b;
}
.settings-invoice-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.settings-invoice-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 8px;
    background: var(--primary);
    color: #fff;
    text-decoration: none;
    transition: opacity 0.2s;
    white-space: nowrap;
}
.settings-invoice-btn:hover {
    opacity: 0.85;
    color: #fff;
}
.settings-invoice-btn-outline {
    background: transparent;
    border: 1px solid var(--v1-border);
    color: var(--text-muted);
}
.settings-invoice-btn-outline:hover {
    border-color: var(--primary);
    color: var(--primary);
}
@media (max-width: 600px) {
    .settings-invoice-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .settings-invoice-right {
        width: 100%;
        justify-content: space-between;
    }
}

/* --- Cancel subscription modal --- */
.cancel-sub-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}
.cancel-sub-overlay.active {
    opacity: 1;
    pointer-events: all;
}
.cancel-sub-modal {
    background: var(--v1-bg-card);
    border: 1px solid var(--v1-border);
    border-radius: 16px;
    padding: 32px;
    max-width: 440px;
    width: 90%;
    text-align: center;
}
.cancel-sub-modal h3 {
    margin: 16px 0 8px;
    font-size: 18px;
}
.cancel-sub-modal p {
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.6;
    margin-bottom: 20px;
}
.cancel-sub-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}
.cancel-sub-btn-keep {
    padding: 10px 24px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid var(--v1-border);
    background: transparent;
    color: var(--text);
    cursor: pointer;
    transition: background 0.15s;
    font-family: var(--font);
}
.cancel-sub-btn-keep:hover {
    background: var(--v1-bg-card);
}
.cancel-sub-btn-cancel {
    padding: 10px 24px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    border: none;
    background: #ef4444;
    color: #fff;
    cursor: pointer;
    transition: opacity 0.15s;
    font-family: var(--font);
}
.cancel-sub-btn-cancel:hover {
    opacity: 0.85;
}

.fs-btn-cancel {
    padding: 10px 20px;
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font);
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text);
    cursor: pointer;
    transition: background 0.15s;
}

.fs-btn-cancel:hover {
    background: var(--bg-card-hover);
}

.fs-btn-save {
    padding: 10px 20px;
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font);
    border: none;
    background: var(--primary);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: opacity 0.15s;
}

.fs-btn-save:hover {
    opacity: 0.85;
}

/* Responsive */
@media (max-width: 480px) {
    .fs-modal {
        max-width: 100%;
        max-height: 92vh;
        margin: 0 8px;
    }

    .fs-header,
    .fs-body,
    .fs-footer {
        padding-left: 16px;
        padding-right: 16px;
    }

    .fs-toggle-group {
        flex-direction: column;
    }

    .fs-chips {
        flex-wrap: wrap;
    }

    .fs-footer {
        flex-direction: column;
    }

    .fs-btn-cancel,
    .fs-btn-save {
        width: 100%;
        justify-content: center;
    }
}

/* ========================================
   SKELETON LOADING (Auto)
======================================== */

@keyframes shimmer {
    0% { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}

/* Base skeleton */
.skeleton-loading {
    pointer-events: none;
    user-select: none;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    fill: transparent !important;
    stroke: transparent !important;
}

/* Tout le texte invisible */
.skeleton-loading * {
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    text-shadow: none !important;
    box-shadow: none !important;
    border-color: var(--border) !important;
    fill: transparent !important;
    stroke: transparent !important;
}

/* Éléments de contenu : shimmer (descendants ET self) */
.skeleton-loading h1, .skeleton-loading h2, .skeleton-loading h3,
.skeleton-loading h4, .skeleton-loading h5, .skeleton-loading h6,
.skeleton-loading p, .skeleton-loading span, .skeleton-loading a,
.skeleton-loading li, .skeleton-loading label, .skeleton-loading strong,
.skeleton-loading em, .skeleton-loading small, .skeleton-loading blockquote,
.skeleton-loading td, .skeleton-loading th, .skeleton-loading dt, .skeleton-loading dd,
.skeleton-loading input, .skeleton-loading select, .skeleton-loading textarea,
.skeleton-loading button, .skeleton-loading .btn,
.skeleton-loading img, .skeleton-loading svg, .skeleton-loading i,
h1.skeleton-loading, h2.skeleton-loading, h3.skeleton-loading,
h4.skeleton-loading, h5.skeleton-loading, h6.skeleton-loading,
p.skeleton-loading, span.skeleton-loading, a.skeleton-loading,
li.skeleton-loading, label.skeleton-loading, strong.skeleton-loading,
img.skeleton-loading, svg.skeleton-loading, i.skeleton-loading,
input.skeleton-loading, select.skeleton-loading, textarea.skeleton-loading,
button.skeleton-loading {
    background: linear-gradient(90deg, var(--border) 25%, var(--bg-card-hover) 37%, var(--border) 63%) !important;
    background-size: 800px 100% !important;
    animation: shimmer 1.6s ease-in-out infinite !important;
    border-radius: 6px !important;
    min-height: 12px;
    min-width: 30px;
}

/* Images : cacher le contenu src, garder le shimmer */
.skeleton-loading img {
    object-fit: none !important;
    object-position: -99999px -99999px !important;
}

/* Placeholders invisibles */
.skeleton-loading input::placeholder,
.skeleton-loading textarea::placeholder {
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
}

/* Divs : fond neutre */
.skeleton-loading div {
    background-color: transparent !important;
    background-image: none !important;
}

/* Pseudo-elements cachés */
.skeleton-loading *::before,
.skeleton-loading *::after {
    display: none !important;
}

/* Transition */
.skeleton-loading {
    transition: opacity 0.3s ease;
}

.skeleton-loaded {
    transition: opacity 0.4s ease;
}

/* ========================================
   FILES PAGE — Toolbar, Search, Filters
======================================== */

.files-toolbar {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    align-items: center;
    flex-wrap: wrap;
}

.files-search {
    flex: 1;
    min-width: 200px;
    position: relative;
}

.files-search i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: var(--text-muted);
}

.files-search input {
    width: 100%;
    padding: 10px 14px 10px 42px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-family: var(--font);
    font-size: 14px;
    transition: border-color 0.15s ease;
}

.files-search input:focus {
    outline: none;
    border-color: var(--primary);
}

.files-search input::placeholder {
    color: var(--text-muted);
}

.files-filters {
    display: flex;
    gap: 10px;
}

.files-select {
    padding: 10px 14px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-family: var(--font);
    font-size: 13px;
    cursor: pointer;
    transition: border-color 0.15s ease;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b6b6b' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}

.files-select:focus {
    outline: none;
    border-color: var(--primary);
}

.files-info {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 16px;
}

/* Pagination */
.files-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.files-pagination-info {
    font-size: 13px;
    color: var(--text-muted);
}

.files-pagination-btns {
    display: flex;
    gap: 4px;
}

.files-pagination-btns button {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    background: var(--bg-input);
    color: var(--text-muted);
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 14px;
    font-family: var(--font);
    font-weight: 600;
    transition: all 0.15s ease;
}

.files-pagination-btns button.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

.files-pagination-btns button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.files-pagination-btns button:not(:disabled):hover {
    background: var(--bg-card-hover);
    border-color: var(--border-hover);
    color: var(--text);
}

/* ========================================
   PAGE INFO BANNERS
======================================== */

.page-info-banner {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    border-radius: var(--radius-lg);
    margin-bottom: 24px;
}

.page-info-banner h4 {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 2px;
}

.page-info-banner p {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
}

.page-info-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.page-info-count {
    margin-left: auto;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    padding: 6px 14px;
    border-radius: 20px;
}

.page-info-success {
    background: var(--success-light);
    border: 1px solid rgba(25, 135, 84, 0.2);
}

.page-info-success .page-info-icon {
    background: rgba(25, 135, 84, 0.15);
    color: var(--success);
}

.page-info-success .page-info-count {
    background: rgba(25, 135, 84, 0.15);
    color: var(--success);
}

.page-info-warning {
    background: var(--warning-light);
    border: 1px solid rgba(253, 126, 20, 0.2);
}

.page-info-warning .page-info-icon {
    background: rgba(253, 126, 20, 0.15);
    color: var(--warning);
}

.page-info-warning .page-info-count {
    background: rgba(253, 126, 20, 0.15);
    color: var(--warning);
}

/* Upgrade hint */
.page-upgrade-hint {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    margin-top: 24px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 13px;
    color: var(--text-muted);
}

.page-upgrade-hint i {
    font-size: 18px;
    color: var(--warning);
}

.page-upgrade-hint a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
}

.page-upgrade-hint a:hover {
    text-decoration: underline;
}

/* Empty state */
.empty-state {
    text-align: center;
    padding: 60px 20px;
}

.empty-state-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 32px;
    color: var(--text-muted);
}

.empty-state h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 8px;
}

.empty-state p {
    color: var(--text-muted);
    font-size: 14px;
}

/* ========================================
   TEMPORAIRES PAGE — Alert & Progress
======================================== */

.temp-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    background: var(--danger-light);
    border: 1px solid rgba(220, 53, 69, 0.2);
    border-radius: var(--radius);
    margin-bottom: 20px;
    font-size: 13px;
    color: var(--danger);
}

.temp-alert i {
    font-size: 18px;
}

.v1-row-warning td {
    background: rgba(253, 126, 20, 0.04) !important;
}

.timer-progress {
    height: 4px;
    width: 100%;
    background: var(--border);
    border-radius: 2px;
    margin-top: 6px;
    max-width: 120px;
}

.timer-progress-bar {
    height: 100%;
    border-radius: 2px;
    background: var(--primary);
    transition: width 0.3s ease;
}

.timer-progress-bar.timer-critical {
    background: var(--danger);
}

/* ========================================
   SETTINGS PAGE
======================================== */

.settings-section {
    margin-bottom: 36px;
}

.settings-title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.settings-title i {
    color: var(--primary);
    font-size: 20px;
}

.settings-title-danger i {
    color: var(--danger);
}

.settings-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px;
}

.settings-card-danger {
    border-color: rgba(220, 53, 69, 0.3);
}

.settings-divider {
    height: 1px;
    background: var(--border);
    margin: 20px 0;
}

/* Profile */
.settings-profile-row {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 24px;
}

.settings-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
}

.settings-profile-info h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 2px;
}

.settings-profile-info p {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 10px;
}

.settings-btn-secondary {
    padding: 8px 16px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 500;
    font-family: var(--font);
    cursor: pointer;
    transition: all 0.15s ease;
}

.settings-btn-secondary:hover {
    background: var(--bg-card-hover);
    border-color: var(--border-hover);
}

/* Fields */
.settings-field {
    margin-bottom: 16px;
}

.settings-field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--text-muted);
}

.settings-input {
    width: 100%;
    max-width: 400px;
    padding: 10px 14px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-family: var(--font);
    font-size: 14px;
}

.settings-input:focus {
    outline: none;
    border-color: var(--primary);
}

.settings-input[readonly] {
    opacity: 0.7;
    cursor: not-allowed;
}

.settings-field-hint {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
}

/* Toggle rows */
.settings-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.settings-toggle-row h4 {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 2px;
}

.settings-toggle-row p {
    font-size: 12px;
    color: var(--text-muted);
    margin: 0;
}

/* Toggle switch */
.settings-switch {
    position: relative;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.settings-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.settings-switch-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: var(--border);
    border-radius: 12px;
    transition: all 0.2s ease;
}

.settings-switch-slider::before {
    content: '';
    position: absolute;
    left: 3px;
    top: 3px;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s ease;
}

.settings-switch input:checked + .settings-switch-slider {
    background: var(--primary);
}

.settings-switch input:checked + .settings-switch-slider::before {
    transform: translateX(20px);
}

/* Toggle button group (upload prefs) */
.settings-toggle-group {
    display: flex;
    gap: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    flex-shrink: 0;
}

.settings-toggle-btn {
    padding: 8px 16px;
    background: var(--bg-input);
    border: none;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 500;
    font-family: var(--font);
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.settings-toggle-btn + .settings-toggle-btn {
    border-left: 1px solid var(--border);
}

.settings-toggle-btn.active {
    background: var(--primary);
    color: #fff;
}

.settings-toggle-btn:hover:not(.active) {
    background: var(--bg-card-hover);
}

.settings-toggle-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* Plan */
.settings-plan-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.settings-plan-badge {
    display: inline-block;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 700;
    border-radius: 20px;
    background: var(--primary-light);
    color: var(--primary);
    margin-bottom: 8px;
}

.settings-plan-info h4 {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 4px;
}

.settings-plan-info p {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
}

/* Usage bars */
.settings-usage {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.settings-usage-item {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 13px;
}

.settings-usage-item span {
    width: 90px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.settings-usage-bar {
    flex: 1;
    height: 6px;
    background: var(--border);
    border-radius: 3px;
    overflow: hidden;
}

.settings-usage-fill {
    height: 100%;
    background: var(--primary);
    border-radius: 3px;
}

.settings-usage-fill-success {
    background: var(--warning);
}

.settings-usage-item strong {
    flex-shrink: 0;
    font-size: 12px;
}

/* Connections */
.settings-connection-row {
    display: flex;
    align-items: center;
    gap: 14px;
}

.settings-connection-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.settings-connection-row h4 {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 2px;
}

.settings-connection-row p {
    font-size: 12px;
    color: var(--text-muted);
    margin: 0;
}

.settings-connection-status {
    margin-left: auto;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 20px;
}

.settings-connection-status.connected {
    background: var(--success-light);
    color: var(--success);
}

.settings-connection-row .settings-btn-secondary {
    margin-left: auto;
}

/* Danger zone */
.settings-danger-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.settings-danger-row h4 {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 2px;
}

.settings-danger-row p {
    font-size: 12px;
    color: var(--text-muted);
    margin: 0;
}

.settings-btn-danger {
    padding: 8px 18px;
    background: var(--danger-light);
    border: 1px solid rgba(220, 53, 69, 0.3);
    color: var(--danger);
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font);
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.settings-btn-danger:hover {
    background: var(--danger);
    color: #fff;
    border-color: var(--danger);
}

/* ========================================
   BUSINESS MEMBERS MANAGEMENT
======================================== */
.bm-invite-row {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.bm-invite-row .settings-input {
    flex: 1;
    min-width: 180px;
}
.bm-invite-row select.settings-input {
    flex: 0 0 auto;
    width: auto;
    min-width: 120px;
}
.bm-roles-info {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
}
.bm-role-chip {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 8px 12px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 12px;
    flex: 1;
    min-width: 140px;
}
.bm-role-chip i {
    font-size: 16px;
    margin-top: 1px;
    flex-shrink: 0;
}
.bm-role-chip strong {
    display: block;
    margin-bottom: 2px;
}
.bm-role-chip span {
    color: var(--text-muted);
    line-height: 1.3;
}
.bm-member-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
}
.bm-member-row:last-child {
    border-bottom: none;
}
.bm-member-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
}
.bm-member-info {
    flex: 1;
    min-width: 0;
}
.bm-member-info strong {
    display: block;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bm-member-info span {
    font-size: 11px;
    color: var(--text-muted);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bm-status {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 20px;
    white-space: nowrap;
}
.bm-status-pending {
    background: var(--warning-light);
    color: var(--warning);
}
.bm-status-active {
    background: var(--success-light);
    color: var(--success);
}
.bm-role-select {
    width: auto !important;
    min-width: 100px;
    padding: 4px 8px !important;
    font-size: 12px !important;
}
.bm-role-label {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
}
.bm-remove-btn {
    padding: 6px 8px !important;
    font-size: 14px !important;
}
.bm-invitation-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}
.bm-invitation-row:last-child {
    border-bottom: none;
}
.bm-invitation-info {
    flex: 1;
    font-size: 13px;
}
.bm-invitation-actions {
    display: flex;
    gap: 6px;
}

/* ========================================
   PRO / PRICING PAGE
======================================== */

.pro-hero {
    background: linear-gradient(135deg, rgba(13, 110, 253, 0.12) 0%, rgba(111, 66, 193, 0.08) 100%);
    border: 1px solid rgba(13, 110, 253, 0.2);
    border-radius: var(--radius-lg);
    padding: 40px 32px;
    text-align: center;
    margin-bottom: 36px;
}

.pro-hero h2 {
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 8px;
}

.pro-hero h2 i {
    color: var(--primary);
}

.pro-hero p {
    font-size: 15px;
    color: var(--text-muted);
    margin: 0;
}

/* Billing toggle */
.pro-billing-toggle {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-bottom: 32px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 30px;
    padding: 4px;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.pro-billing-btn {
    padding: 10px 24px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 600;
    font-family: var(--font);
    border-radius: 26px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.pro-billing-btn.active {
    background: var(--primary);
    color: #fff;
}

.pro-billing-badge {
    background: var(--success);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 12px;
}

.price-yearly-detail {
    font-size: 12px;
    color: var(--success);
    font-weight: 500;
    margin: 2px 0 0;
}

.pro-plans {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 48px;
}

.pro-plan-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 32px 24px;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: all 0.2s ease;
}

.pro-plan-card:hover {
    border-color: var(--border-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

.pro-plan-featured {
    border-color: var(--primary);
    box-shadow: 0 0 40px rgba(13, 110, 253, 0.1);
}

.pro-plan-featured:hover {
    border-color: var(--primary);
}

.pro-plan-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 16px;
    background: var(--primary);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    border-radius: 20px;
}

.pro-plan-header {
    text-align: center;
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border);
}

.pro-plan-header h3 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 8px;
}

.pro-plan-price {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 4px;
}

.pro-plan-price .price-period {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-muted);
}

.pro-plan-header p {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
}

.pro-plan-features {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pro-plan-features li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}

.pro-plan-features li i {
    font-size: 18px;
    flex-shrink: 0;
}

.pro-plan-features li .ti-check {
    color: var(--success);
}

.pro-plan-features li .ti-x {
    color: var(--text-muted);
}

.pro-plan-disabled {
    color: var(--text-muted);
}

.pro-plan-footer {
    text-align: center;
}

.pro-plan-current {
    display: inline-block;
    padding: 10px 24px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 14px;
    font-weight: 600;
    color: var(--text-muted);
}

.pro-plan-btn {
    display: inline-block;
    width: 100%;
    padding: 12px 24px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    font-size: 15px;
    font-weight: 700;
    font-family: var(--font);
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.pro-plan-btn:hover {
    background: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(13, 110, 253, 0.3);
}

.pro-plan-btn-outline {
    background: transparent;
    border: 2px solid var(--border);
    color: var(--text);
}

.pro-plan-btn-outline:hover {
    background: var(--bg-card-hover);
    border-color: var(--border-hover);
    box-shadow: none;
    color: var(--text);
}

/* FAQ */
.pro-faq {
    margin-bottom: 20px;
}

.pro-faq-title {
    font-size: 20px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 24px;
}

.pro-faq-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.pro-faq-item {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px;
}

.pro-faq-item h4 {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.pro-faq-item h4 i {
    color: var(--primary);
    font-size: 18px;
}

.pro-faq-item p {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.6;
}

/* Section titles */
.pro-section-title {
    font-size: 20px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 24px;
}

/* Comparison table */
.pro-comparison {
    margin-bottom: 48px;
}

.pro-comparison-table-wrapper {
    overflow-x: auto;
}

.pro-comparison-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.pro-comparison-table th,
.pro-comparison-table td {
    padding: 12px 16px;
    text-align: center;
    border-bottom: 1px solid var(--border);
}

.pro-comparison-table th:first-child,
.pro-comparison-table td:first-child {
    text-align: left;
    font-weight: 500;
}

.pro-comparison-table th {
    background: var(--bg-card);
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--text-muted);
}

.pro-col-highlight {
    background: rgba(13, 110, 253, 0.05);
}

.pro-comparison-table th.pro-col-highlight {
    color: var(--primary);
    background: rgba(13, 110, 253, 0.1);
}

/* Advantages */
.pro-advantages {
    margin-bottom: 48px;
}

.pro-advantages-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.pro-advantage-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px;
    text-align: center;
    transition: all 0.2s;
}

.pro-advantage-card:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
}

.pro-advantage-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--primary-light);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin: 0 auto 14px;
}

.pro-advantage-card h4 {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 6px;
}

.pro-advantage-card p {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.5;
}

/* Testimonials */
.pro-testimonials {
    margin-bottom: 48px;
}

.pro-testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.pro-testimonial-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px;
}

.pro-testimonial-stars {
    color: #f59e0b;
    font-size: 14px;
    display: flex;
    gap: 2px;
    margin-bottom: 12px;
}

.pro-testimonial-card > p {
    font-size: 14px;
    color: var(--text);
    line-height: 1.6;
    margin-bottom: 16px;
    font-style: italic;
}

.pro-testimonial-author {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pro-testimonial-author img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
}

.pro-testimonial-author strong {
    font-size: 13px;
    display: block;
}

.pro-testimonial-author span {
    font-size: 11px;
    color: var(--text-muted);
}

/* CTA Bottom */
.pro-cta-bottom {
    text-align: center;
    padding: 48px 24px;
    background: linear-gradient(135deg, rgba(13, 110, 253, 0.12) 0%, rgba(111, 66, 193, 0.08) 100%);
    border: 1px solid rgba(13, 110, 253, 0.2);
    border-radius: var(--radius-lg);
    margin-bottom: 20px;
}

.pro-cta-bottom h2 {
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 8px;
}

.pro-cta-bottom p {
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 20px;
}

/* Responsive pro page */
@media (max-width: 768px) {
    .pro-comparison {
        display: none;
    }

    .pro-advantages-grid,
    .pro-testimonials-grid {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   SITE FOOTER
======================================== */

.site-footer {
    margin-top: auto;
    width: 100%;
}

.site-footer-top {
    padding: 48px 0 32px;
}

.site-footer > .container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 24px;
}

.site-footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 40px;
}

/* Brand col */
.site-footer-brand-col p {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.7;
    margin: 14px 0 20px;
}

.site-footer-logo {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    text-decoration: none;
    color: var(--text);
    font-size: 20px;
    font-weight: 700;
}

.site-footer-logo i {
    font-size: 24px;
    color: var(--primary);
}

.site-footer-socials {
    display: flex;
    gap: 8px;
}

.site-footer-socials a {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text-muted);
    text-decoration: none;
    font-size: 18px;
    transition: all 0.15s ease;
}

.site-footer-socials a:hover {
    background: var(--bg-card-hover);
    color: var(--text);
    border-color: var(--border-hover);
}

/* Link columns */
.site-footer-col h4 {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 16px;
    color: var(--text);
}

.site-footer-col a {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-muted);
    text-decoration: none;
    padding: 5px 0;
    transition: color 0.15s ease;
}

.site-footer-col a:hover {
    color: var(--text);
}

.footer-status-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 6px rgba(25, 135, 84, 0.5);
}

/* Bottom bar */
.site-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0;
    font-size: 12px;
    color: var(--text-muted);
}

.site-footer-badges {
    display: flex;
    gap: 8px;
}

.site-footer-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 20px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
}

.site-footer-badge i {
    font-size: 13px;
    color: var(--primary);
}

/* ========================================
   CHECKOUT PAGE
======================================== */

.checkout-page {
    display: flex;
    flex-direction: column;
}

.checkout-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    flex: 1;
    max-width: 1100px;
    margin: 0 auto;
    padding: 60px 40px;
    gap: 60px;
    width: 100%;
}

.checkout-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 13px;
    margin-bottom: 32px;
    transition: color 0.15s;
}

.checkout-back:hover {
    color: var(--text);
}

.checkout-brand {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 32px;
}

.checkout-brand i {
    font-size: 28px;
    color: var(--primary);
}

.checkout-brand span {
    font-size: 22px;
    font-weight: 700;
}

.checkout-title {
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 8px;
}

.checkout-plan-name {
    color: var(--primary);
}

.checkout-subtitle {
    color: var(--text-muted);
    font-size: 15px;
    margin-bottom: 32px;
    line-height: 1.5;
}

.checkout-plan-recap {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px;
    margin-bottom: 28px;
}

.checkout-plan-price {
    margin-bottom: 6px;
}

.checkout-price-amount {
    font-size: 36px;
    font-weight: 800;
}

.checkout-price-period {
    font-size: 16px;
    color: var(--text-muted);
}

.checkout-plan-billing {
    font-size: 13px;
    color: var(--text-muted);
}

.checkout-features h3 {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 14px;
}

.checkout-features ul {
    list-style: none;
    padding: 0;
    margin: 0 0 28px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.checkout-features li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.checkout-features li i {
    color: var(--success);
    font-size: 18px;
}

.checkout-secure {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.5;
}

.checkout-secure i {
    font-size: 20px;
    color: var(--success);
    flex-shrink: 0;
    margin-top: 1px;
}

/* Checkout form */
.checkout-form-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 36px 32px;
}

.checkout-form-card h2 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 24px;
}

.checkout-billing-toggle {
    display: flex;
    gap: 4px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 4px;
    margin-bottom: 28px;
}

.checkout-billing-btn {
    flex: 1;
    padding: 10px;
    border: none;
    background: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.checkout-billing-btn.active {
    background: var(--bg-card);
    color: var(--text);
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}

.checkout-billing-save {
    font-size: 11px;
    padding: 2px 6px;
    background: var(--success-light);
    color: var(--success);
    border-radius: 4px;
    font-weight: 700;
}

.checkout-field {
    margin-bottom: 18px;
}

.checkout-field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--text-muted);
}

.checkout-input-icon {
    position: relative;
}

.checkout-input-icon i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: var(--text-muted);
}

.checkout-input-icon input {
    width: 100%;
    padding: 12px 14px 12px 42px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-family: var(--font);
    font-size: 14px;
    transition: border-color 0.15s ease;
}

.checkout-input-icon input:focus {
    outline: none;
    border-color: var(--primary);
}

.checkout-input-icon input::placeholder {
    color: var(--text-muted);
}

.checkout-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.checkout-total {
    margin: 24px 0;
    padding: 20px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.checkout-total-row {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    margin-bottom: 8px;
}

.checkout-total-tax {
    color: var(--text-muted);
    font-size: 13px;
}

.checkout-total-divider {
    height: 1px;
    background: var(--border);
    margin: 12px 0;
}

.checkout-total-final {
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 0;
}

.checkout-submit-btn {
    width: 100%;
    padding: 14px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    font-size: 16px;
    font-weight: 700;
    font-family: var(--font);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.checkout-submit-btn:hover {
    background: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 20px rgba(13, 110, 253, 0.3);
}

.checkout-legal {
    font-size: 11px;
    color: var(--text-muted);
    text-align: center;
    margin-top: 16px;
    line-height: 1.6;
}

.checkout-legal a {
    color: var(--primary);
    text-decoration: none;
}

.checkout-legal a:hover {
    text-decoration: underline;
}

/* --- Checkout: Promo code --- */
.checkout-promo-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}
.checkout-promo-btn {
    padding: 0 18px;
    border: 1px solid var(--v1-border);
    background: var(--v1-bg-card);
    color: var(--text);
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.checkout-promo-btn:hover {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}
.checkout-promo-feedback {
    margin-top: 8px;
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 8px;
}
.checkout-promo-success {
    color: #22c55e;
    background: rgba(34, 197, 94, 0.1);
}
.checkout-promo-error {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}
.checkout-total-discount {
    color: #22c55e;
}

/* ========================================
   PAYMENT RESULT PAGES (success + error)
======================================== */

.payment-result-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

.payment-result-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 48px 40px;
    width: 100%;
    max-width: 520px;
    text-align: center;
    box-shadow: var(--shadow);
}

.payment-result-icon {
    margin-bottom: 24px;
}

.payment-icon-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
}

.payment-icon-success {
    background: rgba(13, 110, 253, 0.12);
    color: var(--primary);
    animation: successPop 0.5s ease;
}

.payment-icon-error {
    background: var(--danger-light);
    color: var(--danger);
    animation: errorShake 0.5s ease;
}

@keyframes successPop {
    0% { transform: scale(0); opacity: 0; }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes errorShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-8px); }
    40% { transform: translateX(8px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

.payment-result-title {
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 8px;
}

.payment-result-subtitle {
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 28px;
}

/* Error specific */
.payment-error-details {
    margin-bottom: 24px;
}

.payment-error-code {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    text-align: left;
    padding: 16px;
    background: var(--danger-light);
    border: 1px solid rgba(220, 53, 69, 0.2);
    border-radius: var(--radius);
}

.payment-error-code > i {
    font-size: 22px;
    color: var(--danger);
    flex-shrink: 0;
    margin-top: 2px;
}

.payment-error-code strong {
    display: block;
    font-size: 14px;
    margin-bottom: 4px;
    color: var(--danger);
}

.payment-error-code span {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.5;
}

.payment-error-tips {
    text-align: left;
    margin-bottom: 28px;
    padding: 20px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.payment-error-tips h3 {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.payment-error-tips h3 i {
    color: var(--warning);
}

.payment-error-tips ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.payment-error-tips li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-muted);
}

.payment-error-tips li i {
    color: var(--success);
    font-size: 16px;
}

/* Success specific */
.payment-success-recap {
    text-align: left;
    padding: 20px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 24px;
}

.payment-recap-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    padding: 8px 0;
}

.payment-recap-row span {
    color: var(--text-muted);
}

.payment-recap-divider {
    height: 1px;
    background: var(--border);
}

.payment-success-unlocked {
    text-align: left;
    margin-bottom: 28px;
}

.payment-success-unlocked h3 {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.payment-success-unlocked h3 i {
    color: var(--warning);
}

.payment-unlocked-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.payment-unlocked-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 13px;
}

.payment-unlocked-item i {
    font-size: 20px;
    color: var(--primary);
}

/* Shared buttons */
.payment-result-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.payment-btn-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 24px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    font-size: 15px;
    font-weight: 700;
    font-family: var(--font);
    text-decoration: none;
    transition: all 0.2s ease;
}

.payment-btn-primary:hover {
    background: var(--primary-hover);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(13, 110, 253, 0.3);
}

.payment-btn-success {
    background: var(--primary);
}

.payment-btn-success:hover {
    background: var(--primary-hover);
    box-shadow: 0 4px 16px rgba(13, 110, 253, 0.3);
}

.payment-btn-secondary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: var(--radius);
    font-size: 14px;
    font-weight: 600;
    font-family: var(--font);
    text-decoration: none;
    transition: all 0.15s ease;
}

.payment-btn-secondary:hover {
    background: var(--bg-card-hover);
    border-color: var(--border-hover);
    color: var(--text);
}

.payment-result-help {
    font-size: 12px;
    color: var(--text-muted);
    margin: 0;
}

.payment-result-help a {
    color: var(--primary);
    text-decoration: none;
}

.payment-result-help a:hover {
    text-decoration: underline;
}

/* ========================================
   RESPONSIVE
======================================== */

@media (max-width: 992px) {
    /* Login split → stack vertically */
    .login-split {
        flex-direction: column;
    }

    .login-left {
        padding: 40px 30px;
        min-height: auto;
    }

    .login-left-title {
        font-size: 26px;
        margin-bottom: 32px;
    }

    .login-left-features {
        display: none;
    }

    .login-right {
        padding: 40px 24px;
    }

    .v1-sidebar {
        transform: translateX(-100%);
    }

    .v1-sidebar.open {
        transform: translateX(0);
    }

    .v1-mobile-header {
        display: flex;
    }

    .v1-main {
        margin-left: 0;
        padding: 72px 20px 20px;
    }

    .v1-topbar {
        display: none;
    }

    .v1-stats-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .v1-cta-banner {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }

    .pro-plans {
        grid-template-columns: 1fr;
        max-width: 420px;
        margin-left: auto;
        margin-right: auto;
    }

    .pro-faq-grid {
        grid-template-columns: 1fr;
    }

    .settings-plan-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .settings-danger-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .page-info-banner {
        flex-wrap: wrap;
    }

    .page-info-count {
        margin-left: 0;
    }

    /* Checkout responsive */
    .checkout-container {
        grid-template-columns: 1fr;
        padding: 40px 20px;
        gap: 40px;
    }

    .checkout-summary {
        order: 1;
    }

    .checkout-form-wrapper {
        order: 0;
    }

    /* Footer responsive */
    .site-footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 28px;
    }

    .site-footer-brand-col {
        grid-column: span 2;
    }
}

@media (max-width: 768px) {
    .login-card {
        padding: 36px 24px 28px;
        max-width: 100%;
    }

    .login-glow {
        width: 300px;
        height: 300px;
    }

    .login-glow-2 {
        display: none;
    }

    .v1-files-table thead {
        display: none;
    }

    .v1-files-table tbody tr {
        display: flex;
        flex-direction: column;
        align-items: center;
        background: var(--bg-card);
        border-radius: var(--radius);
        padding: 14px;
        margin-bottom: 8px;
    }

    .v1-files-table tbody tr td {
        padding: 0;
        background: none;
        border-radius: 0;
    }

    .v1-files-table tbody tr td:first-child {
        border-radius: 0;
        margin-bottom: 10px;
    }

    .v1-files-table tbody tr td:last-child {
        border-radius: 0;
    }

    /* Masquer toutes les colonnes sauf nom (1ère) et actions (dernière) */
    .v1-files-table td:not(:first-child):not(:last-child) {
        display: none;
    }

    .v1-table-actions {
        justify-content: center;
        gap: 8px;
    }

    .v1-table-actions button {
        width: 36px;
        height: 36px;
        background: var(--bg-input);
        border-radius: 8px;
    }

    .files-toolbar {
        flex-direction: column;
    }

    .files-filters {
        width: 100%;
    }

    .files-select {
        flex: 1;
    }

    .files-pagination {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }

    .pro-hero {
        padding: 28px 20px;
    }

    .pro-hero h2 {
        font-size: 20px;
    }

    .settings-profile-row {
        flex-direction: column;
        text-align: center;
    }

    .settings-toggle-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .settings-connection-row {
        flex-wrap: wrap;
    }

    /* Checkout mobile */
    .checkout-form-card {
        padding: 28px 20px;
    }

    .checkout-title {
        font-size: 22px;
    }

    /* Payment result mobile */
    .payment-result-card {
        padding: 36px 24px;
    }

    .payment-unlocked-grid {
        grid-template-columns: 1fr;
    }

    /* Footer mobile */
    .site-footer-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .site-footer-brand-col {
        grid-column: span 1;
    }

    .site-footer-bottom {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }

    .site-footer-badges {
        justify-content: center;
    }
}

@media (max-width: 576px) {
    .login-left {
        padding: 30px 20px;
    }

    .login-left-title {
        font-size: 22px;
        margin-bottom: 0;
    }

    .login-left-logo i { font-size: 22px; }
    .login-left-logo span { font-size: 18px; }

    .login-right {
        padding: 32px 20px;
    }

    .login-heading {
        font-size: 22px;
    }

    .login-btn {
        padding: 12px 16px;
        font-size: 14px;
    }

    .v1-stats-row {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .v1-stat {
        padding: 14px;
    }

    .v1-stat-value {
        font-size: 20px;
    }

    .v1-upload-compact {
        flex-direction: column;
        text-align: center;
    }

    .v1-upload-text {
        text-align: center;
    }

    .v1-files-table {
        font-size: 12px;
    }

    .v1-files-table tbody tr {
        padding: 12px;
    }

    .v1-main {
        padding: 68px 12px 12px;
    }

    .settings-card {
        padding: 16px;
    }

    .settings-input {
        max-width: 100%;
    }
}

/* ========================================
   COOKIE BANNER
======================================== */

.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    padding: 16px;
    animation: cookieSlideUp 0.4s ease;
}

@keyframes cookieSlideUp {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes cookieSlideDown {
    from { transform: translateY(0); opacity: 1; }
    to { transform: translateY(100%); opacity: 0; }
}

.cookie-banner-inner {
    max-width: 1140px;
    margin: 0 auto;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.3);
}

.cookie-banner-content {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    flex: 1;
}

.cookie-banner-icon {
    font-size: 28px;
    color: var(--warning);
    line-height: 1;
    flex-shrink: 0;
    margin-top: 2px;
}

.cookie-banner-text p {
    margin: 0;
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.5;
}

.cookie-banner-text p:first-child {
    font-size: 14px;
    color: var(--text);
    margin-bottom: 4px;
}

.cookie-banner-text a {
    color: var(--primary);
    text-decoration: none;
}

.cookie-banner-text a:hover {
    text-decoration: underline;
}

.cookie-banner-actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.cookie-btn {
    padding: 8px 20px;
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    font-family: var(--font);
}

.cookie-btn-primary {
    background: var(--primary);
    color: #fff;
}

.cookie-btn-primary:hover {
    background: var(--primary-hover);
}

.cookie-btn-outline {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border);
}

.cookie-btn-outline:hover {
    border-color: var(--border-hover);
    color: var(--text);
}

/* Cookie banner responsive */
@media (max-width: 768px) {
    .cookie-banner-inner {
        flex-direction: column;
        align-items: stretch;
        padding: 16px;
    }

    .cookie-banner-content {
        flex-direction: column;
        gap: 8px;
    }

    .cookie-banner-actions {
        justify-content: stretch;
    }

    .cookie-btn {
        flex: 1;
        text-align: center;
    }
}

/* ========================================
   LEGAL PAGES (CGU, Privacy)
======================================== */

.legal-page {
    min-height: 100vh;
    background: var(--bg);
    display: flex;
    flex-direction: column;
}

.legal-page > .container {
    flex: 1;
    max-width: 1140px;
    padding-top: 40px;
    padding-bottom: 60px;
}

.legal-header {
    margin-bottom: 40px;
}

/* Top Navigation Bar (retour + logo) */
.page-topnav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--border);
}

.page-topnav-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
    text-decoration: none;
}

.page-topnav-logo .upfile-icon {
    width: 24px;
    height: 24px;
    color: var(--primary);
}

.legal-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 13px;
    transition: color 0.2s;
}

.legal-back:hover {
    color: var(--primary);
}

.legal-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 22px;
    font-weight: 700;
    color: var(--text);
    text-decoration: none;
    margin-bottom: 8px;
}

.legal-logo i {
    color: var(--primary);
    font-size: 26px;
}

.legal-update {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
}

.legal-content h1 {
    font-size: 32px;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 32px;
}

.legal-content section {
    margin-bottom: 32px;
}

.legal-content h2 {
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

.legal-content h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
    margin-top: 16px;
    margin-bottom: 8px;
}

.legal-content p {
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.7;
    margin-bottom: 12px;
}

.legal-content ul {
    padding-left: 20px;
    margin-bottom: 12px;
}

.legal-content li {
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.7;
    margin-bottom: 4px;
}

.legal-content a {
    color: var(--primary);
    text-decoration: none;
}

.legal-content a:hover {
    text-decoration: underline;
}

.legal-content code {
    background: var(--primary-light);
    color: var(--primary);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 13px;
}

.legal-content strong {
    color: var(--text);
}

/* Legal table */
.legal-table-wrapper {
    overflow-x: auto;
    margin: 16px 0;
}

.legal-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.legal-table th,
.legal-table td {
    padding: 10px 16px;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

.legal-table th {
    color: var(--text);
    font-weight: 600;
    background: var(--bg-card);
}

.legal-table td {
    color: var(--text-muted);
}

/* Legal info box */
.legal-info-box {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 20px;
    margin: 12px 0;
}

.legal-info-box p {
    margin-bottom: 4px;
}

.legal-info-box p:last-child {
    margin-bottom: 0;
}

/* Rights grid (privacy page) */
.legal-rights-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin: 16px 0;
}

.legal-right {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
}

.legal-right i {
    font-size: 20px;
    color: var(--primary);
    flex-shrink: 0;
    margin-top: 2px;
}

.legal-right strong {
    display: block;
    font-size: 13px;
    margin-bottom: 2px;
}

.legal-right p {
    font-size: 12px;
    margin: 0;
}

/* Legal pages responsive */
@media (max-width: 768px) {
    .legal-page > .container {
        padding-top: 24px;
        padding-bottom: 40px;
    }

    .legal-content h1 {
        font-size: 24px;
    }

    .legal-content h2 {
        font-size: 18px;
    }

    .legal-rights-grid {
        grid-template-columns: 1fr;
    }
}


/* ========================================
   HELP / CENTRE D'AIDE
======================================== */

.help-header {
    margin-bottom: 40px;
}

.help-header h1 {
    font-size: 32px;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 8px;
}

.help-header p {
    font-size: 15px;
    color: var(--text-muted);
    margin: 0;
}

/* Search */
.help-search {
    position: relative;
    margin-bottom: 40px;
}

.help-search i {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 18px;
}

.help-search input {
    width: 100%;
    padding: 14px 16px 14px 48px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    color: var(--text);
    font-size: 15px;
    font-family: var(--font);
    outline: none;
    transition: border-color 0.2s;
}

.help-search input:focus {
    border-color: var(--primary);
}

.help-search input::placeholder {
    color: var(--text-muted);
}

/* Category Cards */
.help-categories {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 48px;
}

.help-category-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px;
    text-decoration: none;
    transition: border-color 0.2s, background 0.2s;
}

.help-category-card:hover {
    border-color: var(--primary);
    background: var(--bg-card-hover);
}

.help-category-card i {
    font-size: 28px;
    color: var(--primary);
    margin-bottom: 12px;
    display: block;
}

.help-category-card h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 6px;
}

.help-category-card p {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.5;
}

/* FAQ Sections */
.help-faq-section {
    margin-bottom: 40px;
}

.help-faq-section h2 {
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}

.help-faq-section h2 i {
    color: var(--primary);
    font-size: 22px;
}

.help-faq-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.help-faq-item {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color 0.2s;
}

.help-faq-item[open] {
    border-color: var(--primary);
}

.help-faq-item summary {
    padding: 16px 20px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background 0.2s;
}

.help-faq-item summary:hover {
    background: var(--bg-card-hover);
}

.help-faq-item summary::-webkit-details-marker {
    display: none;
}

.help-faq-item summary::after {
    content: '\ea5f';
    font-family: 'tabler-icons';
    font-size: 18px;
    color: var(--text-muted);
    transition: transform 0.2s;
}

.help-faq-item[open] summary::after {
    transform: rotate(180deg);
}

.help-faq-answer {
    padding: 0 20px 16px;
}

.help-faq-answer p {
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.7;
    margin: 0;
}

.help-faq-answer a {
    color: var(--primary);
    text-decoration: none;
}

.help-faq-answer a:hover {
    text-decoration: underline;
}

/* Contact CTA */
.help-contact-cta {
    display: flex;
    align-items: center;
    gap: 20px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px 28px;
    margin-top: 48px;
}

.help-contact-cta > i {
    font-size: 32px;
    color: var(--primary);
    flex-shrink: 0;
}

.help-contact-cta div {
    flex: 1;
}

.help-contact-cta h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 4px;
}

.help-contact-cta p {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
}

.help-contact-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--primary);
    color: #fff;
    border-radius: var(--radius);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    transition: background 0.2s;
}

.help-contact-btn:hover {
    background: var(--primary-hover);
    color: #fff;
}

/* Help responsive */
@media (max-width: 768px) {
    .help-categories {
        grid-template-columns: 1fr;
    }

    .help-contact-cta {
        flex-direction: column;
        text-align: center;
    }
}


/* ========================================
   DOCUMENTATION PAGE
======================================== */

.docs-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 48px;
}

.docs-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 28px;
    text-decoration: none;
    transition: border-color 0.2s, background 0.2s;
    display: flex;
    flex-direction: column;
}

.docs-card:hover {
    border-color: var(--primary);
    background: var(--bg-card-hover);
}

.docs-card-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius);
    background: var(--primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.docs-card-icon i {
    font-size: 22px;
    color: var(--primary);
}

.docs-card h3 {
    font-size: 17px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 8px;
}

.docs-card p {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 16px;
    flex: 1;
}

.docs-card-link {
    font-size: 13px;
    font-weight: 600;
    color: var(--primary);
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Specs table */
.docs-specs {
    margin-bottom: 48px;
}

.docs-specs h2 {
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}

.docs-spec-table {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.docs-spec-row {
    display: flex;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
}

.docs-spec-row:last-child {
    border-bottom: none;
}

.docs-spec-label {
    width: 240px;
    flex-shrink: 0;
    padding: 14px 20px;
    font-weight: 600;
    color: var(--text);
    background: rgba(255, 255, 255, 0.02);
}

.docs-spec-value {
    flex: 1;
    padding: 14px 20px;
    color: var(--text-muted);
    line-height: 1.5;
}

/* Links grid */
.docs-links {
    margin-bottom: 48px;
}

.docs-links h2 {
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}

.docs-links-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.docs-link-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 20px;
    text-decoration: none;
    transition: border-color 0.2s, background 0.2s;
}

.docs-link-card:hover {
    border-color: var(--primary);
    background: var(--bg-card-hover);
}

.docs-link-card > i {
    font-size: 24px;
    color: var(--primary);
    flex-shrink: 0;
}

.docs-link-card h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 2px;
}

.docs-link-card p {
    font-size: 12px;
    color: var(--text-muted);
    margin: 0;
}

/* Docs responsive */
@media (max-width: 768px) {
    .docs-grid {
        grid-template-columns: 1fr;
    }

    .docs-links-grid {
        grid-template-columns: 1fr;
    }

    .docs-spec-row {
        flex-direction: column;
    }

    .docs-spec-label {
        width: 100%;
        padding: 10px 16px 4px;
    }

    .docs-spec-value {
        padding: 4px 16px 10px;
    }
}


/* ========================================
   CONTACT PAGE
======================================== */

.contact-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 32px;
    align-items: start;
}

.contact-form-wrapper {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 28px;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contact-field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 6px;
}

.contact-required {
    color: var(--danger);
}

.contact-field-optional {
    color: var(--text-muted);
    font-weight: 400;
    font-size: 12px;
}

.contact-field-hint {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
}

.contact-field input,
.contact-field select,
.contact-field textarea {
    width: 100%;
    padding: 10px 14px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-size: 14px;
    font-family: var(--font);
    outline: none;
    transition: border-color 0.2s;
}

.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
    border-color: var(--primary);
}

.contact-field textarea {
    resize: vertical;
    min-height: 100px;
}

.contact-field select {
    cursor: pointer;
}

.contact-submit-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    font-size: 14px;
    font-weight: 600;
    font-family: var(--font);
    cursor: pointer;
    transition: background 0.2s;
    width: fit-content;
}

.contact-submit-btn:hover {
    background: var(--primary-hover);
}

.contact-submit-btn--danger {
    background: var(--danger);
}

.contact-submit-btn--danger:hover {
    background: #c82333;
}

/* Info cards */
.contact-info-wrapper {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.contact-info-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px;
}

.contact-info-card > i {
    font-size: 22px;
    color: var(--primary);
    flex-shrink: 0;
    margin-top: 2px;
}

.contact-info-card h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 4px;
}

.contact-info-card p {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.5;
}

.contact-info-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
    margin-top: 6px;
}

.contact-info-link:hover {
    text-decoration: underline;
}

/* Contact responsive */
@media (max-width: 768px) {
    .contact-layout {
        grid-template-columns: 1fr;
    }
}


/* ========================================
   ABUSE / SIGNALER UN ABUS
======================================== */

.abuse-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 28px;
    align-items: start;
}

.abuse-info-box {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: rgba(253, 126, 20, 0.06);
    border: 1px solid rgba(253, 126, 20, 0.2);
    border-radius: var(--radius-lg);
    padding: 16px 20px;
    margin-bottom: 20px;
}

.abuse-info-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius);
    background: rgba(253, 126, 20, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.abuse-info-icon i {
    font-size: 18px;
    color: var(--warning);
}

.abuse-info-box strong {
    display: block;
    font-size: 13px;
    color: var(--text);
    margin-bottom: 2px;
}

.abuse-info-box p {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.6;
}

.abuse-info-box a {
    color: var(--primary);
    text-decoration: none;
}

.abuse-info-box a:hover {
    text-decoration: underline;
}

/* Abuse form card */
.abuse-form-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 28px;
}

.abuse-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* Abuse sidebar */
.abuse-sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    top: 24px;
}

.abuse-sidebar-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px;
}

.abuse-sidebar-card h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 20px;
}

.abuse-sidebar-card h3 i {
    font-size: 18px;
    color: var(--primary);
}

.abuse-sidebar-card--muted {
    background: var(--bg-hover);
    border-color: transparent;
    padding: 20px;
}

.abuse-sidebar-card--muted p {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.6;
}

.abuse-sidebar-card--muted a {
    color: var(--primary);
    text-decoration: none;
}

.abuse-sidebar-card--muted a:hover {
    text-decoration: underline;
}

/* Abuse steps */
.abuse-steps {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.abuse-step {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.abuse-step-number {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--primary-light);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}

.abuse-step strong {
    display: block;
    font-size: 13px;
    color: var(--text);
    margin-bottom: 2px;
}

.abuse-step p {
    font-size: 12px;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.5;
}

/* Abuse responsive */
@media (max-width: 900px) {
    .abuse-layout {
        grid-template-columns: 1fr;
    }
    .abuse-sidebar {
        position: static;
    }
}

@media (max-width: 600px) {
    .abuse-form-row {
        grid-template-columns: 1fr;
    }
}


/* ========================================
   API PAGE
======================================== */

.api-page {
    min-height: 100vh;
    padding: 40px 0 80px;
}

.api-page > .container {
    max-width: 1140px;
}

.api-header {
    margin-bottom: 48px;
}

.api-header-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-top: 24px;
}

.api-logo {
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.api-logo .upfile-icon {
    color: var(--primary);
}

.api-badge {
    background: var(--primary);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.api-subtitle {
    color: var(--text-muted);
    margin-top: 8px;
    font-size: 15px;
}

.api-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.api-version-badge {
    background: var(--bg-card);
    border: 1px solid var(--border);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
}

.api-section {
    margin-bottom: 48px;
}

.api-section h2 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.api-code-block {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 20px;
}

.api-code-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: rgba(var(--primary-rgb, 59,130,246), 0.05);
    border-bottom: 1px solid var(--border);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.api-copy-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.2s;
}

.api-copy-btn:hover {
    color: var(--primary);
    background: rgba(var(--primary-rgb, 59,130,246), 0.1);
}

.api-code-block pre {
    margin: 0;
    padding: 16px;
    overflow-x: auto;
}

.api-code-block code {
    font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
    font-size: 13px;
    color: var(--text);
    line-height: 1.6;
}

.api-info-box {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: rgba(var(--primary-rgb, 59,130,246), 0.08);
    border: 1px solid rgba(var(--primary-rgb, 59,130,246), 0.2);
    border-radius: var(--radius);
    margin-top: 16px;
}

.api-info-box > i {
    font-size: 20px;
    color: var(--primary);
    flex-shrink: 0;
    margin-top: 2px;
}

.api-info-box strong {
    display: block;
    font-size: 14px;
    margin-bottom: 4px;
}

.api-info-box p {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
}

/* Endpoints */
.api-endpoint {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 20px;
    overflow: hidden;
}

.api-endpoint-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}

.api-method {
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.api-method-get { background: rgba(16,185,129,0.15); color: #10b981; }
.api-method-post { background: rgba(59,130,246,0.15); color: #3b82f6; }
.api-method-patch { background: rgba(245,158,11,0.15); color: #f59e0b; }
.api-method-delete { background: rgba(239,68,68,0.15); color: #ef4444; }

.api-endpoint-header code {
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}

.api-endpoint-desc {
    color: var(--text-muted);
    font-size: 13px;
    margin-left: auto;
}

.api-endpoint-body {
    padding: 20px;
}

.api-endpoint-body h4 {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin: 20px 0 12px;
}

.api-endpoint-body h4:first-child {
    margin-top: 0;
}

.api-params-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 16px;
}

.api-params-table th {
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
}

.api-params-table td {
    padding: 10px 12px;
    font-size: 13px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
}

.api-params-table code {
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 12px;
    background: var(--bg-card);
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid var(--border);
}

.api-required {
    color: #ef4444;
    font-weight: 600;
    font-size: 12px;
}

/* SDKs */
.api-sdks-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.api-sdk-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
    transition: border-color 0.2s;
}

.api-sdk-card:hover {
    border-color: var(--primary);
}

.api-sdk-card i {
    font-size: 32px;
    color: var(--primary);
}

.api-sdk-card strong {
    font-size: 14px;
}

.api-sdk-card code {
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 12px;
    color: var(--text-muted);
    background: var(--bg);
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid var(--border);
    width: 100%;
}

/* API Code Tabs */
.api-code-tabs {
    margin-bottom: 20px;
}

.api-code-tabs-nav {
    display: flex;
    gap: 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-bottom: none;
    border-radius: var(--radius) var(--radius) 0 0;
    overflow-x: auto;
}

.api-code-tabs-nav button {
    background: none;
    border: none;
    padding: 10px 18px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
}

.api-code-tabs-nav button:hover {
    color: var(--text);
    background: rgba(var(--primary-rgb, 59,130,246), 0.05);
}

.api-code-tabs-nav button.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
    background: rgba(var(--primary-rgb, 59,130,246), 0.08);
}

.api-code-tabs-nav button i {
    font-size: 16px;
}

.api-code-tab-panel {
    display: none;
}

.api-code-tab-panel.active {
    display: block;
}

.api-code-tab-panel .api-code-block {
    border-radius: 0 0 var(--radius) var(--radius);
    margin-bottom: 0;
}

/* ========================================
   CHANGELOG PAGE
======================================== */

.changelog-page {
    min-height: 100vh;
    padding: 40px 0 80px;
}

.changelog-page > .container {
    max-width: 1140px;
}

.changelog-header {
    margin-bottom: 48px;
}

.changelog-logo {
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
}

.changelog-logo .upfile-icon {
    color: var(--primary);
}

.changelog-header h1 {
    font-size: 36px;
    font-weight: 800;
    margin-top: 24px;
}

.changelog-subtitle {
    color: var(--text-muted);
    font-size: 15px;
    margin-top: 8px;
}

/* Timeline */
.changelog-timeline {
    position: relative;
    padding-left: 32px;
}

.changelog-timeline::before {
    content: '';
    position: absolute;
    left: 7px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--border);
}

.changelog-entry {
    position: relative;
    margin-bottom: 48px;
}

.changelog-entry::before {
    content: '';
    position: absolute;
    left: -29px;
    top: 6px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--primary);
    border: 3px solid var(--bg);
    box-shadow: 0 0 0 2px var(--primary);
}

.changelog-entry-date {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.changelog-date {
    font-size: 13px;
    color: var(--text-muted);
}

.changelog-version {
    font-size: 12px;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 20px;
    background: rgba(var(--primary-rgb, 59,130,246), 0.1);
    color: var(--primary);
}

.changelog-entry-content {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
}

.changelog-entry-content h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 12px;
}

.changelog-tags {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.changelog-tag {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.changelog-tag-new { background: rgba(59,130,246,0.15); color: #3b82f6; }
.changelog-tag-improve { background: rgba(139,92,246,0.15); color: #8b5cf6; }
.changelog-tag-fix { background: rgba(239,68,68,0.15); color: #ef4444; }

.changelog-entry-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.changelog-entry-content li {
    padding: 8px 0;
    font-size: 14px;
    color: var(--text);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.changelog-entry-content li:last-child {
    border-bottom: none;
}

.changelog-tag-inline {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    flex-shrink: 0;
    margin-top: 2px;
}

/* ========================================
   STATUS PAGE
======================================== */

.status-page {
    min-height: 100vh;
    padding: 40px 0 80px;
}

.status-page > .container {
    max-width: 1140px;
}

.status-header {
    margin-bottom: 40px;
}

.status-logo {
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
}

.status-logo .upfile-icon {
    color: var(--primary);
}

.status-global-banner {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    border-radius: var(--radius);
    margin-top: 24px;
}

.status-global-banner.status-operational {
    background: rgba(16,185,129,0.08);
    border: 1px solid rgba(16,185,129,0.25);
}

.status-global-banner.status-degraded {
    background: rgba(239,68,68,0.08);
    border: 1px solid rgba(239,68,68,0.25);
}

.status-global-banner.status-degraded > i {
    color: #ef4444;
}

/* Orange banner: maintenance & en panne */
.status-global-banner.status-maintenance,
.status-global-banner.status-warning {
    background: rgba(245,158,11,0.08);
    border: 1px solid rgba(245,158,11,0.30);
}

/* Blinking dot in banner */
.status-dot-blink {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
}

.status-dot-blink-green {
    background: #10b981;
    box-shadow: 0 0 8px rgba(16,185,129,0.5);
    animation: blink-green 2s ease-in-out infinite;
}

.status-dot-blink-orange {
    background: #f59e0b;
    box-shadow: 0 0 12px rgba(245,158,11,0.6);
    animation: blink-orange 1.2s ease-in-out infinite;
}

@keyframes blink-green {
    0%, 100% { opacity: 1; box-shadow: 0 0 8px rgba(16,185,129,0.5); }
    50% { opacity: 0.6; box-shadow: 0 0 4px rgba(16,185,129,0.2); }
}

@keyframes blink-orange {
    0%, 100% { opacity: 1; box-shadow: 0 0 16px rgba(245,158,11,0.7); }
    50% { opacity: 0.4; box-shadow: 0 0 4px rgba(245,158,11,0.2); }
}

/* Maintenance incident card */
.status-incident-maintenance {
    border-color: rgba(245,158,11,0.3);
    background: rgba(245,158,11,0.04);
}

.status-badge-maintenance {
    background: rgba(245,158,11,0.15);
    color: #f59e0b;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Resolved incident/maintenance card */
.status-incident-resolved {
    opacity: 0.7;
}

.status-incident-resolved:hover {
    opacity: 1;
}

.status-incident-body {
    padding: 12px 20px 16px;
    border-top: 1px solid var(--border);
    font-size: 13px;
    color: var(--text-muted);
}

.status-incident-body p {
    margin: 0;
}

.status-incident-update {
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.status-incident-update-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 6px;
}

.status-incident-original {
    opacity: 0.6;
    font-size: 12px;
}

.status-global-banner > i {
    font-size: 32px;
    color: #10b981;
    flex-shrink: 0;
}

.status-global-banner strong {
    font-size: 18px;
    display: block;
}

.status-global-banner p {
    font-size: 13px;
    color: var(--text-muted);
    margin: 4px 0 0;
}

/* Uptime stats row */
.status-uptime-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 40px;
}

.status-uptime-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    text-align: center;
}

.status-uptime-value {
    display: block;
    font-size: 28px;
    font-weight: 800;
    color: var(--primary);
}

.status-uptime-label {
    display: block;
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 4px;
}

/* Section */
.status-section {
    margin-bottom: 40px;
}

.status-section h2 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

/* Services list */
.status-services-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.status-service {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.status-service-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.status-dot-ok {
    background: #10b981;
    box-shadow: 0 0 8px rgba(16,185,129,0.5);
}

.status-dot-warn {
    background: #f59e0b;
    box-shadow: 0 0 8px rgba(245,158,11,0.5);
}

.status-dot-error {
    background: #ef4444;
    box-shadow: 0 0 8px rgba(239,68,68,0.5);
}

.status-service-name {
    font-size: 14px;
    font-weight: 500;
}

.status-service-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.status-service-ping {
    font-size: 12px;
    color: var(--text-muted);
    font-family: 'SF Mono', 'Fira Code', monospace;
}

.status-service-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
}

.status-badge-ok { background: rgba(16,185,129,0.12); color: #10b981; }
.status-badge-warn { background: rgba(245,158,11,0.12); color: #f59e0b; }
.status-badge-warning { background: rgba(245,158,11,0.12); color: #f59e0b; }
.status-badge-down { background: rgba(239,68,68,0.12); color: #ef4444; }
.status-badge-error { background: rgba(239,68,68,0.12); color: #ef4444; }
.status-badge-resolved { background: rgba(59,130,246,0.12); color: var(--primary); }

.status-dot-warning {
    background: #f59e0b;
    box-shadow: 0 0 8px rgba(245,158,11,0.5);
}

.status-dot-maintenance {
    background: #6366f1;
    box-shadow: 0 0 8px rgba(99,102,241,0.5);
}

.status-dot-down {
    background: #ef4444;
    box-shadow: 0 0 8px rgba(239,68,68,0.5);
}

/* Service group label */
.status-service-group {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    padding: 12px 0 4px;
}

.status-service-group:first-child {
    padding-top: 0;
}

/* Uptime bars */
.status-uptime-bars {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.status-uptime-bar-item {}

.status-uptime-bar-label {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    margin-bottom: 6px;
}

.status-uptime-bar-label span:last-child {
    font-weight: 600;
    color: #10b981;
}

.status-uptime-bar {
    height: 8px;
    background: var(--border);
    border-radius: 4px;
    overflow: hidden;
}

.status-uptime-bar-fill {
    height: 100%;
    background: #10b981;
    border-radius: 4px;
    transition: width 0.6s ease;
}

.status-uptime-bar-fill.status-uptime-bar-warning {
    background: #f59e0b;
}

/* Incidents */
.status-incidents {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.status-incident {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.status-incident-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
    gap: 8px;
}

.status-incident-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.status-incident-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    flex-shrink: 0;
}

.status-incident-date {
    font-size: 13px;
    color: var(--text-muted);
}

.status-incident-timeline {
    padding: 16px 20px;
}

.status-incident-event {
    display: flex;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}

.status-incident-event:last-child {
    border-bottom: none;
}

.status-incident-time {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    font-family: 'SF Mono', 'Fira Code', monospace;
    flex-shrink: 0;
    min-width: 48px;
}

.status-incident-event strong {
    display: block;
    font-size: 13px;
    margin-bottom: 4px;
}

.status-incident-event p {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
}

/* Subscribe */
.status-subscribe {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.status-subscribe > i {
    font-size: 24px;
    color: var(--primary);
    flex-shrink: 0;
}

.status-subscribe strong {
    display: block;
    font-size: 14px;
}

.status-subscribe p {
    font-size: 13px;
    color: var(--text-muted);
    margin: 2px 0 0;
}

.status-subscribe .btn {
    margin-left: auto;
    flex-shrink: 0;
}

/* ========================================
   API / CHANGELOG / STATUS RESPONSIVE
======================================== */
@media (max-width: 768px) {
    .api-header-top {
        flex-direction: column;
    }

    .api-header-actions {
        width: 100%;
    }

    .api-sdks-grid {
        grid-template-columns: 1fr;
    }

    .api-endpoint-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .api-endpoint-desc {
        margin-left: 0;
    }

    .api-params-table {
        font-size: 12px;
    }

    .changelog-header h1 {
        font-size: 26px;
    }

    .changelog-timeline {
        padding-left: 24px;
    }

    .changelog-entry-content {
        padding: 16px;
    }

    .status-uptime-row {
        grid-template-columns: 1fr;
    }

    .status-service {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .status-service-right {
        width: 100%;
        justify-content: space-between;
    }

    .status-subscribe {
        flex-direction: column;
        text-align: center;
    }

    .status-subscribe .btn {
        margin-left: 0;
        width: 100%;
    }

    .status-incident-header {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ========================================
   UPMODAL — Système de modals
======================================== */

.upmodal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.upmodal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.upmodal {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 28px 32px;
    width: 540px;
    max-width: 90vw;
    text-align: left;
    transform: scale(0.95) translateY(8px);
    opacity: 0;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.upmodal.active {
    transform: scale(1) translateY(0);
    opacity: 1;
}

/* Header: icon + title inline */
.upmodal-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
}

/* Icon */
.upmodal-icon {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.upmodal--info .upmodal-icon {
    background: var(--primary-light);
    color: var(--primary);
}

.upmodal--success .upmodal-icon {
    background: var(--success-light);
    color: var(--success);
}

.upmodal--warning .upmodal-icon {
    background: var(--warning-light);
    color: var(--warning);
}

.upmodal--danger .upmodal-icon {
    background: var(--danger-light);
    color: var(--danger);
}

.upmodal--input .upmodal-icon {
    background: var(--primary-light);
    color: var(--primary);
}

/* Title & Message */
.upmodal-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--text);
    margin: 0;
    font-family: var(--font);
}

.upmodal-message {
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 24px;
    padding-left: 56px;
    font-family: var(--font);
    text-align: left;
}

/* Input */
.upmodal-input-wrapper {
    margin-bottom: 24px;
    padding-left: 56px;
}

.upmodal-input {
    width: 100%;
    padding: 10px 14px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-size: 14px;
    font-family: var(--font);
    outline: none;
    transition: border-color 0.2s;
}

.upmodal-input:focus {
    border-color: var(--primary);
}

.upmodal-input--error {
    border-color: var(--danger) !important;
}

.upmodal-input-error {
    display: none;
    color: var(--danger);
    font-size: 12px;
    margin-top: 6px;
}

/* Feedback modal fields */
.upmodal-feedback-fields {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 24px;
    padding-left: 56px;
}
.upmodal-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.upmodal-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}
.upmodal-select {
    width: 100%;
    padding: 10px 14px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-size: 14px;
    font-family: var(--font);
    outline: none;
    cursor: pointer;
    transition: border-color 0.2s;
    -webkit-appearance: none;
    appearance: none;
}
.upmodal-select:focus {
    border-color: var(--primary);
}
.upmodal-textarea {
    width: 100%;
    padding: 10px 14px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-size: 14px;
    font-family: var(--font);
    outline: none;
    resize: vertical;
    min-height: 80px;
    transition: border-color 0.2s;
}
.upmodal-textarea:focus {
    border-color: var(--primary);
}
.upmodal-textarea.upmodal-input--error,
.upmodal-select.upmodal-input--error {
    border-color: var(--danger);
}

/* Actions */
.upmodal-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.upmodal-btn {
    padding: 10px 20px;
    border-radius: var(--radius);
    font-size: 14px;
    font-weight: 600;
    font-family: var(--font);
    border: none;
    cursor: pointer;
    transition: background 0.2s, opacity 0.2s;
}

.upmodal-btn:hover {
    opacity: 0.85;
}

.upmodal-btn--primary {
    background: var(--primary);
    color: #fff;
}

.upmodal-btn--success {
    background: var(--success);
    color: #fff;
}

.upmodal-btn--warning {
    background: var(--warning);
    color: #fff;
}

.upmodal-btn--danger {
    background: var(--danger);
    color: #fff;
}

.upmodal-btn--outline {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text);
}

.upmodal-btn--outline:hover {
    background: var(--bg-card-hover);
    opacity: 1;
}

/* Spinner (loading) */
.upmodal-spinner {
    width: 28px;
    height: 28px;
    min-width: 28px;
    border: 3px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: upmodal-spin 0.8s linear infinite;
}

@keyframes upmodal-spin {
    to { transform: rotate(360deg); }
}

.upmodal--loading .upmodal-message {
    margin-bottom: 0;
}

/* Responsive */
@media (max-width: 480px) {
    .upmodal {
        padding: 20px;
        width: 100%;
    }

    .upmodal-message,
    .upmodal-input-wrapper,
    .upmodal-feedback-fields {
        padding-left: 0;
    }

    .upmodal-actions {
        flex-direction: column;
    }

    .upmodal-btn {
        max-width: 100%;
        width: 100%;
    }
}

/* ========================================
   DOWNLOAD PAGE
======================================== */

/* Layout */
body:has(.dl-page) {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.dl-page {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

.dl-container {
    width: 100%;
    max-width: 520px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

/* Brand */
.dl-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text);
    text-decoration: none;
}

.dl-brand .upfile-icon {
    font-size: 1.8rem;
}

/* Branding logo */
.dl-brand-logo {
    height: 36px;
    max-width: 160px;
    object-fit: contain;
}

/* Dark/Light logo visibility */
[data-bs-theme="dark"] .dl-brand-logo-light { display: none; }
[data-bs-theme="dark"] .dl-brand-logo-dark { display: inline-block; }
[data-bs-theme="light"] .dl-brand-logo-dark { display: none; }
[data-bs-theme="light"] .dl-brand-logo-light { display: inline-block; }

/* Card */
.dl-card {
    width: 100%;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 32px;
}

/* File header */
.dl-file-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.dl-file-icon {
    width: 52px;
    height: 52px;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
    background: var(--primary-light);
    color: var(--primary);
}

.dl-file-icon-img { background: rgba(168, 85, 247, 0.12); color: #a855f7; }
.dl-file-icon-archive { background: var(--primary-light); color: var(--primary); }
.dl-file-icon-audio { background: var(--success-light); color: var(--success); }
.dl-file-icon-video { background: var(--warning-light); color: var(--warning); }

.dl-file-info {
    flex: 1;
    min-width: 0;
}

.dl-file-name {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 6px;
    word-break: break-all;
}

.dl-file-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    font-size: 13px;
    color: var(--text-muted);
}

.dl-file-meta span {
    display: flex;
    align-items: center;
    gap: 5px;
}

.dl-file-meta i {
    font-size: 14px;
}

/* Stats */
.dl-stats {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.dl-stat {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-muted);
    background: var(--bg);
    padding: 6px 12px;
    border-radius: 20px;
    border: 1px solid var(--border);
}

.dl-stat i {
    font-size: 15px;
}

.dl-stat-warning {
    color: var(--warning);
    border-color: var(--warning-light);
    background: var(--warning-light);
}

.dl-stat-permanent {
    color: var(--success);
    border-color: var(--success-light);
    background: var(--success-light);
}

/* Divider */
.dl-divider {
    height: 1px;
    background: var(--border);
    margin: 24px 0;
}

/* Action zone */
.dl-action-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
}

.dl-lock-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--primary-light);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 4px;
}

.dl-action-title {
    font-size: 18px;
    font-weight: 700;
}

.dl-action-desc {
    font-size: 14px;
    color: var(--text-muted);
    max-width: 360px;
}

.dl-action-hint {
    font-size: 12px;
    color: var(--text-muted);
}

/* Download button */
.dl-btn-download {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px 24px;
    font-size: 15px;
    font-weight: 600;
    font-family: var(--font);
    color: #fff;
    background: var(--primary);
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s, transform 0.1s;
}

.dl-btn-download:hover {
    background: var(--primary-hover);
}

.dl-btn-download:active {
    transform: scale(0.98);
}

.dl-btn-download i {
    font-size: 18px;
}

/* Password form */
.dl-password-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dl-input-group {
    display: flex;
    align-items: center;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0 14px;
    transition: border-color 0.2s;
}

.dl-input-group:focus-within {
    border-color: var(--primary);
}

.dl-input-group > i {
    font-size: 18px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.dl-input-group input {
    flex: 1;
    padding: 13px 12px;
    border: none;
    background: none;
    font-size: 14px;
    font-family: var(--font);
    color: var(--text);
    outline: none;
}

.dl-input-group input::placeholder {
    color: var(--text-muted);
}

.dl-toggle-password {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    font-size: 18px;
    display: flex;
    transition: color 0.2s;
}

.dl-toggle-password:hover {
    color: var(--text);
}

/* Password error */
.dl-password-error {
    display: none;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--danger);
    padding: 0 2px;
}

.dl-password-error.visible {
    display: flex;
}

.dl-password-error i {
    font-size: 15px;
}

/* Auth buttons */
.dl-auth-buttons {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dl-btn-auth {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 13px 20px;
    font-size: 14px;
    font-weight: 600;
    font-family: var(--font);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s;
}

.dl-btn-discord {
    background: var(--discord);
    border-color: var(--discord);
    color: #fff;
}

.dl-btn-discord:hover {
    background: #4752c4;
    border-color: #4752c4;
}

.dl-btn-google {
    background: var(--bg-card);
    border-color: var(--border);
    color: var(--text);
}

.dl-btn-google:hover {
    background: var(--bg-card-hover);
    border-color: var(--border-hover);
}

.dl-auth-hint {
    font-size: 12px;
    color: var(--text-muted);
}

/* Footer links */
.dl-footer-links {
    display: flex;
    gap: 20px;
}

.dl-footer-links a {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.2s;
}

.dl-footer-links a:hover {
    color: var(--text);
}

.dl-footer-links a i {
    font-size: 15px;
}

/* Locked button */
.dl-btn-locked {
    background: var(--bg-card-hover) !important;
    color: var(--text-muted) !important;
    cursor: pointer;
}

.dl-btn-locked:hover {
    background: var(--border) !important;
}

/* Modal overlay */
.dl-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.dl-modal-overlay.visible {
    opacity: 1;
    visibility: visible;
}

/* Modal box */
.dl-modal {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 36px 32px;
    width: 100%;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
    transform: scale(0.95) translateY(10px);
    transition: transform 0.3s ease;
}

.dl-modal-overlay.visible .dl-modal {
    transform: scale(1) translateY(0);
}

/* Modal icon */
.dl-modal-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--primary-light);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    margin-bottom: 4px;
}

.dl-modal-title {
    font-size: 20px;
    font-weight: 700;
}

.dl-modal-desc {
    font-size: 14px;
    color: var(--text-muted);
    max-width: 320px;
    line-height: 1.5;
}

/* Modal forms inherit dl- styles */
.dl-modal .dl-password-form,
.dl-modal .dl-auth-buttons {
    width: 100%;
    margin-top: 6px;
}

.dl-modal .dl-auth-hint {
    margin-top: 2px;
}

/* Responsive */
@media (max-width: 560px) {
    .dl-modal {
        padding: 28px 20px;
    }
}

/* Responsive */
@media (max-width: 560px) {
    .dl-card {
        padding: 24px 20px;
    }

    .dl-file-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .dl-file-meta {
        gap: 8px;
    }

    .dl-stats {
        flex-direction: column;
        gap: 8px;
    }

    .dl-footer-links {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }
}

/* ========================================
   TOAST NOTIFICATIONS
======================================== */
.uf-toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.uf-toast {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    border: 1px solid var(--border);
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    color: var(--text);
    font-size: 14px;
    font-family: var(--font);
    pointer-events: auto;
    transform: translateX(120%);
    opacity: 0;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.35s ease;
    max-width: 400px;
    min-width: 280px;
}

.uf-toast.visible {
    transform: translateX(0);
    opacity: 1;
}

.uf-toast.removing {
    transform: translateX(120%);
    opacity: 0;
}

.uf-toast-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 18px;
}

.uf-toast-success .uf-toast-icon { background: var(--success-light); color: var(--success); }
.uf-toast-error .uf-toast-icon { background: var(--danger-light); color: var(--danger); }
.uf-toast-warning .uf-toast-icon { background: var(--warning-light); color: var(--warning); }
.uf-toast-info .uf-toast-icon { background: var(--primary-light); color: var(--primary); }

.uf-toast-content {
    flex: 1;
    min-width: 0;
}

.uf-toast-title {
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 2px;
}

.uf-toast-msg {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.3;
}

.uf-toast-close {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    font-size: 16px;
    flex-shrink: 0;
    transition: color 0.2s;
}

.uf-toast-close:hover { color: var(--text); }

.uf-toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    animation: ufToastProgress linear forwards;
}

.uf-toast { position: relative; overflow: hidden; }

.uf-toast-success .uf-toast-progress { background: var(--success); }
.uf-toast-error .uf-toast-progress { background: var(--danger); }
.uf-toast-warning .uf-toast-progress { background: var(--warning); }
.uf-toast-info .uf-toast-progress { background: var(--primary); }

@keyframes ufToastProgress {
    from { width: 100%; }
    to { width: 0%; }
}

/* ========================================
   CONFIRM MODAL
======================================== */
.uf-confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
    z-index: 99998;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.uf-confirm-overlay.visible {
    display: flex;
    opacity: 1;
}

.uf-confirm-modal {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 32px;
    width: 100%;
    max-width: 400px;
    text-align: center;
    transform: scale(0.9);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.uf-confirm-overlay.visible .uf-confirm-modal {
    transform: scale(1);
}

.uf-confirm-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: var(--danger-light);
    color: var(--danger);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    margin: 0 auto 16px;
}

.uf-confirm-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 8px;
}

.uf-confirm-desc {
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 24px;
    line-height: 1.5;
}

.uf-confirm-actions {
    display: flex;
    gap: 12px;
}

.uf-confirm-btn-cancel, .uf-confirm-btn-ok {
    flex: 1;
    padding: 12px 20px;
    border-radius: var(--radius);
    font-size: 14px;
    font-weight: 600;
    font-family: var(--font);
    cursor: pointer;
    border: none;
    transition: all 0.2s;
}

.uf-confirm-btn-cancel {
    background: var(--bg-input);
    color: var(--text);
    border: 1px solid var(--border);
}

.uf-confirm-btn-cancel:hover {
    background: var(--bg-card-hover);
    border-color: var(--border-hover);
}

.uf-confirm-btn-ok {
    background: var(--danger);
    color: #fff;
}

.uf-confirm-btn-ok:hover {
    background: #c82333;
}

.uf-confirm-btn-ok.uf-confirm-btn-primary {
    background: var(--primary);
}

.uf-confirm-btn-ok.uf-confirm-btn-primary:hover {
    background: var(--primary-hover);
}

/* ---- Settings disabled connection button ---- */
.settings-btn-disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
    display: inline-block;
}

/* ---- Pagination ---- */
.uf-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0 0;
    gap: 16px;
    flex-wrap: wrap;
}
.uf-pagination-left {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--text-muted);
}
.uf-pagination-left label { font-weight: 500; }
.uf-page-size {
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: var(--radius);
    padding: 5px 10px;
    font-size: 13px;
    font-family: var(--font);
    cursor: pointer;
}
.uf-page-size:focus { border-color: var(--primary); outline: none; }
.uf-pagination-info { font-size: 13px; color: var(--text-muted); }
.uf-pagination-right {
    display: flex;
    align-items: center;
    gap: 4px;
}
.uf-page-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--bg-input);
    color: var(--text);
    font-size: 13px;
    font-family: var(--font);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}
.uf-page-btn:hover:not(.disabled):not(.active) {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--bg-card-hover);
}
.uf-page-btn.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}
.uf-page-btn.disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}
.uf-page-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    font-size: 13px;
    color: var(--text-muted);
}

/* ---- Multi-select & Mass action bar ---- */
.uf-row-check, .uf-select-all {
    width: 16px;
    height: 16px;
    accent-color: var(--primary);
    cursor: pointer;
    vertical-align: middle;
}
.uf-mass-bar {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.25);
    z-index: 1000;
    animation: ufMassBarIn 0.25s ease-out;
}
@keyframes ufMassBarIn {
    from { opacity: 0; transform: translateX(-50%) translateY(20px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.uf-mass-count {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
}
.uf-mass-delete {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: var(--radius);
    border: none;
    background: var(--danger);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font);
    cursor: pointer;
    transition: background 0.15s;
}
.uf-mass-delete:hover { background: #c82333; }
.uf-mass-cancel {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--bg-input);
    color: var(--text-muted);
    cursor: pointer;
    font-size: 16px;
    transition: all 0.15s;
}
.uf-mass-cancel:hover {
    border-color: var(--border-hover);
    color: var(--text);
}