/**
 * Connexion — d314.io v5
 * Page standalone | Tokens dashboard | Préfixe cnx-
 */

/* ============================================================
   BASE
   ============================================================ */
.cnx-body {
    margin:0; padding:0;
    font-family:var(--font-family-primary);
    font-size:var(--font-size-base); -webkit-font-smoothing:antialiased;
    background:#13131f; color:#e6e8f6;
    min-height:100vh;
}
.cnx-body * { box-sizing:border-box; }

/* ============================================================
   TOKENS
   ============================================================ */
.cnx-page {
    --bg0:#13131f; --bg1:#17172a; --bg2:#1c1c2e; --bg3:#212135;
    --b0:rgba(255,255,255,.055); --b1:rgba(255,255,255,.03);
    --t0:var(--text-primary); --t1:var(--text-secondary); --t2:var(--text-muted); --t3:#272940;
    --math:#6366f1; --math-b:rgba(99,102,241,.13); --math-d:rgba(99,102,241,.35);
    --grn:#10b981; --grn-b:rgba(16,185,129,.12); --grn-d:rgba(16,185,129,.3);
    --r:10px;
    --sans:var(--font-family-primary);
    --mono:var(--font-family-mono);

    position:relative; min-height:100vh; overflow:hidden;
    display:flex; flex-direction:column; align-items:center;
    padding:24px 20px 48px;
    background:var(--bg0);
}

/* GLOWS */
.cnx-glow-tl {
    position:fixed; top:-120px; left:-120px;
    width:500px; height:500px; border-radius:50%;
    background:radial-gradient(circle,rgba(99,102,241,.12),transparent 65%);
    pointer-events:none; z-index:0;
}
.cnx-glow-br {
    position:fixed; bottom:-100px; right:-80px;
    width:380px; height:380px; border-radius:50%;
    background:radial-gradient(circle,rgba(34,211,238,.07),transparent 65%);
    pointer-events:none; z-index:0;
}

/* ============================================================
   LOGO
   ============================================================ */
.cnx-logo {
    display:flex; align-items:center; gap:9px;
    text-decoration:none; margin-bottom:36px;
    position:relative; z-index:1;
    padding:5px 8px; border-radius:8px;
    transition:background .12s;
}
.cnx-logo:hover { background:rgba(255,255,255,.04); }
.cnx-logo-mark {
    width:28px; height:28px; border-radius:7px;
    background:var(--math);
    display:flex; align-items:center; justify-content:center;
    font-family:var(--mono); font-size:var(--font-size-md); font-weight:var(--font-weight-bold); color:#fff;
}
.cnx-logo-name { font-size:var(--font-size-sm); font-weight:var(--font-weight-extrabold); letter-spacing:-.3px; color:var(--t0); }
.cnx-logo-name em { color:var(--math); font-style:normal; }

/* ============================================================
   LAYOUT
   ============================================================ */
.cnx-layout {
    display:grid; grid-template-columns:420px 320px;
    gap:24px; align-items:start;
    position:relative; z-index:1; width:100%; max-width:780px;
}

/* ============================================================
   CARD FORMULAIRE
   ============================================================ */
.cnx-card {
    background:var(--bg2); border:1px solid var(--b0);
    border-radius:14px; padding:32px; overflow:hidden;
    animation:cnx-fadein .6s cubic-bezier(.4,0,.2,1) both;
}
@keyframes cnx-fadein { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:translateY(0)} }

/* Head */
.cnx-card-head { margin-bottom:24px; }
.cnx-badge {
    display:inline-flex; align-items:center; gap:7px;
    padding:4px 12px 4px 8px;
    background:var(--math-b); border:1px solid var(--math-d);
    border-radius:20px; font-family:var(--mono); font-size:9.5px;
    font-weight:var(--font-weight-bold); letter-spacing:.08em; text-transform:uppercase;
    color:#a5b4fc; margin-bottom:16px;
}
.cnx-badge-dot { width:5px; height:5px; background:var(--math); border-radius:50%; }
.cnx-title { font-size:var(--text-large); font-weight:var(--font-weight-extrabold); color:var(--t0); letter-spacing:-.02em; margin-bottom:6px; }
.cnx-sub   { font-size:12.5px; color:var(--t1); line-height:1.6; }

/* Status */
.cnx-status {
    display:none; margin-bottom:16px;
    padding:10px 14px; border-radius:8px;
    font-size:var(--font-size-sm); font-weight:var(--font-weight-semibold); align-items:center; gap:8px;
}
.cnx-status.visible { display:flex; }
.cnx-status--ok   { background:var(--grn-b); border:1px solid var(--grn-d); color:#6ee7b7; }
.cnx-status--err  { background:rgba(248,113,113,.1); border:1px solid rgba(248,113,113,.3); color:#f87171; }

/* Boutons sociaux */
.cnx-socials { display:flex; flex-direction:column; gap:8px; margin-bottom:20px; }
.cnx-social-btn {
    all:unset; cursor:pointer; box-sizing:border-box;
    display:flex; align-items:center; justify-content:center; gap:10px;
    padding:10px 16px; border-radius:9px;
    font-family:var(--sans) !important; font-size:12.5px !important; font-weight:var(--font-weight-semibold) !important; color:var(--t1) !important;
    background:#212135 !important; border:1px solid rgba(255,255,255,.055) !important;
    transition:all .13s !important; width:100% !important;
}
.cnx-social-btn:hover { background:rgba(255,255,255,.06) !important; border-color:rgba(255,255,255,.12) !important; color:#e6e8f6 !important; }

/* Séparateur */
.cnx-sep {
    display:flex; align-items:center; gap:12px; margin:18px 0;
    font-family:var(--mono); font-size:10px; font-weight:var(--font-weight-semibold); color:var(--t3);
}
.cnx-sep::before,.cnx-sep::after { content:''; flex:1; height:1px; background:var(--b0); }

/* Formulaire */
.cnx-form { display:flex; flex-direction:column; gap:14px; }

.cnx-field { display:flex; flex-direction:column; gap:6px; }
.cnx-label {
    font-family:var(--mono); font-size:9.5px; font-weight:var(--font-weight-bold);
    letter-spacing:.08em; text-transform:uppercase; color:var(--t2);
}
.cnx-input {
    all:unset; box-sizing:border-box; width:100%;
    padding:11px 14px; background:var(--bg3);
    border:1px solid var(--b0); border-radius:8px;
    color:var(--t0); font-family:var(--sans); font-size:var(--font-size-base);
    transition:border-color .15s, background .15s;
}
.cnx-input::placeholder { color:var(--t2); }
.cnx-input:focus { outline:none; border-color:var(--math-d); background:rgba(99,102,241,.06); }
.cnx-input.error { border-color:rgba(248,113,113,.5); }
.cnx-input.valid { border-color:rgba(16,185,129,.4); }

/* Champ password */
.cnx-pw-wrap { position:relative; }
.cnx-pw-wrap .cnx-input { padding-right:42px; }
.cnx-pw-toggle {
    all:unset !important; cursor:pointer !important; box-sizing:border-box !important;
    position:absolute !important; right:12px !important; top:50% !important;
    transform:translateY(-50%) !important;
    color:#4a4c68 !important; transition:color .12s !important;
    display:flex !important; align-items:center !important;
    background:transparent !important; border:none !important;
    width:auto !important; height:auto !important; padding:4px !important;
    border-radius:0 !important; box-shadow:none !important; outline:none !important;
}
.cnx-pw-toggle:hover { color:#e6e8f6 !important; }

/* Options */
.cnx-options { display:flex; align-items:center; justify-content:space-between; }
.cnx-remember { display:flex; align-items:center; gap:9px; cursor:pointer; }
.cnx-remember input[type="checkbox"] { display:none; }

/* Toggle switch */
.cnx-check {
    width:32px; height:18px; border-radius:9px; flex-shrink:0;
    background:#272940; border:1px solid rgba(255,255,255,.08);
    position:relative; transition:background .2s, border-color .2s;
}
.cnx-check::after {
    content:''; position:absolute;
    width:12px; height:12px; border-radius:50%;
    background:#8486a4;
    top:2px; left:2px;
    transition:transform .2s cubic-bezier(.4,0,.2,1), background .2s;
}
.cnx-remember input:checked + .cnx-check {
    background:#6366f1; border-color:rgba(99,102,241,.5);
}
.cnx-remember input:checked + .cnx-check::after {
    transform:translateX(14px); background:#fff;
}
.cnx-remember span { font-size:var(--font-size-sm); color:var(--t1); user-select:none; }
.cnx-forgot {
    font-family:var(--mono); font-size:10.5px; font-weight:var(--font-weight-semibold);
    color:var(--math); text-decoration:none; transition:color .12s;
}
.cnx-forgot:hover { color:#a5b4fc; }

/* Submit */
.cnx-submit {
    all:unset !important; cursor:pointer !important; box-sizing:border-box !important;
    width:100% !important; display:flex !important; align-items:center !important;
    justify-content:center !important; gap:8px !important;
    padding:13px !important; border-radius:9px !important; margin-top:4px !important;
    font-family:var(--font-family-primary) !important;
    font-size:13.5px !important; font-weight:var(--font-weight-bold) !important;
    color:#fff !important; letter-spacing:.01em !important;
    background:#6366f1 !important;
    border:1px solid rgba(99,102,241,.5) !important;
    box-shadow:0 1px 0 rgba(255,255,255,.1) inset, 0 4px 12px rgba(99,102,241,.25) !important;
    transition:background .13s, transform .13s, box-shadow .13s !important;
}
.cnx-submit:hover { background:#4f46e5 !important; transform:translateY(-1px) !important; box-shadow:0 1px 0 rgba(255,255,255,.1) inset, 0 8px 20px rgba(99,102,241,.4) !important; }
.cnx-submit:active { transform:translateY(0) !important; box-shadow:none !important; }
.cnx-submit:disabled { opacity:.5 !important; cursor:not-allowed !important; transform:none !important; box-shadow:none !important; }

.cnx-spinner {
    display:inline-block; width:13px; height:13px;
    border:2px solid rgba(255,255,255,.3);
    border-top-color:#fff; border-radius:50%;
    animation:cnx-spin .7s linear infinite;
}
@keyframes cnx-spin { to { transform:rotate(360deg); } }

/* Erreur champ */
.cnx-field-err {
    font-size:var(--font-size-xs); color:#f87171; margin-top:3px;
}

/* Succès */
.cnx-success {
    display:none; text-align:center; padding:32px 0 16px;
}
.cnx-success.visible { display:block; animation:cnx-fadein .4s ease both; }
.cnx-success-ico {
    width:56px; height:56px; border-radius:50%; margin:0 auto 16px;
    background:var(--grn-b); border:1px solid var(--grn-d);
    display:flex; align-items:center; justify-content:center; color:var(--grn);
}
.cnx-success-title { font-size:var(--text-medium); font-weight:var(--font-weight-extrabold); color:var(--t0); margin-bottom:6px; }
.cnx-success-sub   { font-size:12.5px; color:var(--t1); }

/* Signup */
.cnx-signup {
    display:flex; align-items:center; justify-content:center; gap:8px;
    margin-top:20px; padding-top:18px; border-top:1px solid var(--b0);
    font-size:var(--font-size-sm); color:var(--t2);
}
.cnx-signup-link {
    font-family:var(--mono); font-size:var(--font-size-xs); font-weight:var(--font-weight-bold);
    color:var(--math); text-decoration:none; transition:color .12s;
}
.cnx-signup-link:hover { color:#a5b4fc; }

/* ============================================================
   PANNEAU DROIT
   ============================================================ */
.cnx-panel {
    background:var(--bg2); border:1px solid var(--b0);
    border-radius:14px; overflow:hidden;
    animation:cnx-fadein .6s .1s cubic-bezier(.4,0,.2,1) both;
    position:sticky; top:24px;
}
.cnx-panel-inner { padding:28px; }

.cnx-panel-icon {
    width:48px; height:48px; border-radius:12px;
    background:var(--math-b); border:1px solid var(--math-d);
    display:flex; align-items:center; justify-content:center;
    color:var(--math); margin-bottom:18px;
}
.cnx-panel-title { font-size:var(--text-base) !important; font-weight:var(--font-weight-extrabold) !important; color:#e6e8f6 !important; letter-spacing:-.01em !important; margin-bottom:8px !important; line-height:1.2 !important; background:none !important; -webkit-text-fill-color:#e6e8f6 !important; }
.cnx-panel-sub   { font-size:var(--font-size-sm); color:var(--t1); line-height:1.65; margin-bottom:24px; }

/* Stats */
.cnx-stats { display:flex; flex-direction:column; gap:0; margin-bottom:20px; }
.cnx-stat-row {
    display:flex; align-items:center; justify-content:space-between;
    padding:10px 0; border-bottom:1px solid var(--b1);
}
.cnx-stat-row:last-child { border-bottom:none; }
.cnx-stat-label { font-size:11.5px; color:var(--t1); }
.cnx-stat-val   { font-family:var(--mono); font-size:var(--font-size-base); font-weight:var(--font-weight-bold); color:var(--t0); }

/* Premium */
.cnx-premium {
    background:var(--math-b); border:1px solid var(--math-d);
    border-radius:9px; padding:14px 16px; position:relative; overflow:hidden;
}
.cnx-premium::before {
    content:''; position:absolute; top:0; left:0; right:0; height:2px;
    background:linear-gradient(90deg,var(--math),#22d3ee);
}
.cnx-premium-head {
    display:flex; align-items:center; gap:7px;
    font-family:var(--mono); font-size:10.5px; font-weight:var(--font-weight-bold);
    color:var(--math); margin-bottom:7px; letter-spacing:.02em;
}
.cnx-premium-txt  { font-size:11.5px; color:var(--t1); line-height:1.55; margin-bottom:10px; }
.cnx-premium-link {
    font-family:var(--mono); font-size:10.5px; font-weight:var(--font-weight-bold);
    color:var(--math); text-decoration:none; transition:color .12s;
}
.cnx-premium-link:hover { color:#a5b4fc; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:800px) {
    .cnx-layout { grid-template-columns:1fr; max-width:460px; }
    .cnx-panel  { display:none; }
}
@media (max-width:480px) {
    .cnx-page   { padding:16px 12px 40px; }
    .cnx-card   { padding:24px 20px; }
    .cnx-layout { max-width:100%; }
}