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

/* ============================================================
   BASE
   ============================================================ */
.ins-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;
}
.ins-body * { box-sizing:border-box; }

/* ============================================================
   TOKENS
   ============================================================ */
.ins-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);
    --cyan:#22d3ee; --cyan-b:rgba(34,211,238,.12); --cyan-d:rgba(34,211,238,.3);
    --grn:#10b981;  --grn-b:rgba(16,185,129,.12);  --grn-d:rgba(16,185,129,.3);
    --amb:#f59e0b;  --amb-b:rgba(245,158,11,.12);  --amb-d:rgba(245,158,11,.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:#13131f;
}

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

/* ============================================================
   LAYOUT
   ============================================================ */
.ins-layout {
    display:grid; grid-template-columns:480px 300px;
    gap:24px; align-items:start;
    position:relative; z-index:1; width:100%; max-width:820px;
}

/* ============================================================
   CARD
   ============================================================ */
.ins-card {
    background:#1c1c2e; border:1px solid rgba(255,255,255,.055);
    border-radius:14px; padding:32px;
    animation:ins-fadein .6s cubic-bezier(.4,0,.2,1) both;
}
@keyframes ins-fadein { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:translateY(0)} }

.ins-card-head { margin-bottom:22px; }
.ins-badge {
    display:inline-flex; align-items:center; gap:7px;
    padding:4px 12px 4px 8px;
    background:rgba(16,185,129,.12); border:1px solid rgba(16,185,129,.3);
    border-radius:20px; font-family:var(--font-family-mono); font-size:9.5px;
    font-weight:var(--font-weight-bold); letter-spacing:.08em; text-transform:uppercase;
    color:#6ee7b7; margin-bottom:14px;
}
.ins-badge-dot { width:5px; height:5px; background:#10b981; border-radius:50%; }
.ins-title { font-size:22px !important; font-weight:var(--font-weight-extrabold) !important; color:#e6e8f6 !important; letter-spacing:-.02em !important; margin-bottom:6px !important; background:none !important; -webkit-text-fill-color:#e6e8f6 !important; }
.ins-sub   { font-size:12.5px; color:#8486a4; line-height:1.6; }

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

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

/* Séparateur */
.ins-sep {
    display:flex; align-items:center; gap:12px; margin:16px 0;
    font-family:var(--font-family-mono); font-size:10px; font-weight:var(--font-weight-semibold); color:#272940;
}
.ins-sep::before,.ins-sep::after { content:''; flex:1; height:1px; background:rgba(255,255,255,.055); }

/* Formulaire */
.ins-form { display:flex; flex-direction:column; gap:13px; }
.ins-row  { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.ins-field { display:flex; flex-direction:column; gap:5px; position:relative; }

.ins-label {
    font-family:var(--font-family-mono); font-size:9.5px; font-weight:var(--font-weight-bold);
    letter-spacing:.08em; text-transform:uppercase; color:#4a4c68;
}
.ins-input, .ins-select {
    all:unset !important; box-sizing:border-box !important; width:100% !important;
    padding:10px 13px !important; background:#212135 !important;
    border:1px solid rgba(255,255,255,.055) !important; border-radius:8px !important;
    color:#e6e8f6 !important; font-family:var(--font-family-primary) !important;
    font-size:var(--font-size-base) !important; transition:border-color .15s, background .15s !important;
}
.ins-input::placeholder { color:#4a4c68 !important; }
.ins-input:focus, .ins-select:focus { outline:none !important; border-color:rgba(99,102,241,.35) !important; background:rgba(99,102,241,.06) !important; }
.ins-input.error  { border-color:rgba(248,113,113,.5) !important; }
.ins-input.valid  { border-color:rgba(16,185,129,.4) !important; }
.ins-select { cursor:pointer !important; }
.ins-select option { background:#17172a; color:#e6e8f6; }

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

/* Password wrap */
.ins-pw-wrap { position:relative; }
.ins-pw-wrap .ins-input { padding-right:42px !important; }
.ins-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; display:flex !important; align-items:center !important;
    background:transparent !important; border:none !important;
    padding:4px !important; transition:color .12s !important;
}
.ins-pw-toggle:hover { color:#e6e8f6 !important; }

/* Règles mot de passe */
.ins-pw-rules { margin-top:8px; display:none; flex-direction:column; gap:4px; }
.ins-pw-rules.visible { display:flex; }
.ins-rule { display:flex; align-items:center; gap:6px; font-family:var(--font-family-mono); font-size:var(--font-size-sm); color:var(--text-muted); transition:color var(--transition-fast); }
.ins-rule.ok { color:var(--success-color); }
.ins-rule-icon { font-size:var(--font-size-xs); width:12px; text-align:center; flex-shrink:0; }

/* Match mot de passe */
.ins-match { font-size:var(--font-size-sm); margin-top:3px; }
.ins-match.ok  { color:var(--success-color); }
.ins-match.bad { color:var(--danger-color); }

/* Username status */
.ins-username-status { font-size:var(--font-size-xs); margin-top:3px; }
.ins-username-status.ok      { color:#10b981; }
.ins-username-status.bad     { color:#f87171; }
.ins-username-status.pending { color:#8486a4; }

/* Email suggestion */
.ins-email-suggest {
    display:none; position:absolute; top:100%; left:0; right:0; z-index:10;
    background:#1c1c2e; border:1px solid rgba(255,255,255,.055);
    border-radius:8px; padding:10px 13px; margin-top:4px;
    font-size:var(--font-size-sm); color:#8486a4;
}
.ins-email-suggest button {
    all:unset; cursor:pointer; color:#6366f1; text-decoration:underline; font-size:inherit;
}

/* CGU */
.ins-terms {
    display:flex; align-items:flex-start; gap:10px; cursor:pointer; margin-top:2px;
}
.ins-terms input[type="checkbox"] { display:none; }
.ins-terms-check {
    width:32px; height:18px; border-radius:9px; flex-shrink:0; margin-top:1px;
    background:#272940; border:1px solid rgba(255,255,255,.08);
    position:relative; transition:background .2s, border-color .2s;
}
.ins-terms-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;
}
.ins-terms input:checked + .ins-terms-check { background:#6366f1; border-color:rgba(99,102,241,.5); }
.ins-terms input:checked + .ins-terms-check::after { transform:translateX(14px); background:#fff; }
.ins-terms-txt { font-size:var(--font-size-sm); color:#8486a4; line-height:1.55; user-select:none; }
.ins-terms-txt a { color:#6366f1; text-decoration:none; }
.ins-terms-txt a:hover { text-decoration:underline; }

/* Submit */
.ins-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;
}
.ins-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; }
.ins-submit:active { transform:translateY(0) !important; }
.ins-submit:disabled { opacity:.5 !important; cursor:not-allowed !important; transform:none !important; box-shadow:none !important; }

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

/* Succès */
.ins-success {
    display:none; text-align:center; padding:28px 0 12px;
}
.ins-success.visible { display:block; animation:ins-fadein .4s ease both; }
.ins-success-ico {
    width:56px; height:56px; border-radius:50%; margin:0 auto 14px;
    background:rgba(16,185,129,.12); border:1px solid rgba(16,185,129,.3);
    display:flex; align-items:center; justify-content:center; color:#10b981;
}
.ins-success-title { font-size:var(--text-medium) !important; font-weight:var(--font-weight-extrabold) !important; color:#e6e8f6 !important; margin-bottom:6px !important; -webkit-text-fill-color:#e6e8f6 !important; }
.ins-success-sub   { font-size:12.5px; color:#8486a4; margin-bottom:20px; }
.ins-success-actions { display:flex; flex-direction:column; gap:10px; align-items:center; }
.ins-success-premium {
    font-family:var(--font-family-mono); font-size:11.5px; font-weight:var(--font-weight-bold);
    color:#6366f1; text-decoration:none; padding:8px 18px;
    border:1px solid rgba(99,102,241,.35); border-radius:8px; transition:all .13s;
}
.ins-success-premium:hover { background:rgba(99,102,241,.1); }
.ins-success-skip { font-size:var(--font-size-sm); color:#4a4c68; text-decoration:none; transition:color .12s; }
.ins-success-skip:hover { color:#8486a4; }

/* Login link */
.ins-login {
    display:flex; align-items:center; justify-content:center; gap:8px;
    margin-top:18px; padding-top:16px; border-top:1px solid rgba(255,255,255,.055);
    font-size:var(--font-size-sm); color:#4a4c68;
}
.ins-login-link {
    font-family:var(--font-family-mono); font-size:var(--font-size-xs); font-weight:var(--font-weight-bold);
    color:#6366f1; text-decoration:none; transition:color .12s;
}
.ins-login-link:hover { color:#a5b4fc; }

/* ============================================================
   PANNEAU DROIT
   ============================================================ */
.ins-panel {
    background:#1c1c2e; border:1px solid rgba(255,255,255,.055);
    border-radius:14px; overflow:hidden;
    animation:ins-fadein .6s .1s cubic-bezier(.4,0,.2,1) both;
    position:sticky; top:24px;
}
.ins-panel-inner { padding:24px; }

.ins-panel-head { margin-bottom:20px; }
.ins-panel-icon {
    width:44px; height:44px; border-radius:11px; margin-bottom:14px;
    background:rgba(99,102,241,.13); border:1px solid rgba(99,102,241,.35);
    display:flex; align-items:center; justify-content:center; color:#6366f1;
}
.ins-panel-title { font-size:var(--font-size-md) !important; font-weight:var(--font-weight-extrabold) !important; color:#e6e8f6 !important; margin-bottom:5px !important; -webkit-text-fill-color:#e6e8f6 !important; background:none !important; }
.ins-panel-sub   { font-size:11.5px; color:#8486a4; }

/* Benefits */
.ins-benefits { display:flex; flex-direction:column; gap:8px; margin-bottom:18px; }
.ins-benefit {
    display:flex; align-items:center; gap:12px;
    padding:10px 12px; background:#212135;
    border:1px solid rgba(255,255,255,.055); border-radius:8px;
    transition:border-color .12s;
}
.ins-benefit:hover { border-color:rgba(255,255,255,.09); }
.ins-benefit-ico {
    width:30px; height:30px; border-radius:7px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
}
.ins-benefit-ico--math { background:rgba(99,102,241,.13);  color:#6366f1; }
.ins-benefit-ico--amb  { background:rgba(245,158,11,.12);  color:#f59e0b; }
.ins-benefit-ico--cyan { background:rgba(34,211,238,.12);  color:#22d3ee; }
.ins-benefit-ico--grn  { background:rgba(16,185,129,.12);  color:#10b981; }
.ins-benefit-title { font-size:var(--font-size-sm); font-weight:var(--font-weight-bold); color:#e6e8f6; margin-bottom:2px; }
.ins-benefit-desc  { font-size:var(--font-size-xs); color:#4a4c68; }

/* Premium */
.ins-premium {
    background:rgba(99,102,241,.13); border:1px solid rgba(99,102,241,.35);
    border-radius:9px; padding:14px 16px; position:relative; overflow:hidden;
}
.ins-premium::before {
    content:''; position:absolute; top:0; left:0; right:0; height:2px;
    background:linear-gradient(90deg,#6366f1,#22d3ee);
}
.ins-premium-head {
    display:flex; align-items:center; gap:7px;
    font-family:var(--font-family-mono); font-size:10.5px; font-weight:var(--font-weight-bold);
    color:#6366f1; margin-bottom:7px;
}
.ins-premium-txt  { font-size:11.5px; color:#8486a4; line-height:1.55; margin-bottom:10px; }
.ins-premium-link {
    font-family:var(--font-family-mono); font-size:10.5px; font-weight:var(--font-weight-bold);
    color:#6366f1; text-decoration:none; transition:color .12s;
}
.ins-premium-link:hover { color:#a5b4fc; }

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