/* -------------------------------------------------------------
   ABCHANGE STYLESHEET - PREMIUM DARK FINTECH DESIGN
   ------------------------------------------------------------- */

/* Custom Properties & Design System tokens */
:root {
    /* Fonts */
    --font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    /* Theme colors - Dark Mode (Default) */
    --bg-primary: #060a17;
    --bg-secondary: #0c1225;
    --bg-card: rgba(17, 25, 47, 0.7);
    --bg-card-hover: rgba(22, 33, 62, 0.85);
    --bg-input: #0f1833;
    --border-color: rgba(255, 255, 255, 0.06);
    --border-hover: rgba(0, 102, 255, 0.4);
    --text-primary: #ffffff;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --shadow-color: rgba(0, 0, 0, 0.5);
    --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);

    /* Accents (Constant across themes) */
    --color-accent: #0066FF;        /* Electric Blue */
    --color-accent-hover: #0052cc;
    --color-accent-rgb: 0, 102, 255;
    --color-positive: #00E5A3;      /* Turquoise Green */
    --color-positive-rgb: 0, 229, 163;
    --color-warning: #FF9900;       /* Orange / Golden Yellow */
    --color-warning-hover: #e68a00;
    --color-negative: #ff3b30;      /* Red (rejections, deletions) */
    --color-negative-hover: #e02d23;
    --color-negative-rgb: 255, 59, 48;
    --danger: #ff3b30;              /* Alias used by inline styles in index.html */
    
    /* Layout Constants */
    --container-max-width: 1200px;
    --header-height: 80px;
    --border-radius-sm: 8px;
    --border-radius-md: 16px;
    --border-radius-lg: 24px;
    
    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    
    color-scheme: dark;
}

/* Dark Theme Variables (Explicit & Default) */
[data-theme="dark"] {
    --bg-primary: #060a17;
    --bg-secondary: #0c1225;
    --bg-card: rgba(17, 25, 47, 0.7);
    --bg-card-hover: rgba(22, 33, 62, 0.85);
    --bg-input: #0f1833;
    --border-color: rgba(255, 255, 255, 0.06);
    --border-hover: rgba(0, 102, 255, 0.4);
    --text-primary: #ffffff;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --shadow-color: rgba(0, 0, 0, 0.5);
    --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    color-scheme: dark;
}

/* Light Theme Variables */
[data-theme="light"] {
    --bg-primary: #f8fafc;
    --bg-secondary: #f1f5f9;
    --bg-card: rgba(255, 255, 255, 0.8);
    --bg-card-hover: rgba(255, 255, 255, 0.95);
    --bg-input: #ffffff;
    --border-color: rgba(0, 0, 0, 0.08);
    --border-hover: rgba(0, 102, 255, 0.3);
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #64748b;
    --shadow-color: rgba(148, 163, 184, 0.15);
    --glass-shadow: 0 8px 32px 0 rgba(148, 163, 184, 0.1);
    color-scheme: light;
}

/* Midnight / Bleu Nuit Theme Variables */
[data-theme="midnight"] {
    --bg-primary: #070d1e;
    --bg-secondary: #0d1730;
    --bg-card: rgba(15, 27, 56, 0.75);
    --bg-card-hover: rgba(22, 39, 80, 0.85);
    --bg-input: #101c3d;
    --border-color: rgba(0, 102, 255, 0.15);
    --border-hover: rgba(0, 210, 255, 0.45);
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --shadow-color: rgba(0, 0, 0, 0.6);
    --glass-shadow: 0 8px 32px 0 rgba(0, 30, 80, 0.4);
    --color-accent: #0066FF;
    color-scheme: dark;
}

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.6;
    overflow-x: hidden;
    transition: background-color var(--transition-normal), color var(--transition-normal);
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-fast);
}

button, input, select, textarea {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    background: none;
    border: none;
    outline: none;
}

/* Global Select & Option Theme Styling */
select {
    background-color: var(--bg-input);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    color-scheme: inherit;
}

select option,
select optgroup,
.trade-select option,
.trade-select optgroup,
.form-input option,
.form-input optgroup,
.form-group select option {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    padding: 10px 14px;
    font-size: 0.95rem;
    font-family: var(--font-body);
}

select option:checked,
select option:hover {
    background-color: var(--color-accent) !important;
    color: #ffffff !important;
}

/* Theme-specific option background locks */
[data-theme="dark"] select,
[data-theme="dark"] select option,
[data-theme="dark"] select optgroup,
[data-theme="dark"] .trade-select,
[data-theme="dark"] .trade-select option,
[data-theme="dark"] .form-input,
[data-theme="dark"] .form-input option {
    background-color: #0c1225 !important;
    color: #ffffff !important;
    color-scheme: dark !important;
}

[data-theme="midnight"] select,
[data-theme="midnight"] select option,
[data-theme="midnight"] select optgroup,
[data-theme="midnight"] .trade-select,
[data-theme="midnight"] .trade-select option,
[data-theme="midnight"] .form-input,
[data-theme="midnight"] .form-input option {
    background-color: #0d1730 !important;
    color: #f1f5f9 !important;
    color-scheme: dark !important;
}

[data-theme="light"] select,
[data-theme="light"] select option,
[data-theme="light"] select optgroup,
[data-theme="light"] .trade-select,
[data-theme="light"] .trade-select option,
[data-theme="light"] .form-input,
[data-theme="light"] .form-input option {
    background-color: #ffffff !important;
    color: #0f172a !important;
    color-scheme: light !important;
}

button {
    cursor: pointer;
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Utility Layouts */
.container {
    width: 100%;
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 24px;
}

.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }
.font-medium { font-weight: 500; }
.font-bold { font-weight: 700; }
.text-white { color: #ffffff !important; }
.text-accent { color: var(--color-accent) !important; }
.text-positive { color: var(--color-positive) !important; }
.text-warning { color: var(--color-warning) !important; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mb-4 { margin-bottom: 1rem; }

/* Badges */
.badge-container {
    margin-bottom: 1rem;
}

.badge {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-family: var(--font-heading);
}

.badge-accent {
    background-color: rgba(var(--color-accent-rgb), 0.15);
    color: #4da6ff;
    border: 1px solid rgba(var(--color-accent-rgb), 0.3);
}

.badge-positive {
    background-color: rgba(var(--color-positive-rgb), 0.12);
    color: var(--color-positive);
    border: 1px solid rgba(var(--color-positive-rgb), 0.25);
}

.badge-warning {
    background-color: rgba(255, 153, 0, 0.12);
    color: var(--color-warning);
    border: 1px solid rgba(255, 153, 0, 0.25);
}

/* Common Section Header */
.section-header {
    margin-bottom: 4rem;
}

.section-title {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1.2;
    margin-top: 0.75rem;
    margin-bottom: 1.25rem;
    letter-spacing: -0.02em;
}

.section-subtitle {
    color: var(--text-secondary);
    max-width: 650px;
    margin: 0 auto;
    font-size: 1.125rem;
}

/* Glassmorphism Panel */
.glass-panel {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: var(--glass-shadow);
    transition: transform var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal);
}

.glass-panel:hover {
    border-color: var(--border-hover);
    box-shadow: 0 12px 40px rgba(0, 102, 255, 0.15);
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    border-radius: var(--border-radius-sm);
    font-weight: 600;
    transition: all var(--transition-fast);
    gap: 8px;
    text-align: center;
}

.btn-primary {
    background-color: var(--color-accent);
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(var(--color-accent-rgb), 0.4);
}

.btn-primary:hover {
    background-color: var(--color-accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(var(--color-accent-rgb), 0.6);
}

.btn-accent {
    background-color: var(--color-positive);
    color: #060a17;
    box-shadow: 0 4px 14px rgba(var(--color-positive-rgb), 0.3);
}

.btn-accent:hover {
    background-color: #00cc90;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(var(--color-positive-rgb), 0.5);
}

/* .btn-secondary and .btn-danger were used in a dozen places (Supprimer, Masquer,
   Retirer...) without ever being defined, so those buttons were indistinguishable from
   the primary ones. */
.btn-secondary {
    background-color: var(--bg-input);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.btn-secondary:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.btn-danger {
    background-color: rgba(var(--color-negative-rgb), 0.12);
    color: var(--color-negative);
    border: 1px solid rgba(var(--color-negative-rgb), 0.35);
}

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

.btn-full {
    width: 100%;
}

.btn-lg {
    padding: 16px 32px;
    font-size: 1.125rem;
    border-radius: var(--border-radius-sm);
}

/* .btn-sm was used on every compact dashboard action (header "+ Ajouter" buttons,
   table row actions...) without ever being defined, so those buttons rendered at
   full .btn size instead of the compact size their context needs. */
.btn-sm {
    padding: 7px 14px;
    font-size: 0.82rem;
    gap: 6px;
}

/* Gradient Text */
.gradient-text {
    background: linear-gradient(135deg, #00D2FF 0%, #0066FF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Header & Navigation */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-height);
    background-color: rgba(6, 10, 23, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-color);
    z-index: 1000;
    transition: background-color var(--transition-normal);
}

body[data-theme="light"] .header {
    background-color: rgba(248, 250, 252, 0.85);
}

.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}

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

.logo-icon {
    width: 32px;
    height: 32px;
}

.logo-text {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--text-primary);
}

/* Official ABCHANGE logo image (https://www.abchange.net/logo/abchange.jpg) - used as-is everywhere,
   scaled uniformly via a height constraint only (object-fit: contain keeps its
   exact proportions, never crops or distorts it). */
.brand-logo-img {
    display: block;
    height: 42px;
    width: auto;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 8px;
}
#nav-logo .brand-logo-img {
    height: 34px;
}
.brand-logo-img.brand-logo-lg {
    height: 56px;
}
.brand-logo-img.brand-logo-sm {
    height: 36px;
}

.nav-menu {
    display: flex;
    align-items: center;
}

.nav-list {
    display: flex;
    gap: 32px;
}

.nav-link {
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 0.95rem;
    position: relative;
    padding: 6px 0;
}

.nav-link:hover, .nav-link.active {
    color: var(--text-primary);
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--color-accent);
    transition: width var(--transition-normal);
}

.nav-link:hover::after, .nav-link.active::after {
    width: 100%;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Clone of .nav-cta shown inside the mobile drawer instead - the header one
   is hidden below 768px (see .nav-cta rule in the mobile media query). */
.nav-mobile-cta {
    display: none;
}


/* Hamburger mobile menu button */
.hamburger {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 24px;
    height: 18px;
}

.hamburger .bar {
    height: 2px;
    width: 100%;
    background-color: var(--text-primary);
    border-radius: 2px;
    transition: all var(--transition-fast);
}

/* Hero Section */
.hero-section {
    padding-top: calc(var(--header-height) + 60px);
    padding-bottom: 40px;
    position: relative;
    overflow: hidden;
}

.hero-bg-shapes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
}

.shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(140px);
    opacity: 0.25;
}

.shape-1 {
    top: -10%;
    right: 5%;
    width: 500px;
    height: 500px;
    background: var(--color-accent);
}

.shape-2 {
    bottom: -10%;
    left: -10%;
    width: 400px;
    height: 400px;
    background: var(--color-warning);
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 48px;
    align-items: center;
}

.hero-title {
    font-family: var(--font-heading);
    font-size: 3.75rem;
    font-weight: 800;
    line-height: 1.1;
    margin-top: 1rem;
    margin-bottom: 1.5rem;
    letter-spacing: -0.03em;
}

.hero-description {
    color: var(--text-secondary);
    font-size: 1.15rem;
    line-height: 1.7;
    margin-bottom: 2.5rem;
}

/* Trust Metrics */
.trust-metrics {
    display: flex;
    gap: 24px;
    margin-bottom: 2.5rem;
    align-items: center;
}

.metric-item {
    display: flex;
    flex-direction: column;
}

.metric-number {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1;
    margin-bottom: 4px;
}

.metric-label {
    color: var(--text-muted);
    font-size: 0.87rem;
}

.metric-divider {
    width: 1px;
    height: 40px;
    background-color: var(--border-color);
}

/* Payment badges row */
.payment-badges-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    opacity: 0.8;
}

.payment-badge {
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
    border: 1px solid var(--border-color);
    background-color: rgba(255, 255, 255, 0.02);
}

/* Interactive Simulator */
.hero-simulator {
    width: 100%;
}

/* Parked off-screen: the shared .simulator-card node lives here until https://https://www.abchange.net/Includes/js/app.js
   moves it into the exchange modal or the connected portal. */
.hero-simulator-hidden {
    display: none;
}

/* Hero CTA: replaces the live simulator on the landing hero with a single
   entry point into the same exchange modal. */
.hero-cta-panel {
    width: 100%;
}

.hero-cta-card {
    padding: 40px 32px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.hero-cta-title {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0;
}

.hero-cta-desc {
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.6;
    margin: 0 0 8px;
    max-width: 360px;
}

.hero-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.hero-cta-btn svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* Component-scoped tokens. The inner panels must stay clearly recessed against
   the card and the output amount must stay readable in every theme, so each
   theme supplies its own values instead of hardcoding a single colour. */
.simulator-card {
    padding: 28px;
    min-width: 0;
    --sim-field-bg: rgba(2, 6, 18, 0.55);
    --sim-field-border: rgba(255, 255, 255, 0.07);
    --sim-chip-bg: rgba(255, 255, 255, 0.04);
    --sim-out-color: var(--color-positive);
    --sim-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

[data-theme="light"] .simulator-card {
    --sim-field-bg: #f1f5f9;
    --sim-field-border: rgba(15, 23, 42, 0.1);
    --sim-chip-bg: #ffffff;
    --sim-out-color: #0f8f6a;
}

[data-theme="midnight"] .simulator-card {
    --sim-field-bg: rgba(4, 10, 26, 0.62);
    --sim-field-border: rgba(0, 102, 255, 0.18);
    --sim-chip-bg: rgba(0, 102, 255, 0.08);
}

/* The very same .simulator-card is moved into the connected portal panel. It
   now keeps its own full chrome and "Calculateur en direct" header there too,
   matching the public landing/modal version exactly. See mountSimulatorInPortal()
   in https://https://www.abchange.net/Includes/js/app.js. */
.portal-simulator-mount:empty {
    display: none;
}

.portal-simulator-mount .simulator-card {
    margin-bottom: 20px;
}

/* Chrome and header match the public version exactly, but "Je donne"/"Je reçois"
   are as compact as possible once connected - the portal already has its own
   surrounding UI competing for space, unlike the standalone modal. */
.simulator-card-connected .sim-field {
    padding: 10px 12px;
}

.simulator-card-connected .sim-amount {
    font-size: 1.5rem;
}

/* Portal's own submit button below the calculator (destination coordinates +
   final confirm) - same reduced footprint as the fields above it. */
#btn-portal-exchange-submit {
    padding: 10px 20px;
    font-size: 0.95rem;
}

.sim-head {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.sim-live-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-primary);
}

.sim-live-dot {
    position: relative;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--color-positive);
    flex-shrink: 0;
}

.sim-live-dot::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background-color: rgba(var(--color-positive-rgb), 0.35);
    animation: pulseGlow 1.8s infinite;
}

.sim-body {
    display: flex;
    flex-direction: column;
}

/* Amount fields */
.sim-field {
    background-color: var(--sim-field-bg);
    border: 1px solid var(--sim-field-border);
    border-radius: var(--border-radius-md);
    padding: 16px 18px;
    min-width: 0;
    transition: border-color var(--transition-fast);
}

.sim-field:focus-within {
    border-color: var(--border-hover);
}

.sim-field-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin-bottom: 10px;
}

.sim-field-head label {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-secondary);
    cursor: pointer;
}

/* Wraps to two stacked lines when the card is narrow, stays inline otherwise */
.sim-field-limits {
    display: flex;
    flex-wrap: wrap;
    min-width: 0;
    justify-content: flex-end;
    gap: 2px 12px;
    margin-left: auto;
    font-family: var(--sim-mono);
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--sim-out-color);
    text-align: right;
}

.sim-field-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Precise crypto quantity under a field that is showing its dollar-equivalent
   instead of the raw unit (BTC, SOL, BNB...) - decimals matter there, so this
   keeps the exact figure visible even though the input itself reads in USD. */
.sim-crypto-equiv {
    margin-top: 6px;
    font-family: var(--sim-mono);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.sim-amount {
    flex: 1;
    min-width: 0;
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    background: none;
    border: none;
}

.sim-amount:focus {
    outline: none;
}

.sim-amount-out {
    color: var(--sim-out-color);
}

/* Custom Dropdown select */
.sim-select {
    position: relative;
    user-select: none;
}

.sim-select-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    padding: 8px 12px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    min-width: 140px;
    justify-content: space-between;
    color: var(--text-primary);
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.sim-select-trigger:hover {
    border-color: var(--border-hover);
}

.currency-flag {
    width: 20px;
    height: 15px;
    object-fit: cover;
    border-radius: 2px;
    flex-shrink: 0;
}

/* Trigger badge: a lettered disc for a crypto asset, a coloured dot for a
   Mobile Money rail. updateTriggerDisplay() in https://https://www.abchange.net/Includes/js/app.js swaps between the two. */
.sim-asset-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 700;
    background-color: rgba(var(--color-accent-rgb), 0.12);
    border: 1px solid rgba(var(--color-accent-rgb), 0.28);
    color: var(--color-accent);
}

.sim-asset-icon.sim-momo-dot {
    width: 10px;
    height: 10px;
    border: none;
    background-color: var(--color-warning);
}

.sim-select-trigger .currency-code {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chevron-icon {
    width: 16px;
    height: 16px;
    opacity: 0.7;
    color: var(--text-primary);
    transition: transform var(--transition-fast);
}

.sim-dropdown-list {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    width: 220px;
    z-index: 100;
    display: none;
    box-shadow: 0 12px 30px var(--shadow-color);
    max-height: 260px;
    overflow-y: auto;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.sim-dropdown-list.active {
    display: block;
    animation: fadeIn 0.15s ease-out;
}

.sim-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast);
    color: var(--text-primary);
    font-size: 0.88rem;
    font-weight: 600;
}

.sim-dropdown-item:hover {
    background-color: rgba(0, 102, 255, 0.15);
    color: var(--color-accent);
}

.crypto-dropdown-item {
    align-items: flex-start;
    padding: 12px 14px;
    border: 1px solid transparent;
    border-radius: 8px;
    margin-bottom: 4px;
}

.crypto-dropdown-item:hover {
    border-color: rgba(0, 102, 255, 0.2);
}

.crypto-icon-letter {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: rgba(0, 102, 255, 0.08);
    color: #0066FF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
    border: 1px solid rgba(0, 102, 255, 0.15);
}

.crypto-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.crypto-title {
    font-weight: 700;
    font-size: 14px;
    color: var(--text-primary);
}

.crypto-subtitle {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
}
[data-theme="light"] .sim-select-trigger {
    background-color: #ffffff;
    border-color: rgba(0, 0, 0, 0.1);
    color: #0f172a;
}

[data-theme="light"] .sim-dropdown-list {
    background-color: #ffffff;
    border-color: rgba(0, 0, 0, 0.12);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

[data-theme="light"] .sim-dropdown-item {
    color: #0f172a;
}

[data-theme="light"] .sim-dropdown-item:hover {
    background-color: rgba(0, 102, 255, 0.08);
    color: #0066FF;
}

[data-theme="midnight"] .sim-select-trigger {
    background-color: #070d1e;
    border-color: rgba(0, 102, 255, 0.25);
    color: #f1f5f9;
}

[data-theme="midnight"] .sim-dropdown-list {
    background-color: #0d1730;
    border-color: rgba(0, 102, 255, 0.3);
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.7);
}

[data-theme="midnight"] .sim-dropdown-item {
    color: #f1f5f9;
}

[data-theme="midnight"] .sim-dropdown-item:hover {
    background-color: rgba(0, 102, 255, 0.25);
    color: #38bdf8;
}

[data-theme="dark"] .sim-select-trigger {
    background-color: #060a17;
    border-color: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

[data-theme="dark"] .sim-dropdown-list {
    background-color: #0c1225;
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.6);
}

[data-theme="dark"] .sim-dropdown-item {
    color: #ffffff;
}

[data-theme="dark"] .sim-dropdown-item:hover {
    background-color: rgba(0, 102, 255, 0.2);
    color: #60a5fa;
}

/* Direction switch: swap button + the badge naming the current direction */
.sim-divider-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 6px 0;
}

.swap-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: var(--color-accent);
    border: 3px solid var(--bg-card);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    flex-shrink: 0;
    transition: background-color var(--transition-fast), transform var(--transition-normal);
    box-shadow: 0 6px 18px rgba(var(--color-accent-rgb), 0.35);
}

.swap-btn:hover {
    background-color: var(--color-accent-hover);
    transform: rotate(180deg);
}

.swap-btn svg {
    width: 18px;
    height: 18px;
}

.sim-mode-badge {
    padding: 7px 16px;
    border-radius: 50px;
    font-family: var(--font-heading);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #4da6ff;
    background-color: rgba(var(--color-accent-rgb), 0.14);
    border: 1px solid rgba(var(--color-accent-rgb), 0.3);
    transition: background-color var(--transition-fast);
}

.sim-mode-badge:hover {
    background-color: rgba(var(--color-accent-rgb), 0.24);
}

[data-theme="light"] .sim-mode-badge {
    color: #0052cc;
}

/* CTA */
.sim-cta {
    margin-top: 10px;
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.sim-cta svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Breakdown details list */
.sim-breakdown {
    background-color: var(--sim-chip-bg);
    border: 1px solid var(--sim-field-border);
    border-radius: var(--border-radius-sm);
    padding: 12px;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.breakdown-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 4px 16px;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

/* A fixed label column keeps the two columns aligned across rows without
   letting justify-content: space-between stretch the value all the way to
   the far edge of a wide card - the gap now tracks the label width, not the
   card width. */
.breakdown-row > span:first-child {
    flex: 0 0 190px;
}

.breakdown-row .font-medium {
    color: var(--text-primary);
}

/* Advantages Section */
.advantages-section {
    padding: 48px 0;
    background-color: var(--bg-secondary);
    position: relative;
}

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

.advantage-card {
    padding: 40px;
    text-align: left;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.adv-icon-box {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}

.adv-icon-box svg {
    width: 28px;
    height: 28px;
}

.speed-icon {
    background-color: rgba(var(--color-positive-rgb), 0.12);
    color: var(--color-positive);
}

.security-icon {
    background-color: rgba(var(--color-accent-rgb), 0.12);
    color: var(--color-accent);
}

.rates-icon {
    background-color: rgba(255, 153, 0, 0.12);
    color: var(--color-warning);
}

.advantage-card h3 {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 12px;
}

.advantage-card p {
    color: var(--text-secondary);
    font-size: 0.975rem;
    line-height: 1.6;
    margin-bottom: auto;
}

.adv-tag {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-top: 24px;
}

/* "Comment ça marche" Section */
.how-it-works-section {
    padding: 48px 0;
}

.steps-timeline {
    display: flex;
    position: relative;
    gap: 32px;
    margin-top: 4rem;
}

.steps-timeline::after {
    content: '';
    position: absolute;
    top: 40px;
    left: 40px;
    right: 40px;
    height: 2px;
    background: linear-gradient(90deg, var(--color-accent) 0%, var(--border-color) 80%);
    z-index: 1;
}

.step-item {
    flex: 1;
    position: relative;
    z-index: 2;
}

.step-number-container {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 24px;
    padding-left: 20px;
}

.step-number {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: var(--bg-primary);
    border: 2px solid var(--color-accent);
    color: var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 800;
    box-shadow: 0 0 15px rgba(var(--color-accent-rgb), 0.2);
}

.step-item:hover .step-number {
    background-color: var(--color-accent);
    color: #ffffff;
    box-shadow: 0 0 25px rgba(var(--color-accent-rgb), 0.5);
    transform: scale(1.1);
    transition: all var(--transition-fast);
}

.step-content {
    padding: 32px;
}

.step-content h3 {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 12px;
}

.step-content p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Geographical Coverage Section */
.coverage-section {
    padding: 48px 0;
    background-color: var(--bg-primary);
}

.countries-pills-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    max-width: 900px;
    margin: 0 auto;
}

.country-pill {
    display: inline-flex;
    align-items: center;
    background-color: #fff9e6;
    color: #1e293b;
    padding: 8px 16px;
    border-radius: 30px;
    font-size: 0.95rem;
    font-weight: 500;
    gap: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
    cursor: default;
}

.country-pill:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

.country-pill img {
    border-radius: 2px;
    width: 20px;
    height: auto;
}

.country-pill strong {
    font-weight: 800;
    color: #1e293b;
}

@keyframes rotate-globe {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes rotate-globe-rev {
    0% { transform: rotate(360deg); }
    100% { transform: rotate(0deg); }
}

.dot-blink-1 { animation: blink 2.5s infinite 0.2s; }
.dot-blink-2 { animation: blink 2.5s infinite 0.6s; }
.dot-blink-3 { animation: blink 2.5s infinite 1s; }
.dot-blink-4 { animation: blink 2.5s infinite 1.4s; }

@keyframes blink {
    0%, 100% { opacity: 0.3; r: 1.5px; }
    50% { opacity: 1; r: 3.5px; filter: drop-shadow(0 0 6px var(--color-positive)); }
}

.globe-overlay-content {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.globe-caption {
    position: absolute;
    bottom: 0;
    text-align: center;
    width: 100%;
}

.active-node {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-positive);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.globe-caption p {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: 4px;
}

/* Testimonials Section */
.testimonials-section {
    padding: 48px 0;
}

.testimonials-slider {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 2rem;
}

.testimonial-card {
    padding: 32px;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.stars {
    color: var(--color-warning);
    font-size: 1.1rem;
    margin-bottom: 16px;
    letter-spacing: 2px;
}

.testimonial-text {
    color: var(--text-secondary);
    font-style: italic;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 24px;
    flex: 1;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 16px;
    border-top: 1px solid var(--border-color);
    padding-top: 20px;
}

.user-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-weight: 700;
    color: #ffffff;
    font-size: 0.95rem;
}

.avatar-1 { background-color: #f43f5e; }
.avatar-2 { background-color: #8b5cf6; }
.avatar-3 { background-color: #06b6d4; }

.user-name {
    font-size: 0.95rem;
    font-weight: 700;
}

.user-role {
    font-size: 0.78rem;
    color: var(--text-muted);
}

/* FAQ Section */
.faq-section {
    padding: 48px 0 32px 0;
    background-color: var(--bg-secondary);
}

.faq-accordion-container {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.faq-search-container {
    max-width: 700px;
    margin: 2rem auto 1.5rem auto;
}

.faq-search-bar {
    display: flex;
    align-items: center;
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 12px 20px;
    transition: border-color var(--transition-fast);
}

.faq-search-bar:focus-within {
    border-color: var(--color-accent);
}

.faq-search-bar svg {
    width: 20px;
    height: 20px;
    color: var(--text-muted);
    margin-right: 12px;
}

.faq-search-bar input {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 0.95rem;
}

.faq-search-bar input:focus {
    outline: none;
}

.faq-filters {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 3rem;
    flex-wrap: wrap;
}

.faq-filter-btn {
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.faq-filter-btn:hover {
    color: var(--text-primary);
    border-color: var(--text-muted);
}

.faq-filter-btn.active {
    background-color: #2563eb;
    color: #ffffff;
    border-color: #2563eb;
}

.faq-item {
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    transition: all var(--transition-fast);
}

.faq-item:hover {
    border-color: rgba(255, 255, 255, 0.15);
}

.faq-question {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    text-align: left;
    background-color: transparent;
    border: none;
    cursor: pointer;
}

.faq-q-left {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.faq-icon-box {
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    flex-shrink: 0;
}

.faq-icon-box svg {
    width: 20px;
    height: 20px;
}

.faq-q-text {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.faq-category {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    background-color: rgba(255, 255, 255, 0.05);
    padding: 3px 8px;
    border-radius: 4px;
    width: max-content;
    color: #cbd5e1;
}

.faq-q-text span:last-child {
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--text-primary);
    line-height: 1.4;
}

.faq-icon-chevron {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    transition: all var(--transition-normal);
    flex-shrink: 0;
}

.faq-icon-chevron svg {
    width: 18px;
    height: 18px;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-normal) ease-out;
}

.faq-answer p {
    padding: 0 20px 20px 76px;
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
}

.faq-feedback {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    margin: 0 20px 20px 76px;
    border-top: 1px solid var(--border-color);
}

.faq-feedback span {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.faq-feedback-btns {
    display: flex;
    gap: 8px;
}

.btn-feedback {
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-feedback:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Opened FAQ state toggled by JS */
.faq-item.active {
    border-color: #2563eb;
}

.faq-item.active .faq-icon-chevron {
    transform: rotate(180deg);
    background-color: #2563eb;
    color: #ffffff;
}

.faq-item.active .faq-answer {
    max-height: 500px;
}

/* Contact Section & Form */
.contact-section {
    padding: 32px 0 48px 0;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: flex-start;
}

.contact-methods {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 2.5rem;
}

.contact-method-card {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 24px;
}

.method-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.method-icon svg {
    width: 22px;
    height: 22px;
}

.method-icon.whatsapp {
    background-color: rgba(37, 211, 102, 0.12);
    color: #25d366;
}

.method-icon.email {
    background-color: rgba(var(--color-accent-rgb), 0.12);
    color: var(--color-accent);
}

.contact-method-card h4 {
    font-size: 1.05rem;
    font-weight: 700;
}

.contact-method-card p {
    font-size: 0.88rem;
    color: var(--text-secondary);
}

.method-detail {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 600;
    margin-top: 6px;
}

/* Contact Form container */
.contact-form-container {
    padding: 40px;
}

.form-title {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 24px;
}

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

.form-group label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
}

label[for="admin-addop-fee"] {
    text-align: center;
}

.form-group input, 
.form-group textarea, 
.form-group select,
.form-input {
    background-color: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    padding: 12px 16px;
    width: 100%;
    color: var(--text-primary);
    transition: all var(--transition-fast);
    font-family: inherit;
    font-size: 0.95rem;
}

.form-group input:focus, 
.form-group textarea:focus, 
.form-group select:focus,
.form-input:focus {
    border-color: var(--color-accent);
    outline: none;
    box-shadow: 0 0 0 2px rgba(var(--color-accent-rgb), 0.2);
}

.form-checkbox {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 20px;
}

.form-checkbox input {
    width: 18px;
    height: 18px;
    margin-top: 3px;
    cursor: pointer;
}

.form-checkbox label {
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.form-checkbox label a {
    color: var(--color-accent);
}

.form-status {
    margin-top: 16px;
    font-size: 0.9rem;
    font-weight: 600;
    text-align: center;
}

/* Footer styles */
.footer {
    background-color: #03060c;
    border-top: 1px solid var(--border-color);
    padding: 80px 0 30px 0;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 60px;
}

.footer-info {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.footer-logo {
    font-size: 1.5rem;
}

.footer-desc {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.6;
}

.social-links {
    display: flex;
    gap: 12px;
}

.social-links a {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

.social-links a:hover {
    color: var(--text-primary);
    border-color: var(--color-accent);
    transform: translateY(-2px);
}

.social-links a svg {
    width: 16px;
    height: 16px;
}

.footer-links-col h4 {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 24px;
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.footer-links a:hover {
    color: var(--text-primary);
}

.newsletter-form {
    display: flex;
    margin-top: 16px;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    padding: 4px;
}

.newsletter-form input {
    flex: 1;
    padding: 10px 12px;
    font-size: 0.88rem;
}

.newsletter-form .btn {
    padding: 8px 16px;
}

.newsletter-form .btn svg {
    width: 16px;
    height: 16px;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--border-color);
    padding-top: 30px;
    font-size: 0.85rem;
    color: var(--text-muted);
    flex-wrap: wrap;
    gap: 20px;
}

.footer-cards-accepted {
    display: flex;
    align-items: center;
    gap: 8px;
}

.partner-badge {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 700;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
}

/* Modals (Login/Signup & Access Platform) */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(3, 6, 12, 0.85);
    backdrop-filter: blur(8px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-normal);

    flex-wrap: wrap;
}

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

.modal-card {
    width: 100%;
    max-width: 480px;
    padding: 40px;
    position: relative;
    transform: translateY(20px);
    transition: transform var(--transition-normal);
}

.modal-overlay.active .modal-card {
    transform: translateY(0);
}

.modal-close {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--bg-input);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    transition: all var(--transition-fast);
}

.modal-close:hover {
    color: var(--text-primary);
    transform: scale(1.05);
}

.modal-close svg {
    width: 14px;
    height: 14px;
}

.modal-header {
    margin-bottom: 24px;
    padding-right: 20px;
}

.modal-title {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 8px;
}

.modal-header p {
    font-size: 0.88rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* Tighter spacing for the login/register modal specifically, which packs
   more fields in than the site's other (mostly short) modals. */
#auth-modal-header {
    margin-bottom: 16px;
}

#auth-modal-tabs {
    margin-bottom: 16px;
}

#auth-modal .form-group {
    margin-bottom: 14px;
}

.modal-tabs {
    display: flex;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 24px;
}

.modal-tab {
    flex: 1;
    padding: 12px;
    text-align: center;
    font-weight: 600;
    color: var(--text-muted);
    border-bottom: 2px solid transparent;
    transition: all var(--transition-fast);
    background: transparent;
    cursor: pointer;
}

.modal-tab:hover {
    color: var(--text-primary);
}

.modal-tab.active {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
}

.auth-form {
    display: none;
}

.auth-form.active {
    display: flex;
    flex-direction: column;
}

/* Password Input with Eye Toggle */
.password-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.password-input-wrapper input {
    width: 100%;
    padding-right: 46px;
}

.btn-toggle-password {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 4px;
    transition: color var(--transition-fast), background-color var(--transition-fast);
}

.btn-toggle-password:hover {
    color: var(--text-primary);
    background-color: rgba(255, 255, 255, 0.06);
}

.btn-toggle-password svg {
    width: 18px;
    height: 18px;
}

/* Auth Generic Alerts */
.auth-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--border-radius-sm);
    font-size: 0.85rem;
    line-height: 1.35;
    margin-bottom: 18px;
    animation: fadeIn 0.25s ease-out;
}

.auth-alert svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.auth-alert-error {
    background-color: rgba(255, 51, 102, 0.12);
    border: 1px solid rgba(255, 51, 102, 0.35);
    color: #ff4d79;
}

.auth-alert-success {
    background-color: rgba(0, 210, 106, 0.12);
    border: 1px solid rgba(0, 210, 106, 0.35);
    color: #00d26a;
}

/* Demo accounts chips */
.demo-accounts-box {
    background-color: rgba(255, 255, 255, 0.02);
    border: 1px dashed var(--border-color);
    border-radius: var(--border-radius-sm);
    padding: 10px 12px;
    margin: 4px 0;
}

.demo-accounts-title {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.demo-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.demo-chip {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 4px 10px;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.demo-chip:hover {
    background: rgba(var(--color-accent-rgb), 0.15);
    border-color: var(--color-accent);
    color: var(--text-primary);
    transform: translateY(-1px);
}

.label-row-forgot {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.forgot-pass-link {
    font-size: 0.78rem;
    color: var(--color-accent);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.forgot-pass-link:hover {
    text-decoration: underline;
    color: #3385ff;
}

.btn-link-simple {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 0.84rem;
    cursor: pointer;
    transition: color var(--transition-fast);
}

.btn-link-simple:hover {
    color: var(--text-primary);
    text-decoration: underline;
}

/* OTP Header & Account Pill */
.otp-header-box {
    margin-bottom: 10px;
}

.otp-shield-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, rgba(0, 102, 255, 0.2), rgba(0, 210, 255, 0.2));
    border: 1px solid rgba(0, 210, 255, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 8px auto;
    color: var(--color-accent);
}

.otp-shield-icon svg {
    width: 24px;
    height: 24px;
}

.otp-subheading {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--text-primary);
}

.otp-message-text {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.otp-account-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: var(--bg-input);
    border: 1px solid var(--border-color);
    padding: 6px 14px;
    border-radius: 30px;
    margin-top: 4px;
}

.otp-account-email {
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--color-accent);
}

.btn-change-account {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 14px;
    padding: 2px 8px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-change-account:hover {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
    transform: scale(1.04);
}

.btn-change-account svg {
    width: 11px;
    height: 11px;
}

/* OTP verification inputs */
.otp-input-container {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 8px 0 6px 0;
}

.otp-digit {
    width: 46px;
    height: 54px;
    background-color: var(--bg-input);
    border: 1.5px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    text-align: center;
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--text-primary);
    transition: all var(--transition-fast);
}

.otp-digit:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 12px rgba(var(--color-accent-rgb), 0.35);
    transform: translateY(-2px);
    background-color: rgba(0, 102, 255, 0.05);
}

.otp-digit.filled {
    border-color: rgba(var(--color-accent-rgb), 0.7);
    background-color: rgba(0, 102, 255, 0.04);
}

.otp-digit.error-shake {
    animation: shake 0.4s ease-in-out;
    border-color: #ff3366 !important;
}

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

/* OTP Meta Badges */
.otp-meta-badges {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
}

.otp-meta-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 12px;
}

.otp-meta-badge svg {
    width: 13px;
    height: 13px;
}

.timer-badge {
    background-color: rgba(255, 170, 0, 0.12);
    border: 1px solid rgba(255, 170, 0, 0.3);
    color: #ffb822;
}

.single-use-badge {
    background-color: rgba(0, 102, 255, 0.1);
    border: 1px solid rgba(0, 102, 255, 0.25);
    color: var(--color-accent);
}

.form-desc-text {
    font-size: 0.88rem;
    color: var(--text-secondary);
    margin-top: 4px;
}

.otp-resend-text {
    font-size: 0.82rem;
    color: var(--text-secondary);
}

#otp-timer-box {
    color: var(--text-muted);
}

/* =============================================================
   EMAIL SIMULATOR TOAST NOTIFICATION */
.email-toast-container {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 3000;
    pointer-events: none;
}

.email-toast {
    width: 360px;
    background: rgba(13, 20, 36, 0.94);
    border: 1px solid rgba(0, 210, 255, 0.35);
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 24px rgba(0, 102, 255, 0.25);
    padding: 16px 18px;
    transform: translateX(120%);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
    pointer-events: auto;
}

.email-toast.show {
    transform: translateX(0);
    opacity: 1;
}

.email-toast-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 8px;
}

.email-toast-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: linear-gradient(135deg, #0066ff, #00d2ff);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
}

.email-toast-icon svg {
    width: 15px;
    height: 15px;
}

.email-toast-meta {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.email-toast-sender {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-primary);
}

.email-toast-to {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.email-toast-close {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 2px;
}

.email-toast-close:hover {
    color: var(--text-primary);
}

.email-toast-close svg {
    width: 14px;
    height: 14px;
}

.email-toast-text {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.email-toast-code-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.email-toast-code {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: 3px;
    color: #00f2fe;
    background: rgba(0, 242, 254, 0.1);
    border: 1px solid rgba(0, 242, 254, 0.3);
    padding: 4px 12px;
    border-radius: 8px;
    flex: 1;
    text-align: center;
}

.btn-copy-otp, .btn-autofill-otp {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-copy-otp {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

.btn-copy-otp:hover {
    background: rgba(255, 255, 255, 0.15);
}

.btn-copy-otp svg {
    width: 12px;
    height: 12px;
}

.btn-autofill-otp {
    background: var(--color-accent);
    border: 1px solid var(--color-accent);
    color: #fff;
}

.btn-autofill-otp:hover {
    background: #0052cc;
}

/* =============================================================
   USER SPACE & ADMIN MODAL STYLES */
.modal-card-lg {
    max-width: 720px;
}

.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 20px;
    padding-right: 28px;
}

.dashboard-user-profile {
    display: flex;
    align-items: center;
    gap: 14px;
}

.dashboard-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-accent), #00d2ff);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.15rem;
    color: #fff;
    box-shadow: 0 4px 14px rgba(0, 102, 255, 0.35);
}

.dashboard-user-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dashboard-user-name {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 700;
}

.role-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.role-badge.client {
    background: rgba(0, 210, 106, 0.15);
    border: 1px solid rgba(0, 210, 106, 0.4);
    color: #00d26a;
}

.role-badge.agent {
    background: rgba(255, 170, 0, 0.15);
    border: 1px solid rgba(255, 170, 0, 0.4);
    color: #ffb822;
}

.role-badge.admin, .role-badge.administrateur {
    background: rgba(147, 51, 234, 0.18);
    border: 1px solid rgba(147, 51, 234, 0.5);
    color: #c084fc;
}

.dashboard-user-email {
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.security-indicator-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: rgba(0, 210, 106, 0.08);
    border: 1px solid rgba(0, 210, 106, 0.25);
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #00d26a;
}

.status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.status-dot.online {
    background-color: #00d26a;
    box-shadow: 0 0 8px #00d26a;
}

.dashboard-panel {
    display: none;
}

.dashboard-panel.active {
    display: block;
    animation: fadeIn 0.25s ease-out;
}

.dash-grid-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.dash-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    padding: 14px;
}

.dash-card-label {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 4px;
    text-transform: uppercase;
}

.dash-card-val {
    display: block;
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 4px;
}

.dash-card-desc {
    font-size: 0.74rem;
    color: var(--text-secondary);
    line-height: 1.3;
}

/* Admin panel styling */
.admin-panel-intro {
    background: rgba(147, 51, 234, 0.08);
    border: 1px solid rgba(147, 51, 234, 0.25);
    border-radius: var(--border-radius-sm);
    padding: 12px 14px;
    margin-bottom: 16px;
}

.admin-intro-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 700;
    color: #c084fc;
    margin-bottom: 6px;
}

.admin-intro-badge svg {
    width: 16px;
    height: 16px;
}

.admin-intro-desc {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.35;
}

.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.dash-table {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
    font-size: 0.84rem;
}

.dash-table th {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-muted);
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.dash-table td {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    color: var(--text-secondary);
}

.dash-table tr:hover td {
    background-color: rgba(255, 255, 255, 0.02);
}

.admin-role-select {
    background-color: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 0.78rem;
    color: var(--text-primary);
}

.dashboard-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
    padding-top: 14px;
    border-top: 1px solid var(--border-color);
}

/* -------------------------------------------------------------
   RESPONSIVE DESIGN & MOBILE STYLING */
@media (max-width: 1024px) {
    .section-title {
        font-size: 2.125rem;
    }

    .tx-section-title {
        font-size: 2.125rem;
    }

    .section-title-xl {
        font-size: 2.125rem;
    }

    .hero-title {
        font-size: 2.75rem;
    }

    .hero-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .hero-content {
        text-align: center;
    }

    .trust-metrics {
        justify-content: center;
    }

    .payment-badges-row {
        justify-content: center;
    }

    .advantages-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .coverage-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .coverage-visual {
        order: -1;
    }

    .testimonials-slider {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .contact-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .footer-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .flex-wrap-mobile {
        flex-wrap: wrap;
        gap: 12px;
    }

    .navbar {
        position: relative;
    }

    /* Navigation menu as a drawer on mobile */
    .nav-menu {
        position: fixed;
        top: var(--header-height);
        left: -100%;
        width: 80%;
        max-width: 320px;
        height: calc(100vh - var(--header-height));
        background-color: var(--bg-secondary);
        border-right: 1px solid var(--border-color);
        padding: 40px 24px;
        box-shadow: 10px 0 30px rgba(0, 0, 0, 0.4);
        transition: left var(--transition-normal);
        z-index: 999;
        display: block;
    }

    .nav-menu.active {
        left: 0;
    }

    .nav-list {
        flex-direction: column;
        gap: 24px;
    }

    .nav-link {
        font-size: 1.1rem;
        display: block;
    }

    .hamburger {
        display: flex;
    }

    /* Active hamburger animation */
    .hamburger.active .bar:nth-child(2) {
        opacity: 0;
    }

    .hamburger.active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .hamburger.active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    .mobile-menu-overlay {
        position: fixed;
        top: var(--header-height);
        left: 0;
        width: 100%;
        height: calc(100vh - var(--header-height));
        background-color: rgba(3, 6, 12, 0.5);
        backdrop-filter: blur(4px);
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--transition-normal);
        z-index: 998;
    }

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

    .nav-cta {
        display: none; /* Hidden in the header on mobile - shown as .nav-mobile-cta below the drawer links instead */
    }

    .nav-mobile-cta {
        display: block;
        width: 100%;
        margin-top: 24px;
    }

    /* Timelines */
    .steps-timeline {
        flex-direction: column;
        gap: 40px;
    }

    .steps-timeline::after {
        left: 42px;
        top: 20px;
        bottom: 20px;
        width: 2px;
        height: auto;
        background: linear-gradient(180deg, var(--color-accent) 0%, var(--border-color) 80%);
    }

    .step-number-container {
        padding-left: 20px;
        margin-bottom: 12px;
    }

    .countries-list-grid {
        grid-template-columns: 1fr;
    }

    /* Portal internal grids: stack to a single column on mobile */
    .kyc-inspect-fields {
        grid-template-columns: 1fr;
    }

    .momo-form-row {
        grid-template-columns: 1fr;
    }

    .momo-card-actions {
        grid-template-columns: 1fr;
    }

    .agent-kpis-row {
        grid-template-columns: 1fr;
    }

    .financial-grid {
        grid-template-columns: 1fr;
    }

    .form-grid-2 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 2.15rem;
    }

    .simulator-card {
        padding: 20px 16px;
    }

    /* Stack the header, and let each amount sit above its selector so the
       big figures keep their size on a narrow screen. */
    .sim-head {
        gap: 12px;
    }

    .sim-field {
        padding: 14px;
    }

    .sim-field-row {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .sim-amount {
        font-size: 1.75rem;
    }

    .sim-cta {
        font-size: 0.82rem;
        padding: 15px 16px;
    }

    .trust-metrics {
        flex-direction: column;
        gap: 16px;
    }

    .metric-divider {
        display: none;
    }

    .modal-card {
        padding: 24px 16px;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    /* This one's content (tabs + fields + demo chips) can be taller than a
       short phone screen - let it scroll instead of clipping top/bottom. */
    #auth-modal .modal-card {
        justify-content: flex-start;
        overflow-y: auto;
    }

    /* 6 boxes at their desktop width (46px + 10px gap) need 326px, wider than
       the 288px left inside the modal on a 320px phone - shrink them so the
       row always fits instead of overflowing. */
    .otp-input-container {
        gap: 6px;
    }

    .otp-digit {
        width: 38px;
        height: 48px;
        font-size: 1.3rem;
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }

    .email-toast-container {
        left: 12px;
        right: 12px;
    }

    .email-toast {
        width: auto;
    }

    .portal-notif-dropdown {
        width: calc(100vw - 24px);
        right: -12px;
    }

    .whatsapp-banner-text {
        min-width: 0;
    }

    /* This grid's column track (380px min, see the winning definition further
       down the file) never had a mobile override, so it forced a horizontal
       scrollbar on every phone - single column always fits instead. */
    .admin-crypto-assets-grid {
        grid-template-columns: 1fr;
    }

    /* Same bug, same fix: 360px minimum column with no mobile override. */
    .admin-momo-operators-grid {
        grid-template-columns: 1fr;
    }

    /* Neither of these had a mobile override either, eating 104px of width
       combined on every portal screen (not just the trade card) at exactly
       the widths where every pixel matters. */
    .portal-content {
        padding: 16px;
    }

    .portal-card {
        padding: 16px;
    }

    .portal-topbar {
        padding: 0 16px;
    }

    /* This nav used to overflow into a horizontal scrollbar instead of
       wrapping (fixed above); its long uppercase labels also need to wrap
       onto a second line now that each button no longer has unlimited width
       to sit on a single scrollable row. */
    .agent-nav-btn {
        white-space: normal;
        text-align: center;
    }

    /* These headings never shrank on any breakpoint - fine at desktop width,
       cramped/oversized on an actual phone. */
    .hero-cta-title {
        font-size: 1.3rem;
    }

    .advantage-card h3 {
        font-size: 1.25rem;
    }

    .form-title {
        font-size: 1.25rem;
    }

    .welcome-hero-text h2 {
        font-size: 1.25rem;
    }

    .momo-country-code {
        font-size: 1.25rem;
    }

    .ticket-stat-value {
        font-size: 1.2rem;
    }

    .modal-title {
        font-size: 1.25rem;
    }
}

/* Custom Additions for Calculator & Checkout */
.checkout-summary-box {
    background-color: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    padding: 16px;
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.checkout-summary-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.checkout-summary-row strong {
    color: var(--text-primary);
}

.sim-error-message {
    color: #ff3366;
    font-size: 0.85rem;
    margin-top: 12px;
    font-weight: 600;
    text-align: center;
    min-height: 20px;
}

/* =============================================================
   ESPACE CLIENT PORTAL LAYOUT & COMPONENTS
   ============================================================= */

.portal-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(3, 6, 15, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 2500;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    opacity: 0;
    transition: opacity var(--transition-normal);
}

.portal-modal-overlay.active {
    display: flex;
    opacity: 1;
}

.portal-container {
    width: 100%;
    height: 100vh;
    display: flex;
    background-color: var(--bg-primary);
    overflow: hidden;
    position: relative;
}

/* 1. Sidebar Styles */
.portal-sidebar {
    width: 280px;
    height: 100vh;
    background-color: var(--bg-secondary);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    z-index: 100;
    transition: transform var(--transition-normal);
}

.portal-sidebar-header {
    padding: 24px 20px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border-color);
}

.portal-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--text-primary);
}

.portal-brand .logo-icon {
    width: 32px;
    height: 32px;
}

.portal-sidebar-close {
    display: none;
    background: transparent;
    color: var(--text-muted);
    padding: 4px;
    cursor: pointer;
}

.portal-sidebar-close:hover {
    color: var(--text-primary);
}

.portal-sidebar-close svg {
    width: 20px;
    height: 20px;
}

.portal-user-quick-card {
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-color);
}

.portal-kyc-status-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 700;
}

.portal-kyc-status-chip.verified {
    background: rgba(0, 229, 163, 0.12);
    border: 1px solid rgba(0, 229, 163, 0.35);
    color: #00e5a3;
}

.portal-kyc-status-chip.pending {
    background: rgba(255, 170, 0, 0.12);
    border: 1px solid rgba(255, 170, 0, 0.35);
    color: #ffb822;
}

.portal-kyc-status-chip.unverified {
    background: rgba(255, 68, 68, 0.12);
    border: 1px solid rgba(255, 68, 68, 0.35);
    color: #ff4444;
}

.portal-kyc-status-chip svg {
    width: 14px;
    height: 14px;
}

/* Sidebar Nav */
.portal-nav {
    flex: 1;
    overflow-y: auto;
    padding: 16px 12px;
}

.portal-nav-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.portal-nav-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--border-radius-sm);
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
    border-left: 3px solid transparent;
}

.portal-nav-item svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    transition: color var(--transition-fast);
}

.portal-nav-item:hover {
    background-color: rgba(255, 255, 255, 0.04);
    color: var(--text-primary);
}

/* Le menu actif est indiqué par un fond clair et une bordure bleue */
.portal-nav-item.active {
    background-color: rgba(0, 102, 255, 0.12) !important;
    border-left: 3px solid #0066FF !important;
    color: #ffffff !important;
    font-weight: 700;
}

[data-theme="light"] .portal-nav-item.active {
    background-color: rgba(0, 102, 255, 0.1) !important;
    border-left: 3px solid #0066FF !important;
    color: #0066FF !important;
}

.portal-nav-item.active svg {
    color: #00d2ff;
}

.portal-nav-item.admin-item {
    color: #c084fc;
}

.portal-nav-item.agent-item {
    color: #ffb822;
}

.portal-sidebar-footer {
    padding: 16px 20px;
    border-top: 1px solid var(--border-color);
}

.btn-portal-logout {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: var(--border-radius-sm);
    color: #ff4d6d;
    font-size: 0.88rem;
    font-weight: 600;
    background: rgba(255, 77, 109, 0.08);
    border: 1px solid rgba(255, 77, 109, 0.2);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-portal-logout:hover {
    background: rgba(255, 77, 109, 0.18);
    border-color: rgba(255, 77, 109, 0.4);
    transform: translateY(-1px);
}

.btn-portal-logout svg {
    width: 16px;
    height: 16px;
}

/* 2. Main Portal Area */
.portal-main-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    background-color: var(--bg-primary);
}

/* Topbar */
.portal-topbar {
    height: 70px;
    background-color: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 28px;
    flex-shrink: 0;
    z-index: 90;
}

.portal-topbar-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.portal-hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: transparent;
    padding: 6px;
    cursor: pointer;
}

.portal-hamburger .bar {
    width: 22px;
    height: 2px;
    background-color: var(--text-primary);
    border-radius: 2px;
}

.portal-breadcrumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.88rem;
}

.breadcrumb-root {
    color: var(--text-muted);
}

.breadcrumb-sep {
    color: var(--text-muted);
    font-size: 1rem;
}

.breadcrumb-active {
    font-weight: 700;
    color: var(--text-primary);
}

.portal-topbar-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Notifications Bell & Dropdown */
.portal-notif-wrapper {
    position: relative;
}

.portal-icon-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    transition: all var(--transition-fast);
}

.portal-icon-btn:hover {
    color: var(--text-primary);
    border-color: var(--color-accent);
}

.portal-icon-btn svg {
    width: 18px;
    height: 18px;
}

.notif-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    background-color: #ff3366;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--bg-secondary);
}

.portal-notif-dropdown {
    position: absolute;
    top: 48px;
    right: 0;
    width: 320px;
    max-height: 400px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
    z-index: 1000;
    display: none;
    flex-direction: column;
    overflow: hidden;
}

.portal-notif-dropdown.active {
    display: flex;
    animation: fadeIn 0.2s ease-out;
}

.notif-header {
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border-color);
}

.notif-header h4 {
    font-size: 0.9rem;
    font-weight: 700;
}

.btn-text-sm {
    font-size: 0.72rem;
    color: var(--color-accent);
    cursor: pointer;
    font-weight: 600;
}

.btn-text-sm:hover {
    text-decoration: underline;
}

.notif-list {
    overflow-y: auto;
    max-height: 320px;
}

.notif-item {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    display: flex;
    gap: 10px;
    align-items: flex-start;
    transition: background var(--transition-fast);
}

.notif-item.unread {
    background-color: rgba(0, 102, 255, 0.06);
}

.notif-item:hover {
    background-color: rgba(255, 255, 255, 0.03);
}

.notif-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(0, 102, 255, 0.15);
    color: var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}

.notif-icon svg {
    width: 14px;
    height: 14px;
}

.notif-content {
    flex: 1;
}

.notif-title {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.notif-desc {
    font-size: 0.74rem;
    color: var(--text-secondary);
    line-height: 1.3;
}

.notif-time {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 4px;
    display: block;
}

.portal-close-modal-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.portal-close-modal-btn:hover {
    background: rgba(255, 77, 109, 0.15);
    color: #ff4d6d;
    border-color: #ff4d6d;
}

.portal-close-modal-btn svg {
    width: 18px;
    height: 18px;
}

/* 3. Portal Content Scroll Area */
.portal-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 28px;
}

.portal-panel {
    display: none;
}

.portal-panel.active {
    display: block;
    animation: fadeIn 0.25s ease-out;
}

/* Generic Portal Card */
.portal-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    padding: 24px;
    box-shadow: var(--glass-shadow);
}

.portal-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

/* Small utility classes referenced across the dashboards' headers and action groups
   (portal-card-header already covers .flex-between on its own, these matter for the
   standalone button-group wrappers) that were used in index.html without ever being
   defined, leaving those groups without the flex layout/spacing/wrapping they expected. */
.d-flex {
    display: flex;
}

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

.flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.gap-2 {
    gap: 8px;
}

.align-items-center {
    align-items: center;
}

.justify-content-between {
    justify-content: space-between;
}

.portal-card-title {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-primary);
}

.portal-card-desc {
    font-size: 0.84rem;
    color: var(--text-secondary);
    margin-top: 2px;
}

/* Welcome Hero */
.portal-welcome-hero {
    background: linear-gradient(135deg, rgba(0, 102, 255, 0.18), rgba(0, 210, 255, 0.08));
    border: 1px solid rgba(0, 102, 255, 0.3);
    border-radius: var(--border-radius-md);
    padding: 24px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.welcome-hero-text h2 {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 6px;
}

.welcome-hero-text p {
    font-size: 0.88rem;
    color: var(--text-secondary);
    max-width: 600px;
}

/* Metrics Grid */
.portal-metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
}

.portal-metric-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: transform var(--transition-fast), border-color var(--transition-fast);
}

.portal-metric-card:hover {
    transform: translateY(-2px);
    border-color: var(--border-hover);
}

.metric-card-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.metric-card-icon svg {
    width: 22px;
    height: 22px;
}

.metric-card-icon.cfa-icon {
    background: rgba(0, 102, 255, 0.15);
    color: var(--color-accent);
}

.metric-card-icon.tx-icon {
    background: rgba(0, 229, 163, 0.15);
    color: var(--color-positive);
}

.metric-card-icon.momo-icon {
    background: rgba(255, 170, 0, 0.15);
    color: var(--color-warning);
}

.metric-card-icon.kyc-icon {
    background: rgba(192, 132, 252, 0.15);
    color: #c084fc;
}

.metric-card-info {
    display: flex;
    flex-direction: column;
}

.metric-card-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.metric-card-value {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 2px 0;
}

.metric-card-sub {
    font-size: 0.74rem;
    color: var(--text-secondary);
}

/* 4. Trade Section (Connected Exchange) */
.portal-trade-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 24px;
}

/* Same calculator as the public simulator modal (max-width: 500px) - keep it
   that compact width here too instead of letting it stretch across its grid
   column on wide screens. */
.portal-trade-card {
    max-width: 420px;
    width: 100%;
    min-width: 0;
    margin: 0 auto;
    /* The mounted simulator card already brings its own full background/border
       (see mountSimulatorInPortal()) - drop this wrapper's own .portal-card
       chrome so there's no second, slightly different-toned layer showing
       around/behind it. */
    background: none;
    border: none;
    box-shadow: none;
}

.trade-action-toggle {
    display: flex;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    padding: 3px;
}

.trade-tab-btn {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.trade-tab-btn.active {
    background: var(--color-accent);
    color: #fff;
}

.trade-input-combo {
    display: flex;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    overflow: hidden;
    transition: border-color var(--transition-fast);
}

.trade-input-combo:focus-within {
    border-color: var(--color-accent);
}

.trade-input-combo input {
    flex: 1;
    padding: 12px 14px;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    background: transparent;
    border: none;
    min-width: 0;
}

.trade-select {
    background-color: var(--bg-secondary);
    border: none;
    border-left: 1px solid var(--border-color);
    padding: 0 14px;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-primary);
    cursor: pointer;
    outline: none;
    min-width: 145px;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.trade-select:focus {
    background-color: var(--bg-card-hover);
}

.trade-select option {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    padding: 10px 14px;
    font-weight: 600;
    font-size: 0.9rem;
}

.trade-swap-center {
    display: flex;
    justify-content: center;
    margin: 10px 0;
}

.btn-swap-round {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    color: var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-swap-round:hover {
    transform: rotate(180deg) scale(1.08);
    border-color: var(--color-accent);
}

.btn-swap-round svg {
    width: 16px;
    height: 16px;
}

.label-row-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.btn-link-action {
    font-size: 0.78rem;
    color: var(--color-accent);
    font-weight: 600;
    cursor: pointer;
}

.btn-link-action:hover {
    text-decoration: underline;
}

.portal-info-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 14px;
}

.portal-info-list li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.info-bullet {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(0, 229, 163, 0.15);
    color: #00e5a3;
    font-weight: 800;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}

.portal-info-list strong {
    font-size: 0.86rem;
    color: var(--text-primary);
    display: block;
}

.portal-info-list p {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-top: 2px;
}

/* 5. Transaction History & Filter */
.tx-filter-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.tx-filter-chips {
    display: flex;
    flex-wrap: wrap;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 2px;
}

.tx-chip-btn,
.tx-status-chip-btn {
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.tx-chip-btn.active {
    background: var(--color-accent);
    color: #fff;
}

.tx-status-filter-chips {
    margin-top: 10px;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.tx-status-filter-chips::-webkit-scrollbar {
    display: none;
}
.tx-status-chip-btn {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    white-space: nowrap;
    gap: 6px;
}
.tx-status-chip-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--bg-input);
    color: var(--text-secondary);
    font-size: 0.68rem;
}
.tx-status-chip-btn.active {
    color: #fff;
}
.tx-status-chip-btn.active .tx-status-chip-count {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}
.tx-status-chip-btn[data-status="all"].active { background: var(--color-accent); }
.tx-status-chip-btn[data-status="pending"].active { background: var(--color-accent); }
.tx-status-chip-btn[data-status="completed"].active { background: var(--color-positive); }
.tx-status-chip-btn[data-status="failed"].active { background: var(--color-negative); }

.tx-search-box {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 6px 14px;
    max-width: 100%;
}

.tx-search-box svg {
    width: 14px;
    height: 14px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.tx-search-box input {
    font-size: 0.8rem;
    color: var(--text-primary);
    width: 220px;
    max-width: 100%;
    min-width: 0;
}

.portal-empty-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
}

.portal-empty-state svg {
    width: 36px;
    height: 36px;
    margin-bottom: 10px;
    opacity: 0.5;
}

/* 6. Accounts Grid (Mobile Money & Crypto Wallets) */
.portal-accounts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
    margin-top: 14px;
}

/* Compact card: edit/delete live in the top row next to the operator tag
   instead of a separate bottom row, so the card doesn't carry dead vertical
   space just to host two icon buttons. */
.portal-account-card {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
    transition: border-color var(--transition-fast);
}

.portal-account-card:hover {
    border-color: var(--border-hover);
}

.account-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.account-operator-tag {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--color-accent);
    background: rgba(0, 102, 255, 0.1);
    padding: 2px 7px;
    border-radius: 10px;
    white-space: nowrap;
}

.account-label {
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--text-primary);
}

.account-number {
    font-family: monospace;
    font-size: 0.78rem;
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.03);
    padding: 5px 8px;
    border-radius: 6px;
}

.account-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.btn-icon-del,
.btn-icon-edit {
    background: transparent;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    line-height: 0;
}

.btn-icon-del {
    color: #ff4d6d;
}

.btn-icon-del:hover {
    background: rgba(255, 77, 109, 0.15);
}

.btn-icon-edit {
    color: var(--color-accent);
}

.btn-icon-edit:hover {
    background: rgba(0, 102, 255, 0.15);
}

.btn-icon-del svg,
.btn-icon-edit svg {
    width: 14px;
    height: 14px;
}

/* 7. KYC Gauge & Dossier */
.kyc-limits-gauge-card {
    background: linear-gradient(135deg, rgba(0, 102, 255, 0.1), rgba(0, 229, 163, 0.05));
    border: 1px solid rgba(0, 102, 255, 0.25);
    border-radius: var(--border-radius-sm);
    padding: 18px;
}

.gauge-header {
    display: flex;
    justify-content: space-between;
    font-size: 0.86rem;
    margin-bottom: 8px;
}

.gauge-bar-track {
    width: 100%;
    height: 8px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    overflow: hidden;
}

.gauge-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #0066ff, #00e5a3);
    border-radius: 4px;
    transition: width 0.6s ease;
}

.gauge-footer {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: 8px;
}

.kyc-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
    margin-top: 12px;
}

.kyc-info-item span {
    display: block;
    font-size: 0.74rem;
    color: var(--text-muted);
}

.kyc-info-item strong {
    font-size: 0.88rem;
    color: var(--text-primary);
}

/* 8. Theme Choice Cards */
.theme-selection-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.theme-choice-card {
    background: var(--bg-input);
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius-md);
    padding: 16px;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.theme-choice-card.active {
    border-color: var(--color-accent);
    box-shadow: 0 0 16px rgba(0, 102, 255, 0.3);
}

.theme-preview {
    height: 60px;
    border-radius: 8px;
    margin-bottom: 12px;
}

.light-preview {
    background: linear-gradient(135deg, #ffffff, #f1f5f9);
    border: 1px solid rgba(0, 102, 255, 0.25);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.dark-preview {
    background: linear-gradient(135deg, #060a17, #0c1225);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.midnight-preview {
    background: linear-gradient(135deg, #070d1e, #0d1730);
    border: 1px solid rgba(0, 102, 255, 0.3);
}

.theme-meta strong {
    display: block;
    font-size: 0.95rem;
    color: var(--text-primary);
}

.theme-meta p {
    font-size: 0.78rem;
    color: var(--text-secondary);
}

/* 9. Live Tracking Modal Timeline */
.tracking-shield-icon {
    position: relative;
    width: 60px;
    height: 60px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-accent);
}

.tracking-shield-icon svg {
    width: 32px;
    height: 32px;
    z-index: 2;
}

.pulse-spinner {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(0, 102, 255, 0.2);
    animation: pulseGlow 1.5s infinite;
}

@keyframes pulseGlow {
    0% { transform: scale(0.8); opacity: 0.8; }
    50% { transform: scale(1.3); opacity: 0.3; }
    100% { transform: scale(0.8); opacity: 0.8; }
}

.tracking-timeline-box {
    display: flex;
    flex-direction: column;
    gap: 16px;
    text-align: left;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    padding: 18px;
}

.tracking-step {
    display: flex;
    gap: 14px;
    align-items: center;
    opacity: 0.45;
    transition: opacity var(--transition-normal);
}

.tracking-step.active {
    opacity: 1;
}

.step-dot {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    font-size: 0.78rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tracking-step.active .step-dot {
    background: var(--color-accent);
    color: #fff;
    box-shadow: 0 0 10px var(--color-accent);
}

.step-text strong {
    display: block;
    font-size: 0.88rem;
    color: var(--text-primary);
}

.step-text span {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.tracking-status-msg {
    font-size: 0.85rem;
    color: #00d2ff;
    font-weight: 600;
}

/* 10. Official Receipt Styles */
.modal-card-receipt {
    max-width: 580px;
}

.official-receipt {
    background: #ffffff;
    color: #0f172a;
    border-radius: var(--border-radius-md);
    padding: 28px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .official-receipt, [data-theme="midnight"] .official-receipt {
    background: #0d152a;
    color: #ffffff;
    border: 1px solid rgba(0, 102, 255, 0.35);
}

.receipt-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 2px solid rgba(0, 102, 255, 0.2);
    padding-bottom: 14px;
    margin-bottom: 14px;
}

.receipt-logo-text {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.2rem;
    display: block;
}

.receipt-logo-text span {
    color: #0066ff;
}

.receipt-tag {
    font-size: 0.68rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
}

.receipt-status-badge {
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    padding: 4px 10px;
    border-radius: 12px;
    background: rgba(0, 229, 163, 0.15);
}

.receipt-id-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.82rem;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
}

.rcpt-val-id {
    color: #0066ff;
}

.receipt-details-table {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rcpt-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.rcpt-row strong, .rcpt-row span:last-child {
    color: var(--text-primary);
}

.rcpt-highlight {
    background: rgba(0, 102, 255, 0.08);
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 0.95rem;
}

.receipt-footer {
    margin-top: 20px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.receipt-qr-sim {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.74rem;
    color: var(--text-muted);
    font-weight: 600;
}

.receipt-qr-sim svg {
    width: 16px;
    height: 16px;
}

.receipt-legal {
    font-size: 0.68rem;
    color: var(--text-muted);
    line-height: 1.3;
}

.receipt-action-buttons {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

/* 11. Responsive Mobile Portal Drawer */
@media (max-width: 900px) {
    .portal-sidebar {
        position: fixed;
        top: 0;
        left: -280px;
        height: 100vh;
        z-index: 1000;
        box-shadow: 10px 0 30px rgba(0, 0, 0, 0.5);
    }

    .portal-sidebar.active {
        transform: translateX(280px);
    }

    .portal-sidebar-close {
        display: block;
    }

    .portal-hamburger {
        display: flex;
    }

    .portal-sidebar-backdrop {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(4px);
        z-index: 999;
        display: none;
    }

    .portal-sidebar-backdrop.active {
        display: block;
    }

    .portal-trade-grid {
        grid-template-columns: 1fr;
    }
}

/* Light Theme Portal Refinements */
[data-theme="light"] .portal-sidebar {
    background-color: #ffffff;
    border-right-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .portal-topbar {
    background-color: #ffffff;
    border-bottom-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .portal-metric-card,
[data-theme="light"] .portal-card,
[data-theme="light"] .portal-account-card,
[data-theme="light"] .theme-choice-card {
    background-color: #ffffff;
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .portal-welcome-hero {
    background: linear-gradient(135deg, rgba(0, 102, 255, 0.08), rgba(0, 210, 255, 0.04));
    border-color: rgba(0, 102, 255, 0.2);
}

[data-theme="light"] .portal-notif-dropdown {
    background-color: #ffffff;
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
}

[data-theme="light"] .dash-table td {
    border-bottom-color: rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .dash-table tr:hover td {
    background-color: rgba(0, 102, 255, 0.03);
}

[data-theme="light"] .account-number {
    background-color: #f1f5f9;
    color: #334155;
}

[data-theme="light"] .trade-select {
    background-color: #f8fafc;
    color: #0f172a;
    border-left-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .trade-select option {
    background-color: #ffffff !important;
    color: #0f172a !important;
}

[data-theme="midnight"] .trade-select {
    background-color: #0d1730;
    color: #f1f5f9;
    border-left-color: rgba(0, 102, 255, 0.2);
}

[data-theme="midnight"] .trade-select option {
    background-color: #0d1730 !important;
    color: #f1f5f9 !important;
}

[data-theme="dark"] .trade-select {
    background-color: #0c1225;
    color: #ffffff;
    border-left-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .trade-select option {
    background-color: #0c1225 !important;
    color: #ffffff !important;
}

/* ==========================================================================
   CONSOLE OPÉRATEUR AGENT (KPIs, Sub-tabs, Commandes, Support, KYC, Audit)
   ========================================================================== */

/* 1. Agent KPIs Grid */
.agent-kpis-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 16px;
}

.agent-kpi-card {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    position: relative;
    overflow: hidden;
    transition: all var(--transition-fast);
}

.agent-kpi-card:hover {
    transform: translateY(-2px);
    border-color: var(--color-accent);
}

.agent-kpi-card.pending {
    border-left: 4px solid #ff9900;
}

.agent-kpi-card.support {
    border-left: 4px solid #00d2ff;
}

.agent-kpi-card.kyc {
    border-left: 4px solid #c084fc;
}

.agent-kpi-card.volume {
    border-left: 4px solid #00e5a3;
}

.agent-kpi-icon {
    font-size: 1.8rem;
    line-height: 1;
}

.agent-kpi-content {
    display: flex;
    flex-direction: column;
}

.agent-kpi-label {
    font-size: 0.74rem;
    color: var(--text-muted);
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.agent-kpi-value {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-top: 2px;
}

.agent-kpi-badge {
    position: absolute;
    top: 10px;
    right: 12px;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-secondary);
}

/* 2. Agent Sub-Navigation */
.agent-subnav {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    background: var(--bg-secondary);
    padding: 6px;
    border-radius: var(--border-radius-md);
    border: 1px solid var(--border-color);
}

.agent-tab-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: var(--border-radius-sm);
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.agent-tab-btn svg {
    width: 16px;
    height: 16px;
}

.agent-tab-btn:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.04);
}

.agent-tab-btn.active {
    background: var(--color-accent);
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(0, 102, 255, 0.35);
}

.agent-subtab-badge {
    padding: 1px 6px;
    border-radius: 10px;
    font-size: 0.68rem;
    font-weight: 800;
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}

.agent-subtab-badge.warning {
    background: #ff9900;
}

.agent-subtab-badge.info {
    background: #00d2ff;
    color: #070d1e;
}

/* 3. Ticket Priority Badges */
.badge-priority-urgent {
    background: rgba(255, 77, 109, 0.15);
    color: #ff4d6d;
    border: 1px solid rgba(255, 77, 109, 0.3);
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
}

.badge-priority-normal {
    background: rgba(0, 210, 255, 0.15);
    color: #00d2ff;
    border: 1px solid rgba(0, 210, 255, 0.3);
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.72rem;
    font-weight: 700;
}

/* 4. Ticket Thread Chat Box */
.ticket-thread-box {
    max-height: 240px;
    overflow-y: auto;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ticket-msg {
    max-width: 85%;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 0.84rem;
    line-height: 1.4;
}

.ticket-msg.client {
    align-self: flex-start;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

.ticket-msg.agent {
    align-self: flex-end;
    background: linear-gradient(135deg, rgba(0, 102, 255, 0.25), rgba(0, 210, 255, 0.15));
    border: 1px solid rgba(0, 102, 255, 0.4);
    color: var(--text-primary);
}

.ticket-msg-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.68rem;
    color: var(--text-muted);
    margin-bottom: 4px;
    gap: 8px;
}

.ticket-msg-sender {
    font-weight: 700;
    color: var(--color-accent);
}

/* 5. Quick action chips */
.btn-chip-reason,
.btn-chip-quickreply {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 4px 10px;
    border-radius: 14px;
    font-size: 0.74rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-chip-reason:hover,
.btn-chip-quickreply:hover {
    background: rgba(0, 102, 255, 0.15);
    border-color: var(--color-accent);
    color: var(--text-primary);
}

/* 6. KYC Inspect Card Preview */
.kyc-inspect-card-preview {
    background: linear-gradient(135deg, rgba(0, 102, 255, 0.15), rgba(192, 132, 252, 0.1));
    border: 2px dashed rgba(0, 102, 255, 0.35);
    border-radius: var(--border-radius-md);
    padding: 18px;
    position: relative;
}

.kyc-inspect-chip {
    display: inline-block;
    background: var(--color-accent);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 4px;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.kyc-inspect-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.financial-grid {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.whatsapp-banner-text {
    min-width: 300px;
}

.kyc-field-row span {
    display: block;
    font-size: 0.72rem;
    color: var(--text-muted);
}

.kyc-field-row strong {
    font-size: 0.86rem;
    color: var(--text-primary);
}

.kyc-inspect-watermark {
    position: absolute;
    bottom: 10px;
    right: 14px;
    font-size: 0.65rem;
    color: rgba(0, 229, 163, 0.7);
    font-weight: 800;
    letter-spacing: 1px;
}

/* Light Theme overrides for Agent console */
[data-theme="light"] .agent-kpi-card {
    background: #ffffff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .agent-subnav {
    background: #f1f5f9;
}

[data-theme="light"] .ticket-thread-box {
    background: #f8fafc;
}

[data-theme="light"] .ticket-msg.client {
    background: #ffffff;
}

[data-theme="light"] .kyc-inspect-card-preview {
    background: linear-gradient(135deg, rgba(0, 102, 255, 0.06), rgba(192, 132, 252, 0.05));
    border-color: rgba(0, 102, 255, 0.3);
}

/* ==========================================================================
   CONSOLE MASTER ADMINISTRATEUR (KPIs, Sub-tabs, Taux, Liquidités, Opérateurs)
   ========================================================================== */

/* 1. Admin Master KPIs */
.admin-kpis-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.admin-kpi-card {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    padding: 12px;
    min-height: 76px;
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    overflow: hidden;
    transition: all var(--transition-fast);
}

.admin-kpi-card:hover {
    transform: translateY(-2px);
    border-color: var(--color-accent);
}

.admin-kpi-card.volume {
    border-left: 4px solid #0066FF;
}

.admin-kpi-card.users {
    border-left: 4px solid #00d2ff;
}

.admin-kpi-card.verified-users {
    border-left: 4px solid #10b981;
}

.admin-kpi-card.liquidity {
    border-left: 4px solid #00e5a3;
}

.admin-kpi-card.satisfaction {
    border-left: 4px solid #ffb822;
}

.admin-kpi-card.restricted {
    border-left: 4px solid #fbbf24;
}

.admin-kpi-card.flux-entrants {
    border-left: 4px solid #059669;
}

.admin-kpi-card.flux-sortants {
    border-left: 4px solid #9333ea;
}

.admin-kpi-card.echecs {
    border-left: 4px solid #dc2626;
}

.admin-kpi-icon {
    font-size: 1.4rem;
    line-height: 1;
    flex-shrink: 0;
}

.admin-kpi-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.admin-kpi-label {
    font-size: 0.66rem;
    color: var(--text-muted);
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.3px;
    line-height: 1.25;
}

.admin-kpi-value {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-top: 1px;
}

.admin-kpi-sub {
    font-size: 0.68rem;
    color: var(--text-secondary);
    font-weight: 600;
    margin-top: 2px;
}

/* Reserves its own horizontal strip at the top of the card instead of
   floating over the label's corner - the label's length no longer matters,
   there's simply no shared space left for the two to collide in. */
.admin-kpi-card:has(.admin-kpi-badge) {
    padding-top: 26px;
}

.admin-kpi-badge {
    position: absolute;
    top: 8px;
    left: 12px;
    right: 12px;
    font-size: 0.58rem;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-secondary);
    text-align: right;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 2. Admin Sub-Navigation */
.admin-subnav {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    background: var(--bg-secondary);
    padding: 6px;
    border-radius: var(--border-radius-md);
    border: 1px solid var(--border-color);
}

.admin-tab-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: var(--border-radius-sm);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.admin-tab-btn svg {
    width: 15px;
    height: 15px;
}

.admin-tab-btn:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.04);
}

.admin-tab-btn.active {
    background: linear-gradient(135deg, #0066FF, #00d2ff);
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(0, 102, 255, 0.35);
}

/* 3. Rates Configuration Cards */
.admin-rates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 18px;
}

.rate-config-card {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: all var(--transition-fast);
}

.rate-config-card:hover {
    border-color: rgba(0, 102, 255, 0.4);
}

.rate-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
}

.rate-card-header h4 {
    font-size: 0.95rem;
    font-weight: 700;
}

.crypto-badge {
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 800;
    color: #fff;
}

.crypto-badge.usdt {
    background: #009393;
}

.crypto-badge.btc {
    background: #f7931a;
}

.crypto-badge.eth {
    background: #627eea;
}

/* 4. Liquidity & Reserves Grid */
.admin-liquidity-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.liquidity-card {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
}

.liquidity-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.82rem;
    font-weight: 700;
}

.liquidity-balance {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--text-primary);
}

.liquidity-progress-track {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    overflow: hidden;
}

.liquidity-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #0066FF, #00e5a3);
    border-radius: 3px;
}

.liquidity-card-footer {
    display: flex;
    justify-content: space-between;
    font-size: 0.72rem;
    color: var(--text-muted);
}

/* 5. Operator Toggle Switches */
.admin-toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

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

.admin-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.15);
    transition: .3s;
    border-radius: 24px;
}

.admin-toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .3s;
    border-radius: 50%;
}

.admin-toggle-switch input:checked + .admin-toggle-slider {
    background-color: #00e5a3;
}

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

/* 6. Star Rating Cell */
.star-rating-cell {
    color: #ffb822;
    font-size: 0.88rem;
    letter-spacing: 1px;
}

/* ==========================================================================
   MODULE GESTION DES TAUX, CRYPTOMONNAIES & LIQUIDITÉS (ADMIN MASTER)
   ========================================================================== */

/* 1. Strategy Shortcuts Toolbar */
/* 2. Rates Preview Banner */
.rates-preview-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 14px;
    border-radius: var(--border-radius-sm);
    background: rgba(0, 229, 163, 0.08);
    border: 1px solid rgba(0, 229, 163, 0.25);
}

/* 3. Crypto Assets Grid & Cards */
.admin-crypto-card {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
    transition: all var(--transition-fast);
}

.admin-crypto-card:hover {
    border-color: rgba(0, 102, 255, 0.4);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.admin-crypto-card.unavailable {
    opacity: 0.75;
    border-color: rgba(255, 59, 48, 0.35);
    background: linear-gradient(180deg, rgba(255, 59, 48, 0.03), transparent);
}

.crypto-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

.crypto-card-identity {
    display: flex;
    align-items: center;
    gap: 10px;
}

.crypto-card-identity h4 {
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0;
}

.crypto-network-tag {
    font-size: 0.68rem;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.06);
    padding: 2px 6px;
    border-radius: 4px;
}

.crypto-card-status-toggle {
    display: flex;
}

/* ==========================================================================
   MODULE GESTION DES ACTIFS CRYPTO, TAUX & LIMITES (EXACT SCREENSHOT DESIGN)
   ========================================================================== */

.admin-crypto-assets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 24px;
}

.admin-crypto-card {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
    transition: all var(--transition-fast);
}

.admin-crypto-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    border-color: rgba(0, 102, 255, 0.35);
}

.admin-crypto-card.unavailable {
    opacity: 0.72;
    border-color: rgba(255, 59, 48, 0.3);
    background: linear-gradient(180deg, rgba(255, 59, 48, 0.03), transparent);
}

/* Card Header */
.crypto-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.crypto-card-identity {
    display: flex;
    align-items: center;
    gap: 14px;
}

.crypto-icon-round-blue {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: #0066FF;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 102, 255, 0.25);
}

.crypto-icon-round-blue svg {
    width: 24px;
    height: 24px;
}

.crypto-title-box {
    display: flex;
    flex-direction: column;
}

.crypto-title-box h4 {
    font-size: 1.15rem;
    font-weight: 900;
    text-transform: uppercase;
    margin: 0;
    color: var(--text-primary);
    letter-spacing: -0.3px;
}

.crypto-stock-subtitle {
    font-size: 0.78rem;
    color: var(--text-muted);
    font-weight: 600;
    margin: 2px 0 0 0;
}

.crypto-unit-tag {
    font-size: 0.72rem;
    color: var(--text-muted);
    font-weight: 700;
    text-transform: uppercase;
}

.crypto-header-badges {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.badge-crypto-active {
    background: rgba(0, 229, 163, 0.12);
    color: #00b37e;
    border: 1px solid rgba(0, 229, 163, 0.3);
    font-size: 0.72rem;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    letter-spacing: 0.3px;
    cursor: pointer;
}

.badge-crypto-active::before {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: #00b37e;
    box-shadow: 0 0 6px rgba(0, 179, 126, 0.6);
}

.badge-crypto-active.unavailable {
    background: rgba(255, 59, 48, 0.12);
    color: #ff3b30;
    border-color: rgba(255, 59, 48, 0.3);
}

.badge-crypto-active.unavailable::before {
    background-color: #ff3b30;
    box-shadow: 0 0 6px rgba(255, 59, 48, 0.6);
}

.badge-crypto-symbol-dark {
    background: #0b1220;
    color: #ffffff;
    font-size: 0.74rem;
    font-weight: 900;
    padding: 4px 12px;
    border-radius: 6px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* Grids 2-Columns for Rates and Stock */
.crypto-rates-grid-screenshot,
.crypto-stock-alert-grid-screenshot {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.label-with-tag {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--text-primary);
    margin-bottom: 4px;
    letter-spacing: 0.3px;
}

.crypto-tag-vente {
    background: #e6f4ff;
    color: #0958d9;
    border: 1px solid #91caff;
    font-size: 0.62rem;
    font-weight: 800;
    padding: 1px 6px;
    border-radius: 4px;
}

.crypto-tag-achat {
    background: #f6ffed;
    color: #389e0d;
    border: 1px solid #b7eb8f;
    font-size: 0.62rem;
    font-weight: 800;
    padding: 1px 6px;
    border-radius: 4px;
}

/* Suffix inputs */
.crypto-input-unit-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.crypto-input-unit-wrap input {
    width: 100%;
    padding: 10px 52px 10px 12px;
    font-size: 1.05rem;
    font-weight: 800;
    border-radius: 10px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    transition: all var(--transition-fast);
}

.crypto-input-unit-wrap input:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.15);
}

.input-unit-suffix {
    position: absolute;
    right: 12px;
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--text-muted);
    pointer-events: none;
    text-transform: uppercase;
}

/* Input Border Themes */
.input-wrap-green input {
    border: 1.5px solid #87d068;
}

.input-wrap-blue input {
    border: 1.5px solid #91caff;
}

.input-wrap-amber input {
    border: 1.5px solid #ffd591;
}

.input-wrap-neutral input {
    border: 1px solid var(--border-color);
}

/* Nested Limits Container */
.crypto-limits-nested-box {
    background: rgba(0, 102, 255, 0.03);
    border: 1px solid rgba(0, 102, 255, 0.15);
    border-radius: 14px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.limits-nested-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.74rem;
    font-weight: 900;
    text-transform: uppercase;
    color: #0066FF;
    letter-spacing: 0.5px;
}

.limits-nested-header svg {
    width: 16px;
    height: 16px;
}

.limits-nested-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.limits-nested-grid label {
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 4px;
    display: block;
}

/* Card Actions */
.crypto-card-screenshot-actions {
    display: flex;
    gap: 10px;
    padding-top: 4px;
}

/* Light Theme overrides */
[data-theme="light"] .admin-crypto-card {
    background: #ffffff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .input-wrap-green input {
    background: #f6ffed;
    border-color: #b7eb8f;
}

[data-theme="light"] .input-wrap-blue input {
    background: #f0f7ff;
    border-color: #91caff;
}

[data-theme="light"] .input-wrap-amber input {
    background: #fffbe6;
    border-color: #ffe58f;
}

[data-theme="light"] .crypto-limits-nested-box {
    background: #f8fafc;
    border-color: #e2e8f0;
}

/* ==========================================================================
   MODULE OPÉRATEURS MOBILE MONEY & PAYS (EXACT DESIGN DU SCREENSHOT)
   ========================================================================== */

/* Sous-titres de section du panneau Liquidités & Réserves */
.portal-subheading {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.2px;
    margin: 26px 0 12px;
}

.liq-header-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* Barre "Filtrer par pays" + recherche */
.momo-country-filter-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
}

.momo-country-filter-label {
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-muted);
}

.momo-country-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.momo-country-chip {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    border-radius: 999px;
    padding: 7px 15px;
    font-size: 0.8rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all var(--transition-fast);
}

.momo-country-chip:hover {
    border-color: var(--color-accent);
    color: var(--text-primary);
}

/* Dark themes: the accent reads better than a near-black pill on a dark card. The light
   theme keeps the dark navy pill of the reference design (override further down). */
.momo-country-chip.active {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #ffffff;
}

.momo-chip-count {
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 0.74rem;
    opacity: 0.7;
}

/* Tableau détaillé : une ligne par opérateur & pays */
.momo-liq-table-wrap {
    overflow-x: auto;
    margin-bottom: 24px;
}

.admin-momo-liquidity-table {
    min-width: 900px;
}

.admin-momo-liquidity-table tfoot td {
    border-bottom: none;
    border-top: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.admin-momo-liquidity-table .momo-row-offline td {
    opacity: 0.6;
}

.admin-momo-liquidity-table .badge-momo-internal-code,
.admin-momo-liquidity-table .badge-momo-service {
    white-space: nowrap;
}

.momo-table-country {
    display: flex;
    align-items: center;
    gap: 10px;
}

.momo-table-country img {
    width: 22px;
    height: 16px;
    object-fit: cover;
    border-radius: 3px;
    flex-shrink: 0;
}

.momo-table-country strong {
    display: block;
    color: var(--text-primary);
    font-size: 0.84rem;
    line-height: 1.2;
}

.momo-table-country span {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}

.momo-amount-low {
    color: #ff3b30;
}

/* Jauge de liquidité compacte dans le tableau */
.momo-liq-mini {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 140px;
}

.momo-liq-mini-track {
    flex: 1;
    height: 6px;
    border-radius: 4px;
    background: var(--border-color);
    overflow: hidden;
}

.momo-liq-mini-fill {
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, #00b37e, #00e5a3);
}

.momo-liq-mini-fill.is-low {
    background: linear-gradient(90deg, #ff8a00, #ff3b30);
}

.momo-liq-mini span {
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--text-secondary);
    white-space: nowrap;
}

[data-theme="light"] .momo-country-chip {
    background: #f1f5f9;
    border-color: #e2e8f0;
}

[data-theme="light"] .momo-country-chip.active {
    background: #0f1a2e;
    border-color: #0f1a2e;
    color: #ffffff;
}

[data-theme="light"] .momo-liq-mini-track {
    background: #e2e8f0;
}

.admin-momo-operators-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 22px;
}

.momo-operator-card {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    transition: all var(--transition-fast);
    position: relative;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}

.momo-operator-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    border-color: rgba(0, 102, 255, 0.35);
}

.momo-operator-card.offline {
    opacity: 0.72;
    border-color: rgba(255, 59, 48, 0.3);
    background: linear-gradient(180deg, rgba(255, 59, 48, 0.03), transparent);
}

/* Card Top Header */
.momo-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.momo-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.momo-country-code {
    font-size: 1.55rem;
    font-weight: 900;
    color: var(--text-primary);
    line-height: 1;
    min-width: 40px;
    letter-spacing: -0.5px;
}

.momo-title-block {
    display: flex;
    flex-direction: column;
}

.momo-title-block h4 {
    font-size: 1.05rem;
    font-weight: 800;
    margin: 0;
    color: var(--text-primary);
}

.momo-title-block p {
    font-size: 0.76rem;
    color: var(--text-muted);
    margin: 2px 0 0 0;
}

.momo-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Service Status Pill */
.badge-momo-service {
    background: rgba(0, 229, 163, 0.12);
    color: #00b37e;
    border: 1px solid rgba(0, 229, 163, 0.3);
    font-size: 0.72rem;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    letter-spacing: 0.3px;
}

.badge-momo-service::before {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: #00b37e;
    box-shadow: 0 0 6px rgba(0, 179, 126, 0.6);
}

.badge-momo-service.offline {
    background: rgba(255, 59, 48, 0.12);
    color: #ff3b30;
    border-color: rgba(255, 59, 48, 0.3);
}

.badge-momo-service.offline::before {
    background-color: #ff3b30;
    box-shadow: 0 0 6px rgba(255, 59, 48, 0.6);
}

/* Internal Code Pill */
.badge-momo-internal-code {
    background: rgba(0, 102, 255, 0.1);
    color: #0066FF;
    border: 1px solid rgba(0, 102, 255, 0.25);
    font-size: 0.72rem;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 6px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* Form Row (Reserve & Fee) */
.momo-form-row {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 14px;
}

.momo-field-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
    /* Grid items refuse to shrink below their content's natural width unless
       told otherwise - without this, a label like "FRAIS OPÉRATEUR (%)" pushes
       its whole column wider than the 1fr track instead of wrapping. */
    min-width: 0;
}

.momo-field-group label {
    font-size: 0.68rem;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.5px;
}

.momo-field-group input {
    font-size: 0.95rem;
    font-weight: 700;
    padding: 10px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    transition: all var(--transition-fast);
}

.momo-field-group input:focus {
    border-color: var(--color-accent);
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.15);
}

/* Lower Actions Row */
.momo-card-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding-top: 4px;
}

.btn-momo-toggle-service {
    background: rgba(255, 59, 48, 0.08);
    color: #ff3b30;
    border: 1px solid rgba(255, 59, 48, 0.35);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 0.78rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-momo-toggle-service:hover {
    background: rgba(255, 59, 48, 0.16);
    border-color: #ff3b30;
}

.btn-momo-toggle-service.is-offline {
    background: rgba(0, 229, 163, 0.1);
    color: #00b37e;
    border-color: rgba(0, 229, 163, 0.4);
}

.btn-momo-toggle-service.is-offline:hover {
    background: rgba(0, 229, 163, 0.2);
}

.btn-momo-toggle-alert {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 0.78rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-momo-toggle-alert:hover {
    border-color: #ffb822;
    color: #ffb822;
}

.btn-momo-toggle-alert.is-alert {
    background: rgba(255, 184, 34, 0.15);
    border-color: #ffb822;
    color: #ffb822;
    animation: alertPulse 1.8s infinite;
}

.btn-momo-toggle-service svg,
.btn-momo-toggle-alert svg {
    width: 16px;
    height: 16px;
}

/* Light Theme overrides for Mobile Money cards */
[data-theme="light"] .momo-operator-card {
    background: #ffffff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .momo-field-group input {
    background: #ffffff;
}

[data-theme="light"] .badge-momo-internal-code {
    background: #eef4ff;
}

[data-theme="light"] .btn-momo-toggle-alert {
    background: #f8fafc;
}

/* A "floating round button" rule for #btn-access-platform used to live here. It had
   never applied: the unclosed .crypto-card-status-toggle block above swallowed every
   rule from this file's crypto module onwards. Closing that block made it live again,
   which broke things - #btn-access-platform is the header CTA (.nav-cta in index.html),
   so position:fixed pulled it out of the nav bar, and z-index:9999 floated it above the
   modals (z-index 2000). Removed rather than left dead. If a floating CTA is wanted,
   it should be its own element instead of restyling the header button. */

/* --- RECENT TRANSACTIONS TABLE --- */
.recent-transactions-section {
    padding: 32px 0;
    background-color: var(--bg-primary);
}

.tx-section-title {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    font-size: 2.8rem;
    font-weight: 900;
}

.section-title-xl {
    font-size: 3rem;
    font-weight: 900;
}

.ticket-stat-value {
    font-size: 1.5rem;
    font-weight: 900;
    margin-top: 4px;
}

.transactions-table-container {
    width: 100%;
    overflow-x: auto;
    border-radius: 12px;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
}

.transactions-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    min-width: 800px;
}

/* Mobile-only continuous ticker: replaces the (too-wide-for-a-phone) table
   with a strip of compact cards that scrolls itself right-to-left, instead of
   requiring a manual horizontal swipe. Hidden on desktop/tablet, where the
   table already reads fine. */
.tx-ticker {
    display: none;
}

@media (max-width: 768px) {
    .transactions-table-container {
        display: none;
    }

    .tx-ticker {
        display: block;
        overflow: hidden;
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
        mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
    }
}

.tx-ticker-track {
    display: flex;
    width: max-content;
    gap: 14px;
    animation: tx-ticker-scroll 26s linear infinite;
}

/* Pausing on touch/hover lets someone actually read a card instead of
   chasing a moving target. */
.tx-ticker:hover .tx-ticker-track,
.tx-ticker:active .tx-ticker-track {
    animation-play-state: paused;
}

@keyframes tx-ticker-scroll {
    from {
        transform: translateX(0);
    }
    to {
        /* The track holds the same 5 items twice - -50% lands exactly on the
           start of the duplicate set, so the loop never visibly jumps. */
        transform: translateX(-50%);
    }
}

.tx-ticker-item {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 10px 16px;
}

.tx-ticker-pair {
    display: flex;
    align-items: center;
    gap: 6px;
}

.tx-ticker-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tx-ticker-arrow {
    color: var(--text-muted);
    font-size: 0.8rem;
}

.tx-ticker-amount {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    .tx-ticker-track {
        animation: none;
    }
}

.transactions-table thead {
    background-color: #2563eb;
    color: #ffffff;
}

.transactions-table th {
    padding: 10px 18px;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: none;
}

.transactions-table tbody tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    background-color: #0f172a;
    transition: background-color 0.2s ease;
}

.transactions-table tbody tr:last-child {
    border-bottom: none;
}

.transactions-table tbody tr:hover {
    background-color: #1e293b;
}

.transactions-table td {
    padding: 10px 18px;
    vertical-align: middle;
}

.tx-asset {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tx-asset span {
    font-weight: 600;
    color: #ffffff;
    font-size: 0.95rem;
}

.asset-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tx-amount {
    font-size: 0.95rem;
    color: #cbd5e1;
}

.tx-amount strong {
    color: #ffffff;
}

.tx-date {
    font-size: 0.85rem;
    color: #94a3b8;
}

/* ==========================================================================
   AGENT DASHBOARD REDESIGN (v2)
   ========================================================================== */

.agent-header-card {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.agent-header-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 16px;
    margin-bottom: 24px;
}

.agent-header-title h2 {
    font-size: 22px;
    font-weight: 800;
    color: #0b1120;
    margin: 8px 0;
}

.agent-header-title p {
    color: #666;
    font-size: 14px;
    margin: 0;
}

.role-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #f39c12;
    margin-right: 6px;
}

.agent-header-title {
    color: #f39c12;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.agent-profile-badge {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #f8f9fa;
    padding: 8px 16px;
    border-radius: 50px;
    border: 1px solid #eee;
}

.agent-avatar {
    width: 32px;
    height: 32px;
    background: #0b1120;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    flex-shrink: 0;
}

.agent-avatar svg {
    width: 16px;
    height: 16px;
}

.agent-info {
    display: flex;
    flex-direction: column;
}

.agent-info strong {
    font-size: 14px;
    color: #0b1120;
}

.agent-info span {
    font-size: 12px;
    color: #666;
}

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

.agent-kpi-box {
    border-radius: 8px;
    padding: 16px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-left: 4px solid;
}

.agent-kpi-box span {
    font-size: 12px;
    font-weight: 700;
    color: #444;
}

.agent-kpi-box strong {
    font-size: 24px;
    color: #0b1120;
}

.agent-kpi-box.orange {
    background: #fffdf5;
    border-left-color: #f39c12;
}
.agent-kpi-box.purple {
    background: #fcf5ff;
    border-left-color: #9b59b6;
}
.agent-kpi-box.blue {
    background: #f0f8ff;
    border-left-color: #3498db;
}

/* Global Search Bar */
.agent-global-search {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 24px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.search-input-wrapper {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.search-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    color: #666;
}

.search-label svg {
    width: 16px;
    height: 16px;
}

.input-inner {
    display: flex;
    align-items: center;
    background: #f8f9fa;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 0 16px;
}

.input-inner .hash-icon {
    color: #999;
    font-weight: 700;
    font-size: 18px;
    margin-right: 8px;
}

.input-inner input {
    width: 100%;
    border: none;
    background: transparent;
    padding: 16px 0;
    font-size: 14px;
    outline: none;
    color: #333;
}

/* Filter Navigation */
.agent-nav-filters {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.agent-nav-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid #eee;
    padding: 12px 20px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 700;
    color: #666;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}

.agent-nav-btn svg {
    width: 16px;
    height: 16px;
    color: #888;
}

.agent-nav-btn.active {
    background: #0b1120;
    color: #fff;
    border-color: #0b1120;
}

.agent-nav-btn.active svg {
    color: #f39c12;
}

/* Transaction List (Orders) */
.agent-orders-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
}

.title-block {
    display: flex;
    align-items: center;
    gap: 12px;
}

.title-block h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.2;
}

.actions-block {
    display: flex;
    align-items: center;
    gap: 16px;
}

.mini-search {
    display: flex;
    align-items: center;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 8px 12px;
}

.mini-search svg {
    width: 14px;
    height: 14px;
    color: var(--text-muted);
    margin-right: 8px;
}

.mini-search input {
    border: none;
    background: transparent;
    outline: none;
    font-size: 13px;
    width: 150px;
    color: var(--text-primary);
}

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

.simulate-btn {
    padding: 8px 16px;
    font-weight: 700;
    font-size: 13px;
}

.agent-transactions-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tx-agent-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    row-gap: 12px;
    padding: 16px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    transition: all 0.2s ease;
    overflow: hidden;
}

.tx-agent-card:hover {
    border-color: #ddd;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.tx-col-id {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 150px;
}

.view-icon {
    width: 32px;
    height: 32px;
    background: #f8f9fa;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
}

.tx-col-id strong {
    display: block;
    font-size: 14px;
    color: #0b1120;
}

.tx-col-id span {
    display: block;
    font-size: 12px;
    color: #888;
}

.tx-col-type {
    min-width: 120px;
}

.pill-type {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
}

.pill-type.out {
    background: #fdf2f8;
    color: #db2777;
    border: 1px solid #fbcfe8;
}

.pill-type.in {
    background: #f0fdf4;
    color: #16a34a;
    border: 1px solid #bbf7d0;
}

.tx-col-user {
    min-width: 160px;
}

.tx-col-user strong {
    display: block;
    font-size: 14px;
    color: #0b1120;
}

.tx-col-user span {
    display: block;
    font-size: 12px;
    color: #666;
    word-break: break-all;
}

.tx-col-crypto, .tx-col-fiat {
    min-width: 120px;
}

.tx-col-crypto strong {
    display: block;
    font-size: 14px;
    color: #f39c12;
}
.tx-col-crypto span, .tx-col-fiat span {
    display: block;
    font-size: 11px;
    color: #888;
}

.tx-col-fiat strong {
    display: block;
    font-size: 14px;
    color: #16a34a;
}

.tx-col-net {
    min-width: 80px;
}

.net-badge {
    background: #f1f5f9;
    color: #475569;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
}

.tx-col-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}

.btn-act {
    flex: 1 1 auto;
    min-width: 68px;
    padding: 6px 8px;
    font-size: 11px;
    font-weight: 700;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
}

.btn-act.details {
    background: #eff6ff;
    color: #2563eb;
}
.btn-act.details:hover {
    background: #dbeafe;
}

.btn-act.valider {
    background: #10b981;
    color: #fff;
}
.btn-act.valider:hover {
    background: #059669;
}

.btn-act.rejeter {
    background: #fef2f2;
    color: #ef4444;
    border: 1px solid #fecaca;
}
.btn-act.rejeter:hover {
    background: #fee2e2;
}

/* ===== Live Chat Support Widget ===== */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.chat-fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--color-accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    box-shadow: 0 8px 24px rgba(var(--color-accent-rgb), 0.4);
    cursor: pointer;
    z-index: 2200;
    transition: transform 250ms ease, box-shadow 250ms ease, background-color var(--transition-fast);
}
.chat-fab svg {
    width: 28px;
    height: 28px;
}
.chat-fab:hover {
    transform: scale(1.08);
    box-shadow: 0 10px 28px rgba(var(--color-accent-rgb), 0.55);
    background: var(--color-accent-hover);
}
.chat-fab.active {
    background: var(--bg-card-hover);
}
.chat-fab-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    background: var(--color-negative);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--bg-primary);
}

.chat-window {
    position: fixed;
    bottom: 100px;
    right: 24px;
    width: 380px;
    max-width: calc(100vw - 32px);
    height: 560px;
    max-height: calc(100vh - 140px);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    box-shadow: var(--glass-shadow);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 2200;
    transform-origin: bottom right;
    animation: chatWindowIn 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
.chat-window[hidden] {
    display: none;
}
.chat-window.minimized .chat-messages,
.chat-window.minimized .chat-quick-replies,
.chat-window.minimized .chat-input-bar,
.chat-window.minimized .chat-error,
.chat-window.minimized .chat-attachment-preview {
    display: none;
}
.chat-window.minimized {
    height: auto;
}

@keyframes chatWindowIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(16px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.chat-window-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    background: var(--color-accent);
    color: #fff;
    flex-shrink: 0;
}
.chat-window-header-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.chat-window-title {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1rem;
}
.chat-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.85);
}
.chat-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-positive);
    flex-shrink: 0;
}
.chat-status.offline .chat-status-dot {
    background: var(--text-muted);
}
.chat-window-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}
.chat-icon-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color var(--transition-fast);
    flex-shrink: 0;
}
.chat-icon-btn:hover {
    background: rgba(255, 255, 255, 0.25);
}
.chat-icon-btn svg {
    width: 16px;
    height: 16px;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: var(--bg-primary);
}
.chat-msg {
    max-width: 82%;
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 0.88rem;
    line-height: 1.45;
    word-break: break-word;
}
.chat-msg-support {
    align-self: flex-start;
    background: var(--bg-input);
    color: var(--text-primary);
    border-bottom-left-radius: 4px;
}
.chat-msg-client {
    align-self: flex-end;
    background: var(--color-accent);
    color: #fff;
    border-bottom-right-radius: 4px;
}
.chat-msg-time {
    display: block;
    margin-top: 4px;
    font-size: 0.65rem;
    opacity: 0.65;
}
.chat-msg-sending {
    opacity: 0.6;
}
.chat-msg-failed {
    border: 1px solid var(--color-negative);
}

.chat-quick-replies {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 16px 12px;
    background: var(--bg-primary);
}
.chat-quick-replies:empty {
    display: none;
    padding: 0;
}
.chat-quick-reply-btn {
    padding: 7px 12px;
    border-radius: 16px;
    border: 1px solid var(--border-hover);
    background: transparent;
    color: var(--color-accent);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}
.chat-quick-reply-btn:hover {
    background: var(--color-accent);
    color: #fff;
}

.chat-error {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 16px;
    background: rgba(255, 59, 48, 0.1);
    border-top: 1px solid rgba(255, 59, 48, 0.3);
    color: var(--color-negative);
    font-size: 0.78rem;
}
.chat-error[hidden] {
    display: none;
}
.chat-error button {
    background: transparent;
    border: 1px solid var(--color-negative);
    color: var(--color-negative);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
}

.chat-input-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-secondary);
    flex-shrink: 0;
}
.chat-input-bar .chat-icon-btn {
    background: var(--bg-input);
    color: var(--text-secondary);
}
.chat-input-bar .chat-icon-btn:hover {
    background: var(--bg-card-hover);
    color: var(--text-primary);
}
.chat-input-bar input[type="text"] {
    flex: 1;
    min-width: 0;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 10px 16px;
    color: var(--text-primary);
    font-size: 0.88rem;
}
.chat-input-bar input[type="text"]:focus {
    outline: none;
    border-color: var(--border-hover);
}
.chat-send-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-accent);
    color: #fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color var(--transition-fast), opacity var(--transition-fast);
}
.chat-send-btn:hover {
    background: var(--color-accent-hover);
}
.chat-send-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.chat-send-btn svg {
    width: 16px;
    height: 16px;
}

.chat-attachment-preview {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-top: 1px solid var(--border-color);
    font-size: 0.78rem;
    color: var(--text-secondary);
}
.chat-attachment-preview[hidden] {
    display: none;
}
.chat-attachment-remove {
    background: transparent;
    border: none;
    color: var(--color-negative);
    cursor: pointer;
    font-weight: 700;
}

@media (max-width: 480px) {
    .chat-fab {
        width: 58px;
        height: 58px;
        bottom: 20px;
        right: 20px;
    }
    .chat-window {
        right: 12px;
        left: 12px;
        bottom: 90px;
        width: auto;
        max-width: none;
        height: auto;
        max-height: calc(100vh - 120px);
    }
}

/* ===== Parrainage (Referral) ===== */
.ref-link-box {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    padding: 12px 12px 12px 16px;
}
.ref-link-box input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 0.88rem;
    padding: 0;
}
.ref-link-box input:focus {
    outline: none;
}
.ref-link-box .btn svg {
    width: 15px;
    height: 15px;
}

.auth-referral-hint {
    background: rgba(var(--color-accent-rgb), 0.12);
    border: 1px solid rgba(var(--color-accent-rgb), 0.3);
    border-radius: var(--border-radius-sm);
    padding: 10px 14px;
    margin-bottom: 16px;
    font-size: 0.85rem;
    color: var(--text-secondary);
}
.auth-referral-hint strong {
    color: var(--color-accent);
}
.auth-referral-hint[hidden] {
    display: none;
}

@media (max-width: 480px) {
    .ref-link-box {
        flex-wrap: wrap;
    }
    .ref-link-box input {
        width: 100%;
        order: 2;
    }
    .ref-link-box .btn {
        order: 1;
        margin-left: auto;
    }
}

/* ===== Admin: Affiliations ===== */
.aff-allocation-card {
    border: 1px solid rgba(var(--color-accent-rgb), 0.35);
    background: linear-gradient(135deg, rgba(var(--color-accent-rgb), 0.08), var(--bg-card));
}
.aff-allocation-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.aff-allocation-label {
    display: block;
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-bottom: 6px;
}
.aff-allocation-value {
    display: block;
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--color-accent);
}
#admin-aff-alloc-amount {
    font-size: 1.9rem;
}

.aff-period-select {
    width: auto;
    min-width: 180px;
    padding: 8px 14px;
}
.aff-custom-period-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    color: var(--text-secondary);
}
.aff-custom-period-row input[type="date"] {
    width: auto;
}

.aff-status-pill {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 50px;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}
.aff-status-pill.to_pay { background: rgba(var(--color-accent-rgb), 0.15); color: #4da6ff; }
.aff-status-pill.available { background: rgba(0, 210, 255, 0.15); color: #00d2ff; }
.aff-status-pill.pending { background: var(--bg-input); color: var(--text-secondary); border: 1px solid var(--border-color); }
.aff-status-pill.paid { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.aff-status-pill.cancelled { background: var(--bg-input); color: var(--text-muted); border: 1px solid var(--border-color); }
.aff-status-pill.none { background: var(--bg-input); color: var(--text-muted); }

.btn-aff-row {
    background: none;
    border: none;
    color: inherit;
    text-align: left;
    cursor: pointer;
    padding: 0;
    font: inherit;
}
.btn-aff-row:hover { color: var(--color-accent); }

.modal-card-aff-detail {
    max-width: 720px;
    max-height: 85vh;
    overflow-y: auto;
}
.aff-detail-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 16px;
}
.aff-detail-stats > div {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    padding: 10px 14px;
}
.aff-detail-stats span {
    display: block;
    font-size: 0.72rem;
    color: var(--text-secondary);
}
.aff-detail-stats strong {
    display: block;
    font-size: 1.05rem;
    margin-top: 2px;
}

@media (max-width: 768px) {
    .aff-allocation-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .aff-detail-stats {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 480px) {
    .aff-custom-period-row {
        flex-wrap: wrap;
    }
    .aff-period-select {
        width: 100%;
    }
    .aff-detail-stats {
        grid-template-columns: 1fr;
    }
}

/* ===== Generic toast notifications ===== */
.app-toast-container {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 3200;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}
.app-toast {
    min-width: 260px;
    max-width: 360px;
    padding: 14px 18px;
    border-radius: var(--border-radius-sm);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    box-shadow: var(--glass-shadow);
    color: var(--text-primary);
    font-size: 0.88rem;
    font-weight: 600;
    opacity: 0;
    transform: translateX(20px);
    transition: opacity 250ms ease, transform 250ms ease;
}
.app-toast.visible {
    opacity: 1;
    transform: translateX(0);
}
.app-toast-success { border-left: 4px solid var(--color-positive); }
.app-toast-error { border-left: 4px solid var(--color-negative); }
.app-toast-info { border-left: 4px solid var(--color-accent); }

/* ===== Settings: security rows ===== */
.settings-row-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px 16px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    color: var(--text-primary);
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
}
.settings-row:hover {
    border-color: var(--border-hover);
    background: var(--bg-card-hover);
}
.settings-row-label {
    min-width: 0;
    flex: 1;
    margin-right: 12px;
}
.settings-row-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    white-space: nowrap;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-secondary);
}
.settings-row-meta svg {
    width: 16px;
    height: 16px;
    color: var(--text-muted);
}

/* ===== Devices modal ===== */
.devices-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 8px;
}
.device-card {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 16px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
}
.device-card-info {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
    flex: 1;
}
.device-card-text {
    min-width: 0;
}
.device-card-meta {
    flex-wrap: wrap;
}
.device-card-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid var(--border-hover);
    color: var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.device-card-icon svg {
    width: 18px;
    height: 18px;
}
.device-card-name {
    font-weight: 700;
    font-size: 0.92rem;
}
.device-card-sub {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-top: 2px;
}
.device-card-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 6px;
}
.device-card-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}
.btn-revoke-device {
    background: transparent;
    border: none;
    color: var(--color-negative);
    cursor: pointer;
    padding: 4px;
}
.btn-revoke-device svg {
    width: 18px;
    height: 18px;
}
.btn-revoke-device:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* ===== 2FA modal ===== */
.twofa-status-banner {
    background: rgba(var(--color-positive-rgb), 0.12);
    border: 1px solid rgba(var(--color-positive-rgb), 0.3);
    color: var(--color-positive);
    border-radius: var(--border-radius-sm);
    padding: 12px 16px;
    font-weight: 700;
    text-align: center;
}
.btn-danger-outline {
    background: transparent;
    border: 1px solid var(--color-negative);
    color: var(--color-negative);
}
.twofa-qr-box {
    display: flex;
    justify-content: center;
    background: #fff;
    border-radius: var(--border-radius-sm);
    padding: 16px;
    margin: 12px 0;
}
.twofa-qr-box svg {
    width: 200px;
    height: 200px;
    max-width: 100%;
}
.twofa-hint {
    font-size: 0.82rem;
    color: var(--text-secondary);
    text-align: center;
    margin-bottom: 12px;
}
.twofa-secret-row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
    font-size: 0.85rem;
    color: var(--text-secondary);
    text-align: center;
}
.twofa-secret-row code {
    word-break: break-all;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 4px 10px;
    letter-spacing: 0.05em;
    color: var(--color-accent);
    font-weight: 700;
}
.twofa-backup-codes-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 16px;
}
.twofa-backup-codes-grid code {
    display: block;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 8px 10px;
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-primary);
}
#twofa-confirm-action-box {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}
#btn-download-backup-codes svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

@media (max-width: 480px) {
    .app-toast-container {
        top: 12px;
        right: 12px;
        left: 12px;
    }
    .app-toast {
        min-width: 0;
        max-width: none;
        width: 100%;
    }
    .twofa-backup-codes-grid {
        grid-template-columns: 1fr;
    }
    .brand-logo-img {
        height: 34px;
    }
    .brand-logo-img.brand-logo-lg {
        height: 44px;
    }
    .brand-logo-img.brand-logo-sm {
        height: 30px;
    }
}

/* ===== Admin: Total des Transactions Traitées ===== */
.tx-total-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 32px 16px;
    margin-top: 16px;
    background: linear-gradient(135deg, rgba(var(--color-accent-rgb), 0.1), var(--bg-card));
    border: 1px solid rgba(var(--color-accent-rgb), 0.3);
    border-radius: var(--border-radius-md);
}
.tx-total-hero-value {
    font-family: var(--font-heading);
    font-size: 3rem;
    font-weight: 800;
    color: var(--color-accent);
    line-height: 1;
}
.tx-total-hero-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

@media (max-width: 480px) {
    .tx-total-hero-value {
        font-size: 2.25rem;
    }
}