/* ============================================================
   COINSPANNER — Auth Bar & Login/Register Modal Styles
   ============================================================ */

/* ── Auth Bar ─────────────────────────────────────────────────────────────── */
.cs-auth-bar { display:inline-flex; align-items:center; position:relative;
    font-family:'Roboto',-apple-system,sans-serif; }
.cs-login-trigger-btn { display:flex; align-items:center; gap:6px; background:#000; color:#fff;
    border:none; border-radius:999px; padding:8px 16px; cursor:pointer;
    font-weight:700; font-size:14px; font-family:inherit; transition:opacity .2s; }
.cs-login-trigger-btn:hover { opacity:.85; }
.cs-login-icon { font-size:16px; }
.cs-chevron { font-size:10px; opacity:.7; }

/* ── Profile button ───────────────────────────────────────────────────────── */
.cs-profile-btn { display:flex; align-items:center; gap:8px; background:none;
    border:1.5px solid #000; border-radius:999px; padding:6px 14px 6px 6px;
    cursor:pointer; font-family:inherit; font-weight:700; font-size:14px;
    transition:all .2s; }
.cs-profile-btn:hover { background:#000; color:#fff; }
.cs-avatar { width:36px; height:36px; border-radius:50%; object-fit:cover; }
.cs-avatar-fallback { width:36px; height:36px; border-radius:50%;
    background:#000; color:#fff; display:flex; align-items:center; justify-content:center;
    font-size:16px; font-weight:700; flex-shrink:0; }
.cs-profile-name { font-weight:700; }

/* ── Dropdown ─────────────────────────────────────────────────────────────── */
.cs-profile-dropdown { position:absolute; top:calc(100% + 8px); right:0;
    background:#fff; border:1.5px solid #e5e7eb; border-radius:12px;
    min-width:220px; box-shadow:0 10px 40px rgba(0,0,0,.15);
    z-index:9999; overflow:hidden; animation:csDropIn .15s ease; }
@keyframes csDropIn { from{transform:translateY(-8px);opacity:0} to{transform:none;opacity:1} }
.cs-drop-user { display:flex; align-items:center; gap:12px; padding:16px; background:#f9fafb; }
.cs-drop-avatar { width:48px; height:48px; border-radius:50%; object-fit:cover; }
.cs-drop-avatar-fallback { width:48px; height:48px; border-radius:50%; background:#000; color:#fff;
    display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:700; flex-shrink:0; }
.cs-drop-name { font-weight:700; font-size:15px; }
.cs-drop-email { font-size:12px; color:#888; }
.cs-drop-divider { height:1px; background:#e5e7eb; }
.cs-drop-item { display:flex; align-items:center; gap:10px; padding:11px 16px;
    color:#000; text-decoration:none; font-size:14px; font-weight:700; width:100%;
    background:none; border:none; cursor:pointer; font-family:inherit;
    transition:background .15s; text-align:left; }
.cs-drop-item:hover { background:#f9fafb; }
.cs-drop-icon { font-size:16px; }
.cs-logout-btn { color:#ef4444; }

/* ── Auth Modal backdrop ──────────────────────────────────────────────────── */
.cs-auth-backdrop { display:flex; align-items:center; justify-content:center;
    position:fixed; inset:0; background:rgba(0,0,0,.65);
    backdrop-filter:blur(6px); z-index:999999;
    animation:csFadeIn .2s ease; }
@keyframes csFadeIn { from{opacity:0} to{opacity:1} }

/* ── Auth Modal ───────────────────────────────────────────────────────────── */
.cs-auth-modal { background:#fff; border-radius:20px; width:min(440px,95vw);
    max-height:90vh; overflow-y:auto; padding:32px; position:relative;
    animation:csSlideUp .25s ease; }
@keyframes csSlideUp { from{transform:translateY(24px) scale(.97);opacity:0} to{transform:none;opacity:1} }
.cs-auth-close { position:absolute; top:16px; right:16px; background:none;
    border:none; font-size:20px; cursor:pointer; color:#888; line-height:1; }
.cs-auth-close:hover { color:#000; }
.cs-auth-logo { text-align:center; font-size:40px; margin-bottom:12px; }
.cs-auth-title { text-align:center; font-size:24px; font-weight:700; margin:0 0 8px; }
.cs-auth-sub { text-align:center; color:#888; font-size:14px; margin:0 0 24px; }

/* ── Fields ───────────────────────────────────────────────────────────────── */
.cs-field-group { margin-bottom:16px; }
.cs-field-group label { display:block; font-weight:700; font-size:13px; margin-bottom:6px; }
.cs-auth-input { width:100%; padding:10px 14px; border:1.5px solid #d1d5db;
    border-radius:8px; font-size:14px; font-family:inherit; outline:none; box-sizing:border-box;
    transition:border-color .2s; }
.cs-auth-input:focus { border-color:#000; box-shadow:0 0 0 3px rgba(0,0,0,.08); }
.cs-otp-input { text-align:center; font-size:24px; font-weight:700; letter-spacing:8px; }
.cs-pw-wrap { position:relative; display:flex; }
.cs-pw-wrap .cs-auth-input { padding-right:48px; }
.cs-pw-toggle { position:absolute; right:12px; top:50%; transform:translateY(-50%);
    background:none; border:none; cursor:pointer; font-size:16px; padding:0; }
.cs-username-wrap { display:flex; align-items:center; border:1.5px solid #d1d5db;
    border-radius:8px; overflow:hidden; transition:border-color .2s; }
.cs-username-wrap:focus-within { border-color:#000; }
.cs-at { padding:10px 10px 10px 14px; color:#888; font-weight:700; background:#f9fafb;
    border-right:1px solid #e5e7eb; font-size:16px; }
.cs-username-wrap .cs-auth-input { border:none; border-radius:0; flex:1; box-shadow:none; }
.cs-username-status { padding:0 10px; font-size:14px; }
.cs-email-bold { font-weight:700; }

/* ── Login method toggle ──────────────────────────────────────────────────── */
.cs-login-method-toggle { display:flex; gap:0; border:1.5px solid #000; border-radius:8px;
    overflow:hidden; margin-bottom:16px; }
.cs-method-btn { flex:1; padding:8px; border:none; background:#fff; cursor:pointer;
    font-family:inherit; font-weight:700; font-size:13px; transition:all .2s; }
.cs-method-btn.active { background:#000; color:#fff; }

/* ── Auth method radio cards ──────────────────────────────────────────────── */
.cs-auth-method-opts { display:flex; flex-direction:column; gap:8px; }
.cs-radio-card { display:flex; align-items:flex-start; gap:10px; padding:10px 14px;
    border:1.5px solid #d1d5db; border-radius:8px; cursor:pointer;
    transition:border-color .2s; }
.cs-radio-card:hover { border-color:#000; }
.cs-radio-card input { margin-top:2px; flex-shrink:0; }
.cs-radio-card span { font-size:14px; font-weight:700; }
.cs-radio-card small { display:block; font-size:12px; color:#888; font-weight:400; }

/* ── Password strength ────────────────────────────────────────────────────── */
.cs-pw-strength { margin-top:6px; }
.cs-pw-bar { height:4px; background:#e5e7eb; border-radius:999px; overflow:hidden; }
.cs-pw-fill { height:100%; border-radius:999px; transition:width .3s, background .3s; }
#cs-pw-label { font-size:12px; font-weight:700; }

/* ── Resend OTP ───────────────────────────────────────────────────────────── */
.cs-resend-wrap { margin-top:8px; display:flex; align-items:center; gap:10px; font-size:13px; }
.cs-resend-btn { background:none; border:none; color:#3b82f6; cursor:pointer;
    font-weight:700; font-family:inherit; font-size:13px; text-decoration:underline; }
.cs-resend-btn:hover { color:#1d4ed8; }

/* ── Messages ─────────────────────────────────────────────────────────────── */
.cs-auth-msg { min-height:20px; font-size:13px; font-weight:700; margin:8px 0; border-radius:6px;
    padding:0; transition:all .2s; }
.cs-auth-msg:not(:empty) { padding:8px 12px; }
.cs-msg-error   { background:#fee2e2; color:#991b1b; }
.cs-msg-success { background:#dcfce7; color:#166534; }

/* ── Auth switch ──────────────────────────────────────────────────────────── */
.cs-auth-switch { text-align:center; font-size:14px; color:#888; margin-top:20px; }
.cs-link-btn { background:none; border:none; color:#000; cursor:pointer;
    font-weight:700; font-family:inherit; font-size:14px; text-decoration:underline; }
.cs-link-btn:hover { opacity:.7; }

/* ── Success step ─────────────────────────────────────────────────────────── */
.cs-success-icon { font-size:48px; text-align:center; display:block; margin-bottom:12px; }
#cs-reg-step-4 { text-align:center; }