/* Palette officielle Uplink D360. Le petit logo est réservé à l'application. */
:root, body {
    --bg-primary: #0b1423; --bg-card: #142237; --bg-input: #1a2c44;
    --text-primary: #f3f7fc; --text-secondary: #b0bfd3; --border-color: #2b405b;
    --accent-color: #45b9f4; --accent-cyan: var(--accent-color); --brand-blue: #0076b8;
    --brand-blue-deep: #065395; --brand-orange: #ff970a; --on-orange: #172b46;
    --on-brand: #ffffff; --brand-soft: #172f4a; --orange-soft: #3c2c17;
    --soft-shadow: 0 6px 24px rgba(0, 8, 24, .12);
    --bg-body: var(--bg-primary); --input-bg: var(--bg-input); --text-color: var(--text-primary);
    --bg: var(--bg-primary); --panel: var(--bg-card); --panel-soft: var(--bg-input);
    --text: var(--text-primary); --muted: var(--text-secondary); --line: var(--border-color);
    --accent: var(--accent-color); --accent-gradient: linear-gradient(120deg, var(--brand-blue), var(--brand-blue-deep));
    --shadow-card: var(--soft-shadow); color-scheme: dark;
}
html.light-mode, body.light-mode {
    --bg-primary: #f2f7fc; --bg-card: #ffffff; --bg-input: #f5f8fc;
    --text-primary: #16324a; --text-secondary: #5a6e84; --border-color: #dce7f1;
    --accent-color: #006fae; --brand-soft: #e9f4fc; --orange-soft: #fff1dc;
    --soft-shadow: 0 6px 24px rgba(27, 77, 117, .045); color-scheme: light;
}
body, body.light-mode { background: var(--bg-primary); color: var(--text-primary); }
body .logo-wrap img { width: 240px; max-width: 100%; height: auto; }
body .auth-container { border-radius: 20px; box-shadow: var(--soft-shadow); }
body .auth-container button[type="submit"], body .btn-primary {
    background: var(--brand-orange); color: var(--on-orange); border-color: var(--brand-orange);
}
body .sidebar { background: var(--bg-card); border-color: var(--border-color); }
body .brand img { display: block; width: 180px; max-width: 100%; margin: -18px 0; }
body .nav-item.active { background: var(--brand-blue); color: var(--on-brand); }
body.light-mode {
    --bg-body: var(--bg-primary); --input-bg: var(--bg-input); --text-color: var(--text-primary);
    --bg: var(--bg-primary); --panel: var(--bg-card); --panel-soft: var(--bg-input);
    --text: var(--text-primary); --muted: var(--text-secondary); --line: var(--border-color);
    --accent: var(--accent-color); --accent-gradient: linear-gradient(120deg, var(--brand-blue), var(--brand-blue-deep));
}
body.light-mode .sidebar { background: var(--bg-card); border-color: var(--border-color); }
body.light-mode .nav-item.active { background: var(--brand-blue); color: var(--on-brand); }
body .auth-container button[type="submit"], body.light-mode .btn-primary { background: var(--brand-orange); color: var(--on-orange); box-shadow: none; }
body.verification-page .card { background: var(--bg-card); border-color: var(--border-color); box-shadow: var(--soft-shadow); }
body.verification-page .logo-wrap { text-align: center; }
body.verification-page .subtitle { color: var(--text-secondary); }
body.verification-page .field span { color: var(--text-primary); }
body.verification-page .field input { background: var(--bg-input); color: var(--text-primary); border-color: var(--border-color); }
body.verification-page .btn { background: var(--brand-orange); color: var(--on-orange); }
/* Même couleur de niveau pour les avatars membre et boutique, dans les deux thèmes. */
body [data-profile-level] { --profile-ring-color: var(--border-color); }
body [data-profile-level="1"] { --profile-ring-color: var(--brand-blue); }
body [data-profile-level="2"] { --profile-ring-color: var(--accent-color); }
body [data-profile-level="3"] { --profile-ring-color: var(--brand-orange); }
body [data-profile-level="4"], body [data-profile-level="5"] { --profile-ring-color: var(--success); }