/* ── Variables ─────────────────────────────────────────────────────────── */
:root {
    --bg:           #0B1120;
    --bg-card:      #111827;
    --bg-card-2:    #1A2744;
    --bg-nav:       #0D1829;
    --border:       #1E2D4A;
    --border-light: #243353;

    --navy:         #1A2744;
    --gold:         #F5C518;
    --gold-dim:     #C49A10;
    --gold-bg:      rgba(245,197,24,0.08);

    --text:         #E8EDF5;
    --text-muted:   #7A90B5;
    --text-dim:     #4A607A;

    --green:        #10B981;
    --green-bg:     rgba(16,185,129,0.12);
    --red:          #EF4444;
    --red-bg:       rgba(239,68,68,0.12);
    --purple:       #8B5CF6;
    --purple-bg:    rgba(139,92,246,0.12);

    /* Chain colors */
    --sol:   #14F195;
    --base:  #0052FF;
    --eth:   #627EEA;
    --bsc:   #F3BA2F;

    --font-head: 'Montserrat', sans-serif;
    --font-body: 'Open Sans', sans-serif;

    --radius:    8px;
    --radius-lg: 12px;
    --radius-xl: 16px;

    --shadow:    0 2px 8px rgba(0,0,0,0.4);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.5);

    --container: 1280px;
    --header-h:  60px;
    --subnav-h:  48px;
}

/* ── Reset ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.6;
    min-height: 100vh;
}

a { color: var(--gold); text-decoration: none; }
a:hover { text-decoration: underline; }

img, svg { display: block; }

button { cursor: pointer; border: none; background: none; font-family: inherit; }

input, select, textarea {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--text);
}

/* ── Layout ────────────────────────────────────────────────────────────── */
.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 24px;
}

/* ── Typography ────────────────────────────────────────────────────────── */
h1, h2, h3, h4 {
    font-family: var(--font-head);
    font-weight: 700;
    line-height: 1.3;
}

.section-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 4px;
}

.section-sub {
    color: var(--text-muted);
    margin-bottom: 24px;
}

/* ── Utilities ─────────────────────────────────────────────────────────── */
.hidden { display: none !important; }
.accent { color: var(--gold); }
.gold   { color: var(--gold); }
.green  { color: var(--green); }
.red    { color: var(--red); }
.muted  { color: var(--text-muted); }

/* ── Buttons ───────────────────────────────────────────────────────────── */
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--gold);
    color: #000;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 13px;
    padding: 8px 16px;
    border-radius: var(--radius);
    transition: background 0.15s, transform 0.1s;
}
.btn-primary:hover { background: #e0b015; }
.btn-primary:active { transform: scale(0.97); }

.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-card-2);
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: var(--radius);
    border: 1px solid var(--border-light);
    transition: background 0.15s;
}
.btn-secondary:hover { background: var(--border-light); }

.btn-outline-sm {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    border: 1px solid var(--border);
    padding: 5px 10px;
    border-radius: var(--radius);
    transition: color 0.15s, border-color 0.15s;
}
.btn-outline-sm:hover {
    color: var(--text);
    border-color: var(--gold);
    text-decoration: none;
}

.btn-danger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(239,68,68,0.15);
    color: var(--red);
    font-size: 13px;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: var(--radius);
    border: 1px solid rgba(239,68,68,0.3);
    transition: background 0.15s;
}
.btn-danger:hover { background: rgba(239,68,68,0.25); }

.btn-sm { padding: 5px 10px !important; font-size: 12px !important; }

.btn-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius);
    color: var(--text-muted);
    transition: color 0.15s, background 0.15s;
}
.btn-icon:hover { color: var(--text); background: var(--bg-card-2); }

/* ── Form elements ─────────────────────────────────────────────────────── */
.input-field {
    width: 100%;
    background: var(--bg);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    padding: 8px 12px;
    color: var(--text);
    transition: border-color 0.15s;
    outline: none;
}
.input-field:focus { border-color: var(--gold); }
.input-field::placeholder { color: var(--text-dim); }

textarea.input-field { resize: vertical; }

/* ── Spinner ───────────────────────────────────────────────────────────── */
.spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--border-light);
    border-top-color: var(--gold);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Toast ─────────────────────────────────────────────────────────────── */
.toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.toast {
    background: var(--bg-card-2);
    border: 1px solid var(--border-light);
    border-left: 3px solid var(--gold);
    color: var(--text);
    padding: 12px 16px;
    border-radius: var(--radius);
    font-size: 13px;
    box-shadow: var(--shadow-lg);
    animation: slideIn 0.25s ease;
    max-width: 320px;
}
.toast.success { border-left-color: var(--green); }
.toast.error   { border-left-color: var(--red); }
@keyframes slideIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }

/* ── Empty state ───────────────────────────────────────────────────────── */
.empty-state {
    text-align: center;
    padding: 80px 24px;
    color: var(--text-muted);
}
.empty-icon { font-size: 48px; margin-bottom: 16px; }
.empty-state h3 {
    font-size: 20px;
    color: var(--text);
    margin-bottom: 8px;
}
.empty-state p { max-width: 420px; margin: 0 auto; }

/* ── Scrollbar ─────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-dim); }

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .container { padding: 0 16px; }
}
@media (max-width: 768px) {
    :root { --header-h: 56px; }
    .container { padding: 0 12px; }
}
@media (max-width: 480px) {
    body { font-size: 13px; }
}