* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

html, body {
overflow-x: hidden;
}

body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: var(--bg-color, #0a0a0a);
color: #fff;
min-height: 100vh;
position: relative;
}

/* Fixed background image layer */
body.has-bg-image::before {
content: '';
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: var(--bg-image);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
z-index: -1;
pointer-events: none;
}

body.has-bg-image {
background-image: none !important;
}

:root {
--primary-color: #6cff8f;
--secondary-color: #00d4ff;
--bg-color: #0a0a0a;
--header-color: #000000;
--nav-links-color: #ffffff;
}

/* Header */
.header {
background: var(--header-color, #000000);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
padding: 1rem 0;
}

.header-container {
display: flex;
align-items: center;
gap: 1.5rem;
max-width: 1400px;
margin: 0 auto;
padding: 0 2rem;
}

.back-to-explore-btn {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border-radius: 8px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.1);
color: #aaa;
font-size: 0.8rem;
font-weight: 500;
text-decoration: none;
transition: all 0.2s;
flex-shrink: 0;
white-space: nowrap;
}

.back-to-explore-btn:hover {
background: rgba(255,255,255,0.1);
color: #fff;
}

.header-logo {
display: flex;
align-items: center;
gap: 0.75rem;
flex-shrink: 0;
}

.header-logo img {
height: 40px;
width: auto;
border-radius: 8px;
}

.header-logo h1 {
font-size: 1.25rem;
font-weight: 700;
color: var(--primary-color);
}

.header-nav {
display: flex;
align-items: center;
gap: 1.5rem;
}

.header-nav a {
display: flex;
align-items: center;
gap: 6px;
color: var(--nav-links-color, #ffffff);
text-decoration: none;
font-size: 0.9rem;
font-weight: 500;
transition: opacity 0.2s;
}

.header-nav a:hover {
opacity: 0.8;
}

.header-nav a img {
width: 20px;
height: 20px;
}

.header-actions {
display: flex;
align-items: center;
gap: 0.75rem;
}

.social-links {
display: flex;
align-items: center;
gap: 10px;
margin-left: auto;
margin-right: 1.5rem;
}

.social-links a {
display: none;
transition: opacity 0.2s;
}

.social-links a:hover {
opacity: 0.8;
}

.social-links a img {
width: 20px;
height: 20px;
}

/* Points Button - Icon Only */
.points-btn {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
padding: 0;
background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(255, 165, 0, 0.1));
border: 1px solid rgba(255, 215, 0, 0.3);
border-radius: 8px;
color: #ffd700;
cursor: pointer;
transition: all 0.2s;
}
.points-btn:hover {
background: linear-gradient(135deg, rgba(255, 215, 0, 0.25), rgba(255, 165, 0, 0.2));
border-color: rgba(255, 215, 0, 0.5);
transform: translateY(-1px);
}
.points-btn svg {
flex-shrink: 0;
}

/* Header Security Button - Small shield icon in header */
.header-security-btn {
display: flex;
align-items: center;
justify-content: center;
position: relative;
width: 36px;
height: 36px;
padding: 0;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 8px;
color: rgba(255, 255, 255, 0.5);
cursor: pointer;
transition: all 0.2s;
}
.header-security-btn:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.25);
}
.header-security-btn.enabled {
background: linear-gradient(135deg, rgba(108, 255, 143, 0.15), rgba(0, 212, 255, 0.1));
border-color: rgba(108, 255, 143, 0.4);
color: var(--primary-color);
}
.header-security-btn.session-active {
background: linear-gradient(135deg, rgba(108, 255, 143, 0.2), rgba(0, 212, 255, 0.15));
border-color: rgba(108, 255, 143, 0.6);
color: var(--primary-color);
box-shadow: 0 0 8px rgba(108, 255, 143, 0.3);
}
.header-security-status {
position: absolute;
bottom: -2px;
right: -2px;
width: 8px;
height: 8px;
border-radius: 50%;
background: #666;
border: 1px solid #1a1a2e;
}
.header-security-btn.enabled .header-security-status {
background: var(--primary-color);
}
.header-security-btn.session-active .header-security-status {
background: var(--primary-color);
animation: sessionPulse 2s infinite;
}

/* JUP Swap header button */
#headerSwapBtn {
background: rgba(16, 185, 129, 0.1);
border-color: rgba(16, 185, 129, 0.3);
color: #10b981;
}
#headerSwapBtn:hover {
background: rgba(16, 185, 129, 0.2);
border-color: rgba(16, 185, 129, 0.5);
}

/* Hamburger Menu - Hidden on desktop */
.hamburger-btn {
display: none;
}

.mobile-menu-overlay {
display: none;
}

/* Security Button */
.security-btn {
display: none;
align-items: center;
justify-content: center;
position: relative;
width: 36px;
height: 36px;
padding: 0;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 8px;
color: rgba(255, 255, 255, 0.7);
cursor: pointer;
transition: all 0.2s;
}
.security-btn:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.25);
}
.security-btn.enabled {
background: linear-gradient(135deg, rgba(108, 255, 143, 0.15), rgba(0, 212, 255, 0.1));
border-color: rgba(108, 255, 143, 0.4);
color: var(--primary-color);
}
.security-btn.enabled:hover {
background: linear-gradient(135deg, rgba(108, 255, 143, 0.25), rgba(0, 212, 255, 0.15));
border-color: rgba(108, 255, 143, 0.6);
}
.security-btn .security-icon {
width: 18px;
height: 18px;
}
.security-btn .security-status-dot {
position: absolute;
top: 4px;
right: 4px;
width: 6px;
height: 6px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
}
.security-btn.enabled .security-status-dot {
background: var(--primary-color);
box-shadow: 0 0 6px var(--primary-color);
}

/* Security Modal */
.security-modal-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.85);
z-index: 3000;
justify-content: center;
align-items: center;
padding: 20px;
}
.security-modal-overlay.active {
display: flex;
}
.security-modal {
width: 100%;
max-width: 480px;
background: linear-gradient(180deg, #1a1a2e 0%, #0f0f1a 100%);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.1);
overflow: hidden;
max-height: 90vh;
overflow-y: auto;
}
.security-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 24px;
background: rgba(108, 255, 143, 0.05);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.security-modal-title {
display: flex;
align-items: center;
gap: 10px;
font-size: 1.1rem;
font-weight: 600;
color: #fff;
}
.security-modal-title svg {
color: var(--primary-color);
}
.security-modal-close {
background: rgba(255, 255, 255, 0.1);
border: none;
color: #fff;
width: 32px;
height: 32px;
border-radius: 8px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
}
.security-modal-close:hover {
background: rgba(255, 255, 255, 0.2);
}
.security-modal-body {
padding: 24px;
}
.security-section {
margin-bottom: 24px;
}
.security-section:last-child {
margin-bottom: 0;
}
.security-section-title {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.95rem;
font-weight: 600;
color: #fff;
margin-bottom: 12px;
}
.security-section-title svg {
width: 18px;
height: 18px;
opacity: 0.7;
}
.security-status-card {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
padding: 16px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.security-status-card.enabled {
background: rgba(108, 255, 143, 0.08);
border-color: rgba(108, 255, 143, 0.3);
}
.security-status-info {
display: flex;
align-items: center;
gap: 12px;
}
.security-status-icon {
width: 40px;
height: 40px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
justify-content: center;
}
.security-status-card.enabled .security-status-icon {
background: rgba(108, 255, 143, 0.2);
color: var(--primary-color);
}
.security-status-text h4 {
font-size: 0.95rem;
font-weight: 600;
color: #fff;
margin-bottom: 2px;
}
.security-status-text p {
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.5);
}
.security-status-card.enabled .security-status-text p {
color: var(--primary-color);
}
.security-toggle-btn {
padding: 8px 16px;
border-radius: 8px;
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
border: none;
}
.security-toggle-btn.enable {
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
color: #000;
}
.security-toggle-btn.enable:hover {
transform: translateY(-1px);
box-shadow: 0 4px 15px rgba(108, 255, 143, 0.3);
}
.security-toggle-btn.disable {
background: rgba(255, 100, 100, 0.2);
color: #ff6b6b;
border: 1px solid rgba(255, 100, 100, 0.3);
}
.security-toggle-btn.disable:hover {
background: rgba(255, 100, 100, 0.3);
}
.security-info-text {
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.5);
line-height: 1.5;
margin-top: 12px;
}
.security-protected-list {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 10px;
padding: 12px 16px;
}
.security-protected-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.security-protected-item:last-child {
border-bottom: none;
}
.security-protected-item svg {
width: 16px;
height: 16px;
color: var(--primary-color);
}
.security-protected-item span {
font-size: 0.85rem;
color: rgba(255, 255, 255, 0.8);
}
.security-action-toggle {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
cursor: pointer;
}
.security-action-toggle:last-child {
border-bottom: none;
}
.security-action-toggle span {
font-size: 0.85rem;
color: rgba(255, 255, 255, 0.8);
}
.security-action-toggle input[type="checkbox"] {
width: 16px;
height: 16px;
accent-color: var(--primary-color);
cursor: pointer;
}
.security-action-toggle.mandatory {
opacity: 0.7;
}
.security-action-toggle.mandatory input[type="checkbox"] {
pointer-events: none;
}
.security-action-toggle .mandatory-badge {
font-size: 0.65rem;
color: rgba(255, 255, 255, 0.4);
background: rgba(255, 255, 255, 0.08);
padding: 1px 6px;
border-radius: 4px;
margin-left: 6px;
}
.security-action-btn {
width: 100%;
padding: 12px 16px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 10px;
color: #fff;
font-size: 0.9rem;
font-weight: 500;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
transition: all 0.2s;
}
.security-action-btn:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.2);
}
.security-action-btn svg {
width: 18px;
height: 18px;
opacity: 0.5;
}

/* 2FA Setup Modal */
.twofa-setup-step {
display: none;
}
.twofa-setup-step.active {
display: block;
}
.twofa-qr-container {
background: #fff;
padding: 16px;
border-radius: 12px;
display: flex;
justify-content: center;
margin: 16px 0;
}
.twofa-qr-container img {
width: 180px;
height: 180px;
}
.twofa-secret-display {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
padding: 12px;
font-family: monospace;
font-size: 0.85rem;
color: var(--primary-color);
text-align: center;
word-break: break-all;
margin-bottom: 16px;
}
.twofa-code-input {
display: flex;
justify-content: center;
gap: 8px;
margin: 20px 0;
}
.twofa-code-input input {
width: 45px;
height: 55px;
text-align: center;
font-size: 1.5rem;
font-weight: 600;
background: rgba(255, 255, 255, 0.05);
border: 2px solid rgba(255, 255, 255, 0.15);
border-radius: 10px;
color: #fff;
outline: none;
transition: all 0.2s;
}
.twofa-code-input input:focus {
border-color: var(--primary-color);
background: rgba(108, 255, 143, 0.05);
}
.twofa-verify-btn {
width: 100%;
padding: 14px;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
border: none;
border-radius: 10px;
color: #000;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
}
.twofa-verify-btn:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: 0 4px 20px rgba(108, 255, 143, 0.4);
}
.twofa-verify-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.twofa-error {
color: #ff6b6b;
font-size: 0.85rem;
text-align: center;
margin-top: 12px;
}

/* 2FA Verification Modal (for protected actions) */
.verify-2fa-modal-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.9);
z-index: 4000;
justify-content: center;
align-items: center;
padding: 20px;
}
.verify-2fa-modal-overlay.active {
display: flex;
}
.verify-2fa-modal {
width: 100%;
max-width: 400px;
background: linear-gradient(180deg, #1a1a2e 0%, #0f0f1a 100%);
border-radius: 16px;
border: 1px solid rgba(108, 255, 143, 0.2);
padding: 24px;
text-align: center;
}
.verify-2fa-icon {
width: 60px;
height: 60px;
background: rgba(108, 255, 143, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 16px;
}
.verify-2fa-icon svg {
width: 28px;
height: 28px;
color: var(--primary-color);
}
.verify-2fa-title {
font-size: 1.2rem;
font-weight: 600;
color: #fff;
margin-bottom: 8px;
}
.verify-2fa-subtitle {
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.5);
margin-bottom: 24px;
}
.verify-2fa-action-label {
display: inline-block;
background: rgba(108, 255, 143, 0.15);
color: var(--primary-color);
padding: 4px 12px;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 600;
margin-bottom: 20px;
}
.verify-2fa-cancel {
margin-top: 16px;
background: none;
border: none;
color: rgba(255, 255, 255, 0.5);
font-size: 0.9rem;
cursor: pointer;
transition: color 0.2s;
}
.verify-2fa-cancel:hover {
color: #fff;
}

/* Sets Button */
.sets-btn {
display: none;
align-items: center;
gap: 6px;
padding: 8px 12px;
background: linear-gradient(135deg, rgba(255, 193, 7, 0.15), rgba(255, 152, 0, 0.1));
border: 1px solid rgba(255, 193, 7, 0.3);
border-radius: 8px;
color: #FFC107;
cursor: pointer;
transition: all 0.2s;
font-size: 0.9rem;
font-weight: 500;
}
.sets-btn:hover {
background: linear-gradient(135deg, rgba(255, 193, 7, 0.25), rgba(255, 152, 0, 0.2));
border-color: rgba(255, 193, 7, 0.5);
}
.sets-btn .sets-icon {
width: 16px;
height: 16px;
}
.sets-btn__badge {
background: var(--primary-color);
color: #000;
padding: 2px 6px;
border-radius: 10px;
font-size: 0.75rem;
font-weight: 700;
margin-left: 4px;
}
.sets-btn__badge--incomplete {
background: rgba(255, 193, 7, 0.3);
color: #FFC107;
}
.sets-btn__badge--complete {
background: var(--primary-color);
color: #000;
}

/* Sets Modal */
.sets-modal {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.9);
backdrop-filter: blur(12px);
z-index: 2000;
justify-content: center;
align-items: center;
padding: 20px;
}
.sets-modal.active {
display: flex;
animation: fadeIn 0.2s ease;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.sets-modal__content {
background: linear-gradient(180deg, #0d1421 0%, #111827 100%);
border-radius: 20px;
max-width: 900px;
width: 100%;
max-height: 85vh;
display: flex;
flex-direction: column;
box-shadow: 0 25px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
animation: slideUp 0.3s ease;
}
@keyframes slideUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.sets-modal__header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 24px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.sets-modal__title {
font-size: 1.25rem;
font-weight: 600;
color: #fff;
display: flex;
align-items: center;
gap: 10px;
}
.sets-modal__title-icon {
width: 24px;
height: 24px;
color: #FFC107;
}
.sets-modal__close {
background: none;
border: none;
color: rgba(255, 255, 255, 0.5);
cursor: pointer;
padding: 4px;
display: flex;
transition: color 0.2s;
}
.sets-modal__close:hover {
color: #fff;
}
.sets-modal__close svg {
width: 20px;
height: 20px;
}
.sets-modal__summary {
display: flex;
gap: 20px;
padding: 20px 28px;
background: linear-gradient(90deg, rgba(108, 255, 143, 0.05) 0%, rgba(0, 0, 0, 0.2) 50%, rgba(255, 193, 7, 0.05) 100%);
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.sets-summary-stat {
text-align: center;
flex: 1;
padding: 12px 16px;
background: rgba(255, 255, 255, 0.03);
border-radius: 12px;
transition: transform 0.2s, background 0.2s;
}
.sets-summary-stat:hover {
transform: translateY(-2px);
background: rgba(255, 255, 255, 0.05);
}
.sets-summary-stat__value {
font-size: 2rem;
font-weight: 700;
color: var(--primary-color);
line-height: 1;
margin-bottom: 4px;
}
.sets-summary-stat__value--warning {
color: #FFC107;
}
.sets-summary-stat__value--neutral {
color: rgba(255, 255, 255, 0.8);
}
.sets-summary-stat__label {
font-size: 0.7rem;
color: rgba(255, 255, 255, 0.5);
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 500;
}

/* Sets Modal Tabs */
.sets-modal__tabs {
display: flex;
padding: 0 24px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.sets-tab {
padding: 12px 20px;
background: none;
border: none;
color: rgba(255, 255, 255, 0.5);
font-size: 0.9rem;
font-weight: 500;
cursor: pointer;
position: relative;
transition: color 0.2s;
}
.sets-tab:hover {
color: rgba(255, 255, 255, 0.8);
}
.sets-tab.active {
color: var(--primary-color);
}
.sets-tab.active::after {
content: '';
position: absolute;
bottom: -1px;
left: 0;
right: 0;
height: 2px;
background: var(--primary-color);
}
.sets-tab__count {
background: rgba(255, 255, 255, 0.1);
padding: 2px 6px;
border-radius: 10px;
font-size: 0.75rem;
margin-left: 6px;
}
.sets-tab.active .sets-tab__count {
background: rgba(108, 255, 143, 0.2);
color: var(--primary-color);
}

/* Sets Modal Body */
.sets-modal__body {
padding: 20px 24px;
overflow-y: auto;
flex: 1;
}
.sets-empty {
text-align: center;
padding: 40px 20px;
color: rgba(255, 255, 255, 0.4);
}
.sets-empty svg {
width: 48px;
height: 48px;
margin-bottom: 16px;
opacity: 0.5;
}
.sets-empty__title {
font-size: 1rem;
color: rgba(255, 255, 255, 0.6);
margin-bottom: 8px;
}
.sets-empty__text {
font-size: 0.85rem;
}

/* Set Progress Card - Large Visual Design — clickable to filter NFTs */
.set-progress-card {
background: linear-gradient(145deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 16px;
padding: 20px;
margin-bottom: 16px;
transition: all 0.3s ease;
cursor: pointer;
}
.set-progress-card:hover {
border-color: rgba(255, 255, 255, 0.15);
transform: translateY(-2px);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}
.set-progress-card.active-filter {
border-color: #9945FF;
box-shadow: 0 0 16px rgba(153, 69, 255, 0.3);
background: linear-gradient(145deg, rgba(153, 69, 255, 0.12) 0%, rgba(153, 69, 255, 0.04) 100%);
}
.set-progress-card:last-child {
margin-bottom: 0;
}
.set-progress-card--complete {
border-color: rgba(108, 255, 143, 0.4);
background: linear-gradient(145deg, rgba(108, 255, 143, 0.08) 0%, rgba(108, 255, 143, 0.02) 100%);
}
.set-progress-card--complete:hover {
border-color: rgba(108, 255, 143, 0.6);
box-shadow: 0 8px 30px rgba(108, 255, 143, 0.15);
}
.set-progress-card--can-complete {
border-color: rgba(255, 193, 7, 0.4);
background: linear-gradient(145deg, rgba(255, 193, 7, 0.1) 0%, rgba(255, 193, 7, 0.03) 100%);
animation: can-complete-pulse 3s infinite;
}
@keyframes can-complete-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.2); }
50% { box-shadow: 0 0 20px 5px rgba(255, 193, 7, 0.1); }
}
.set-progress-card__header {
display: flex;
align-items: flex-start;
gap: 16px;
margin-bottom: 16px;
}
.set-progress-card__image {
width: 72px;
height: 72px;
border-radius: 12px;
object-fit: cover;
background: rgba(255, 255, 255, 0.05);
flex-shrink: 0;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}
.set-progress-card__image-placeholder {
width: 72px;
height: 72px;
border-radius: 12px;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.set-progress-card__image-placeholder svg {
width: 32px;
height: 32px;
color: rgba(255, 255, 255, 0.2);
}
.set-progress-card__info {
flex: 1;
min-width: 0;
}
.set-progress-card__name {
font-size: 1.1rem;
font-weight: 600;
color: #fff;
margin-bottom: 6px;
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.set-progress-card__status {
font-size: 0.7rem;
padding: 3px 10px;
border-radius: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.set-progress-card__status--complete {
background: rgba(108, 255, 143, 0.2);
color: var(--primary-color);
}
.set-progress-card__status--partial {
background: rgba(255, 193, 7, 0.2);
color: #FFC107;
}
.set-progress-card__status--can-complete {
background: rgba(255, 193, 7, 0.3);
color: #FFD54F;
animation: pulse-glow 2s infinite;
}
@keyframes pulse-glow {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}
.set-progress-card__bonus {
font-size: 0.9rem;
color: var(--primary-color);
display: flex;
align-items: center;
gap: 6px;
font-weight: 500;
}
.set-progress-card__bonus-token {
width: 18px;
height: 18px;
border-radius: 50%;
}

/* Progress Bar */
.set-progress-bar {
height: 8px;
background: rgba(255, 255, 255, 0.1);
border-radius: 4px;
overflow: hidden;
margin-bottom: 16px;
position: relative;
}
.set-progress-bar__fill {
height: 100%;
background: linear-gradient(90deg, var(--primary-color), #4ade80);
border-radius: 4px;
transition: width 0.5s ease;
position: relative;
}
.set-progress-bar__fill::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
animation: shimmer 2s infinite;
}
@keyframes shimmer {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
.set-progress-bar__fill--partial {
background: linear-gradient(90deg, #FFC107, #FF9800);
}

/* Trait List - Grid Layout */
.set-traits-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 10px;
}
.set-trait {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
background: rgba(0, 0, 0, 0.25);
border-radius: 10px;
font-size: 0.9rem;
transition: all 0.2s ease;
}
.set-trait:hover {
background: rgba(0, 0, 0, 0.35);
}
.set-trait--matched {
background: rgba(108, 255, 143, 0.12);
border: 1px solid rgba(108, 255, 143, 0.2);
}
.set-trait--missing {
background: rgba(255, 82, 82, 0.1);
border: 1px dashed rgba(255, 82, 82, 0.4);
}
.set-trait--available {
background: rgba(255, 193, 7, 0.15);
border: 1px solid rgba(255, 193, 7, 0.4);
cursor: pointer;
}
.set-trait--available:hover {
background: rgba(255, 193, 7, 0.25);
transform: scale(1.02);
}
.set-trait__icon {
width: 18px;
height: 18px;
flex-shrink: 0;
}
.set-trait__icon--check {
color: var(--primary-color);
}
.set-trait__icon--missing {
color: #ff5252;
}
.set-trait__icon--available {
color: #FFC107;
}
.set-trait__text {
flex: 1;
color: rgba(255, 255, 255, 0.9);
}
.set-trait__label {
font-size: 0.75rem;
padding: 2px 8px;
border-radius: 4px;
font-weight: 500;
}
.set-trait__label--staked {
background: rgba(108, 255, 143, 0.2);
color: var(--primary-color);
}
.set-trait__label--needed {
background: rgba(255, 82, 82, 0.2);
color: #ff5252;
}
.set-trait__label--stake-it {
background: rgba(255, 193, 7, 0.3);
color: #FFD54F;
cursor: pointer;
}
.set-trait__label--stake-it:hover {
background: rgba(255, 193, 7, 0.5);
}
.set-trait__qty {
font-weight: 600;
color: rgba(255, 193, 7, 0.8);
}
.set-trait__nft-count {
font-size: 0.7rem;
color: rgba(255, 255, 255, 0.4);
}
.set-trait__nft-names {
display: block;
width: 100%;
font-size: 0.7rem;
color: rgba(108, 255, 143, 0.7);
margin-top: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-left: 24px;
}
.set-trait__nft-names--available {
color: rgba(255, 193, 7, 0.8);
}

/* Exclusive mode notice */
.sets-exclusive-notice {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
margin: 8px 16px 0;
background: rgba(108, 255, 143, 0.08);
border: 1px solid rgba(108, 255, 143, 0.2);
border-radius: 8px;
font-size: 0.78rem;
color: rgba(108, 255, 143, 0.9);
line-height: 1.4;
}
.sets-exclusive-notice svg {
flex-shrink: 0;
stroke: rgba(108, 255, 143, 0.7);
}
.sets-manage-btn {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 5px 12px;
border-radius: 6px;
border: 1px solid rgba(108, 255, 143, 0.3);
background: rgba(108, 255, 143, 0.15);
color: #6cff8f;
font-size: 0.78rem;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
margin-left: auto;
}
.sets-manage-btn:hover {
background: rgba(108, 255, 143, 0.25);
}
.sets-manage-btn svg {
stroke: #6cff8f;
}

/* Assignment chips row */
.set-trait__assign-row {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: 6px 0 2px 24px;
width: 100%;
align-items: center;
}
.set-trait__assign-label {
font-size: 0.7rem;
color: rgba(255,255,255,0.35);
margin-right: 2px;
white-space: nowrap;
}
.set-assign-chip {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 10px 3px 3px;
border-radius: 8px;
font-size: 0.8rem;
font-weight: 500;
cursor: pointer;
border: 1.5px solid rgba(255,255,255,0.12);
background: rgba(255,255,255,0.05);
color: rgba(255,255,255,0.6);
transition: all 0.15s ease;
}
.set-assign-chip:hover {
background: rgba(255,255,255,0.1);
border-color: rgba(255,255,255,0.25);
transform: translateY(-1px);
}
.set-assign-chip__img {
width: 28px;
height: 28px;
border-radius: 6px;
object-fit: cover;
flex-shrink: 0;
}
.set-assign-chip span {
white-space: nowrap;
}
.set-assign-chip__x {
width: 10px;
height: 10px;
flex-shrink: 0;
opacity: 0.7;
}
.set-assign-chip--assigned {
background: rgba(108, 255, 143, 0.15);
border-color: rgba(108, 255, 143, 0.4);
color: #6cff8f;
}
.set-assign-chip--assigned:hover {
background: rgba(255, 107, 107, 0.15);
border-color: rgba(255, 107, 107, 0.4);
color: rgba(255, 107, 107, 0.9);
}
.set-assign-chip--auto {
background: rgba(108, 255, 143, 0.06);
border-color: rgba(108, 255, 143, 0.18);
color: rgba(108, 255, 143, 0.6);
border-style: dashed;
}
.set-assign-chip--auto:hover {
background: rgba(108, 255, 143, 0.15);
border-color: rgba(108, 255, 143, 0.4);
border-style: solid;
color: #6cff8f;
}
.set-assign-chip--elsewhere {
background: rgba(255, 193, 7, 0.08);
border-color: rgba(255, 193, 7, 0.2);
color: rgba(255, 193, 7, 0.7);
opacity: 0.6;
}
.set-assign-chip--elsewhere:hover {
opacity: 1;
background: rgba(255, 193, 7, 0.15);
border-color: rgba(255, 193, 7, 0.4);
}
.set-assign-chip--available:hover {
background: rgba(108, 255, 143, 0.12);
border-color: rgba(108, 255, 143, 0.3);
color: rgba(108, 255, 143, 0.9);
}

/* Exclusive mode: remove button on NFT cards in set groups */
.set-group .nft-card-remove-btn {
position: absolute;
top: 6px;
right: 6px;
width: 26px;
height: 26px;
border-radius: 50%;
background: rgba(255, 70, 70, 0.85);
border: 2px solid rgba(255,255,255,0.3);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 6;
transition: all 0.15s;
padding: 0;
}
.set-group .nft-card-remove-btn:hover {
background: rgba(255, 40, 40, 1);
transform: scale(1.15);
}

/* Manage mode: suppress selection/hover effects */
.nft-card.manage-mode {
cursor: default;
}
.nft-card.manage-mode:hover {
transform: none;
box-shadow: none;
border-color: rgba(255, 255, 255, 0.1);
}
.nft-card.manage-mode .nft-card-actions {
display: none;
}

/* Exclusive mode: placeholder "add" button */
.set-req-placeholder--exclusive {
cursor: pointer;
transition: border-color 0.2s, background 0.2s;
}
.set-req-placeholder--exclusive:hover {
border-color: rgba(108, 255, 143, 0.4);
background: rgba(108, 255, 143, 0.04);
}
.set-req-placeholder--exclusive .set-req-placeholder__icon {
stroke: rgba(108, 255, 143, 0.5);
}
.set-req-placeholder--exclusive:hover .set-req-placeholder__icon {
stroke: rgba(108, 255, 143, 0.8);
}
.set-req-placeholder__add-label {
font-size: 0.75rem;
color: rgba(108, 255, 143, 0.7);
font-weight: 500;
}
.set-req-placeholder--disabled {
cursor: not-allowed;
opacity: 0.4;
pointer-events: none;
}

/* Exclusive: "Unassigned" pool at bottom */
.set-unassigned-header {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 16px;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.06);
background: rgba(10, 14, 20, 0.75);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
color: rgba(255,255,255,0.5);
font-size: 0.9rem;
cursor: pointer;
user-select: none;
}
.set-unassigned-header svg {
width: 18px;
height: 18px;
}

/* Unassigned NFTs filter */
.set-unassigned-filter {
display: flex;
gap: 10px;
padding: 8px 0;
align-items: center;
}
.set-unassigned-filter select {
flex: 1;
max-width: 250px;
padding: 8px 12px;
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.05);
color: #fff;
font-size: 0.85rem;
cursor: pointer;
outline: none;
}
.set-unassigned-filter select:focus {
border-color: var(--accent, #00d2ff);
}
.set-unassigned-filter select option {
background: #1a1f2e;
color: #fff;
}

/* Clear All button */
.set-manage-clear-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
border-radius: 8px;
border: 1px solid rgba(255, 70, 70, 0.4);
background: rgba(255, 70, 70, 0.1);
color: rgba(255, 120, 120, 0.9);
font-size: 0.8rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
}
.set-manage-clear-btn:hover {
background: rgba(255, 70, 70, 0.2);
border-color: rgba(255, 70, 70, 0.6);
color: #ff6b6b;
}

/* Exclusive: floating save bar */
.set-manage-save-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 12px 20px;
background: rgba(15, 20, 30, 0.95);
border-top: 2px solid rgba(108, 255, 143, 0.3);
backdrop-filter: blur(10px);
z-index: 100;
animation: slideUp 0.25s ease;
}
@keyframes slideUp {
from { transform: translateY(100%); }
to { transform: translateY(0); }
}
.set-manage-save-bar__text {
color: rgba(108, 255, 143, 0.9);
font-size: 0.85rem;
font-weight: 500;
}
.set-manage-save-bar__btn {
padding: 8px 20px;
border-radius: 8px;
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
border: none;
}
.set-manage-save-bar__btn--save {
background: linear-gradient(135deg, #6cff8f, #14F195);
color: #000;
}
.set-manage-save-bar__btn--save:hover {
filter: brightness(1.1);
}
.set-manage-save-bar__btn--save:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.set-manage-save-bar__btn--reset {
background: transparent;
border: 1px solid rgba(255,255,255,0.2);
color: rgba(255,255,255,0.7);
}
.set-manage-save-bar__btn--reset:hover {
background: rgba(255,255,255,0.08);
}

/* NFT picker overlay for adding to sets */
.set-nft-picker-overlay {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.7);
z-index: 200;
display: flex;
align-items: center;
justify-content: center;
animation: fadeIn 0.15s ease;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.set-nft-picker {
background: #1a1f2e;
border: 1px solid rgba(255,255,255,0.1);
border-radius: 16px;
width: 90%;
max-width: 800px;
max-height: 85vh;
display: flex;
flex-direction: column;
}
.set-nft-picker__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 18px;
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.set-nft-picker__title {
font-size: 0.95rem;
font-weight: 600;
color: #fff;
}
.set-nft-picker__close {
background: none;
border: none;
color: rgba(255,255,255,0.5);
cursor: pointer;
padding: 4px;
}
.set-nft-picker__close:hover { color: #fff; }
.set-nft-picker__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
gap: 10px;
padding: 14px;
overflow-y: auto;
}
.set-nft-picker__item {
border: 2px solid rgba(255,255,255,0.08);
border-radius: 10px;
overflow: hidden;
cursor: pointer;
transition: all 0.15s;
}
.set-nft-picker__item:hover {
border-color: rgba(108, 255, 143, 0.5);
transform: translateY(-2px);
}
.set-nft-picker__item-img {
position: relative;
width: 100%;
padding-bottom: 100%;
}
.set-nft-picker__item-img img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.set-nft-picker__item-name {
padding: 6px 8px;
font-size: 0.75rem;
color: rgba(255,255,255,0.8);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.set-nft-picker__empty {
padding: 30px;
text-align: center;
color: rgba(255,255,255,0.4);
font-size: 0.85rem;
}

/* Assignment save bar */
.sets-assignment-save-bar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 16px;
background: rgba(108, 255, 143, 0.1);
border-top: 1px solid rgba(108, 255, 143, 0.2);
border-radius: 0 0 16px 16px;
font-size: 0.82rem;
color: rgba(108, 255, 143, 0.9);
}
.sets-assignment-save-bar__actions {
display: flex;
gap: 8px;
}
.sets-assignment-save-bar__reset {
padding: 5px 12px;
border-radius: 6px;
border: 1px solid rgba(255,255,255,0.15);
background: transparent;
color: rgba(255,255,255,0.7);
font-size: 0.78rem;
cursor: pointer;
}
.sets-assignment-save-bar__reset:hover {
background: rgba(255,255,255,0.08);
}
.sets-assignment-save-bar__save {
padding: 5px 14px;
border-radius: 6px;
border: none;
background: rgba(108, 255, 143, 0.25);
color: #6cff8f;
font-size: 0.78rem;
font-weight: 500;
cursor: pointer;
}
.sets-assignment-save-bar__save:hover {
background: rgba(108, 255, 143, 0.35);
}
.sets-assignment-save-bar__save:disabled {
opacity: 0.5;
cursor: not-allowed;
}

/* Set Section - Sort by Sets view */
.set-group {
margin-bottom: 1.25rem;
}
.set-group__border {
border: 2px solid rgba(255, 255, 255, 0.08);
border-radius: 16px;
padding: 12px;
margin-top: 8px;
transition: border-color 0.3s ease;
background: rgba(10, 14, 20, 0.75);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.set-group--complete .set-group__border {
border-color: rgba(108, 255, 143, 0.3);
box-shadow: 0 0 20px rgba(108, 255, 143, 0.05);
}
.set-group--partial .set-group__border {
border-color: rgba(255, 193, 7, 0.25);
}
.set-group--empty .set-group__border {
border-color: rgba(255, 255, 255, 0.05);
border-style: dashed;
}
.set-group__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
gap: 1rem;
}
.set-group__border.collapsed .set-group__grid {
display: none;
}

/* Set Section Divider - Navigation bar header */
.set-section-divider {
display: flex;
align-items: center;
gap: 14px;
padding: 12px 16px;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(10, 14, 20, 0.8);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
flex-wrap: wrap;
cursor: pointer;
user-select: none;
}
.set-section-divider:hover {
background: rgba(15, 20, 30, 0.85);
}
.set-section-divider--complete {
border-color: rgba(108, 255, 143, 0.35);
background: linear-gradient(145deg, rgba(108, 255, 143, 0.08) 0%, rgba(108, 255, 143, 0.02) 100%);
}
.set-section-divider--complete:hover {
background: linear-gradient(145deg, rgba(108, 255, 143, 0.12) 0%, rgba(108, 255, 143, 0.04) 100%);
}
.set-section-divider--partial {
border-color: rgba(255, 193, 7, 0.3);
background: linear-gradient(145deg, rgba(255, 193, 7, 0.06) 0%, rgba(255, 193, 7, 0.01) 100%);
}
.set-section-divider--partial:hover {
background: linear-gradient(145deg, rgba(255, 193, 7, 0.1) 0%, rgba(255, 193, 7, 0.03) 100%);
}
.set-section-divider--empty {
border-color: rgba(255, 255, 255, 0.05);
background: rgba(255, 255, 255, 0.015);
opacity: 0.7;
}
.set-section-divider__image {
width: 44px;
height: 44px;
border-radius: 10px;
object-fit: cover;
flex-shrink: 0;
background: rgba(255, 255, 255, 0.05);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.set-section-divider__image-placeholder {
width: 44px;
height: 44px;
border-radius: 10px;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.set-section-divider__image-placeholder svg {
width: 22px;
height: 22px;
color: rgba(255, 255, 255, 0.2);
}
.set-section-divider__info {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.set-section-divider__name {
font-size: 0.95rem;
font-weight: 600;
color: #fff;
white-space: nowrap;
}
.set-section-divider__status {
font-size: 0.65rem;
font-weight: 600;
padding: 2px 8px;
border-radius: 8px;
text-transform: uppercase;
letter-spacing: 0.5px;
display: inline-block;
width: fit-content;
}
.set-section-divider__status--complete {
background: rgba(108, 255, 143, 0.2);
color: var(--primary-color, #6cff8f);
}
.set-section-divider__status--partial {
background: rgba(255, 193, 7, 0.2);
color: #FFC107;
}
.set-section-divider__status--empty {
background: rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.4);
}
.set-section-divider__traits {
display: flex;
flex-wrap: wrap;
gap: 6px;
flex: 1;
min-width: 0;
}
.set-trait-pill {
font-size: 0.7rem;
padding: 3px 8px;
border-radius: 6px;
white-space: nowrap;
font-weight: 500;
}
.set-trait-pill--matched {
background: rgba(108, 255, 143, 0.15);
color: rgba(108, 255, 143, 0.9);
border: 1px solid rgba(108, 255, 143, 0.2);
}
.set-trait-pill--missing {
background: rgba(255, 255, 255, 0.04);
color: rgba(255, 255, 255, 0.35);
border: 1px solid rgba(255, 255, 255, 0.08);
}
.set-trait-pill--available {
background: rgba(255, 193, 7, 0.12);
color: rgba(255, 193, 7, 0.9);
border: 1px solid rgba(255, 193, 7, 0.2);
}
.set-section-divider__right {
display: flex;
align-items: center;
gap: 10px;
margin-left: auto;
flex-shrink: 0;
}
.set-section-divider__bonus {
display: flex;
align-items: center;
gap: 4px;
font-size: 0.8rem;
font-weight: 600;
color: var(--primary-color, #6cff8f);
white-space: nowrap;
}
.set-section-divider__bonus img {
width: 16px;
height: 16px;
border-radius: 50%;
}
.set-section-divider__collapse {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 6px;
background: rgba(255, 255, 255, 0.06);
border: none;
cursor: pointer;
color: rgba(255, 255, 255, 0.5);
transition: all 0.2s ease;
flex-shrink: 0;
}
.set-section-divider__collapse:hover {
background: rgba(255, 255, 255, 0.12);
color: rgba(255, 255, 255, 0.8);
}
.set-section-divider__collapse svg {
width: 14px;
height: 14px;
transition: transform 0.2s ease;
}
.set-section-divider__collapse.collapsed svg {
transform: rotate(-90deg);
}

/* Set requirement placeholder card */
.set-req-placeholder {
background: rgba(10, 14, 20, 0.5);
border: 2px dashed rgba(255, 255, 255, 0.12);
border-radius: 16px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px 12px;
text-align: center;
min-height: 200px;
gap: 8px;
}
.set-group--complete .set-req-placeholder {
border-color: rgba(108, 255, 143, 0.15);
}
.set-group--partial .set-req-placeholder {
border-color: rgba(255, 193, 7, 0.15);
}
.set-req-placeholder__icon {
width: 36px;
height: 36px;
opacity: 0.25;
color: rgba(255, 255, 255, 0.5);
}
.set-req-placeholder__trait {
font-size: 0.75rem;
font-weight: 600;
color: rgba(255, 255, 255, 0.4);
}
.set-req-placeholder__label {
font-size: 0.65rem;
color: rgba(255, 255, 255, 0.25);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.set-req-placeholder__label--available {
color: rgba(255, 193, 7, 0.7);
font-weight: 600;
}

/* Other NFTs section */
.set-section-other {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 16px;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.06);
background: rgba(10, 14, 20, 0.75);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
color: rgba(255, 255, 255, 0.5);
font-size: 0.85rem;
font-weight: 500;
cursor: pointer;
user-select: none;
}
.set-section-other:hover {
background: rgba(15, 20, 30, 0.85);
}
.set-section-other svg {
width: 18px;
height: 18px;
opacity: 0.4;
}
.set-section-other__collapse {
margin-left: auto;
display: flex;
align-items: center;
color: rgba(255, 255, 255, 0.4);
transition: transform 0.2s ease;
}
.set-section-other__collapse.collapsed svg {
transform: rotate(-90deg);
}
.set-section-other__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
gap: 1rem;
margin-top: 8px;
}

@media (max-width: 768px) {
.set-section-divider {
padding: 10px 12px;
gap: 10px;
}
.set-section-divider__image,
.set-section-divider__image-placeholder {
width: 36px;
height: 36px;
border-radius: 8px;
}
.set-section-divider__image-placeholder svg {
width: 18px;
height: 18px;
}
.set-section-divider__name {
font-size: 0.85rem;
}
.set-section-divider__traits {
gap: 4px;
}
.set-trait-pill {
font-size: 0.6rem;
padding: 2px 6px;
}
.set-section-divider__bonus {
font-size: 0.7rem;
}
.set-group__border {
padding: 8px;
}
.set-group__grid,
.set-section-other__grid {
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 0.5rem;
}
.set-req-placeholder {
min-height: 150px;
padding: 12px 8px;
}
.set-manage-clear-btn {
font-size: 0.7rem;
padding: 4px 10px;
}
.set-unassigned-filter {
flex-direction: column;
gap: 6px;
}
.set-unassigned-filter select {
max-width: 100%;
}
.nft-card.manage-mode .nft-card-info {
padding: 0.4rem;
}
}

/* Tools Button & Dropdown - Icon Only */
.tools-dropdown {
position: relative;
display: none;
}
.tools-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 2px;
width: 36px;
height: 36px;
padding: 0;
background: linear-gradient(135deg, rgba(153, 69, 255, 0.15), rgba(20, 241, 149, 0.1));
border: 1px solid rgba(153, 69, 255, 0.3);
border-radius: 8px;
color: #9945FF;
cursor: pointer;
transition: all 0.2s;
text-decoration: none;
}
.tools-btn:hover {
background: linear-gradient(135deg, rgba(153, 69, 255, 0.25), rgba(20, 241, 149, 0.2));
border-color: rgba(153, 69, 255, 0.5);
transform: translateY(-1px);
}
.tools-btn svg {
flex-shrink: 0;
}
.tools-btn .tools-arrow {
width: 10px;
height: 10px;
margin-left: -2px;
}
.tools-menu {
display: none;
position: absolute;
top: calc(100% + 8px);
right: 0;
min-width: 200px;
background: rgba(20, 20, 30, 0.98);
border: 1px solid rgba(153, 69, 255, 0.3);
border-radius: 10px;
padding: 8px 0;
z-index: 1000;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
.tools-menu.active {
display: block;
}
.tools-menu-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 16px;
color: rgba(255, 255, 255, 0.9);
cursor: pointer;
transition: all 0.2s;
font-size: 0.9rem;
}
.tools-menu-item:hover {
background: rgba(153, 69, 255, 0.2);
color: #fff;
}
.tools-menu-item svg {
width: 18px;
height: 18px;
opacity: 0.7;
}
.tools-menu-empty {
padding: 12px 16px;
color: rgba(255, 255, 255, 0.5);
font-size: 0.85rem;
text-align: center;
}

/* Tool Modal/Overlay */
.tool-modal-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.9);
z-index: 2000;
justify-content: center;
align-items: center;
}
.tool-modal-overlay.active {
display: flex;
}
.tool-modal {
width: 95%;
max-width: 1200px;
height: 90vh;
background: #0a0a0a;
border-radius: 16px;
border: 1px solid rgba(153, 69, 255, 0.3);
display: flex;
flex-direction: column;
overflow: hidden;
}
.tool-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
background: rgba(153, 69, 255, 0.1);
border-bottom: 1px solid rgba(153, 69, 255, 0.2);
}
.tool-modal-title {
color: #fff;
font-size: 1.1rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 10px;
}
.tool-modal-close {
background: rgba(255, 255, 255, 0.1);
border: none;
color: #fff;
width: 32px;
height: 32px;
border-radius: 8px;
cursor: pointer;
font-size: 1.25rem;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
}
.tool-modal-close:hover {
background: rgba(255, 255, 255, 0.2);
}
.tool-modal-content {
flex: 1;
overflow: hidden;
}
.tool-modal-content iframe {
width: 100%;
height: 100%;
border: none;
}

.connect-btn {
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
color: #000;
border: none;
padding: 0.75rem 1.5rem;
border-radius: 10px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
}

.connect-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 20px rgba(108, 255, 143, 0.4);
}

.connect-btn.connected {
background: transparent;
border: 1px solid var(--primary-color);
color: var(--primary-color);
font-family: monospace;
}

.connect-btn.connected:hover {
background: rgba(255, 255, 255, 0.05);
box-shadow: 0 4px 20px rgba(108, 255, 143, 0.2);
}

/* Main Content */
.main {
max-width: 1400px;
margin: 0 auto;
padding: 2rem;
}

/* Stats Bar Compact */
.stats-bar-compact {
display: flex;
align-items: stretch;
gap: 0.5rem;
padding: 0.75rem;
background: rgba(0, 0, 0, var(--stats-bar-opacity, 0.05));
border-radius: 12px;
margin-bottom: 1rem;
overflow: visible;
position: relative;
z-index: 50;
}

.nftstake-wallet-data-shell {
position: relative;
min-height: 320px;
}
.nftstake-nft-gate-overlay {
position: absolute;
inset: 0;
z-index: 60;
display: none;
align-items: flex-start;
justify-content: center;
padding: 2.5rem 1.25rem 2rem;
background: rgba(8, 8, 10, 0.94);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-radius: 12px;
box-sizing: border-box;
}
.nftstake-nft-gate-overlay.nftstake-nft-gate--open {
display: flex;
}
.nftstake-nft-gate-card {
max-width: 440px;
text-align: center;
padding: 1.25rem 1rem;
}
.nftstake-nft-gate-card h3 {
margin: 0 0 1rem 0;
font-size: 1.15rem;
font-weight: 700;
color: #fff;
}
.nftstake-auth-gate-btn {
padding: 10px 22px;
border-radius: 8px;
border: none;
background: #7c3aed;
color: #fff;
font-weight: 600;
font-size: 0.9rem;
cursor: pointer;
white-space: nowrap;
}
.nftstake-auth-gate-btn:hover {
background: #6d28d9;
}

.stat-box {
background: rgba(0, 0, 0, 0.2);
border-radius: 8px;
padding: 0.6rem 1rem;
position: relative;
overflow: visible;
}

.stat-box-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
margin-bottom: 0.4rem;
}

.stat-box-label {
font-size: 0.7rem;
color: rgba(255, 255, 255, 0.5);
text-transform: uppercase;
letter-spacing: 0.5px;
}

.stat-box-value {
font-size: 0.95rem;
font-weight: 600;
color: var(--primary-color);
}

/* Progress Bar Box */
.stat-progress-box {
min-width: 200px;
transition: all 0.2s ease;
}

.stat-progress-box:hover {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.15);
transform: translateY(-1px);
}

.stat-progress-bar {
height: 6px;
background: rgba(255, 255, 255, 0.1);
border-radius: 3px;
overflow: hidden;
}

.stat-progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
border-radius: 3px;
transition: width 0.3s ease;
}

.stat-staked-value {
display: flex;
align-items: center;
gap: 0.35rem;
margin-top: 0.2rem;
margin-bottom: 0.35rem;
}

.stat-staked-total {
font-size: 0.85rem;
color: rgba(255, 255, 255, 0.5);
font-weight: 500;
}

.stat-staked-percent {
font-size: 0.65rem;
color: rgba(255, 255, 255, 0.5);
background: rgba(255, 255, 255, 0.1);
padding: 2px 6px;
border-radius: 4px;
margin-left: 0.25rem;
}

/* Dropdown Boxes */
.stat-dropdown-box {
cursor: pointer;
min-width: 200px;
transition: all 0.2s ease;
position: relative;
z-index: 1;
}

/* Hover state for interactive feedback */
.stat-dropdown-box:hover {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.15);
transform: translateY(-1px);
z-index: 100;
}

/* Show dropdown on hover (desktop only) */
@media (min-width: 769px) {
.stat-dropdown-box:hover .stat-dropdown-content {
display: block;
}

.stat-dropdown-box:hover .stat-dropdown-arrow {
transform: translateY(-50%) rotate(180deg);
}
}

.stat-dropdown-trigger {
display: flex;
flex-direction: column;
align-items: flex-start;
position: relative;
}

.stat-dropdown-primary {
display: flex;
align-items: center;
gap: 0.35rem;
margin-top: 0.2rem;
}

.stat-dropdown-primary img {
width: 16px;
height: 16px;
border-radius: 50%;
}

.stat-token-amount {
font-size: 0.95rem;
font-weight: 600;
color: var(--primary-color);
}

.stat-multi-indicator {
font-size: 0.7rem;
color: rgba(255, 255, 255, 0.5);
background: rgba(255, 255, 255, 0.1);
padding: 0.1rem 0.3rem;
border-radius: 4px;
margin-left: 0.25rem;
}

.stat-dropdown-arrow {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
color: rgba(255, 255, 255, 0.4);
transition: transform 0.2s ease;
}

.stat-dropdown-box.open .stat-dropdown-arrow {
transform: translateY(-50%) rotate(180deg);
}

.stat-dropdown-content {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: rgba(30, 30, 40, 0.98);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
padding: 0.6rem;
margin-top: 0.4rem;
z-index: 500;
min-width: 150px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.stat-dropdown-box.open .stat-dropdown-content {
display: block;
}

.stat-dropdown-content .token-row {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.4rem 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.stat-dropdown-content .token-row:last-child {
border-bottom: none;
}

.stat-dropdown-content .token-row img {
width: 18px;
height: 18px;
border-radius: 50%;
}

.stat-dropdown-content .token-row .token-symbol {
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.6);
flex: 1;
}

.stat-dropdown-content .token-row .token-value {
font-size: 0.85rem;
font-weight: 600;
color: var(--primary-color);
}

/* Claim Button in Dropdown */
.claim-btn-compact {
width: 100%;
margin-top: 0.5rem;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
color: #000;
border: none;
padding: 0.5rem 1rem;
border-radius: 6px;
font-weight: 600;
font-size: 0.8rem;
cursor: pointer;
transition: all 0.2s;
}

.claim-btn-compact:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: 0 2px 10px rgba(108, 255, 143, 0.3);
}

.claim-btn-compact:disabled {
opacity: 0.6;
cursor: not-allowed;
}

/* Simple Box (Your Staked) */
.stat-simple-box {
display: flex;
flex-direction: column;
justify-content: center;
min-width: 80px;
}

.stat-simple-box .stat-box-value {
margin-top: 0.2rem;
}

/* Stats Row - container for stats bar and action buttons */
.stats-row {
display: flex;
align-items: stretch;
gap: 0.75rem;
margin-bottom: 0.5rem;
overflow: visible;
}

.stats-bar-compact {
flex: 1;
}

.stats-actions {
display: flex;
align-items: center;
gap: 0.5rem;
}

/* Inline Sets Button */
.sets-btn-inline {
display: flex;
align-items: center;
gap: 0.4rem;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
color: var(--primary-color);
padding: 0.5rem 0.75rem;
border-radius: 8px;
cursor: pointer;
font-size: 0.8rem;
font-weight: 500;
transition: all 0.2s;
height: 100%;
}

.sets-btn-inline:hover {
background: rgba(255, 255, 255, 0.1);
border-color: var(--primary-color);
}

.sets-btn-inline .sets-icon {
width: 16px;
height: 16px;
}

.sets-btn-inline .sets-btn__badge {
background: var(--primary-color);
color: #000;
padding: 0.15rem 0.4rem;
border-radius: 4px;
font-size: 0.7rem;
font-weight: 600;
}

/* Inline Security Button */
.security-btn-inline {
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.6);
padding: 0.5rem;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s;
position: relative;
width: 38px;
height: 100%;
}

.security-btn-inline:hover {
background: rgba(255, 255, 255, 0.1);
color: var(--primary-color);
}

.security-btn-inline .security-icon {
width: 18px;
height: 18px;
}

.security-btn-inline.enabled {
color: var(--primary-color);
border-color: rgba(108, 255, 143, 0.3);
}

.security-status-dot-inline {
position: absolute;
top: 4px;
right: 4px;
width: 6px;
height: 6px;
border-radius: 50%;
background: #ff6b6b;
}

.security-btn-inline.enabled .security-status-dot-inline {
background: var(--primary-color);
}

/* Stat Divider (vertical line inside stats card) */
.stat-divider {
width: 1px;
background: rgba(255, 255, 255, 0.1);
margin: 0 0.25rem;
align-self: stretch;
}

/* Stat Action Buttons (inside stats card) */
.stat-action-btn {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 0.5rem;
background: rgba(0, 0, 0, 0.2);
border: none;
color: rgba(255, 255, 255, 0.6);
padding: 0.5rem 1rem;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s;
position: relative;
min-width: 100px;
}

.stat-action-btn:hover {
background: rgba(255, 255, 255, 0.1);
color: var(--primary-color);
}

.stat-action-btn svg {
color: inherit;
flex-shrink: 0;
}

.stat-action-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.3px;
opacity: 0.7;
white-space: nowrap;
}

.stat-action-badge {
background: var(--primary-color);
color: #000;
padding: 0.15rem 0.4rem;
border-radius: 4px;
font-size: 0.65rem;
font-weight: 600;
white-space: nowrap;
}

/* Trait Sets Button - Featured Highlight */
.stat-action-btn.trait-sets-btn {
background: linear-gradient(135deg, rgba(108, 255, 143, 0.15), rgba(255, 193, 7, 0.15));
border: 1px solid rgba(108, 255, 143, 0.3);
min-width: 140px;
padding: 0.5rem 0.75rem;
}

.stat-action-btn.trait-sets-btn:hover {
background: linear-gradient(135deg, rgba(108, 255, 143, 0.25), rgba(255, 193, 7, 0.25));
border-color: var(--primary-color);
box-shadow: 0 0 12px rgba(108, 255, 143, 0.3);
}

.stat-action-btn.trait-sets-btn .stat-action-label {
color: var(--primary-color);
opacity: 1;
font-weight: 600;
font-size: 0.6rem;
letter-spacing: 0.5px;
}

.stat-action-btn.trait-sets-btn svg {
color: var(--primary-color);
}

/* Bonuses Button - Gold/Yellow Highlight */
.stat-action-btn.bonuses-btn {
background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(255, 165, 0, 0.1));
border: 1px solid rgba(255, 215, 0, 0.3);
min-width: 110px;
padding: 0.5rem 0.75rem;
}

.stat-action-btn.bonuses-btn:hover {
background: linear-gradient(135deg, rgba(255, 215, 0, 0.25), rgba(255, 165, 0, 0.2));
border-color: rgba(255, 215, 0, 0.5);
box-shadow: 0 0 12px rgba(255, 215, 0, 0.3);
}

.stat-action-btn.bonuses-btn .stat-action-label {
color: #ffd700;
opacity: 1;
font-weight: 600;
font-size: 0.6rem;
letter-spacing: 0.5px;
}

.stat-action-btn.bonuses-btn svg {
color: #ffd700;
}

/* Missions Button - Purple/Magenta Highlight */
.stat-action-btn.missions-btn {
background: linear-gradient(135deg, rgba(168, 85, 247, 0.15), rgba(139, 92, 246, 0.1));
border: 1px solid rgba(168, 85, 247, 0.3);
min-width: 110px;
padding: 0.5rem 0.75rem;
display: none;
}

.stat-action-btn.missions-btn.active {
display: flex;
}

.stat-action-btn.missions-btn:hover {
background: linear-gradient(135deg, rgba(168, 85, 247, 0.25), rgba(139, 92, 246, 0.2));
border-color: rgba(168, 85, 247, 0.5);
box-shadow: 0 0 12px rgba(168, 85, 247, 0.3);
}

.stat-action-btn.missions-btn .stat-action-label {
color: #a855f7;
opacity: 1;
font-weight: 600;
font-size: 0.6rem;
letter-spacing: 0.5px;
}

.stat-action-btn.missions-btn svg {
color: #a855f7;
}

.missions-count-badge {
position: absolute;
top: -4px;
right: -4px;
background: linear-gradient(135deg, #a855f7, #8b5cf6);
color: #fff;
font-size: 0.55rem;
font-weight: 700;
padding: 2px 5px;
border-radius: 10px;
min-width: 16px;
text-align: center;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Missions Iframe Overlay */
.missions-iframe-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.9);
z-index: 10000;
justify-content: center;
align-items: center;
}
.missions-iframe-overlay.open {
display: flex;
}
.missions-modal {
width: 95%;
max-width: 1200px;
height: 90vh;
background: #0a0a0a;
border-radius: 16px;
border: 1px solid rgba(153, 69, 255, 0.3);
display: flex;
flex-direction: column;
overflow: hidden;
}
.missions-iframe-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
background: rgba(153, 69, 255, 0.1);
border-bottom: 1px solid rgba(153, 69, 255, 0.2);
}
.missions-iframe-header h3 {
color: #fff;
font-size: 1.1rem;
font-weight: 600;
margin: 0;
display: flex;
align-items: center;
gap: 10px;
}
.missions-iframe-close {
background: rgba(255, 255, 255, 0.1);
border: none;
color: #fff;
width: 32px;
height: 32px;
border-radius: 8px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
transition: all 0.2s;
}
.missions-iframe-close:hover {
background: rgba(255, 255, 255, 0.2);
}
.missions-iframe-loading {
display: flex;
align-items: center;
justify-content: center;
flex: 1;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
}
.missions-iframe-loading .spinner {
width: 40px;
height: 40px;
border: 3px solid rgba(153, 69, 255, 0.2);
border-top-color: #9945ff;
border-radius: 50%;
animation: spin 1s linear infinite;
}
.missions-iframe-content {
flex: 1;
overflow: hidden;
position: relative;
}
.missions-iframe {
width: 100%;
height: 100%;
border: none;
position: relative;
z-index: 2;
background: transparent;
}

/* Airdrops Button - Cyan/Blue Highlight */
.stat-action-btn.airdrops-btn {
background: linear-gradient(135deg, rgba(34, 211, 238, 0.15), rgba(59, 130, 246, 0.1));
border: 1px solid rgba(34, 211, 238, 0.3);
min-width: 120px;
padding: 0.5rem 0.75rem;
position: relative;
display: none;
}

.stat-action-btn.airdrops-btn:hover {
background: linear-gradient(135deg, rgba(34, 211, 238, 0.25), rgba(59, 130, 246, 0.2));
border-color: rgba(34, 211, 238, 0.5);
box-shadow: 0 0 12px rgba(34, 211, 238, 0.3);
}

.stat-action-btn.airdrops-btn .stat-action-label {
color: #22d3ee;
opacity: 1;
font-weight: 600;
font-size: 0.6rem;
letter-spacing: 0.5px;
}

.stat-action-btn.airdrops-btn svg {
color: #22d3ee;
}

.stat-action-btn.airdrops-btn .airdrops-count-badge {
position: absolute;
top: -6px;
right: -6px;
background: linear-gradient(135deg, #22d3ee, #3b82f6);
color: #000;
font-size: 0.65rem;
font-weight: 700;
padding: 2px 6px;
border-radius: 10px;
min-width: 18px;
text-align: center;
}

/* Revshare Pills (in collection tabs nav bar) */
.revshare-pills-container {
display: none;
align-items: center;
gap: 6px;
padding: 0 0.75rem;
flex-shrink: 0;
margin-left: auto;
}
.revshare-pills-container.visible {
display: flex;
}
.revshare-label {
font-size: 0.55rem;
font-weight: 700;
color: #10b981;
text-transform: uppercase;
letter-spacing: 0.5px;
white-space: nowrap;
opacity: 0.8;
}
.revshare-pill {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
background: linear-gradient(135deg, rgba(16,185,129,0.1), rgba(16,185,129,0.04));
border: 1px solid rgba(16,185,129,0.25);
border-radius: 8px;
cursor: pointer;
transition: all 0.2s ease;
white-space: nowrap;
position: relative;
}
.revshare-pill:hover {
background: linear-gradient(135deg, rgba(16,185,129,0.2), rgba(16,185,129,0.1));
border-color: rgba(16,185,129,0.5);
box-shadow: 0 0 10px rgba(16,185,129,0.15);
}
.revshare-pill-img {
width: 16px;
height: 16px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
}
.revshare-pill-name {
display: none;
}
.revshare-mobile-toggle,
.revshare-mobile-pills,
.revshare-mobile-detail {
display: none;
}
.revshare-pill-amount {
font-size: 0.75rem;
font-weight: 700;
color: #6ee7b7;
}
.revshare-pill-dropdown {
display: none;
position: absolute;
top: 100%;
right: 0;
margin-top: 6px;
background: rgba(15, 15, 25, 0.95);
border: 1px solid rgba(16,185,129,0.25);
border-radius: 10px;
padding: 10px 14px;
min-width: 260px;
z-index: 100;
backdrop-filter: blur(12px);
box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.revshare-pill:hover .revshare-pill-dropdown {
display: flex;
gap: 12px;
align-items: flex-start;
}
.rpd-info { flex: 1; min-width: 0; }
.rpd-info .rpd-name {
font-size: 0.8rem;
font-weight: 600;
color: #fff;
margin-bottom: 4px;
}
.rpd-info .rpd-row {
font-size: 0.7rem;
color: rgba(255,255,255,0.5);
margin-bottom: 2px;
}
.rpd-info .rpd-row span {
color: rgba(255,255,255,0.8);
font-weight: 600;
}
.rpd-image {
width: 56px;
height: 56px;
border-radius: 8px;
object-fit: cover;
flex-shrink: 0;
}

/* Leaderboard Button */
.stat-action-btn.leaderboard-btn {
background: rgba(250, 204, 21, 0.1);
border: 1px solid rgba(250, 204, 21, 0.3);
color: #facc15;
position: relative;
}

.stat-action-btn.leaderboard-btn:hover {
background: rgba(250, 204, 21, 0.2);
border-color: rgba(250, 204, 21, 0.5);
transform: translateY(-1px);
}

.stat-action-btn.leaderboard-btn .stat-action-label {
color: rgba(250, 204, 21, 0.9);
font-size: 0.65rem;
font-weight: 600;
letter-spacing: 0.5px;
}

.stat-action-btn.leaderboard-btn svg {
color: #facc15;
}

.stat-action-btn.leaderboard-btn .leaderboard-rank-badge {
position: absolute;
top: -6px;
right: -6px;
background: linear-gradient(135deg, #facc15, #f59e0b);
color: #000;
font-size: 0.6rem;
font-weight: 700;
padding: 2px 5px;
border-radius: 8px;
min-width: 20px;
text-align: center;
}

/* Rev Share action button */
.stat-action-btn.revshare-btn {
background: rgba(16, 185, 129, 0.1);
border: 1px solid rgba(16, 185, 129, 0.3);
color: #10b981;
position: relative;
}
.stat-action-btn.revshare-btn:hover {
background: rgba(16, 185, 129, 0.2);
border-color: rgba(16, 185, 129, 0.5);
transform: translateY(-1px);
}
.stat-action-btn.revshare-btn .stat-action-label {
color: rgba(16, 185, 129, 0.9);
font-size: 0.65rem;
font-weight: 600;
letter-spacing: 0.5px;
}
.stat-action-btn.revshare-btn svg {
color: #10b981;
}

/* Rev Share Mobile Modal */
.revshare-modal-overlay {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0, 0, 0, 0.7);
z-index: 1000;
display: none;
align-items: flex-end;
justify-content: center;
backdrop-filter: blur(4px);
}
.revshare-modal-overlay.active { display: flex; }
.revshare-modal {
background: rgba(20, 20, 30, 0.98);
border: 1px solid rgba(16, 185, 129, 0.2);
border-radius: 16px 16px 0 0;
padding: 16px;
width: 100%;
max-width: 500px;
max-height: 60vh;
overflow-y: auto;
}
.revshare-modal-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
}
.revshare-modal-title {
font-size: 0.9rem;
font-weight: 700;
color: #10b981;
}
.revshare-modal-close {
background: none;
border: none;
color: rgba(255,255,255,0.5);
cursor: pointer;
font-size: 1.2rem;
padding: 4px;
}
.revshare-modal-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px;
background: rgba(16, 185, 129, 0.05);
border: 1px solid rgba(16, 185, 129, 0.15);
border-radius: 10px;
margin-bottom: 8px;
}
.revshare-modal-item img {
width: 36px;
height: 36px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
}
.revshare-modal-item-info { flex: 1; min-width: 0; }
.revshare-modal-item-name {
font-size: 0.8rem;
font-weight: 600;
color: #fff;
}
.revshare-modal-item-detail {
font-size: 0.65rem;
color: rgba(255,255,255,0.5);
margin-top: 2px;
}
.revshare-modal-item-detail span { color: rgba(255,255,255,0.8); font-weight: 600; }
.revshare-modal-item-amount {
font-size: 1rem;
font-weight: 700;
color: #6ee7b7;
white-space: nowrap;
}

/* Leaderboard Modal */
.leaderboard-modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.85);
backdrop-filter: blur(4px);
z-index: 1000;
display: none;
justify-content: center;
align-items: center;
padding: 1rem;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}

.leaderboard-modal-overlay.active {
display: flex;
}

.leaderboard-modal {
background: rgba(20, 20, 25, 0.98);
border: 1px solid rgba(250, 204, 21, 0.3);
border-radius: 16px;
max-width: 550px;
width: 100%;
max-height: 85vh;
overflow: hidden;
display: flex;
flex-direction: column;
}

.leaderboard-modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.25rem 1.5rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.leaderboard-modal-header h3 {
margin: 0;
font-size: 1.25rem;
font-weight: 600;
color: #facc15;
display: flex;
align-items: center;
gap: 0.5rem;
}

.leaderboard-modal-header h3 svg {
width: 22px;
height: 22px;
}

.leaderboard-close-btn {
background: transparent;
border: none;
color: rgba(255, 255, 255, 0.5);
cursor: pointer;
padding: 0.5rem;
border-radius: 8px;
transition: all 0.2s;
}

.leaderboard-close-btn:hover {
background: rgba(255, 255, 255, 0.1);
color: #fff;
}

.leaderboard-tabs {
display: flex;
padding: 0 1rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.leaderboard-tab {
background: transparent;
border: none;
color: rgba(255, 255, 255, 0.5);
padding: 0.75rem 1rem;
cursor: pointer;
font-size: 0.85rem;
font-weight: 500;
border-bottom: 2px solid transparent;
transition: all 0.2s;
}

.leaderboard-tab:hover {
color: rgba(255, 255, 255, 0.8);
}

.leaderboard-tab.active {
color: #facc15;
border-bottom-color: #facc15;
}

.leaderboard-content {
flex: 1;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
padding: 1rem;
}

.leaderboard-list {
display: flex;
flex-direction: column;
gap: 0.5rem;
}

.leaderboard-pagination {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
padding: 0.75rem 0 0.25rem;
margin-top: 0.5rem;
}

.leaderboard-page-btn {
display: flex;
align-items: center;
gap: 0.35rem;
padding: 0.45rem 0.9rem;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
color: #fff;
font-size: 0.8rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
}

.leaderboard-page-btn:hover:not(:disabled) {
background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.2);
}

.leaderboard-page-btn:disabled {
opacity: 0.3;
cursor: default;
}

.leaderboard-page-info {
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.5);
font-variant-numeric: tabular-nums;
}

.leaderboard-row {
display: grid;
grid-template-columns: 40px 1fr auto;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 1rem;
background: rgba(255, 255, 255, 0.03);
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.05);
transition: all 0.2s;
}

.leaderboard-row:hover {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.1);
}

.leaderboard-row.current-user {
background: rgba(250, 204, 21, 0.1);
border-color: rgba(250, 204, 21, 0.3);
}

.leaderboard-row.top-1 .leaderboard-rank {
background: linear-gradient(135deg, #ffd700, #ffb300);
color: #000;
}

.leaderboard-row.top-2 .leaderboard-rank {
background: linear-gradient(135deg, #c0c0c0, #a8a8a8);
color: #000;
}

.leaderboard-row.top-3 .leaderboard-rank {
background: linear-gradient(135deg, #cd7f32, #b5651d);
color: #fff;
}

.leaderboard-rank {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 0.85rem;
color: rgba(255, 255, 255, 0.7);
background: rgba(255, 255, 255, 0.1);
border-radius: 8px;
}

.leaderboard-user {
display: flex;
align-items: center;
gap: 0.75rem;
min-width: 0;
}

.leaderboard-avatar {
width: 36px;
height: 36px;
border-radius: 8px;
object-fit: cover;
background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.3), rgba(var(--primary-rgb), 0.1));
flex-shrink: 0;
}

.leaderboard-user-info {
min-width: 0;
}

.leaderboard-name {
font-weight: 600;
font-size: 0.9rem;
color: #fff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.leaderboard-wallet {
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.4);
font-family: monospace;
}

.leaderboard-nfts {
text-align: center;
padding: 0 0.5rem;
}

.leaderboard-nfts-value {
font-weight: 600;
font-size: 0.9rem;
color: #fff;
}

.leaderboard-nfts-label {
font-size: 0.65rem;
color: rgba(255, 255, 255, 0.4);
text-transform: uppercase;
}

.leaderboard-points {
text-align: right;
min-width: 70px;
}

.leaderboard-points-value {
font-weight: 700;
font-size: 1rem;
color: #facc15;
}

.leaderboard-points-label {
font-size: 0.65rem;
color: rgba(255, 255, 255, 0.4);
text-transform: uppercase;
}

/* Top 3 Podium */
.leaderboard-podium {
display: flex;
align-items: flex-end;
justify-content: center;
gap: 0.75rem;
padding: 1.25rem 0.5rem 1rem;
margin-bottom: 0.75rem;
}

.podium-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.4rem;
padding: 0.75rem 0.5rem 0.6rem;
border-radius: 12px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
width: 110px;
transition: all 0.2s;
position: relative;
}

.podium-card { cursor: pointer; }

.podium-card:hover {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.15);
}

.podium-card.podium-1 {
order: 2;
border-color: rgba(255, 215, 0, 0.3);
background: rgba(255, 215, 0, 0.06);
padding-bottom: 1rem;
}

.podium-card.podium-2 {
order: 1;
border-color: rgba(192, 192, 192, 0.25);
background: rgba(192, 192, 192, 0.04);
}

.podium-card.podium-3 {
order: 3;
border-color: rgba(205, 127, 50, 0.25);
background: rgba(205, 127, 50, 0.04);
}

.podium-medal {
font-size: 1.3rem;
line-height: 1;
}

.podium-card.podium-1 .podium-medal {
font-size: 1.6rem;
}

.podium-avatar {
width: 44px;
height: 44px;
border-radius: 10px;
object-fit: cover;
flex-shrink: 0;
}

.podium-card.podium-1 .podium-avatar {
width: 56px;
height: 56px;
border-radius: 12px;
}

.podium-name {
font-weight: 600;
font-size: 0.8rem;
color: #fff;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
}

.podium-points {
font-weight: 700;
font-size: 0.85rem;
color: #facc15;
}

.podium-card.podium-1 .podium-points {
font-size: 1rem;
}

/* Points progress bar on rows */
.leaderboard-points-bar {
height: 3px;
background: rgba(255, 255, 255, 0.06);
border-radius: 2px;
margin-top: 3px;
overflow: hidden;
}

.leaderboard-points-fill {
height: 100%;
background: linear-gradient(90deg, rgba(250, 204, 21, 0.5), rgba(250, 204, 21, 0.25));
border-radius: 2px;
transition: width 0.4s ease;
}

/* Jump to rank button */
.leaderboard-jump-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
margin-top: 0.5rem;
padding: 0.4rem 0.75rem;
background: rgba(250, 204, 21, 0.1);
border: 1px solid rgba(250, 204, 21, 0.25);
border-radius: 8px;
color: #facc15;
font-size: 0.8rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
width: 100%;
}

.leaderboard-jump-btn:hover {
background: rgba(250, 204, 21, 0.18);
border-color: rgba(250, 204, 21, 0.4);
}

/* Leaderboard profile expansion */
.leaderboard-row { cursor: pointer; }

.lb-profile-panel {
padding: 0.75rem 1rem;
background: rgba(0, 0, 0, 0.25);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 10px;
margin-top: -0.25rem;
margin-bottom: 0.25rem;
animation: lbPanelSlide 0.2s ease;
}

@keyframes lbPanelSlide {
from { opacity: 0; max-height: 0; }
to { opacity: 1; max-height: 300px; }
}

.lb-profile-badges {
display: flex;
gap: 0.75rem;
overflow-x: auto;
padding: 0.5rem 0;
scrollbar-width: thin;
scrollbar-color: rgba(250, 204, 21, 0.3) transparent;
}

.lb-profile-badges::-webkit-scrollbar {
height: 6px;
}

.lb-profile-badges::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.05);
border-radius: 3px;
}

.lb-profile-badges::-webkit-scrollbar-thumb {
background: rgba(250, 204, 21, 0.25);
border-radius: 3px;
}

.lb-profile-badges::-webkit-scrollbar-thumb:hover {
background: rgba(250, 204, 21, 0.45);
}

.lb-profile-badge {
flex-shrink: 0;
text-align: center;
position: relative;
}

.lb-profile-badge-banner {
width: 260px;
height: 90px;
border-radius: 10px;
object-fit: cover;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
cursor: pointer;
transition: border-color 0.2s, transform 0.2s;
}

.lb-profile-badge-banner:hover {
border-color: rgba(250, 204, 21, 0.4);
transform: scale(1.03);
}

.lb-profile-badge-square {
width: 64px;
height: 64px;
border-radius: 10px;
object-fit: cover;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
cursor: pointer;
transition: border-color 0.2s, transform 0.2s;
}

.lb-profile-badge-square:hover {
border-color: rgba(250, 204, 21, 0.4);
transform: scale(1.05);
}

.lb-profile-badge-name {
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.7);
margin-top: 0.3rem;
max-width: 260px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

/* Badge lightbox */
.lb-badge-lightbox {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.85);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
cursor: pointer;
animation: lbLightboxFade 0.15s ease;
}

@keyframes lbLightboxFade {
from { opacity: 0; }
to { opacity: 1; }
}

.lb-badge-lightbox img {
max-width: 90vw;
max-height: 70vh;
border-radius: 14px;
object-fit: contain;
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
}

.lb-badge-lightbox-name {
position: absolute;
bottom: 12%;
left: 50%;
transform: translateX(-50%);
color: #fff;
font-size: 1.1rem;
font-weight: 600;
text-shadow: 0 2px 8px rgba(0,0,0,0.8);
white-space: nowrap;
}

.lb-profile-badge-count {
position: absolute;
top: 2px;
right: 2px;
background: rgba(250, 204, 21, 0.9);
color: #000;
font-weight: 700;
font-size: 0.6rem;
padding: 1px 5px;
border-radius: 4px;
}

.lb-profile-empty {
color: rgba(255, 255, 255, 0.35);
font-size: 0.8rem;
padding: 0.5rem 0;
}

.lb-profile-loading {
color: rgba(255, 255, 255, 0.4);
font-size: 0.8rem;
padding: 0.5rem 0;
}

@media (max-width: 480px) {
.podium-card { width: 90px; padding: 0.6rem 0.35rem 0.5rem; }
.podium-avatar { width: 36px; height: 36px; }
.podium-card.podium-1 .podium-avatar { width: 46px; height: 46px; }
.podium-name { font-size: 0.7rem; }
.podium-points { font-size: 0.75rem; }
.podium-card.podium-1 .podium-points { font-size: 0.85rem; }
.lb-profile-badge-banner { width: 180px; height: 63px; }
.lb-profile-badge-name { max-width: 180px; }
}

.leaderboard-empty {
text-align: center;
padding: 3rem 1rem;
color: rgba(255, 255, 255, 0.4);
}

.leaderboard-empty svg {
width: 48px;
height: 48px;
margin-bottom: 1rem;
opacity: 0.3;
}

/* Leaderboard Footer - User Stats */
.leaderboard-footer {
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding: 1rem 1.5rem;
background: rgba(0, 0, 0, 0.3);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
flex-shrink: 1;
}

.leaderboard-your-stats {
display: flex;
align-items: center;
gap: 1rem;
}

.leaderboard-your-avatar {
width: 44px;
height: 44px;
border-radius: 10px;
object-fit: cover;
background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.3), rgba(var(--primary-rgb), 0.1));
cursor: pointer;
transition: all 0.2s;
border: 2px solid transparent;
}

.leaderboard-your-avatar:hover {
border-color: rgba(250, 204, 21, 0.5);
}

.leaderboard-your-avatar-img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 8px;
}

.leaderboard-avatar-placeholder {
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(250, 204, 21, 0.3), rgba(250, 204, 21, 0.1));
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
}

.leaderboard-your-info {
flex: 1;
min-width: 0;
}

.leaderboard-your-name {
font-weight: 600;
font-size: 0.95rem;
color: #fff;
display: block;
}

.leaderboard-your-rank {
display: block;
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.5);
margin-top: 2px;
}

.leaderboard-edit-btn {
background: rgba(255, 255, 255, 0.1);
border: none;
color: rgba(255, 255, 255, 0.7);
padding: 0.4rem 0.75rem;
border-radius: 6px;
font-size: 0.8rem;
cursor: pointer;
transition: all 0.2s;
}

.leaderboard-edit-btn:hover {
background: rgba(255, 255, 255, 0.15);
color: #fff;
}

.leaderboard-your-points {
text-align: right;
font-weight: 700;
font-size: 1.1rem;
color: #facc15;
white-space: nowrap;
}

.leaderboard-hide-toggle {
display: flex;
align-items: center;
gap: 0.5rem;
margin-top: 0.75rem;
padding-top: 0.75rem;
border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.leaderboard-hide-toggle .toggle-label {
display: flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
}

.leaderboard-hide-toggle input[type="checkbox"] {
width: 16px;
height: 16px;
cursor: pointer;
accent-color: #facc15;
}

.leaderboard-hide-toggle .toggle-text {
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.5);
}

/* Profile Edit Section */
.profile-edit-section {
padding: 1rem;
background: rgba(0, 0, 0, 0.3);
border-top: 1px solid rgba(255, 255, 255, 0.1);
margin-top: 0.75rem;
}

.profile-edit-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
}

.profile-edit-header h4 {
margin: 0;
font-size: 0.95rem;
color: #fff;
}

.profile-edit-close {
background: transparent;
border: none;
color: rgba(255, 255, 255, 0.5);
cursor: pointer;
padding: 0.25rem;
}

.profile-edit-field {
margin-bottom: 1rem;
}

.profile-edit-field label {
display: block;
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.6);
margin-bottom: 0.4rem;
}

.profile-edit-field input {
width: 100%;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
padding: 0.6rem 0.8rem;
color: #fff;
font-size: 0.9rem;
}

.profile-edit-field input:focus {
outline: none;
border-color: rgba(250, 204, 21, 0.5);
}

.profile-pfp-options {
display: flex;
gap: 1rem;
margin-bottom: 0.75rem;
}

.profile-pfp-option {
display: flex;
align-items: center;
gap: 0.4rem;
cursor: pointer;
font-size: 0.85rem;
color: rgba(255, 255, 255, 0.7);
}

.profile-pfp-option input[type="radio"] {
accent-color: #facc15;
}

.profile-nft-grid {
display: flex;
flex-direction: column;
gap: 0.5rem;
max-height: 200px;
overflow-y: auto;
padding: 0.5rem;
background: rgba(0, 0, 0, 0.2);
border-radius: 8px;
}

.profile-nft-items {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(56px, 56px));
gap: 0.5rem;
}

.profile-nft-item {
width: 56px;
height: 56px;
border-radius: 8px;
overflow: hidden;
cursor: pointer;
border: 2px solid transparent;
transition: all 0.2s;
position: relative;
}

.profile-nft-item:hover {
border-color: rgba(255, 255, 255, 0.3);
}

.profile-nft-item--selected {
border-color: #facc15;
box-shadow: 0 0 10px rgba(250, 204, 21, 0.3);
}

.profile-nft-item img {
width: 100%;
height: 100%;
object-fit: cover;
}

.profile-nft-item-check {
position: absolute;
top: 4px;
right: 4px;
width: 20px;
height: 20px;
background: #facc15;
border-radius: 50%;
display: none;
align-items: center;
justify-content: center;
color: #000;
}

.profile-nft-item--selected .profile-nft-item-check {
display: flex;
}

.profile-nft-placeholder {
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(250, 204, 21, 0.2), rgba(250, 204, 21, 0.1));
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.6);
text-transform: uppercase;
}

.profile-nft-number {
position: absolute;
bottom: 2px;
left: 2px;
right: 2px;
background: rgba(0, 0, 0, 0.75);
color: #fff;
font-size: 0.6rem;
padding: 1px 3px;
border-radius: 3px;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.profile-nft-search {
width: 100%;
padding: 0.5rem 0.75rem;
background: rgba(0, 0, 0, 0.3);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 6px;
color: #fff;
font-size: 0.85rem;
margin-bottom: 0.75rem;
}

.profile-nft-search:focus {
outline: none;
border-color: rgba(250, 204, 21, 0.5);
}

.profile-nft-search::placeholder {
color: rgba(255, 255, 255, 0.4);
}

.profile-upload-section {
padding: 1rem;
background: rgba(0, 0, 0, 0.2);
border-radius: 8px;
text-align: center;
}

.profile-upload-preview {
width: 80px;
height: 80px;
margin: 0 auto 0.75rem;
border-radius: 10px;
background: rgba(255, 255, 255, 0.05);
border: 2px dashed rgba(255, 255, 255, 0.2);
display: flex;
align-items: center;
justify-content: center;
color: rgba(255, 255, 255, 0.4);
font-size: 0.75rem;
overflow: hidden;
}

.profile-upload-preview img {
width: 100%;
height: 100%;
object-fit: cover;
}

.profile-upload-btn {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
color: #fff;
padding: 0.5rem 1rem;
border-radius: 6px;
cursor: pointer;
font-size: 0.85rem;
display: inline-flex;
align-items: center;
gap: 0.4rem;
transition: all 0.2s;
}

.profile-upload-btn:hover {
background: rgba(255, 255, 255, 0.15);
border-color: rgba(255, 255, 255, 0.3);
}

.profile-upload-hint {
margin: 0.5rem 0 0;
font-size: 0.7rem;
color: rgba(255, 255, 255, 0.4);
}

.profile-edit-actions {
display: flex;
gap: 0.5rem;
margin-top: 1rem;
}

.profile-save-btn {
flex: 1;
background: linear-gradient(135deg, #facc15, #f59e0b);
border: none;
color: #000;
padding: 0.6rem 1rem;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
}

.profile-save-btn:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(250, 204, 21, 0.3);
}

.profile-cancel-btn {
background: rgba(255, 255, 255, 0.1);
border: none;
color: rgba(255, 255, 255, 0.7);
padding: 0.6rem 1rem;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s;
}

.profile-cancel-btn:hover {
background: rgba(255, 255, 255, 0.15);
}

/* Airdrops Modal */
.airdrops-modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(4px);
z-index: 1000;
display: none;
justify-content: center;
align-items: center;
padding: 1rem;
}

.airdrops-modal-overlay.active {
display: flex;
}

.airdrops-modal {
background: rgba(20, 20, 25, 0.98);
border: 1px solid rgba(34, 211, 238, 0.3);
border-radius: 12px;
max-width: 600px;
width: 100%;
max-height: 80vh;
overflow: hidden;
display: flex;
flex-direction: column;
}

.airdrops-modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 1.5rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.airdrops-modal-header h3 {
margin: 0;
font-size: 1.1rem;
color: #22d3ee;
display: flex;
align-items: center;
gap: 0.5rem;
}

.airdrops-modal-close {
background: none;
border: none;
color: rgba(255, 255, 255, 0.5);
cursor: pointer;
padding: 0.25rem;
font-size: 1.5rem;
line-height: 1;
}

.airdrops-modal-close:hover {
color: #fff;
}

.airdrops-modal-body {
padding: 1.5rem;
overflow-y: auto;
}

.stat-action-btn .security-status-dot-inline {
position: absolute;
top: 4px;
right: 4px;
width: 6px;
height: 6px;
border-radius: 50%;
background: #ff6b6b;
}

.stat-action-btn.enabled .security-status-dot-inline {
background: var(--primary-color);
}

/* 2FA Session Status Styles */
.stat-action-btn.session-active {
background: rgba(108, 255, 143, 0.15);
border: 1px solid rgba(108, 255, 143, 0.3);
color: var(--primary-color);
}

.stat-action-btn.session-active .security-status-dot-inline {
background: var(--primary-color);
animation: pulse-glow 2s ease-in-out infinite;
}

.stat-action-btn.session-active .stat-action-label {
color: var(--primary-color);
opacity: 1;
font-weight: 600;
}

.stat-action-btn.session-expired {
background: rgba(255, 193, 7, 0.1);
border: 1px solid rgba(255, 193, 7, 0.3);
}

.stat-action-btn.session-expired .security-status-dot-inline {
background: #ffc107;
animation: pulse-warning 1.5s ease-in-out infinite;
}

.stat-action-btn.session-expired .stat-action-label {
color: #ffc107;
}

@keyframes pulse-glow {
0%, 100% { box-shadow: 0 0 4px rgba(108, 255, 143, 0.5); }
50% { box-shadow: 0 0 8px rgba(108, 255, 143, 0.8); }
}

@keyframes pulse-warning {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}

/* Tabs Row - container for tabs and search/filter */
.tabs-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
margin-bottom: 0.5rem;
flex-wrap: wrap;
background: rgba(0, 0, 0, var(--tabs-row-opacity, 0));
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 10px;
padding: 0.5rem 0.75rem;
position: relative;
z-index: 1;
}

.tabs {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
margin-bottom: 0;
border-bottom: none;
padding-bottom: 0;
}

.tabs-right-controls {
display: flex;
align-items: center;
gap: 0.5rem;
position: relative;
}

/* Compact Search Box - now matches height of filter/sort */
.search-box-compact {
display: flex;
align-items: center;
gap: 0.5rem;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
padding: 0.6rem 0.8rem;
height: 38px;
box-sizing: border-box;
transition: all 0.2s ease;
}

.search-box-compact:hover {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.2);
}

.search-box-compact:focus-within {
border-color: var(--primary-color);
background: rgba(255, 255, 255, 0.08);
box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.15);
}

.search-box-compact:focus-within svg {
color: var(--primary-color);
}

.search-box-compact svg {
color: rgba(255, 255, 255, 0.4);
flex-shrink: 0;
transition: color 0.2s ease;
}

.search-box-compact input {
background: transparent;
border: none;
color: #fff;
font-size: 0.85rem;
width: 160px;
outline: none;
}

.search-box-compact input::placeholder {
color: rgba(255, 255, 255, 0.3);
}

/* Selection hint in stats */
.stat-selection-hint {
font-size: 0.6rem;
color: var(--primary-color);
opacity: 0.8;
}

.tab-count {
color: rgba(255, 255, 255, 0.5);
font-weight: normal;
font-size: 0.9em;
}

.claim-btn {
margin-top: 0.5rem;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
color: #000;
border: none;
padding: 0.4rem 1rem;
border-radius: 6px;
font-weight: 600;
font-size: 0.8rem;
cursor: pointer;
transition: all 0.2s;
}

.claim-btn:hover {
transform: translateY(-1px);
box-shadow: 0 2px 10px rgba(108, 255, 143, 0.3);
}

.claim-btn:disabled,
.claim-btn.disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
background: linear-gradient(135deg, rgba(108, 255, 143, 0.5), rgba(0, 212, 255, 0.5));
font-size: 0.75rem;
}

.claim-btn:disabled:hover,
.claim-btn.disabled:hover {
transform: none;
box-shadow: none;
}

/* Tabs */
.tabs {
display: flex;
gap: 0.5rem;
margin-bottom: 0;
}

.tab-btn {
background: none;
border: none;
color: rgba(255, 255, 255, 0.5);
padding: 0.75rem 1.5rem;
font-size: 1rem;
cursor: pointer;
transition: all 0.2s;
border-radius: 8px 8px 0 0;
}

.tab-btn:hover {
color: rgba(255, 255, 255, 0.8);
}

.tab-btn.active {
color: #fff;
background: rgba(255, 255, 255, 0.1);
border-bottom: 2px solid var(--primary-color);
}

.tab-content {
display: none;
}

.tab-content.active {
display: block;
}

.tab-badge {
background: linear-gradient(135deg, #9945FF, #14F195);
color: #fff;
font-size: 0.7rem;
padding: 0.15rem 0.4rem;
border-radius: 10px;
margin-left: 0.5rem;
font-weight: 600;
}

/* Search and Filter Bar */
.search-filter-bar {
display: flex;
gap: 1rem;
margin-bottom: 1.5rem;
flex-wrap: wrap;
align-items: center;
}

.search-box {
display: flex;
align-items: center;
gap: 0.5rem;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
padding: 0.6rem 1rem;
flex: 1;
min-width: 200px;
max-width: 350px;
}

.search-box svg {
color: rgba(255, 255, 255, 0.4);
flex-shrink: 0;
}

.search-box input {
background: none;
border: none;
outline: none;
color: #fff;
font-size: 0.9rem;
width: 100%;
}

.search-box input::placeholder {
color: rgba(255, 255, 255, 0.4);
}

.search-box:focus-within {
border-color: var(--primary-color);
}

.filter-dropdown-container select {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
padding: 0.6rem 1rem;
color: #fff;
font-size: 0.85rem;
cursor: pointer;
min-width: 130px;
height: 38px;
box-sizing: border-box;
transition: all 0.2s ease;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.5)' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.75rem center;
padding-right: 2rem;
}

.filter-dropdown-container select:hover {
background-color: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.2);
}

.filter-dropdown-container select:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.15);
}

.filter-dropdown-container select option {
background: #1a1a2e;
color: #fff;
padding: 0.5rem;
}

/* Trait filter options - replaces sort/filter when active */
.trait-filter-options {
display: none;
gap: 0.4rem;
align-items: center;
}

.trait-filter-options.active {
display: flex;
}

.trait-filter-options select {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(108, 255, 143, 0.3);
border-radius: 8px;
padding: 0.5rem 0.6rem;
color: #fff;
font-size: 0.8rem;
cursor: pointer;
min-width: 100px;
max-width: 130px;
height: 36px;
box-sizing: border-box;
}

.trait-filter-options select:focus {
outline: none;
border-color: var(--primary-color);
}

.trait-filter-options select option {
background: #1a1a2e;
color: #fff;
}

/* Multi-select trait value dropdown */
.trait-value-multi {
position: relative;
min-width: 100px;
max-width: 160px;
}

.trait-value-toggle {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(108, 255, 143, 0.3);
border-radius: 8px;
padding: 0.5rem 0.6rem;
color: #fff;
font-size: 0.8rem;
cursor: pointer;
height: 36px;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.4rem;
white-space: nowrap;
overflow: hidden;
}

.trait-value-toggle:hover {
border-color: var(--primary-color);
}

.trait-value-toggle span {
overflow: hidden;
text-overflow: ellipsis;
}

.trait-value-dropdown {
display: none;
position: absolute;
top: calc(100% + 4px);
left: 0;
min-width: 100%;
max-height: 240px;
overflow-y: auto;
background: #1a1a2e;
border: 1px solid rgba(108, 255, 143, 0.3);
border-radius: 8px;
padding: 0.3rem 0;
z-index: 100;
}

.trait-value-dropdown.open {
display: block;
}

.trait-value-dropdown label {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.4rem 0.7rem;
cursor: pointer;
font-size: 0.8rem;
color: #fff;
white-space: nowrap;
}

.trait-value-dropdown label:hover {
background: rgba(108, 255, 143, 0.1);
}

.trait-value-dropdown input[type="checkbox"] {
accent-color: var(--primary-color);
width: 14px;
height: 14px;
cursor: pointer;
flex-shrink: 0;
}

/* When trait filter is active, hide the main sort/filter dropdown */
.tabs-right-controls.trait-filter-active .filter-dropdown-container {
display: none;
}

/* Keep search box compact when trait filter active */
.tabs-right-controls.trait-filter-active .search-box-compact {
width: auto;
}
.tabs-right-controls.trait-filter-active .search-box-compact input {
width: 100px;
}

.clear-filter-btn {
background: rgba(255, 100, 100, 0.2);
border: 1px solid rgba(255, 100, 100, 0.3);
border-radius: 6px;
padding: 0.5rem;
color: #ff6464;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
height: 38px;
width: 38px;
box-sizing: border-box;
}

.clear-filter-btn:hover {
background: rgba(255, 100, 100, 0.3);
border-color: rgba(255, 100, 100, 0.5);
}

.select-all-btn {
display: flex;
align-items: center;
gap: 0.4rem;
background: rgba(var(--primary-rgb), 0.15);
border: 1px solid rgba(var(--primary-rgb), 0.3);
border-radius: 8px;
padding: 0.5rem 0.85rem;
color: var(--primary-color);
font-size: 0.85rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
white-space: nowrap;
height: 38px;
box-sizing: border-box;
}

.select-all-btn:hover {
background: rgba(var(--primary-rgb), 0.25);
border-color: rgba(var(--primary-rgb), 0.5);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.2);
}

.select-all-btn:active {
transform: translateY(0);
box-shadow: 0 2px 6px rgba(var(--primary-rgb), 0.15);
}

.select-all-btn.active {
background: var(--primary-color);
color: #000;
box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.3);
}

.select-all-btn.active:hover {
background: var(--primary-color);
transform: translateY(-1px);
box-shadow: 0 4px 14px rgba(var(--primary-rgb), 0.4);
}

.select-all-btn.active:active {
transform: translateY(0);
box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.3);
}

@media (max-width: 640px) {
.search-filter-bar {
flex-direction: column;
align-items: stretch;
}
.search-box {
max-width: none;
}
.trait-filter-options {
flex-wrap: wrap;
}
}

/* Airdrops Grid */
.airdrops-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1.5rem;
}

.airdrop-card {
background: rgba(0, 0, 0, var(--airdrop-card-opacity, 0));
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
padding: 1.5rem;
transition: all 0.2s;
}

.airdrop-card:hover {
border-color: var(--primary-color);
box-shadow: 0 8px 30px rgba(108, 255, 143, 0.15);
}

.airdrop-header {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1rem;
}

.airdrop-token-logo {
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
}

.airdrop-token-info {
flex: 1;
}

.airdrop-token-symbol {
color: var(--primary-color);
font-weight: 600;
font-size: 1.1rem;
}

.airdrop-token-name {
color: rgba(255, 255, 255, 0.5);
font-size: 0.8rem;
}

.airdrop-amount {
text-align: center;
padding: 1rem;
background: rgba(20, 241, 149, 0.1);
border-radius: 12px;
margin-bottom: 1rem;
}

.airdrop-amount-value {
font-size: 1.5rem;
font-weight: 700;
color: var(--primary-color);
}

.airdrop-amount-label {
color: rgba(255, 255, 255, 0.5);
font-size: 0.8rem;
margin-top: 0.25rem;
}

.airdrop-details {
display: flex;
justify-content: space-between;
font-size: 0.85rem;
color: rgba(255, 255, 255, 0.6);
margin-bottom: 1rem;
padding-bottom: 1rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.airdrop-fee {
color: rgba(255, 255, 255, 0.5);
}

.airdrop-claim-btn {
width: 100%;
background: linear-gradient(135deg, #9945FF, #14F195);
color: #fff;
border: none;
padding: 0.875rem;
border-radius: 12px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
}

.airdrop-claim-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 20px rgba(153, 69, 255, 0.4);
}

.airdrop-claim-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none;
}

/* Airdrop Claim History */
.airdrop-history-section {
margin-top: 2rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding-top: 1.5rem;
}
.airdrop-history-heading {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 1rem;
font-weight: 600;
color: rgba(255, 255, 255, 0.8);
margin-bottom: 1rem;
}
.airdrop-history-heading svg {
opacity: 0.6;
}
.airdrop-history-table {
width: 100%;
border-collapse: collapse;
font-size: 0.85rem;
}
.airdrop-history-table th {
text-align: left;
color: rgba(255, 255, 255, 0.45);
font-weight: 500;
padding: 0.5rem 0.75rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
white-space: nowrap;
}
.airdrop-history-table td {
padding: 0.65rem 0.75rem;
color: rgba(255, 255, 255, 0.75);
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
vertical-align: middle;
}
.airdrop-history-table tr:hover td {
background: rgba(255, 255, 255, 0.03);
}
.airdrop-history-token {
display: flex;
align-items: center;
gap: 0.5rem;
}
.airdrop-history-token img {
width: 22px;
height: 22px;
border-radius: 50%;
object-fit: cover;
}
.airdrop-history-badge {
display: inline-block;
padding: 2px 8px;
border-radius: 6px;
font-size: 0.75rem;
font-weight: 600;
}
.airdrop-history-badge.claimed {
background: rgba(16, 185, 129, 0.15);
color: #10b981;
}
.airdrop-history-tx a {
color: var(--primary-color);
text-decoration: none;
font-family: monospace;
font-size: 0.8rem;
}
.airdrop-history-tx a:hover {
text-decoration: underline;
}
.airdrop-history-empty {
text-align: center;
padding: 2rem;
color: rgba(255, 255, 255, 0.4);
font-size: 0.9rem;
}
@media (max-width: 600px) {
.airdrop-history-table th:nth-child(4),
.airdrop-history-table td:nth-child(4) {
display: none;
}
}

/* NFT Grid */
.nft-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 1.5rem;
}
.nft-grid.sets-view {
display: block;
}

.nft-card {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
cursor: pointer;
transition: all 0.2s;
position: relative;
min-width: 0;
overflow: hidden;
}

/* Lonely placeholder card */
.nft-placeholder-card {
background: rgba(0, 0, 0, 0.5);
border: 2px dashed rgba(255, 255, 255, 0.2);
border-radius: 16px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 24px 16px;
text-align: center;
min-height: 280px;
transition: all 0.3s ease;
backdrop-filter: blur(4px);
}

.nft-placeholder-card:hover {
border-color: rgba(255, 255, 255, 0.35);
background: rgba(0, 0, 0, 0.6);
}

.nft-placeholder-icon {
width: 64px;
height: 64px;
margin-bottom: 16px;
opacity: 0.4;
color: rgba(255, 255, 255, 0.5);
}

.nft-placeholder-text {
color: rgba(255, 255, 255, 0.5);
font-size: 0.85rem;
line-height: 1.5;
max-width: 180px;
}

.nft-placeholder-links {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 12px;
justify-content: center;
}

.nft-placeholder-link {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 8px;
color: #fff;
text-decoration: none;
font-size: 0.75rem;
font-weight: 500;
transition: all 0.2s ease;
}

.nft-placeholder-link:hover {
background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.25);
transform: translateY(-2px);
}

.nft-placeholder-link.magic-eden {
border-color: rgba(228, 37, 117, 0.3);
}

.nft-placeholder-link.magic-eden:hover {
border-color: rgba(228, 37, 117, 0.5);
background: rgba(228, 37, 117, 0.15);
}

.nft-placeholder-link.tensor {
border-color: rgba(4, 217, 255, 0.3);
}

.nft-placeholder-link.tensor:hover {
border-color: rgba(4, 217, 255, 0.5);
background: rgba(4, 217, 255, 0.15);
}

.nft-placeholder-link.gotm-labz {
border-color: rgba(108, 255, 143, 0.3);
}

.nft-placeholder-link.gotm-labz:hover {
border-color: rgba(108, 255, 143, 0.5);
background: rgba(108, 255, 143, 0.15);
}

.nft-placeholder-link img {
width: 18px;
height: 18px;
border-radius: 4px;
}

.nft-placeholder-custom-image {
width: 80px;
height: 80px;
border-radius: 12px;
object-fit: cover;
margin-bottom: 12px;
border: 2px solid rgba(255, 255, 255, 0.1);
}

.nft-card:hover {
transform: translateY(-4px);
border-color: var(--primary-color);
box-shadow: 0 8px 30px rgba(108, 255, 143, 0.15);
z-index: 10;
}

.nft-card.selected {
border-color: var(--primary-color);
box-shadow: 0 0 0 2px var(--primary-color);
}

/* NFT that can contribute to a trait set */
.nft-card.set-contributor {
border-color: rgba(251, 191, 36, 0.6);
box-shadow: 0 0 12px rgba(251, 191, 36, 0.25);
}

.nft-card.set-contributor:hover {
border-color: rgba(251, 191, 36, 0.9);
box-shadow: 0 8px 30px rgba(251, 191, 36, 0.3);
}

.nft-card.set-contributor.selected {
border-color: var(--primary-color);
box-shadow: 0 0 0 2px var(--primary-color), 0 0 12px rgba(251, 191, 36, 0.25);
}

/* Set contributor badge */
.nft-card-set-badge {
position: absolute;
top: 8px;
left: 8px;
background: rgba(251, 191, 36, 0.95);
color: #000;
font-size: 0.55rem;
font-weight: 700;
padding: 3px 6px;
border-radius: 4px;
text-transform: uppercase;
letter-spacing: 0.5px;
z-index: 5;
display: flex;
align-items: center;
gap: 3px;
}

.nft-card-set-badge svg {
width: 10px;
height: 10px;
}

/* NFT that is part of a complete set (staked) */
.nft-card.set-complete {
border-color: rgba(34, 197, 94, 0.6);
box-shadow: 0 0 12px rgba(34, 197, 94, 0.25);
}

.nft-card.set-complete:hover {
border-color: rgba(34, 197, 94, 0.9);
box-shadow: 0 8px 30px rgba(34, 197, 94, 0.3);
}

.nft-card.set-complete.selected {
border-color: var(--primary-color);
box-shadow: 0 0 0 2px var(--primary-color), 0 0 12px rgba(34, 197, 94, 0.25);
}

/* Complete set badge */
.nft-card-set-complete-badge {
position: absolute;
top: 8px;
left: 8px;
background: rgba(34, 197, 94, 0.95);
color: #fff;
font-size: 0.55rem;
font-weight: 700;
padding: 3px 6px;
border-radius: 4px;
text-transform: uppercase;
letter-spacing: 0.5px;
z-index: 5;
display: flex;
align-items: center;
gap: 3px;
}

.nft-card-set-complete-badge svg {
width: 10px;
height: 10px;
}

/* In-progress set badge (orange) */
.nft-card-set-progress-badge {
position: absolute;
top: 8px;
left: 8px;
background: rgba(245, 158, 11, 0.95);
color: #fff;
font-size: 0.55rem;
font-weight: 700;
padding: 3px 6px;
border-radius: 4px;
text-transform: uppercase;
letter-spacing: 0.5px;
z-index: 5;
display: flex;
align-items: center;
gap: 3px;
}

.nft-card-set-progress-badge svg {
width: 10px;
height: 10px;
}

.nft-card img {
width: 100%;
aspect-ratio: 1;
object-fit: cover;
}

.nft-card-info {
padding: 1rem;
background: rgba(0, 0, 0, var(--card-info-opacity, 0));
border-radius: 0 0 16px 16px;
}

.nft-card-name {
font-weight: 600;
margin-bottom: 0.25rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.nft-card-rewards {
color: var(--primary-color);
font-size: 0.85rem;
}

/* NFT Card Image Container */
.nft-card-image {
position: relative;
overflow: hidden;
border-radius: 16px 16px 0 0;
}

.nft-card-expand {
position: absolute;
top: 8px;
right: 8px;
width: 28px;
height: 28px;
background: rgba(0, 0, 0, 0.6);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 6px;
color: #fff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.2s;
z-index: 5;
}

.nft-card:hover .nft-card-expand {
opacity: 1;
}

.nft-card-expand:hover {
background: rgba(0, 0, 0, 0.8);
border-color: var(--primary-color);
}

.nft-card-rarity {
position: absolute;
bottom: 8px;
left: 8px;
background: rgba(0, 0, 0, 0.7);
color: #ffd700;
font-size: 0.7rem;
font-weight: 600;
padding: 2px 6px;
border-radius: 4px;
}

.nft-card-eternal-badge {
position: absolute;
top: 8px;
left: 8px;
background: linear-gradient(135deg, #ff6b6b, #ff4757);
color: #fff;
font-size: 0.65rem;
font-weight: 700;
padding: 3px 8px;
border-radius: 4px;
text-transform: uppercase;
letter-spacing: 0.5px;
box-shadow: 0 2px 8px rgba(255, 107, 107, 0.4);
}

.nft-card.eternal-staked {
border-color: rgba(255, 107, 107, 0.4);
}

.nft-card.eternal-staked:hover {
border-color: rgba(255, 107, 107, 0.6);
}

.nft-detail-value.eternal {
color: #ff6b6b;
font-weight: 600;
}

/* Locked NFT Styles */
.nft-card.locked-staked {
border-color: rgba(255, 193, 7, 0.3);
}

.nft-card.locked-staked:hover {
border-color: rgba(255, 193, 7, 0.5);
}

.nft-card-lock-badge {
position: absolute;
top: 8px;
left: 8px;
background: linear-gradient(135deg, #ffc107, #ff9800);
color: #000;
padding: 5px 8px;
border-radius: 6px;
display: flex;
align-items: center;
gap: 4px;
z-index: 5;
font-size: 0.65rem;
font-weight: 600;
text-transform: uppercase;
box-shadow: 0 2px 8px rgba(255, 193, 7, 0.4);
}

.nft-card-lock-badge svg {
width: 12px;
height: 12px;
}

.nft-card-lock-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.85);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.2s ease;
z-index: 3;
border-radius: 12px 12px 0 0;
}

.nft-card-image:hover .nft-card-lock-overlay {
opacity: 1;
}

.lock-overlay-content {
text-align: center;
padding: 1rem;
color: #fff;
}

.lock-overlay-content svg {
color: #ffc107;
margin-bottom: 0.5rem;
}

.lock-overlay-title {
font-size: 0.7rem;
color: rgba(255, 255, 255, 0.6);
text-transform: uppercase;
letter-spacing: 0.5px;
}

.lock-overlay-date {
font-size: 0.85rem;
font-weight: 600;
color: #ffc107;
margin: 0.25rem 0;
}

.lock-overlay-warning {
font-size: 0.7rem;
color: #ff6b6b;
margin-top: 0.5rem;
padding: 0.3rem 0.5rem;
background: rgba(255, 107, 107, 0.15);
border-radius: 4px;
}

.nft-detail-value.locked {
color: #ffc107;
font-weight: 500;
}

/* Staked NFT Card Details */
.nft-card-details {
display: flex;
flex-direction: column;
gap: 4px;
font-size: 0.75rem;
margin-top: 8px;
padding-top: 8px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}

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

.nft-detail-label {
color: rgba(255, 255, 255, 0.5);
}

.nft-detail-value {
color: #fff;
font-weight: 500;
}

.nft-detail-value.earnings {
color: var(--primary-color);
}

.nft-detail-value.ready {
color: #14F195;
font-weight: 500;
}

/* Earnings Dropdown Wrapper (hover to show) */
.nft-earnings-wrapper {
position: relative;
}

.nft-earnings-trigger {
display: flex;
align-items: center;
gap: 4px;
font-size: 0.75rem;
font-weight: 500;
color: var(--primary-color);
cursor: pointer;
}

.nft-earnings-trigger img {
width: 14px;
height: 14px;
max-width: 14px;
max-height: 14px;
border-radius: 50%;
object-fit: cover;
}

.nft-earnings-dropdown {
position: absolute;
top: calc(100% + 6px);
right: 0;
background: rgba(20, 20, 25, 0.98);
border: 1px solid rgba(139, 92, 246, 0.3);
border-radius: 8px;
padding: 8px;
min-width: 140px;
opacity: 0;
visibility: hidden;
transform: translateY(-4px);
transition: all 0.2s ease;
z-index: 100;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

.nft-earnings-wrapper:hover .nft-earnings-dropdown,
.nft-earnings-wrapper.active .nft-earnings-dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.nft-card:has(.nft-earnings-wrapper:hover),
.nft-card:has(.nft-earnings-wrapper.active) {
overflow: visible;
z-index: 10;
}

.nft-earnings-dropdown::before {
content: '';
position: absolute;
bottom: 100%;
right: 12px;
border: 6px solid transparent;
border-bottom-color: rgba(139, 92, 246, 0.3);
}

/* Available NFTs dropdown opens upward to avoid being cut off */
.nft-card[data-type="available"] .nft-earnings-dropdown {
top: auto;
bottom: calc(100% + 6px);
transform: translateY(4px);
}

.nft-card[data-type="available"] .nft-earnings-wrapper:hover .nft-earnings-dropdown,
.nft-card[data-type="available"] .nft-earnings-wrapper.active .nft-earnings-dropdown {
transform: translateY(0);
}

.nft-card[data-type="available"] .nft-earnings-dropdown::before {
bottom: auto;
top: 100%;
border-bottom-color: transparent;
border-top-color: rgba(139, 92, 246, 0.3);
}

.nft-earnings-dropdown-title {
font-size: 0.6rem;
color: rgba(255, 255, 255, 0.5);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 6px;
text-align: center;
}

/* Bonus Breakdown Tooltip */
.nft-bonus-tooltip-wrapper {
position: relative;
}

.nft-bonus-tooltip {
position: absolute;
bottom: calc(100% + 6px);
right: 0;
background: rgba(20, 20, 25, 0.98);
border: 1px solid rgba(139, 92, 246, 0.3);
border-radius: 8px;
padding: 8px;
min-width: 160px;
opacity: 0;
visibility: hidden;
transform: translateY(4px);
transition: all 0.2s ease;
z-index: 100;
pointer-events: none;
}

.nft-bonus-tooltip-wrapper:hover .nft-bonus-tooltip,
.nft-bonus-tooltip-wrapper.active .nft-bonus-tooltip {
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
}
/* Let tooltip escape the card's overflow: hidden */
.nft-card:has(.nft-bonus-tooltip-wrapper:hover),
.nft-card:has(.nft-bonus-tooltip-wrapper.active) {
overflow: visible;
z-index: 10;
}

.nft-bonus-tooltip::before {
content: '';
position: absolute;
top: 100%;
right: 12px;
border: 6px solid transparent;
border-top-color: rgba(139, 92, 246, 0.3);
}

.nft-bonus-tooltip-title {
font-size: 0.6rem;
color: rgba(255, 255, 255, 0.5);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 6px;
text-align: left;
}

.nft-bonus-tooltip-item {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
padding: 4px 0;
font-size: 0.7rem;
}

.nft-bonus-tooltip-item + .nft-bonus-tooltip-item {
border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.nft-bonus-tooltip-label {
color: rgba(255, 255, 255, 0.7);
white-space: nowrap;
}

.nft-bonus-tooltip-value {
color: #8B5CF6;
font-weight: 600;
white-space: nowrap;
}

.nft-bonus-tooltip-item.base .nft-bonus-tooltip-value {
color: rgba(255, 255, 255, 0.9);
}

.nft-earnings-item {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 4px;
font-size: 0.7rem;
}

.nft-earnings-item + .nft-earnings-item {
border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.nft-earnings-item-image {
width: 18px;
height: 18px;
max-width: 18px;
max-height: 18px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
}

.nft-earnings-item-token {
color: rgba(255, 255, 255, 0.8);
font-weight: 500;
flex: 1;
}

.nft-earnings-item-value {
color: #8B5CF6;
font-weight: 600;
margin-left: auto;
}

/* Token logo in default earnings display */
.nft-detail-value.earnings {
display: flex;
align-items: center;
gap: 4px;
}

.nft-detail-value.earnings img {
width: 14px;
height: 14px;
border-radius: 50%;
object-fit: cover;
}

/* Token logo in dropdown button */
.nft-earnings-dropdown-btn img {
width: 14px;
height: 14px;
border-radius: 50%;
object-fit: cover;
margin-left: 2px;
}

/* NFT Card Action Buttons */
.nft-card-actions {
display: flex;
flex-direction: column;
gap: 6px;
margin-top: 8px;
padding-top: 8px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.nft-card-action-btn {
width: 100%;
padding: 8px 10px;
border-radius: 6px;
font-size: 0.7rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
border: none;
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
text-transform: uppercase;
letter-spacing: 0.3px;
}

.nft-card-action-btn svg {
width: 12px;
height: 12px;
}

/* Claim Button with Dropdown */
.nft-claim-wrapper {
position: relative;
width: 100%;
z-index: 1;
}

.nft-claim-wrapper:hover {
z-index: 100;
}

/* Elevate card z-index when hovering over claim wrapper to show dropdown above other cards */
.nft-card:has(.nft-claim-wrapper:hover) {
z-index: 100;
}

.nft-action-claim {
width: 100%;
background: linear-gradient(135deg, rgba(20, 241, 149, 0.2), rgba(20, 241, 149, 0.1));
color: #14F195;
border: 1px solid rgba(20, 241, 149, 0.3);
position: relative;
}

.nft-action-claim:hover {
background: linear-gradient(135deg, rgba(20, 241, 149, 0.35), rgba(20, 241, 149, 0.2));
border-color: rgba(20, 241, 149, 0.5);
box-shadow: 0 0 10px rgba(20, 241, 149, 0.2);
}

.nft-action-claim .claim-amount {
margin-left: 4px;
}

/* Claim locked during lock period */
.nft-action-claim.claim-locked {
background: linear-gradient(135deg, rgba(255, 193, 7, 0.15), rgba(255, 193, 7, 0.08));
color: #ffc107;
border: 1px solid rgba(255, 193, 7, 0.3);
cursor: not-allowed;
opacity: 0.85;
}

.nft-action-claim.claim-locked:hover {
background: linear-gradient(135deg, rgba(255, 193, 7, 0.15), rgba(255, 193, 7, 0.08));
border-color: rgba(255, 193, 7, 0.3);
box-shadow: none;
}

.nft-action-claim.claim-locked .claim-amount {
color: rgba(255, 193, 7, 0.7);
}

/* Upgrade to Eternal button (overlay on NFT image) */
.nft-upgrade-eternal-btn {
position: absolute;
bottom: 6px;
right: 6px;
width: 30px;
height: 30px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, rgba(168, 85, 247, 0.85), rgba(236, 72, 153, 0.85));
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 50%;
cursor: pointer;
opacity: 0;
transform: scale(0.8);
transition: opacity 0.2s, transform 0.2s, box-shadow 0.2s;
z-index: 3;
}

.nft-card:hover .nft-upgrade-eternal-btn {
opacity: 1;
transform: scale(1);
}

.nft-upgrade-eternal-btn:hover {
background: linear-gradient(135deg, #a855f7, #ec4899);
box-shadow: 0 0 12px rgba(168, 85, 247, 0.5);
border-color: rgba(255, 255, 255, 0.4);
transform: scale(1.1);
}

/* Upgrade Lock Period button (overlay on NFT image) */
.nft-upgrade-lock-btn {
position: absolute;
bottom: 6px;
right: 6px;
width: 30px;
height: 30px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, rgba(20, 184, 166, 0.85), rgba(59, 130, 246, 0.85));
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 50%;
cursor: pointer;
opacity: 0;
transform: scale(0.8);
transition: opacity 0.2s, transform 0.2s, box-shadow 0.2s;
z-index: 3;
}

.nft-card:hover .nft-upgrade-lock-btn {
opacity: 1;
transform: scale(1);
}

.nft-upgrade-lock-btn:hover {
background: linear-gradient(135deg, #14b8a6, #3b82f6);
box-shadow: 0 0 12px rgba(20, 184, 166, 0.5);
border-color: rgba(255, 255, 255, 0.4);
transform: scale(1.1);
}

/* When both eternal and lock upgrade buttons exist, stack lock above eternal */
.nft-upgrade-eternal-btn ~ .nft-upgrade-lock-btn {
bottom: 42px;
}

/* Claim Dropdown (hover to show tokens) */
.nft-claim-dropdown {
position: absolute;
bottom: calc(100% + 6px);
left: 0;
right: 0;
background: rgba(20, 20, 25, 0.98);
border: 1px solid rgba(20, 241, 149, 0.3);
border-radius: 8px;
padding: 8px;
opacity: 0;
visibility: hidden;
transition: all 0.2s ease;
z-index: 200;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

.nft-claim-wrapper:hover .nft-claim-dropdown {
opacity: 1;
visibility: visible;
}

.nft-claim-dropdown::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: 6px solid transparent;
border-top-color: rgba(20, 241, 149, 0.3);
}

.nft-claim-dropdown-title {
font-size: 0.6rem;
color: rgba(255, 255, 255, 0.5);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 6px;
text-align: center;
}

.nft-claim-dropdown-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 4px 0;
}

.nft-claim-dropdown-item + .nft-claim-dropdown-item {
border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.nft-claim-dropdown-token {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.7rem;
color: rgba(255, 255, 255, 0.7);
}

.nft-claim-dropdown-token img {
width: 16px;
height: 16px;
border-radius: 50%;
object-fit: cover;
}

.nft-claim-dropdown-value {
font-size: 0.75rem;
font-weight: 600;
color: #14F195;
}

/* Unstake Button */
.nft-action-unstake {
background: rgba(255, 255, 255, 0.05);
color: rgba(255, 255, 255, 0.7);
border: 1px solid rgba(255, 255, 255, 0.15);
}

.nft-action-unstake:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.25);
color: #fff;
}

/* Early Unstake Button (for locked NFTs) */
.nft-action-unstake.early-unstake {
background: rgba(255, 107, 107, 0.1);
color: rgba(255, 107, 107, 0.8);
border: 1px solid rgba(255, 107, 107, 0.2);
position: relative;
}

.nft-action-unstake.early-unstake:hover {
background: rgba(255, 107, 107, 0.2);
border-color: rgba(255, 107, 107, 0.4);
color: #ff6b6b;
}

/* Early Unstake Tooltip */
.nft-action-unstake.early-unstake .early-unstake-tooltip {
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
background: rgba(30, 30, 35, 0.98);
border: 1px solid rgba(255, 107, 107, 0.3);
border-radius: 8px;
padding: 8px 12px;
min-width: 160px;
opacity: 0;
visibility: hidden;
transition: all 0.2s ease;
z-index: 50;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.nft-action-unstake.early-unstake:hover .early-unstake-tooltip {
opacity: 1;
visibility: visible;
}

.nft-action-unstake.early-unstake .early-unstake-tooltip::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: 6px solid transparent;
border-top-color: rgba(255, 107, 107, 0.3);
}

.early-unstake-tooltip-title {
font-size: 0.7rem;
color: #ff6b6b;
font-weight: 600;
margin-bottom: 4px;
}

.early-unstake-tooltip-text {
font-size: 0.65rem;
color: rgba(255, 255, 255, 0.7);
line-height: 1.3;
}

.early-unstake-tooltip-penalty {
font-size: 0.7rem;
color: #ff6b6b;
font-weight: 600;
margin-top: 4px;
padding-top: 4px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Locked status buttons (eternal and time-locked) */
.nft-action-locked {
background: rgba(255, 193, 7, 0.1);
color: rgba(255, 193, 7, 0.8);
border: 1px solid rgba(255, 193, 7, 0.2);
cursor: not-allowed;
opacity: 0.8;
}

.nft-action-locked:disabled {
background: rgba(255, 193, 7, 0.1);
color: rgba(255, 193, 7, 0.8);
}

/* Early unstake available - hover to show penalty info */
.nft-action-locked.early-unstake-available {
cursor: pointer;
opacity: 1;
}

.nft-action-locked.early-unstake-available .unlock-icon,
.nft-action-locked.early-unstake-available .early-unstake-text {
display: none;
}

.nft-action-locked.early-unstake-available .lock-icon,
.nft-action-locked.early-unstake-available .locked-text {
display: inline;
}

.nft-action-locked.early-unstake-available:hover {
background: rgba(255, 107, 107, 0.15);
color: #ff6b6b;
border-color: rgba(255, 107, 107, 0.4);
}

.nft-action-locked.early-unstake-available:hover .lock-icon,
.nft-action-locked.early-unstake-available:hover .locked-text {
display: none;
}

.nft-action-locked.early-unstake-available:hover .unlock-icon,
.nft-action-locked.early-unstake-available:hover .early-unstake-text {
display: inline;
}

.nft-action-locked.eternal-locked {
background: rgba(139, 92, 246, 0.1);
color: rgba(139, 92, 246, 0.9);
border: 1px solid rgba(139, 92, 246, 0.25);
}

.nft-action-locked.mission-locked {
background: rgba(6, 182, 212, 0.1);
color: rgba(6, 182, 212, 0.9);
border: 1px solid rgba(6, 182, 212, 0.25);
}

/* Mission tooltip wrapper and custom tooltip */
.mission-tooltip-wrapper {
position: relative;
display: inline-block;
}

.mission-tooltip {
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
background: linear-gradient(145deg, rgba(15, 23, 42, 0.98), rgba(30, 41, 59, 0.98));
border: 1px solid rgba(6, 182, 212, 0.3);
border-radius: 10px;
padding: 0;
min-width: 180px;
opacity: 0;
visibility: hidden;
transition: all 0.2s ease;
z-index: 100;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 20px rgba(6, 182, 212, 0.1);
pointer-events: none;
}

.mission-tooltip::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: 6px solid transparent;
border-top-color: rgba(6, 182, 212, 0.3);
}

.mission-tooltip-wrapper:hover .mission-tooltip {
opacity: 1;
visibility: visible;
}

.mission-tooltip-header {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
background: rgba(6, 182, 212, 0.1);
border-bottom: 1px solid rgba(6, 182, 212, 0.2);
border-radius: 10px 10px 0 0;
color: #06b6d4;
font-weight: 600;
font-size: 13px;
}

.mission-tooltip-header svg {
fill: #06b6d4;
}

.mission-tooltip-body {
padding: 10px 12px;
}

.mission-tooltip-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 4px 0;
}

.mission-tooltip-label {
color: rgba(148, 163, 184, 0.8);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.5px;
}

.mission-tooltip-value {
color: #f1f5f9;
font-size: 12px;
font-weight: 500;
}

.mission-tooltip-footer {
padding: 8px 12px;
background: rgba(6, 182, 212, 0.05);
border-top: 1px solid rgba(6, 182, 212, 0.15);
border-radius: 0 0 10px 10px;
color: rgba(148, 163, 184, 0.7);
font-size: 10px;
text-align: center;
font-style: italic;
}

.nft-action-locked svg {
fill: currentColor;
}

/* Locked NFT image badge - clean dark style with padlock */
.nft-card-locked-badge {
position: absolute;
bottom: 8px;
left: 8px;
background: rgba(0, 0, 0, 0.75);
color: #fbbf24;
padding: 8px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
z-index: 5;
backdrop-filter: blur(4px);
border: 1px solid rgba(251, 191, 36, 0.3);
}

.nft-card-locked-badge svg {
width: 18px;
height: 18px;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

/* On Mission NFT badge and overlay */
.nft-card.on-mission .nft-card-image::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(168, 85, 247, 0.15);
pointer-events: none;
z-index: 3;
}

.nft-card-mission-badge {
position: absolute;
top: 8px;
left: 8px;
background: linear-gradient(135deg, rgba(168, 85, 247, 0.95), rgba(139, 92, 246, 0.95));
color: #fff;
padding: 4px 8px;
border-radius: 6px;
font-size: 0.6rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
display: flex;
align-items: center;
gap: 4px;
z-index: 6;
backdrop-filter: blur(4px);
box-shadow: 0 2px 8px rgba(168, 85, 247, 0.4);
}

.nft-card-mission-badge svg {
width: 12px;
height: 12px;
}

.nft-action-on-mission {
background: rgba(168, 85, 247, 0.1);
color: #a855f7;
border: 1px solid rgba(168, 85, 247, 0.25);
cursor: default;
}

.nft-action-on-mission:hover {
background: rgba(168, 85, 247, 0.15);
}

/* Marketplace Listed NFT badge and overlay */
.nft-card.marketplace-listed .nft-card-image::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(234, 179, 8, 0.15);
pointer-events: none;
z-index: 3;
}

.nft-card.marketplace-listed {
opacity: 0.7;
cursor: not-allowed;
}

.nft-card-listed-badge {
position: absolute;
top: 8px;
left: 8px;
background: linear-gradient(135deg, rgba(234, 179, 8, 0.95), rgba(202, 138, 4, 0.95));
color: #fff;
padding: 4px 8px;
border-radius: 6px;
font-size: 0.6rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
display: flex;
align-items: center;
gap: 4px;
z-index: 6;
backdrop-filter: blur(4px);
box-shadow: 0 2px 8px rgba(234, 179, 8, 0.4);
}

.nft-card-listed-badge svg {
width: 12px;
height: 12px;
}

/* Image Modal */
.image-modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.9);
display: none;
align-items: center;
justify-content: center;
z-index: 2000;
}

.image-modal.visible {
display: flex;
}

.image-modal img {
max-width: 90vw;
max-height: 90vh;
border-radius: 12px;
}

.image-modal-close {
position: absolute;
top: 20px;
right: 20px;
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 50%;
color: #fff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
}

.image-modal-close:hover {
background: rgba(255, 255, 255, 0.2);
}

/* Action Panel */
.action-panel {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: rgba(20, 20, 25, 0.95);
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding: 1rem 2rem;
display: flex;
justify-content: space-between;
align-items: center;
backdrop-filter: blur(10px);
transform: translateY(100%);
transition: transform 0.3s;
}

.action-panel.visible {
transform: translateY(0);
}

.action-panel-info {
display: flex;
align-items: center;
gap: 1.5rem;
}

.action-panel-selected {
color: rgba(255, 255, 255, 0.7);
}

.action-panel-selected strong {
color: #fff;
}

.action-panel-rewards {
color: var(--primary-color);
font-weight: 600;
}

.action-panel-buttons {
display: flex;
gap: 1rem;
}

.action-btn {
padding: 0.875rem 2rem;
border-radius: 10px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
position: relative;
z-index: 1;
}

.action-btn.primary {
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
color: #000;
border: none;
}

.action-btn.secondary {
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.2);
color: #fff;
}

.action-btn:hover {
transform: translateY(-2px);
}

.action-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none;
}

.action-btn .btn-spinner {
display: inline-block;
width: 16px;
height: 16px;
border: 2px solid rgba(0, 0, 0, 0.2);
border-top-color: currentColor;
border-radius: 50%;
animation: spin 0.8s linear infinite;
vertical-align: middle;
margin-right: 6px;
}

/* Empty State */
.empty-state {
text-align: center;
padding: 4rem 2rem;
}

.empty-state svg {
width: 80px;
height: 80px;
color: rgba(255, 255, 255, 0.2);
margin-bottom: 1.5rem;
}

.empty-state h3 {
font-size: 1.25rem;
margin-bottom: 0.5rem;
}

.empty-state p {
color: rgba(255, 255, 255, 0.5);
}

/* Maintenance State */
.maintenance-state svg {
color: #ff9f43;
}

.maintenance-state h3 {
color: #ff9f43;
}

/* Loading */
.loading {
display: flex;
align-items: center;
justify-content: center;
padding: 4rem;
}

.loading::after {
content: '';
width: 48px;
height: 48px;
border: 3px solid rgba(108, 255, 143, 0.2);
border-top-color: var(--primary-color);
border-radius: 50%;
animation: spin 0.8s linear infinite;
}

@keyframes spin {
to { transform: rotate(360deg); }
}

/* Toast */
.toast {
position: fixed;
bottom: 100px;
left: 50%;
transform: translateX(-50%) translateY(100px);
background: rgba(20, 20, 25, 0.95);
border: 1px solid rgba(255, 255, 255, 0.1);
padding: 1rem 1.5rem;
border-radius: 10px;
opacity: 0;
transition: all 0.3s;
z-index: 1000;
pointer-events: none;
}

.toast.visible {
transform: translateX(-50%) translateY(0);
opacity: 1;
pointer-events: auto;
}

.toast.success {
border-color: var(--primary-color);
}

.toast.error {
border-color: #ff6b6b;
}

/* Mobile */
@media (max-width: 768px) {
/* ============================================
 MOBILE OPTIMIZATIONS - Maximize NFT visibility
 ============================================ */

/* Prevent horizontal scroll (exclude .header so tools dropdown can overflow) */
.collection-tabs-wrapper,
.main,
.stats-bar-compact,
.tabs-row,
.nft-grid {
width: 100%;
max-width: 100%;
overflow-x: hidden;
}

/* Header - More compact */
.header {
padding: 0.5rem 0.75rem;
flex-wrap: nowrap;
gap: 0.5rem;
}

.header-container {
gap: 0.5rem;
padding: 0 0.5rem;
flex-wrap: nowrap;
max-width: 100%;
overflow: visible;
}

.header-logo {
flex-shrink: 0;
}

.header-logo img {
height: 28px;
}

.header-logo h1 {
font-size: 1rem;
display: none; /* Hide title on mobile to save space */
}

.header-nav {
display: none;
}

.social-links {
gap: 4px;
flex-shrink: 1;
min-width: 0;
}

.social-links a {
padding: 4px;
}

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

.header-actions {
flex-shrink: 0;
gap: 0.35rem;
margin-left: auto;
}

/* Mobile header order: tools | points | swap | shield | hamburger | wallet (rightmost) */
.header-actions .tools-dropdown { order: 1; }
.header-actions .points-btn { order: 2; }
.header-actions #headerSwapBtn { order: 3; }
.header-actions .header-security-btn { order: 4; }
.header-actions .hamburger-btn { order: 5; }
.header-actions #walletSection { order: 6; }

.connect-btn {
padding: 0.5rem 0.75rem;
font-size: 0.75rem;
white-space: nowrap;
}

/* Collection Tabs - Compact, left-aligned */
.collection-tabs-inner {
padding: 0 0.75rem;
}

.collection-tabs {
padding: 0;
gap: 0;
justify-content: flex-start;
width: 100%;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}

.collection-tab {
padding: 0.5rem 0.75rem;
font-size: 0.8rem;
gap: 0.35rem;
}

.collection-tab-icon {
width: 20px;
height: 20px;
border-radius: 4px;
}

/* Main Content - Reduced padding */
.main {
padding: 0.75rem;
padding-bottom: 90px;
}

/* Stats Bar - Much more compact */
.stats-bar-compact {
padding: 0.5rem;
gap: 0.35rem;
margin-bottom: 0.5rem;
flex-wrap: wrap;
overflow: visible;
}

.stat-box {
padding: 0.4rem 0.5rem;
flex: 1 1 0;
min-width: 0;
overflow: visible;
}

.stat-box-header {
margin-bottom: 0.2rem;
}

.stat-box-label {
font-size: 0.6rem;
}

.stat-box-value {
font-size: 0.85rem;
}

.stat-box-value img {
width: 14px;
height: 14px;
}

.stat-token-amount {
font-size: 0.82rem;
}

.stat-dropdown-primary img {
width: 14px;
height: 14px;
}

/* Total Staked on mobile — simplified: hide progress bar & total denominator */
.stat-progress-box .stat-progress-bar,
.stat-progress-box .stat-staked-total {
display: none;
}

.stat-progress-box .stat-staked-percent {
font-size: 0.6rem;
padding: 1px 4px;
margin-left: 0.15rem;
}

.stat-progress-box .stat-staked-value {
margin: 0;
}

.stat-progress-box .stat-token-amount {
font-size: 0.85rem;
}

.stat-progress-box {
order: 1;
flex: 0 1 auto;
}

.stat-dropdown-box {
flex: 1 1 0;
min-width: 0;
}

/* Position earning box first (before claimable) */
.stat-dropdown-box:not(.stat-claim-box) {
order: -1;
}

/* Hide /day text on mobile for cleaner stat display */
.rate-period {
display: none;
}

/* Stat boxes share row on mobile */
.stat-box {
flex: 1 1 0;
min-width: 0;
}

/* Action buttons on their own row */
.stat-action-btn {
order: 3;
padding: 0.35rem 0.6rem;
min-width: auto;
gap: 0.3rem;
flex: 0 0 auto;
}

.stat-action-btn svg {
width: 14px;
height: 14px;
}

.stat-action-label {
font-size: 0.55rem;
}

.stat-action-badge {
font-size: 0.55rem;
padding: 0.1rem 0.3rem;
}

.stat-action-btn.trait-sets-btn,
.stat-action-btn.bonuses-btn,
.stat-action-btn.leaderboard-btn,
.stat-action-btn.missions-btn,
.stat-action-btn.airdrops-btn {
min-width: auto;
padding: 0.4rem 0.5rem;
}

.stat-action-btn.trait-sets-btn .stat-action-label,
.stat-action-btn.bonuses-btn .stat-action-label,
.stat-action-btn.leaderboard-btn .stat-action-label,
.stat-action-btn.missions-btn .stat-action-label,
.stat-action-btn.airdrops-btn .stat-action-label {
display: none;
}

/* Divider forces action buttons to second row */
.stat-divider {
order: 2;
width: 100%;
height: 0;
margin: 0;
background: none;
flex-basis: 100%;
}

.stat-dropdown-content {
position: fixed;
left: 0.75rem;
right: 0.75rem;
top: 50%;
transform: translateY(-50%);
width: auto;
min-width: unset;
}

.revshare-pills-container {
padding: 0 0.5rem;
gap: 0;
flex-wrap: wrap;
justify-content: flex-end;
position: relative;
}
.revshare-label { display: none; }
.revshare-mobile-toggle {
display: flex;
align-items: center;
gap: 4px;
padding: 4px 8px;
background: linear-gradient(135deg, rgba(16,185,129,0.1), rgba(16,185,129,0.04));
border: 1px solid rgba(16,185,129,0.25);
border-radius: 6px;
cursor: pointer;
font-size: 0.6rem;
font-weight: 700;
color: #6ee7b7;
text-transform: uppercase;
letter-spacing: 0.3px;
white-space: nowrap;
}
.revshare-mobile-toggle svg { width: 10px; height: 10px; transition: transform 0.2s; }
.revshare-mobile-toggle.expanded svg { transform: rotate(180deg); }
.revshare-mobile-pills {
display: none;
position: absolute;
top: 100%;
right: 0;
margin-top: 6px;
background: rgba(15, 15, 25, 0.95);
border: 1px solid rgba(16,185,129,0.2);
border-radius: 8px;
padding: 6px;
z-index: 100;
backdrop-filter: blur(12px);
box-shadow: 0 8px 24px rgba(0,0,0,0.5);
flex-direction: column;
gap: 4px;
min-width: 180px;
}
.revshare-mobile-pills.expanded { display: flex; }
.revshare-mobile-pills .revshare-pill {
padding: 6px 8px;
gap: 6px;
border-radius: 6px;
width: 100%;
}
.revshare-pill-img { width: 14px; height: 14px; }
.revshare-pill-amount { font-size: 0.65rem; }
.revshare-pill-dropdown { right: auto; left: 0; min-width: 200px; }
.rpd-image { width: 44px; height: 44px; }
/* Hide desktop pills on mobile, show config name inline instead of dropdown */
.revshare-pills-container > .revshare-pill { display: none; }
.revshare-mobile-pills .revshare-pill-dropdown { display: none !important; }
.revshare-mobile-pills .revshare-pill-name {
display: inline;
font-size: 0.6rem;
color: rgba(255,255,255,0.5);
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.revshare-mobile-pills .revshare-pill { flex-wrap: wrap; cursor: pointer; }
.revshare-mobile-detail {
display: none;
width: 100%;
padding-top: 4px;
border-top: 1px solid rgba(255,255,255,0.06);
margin-top: 4px;
font-size: 0.6rem;
color: rgba(255,255,255,0.5);
line-height: 1.5;
}
.revshare-mobile-detail.expanded { display: block; }
.revshare-mobile-detail span { color: rgba(255,255,255,0.8); font-weight: 600; }

/* Tabs Row - Horizontal compact layout */
.tabs-row {
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
margin-bottom: 0.5rem;
padding-bottom: 0.5rem;
}

.tabs {
flex: 0 0 auto;
gap: 0;
}

.tab-btn {
padding: 0.5rem 0.75rem;
font-size: 0.85rem;
}

.tab-badge {
font-size: 0.6rem;
padding: 0.1rem 0.3rem;
margin-left: 0.25rem;
}

/* Hide airdrops tab on mobile — icon button covers it */
#airdropsTab {
display: none !important;
}

/* Right Controls - Compact single row */
.tabs-right-controls {
flex: 1;
justify-content: flex-start;
gap: 0.35rem;
flex-wrap: nowrap;
}

.search-box-compact {
flex: 0 0 32px;
min-width: 32px;
width: 32px;
padding: 0.4rem;
height: 32px;
cursor: pointer;
overflow: hidden;
transition: all 0.25s ease;
justify-content: center;
}

.search-box-compact svg {
width: 14px;
height: 14px;
flex-shrink: 0;
}

.search-box-compact input {
font-size: 0.75rem;
width: 0;
padding: 0;
opacity: 0;
transition: all 0.25s ease;
}

/* Expand search on focus */
.search-box-compact:focus-within {
flex: 0 1 180px;
width: auto;
padding: 0.4rem 0.6rem;
justify-content: flex-start;
}

.search-box-compact:focus-within input {
width: 100%;
opacity: 1;
}

/* Filter/Sort Dropdown - Compact */
.filter-sort-wrapper {
height: 32px;
}

.filter-sort-wrapper select,
#nftFilterSelect {
padding: 0.4rem 1.5rem 0.4rem 0.5rem;
font-size: 0.7rem;
height: 32px;
}

/* Select All Button - Compact */
.select-all-btn {
padding: 0.4rem 0.6rem;
font-size: 0.7rem;
height: 32px;
white-space: nowrap;
}

.select-all-btn svg {
width: 12px;
height: 12px;
}

/* Trait filter on mobile — wrap so filter controls get their own row */
.tabs-right-controls.trait-filter-active {
flex-wrap: wrap;
}

/* Keep search box compact (icon-only) when trait filter active on mobile */
.tabs-right-controls.trait-filter-active .search-box-compact {
flex: 0 0 32px;
width: 32px;
min-width: 32px;
}

.tabs-right-controls.trait-filter-active .search-box-compact input {
width: 0;
padding: 0;
opacity: 0;
}

/* Trait filter controls take full width on their own row */
.tabs-right-controls.trait-filter-active .trait-filter-options {
flex: 1 1 100%;
order: 10;
display: flex;
gap: 0.35rem;
}

.tabs-right-controls.trait-filter-active .trait-filter-options select {
height: 32px;
font-size: 0.75rem;
padding: 0.4rem 0.5rem;
min-width: 0;
max-width: none;
flex: 1 1 0;
}

.tabs-right-controls.trait-filter-active .trait-value-multi {
flex: 1 1 0;
min-width: 0;
max-width: none;
}

.tabs-right-controls.trait-filter-active .trait-value-toggle {
height: 32px;
font-size: 0.75rem;
padding: 0.4rem 0.5rem;
}

.tabs-right-controls.trait-filter-active .clear-filter-btn {
height: 32px;
width: 32px;
flex-shrink: 0;
}

.tabs-right-controls.trait-filter-active .trait-value-dropdown {
min-width: 180px;
right: 0;
left: auto;
}

/* NFT Grid - Tighter spacing */
.nft-grid {
grid-template-columns: repeat(2, 1fr);
gap: 0.5rem;
}

/* NFT Cards - Compact */
.nft-card {
border-radius: 10px;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
user-select: none;
-webkit-user-select: none;
transition: none;
}

/* Disable hover effects on touch — only on non-selected cards */
.nft-card:hover:not(.selected) {
transform: none;
border-color: rgba(255, 255, 255, 0.1);
box-shadow: none;
}

/* Hide expand button on mobile — it intercepts the first tap */
.nft-card-expand {
display: none !important;
}

/* Keep selected styling visible on mobile */
.nft-card.selected {
transform: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 2px var(--primary-color);
}

.nft-card-info {
padding: 0.5rem;
border-radius: 0 0 10px 10px;
}

.nft-card-name {
font-size: 0.8rem;
margin-bottom: 0.25rem;
}

.nft-card-stats {
gap: 0.25rem;
}

.nft-card-stat-label {
font-size: 0.55rem;
}

.nft-card-stat-value {
font-size: 0.7rem;
}

.nft-card-actions {
gap: 0.25rem;
padding: 0.35rem;
}

.nft-card-action-btn {
padding: 0.35rem 0.5rem;
font-size: 0.65rem;
gap: 0.2rem;
}

.nft-card-action-btn svg {
width: 10px;
height: 10px;
}

/* Action Panel - Compact */
.action-panel {
flex-direction: column;
gap: 0.5rem;
padding: 0.75rem;
}

.action-panel-info {
justify-content: center;
gap: 0.5rem;
font-size: 0.8rem;
width: 100%;
text-align: center;
pointer-events: none;
}

.action-panel-info span {
pointer-events: auto;
}

.action-panel-buttons {
width: 100%;
display: flex;
flex-wrap: nowrap;
gap: 0.35rem;
position: relative;
z-index: 2;
}

.action-panel-buttons .action-btn {
flex: 1 1 0;
min-width: 0;
padding: 0.6rem 0.4rem;
font-size: 0.75rem;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
position: relative;
z-index: 1;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}

.action-panel-buttons .action-btn.secondary {
flex: 0 0 auto;
min-width: 45px;
padding: 0.6rem 0.5rem;
}

/* Empty State - Compact */
.empty-state {
padding: 2rem 1rem;
}

.empty-state svg {
width: 50px;
height: 50px;
margin-bottom: 1rem;
}

.empty-state h3 {
font-size: 1rem;
}

.empty-state p {
font-size: 0.85rem;
}

/* Placeholder card - Compact */
.nft-card.placeholder-card .nft-card-info {
padding: 0.5rem;
}

.placeholder-card .empty-state {
padding: 1rem 0.5rem;
}

.placeholder-card .empty-state svg {
width: 30px;
height: 30px;
margin-bottom: 0.5rem;
}

.placeholder-card .empty-state h3 {
font-size: 0.75rem;
}

.placeholder-card .empty-state p {
font-size: 0.65rem;
}

/* Claim button dropdown - prevent overflow */
.nft-claim-dropdown {
font-size: 0.7rem;
}

.nft-claim-dropdown-title {
font-size: 0.6rem;
}

.nft-claim-dropdown-value {
font-size: 0.7rem;
}

/* Hamburger Menu Button - Only visible on mobile */
.hamburger-btn {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 8px;
cursor: pointer;
transition: all 0.2s;
flex-shrink: 0;
}

.hamburger-btn:hover,
.hamburger-btn:active {
background: rgba(255, 255, 255, 0.1);
}

.hamburger-btn svg {
color: #fff;
}

/* Mobile Menu Overlay */
.mobile-menu-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.85);
z-index: 9999;
opacity: 0;
transition: opacity 0.3s ease;
}

.mobile-menu-overlay.open {
display: flex;
opacity: 1;
}

.mobile-menu {
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 280px;
max-width: 85vw;
background: #1a1a2e;
border-left: 1px solid rgba(255, 255, 255, 0.1);
padding: 1rem;
transform: translateX(100%);
transition: transform 0.3s ease;
overflow-y: auto;
}

.mobile-menu-overlay.open .mobile-menu {
transform: translateX(0);
}

.mobile-menu-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1.5rem;
padding-bottom: 1rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-menu-title {
color: #fff;
font-size: 1rem;
font-weight: 600;
}

.mobile-menu-close {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.05);
border: none;
border-radius: 6px;
color: #fff;
cursor: pointer;
}

.mobile-menu-section {
margin-bottom: 1.5rem;
}

.mobile-menu-section-title {
color: rgba(255, 255, 255, 0.5);
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 0.75rem;
}

.mobile-menu-links {
display: flex;
flex-direction: column;
gap: 0.5rem;
}

.mobile-menu-link {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 8px;
color: #fff;
text-decoration: none;
font-size: 0.9rem;
transition: all 0.2s;
}

.mobile-menu-link:hover,
.mobile-menu-link:active {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.15);
}

.mobile-menu-link img {
width: 20px;
height: 20px;
}

.mobile-menu-link svg {
width: 20px;
height: 20px;
color: rgba(255, 255, 255, 0.7);
}

/* Hide social links on mobile - they're in the menu now */
.social-links {
display: none !important;
}

/* Wallet button - icon only on mobile */
.connect-btn {
width: 36px;
height: 36px;
padding: 0 !important;
font-size: 0 !important;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
}

.connect-btn::before {
content: '';
width: 18px;
height: 18px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12V7H5a2 2 0 0 1 0-4h14v4'/%3E%3Cpath d='M3 5v14a2 2 0 0 0 2 2h16v-5'/%3E%3Cpath d='M18 12a2 2 0 0 0 0 4h4v-4Z'/%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
filter: brightness(0) invert(1);
}

/* Connected wallet state - stay as icon on mobile */
.connect-btn.connected {
width: 36px;
height: 36px;
padding: 0 !important;
font-size: 0 !important;
}

.connect-btn.connected::before {
content: '';
display: block;
width: 18px;
height: 18px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12V7H5a2 2 0 0 1 0-4h14v4'/%3E%3Cpath d='M3 5v14a2 2 0 0 0 2 2h16v-5'/%3E%3Cpath d='M18 12a2 2 0 0 0 0 4h4v-4Z'/%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
filter: brightness(0) invert(1);
}
}

/* Extra small screens */
@media (max-width: 380px) {
.header-logo img {
height: 24px;
}

.hamburger-btn {
width: 32px;
height: 32px;
}

.connect-btn {
width: 32px;
height: 32px;
}

.connect-btn.connected {
width: 32px;
height: 32px;
padding: 0 !important;
font-size: 0 !important;
}

.stat-box {
padding: 0.35rem 0.5rem;
}

.tab-btn {
padding: 0.4rem 0.5rem;
font-size: 0.75rem;
}

.nft-grid {
gap: 0.4rem;
}

.nft-card-action-btn {
padding: 0.3rem 0.4rem;
font-size: 0.6rem;
}
}

/* Collection Tabs */
.collection-tabs-wrapper {
background: rgba(0, 0, 0, var(--collection-tabs-opacity, 0.3));
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
display: none;
}

.collection-tabs-wrapper.visible {
display: block;
}

.collection-tabs-inner {
display: flex;
align-items: center;
max-width: 1400px;
margin: 0 auto;
padding: 0 2rem;
}

.collection-tabs {
display: none;
overflow-x: auto;
gap: 0;
align-items: stretch;
flex: 1;
min-width: 0;
}

.collection-tabs.visible {
display: flex;
justify-content: flex-start;
}

.collection-tab {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.25rem;
background: none;
border: none;
color: rgba(255, 255, 255, 0.5);
font-size: 0.9rem;
cursor: pointer;
transition: all 0.2s;
border-bottom: 2px solid transparent;
white-space: nowrap;
}

.collection-tab:hover {
color: rgba(255, 255, 255, 0.8);
background: rgba(255, 255, 255, 0.05);
}

.collection-tab.active {
color: var(--primary-color);
border-bottom-color: var(--primary-color);
}

.collection-tab-icon {
width: 24px;
height: 24px;
border-radius: 6px;
background: rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}

.collection-tab-icon img {
width: 100%;
height: 100%;
object-fit: cover;
}

/* Transfer Modal */
.transfer-modal-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.9);
z-index: 10000;
justify-content: center;
align-items: center;
padding: 20px;
}
.transfer-modal-overlay.active {
display: flex;
animation: fadeIn 0.2s ease;
}
.transfer-modal {
width: 100%;
max-width: 600px;
height: 90vh;
max-height: 800px;
background: linear-gradient(180deg, #0d1421 0%, #111827 100%);
border-radius: 16px;
display: flex;
flex-direction: column;
box-shadow: 0 25px 80px rgba(0, 0, 0, 0.6);
border: 1px solid rgba(255, 255, 255, 0.1);
animation: slideUp 0.3s ease;
overflow: hidden;
}
.transfer-modal__header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(0, 0, 0, 0.2);
}
.transfer-modal__title {
font-size: 1.1rem;
font-weight: 600;
color: #fff;
display: flex;
align-items: center;
gap: 10px;
}
.transfer-modal__title svg {
width: 20px;
height: 20px;
color: var(--primary-color, #6cff8f);
}
.transfer-modal__close {
background: rgba(255, 255, 255, 0.1);
border: none;
color: rgba(255, 255, 255, 0.7);
cursor: pointer;
padding: 8px;
border-radius: 8px;
display: flex;
transition: all 0.2s;
}
.transfer-modal__close:hover {
background: rgba(255, 255, 255, 0.2);
color: #fff;
}
.transfer-modal__close svg {
width: 20px;
height: 20px;
}
.transfer-modal__body {
flex: 1;
overflow: hidden;
}
.transfer-modal__iframe {
width: 100%;
height: 100%;
border: none;
background: transparent;
}
@media (max-width: 640px) {
.transfer-modal {
max-width: 100%;
height: 95vh;
border-radius: 12px 12px 0 0;
margin-top: auto;
}
}

/* Airdrop Claim Processing Overlay */
.airdrop-processing-overlay {
display: none;
position: fixed;
inset: 0;
z-index: 10000;
background: rgba(0, 0, 0, 0.85);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
align-items: center;
justify-content: center;
flex-direction: column;
gap: 1.5rem;
}

.airdrop-processing-overlay.active {
display: flex;
}

.airdrop-processing-spinner {
width: 56px;
height: 56px;
border: 3px solid rgba(167, 139, 250, 0.2);
border-top-color: #a78bfa;
border-radius: 50%;
animation: spin 0.8s linear infinite;
}

.airdrop-processing-step {
font-size: 1.1rem;
font-weight: 600;
color: #fff;
text-align: center;
}

.airdrop-processing-substep {
font-size: 0.85rem;
color: rgba(255, 255, 255, 0.5);
text-align: center;
max-width: 300px;
}

.airdrop-processing-steps {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin-top: 0.5rem;
}

.airdrop-processing-steps .step-item {
display: flex;
align-items: center;
gap: 0.6rem;
font-size: 0.85rem;
color: rgba(255, 255, 255, 0.35);
transition: color 0.3s;
}

.airdrop-processing-steps .step-item.active {
color: #a78bfa;
}

.airdrop-processing-steps .step-item.done {
color: #14F195;
}

.airdrop-processing-steps .step-icon {
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}