:root {
    --bg: #0f172a;
    --panel: #1e293b;
    --panel-2: #334155;
    --line: #475569;
}

html, body {
    background: var(--bg);
    color: #e2e8f0;
    min-height: 100vh;
}

.page { padding: 16px 12px 48px; }

.navbar { background: var(--panel) !important; }
.navbar .app-name { font-weight: 700; color: #f1f5f9; }
.lang-flags a { font-size: 18px; opacity: .55; margin-left: 6px; }
.lang-flags a:hover, .lang-flags a.active { opacity: 1; }

.box-dark { background: var(--panel); }
.divider { border-top: 1px solid var(--panel-2); margin: 12px 0; }
.label-upper { text-transform: uppercase; letter-spacing: .5px; font-size: 12px; }

.balance-amount { font-size: 34px; font-weight: 800; text-align: center; padding: 14px 0; }

.avatar-circle { border-radius: 50%; background: var(--panel-2); color:#fff; font-size:26px; display:flex; align-items:center; justify-content:center; width:64px; height:64px;}

/* Login */
.login-card { max-width: 460px; margin: 0 auto; background: var(--panel); border-radius: 14px; }
.card-icon-wrap { position: relative; width: 92px; height: 92px; margin: 0 auto 18px; }
.card-icon { position: relative; background:#2563eb; border-radius:50%; width:92px; height:92px; display:flex; align-items:center; justify-content:center; font-size:40px; z-index:1; }
.pulse-ring { position:absolute; inset:0; border-radius:50%; background:#dbeafe; animation:pulse 2s ease-out infinite; }
.pulse-ring { background: transparent; border: 2px solid #60a5fa; }
@keyframes pulse { 0% { transform: scale(.8); opacity:.7 } 100% { transform: scale(1.5); opacity:0 } }
.card-input { position:absolute; left:-9999px; top:-9999px; opacity:0; width:1px; height:1px; }
.status-bar { transition: all .2s; }
.status-bar.reading { background:#eff6ff; color:#1e40af; }
.status-bar.error { background:#fef2f2; color:#dc2626; border-color:#fecaca; }
.lang-btn { display:flex; flex-direction:column; align-items:center; gap:4px; height:auto; padding:16px; }
.lang-screen { max-width:520px; margin: 6vh auto 0; text-align:center; }

.logout-btn { color:#fca5a5 !important; }

/* Login — rangée « cartes enregistrées » : select + bouton ✕ alignés */
.saved-card-field { align-items: stretch; }
.saved-card-field .select { width: 100%; }

/* Top-up */
.amount-btn { height:52px; font-weight:700; }
#step2 .spinner { width:42px; height:42px; border:3px solid rgba(59,130,246,.2); border-top-color:#3b82f6; border-radius:50%; animation:spin .8s linear infinite; margin:0 auto 14px; }
@keyframes spin { to { transform: rotate(360deg); } }

.barcode-target { background:#fff; border-radius:8px; padding:14px; }
.cgu-box p { color:#cbd5e1; }