* { margin:0; padding:0; box-sizing:border-box; }
:root { --primary:#7c3aed; --primary-hover:#6d28d9; --bg:#0a0a1a; --bg-card:rgba(30,30,50,0.9); --border:rgba(255,255,255,0.08); --text:#fff; --text-muted:#9ca3af; --text-dim:#94a3b8; --danger:#ef4444; --success:#10b981; }
body { font-family:'Inter',sans-serif; background:var(--bg); color:var(--text); min-height:100vh; }
a { color:#c4b5fd; text-decoration:none; }

/* Page */
.page-container { max-width:680px; margin:0 auto; padding:2rem 24px 4rem; }
.page-title { font-size:1.4rem; font-weight:800; margin-bottom:1.5rem; }
.back-link { display:inline-flex; align-items:center; gap:6px; font-size:0.8rem; color:var(--text-muted); margin-bottom:1rem; }
.back-link:hover { color:var(--text); }

/* Tabs */
.account-tabs { display:flex; gap:4px; margin-bottom:1.5rem; background:rgba(0,0,0,0.25); border-radius:10px; padding:4px; }
.account-tab { padding:0.6rem 1.2rem; background:transparent; border:none; border-radius:8px; color:rgba(255,255,255,0.65); font-size:0.85rem; font-weight:600; cursor:pointer; font-family:inherit; transition:all 0.2s; }
.account-tab:hover { color:rgba(255,255,255,0.85); }
.account-tab.active { background:rgba(124,58,237,0.2); color:#a78bfa; }
.account-panel { display:none; }
.account-panel.active { display:block; }

/* Connect prompt */
.connect-prompt { text-align:center; padding:3rem 1rem; color:var(--text-muted); }
.connect-prompt p { margin-bottom:1rem; font-size:0.9rem; }
.connect-prompt button { padding:10px 24px; background:var(--primary); border:none; border-radius:10px; color:white; font-size:0.9rem; font-weight:600; cursor:pointer; font-family:inherit; }
.connect-prompt button:hover { background:var(--primary-hover); }

/* Wallet cards */
.wallet-card { display:flex; align-items:center; gap:12px; padding:16px 20px; background:rgba(0,0,0,0.2); border:1px solid rgba(255,255,255,0.05); border-radius:12px; margin-bottom:10px; }
.wallet-card.primary { border-color:rgba(124,58,237,0.3); background:rgba(124,58,237,0.06); }
.wallet-badge { font-size:0.65rem; font-weight:700; text-transform:uppercase; padding:3px 8px; border-radius:6px; letter-spacing:0.5px; flex-shrink:0; white-space:nowrap; }
.wallet-badge.primary { background:rgba(124,58,237,0.2); color:#a78bfa; }
.wallet-badge.linked { background:rgba(255,255,255,0.06); color:var(--text-muted); }
.wallet-badge.connected { background:rgba(20,241,149,0.15); color:#14F195; border:1px solid rgba(20,241,149,0.3); }
.wallet-card.linked.connected { border-color:rgba(20,241,149,0.25); background:rgba(20,241,149,0.04); }
.wallet-addr { flex:1; font-family:'SF Mono','Fira Code',monospace; font-size:0.82rem; color:var(--text-muted); word-break:break-all; line-height:1.5; }
.wallet-actions { display:flex; align-items:center; gap:4px; flex-shrink:0; }
.wallet-action { background:none; border:none; cursor:pointer; padding:6px 10px; border-radius:6px; font-size:0.75rem; font-weight:600; font-family:inherit; transition:all 0.15s; white-space:nowrap; }
.wallet-action.copy { color:var(--text-muted); }
.wallet-action.copy:hover { background:rgba(255,255,255,0.08); color:var(--text); }
.wallet-action.copy.copied { color:var(--success); }
.wallet-action.switch { color:#c4b5fd; }
.wallet-action.switch:hover { background:rgba(124,58,237,0.15); }
.wallet-action.remove { color:var(--danger); opacity:0.6; }
.wallet-action.remove:hover { opacity:1; background:rgba(239,68,68,0.1); }

/* Link wallet button */
.link-wallet-btn { display:block; width:100%; padding:14px; background:rgba(124,58,237,0.06); border:2px dashed rgba(124,58,237,0.2); border-radius:12px; color:#a78bfa; font-size:0.85rem; font-weight:600; cursor:pointer; font-family:inherit; transition:all 0.15s; margin-top:10px; text-align:center; }
.link-wallet-btn:hover { background:rgba(124,58,237,0.12); border-color:rgba(124,58,237,0.35); }
.link-wallet-btn:disabled { opacity:0.4; cursor:not-allowed; }
.wallet-hint { font-size:0.75rem; color:var(--text-dim); text-align:center; margin-top:8px; }

/* Options section */
.option-section { margin-bottom:2rem; }
.option-section h3 { font-size:1rem; font-weight:700; margin-bottom:4px; }
.option-desc { font-size:0.8rem; color:var(--text-muted); margin-bottom:16px; }
.explorer-options { display:flex; flex-direction:column; gap:8px; }
.explorer-option { display:flex; align-items:center; gap:14px; padding:14px 16px; background:rgba(0,0,0,0.2); border:2px solid rgba(255,255,255,0.05); border-radius:12px; cursor:pointer; transition:all 0.15s; }
.explorer-option:hover { border-color:rgba(255,255,255,0.12); }
.explorer-option.selected { border-color:rgba(124,58,237,0.5); background:rgba(124,58,237,0.06); }
.explorer-icon { width:40px; height:40px; flex-shrink:0; border-radius:8px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,0.06); overflow:hidden; }
.explorer-icon img { width:100%; height:100%; object-fit:contain; }
.explorer-info { flex:1; }
.explorer-name { font-size:0.9rem; font-weight:600; }
.explorer-url { font-size:0.75rem; color:var(--text-muted); }
.explorer-check { width:22px; height:22px; border-radius:50%; border:2px solid rgba(255,255,255,0.12); display:flex; align-items:center; justify-content:center; transition:all 0.15s; flex-shrink:0; }
.explorer-option.selected .explorer-check { border-color:var(--primary); background:var(--primary); }

/* Toggle switch */
.toggle-row { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; background:rgba(0,0,0,0.2); border:1px solid rgba(255,255,255,0.05); border-radius:12px; }
.toggle-label { flex:1; }
.toggle-label .toggle-title { font-size:0.9rem; font-weight:600; }
.toggle-label .toggle-desc { font-size:0.75rem; color:var(--text-muted); margin-top:2px; }
.toggle-switch { position:relative; width:44px; height:24px; flex-shrink:0; cursor:pointer; }
.toggle-switch input { display:none; }
.toggle-track { position:absolute; inset:0; background:rgba(255,255,255,0.15); border:1px solid rgba(255,255,255,0.12); border-radius:12px; transition:all 0.2s; }
.toggle-switch input:checked + .toggle-track { background:#10b981; border-color:#10b981; }
.toggle-track::after { content:''; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; transition:transform 0.2s; }
.toggle-switch input:checked + .toggle-track::after { transform:translateX(20px); }

/* Referral */
.ref-card { padding:20px; background:rgba(108,255,143,0.04); border:1px solid rgba(108,255,143,0.12); border-radius:14px; margin-bottom:16px; }
.ref-card h3 { font-size:0.9rem; font-weight:700; color:#6cff8f; margin-bottom:12px; display:flex; align-items:center; gap:8px; }
.ref-card h3 svg { width:18px; height:18px; flex-shrink:0; }
.ref-code-display { display:flex; align-items:center; gap:12px; padding:14px 18px; background:rgba(0,0,0,0.25); border:1px solid rgba(108,255,143,0.1); border-radius:10px; margin-bottom:10px; }
.ref-code-text { font-family:'SF Mono','Fira Code',monospace; font-size:1.4rem; font-weight:800; color:#fff; letter-spacing:3px; flex:1; }
.ref-copy-btn { background:none; border:1px solid rgba(108,255,143,0.25); color:#6cff8f; cursor:pointer; padding:8px 14px; border-radius:8px; display:flex; align-items:center; gap:6px; font-size:0.8rem; font-weight:600; font-family:inherit; transition:all 0.15s; white-space:nowrap; }
.ref-copy-btn:hover { background:rgba(108,255,143,0.1); border-color:rgba(108,255,143,0.4); }
.ref-copy-btn svg { width:14px; height:14px; }
.ref-url { font-size:0.75rem; color:rgba(255,255,255,0.3); word-break:break-all; line-height:1.5; padding:0 2px; }
.ref-apply-card { padding:20px; background:rgba(0,0,0,0.2); border:1px solid rgba(255,255,255,0.06); border-radius:14px; }
.ref-apply-card h3 { font-size:0.9rem; font-weight:700; margin-bottom:4px; }
.ref-apply-desc { font-size:0.8rem; color:var(--text-muted); margin-bottom:12px; }
.ref-apply-row { display:flex; gap:8px; }
.ref-apply-row input { flex:1; padding:10px 14px; background:rgba(0,0,0,0.3); border:1px solid rgba(255,255,255,0.1); border-radius:8px; color:#fff; font-size:0.9rem; font-family:monospace; letter-spacing:2px; text-transform:uppercase; }
.ref-apply-row input::placeholder { text-transform:none; letter-spacing:normal; color:rgba(255,255,255,0.2); }
.ref-apply-row button { padding:10px 20px; background:#6cff8f; color:#000; border:none; border-radius:8px; font-size:0.85rem; font-weight:700; cursor:pointer; font-family:inherit; transition:opacity 0.15s; white-space:nowrap; }
.ref-apply-row button:hover { opacity:0.85; }
.ref-apply-row button:disabled { opacity:0.4; cursor:not-allowed; }
.ref-applied { display:flex; align-items:center; gap:8px; padding:12px 16px; background:rgba(16,185,129,0.08); border:1px solid rgba(16,185,129,0.15); border-radius:10px; font-size:0.85rem; color:var(--success); }
.ref-applied svg { width:16px; height:16px; flex-shrink:0; }
.ref-connect-prompt { text-align:center; padding:2rem 1rem; color:var(--text-muted); font-size:0.9rem; }

/* Social cards */
.social-cards { display:flex; flex-direction:column; gap:10px; }
.social-card { display:flex; align-items:center; gap:14px; padding:16px 20px; background:rgba(0,0,0,0.2); border:1px solid rgba(255,255,255,0.05); border-radius:12px; }
.social-icon { width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.social-icon.twitter { background:rgba(29,155,240,0.12); color:#1d9bf0; }
.social-icon.discord { background:rgba(88,101,242,0.12); color:#5865f2; }
.social-info { flex:1; min-width:0; }
.social-name { font-size:0.9rem; font-weight:600; }
.social-handle { font-size:0.8rem; color:var(--text-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.social-status { font-size:0.7rem; color:var(--success); display:flex; align-items:center; gap:4px; }
.social-btn { padding:8px 16px; border-radius:8px; border:none; font-size:0.8rem; font-weight:600; cursor:pointer; font-family:inherit; transition:all 0.15s; white-space:nowrap; flex-shrink:0; }
.social-btn.connect { background:rgba(124,58,237,0.15); color:#a78bfa; border:1px solid rgba(124,58,237,0.3); }
.social-btn.connect:hover { background:rgba(124,58,237,0.25); }
.social-btn.disconnect { background:rgba(239,68,68,0.08); color:#f87171; border:1px solid rgba(239,68,68,0.15); font-size:0.75rem; }
.social-btn.disconnect:hover { background:rgba(239,68,68,0.15); }

/* 2FA Section */
.tfa-status-card { padding:20px; background:rgba(0,0,0,0.2); border:1px solid rgba(255,255,255,0.05); border-radius:12px; margin-bottom:12px; }
.tfa-status-row { display:flex; align-items:center; gap:12px; }
.tfa-shield { width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.tfa-shield.enabled { background:rgba(16,185,129,0.12); color:var(--success); }
.tfa-shield.disabled { background:rgba(255,255,255,0.05); color:var(--text-muted); }
.tfa-info { flex:1; }
.tfa-title { font-size:0.9rem; font-weight:600; }
.tfa-desc { font-size:0.8rem; color:var(--text-muted); margin-top:2px; }

/* 2FA Modal */
.tfa-modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.7); z-index:1000; display:flex; align-items:center; justify-content:center; padding:20px; }
.tfa-modal { background:#1a1a2e; border:1px solid rgba(255,255,255,0.1); border-radius:16px; padding:28px; max-width:420px; width:100%; max-height:90vh; overflow-y:auto; }
.tfa-modal h3 { font-size:1.1rem; font-weight:700; margin-bottom:16px; }
.tfa-modal-step { font-size:0.85rem; color:var(--text-muted); margin-bottom:16px; line-height:1.5; }
.tfa-qr-wrap { display:flex; justify-content:center; margin:16px 0; }
.tfa-qr-wrap img, .tfa-qr-wrap canvas { border-radius:12px; background:#fff; padding:8px; }
.tfa-secret-display { font-family:'SF Mono','Fira Code',monospace; font-size:0.8rem; background:rgba(0,0,0,0.3); padding:10px 14px; border-radius:8px; word-break:break-all; text-align:center; margin-bottom:16px; color:var(--text-muted); user-select:all; }
.tfa-code-input { width:100%; padding:12px 16px; background:rgba(0,0,0,0.3); border:1px solid rgba(255,255,255,0.1); border-radius:10px; color:#fff; font-size:1.2rem; font-family:monospace; text-align:center; letter-spacing:8px; margin-bottom:16px; }
.tfa-code-input:focus { outline:none; border-color:var(--primary); }
.tfa-modal-actions { display:flex; gap:8px; justify-content:flex-end; }
.tfa-modal-btn { padding:10px 20px; border-radius:8px; border:none; font-size:0.85rem; font-weight:600; cursor:pointer; font-family:inherit; transition:all 0.15s; }
.tfa-modal-btn.primary { background:var(--primary); color:#fff; }
.tfa-modal-btn.primary:hover { background:var(--primary-hover); }
.tfa-modal-btn.primary:disabled { opacity:0.5; cursor:not-allowed; }
.tfa-modal-btn.cancel { background:rgba(255,255,255,0.08); color:var(--text-muted); }
.tfa-modal-btn.cancel:hover { background:rgba(255,255,255,0.12); }
.tfa-modal-btn.danger { background:rgba(239,68,68,0.15); color:#f87171; }
.tfa-modal-btn.danger:hover { background:rgba(239,68,68,0.25); }
.tfa-backup-codes { display:grid; grid-template-columns:repeat(2,1fr); gap:6px; margin:12px 0; }
.tfa-backup-code { font-family:monospace; font-size:0.85rem; padding:8px; background:rgba(0,0,0,0.3); border-radius:6px; text-align:center; letter-spacing:1px; }

/* Link Wallet Modal */
.link-modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.7); z-index:1000; display:flex; align-items:center; justify-content:center; padding:20px; }
.link-modal { background:#1a1a2e; border:1px solid rgba(255,255,255,0.1); border-radius:16px; padding:28px; max-width:440px; width:100%; }
.link-modal h3 { font-size:1.05rem; font-weight:700; margin-bottom:16px; display:flex; align-items:center; gap:8px; }
.link-modal-primary { background:rgba(124,58,237,0.08); border:1px solid rgba(124,58,237,0.2); border-radius:10px; padding:10px 14px; margin-bottom:16px; }
.link-modal-primary-label { font-size:0.72rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:4px; }
.link-modal-primary-addr { font-family:'SF Mono','Fira Code',monospace; font-size:0.82rem; word-break:break-all; color:#d4c8ff; }
.link-step-note { font-size:0.78rem; color:var(--text-muted); line-height:1.5; padding:8px 12px; background:rgba(255,255,255,0.03); border-radius:8px; margin-top:4px; }
.link-modal-steps { display:flex; flex-direction:column; gap:14px; margin-bottom:20px; }
.link-step { display:flex; gap:12px; align-items:flex-start; }
.link-step-num { width:26px; height:26px; border-radius:50%; background:rgba(124,58,237,0.2); color:#a78bfa; font-size:0.75rem; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.link-step-text { font-size:0.85rem; color:var(--text-muted); line-height:1.5; padding-top:2px; }
.link-step-text strong { color:var(--text); }
.link-modal-result { padding:14px 16px; border-radius:10px; margin-bottom:16px; font-size:0.85rem; }
.link-modal-result.error { background:rgba(239,68,68,0.08); border:1px solid rgba(239,68,68,0.15); color:#f87171; }
.link-modal-result.success { background:rgba(16,185,129,0.08); border:1px solid rgba(16,185,129,0.15); color:#6cff8f; }
.link-modal-result .detected-addr { font-family:'SF Mono','Fira Code',monospace; font-size:0.78rem; word-break:break-all; margin-top:6px; color:var(--text-muted); }
.link-modal-actions { display:flex; gap:8px; justify-content:flex-end; }
.link-modal-btn { padding:10px 20px; border-radius:8px; border:none; font-size:0.85rem; font-weight:600; cursor:pointer; font-family:inherit; transition:all 0.15s; }
.link-modal-btn.primary { background:var(--primary); color:#fff; }
.link-modal-btn.primary:hover { background:var(--primary-hover); }
.link-modal-btn.primary:disabled { opacity:0.5; cursor:not-allowed; }
.link-modal-btn.cancel { background:rgba(255,255,255,0.08); color:var(--text-muted); }
.link-modal-btn.cancel:hover { background:rgba(255,255,255,0.12); }

/* Toast */
.toast { position:fixed; bottom:calc(24px + env(safe-area-inset-bottom, 0px)); left:50%; transform:translateX(-50%); padding:10px 20px; border-radius:10px; font-size:0.85rem; font-weight:600; z-index:9999; transition:opacity 0.3s; }
.toast.error { background:rgba(239,68,68,0.9); color:white; }
.toast.success { background:rgba(16,185,129,0.9); color:white; }
.toast.info { background:rgba(124,58,237,0.9); color:white; }

@media (max-width: 600px) {
.page-container { padding:1.5rem 16px 3rem; }
.page-title { font-size:1.2rem; }
.wallet-card { flex-wrap:wrap; gap:8px; padding:14px 16px; }
.wallet-addr { flex-basis:100%; order:2; font-size:0.75rem; }
.wallet-actions { order:3; flex-basis:100%; justify-content:flex-end; }
}