/* Unified stylesheet: initial copy from styles.css. Will merge auth.css and utilities next. */

/* ===== Design tokens ===== */
:root {
    /* Palette dark premium */
    --color-primary: #667eea;  /* Accent (indigo) */
    --color-secondary: #764ba2;/* Accent secondaire */
    --color-danger: #e53e3e;   /* Danger */
    --color-success: #10b981;  /* Succès */
    --color-warning: #f59e0b;  /* Avertissement */
    --color-muted: #9ca3af;    /* Texte secondaire (slate-400) */
    --color-border: #2a2f3a;   /* Bordure (slate-800) */
    --color-text: #e5e7eb;     /* Texte principal (slate-200) */

    /* RGB (pour rgba dynamiques) */
    --color-primary-rgb: 102, 126, 234;
    --color-secondary-rgb: 118, 75, 162;
    --color-danger-rgb: 229, 62, 62;
    --color-success-rgb: 16, 185, 129;
    --color-warning-rgb: 245, 158, 11;

    /* Surfaces (neutres) - dark */
    --page-bg: #0b0f14;        /* Fond page */
    --surface: #0f141a;        /* Carte/sections */
    --surface-rgb: 15, 20, 26;
    --surface-muted: #121820;  /* Muted surface */

    /* Alphas utiles (évite #hex avec opacité) */
    --alpha-primary-10: rgba(102,126,234,0.10);
    --alpha-primary-20: rgba(102,126,234,0.20);
    --alpha-danger-10:  rgba(229, 62, 62, 0.10);
    --alpha-danger-30:  rgba(229, 62, 62, 0.30);
    --alpha-success-10: rgba(16, 185,129,0.10);
    --alpha-success-30: rgba(16, 185,129,0.30);

    /* Police */
    --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    /* Ombres & rayons */
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.25);
    --shadow-md: 0 6px 18px rgba(0,0,0,0.32);
    --shadow-lg: 0 12px 36px rgba(0,0,0,0.38);

    --radius-6: 6px;
    --radius-8: 8px;
    --radius-10: 10px;
    --radius-12: 12px;
    --radius-16: 16px;
    --radius-18: 18px;

    --space-4: 4px;
    --space-6: 6px;
    --space-8: 8px;
    --space-10: 10px;
    --space-12: 12px;
    --space-14: 14px;
    --space-16: 16px;
    --space-18: 18px;
    --space-20: 20px;
    --space-24: 24px;
    --space-32: 32px;
}

/* ===== Utilities (prefixed u-) ===== */
.u-flex { display: flex; }
.u-flex-col { display: flex; flex-direction: column; }
.u-wrap { flex-wrap: wrap; }
.u-wrap { flex-wrap: wrap; }
.u-ai-center { align-items: center; }
.u-jc-center { justify-content: center; }
.u-gap-16 { gap: var(--space-16) !important; }
.u-gap-10 { gap: var(--space-10); }
.u-gap-14 { gap: 14px; }
.u-mb-16 { margin-bottom: var(--space-16); }
.u-mb-32 { margin-bottom: var(--space-32); }
.u-mt-16 { margin-top: var(--space-16); }
.u-mr-auto { margin-right: auto; }
.u-pr-32 { padding-right: var(--space-32); }
.u-w-100 { width: 100%; }
.u-br-8 { border-radius: var(--radius-8); }
.u-b-1 { border: 1px solid var(--color-border); }
.u-c-primary { color: var(--color-primary); }
.u-c-muted { color: var(--color-muted); }
.u-c-danger { color: var(--color-danger); }
.u-c-text { color: var(--color-text); }
.u-fw-600 { font-weight: 600; }
.u-ta-center { text-align:center !important; }
.u-fs-italic { font-style: italic !important; }
.u-mt-32 { margin-top: 32px !important; }
.u-c-success { color: var(--color-success) !important; }
.u-c-warning { color: var(--color-warning) !important; }

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

body {
    font-family: var(--font-family);
    background: var(--page-bg);
    min-height: 100vh;
    color: var(--color-text);
    padding-top: 32px;
}

/* Conteneur global aligné sur le dashboard */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 16px;
}

.admin-body .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 16px;
}

.header {
    background: var(--surface);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 16px 18px;
    margin-bottom: 30px;
    box-shadow: var(--shadow-sm);
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    position: relative;
    background: var(--surface);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 16px 18px;
    box-shadow: var(--shadow-sm);
}

.header-logo {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Lien autour du logo et des titres (pas d’effet visuel au clic/hover) */
.header-brand { display:flex; align-items:center; gap:14px; text-decoration:none; color: inherit; }
.header-brand:visited { color: inherit; text-decoration:none; }
.header-brand:hover { color: inherit; text-decoration:none; }
.header-brand:active { color: inherit; text-decoration:none; }
.header-brand:focus { outline: none; text-decoration:none; }

.logo {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    object-fit: cover;
}

.header-text h1 { font-size: 2rem; font-weight: 800; color: var(--color-text); letter-spacing: 0.2px; }

.subtitle { font-size: 1rem; color: var(--color-muted); margin-top: 5px; }

.auth-zone {
    display: flex;
    align-items: center;
    gap: 15px;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

.welcome-message { font-size: 1rem; color: var(--color-text); }

.user-actions {
    display: flex;
    gap: 8px;
}

.auth-buttons {
    display: flex;
    gap: 10px;
}

/* -------- Header responsive: Mobile optimisations -------- */
@media (max-width: 600px) {
    .header {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 14px;
    }
    .header-logo {
        justify-content: center;
    }
    .logo {
        width: 48px;
        height: 48px;
    }
    .header-text h1 {
        font-size: 1.6rem;
    }
    .subtitle {
        font-size: 0.95rem;
    }
    .auth-zone {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        gap: 10px;
    }
    .user-info {
        width: 100%;
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }
    .welcome-message {
        font-size: 0.95rem;
        text-align: center;
    }
    .user-actions {
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }
    .auth-buttons {
        width: 100%;
        justify-content: center;
        gap: 8px;
    }
    .btn {
        padding: 8px 12px;
        font-size: 0.88rem;
    }
    .btn-profile,
    .btn-logout,
    .btn-home,
    .btn-trends {
        padding: 6px 10px;
        font-size: 1rem;
    }
}

@media (max-width: 380px) {
    .header {
        padding: 12px;
    }
    .header-text h1 {
        font-size: 1.45rem;
    }
    .btn {
        padding: 6px 10px;
        font-size: 0.82rem;
    }
}

.btn {
    padding: 8px 16px;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-login {
    background: var(--color-primary);
    color: #fff;
    box-shadow: none;
}

.btn-login:hover {
    background: #5569d6;
}

.btn-register {
    background: var(--surface-muted);
    color: var(--color-secondary);
    border: none;
    box-shadow: 0 2px 8px rgba(var(--color-primary-rgb), 0.07);
}

.btn-register:hover {
    background: var(--color-border);
    color: var(--color-primary);
}

.btn-profile,
.btn-logout {
    background: var(--surface-muted);
    color: var(--color-secondary);
    border: none;
    padding: 6px 10px;
    font-size: 1.1rem;
    box-shadow: 0 2px 8px rgba(var(--color-primary-rgb), 0.07);
}

.btn-profile:hover {
    background: var(--color-border);
    color: var(--color-primary);
}

.btn-news {
    background: var(--surface-muted);
    color: var(--color-secondary);
    border: none;
    padding: 6px 10px;
    font-size: 1.1rem;
    box-shadow: 0 2px 8px rgba(var(--color-primary-rgb), 0.07);
}

.btn-news:hover {
    background: var(--color-border);
    color: var(--color-primary);
}

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

.btn-home {
    background: var(--surface-muted);
    color: var(--color-secondary);
    border: none;
    padding: 6px 10px;
    font-size: 1.1rem;
    box-shadow: 0 2px 8px rgba(var(--color-primary-rgb), 0.07);
}

.btn-home:hover {
    background: var(--color-border);
    color: var(--color-primary);
}

.btn-trends {
    background: var(--surface-muted);
    color: var(--color-secondary);
    border: none;
    padding: 6px 10px;
    font-size: 1.25rem;
    box-shadow: 0 2px 8px rgba(var(--color-primary-rgb), 0.07);
}

.btn-trends:hover {
    background: var(--color-border);
    color: var(--color-primary);
}

.controls {
    background: var(--surface);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 30px;
    box-shadow: var(--shadow-sm);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.deck-info {
    display: flex;
    align-items: center;
    gap: 30px;
}

.deck-counter {
    font-size: 1.2rem;
    font-weight: 600;
}

.counter-number { color: var(--color-primary); font-weight: 700; }

.deck-selector {
    display: flex;
    align-items: center;
    gap: 10px;
}

.deck-select {
    padding: 8px 12px;
    border: 2px solid var(--color-border);
    border-radius: 8px;
    font-size: 1rem;
    background: var(--surface);
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 120px;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 16px;
    padding-right: 32px;
}

.deck-select:focus {
    border-color: var(--color-primary);
    outline: none;
    box-shadow: 0 0 0 3px var(--alpha-primary-10);
}

.action-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.btn {
    padding: 10px 16px;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.btn-new { background: var(--color-success); color: #fff; }

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

.btn-manage { background: var(--color-warning); color: #fff; }

.btn-clear { background: var(--color-danger); color: #fff; }

.btn-save { background: var(--color-secondary); color: #fff; }

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

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.deck-section { background: var(--surface); border: 1px solid var(--color-border); border-radius: 14px; padding: 20px; margin-bottom: 30px; box-shadow: var(--shadow-sm); }

.deck-section h2 { font-size: 1.8rem; margin-bottom: 20px; color: var(--color-text); }

.deck-slots {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 15px;
}

.deck-slot {
    background: var(--surface-muted);
    border: 3px dashed var(--color-border);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    transition: all 0.3s ease;
    cursor: pointer;
}

.deck-slot.empty { background: var(--surface-muted); border-color: var(--color-border); }

.deck-slot.filled { background: var(--alpha-primary-10); border-color: var(--color-primary); border-style: solid; }

.deck-slot.drag-over { background: var(--alpha-primary-20); border-color: var(--color-primary); transform: scale(1.02); }

.slot-number {
    position: absolute;
    top: 8px;
    left: 12px;
    background: var(--color-primary);
    color: white;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 600;
}

.slot-text { color: var(--color-muted); font-size: 0.9rem; }

.card-in-slot {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.card-in-slot img {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    object-fit: scale-down;
    object-position: center;
    background: var(--surface-muted);
    padding: 2px;
    box-sizing: border-box;
}

.card-in-slot .card-name { font-weight: 600; color: var(--color-text); font-size: 0.9rem; }

.remove-card {
    position: absolute;
    top: 5px;
    right: 5px;
    background: var(--color-danger);
    color: white;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    cursor: pointer;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

/* Image sizes and common styles */
.card-thumb {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    object-fit: scale-down;
    object-position: center;
    background: var(--surface-muted);
    padding: 2px;
    box-sizing: border-box;
}

.card-thumb-sm {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    object-fit: scale-down;
    object-position: center;
    background: var(--surface-muted);
    padding: 2px;
    box-sizing: border-box;
    border: 1px solid var(--color-border);
}

.trait-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
    background: transparent !important;
    border: none !important;
    border-radius: 0;
}

.trend-cards img,
.cards-gallery img {
    image-rendering: auto;
}

.remove-card:hover {
    background: var(--color-danger);
    transform: scale(1.1);
}

.cards-section { background: var(--surface); border: 1px solid var(--color-border); border-radius: 14px; padding: 20px; box-shadow: var(--shadow-sm); }

.cards-section h2 { font-size: 1.8rem; margin-bottom: 20px; color: var(--color-text); }

.cards-filter {
    display: flex;
    gap: 10px;
    margin-bottom: 25px;
    flex-wrap: wrap;
}

.filter-btn {
    padding: 8px 16px;
    border: 1px solid var(--color-border);
    background: var(--surface-muted);
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    color: var(--color-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

/* Wrapper carré pour garantir une zone identique */
.filter-btn .trait-icon-wrap {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Icône à l'intérieur du wrapper: taille fixe et alignement */
.filter-btn .trait-icon {
    width: 34px !important;
    height: 34px !important;
    object-fit: contain !important;
    vertical-align: middle;
    display: inline-block;
}

@media (max-width: 700px) {
    .filter-btn .trait-icon-wrap {
    width: 28px;
    height: 28px;
    }
    .filter-btn .trait-icon {
    width: 28px !important;
    height: 28px !important;
    }
}

.filter-btn.active,
.filter-btn:hover { background: var(--color-border); border-color: var(--color-border); color: var(--color-primary); }

.cards-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 20px;
}

.card {
    background: var(--surface);
    border-radius: 12px;
    padding: 15px;
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
    cursor: pointer;
    text-align: center;
    border: 1px solid var(--color-border);
    position: relative;
}

.card:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); border-color: var(--color-primary); }

.card:active {
    transform: translateY(-2px) scale(0.98);
}

.card.dragging {
    opacity: 0.5;
    transform: rotate(5deg);
    cursor: grabbing;
}

.card::before {
    content: "🖱️ Cliquez pour ajouter";
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 10;
}

.card:hover::before {
    opacity: 1;
}

.card img {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    object-fit: scale-down;
    object-position: center;
    margin-bottom: 10px;
    background: var(--surface-muted);
    padding: 2px;
    box-sizing: border-box;
}

.card-name { font-weight: 600; color: var(--color-text); margin-bottom: 5px; font-size: 1rem; }

.card-traits {
    display: flex;
    gap: 4px;
    justify-content: center;
    .card-type { background: var(--color-primary); color: #fff; padding: 3px 6px; border-radius: 8px; font-size: 0.7rem; font-weight: 600; display: inline-block; }
    .card-type.ace { background: var(--color-secondary); }
    .card-type.assassin { background: var(--color-danger); }
    .card-type.noble,
    .card-type.thrower { background: var(--color-warning); }
    .card-type.goblin { background: var(--color-success); }
    /* Les autres types utilisent la couleur primaire par défaut */
}

/* Variantes réduites: primary (défaut), secondary (ace), danger (assassin), warning (noble/thrower), success (goblin) */

.modal {
    display: none;
    position: fixed;
    z-index: 2147483650;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
}

.modal-content {
    background-color: var(--surface);
    margin: 5% auto;
    padding: 0;
    border-radius: 14px;
    width: 80%;
    max-width: 800px;
    max-height: 80vh;
    overflow-y: auto;
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-lg);
}

.modal-header {
    background: var(--surface-muted);
    color: var(--color-text);
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-border);
    border-radius: 14px 14px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h3 {
    margin: 0;
    font-size: 1.5rem;
}

.close {
    color: var(--color-text);
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
}

.close:hover {
    opacity: 0.7;
}

.modal-body {
    padding: 25px;
}

.decks-list, .modal-body {
    max-height: 400px;
    overflow-y: auto;
    scrollbar-width: none;
}
.decks-list::-webkit-scrollbar, .modal-body::-webkit-scrollbar {
    display: none;
}

.decks-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-height: 400px;
    overflow-y: auto;
    scrollbar-width: none;
}

.decks-list::-webkit-scrollbar {
    display: none;
}

.deck-preview { background: var(--surface-muted); border-radius: 12px; padding: 20px; border: 2px solid var(--color-border); transition: all 0.3s ease; }

.deck-preview:hover { border-color: var(--color-primary); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); }

.deck-preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.deck-preview-name { font-size: 1.2rem; font-weight: 600; color: var(--color-text); }

.deck-preview-actions {
    display: flex;
    gap: 10px;
}

.btn-small {
    padding: 6px 12px;
    font-size: 0.8rem;
    border-radius: 6px;
}

.deck-preview-cards {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.deck-card-mini {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--surface);
    padding: 8px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
}

.deck-card-mini img {
    width: 30px;
    height: 30px;
    border-radius: 4px;
    object-fit: scale-down;
    object-position: center;
    background: var(--surface-muted);
    padding: 1px;
    box-sizing: border-box;
}

.deck-card-mini span { font-size: 0.9rem; font-weight: 500; color: var(--color-text); }

.deck-management {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-bottom: 20px;
}

.flash-message {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 20px;
    border-radius: 12px;
    margin-bottom: 20px;
    font-weight: 500;
    animation: flashSlideIn 0.5s ease;
    position: relative;
}

.flash-success { background: var(--alpha-success-10); border: 1px solid var(--alpha-success-30); color: var(--color-success); }

.flash-error { background: var(--alpha-danger-10); border: 1px solid var(--alpha-danger-30); color: var(--color-danger); }

.flash-icon {
    font-size: 1.2rem;
}

.flash-close {
    position: absolute;
    right: 15px;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: inherit;
    opacity: 0.7;
    padding: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.flash-close:hover {
    opacity: 1;
}

@keyframes flashSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.profile-container {
    max-width: 900px;
    margin: 30px auto;
    padding: 0;
}
.profile-card {
    background: rgba(var(--surface-rgb), 0.97);
    border-radius: 18px;
    box-shadow: 0 8px 32px rgba(var(--color-primary-rgb), 0.10);
    padding: 36px 32px 24px 32px;
    margin-bottom: 24px;
}
.profile-header {
    margin-bottom: 24px;
    text-align: left;
}
.profile-header h1 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-secondary);
    margin-bottom: 6px;
}
.profile-header p { color: var(--color-muted); font-size: 1rem; margin-bottom: 0; }
.user-stats {
    display: flex;
    gap: 24px;
    margin-bottom: 24px;
}
.stat-card {
    background: var(--surface-muted);
    border-radius: 10px;
    padding: 16px 24px;
    text-align: center;
    flex: 1;
    box-shadow: 0 2px 8px rgba(var(--color-primary-rgb), 0.07);
}
.stat-number { font-size: 1.3rem; font-weight: 700; color: var(--color-primary); }
.stat-label { font-size: 0.95rem; color: var(--color-text); }
.profile-form {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.form-section {
    background: var(--surface-muted);
    border-radius: 10px;
    padding: 24px 20px 18px 20px;
    margin-bottom: 0;
    box-shadow: 0 2px 8px rgba(var(--color-primary-rgb), 0.07);
}
.form-section h3 { font-size: 1.1rem; color: var(--color-secondary); margin-bottom: 18px; }
.form-row {
    display: flex;
    gap: 18px;
    margin-bottom: 0;
}
.form-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}
.form-group label { font-weight: 600; color: var(--color-text); font-size: 0.97rem; margin-bottom: 2px; }
.form-group input {
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 1rem;
    border: 1px solid var(--color-border);
    background: var(--surface);
    color: var(--color-text);
    transition: border-color 0.2s, background-color 0.2s;
}
.form-group input:focus { border-color: var(--color-primary); outline: none; }
.form-group .form-help { font-size: 0.85rem; color: var(--color-muted); margin-top: 2px; }
.form-actions {
    display: flex;
    gap: 18px;
    align-items: center;
    margin-top: 10px;
}
.auth-btn-primary {
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: none;
    transition: background 0.2s;
}
.auth-btn-primary:hover { background: #5569d6; }
.auth-btn-secondary {
    background: var(--surface-muted);
    color: var(--color-secondary);
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(var(--color-primary-rgb), 0.07);
    transition: background 0.2s, box-shadow 0.2s;
}
.auth-btn-secondary:hover {
    background: var(--color-border);
    color: var(--color-primary);
}
.form-group.form-separator {
    height: 18px;
    background: none;
    border: none;
    margin: 0;
}
@media (max-width: 900px) {
    .profile-container {
        max-width: 100%;
        padding: 0 8px;
    }
    .profile-card {
        padding: 18px 6px 12px 6px;
    }
}
@media (max-width: 600px) {
    .form-row {
        flex-direction: column;
        gap: 0;
    }
    .form-section {
        padding: 12px 6px 8px 6px;
    }
    .profile-card {
        padding: 8px 2px 6px 2px;
    }
}
@media (max-width: 1200px) {
    .deck-slots {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, 1fr);
    }
}
@media (max-width: 768px) {
    .container {
        padding: 10px;
    }
    
    .controls {
        flex-direction: column;
        align-items: stretch;
    }
    
    .deck-info {
        justify-content: space-between;
    }
    
    .action-buttons {
        justify-content: center;
    }
    
    .deck-slots {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, 1fr);
    }
    
    .cards-gallery {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }
    
    .modal-content {
        margin: 10% auto;
        width: 95%;
    }
    
    .header-text h1 {
        font-size: 2rem;
    }
    
    .deck-preview-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .deck-preview-cards {
        justify-content: center;
    }
}
@media (max-width: 480px) {
    .deck-slots {
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(6, 1fr);
    }
    
    .cards-gallery {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }
    
    .cards-filter {
        justify-content: center;
    }
    
    .action-buttons {
        flex-direction: column;
    }
}
/* Admin modal: désactiver tooltip/hover des cartes dans la modale de sélection */
#cardsModal .card::before { content: none !important; display: none !important; }
#cardsModal .card:hover { transform: none; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }

/* ===== Auth (merged from auth.css) ===== */
.auth-body {
    background: var(--page-bg);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

/* Admin body: même fond mais layout classique (pas centré verticalement) */
.admin-body {
    background: var(--page-bg);
    min-height: 100vh;
}

.auth-container {
    width: 100%;
    max-width: 450px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.auth-card {
    background: var(--surface);
    border-radius: 16px;
    padding: 28px;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--color-border);
    transition: transform 0.2s ease;
}

.auth-header {
    text-align: center;
    margin-bottom: 30px;
}

.auth-logo {
    width: 80px;
    height: 80px;
    border-radius: 15px;
    margin-bottom: 20px;
    object-fit: cover;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.auth-header h1 {
    font-size: 2rem;
    font-weight: 700;
    background: linear-gradient(45deg, var(--color-primary), var(--color-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 10px;
}

.auth-header p { color: var(--color-muted);
    font-size: 1rem;
    margin: 0;
}

.alert {
    padding: 15px 20px;
    border-radius: 12px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
    animation: slideIn 0.3s ease;
}

.alert-error { background: var(--alpha-danger-10); border: 1px solid var(--alpha-danger-30); color: var(--color-danger); }

.alert-success { background: var(--alpha-success-10); border: 1px solid var(--alpha-success-30); color: var(--color-success); }

.alert-icon {
    font-size: 1.2rem;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

.form-row {
    display: flex;
    gap: 20px;
}

.form-row .form-group {
    flex: 1 1 0;
    margin-bottom: 0;
}

.form-row .form-group input {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group label { font-weight: 600; color: var(--color-text); font-size: 0.9rem; }

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"] {
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 1rem;
    margin-bottom: 0;
    border: 1px solid var(--color-border);
    transition: border-color 0.2s, background-color 0.2s;
    background: var(--surface);
    color: var(--color-text);
}

.form-group input:focus { outline: none; border-color: var(--color-primary); background: var(--surface); box-shadow: 0 0 0 3px var(--alpha-primary-10); }

.form-group input:invalid { border-color: var(--color-danger); }

.form-group input:valid { border-color: var(--color-success); }

.password-input {
    position: relative;
    display: flex;
    align-items: center;
}

.password-input input[type="password"],
.password-input input[type="text"] {
    width: 100%;
    padding-right: 38px;
    box-sizing: border-box;
}

.password-toggle {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    padding: 0;
    margin: 0;
    background: none;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.2s ease;
}

.password-toggle:hover {
    background: rgba(0, 0, 0, 0.05);
}

.password-icon {
    font-size: 1.2rem;
}

.password-strength {
    font-size: 0.95rem;
    margin-top: 5px;
    min-height: 20px;
    color: var(--color-muted);
    font-style: italic;
    display: block;
    transition: color 0.2s;
}

.password-strength:empty {
    display: none;
}

.password-match {
    font-size: 0.8rem;
    margin-top: 5px;
    min-height: 18px;
}

.password-match:empty {
    display: none;
}

.form-help { font-size: 0.8rem; color: var(--color-muted);
    font-style: italic;
    margin-top: 2px;
    margin-bottom: 0;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 0.95rem;
    line-height: 1.4;
    width: 100%;
}

.checkbox-label input[type="checkbox"] {
    display: none;
}

.checkmark {
    width: 16px;
    height: 16px;
    border: 2px solid var(--color-border);
    border-radius: 4px;
    position: relative;
    transition: all 0.3s ease;
    flex-shrink: 0;
    margin-top: 3px;
}

.checkbox-label input[type="checkbox"]:checked + .checkmark { background: var(--color-primary); border-color: var(--color-primary); }

.checkbox-label input[type="checkbox"]:checked + .checkmark::after {
    content: '✓';
    position: absolute;
    top: -2px;
    left: 2px;
    color: white;
    font-size: 12px;
    font-weight: bold;
}

.form-options {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 18px;
    margin: 10px 0 0 0;
    flex-wrap: nowrap;
    width: 100%;
    white-space: nowrap;
}

@media (max-width: 480px) {
    .form-options {
        flex-direction: row;
        align-items: center;
        gap: 10px;
    }
}

.forgot-link { font-size: 0.95rem; color: var(--color-primary);
    text-decoration: none;
    margin-left: 8px;
    transition: color 0.3s ease;
    white-space: nowrap;
}

.forgot-link:hover { color: var(--color-secondary);
    text-decoration: underline;
}

.auth-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 20px;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 50px;
}

.auth-btn-primary { background: var(--color-primary);
    color: white;
    box-shadow: none;
}

.auth-btn-primary:hover {
    background: #5569d6;
}

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

.auth-btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.auth-btn-secondary {
    background: var(--surface-muted);
    color: var(--color-secondary);
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(var(--color-primary-rgb), 0.07);
    transition: background 0.2s, box-shadow 0.2s;
}

.auth-btn-secondary:hover {
    background: var(--color-border);
    color: var(--color-primary);
}

.btn-icon {
    font-size: 1.2rem;
}

.auth-divider {
    display: flex;
    align-items: center;
    margin: 25px 0;
    color: var(--color-muted);
    font-size: 0.9rem;
}

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

.auth-divider span {
    padding: 0 15px;
    
}

.auth-links {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.auth-links p { margin: 0; color: var(--color-muted); font-size: 0.9rem; }

.auth-back {
    text-align: center;
    margin-top: 20px;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--color-muted);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s ease;
}

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

.back-icon {
    font-size: 1.1rem;
}

.demo-info {
    background: var(--surface);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
}

.demo-info h3 {
    margin: 0 0 15px 0;
    color: var(--color-text);
    font-size: 1.1rem;
}

.demo-info p {
    margin: 8px 0;
    color: var(--color-muted);
    font-size: 0.9rem;
}

.demo-info strong { color: var(--color-text); }

.form-row .form-group:last-child input {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    margin-right: 0;
    width: 100%;
    box-sizing: border-box;
}

.terms-group { background: var(--surface-muted);
    border-radius: 8px;
    padding: 0;
    margin-bottom: 0px;
    display: flex;
    align-items: flex-start;
    min-height: 40px;
}
.checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    cursor: pointer;
    font-size: 0.95rem;
    line-height: 1.4;
    width: 100%;
}
.terms-text {
    margin-left: 8px;
    color: var(--color-text);
    font-size: 0.97rem;
    line-height: 1.5;
    word-break: break-word;
}
.terms-link { color: var(--color-primary);
    text-decoration: underline;
    font-weight: 500;
    transition: color 0.2s;
}
.terms-link:hover { color: var(--color-secondary);
    text-decoration: underline;
}

@media (max-width: 480px) {
    .terms-group {
        padding: 10px 8px;
        font-size: 0.93rem;
    }
    .terms-text {
        font-size: 0.93rem;
    }
}

@media (max-width: 600px) {
    .auth-container {
        max-width: 100%;
        padding: 0 10px;
    }
    
    .auth-card {
        padding: 30px 25px;
    }
    
    .form-row {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .form-options {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    
    .auth-header h1 {
        font-size: 1.7rem;
    }
    
    .auth-logo {
        width: 60px;
        height: 60px;
    }
}

@media (max-width: 400px) {
    .auth-card {
        padding: 25px 20px;
        border-radius: 15px;
    }
    
    .auth-btn {
        padding: 12px 16px;
        font-size: 0.9rem;
    }
}

/* ===== News page components ===== */
.u-mb-16 { margin-bottom: var(--space-16); }
.page-title { color: var(--color-secondary); text-align:center; margin:36px 0 24px; font-size:2rem; }
.news-subtitle { color: var(--color-muted); text-align:center; margin:-8px 0 20px; }
.news-meta { margin: 0 0 16px; color: var(--color-muted); font-size: .95rem; text-align:left; }
.news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap: 16px; }
.news-card { display:block; background: var(--surface); border:1px solid var(--color-border); border-radius:12px; overflow:hidden; text-decoration:none; color: var(--color-text); box-shadow: 0 4px 12px rgba(0,0,0,.06); }
.news-card-media { width:100%; height:160px; overflow:hidden; background: var(--surface-muted); }
.news-card-media img { width:100%; height:100%; object-fit:cover; display:block; }
.news-card-content { padding:12px 12px 14px; }
.news-card-date { font-size:.85rem; color: var(--color-muted); margin-bottom:4px; }
.news-card-title { font-weight:700; line-height:1.25; }
/* Hover interactions for news cards */
.news-card { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.news-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.12); border-color: var(--color-primary); }
.news-card:hover .news-card-title { color: var(--color-primary); }
.news-empty { color: var(--color-muted); text-align:center; margin: 40px 0; }

/* ===== Trends page components ===== */
.trends-title { color: var(--color-secondary); text-align:center; margin:36px 0 32px; font-size:2.1rem; }
.trend-deck-list { display:flex; flex-direction:column; gap:32px; max-width:900px; margin:40px auto; }
.trend-deck { background: var(--surface); border-radius:16px; box-shadow: 0 2px 12px rgba(var(--color-primary-rgb), 0.09); padding:28px 32px; display:flex; flex-direction:column; gap:12px; }
.trend-card { background: var(--surface); border-radius:16px; box-shadow: 0 2px 12px rgba(var(--color-primary-rgb), 0.09); padding:28px 32px; display:flex; flex-direction:column; gap:12px; border:1px solid var(--color-border); }
.trend-card__header { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
/* Compact metric pills in header - standardized size & colors */
.trend-card__header .trend-meta {
    --pill-h: 48px;
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:1rem;
    background: var(--surface-muted);
    border: 1px solid var(--color-border);
    padding: 8px 14px;
    min-height: var(--pill-h);
    border-radius: 9999px;
    line-height: 1;
}
/* Softer label color, keep numbers readable */
.trend-card__header .trend-meta strong {
    color: var(--color-muted);
    font-weight:700;
    margin-right:4px;
}
.trend-meta--right { margin-left:auto; }
.trend-card__header .like-heart { color: var(--color-primary); }
.trend-rank-badge { display:flex; align-items:center; gap:8px; }
.rank-badge { width:32px; height:32px; border-radius:50%; object-fit:cover; border:1px solid var(--color-border); background: var(--surface-muted); box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
/* Inside header pills, make the rank icon slightly smaller to match pill height */
.trend-card__header .rank-badge { width:28px; height:28px; }
.rank-label { font-weight:700; color: var(--color-text); }
.trend-cards { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:8px; }
.trend-count { font-size:1.05rem; color: var(--color-text); font-weight:700; }
.trend-rank { font-size:1.5rem; color: var(--color-primary); font-weight:900; margin-right:18px; }
.trend-likes { font-size:1.05rem; color: var(--color-text); font-weight:700; }
.trend-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:6px; }
.like-button { padding:8px 12px; border-radius:10px; border:1px solid var(--color-border); background: var(--surface-muted); color: var(--color-text); cursor:pointer; transition: background .15s ease, color .15s ease, border-color .15s ease; }
.like-button:hover { background: var(--alpha-primary-10); border-color: var(--color-primary); color: var(--color-primary); }
.like-button.is-liked { background: var(--alpha-primary-20); border-color: var(--color-primary); color: #fff; }
.btn-add { padding:8px 12px; border-radius:10px; border:1px solid var(--color-border); background: var(--surface-muted); color: var(--color-secondary); cursor:pointer; text-decoration:none; transition: background .15s ease, color .15s ease; }
.btn-add:hover { background: var(--color-border); color: var(--color-primary); }
@media (max-width: 700px) {
    .trend-deck-list { padding: 0 8px; }
    .trend-deck, .trend-card { padding: 18px 8px; }
}

/* Trait badges inline (used on trends) */
.trait-bonuses-inline{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:8px; }
.tbi-mini{ display:inline-flex; align-items:center; gap:8px; background: rgba(var(--surface-rgb), 0.8); border:1px solid var(--color-border); border-radius:9999px; padding:6px 10px; }
.tbi-mini .tbi-icon{ width:24px; height:24px; }
.tbi-mini .tbi-badge{ font-size:.9rem; font-weight:700; color: var(--color-primary); min-width:38px; text-align:center; }
.tbi-mini.inactive{ opacity:.6; border-color: var(--color-border); background: var(--surface-muted); }
.tbi-mini.inactive .tbi-badge{ color: var(--color-muted); }

/* Trait tooltip */
.trait-tooltip{ position:fixed; display:none; z-index:3500; pointer-events:none; }
.trait-tooltip .tt-box{ background:#1f2937; color:#f9fafb; border:1px solid rgba(255,255,255,0.08); border-radius:10px; padding:12px 14px; box-shadow:0 10px 30px rgba(0,0,0,.28); max-width:360px; font-size:13px; line-height:1.35; }
.trait-tooltip .tt-header{ display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.trait-tooltip .tt-icon{ width:22px; height:22px; }
.trait-tooltip .tt-title{ font-weight:700; }
.trait-tooltip .tt-meta{ color:#cbd5e1; margin:4px 0; }
.trait-tooltip .tt-count{ color: var(--color-primary); font-weight:800; }
.trait-tooltip .tt-desc{ color:#e5e7eb; white-space:pre-wrap; }
.trait-tooltip .tt-sep{ height:1px; background:rgba(255,255,255,0.08); margin:8px 0; }
.trait-tooltip .tt-list{ display:flex; flex-direction:column; gap:6px; }
.trait-tooltip .tt-row{ display:flex; align-items:center; gap:8px; }
.trait-tooltip .tt-th{ min-width:22px; height:22px; border-radius:6px; background:#374151; color:#e5e7eb; font-weight:700; display:inline-flex; align-items:center; justify-content:center; font-size:12px; }
.trait-tooltip .tt-row.active .tt-th{ background: var(--color-primary); color:#fff; }
.trait-tooltip .tt-tx{ flex:1; color:#e5e7eb; }

/* ===== Header News dropdown ===== */
.btn.btn-news{ position:relative; z-index:2147483646; transition:background .15s ease, color .15s ease; cursor:pointer; background: var(--surface-muted); color: var(--color-secondary); border:none; box-shadow: 0 2px 8px rgba(var(--color-primary-rgb), 0.07); }
.btn.btn-news:hover{ background: var(--color-border); color: var(--color-primary); }
.news-panel{ display:none; position:fixed; width:420px; max-width:90vw; background: var(--surface); border:1px solid var(--color-border); box-shadow:0 12px 28px rgba(31,41,55,.18); border-radius:14px; padding:10px; z-index:2147483647; overflow:hidden; }
.news-loading{ padding:10px 12px; color: var(--color-muted); font-size:.95rem; }
.news-error{ display:none; color: var(--color-danger); padding:10px 12px; font-size:.95rem; }
.news-list{ display:flex; flex-direction:column; gap:6px; max-height:60vh; overflow:auto; padding:4px; }
.news-item{ display:flex; gap:10px; align-items:center; padding:8px; border-radius:10px; text-decoration:none; color: var(--color-text); transition:background .15s ease; }
.news-item:hover{ background: var(--surface-muted); }
.news-thumb{ flex:0 0 64px; height:64px; border-radius:8px; background: var(--surface-muted); object-fit:cover; }
/* Scope meta/title/date inside panel to avoid conflict with news page .news-meta */
.news-panel .news-meta{ display:flex; flex-direction:column; min-width:0; }
.news-panel .news-title{ font-weight:700; font-size:.95rem; line-height:1.2; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.news-panel .news-date{ font-size:.8rem; color: var(--color-muted); margin-top:2px; }
.news-footer{ display:none; padding:6px 4px 2px; }

/* ===== Maintenance banner ===== */
.maintenance-popup{ position:fixed; top:0; left:0; width:100vw; z-index:99999; background: var(--color-danger); color:#fff; padding:18px 0; text-align:center; font-size:1.15rem; font-weight:600; box-shadow:0 2px 8px rgba(var(--color-danger-rgb), 0.33); }

/* ===== CR Tag modal (from index) ===== */
.tag-modal-backdrop { position: fixed; inset: 0; background: rgba(9,14,31,0.45); display: none; align-items: center; justify-content: center; z-index: 1000; }
.tag-modal { width: min(92vw, 420px); background: var(--surface); border-radius: 14px; box-shadow: 0 12px 40px rgba(0,0,0,0.18); padding: 20px 18px; }
.tag-modal h3 { margin: 0 0 8px; font-size: 1.25rem; color: var(--color-primary); }
.tag-modal p { margin: 0 0 12px; color: var(--color-muted); }
.tag-form { display: flex; gap: 8px; margin-top: 8px; }
.tag-form input[type="text"] { flex: 1; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: 8px; }
.tag-actions { display: flex; gap: 8px; margin-top: 12px; }
.tag-modal .btn-primary { background: var(--color-primary); color: #fff; border: 0; padding: 10px 14px; border-radius: 8px; cursor: pointer; }
.tag-modal .btn-secondary { background: var(--surface-muted); color: var(--color-text); border: 0; padding: 10px 14px; border-radius: 8px; cursor: pointer; }
.tag-modal .btn-secondary:hover { background: var(--color-danger); color: #fff; }
.tag-error { color: var(--color-danger); font-size: 0.9rem; margin-top: 6px; min-height: 20px; }

/* ===== Admin Dashboard ===== */
.admin-dashboard { max-width: 1080px; margin: 24px auto 0 auto; background: var(--surface); border-radius: 16px; box-shadow: 0 8px 32px rgba(var(--color-primary-rgb), 0.10); padding: 28px; }
.admin-dashboard > .admin-console,
.admin-dashboard > .admin-table,
.admin-dashboard > .admin-deck-pools,
.admin-dashboard > .admin-card-traits,
.admin-dashboard > .admin-global-add,
.admin-dashboard > #homepage_meta,
.admin-dashboard > .admin-maintenance {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}
.admin-dashboard > * + * { margin-top: 24px; }
.admin-title { font-size: 2.2rem; color: var(--color-secondary); margin-bottom: 18px; }
.admin-menu { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; justify-content: center; }
.admin-menu a { min-width: 110px; max-width: 180px; text-align: center; font-size: 1rem; padding: 12px 24px; border-radius: 8px; font-weight: 600; transition: background 0.2s; white-space: normal; background: var(--color-primary); color:#fff; text-decoration:none; }
.admin-menu a.active { background: var(--color-secondary); }
@media (max-width: 900px) {
    .admin-menu a { min-width: 90px; font-size: 0.95rem; padding: 8px 10px; }
}
.admin-summary { display: flex; gap: 32px; margin-bottom: 32px; }
.admin-card { background: var(--surface-muted); border-radius: 10px; padding: 24px; flex: 1; text-align: center; box-shadow: 0 2px 8px rgba(var(--color-primary-rgb), 0.07); }
.admin-card-title { font-size: 1.1rem; color: var(--color-secondary); margin-bottom: 8px; }
.admin-card-number { font-size: 1.7rem; color: var(--color-primary); font-weight: 700; }

/* Admin flash messages */
.admin-flash { padding:12px 16px; border-radius:10px; margin-bottom:16px; font-weight:600; }
.admin-flash.success { background: rgba(var(--color-success-rgb), 0.12); color: var(--color-success); border: 1px solid rgba(var(--color-success-rgb), 0.28); }
.admin-flash.error { background: rgba(var(--color-danger-rgb), 0.10); color: var(--color-danger); border: 1px solid rgba(var(--color-danger-rgb), 0.28); }
.admin-flash.info { background: rgba(var(--color-primary-rgb), 0.10); color: var(--color-text); border: 1px solid rgba(var(--color-primary-rgb), 0.22); }

/* Admin panels & headings */
.admin-panel { background: var(--surface-muted); border-radius:14px; box-shadow: var(--shadow-sm); padding:20px; }
.admin-panel--white { background: var(--surface); }
.admin-panel h2, .admin-panel h3 { color: var(--color-secondary); margin: 0 0 14px 0; }

/* Admin toolbar */
.admin-toolbar { display:flex; gap:16px; align-items:center; flex-wrap:wrap; margin-bottom: 16px; }

/* Admin form */
.admin-form { display:flex; flex-direction:column; gap:16px; }
.admin-form-row { display:flex; flex-wrap:wrap; gap:16px; align-items:flex-end; }
.admin-field { display:flex; flex-direction:column; gap:6px; }
.admin-field label { font-size:0.95rem; color: var(--color-primary); font-weight:600; }
.admin-input, .admin-select, .admin-textarea { padding:10px 12px; border-radius:8px; border:1px solid var(--color-border); font-size:1rem; background: var(--surface); color: var(--color-text); }
.admin-textarea { resize:vertical; min-height:60px; }
/* Placeholders en teinte adoucie dans l'admin */
.admin-input::placeholder, .admin-textarea::placeholder { color: var(--color-muted); }

/* Small utilities for width/margins */
.u-ox-auto { overflow-x:auto; }
.u-gap-18 { gap:18px; }
.u-gap-24 { gap:24px; }
.u-gap-36 { gap:36px; }
.u-w-90px { width:90px !important; }
.u-w-100px { width:100px !important; }
.u-w-110px { width:110px !important; }
.u-w-140px { width:140px !important; }
.u-minw-320 { min-width:320px !important; }
.u-maxw-400 { max-width:400px !important; }
.u-mb-12 { margin-bottom:12px; }
.u-mb-18 { margin-bottom:18px; }
.u-mb-8 { margin-bottom:8px; }
.u-mb-10 { margin-bottom:10px; }
.u-mt-12 { margin-top:12px; }
.u-ml-auto { margin-left:auto; }
.u-mr-2 { margin-right:2px; }
.u-inline { display:inline; }
.u-inline-block { display:inline-block; }
.u-m-0 { margin:0 !important; }
.u-shrink-0 { flex-shrink:0 !important; }
.u-ai-start { align-items:flex-start !important; }
.u-p-14 { padding:14px !important; }
.u-underline { text-decoration: underline !important; }
.u-fs-95 { font-size: 0.95rem !important; }
.u-flex-1 { flex:1; }
.u-minw-80px { min-width:80px !important; }
.u-minw-120px { min-width:120px !important; }
.text-muted, .u-text-muted { color: var(--color-muted); }

/* Chips for selected cards */
.chip { display:inline-flex; align-items:center; gap:6px; background: var(--surface-muted); border-radius:8px; padding:4px 10px; border:1px solid var(--color-border); }
.chip img { width:28px; height:28px; }
.selected-cards { display:flex; flex-wrap:wrap; gap:8px; max-width:900px; }

/* Pool list & cards */
.pool-list { display:flex; flex-wrap:wrap; gap:24px; margin-bottom:28px; justify-content:center; }
.pool-card { background: var(--surface); border-radius:14px; padding:18px 22px; box-shadow:0 3px 12px rgba(var(--color-primary-rgb), 0.10); position:relative; gap:10px; align-items:center; min-width:300px; max-width:400px; width:100%; border:2px solid transparent; display:flex; flex-direction:column; }
.pool-card.is-active { border-color: var(--color-primary); }
.pool-header { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; width:100%; }
.pool-title { font-weight:800; color: var(--color-text); font-size:1.22rem; }
.pool-subtitle { color: var(--color-muted); font-size:1.01rem; }
.badge { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:12px; font-weight:700; font-size:0.92rem; }
.badge-active { background: var(--color-primary); color:#fff; box-shadow: 0 2px 8px rgba(var(--color-primary-rgb), 0.2); }
.pool-actions { display:flex; gap:18px; justify-content:center; margin-top:18px; width:100%; }
.btn-block { display:block; width:170px; padding:13px 0; border-radius:7px; }

/* Cards modal selection: selected state */
#adminCardsGallery .card.is-selected { border-color: var(--color-primary); background: var(--alpha-primary-10); }

/* Assign card info block */
.card-trait-block { background: var(--surface); border-radius:12px; padding:18px; box-shadow:0 2px 8px rgba(var(--color-primary-rgb), 0.07); min-width:280px; max-width:360px; display:flex; flex-direction:column; gap:10px; }
.card-trait-block .header { display:flex; align-items:center; gap:10px; }
.card-trait-block .fields { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }

/* Trait season section */
.pool-trait-config { border:1px solid var(--color-border); border-radius:12px; overflow:hidden; }
.pool-trait-header { background: var(--surface-muted); padding:10px 14px; display:flex; align-items:center; gap:10px; }
.trait-card { flex:1 1 340px; min-width:300px; background: var(--surface-muted); border-radius:12px; padding:14px; border:1px solid var(--color-border); }
.trait-card .trait-head { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.trait-card .thr-row { display:flex; gap:8px; align-items:center; margin-bottom:6px; }

/* Status helper */
.status { font-weight:600; margin-top:18px; }
.status.is-on { color: var(--color-danger); }
.status.is-off { color: var(--color-primary); }

/* Admin overlay modal */
.admin-overlay { display:none; position:fixed; top:0; left:0; width:100vw; height:100vh; background:rgba(0,0,0,0.25); z-index:2147483646; align-items:center; justify-content:center; }
.admin-modal-card { background: var(--surface); padding:32px; border-radius:16px; box-shadow:0 8px 32px rgba(var(--color-primary-rgb), 0.10); display:flex; flex-direction:column; gap:16px; min-width:320px; max-width:90vw; max-height:80vh; overflow-y:auto; }

/* Hides modal cards gallery scrollbars */
#adminCardsGallery::-webkit-scrollbar { display: none; }
#adminCardsGallery { scrollbar-width: none; -ms-overflow-style: none; }

/* Admin base table */
.admin-table-table { width:100%; margin-top:12px; background: var(--surface); border-radius:10px; box-shadow:0 2px 8px rgba(var(--color-primary-rgb), 0.07); table-layout:auto; border-collapse: separate; border-spacing: 0; }
.admin-table-table thead tr { background: var(--color-border); color: var(--color-secondary); font-weight:600; }
.admin-table-table th { padding:10px 8px; text-align:center; white-space:nowrap; font-size:1rem; }
.admin-table-table td { padding:9px 8px; text-align:center; white-space:nowrap; font-size:.98rem; }

/* ===== Responsive Admin ===== */
@media (max-width: 1024px) {
    .admin-summary { flex-direction: column; gap: 16px; }
    .admin-dashboard { padding: 20px; }
}
@media (max-width: 900px) {
    .admin-menu { gap: 8px; }
    .admin-menu a { min-width: auto; padding: 10px 14px; font-size: .95rem; }
    .admin-table-table th, .admin-table-table td { font-size: .95rem; white-space: nowrap; }
}
@media (max-width: 760px) {
    /* Table: scroll horizontal confortable */
    .admin-table > div { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .admin-table-table { min-width: 720px; }
    /* Pools cards affichage colonne */
    .admin-deck-pools .u-flex.u-flex-col { min-width: 100% !important; width: 100% !important; max-width: 100% !important; }
    .admin-deck-pools h2 { font-size: 1.3rem; }
}
@media (max-width: 600px) {
    .admin-dashboard { padding: 14px; }
    .admin-title { font-size: 1.6rem; }
    .admin-card-number { font-size: 1.3rem; }
    /* Formulaires: pleine largeur */
    #createPoolForm > div { gap: 12px; }
    #createPoolForm label { font-size: .95rem; }
    #createPoolForm input, #createPoolForm select, #createPoolForm textarea { width: 100% !important; max-width: 100% !important; }
    /* Modales */
    .modal-content { width: 94%; max-width: 94%; }
    .cards-gallery { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
}
@media (max-width: 420px) {
    .admin-menu a { padding: 8px 10px; font-size: .9rem; }
    .btn, .btn-primary, .btn-danger { padding: 9px 16px; font-size: .92rem; }
}
/* Admin cards gallery layout override */
#adminCardsGallery { display:grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; margin-bottom: 18px; }

/* Admin modal forms scrollbars hidden */
#addForm::-webkit-scrollbar { display: none; }
#addForm { scrollbar-width: none; }
#editForm::-webkit-scrollbar { display: none; }
#editForm { scrollbar-width: none; }

/* Generic admin buttons */
.btn-primary { background: var(--color-primary); color:#fff; padding:10px 22px; border-radius:8px; border:none; font-weight:600; }
.btn-primary:disabled { background: rgba(var(--color-primary-rgb), 0.45); cursor:not-allowed; }
.btn-danger { background: var(--color-danger); color:#fff; padding:10px 22px; border-radius:8px; border:none; font-weight:600; }
.btn-amber { background: var(--color-warning); color:#fff; padding:8px 14px; border-radius:8px; border:none; font-weight:600; }
.btn-emerald { background: var(--color-success); color:#fff; padding:8px 14px; border-radius:8px; border:none; font-weight:600; }
.btn-red { background: var(--color-danger); color:#fff; padding:8px 14px; border-radius:8px; border:none; font-weight:600; }

/* Tooltips for cards (replaces inline styles in JS) */
.tooltip { background:#1f2937; color:#f9fafb; border:1px solid rgba(255,255,255,0.1); border-radius:8px; padding:10px 12px; box-shadow:0 8px 24px rgba(0,0,0,0.25); max-width:280px; font-size:13px; line-height:1.35; }
.tooltip-title { font-weight:600; margin-bottom:4px; }
.tooltip-meta { color:#cbd5e1; margin-bottom:6px; }
.tooltip-desc { color:#e5e7eb; white-space:pre-wrap; }
.btn-sm { padding:6px 14px; border-radius:6px; font-size:.92rem; }