/* ==========================================================================
   CYBEXIA STORAGE - CUSTOM THEME "CYBER-PREMIUM" V2
   ========================================================================== */

/* Importation des typographies officielles Cybexia */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Roboto+Mono:wght@500;700&display=swap');

:root {
    --primary: #00E5FF; 
    --primary-hover: #00B8D4;
    --text: #E0E0E0;
    --background: #0A0A0B; 
    --surface: #141416; 
    --border: rgba(255, 255, 255, 0.05);
}

/* Application de la police de lecture globale (Inter) */
body, #app, input, button, .action {
    background-color: var(--background) !important;
    color: var(--text) !important;
    font-family: 'Inter', sans-serif !important;
}

/* =========================================================
   TYPOGRAPHIE "CYBEXIA CLOUD" (Titres et Logo texte)
   ========================================================= */
#login h1, 
.header-title, 
.brand {
    font-family: 'Roboto Mono', monospace !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    color: #FFFFFF !important;
}

/* Ajustement de la taille du logo sur la page de login */
#login img {
    max-width: 250px !important;
    margin-bottom: 20px !important;
    /* Optionnel : ajoute un léger glow cyber autour du logo */
    filter: drop-shadow(0px 0px 10px rgba(0, 229, 255, 0.2));
}

/* Design des boutons et panneaux (identique V1) */
header {
    background-color: rgba(20, 20, 22, 0.8) !important;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border) !important;
}

.button, button, .btn {
    background-color: var(--primary) !important;
    color: #000000 !important;
    border-radius: 4px !important;
    font-weight: 600 !important;
    font-family: 'Roboto Mono', monospace !important; /* Boutons en mode terminal */
}

.card, .modal {
    background-color: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
}

#login .card {
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8) !important;
}