:root {
    --background: 218 30% 8%;
    --foreground: 210 16% 82%;
    --card: 218 30% 10%;
    --card-foreground: 210 16% 82%;
    --popover: 218 30% 10%;
    --popover-foreground: 210 16% 82%;
    --primary: 200 100% 75%;
    --primary-foreground: 218 30% 8%;
    --secondary: 190 100% 50%;
    --secondary-foreground: 218 30% 8%;
    --muted: 218 30% 12%;
    --muted-foreground: 210 16% 60%;
    --accent: 190 100% 50%;
    --accent-foreground: 218 30% 8%;
    --destructive: 0 75% 65%;
    --destructive-foreground: 210 16% 82%;
    --success: 155 100% 55%;
    --success-foreground: 218 30% 8%;
    --border: 218 30% 15%;
    --input: 218 30% 15%;
    --ring: 200 100% 75%;
    --radius: 0.5rem;
}

/* Global layout */
html { scroll-behavior: smooth; }
.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1rem;
}
@media (min-width: 1024px) {
    .container { padding: 0 2rem; }
}

/* Shared header styles */
.header {
    border-bottom: 1px solid hsl(var(--border));
    background: hsl(var(--card) / 0.5);
    backdrop-filter: blur(12px);
    position: sticky;
    top: 0;
    z-index: 50;
}
.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 4rem;
}
.logo-section {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.header nav a:focus-visible,
#mobile-menu a:focus-visible,
#mobile-menu button:focus-visible {
    outline: none;
    box-shadow: none;
}
.logo {
    width: 2rem;
    height: 2rem;
    background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--secondary)));
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.status-pill {
    background: hsl(var(--success));
    color: hsl(var(--success-foreground));
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.status-dot {
    width: 0.5rem;
    height: 0.5rem;
    background: hsl(var(--success-foreground));
    border-radius: 50%;
}

.glow-primary { box-shadow: 0 0 20px hsl(var(--primary) / 0.3); }

/* Wallet modal */
body.wallet-modal-open {
    overflow: hidden;
}

.wallet-modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.wallet-modal.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.wallet-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(7, 11, 19, 0.85);
    backdrop-filter: blur(10px);
}

.wallet-modal__panel {
    position: relative;
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: 1rem;
    padding: 1.5rem;
    width: min(420px, calc(100% - 2rem));
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
    color: hsl(var(--foreground));
    z-index: 1;
}

.wallet-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.wallet-modal__close {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 9999px;
    border: 1px solid hsl(var(--border));
    background: transparent;
    color: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.wallet-modal__close:hover {
    border-color: hsl(var(--accent));
    color: hsl(var(--accent));
}

.wallet-modal__status {
    font-size: 0.875rem;
    color: hsl(var(--muted-foreground));
}

.wallet-modal__options {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 1.25rem 0;
}

.wallet-option {
    width: 100%;
    border: 1px solid hsl(var(--border));
    border-radius: 0.85rem;
    background: hsl(var(--card-foreground) / 0.02);
    padding: 0.85rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    text-align: left;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.wallet-option strong {
    display: block;
    font-size: 1rem;
    font-weight: 600;
}

.wallet-option small {
    display: block;
    font-size: 0.75rem;
    color: hsl(var(--muted-foreground));
}

.wallet-option:hover,
.wallet-option:focus-visible {
    border-color: hsl(var(--accent));
    transform: translateY(-1px);
}

.wallet-modal__hint {
    font-size: 0.75rem;
    color: hsl(var(--muted-foreground));
    line-height: 1.4;
}