/* ============================================
   Criptomonedas VIP Headless - Complete Stylesheet
   ============================================ */

/* ---------- CSS Custom Properties ---------- */
:root {
    --color-bg: #f8f9fa;
    --color-surface: #ffffff;
    --color-surface-alt: #f1f3f5;
    --color-border: #e9ecef;
    --color-border-light: #f1f3f5;
    --color-text: #1a1a2e;
    --color-text-secondary: #6c757d;
    --color-text-muted: #adb5bd;
    --color-positive: #16c784;
    --color-positive-bg: #e8f8f0;
    --color-negative: #ea3943;
    --color-negative-bg: #fdeaeb;
    --color-accent: #f7931a;
    --color-accent-light: #fff4e6;
    --color-link: #3861fb;
    --color-header-bg: #ffffff;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-mono: 'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', monospace;
    --header-height: 64px;
    --max-width: 1360px;
}

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

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-sans);
    color: var(--color-text);
    background: var(--color-bg);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--color-link); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }
button { cursor: pointer; border: none; background: none; font: inherit; }
input { font: inherit; }
table { border-collapse: collapse; width: 100%; }

/* ---------- Header ---------- */
#site-header {
    position: sticky;
    top: 26px;
    z-index: 999;
    background: var(--color-header-bg);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    height: var(--header-height);
}

.header-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    height: 100%;
    gap: 24px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--color-text);
    font-weight: 800;
    font-size: 1.3rem;
    flex-shrink: 0;
}

.logo-icon {
    font-size: 1.5rem;
    color: var(--color-accent);
}

.main-nav {
    display: flex;
    gap: 4px;
}

.nav-link {
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    color: var(--color-text-secondary);
    font-weight: 500;
    font-size: 0.9rem;
    text-decoration: none;
    transition: all 0.15s;
}

.nav-link:hover {
    color: var(--color-text);
    background: var(--color-surface-alt);
    text-decoration: none;
}

.nav-link.active {
    color: var(--color-text);
    background: var(--color-surface-alt);
    font-weight: 600;
}

/* ---------- Nav Dropdowns ---------- */
.nav-item.has-dropdown {
    position: relative;
}

.nav-chevron {
    opacity: 0.5;
    transition: transform 0.2s;
}

.nav-item.has-dropdown:hover .nav-chevron {
    transform: rotate(180deg);
    opacity: 0.8;
}

.nav-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    min-width: 220px;
    padding: 8px 0;
    padding-top: 12px;
    z-index: 1000;
}

.nav-dropdown::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 0;
    right: 0;
    height: 8px;
}

.nav-item.has-dropdown:hover .nav-dropdown {
    display: block;
}

.nav-dropdown a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 400;
    transition: background 0.15s, color 0.15s;
}

.nav-dropdown a:hover {
    background: var(--color-surface-alt);
    color: var(--color-text);
    text-decoration: none;
}

.nav-dropdown a .icon {
    color: var(--color-text-muted);
    flex-shrink: 0;
}

.nav-dropdown a:hover .icon {
    color: var(--color-link);
}

/* ---------- Search ---------- */
.search-wrapper {
    position: relative;
    margin-left: auto;
    width: 280px;
    flex-shrink: 0;
}

.search-input {
    width: 100%;
    padding: 8px 14px;
    border: 1px solid var(--color-border);
    border-radius: 20px;
    background: var(--color-surface-alt);
    font-size: 0.85rem;
    color: var(--color-text);
    outline: none;
    transition: all 0.2s;
}

.search-input:focus {
    border-color: var(--color-link);
    background: var(--color-surface);
    box-shadow: 0 0 0 3px rgba(56, 97, 251, 0.1);
}

.search-input::placeholder {
    color: var(--color-text-muted);
}

.search-results {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    max-height: 400px;
    overflow-y: auto;
    z-index: 200;
}

.search-results.active { display: block; }

.search-result-item {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    gap: 10px;
    cursor: pointer;
    transition: background 0.1s;
    text-decoration: none;
    color: var(--color-text);
}

.search-result-item:hover {
    background: var(--color-surface-alt);
    text-decoration: none;
}

.search-result-item img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    flex-shrink: 0;
}

.search-result-name {
    font-weight: 600;
    font-size: 0.9rem;
}

.search-result-symbol {
    color: var(--color-text-muted);
    font-size: 0.8rem;
    margin-left: 4px;
    text-transform: uppercase;
}

.search-result-rank {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    background: var(--color-surface-alt);
    padding: 2px 8px;
    border-radius: 10px;
}

.search-result-price {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-text-secondary);
}

.search-no-results {
    padding: 20px;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.85rem;
}

/* ---------- Mobile Menu ---------- */
.mobile-menu-btn {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 6px;
}

.mobile-menu-btn span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--color-text);
    transition: all 0.2s;
    border-radius: 1px;
}

/* ---------- Main Content ---------- */
#app {
    flex: 1;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 24px 20px;
    width: 100%;
}

/* ---------- Loading ---------- */
.loading-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    color: var(--color-text-muted);
}

.spinner {
    width: 36px;
    height: 36px;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-bottom: 16px;
}

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

/* ---------- Market Stats Bar ---------- */
.market-stats-bar {
    display: flex;
    gap: 24px;
    padding: 16px 0;
    margin-bottom: 24px;
    overflow-x: auto;
    flex-wrap: wrap;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    white-space: nowrap;
}

.stat-label {
    color: var(--color-text-muted);
}

.stat-value {
    font-weight: 600;
    color: var(--color-text);
}

/* ---------- Section Titles ---------- */
.section-title {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--color-text);
}

.section-subtitle {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    margin-top: -12px;
    margin-bottom: 20px;
}

/* ---------- Movers Cards (Gainers/Losers) ---------- */
.movers-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 8px 0 16px;
}

.movers-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 20px;
}

.movers-card h3 {
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.movers-card h3 .badge-up {
    background: var(--color-positive-bg);
    color: var(--color-positive);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 600;
}

.movers-card h3 .badge-down {
    background: var(--color-negative-bg);
    color: var(--color-negative);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 600;
}

.mover-item {
    display: flex;
    align-items: center;
    padding: 8px 0;
    gap: 10px;
    text-decoration: none;
    color: var(--color-text);
}

.mover-item:hover { text-decoration: none; }

.mover-item + .mover-item {
    border-top: 1px solid var(--color-border-light);
}

.mover-item img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
}

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

.mover-name {
    font-weight: 600;
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mover-symbol {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
}

.mover-price {
    font-size: 0.85rem;
    font-weight: 500;
    text-align: right;
}

.mover-change {
    font-size: 0.8rem;
    font-weight: 600;
    text-align: right;
    min-width: 65px;
}

/* ---------- Coin Table ---------- */
.table-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    flex-wrap: wrap;
    gap: 8px;
}

.table-info {
    font-size: 0.82rem;
    color: var(--color-text-muted);
}

.table-container {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.coin-table {
    width: 100%;
    font-size: 0.88rem;
}

.coin-table thead {
    background: var(--color-surface-alt);
    position: sticky;
    top: 0;
    z-index: 10;
}

.coin-table th {
    padding: 8px 8px;
    text-align: right;
    font-weight: 600;
    font-size: 0.78rem;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition: color 0.15s;
    border-bottom: 1px solid var(--color-border);
}

.coin-table th:hover {
    color: var(--color-text);
}

.coin-table th.sort-active {
    color: var(--color-link);
}

.coin-table th.sort-active::after {
    content: ' \25B2';
    font-size: 0.6rem;
}

.coin-table th.sort-active.sort-desc::after {
    content: ' \25BC';
}

.coin-table th:first-child,
.coin-table th:nth-child(2) {
    text-align: left;
}

.coin-table td {
    padding: 6px 8px;
    text-align: right;
    border-bottom: 1px solid #f0f0f0;
    white-space: nowrap;
}

.coin-table td:first-child {
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.82rem;
    width: 50px;
}

.coin-table tbody tr {
    transition: background 0.1s;
    cursor: pointer;
}

.coin-table tbody tr:hover {
    background: var(--color-surface-alt);
}

.coin-table tbody tr:last-child td {
    border-bottom: none;
}

.coin-name-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
}

.coin-name-cell img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex-shrink: 0;
}

.coin-name-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.coin-name-text .name {
    font-weight: 600;
    font-size: 0.88rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--color-text);
}

.coin-name-text .symbol {
    font-size: 0.72rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    font-weight: 500;
}

.price-cell {
    font-weight: 600;
    font-family: var(--font-mono);
    font-size: 0.85rem;
}

.change-positive {
    color: var(--color-positive);
    font-weight: 600;
}

.change-negative {
    color: var(--color-negative);
    font-weight: 600;
}

.sparkline-cell {
    width: 120px;
    padding: 8px 14px 8px 8px;
}

.sparkline-cell svg {
    width: 100%;
    height: 36px;
}

/* ---------- Pagination ---------- */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    margin-top: 24px;
    padding: 16px 0;
}

.pagination button,
.pagination a {
    padding: 8px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    text-decoration: none;
}

.pagination button:hover,
.pagination a:hover {
    border-color: var(--color-link);
    color: var(--color-link);
    text-decoration: none;
}

.pagination .active {
    background: var(--color-link);
    color: white;
    border-color: var(--color-link);
}

.pagination .disabled {
    opacity: 0.4;
    pointer-events: none;
}

.pagination .ellipsis {
    border: none;
    background: none;
    cursor: default;
    color: var(--color-text-muted);
}

.pagination .ellipsis:hover {
    border: none;
    color: var(--color-text-muted);
}

/* ---------- Ranking Top Navigation ---------- */
.ranking-top-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding: 10px 14px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

.ranking-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    color: var(--color-text);
    cursor: pointer;
    transition: all 0.15s;
}

.ranking-nav-btn:hover:not(:disabled) {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.ranking-nav-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.ranking-nav-info {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
}

.ranking-page-input {
    width: 60px;
    padding: 6px 8px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    color: var(--color-text);
    font-size: 0.88rem;
    font-family: var(--font-mono);
    text-align: center;
    -moz-appearance: textfield;
}

.ranking-page-input::-webkit-outer-spin-button,
.ranking-page-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.ranking-page-input:focus {
    outline: none;
    border-color: var(--color-accent);
}

.ranking-nav-go {
    padding: 6px 14px;
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-sm);
    background: var(--color-accent);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
}

.ranking-nav-go:hover {
    opacity: 0.85;
}

@media (max-width: 600px) {
    .ranking-top-nav {
        flex-wrap: wrap;
        justify-content: center;
    }
    .ranking-page-input {
        width: 50px;
    }
    .pagination {
        flex-wrap: wrap;
    }
}

/* ---------- Coin Detail Page ---------- */
.coin-header {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.coin-header-left {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
    min-width: 300px;
}

.coin-header img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
}

.coin-header-info h1 {
    font-size: 1.5rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 10px;
}

.coin-header-info .symbol-badge {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-muted);
    background: var(--color-surface-alt);
    padding: 3px 10px;
    border-radius: 10px;
    text-transform: uppercase;
}

.coin-rank-badge {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--color-accent);
    background: var(--color-accent-light);
    padding: 3px 10px;
    border-radius: 10px;
}

.coin-price-section {
    margin-bottom: 28px;
}

/* Star Rating */
.coin-rating-section {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 0;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.coin-rating-display {
    display: flex;
    align-items: center;
    gap: 8px;
}
.rating-stars {
    display: inline-flex;
    gap: 2px;
    font-size: 1.2rem;
}
.rating-avg {
    font-weight: 700;
    font-size: 0.9rem;
}
.rating-count {
    color: var(--color-text-muted);
    font-size: 0.8rem;
}
.interactive-stars {
    display: inline-flex;
    gap: 4px;
}
.interactive-stars .star-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
    color: #ddd;
    font-size: 1.3rem;
    transition: color 0.15s;
    line-height: 1;
}
.interactive-stars .star-btn.filled {
    color: #f7931a;
}
.interactive-stars .star-btn.hovered {
    color: #f7931a;
}
.interactive-stars:hover .star-btn {
    color: #ddd;
}
.interactive-stars:hover .star-btn.hovered {
    color: #f7931a;
}
.rating-login-link {
    font-size: 0.85rem;
    color: var(--color-accent);
    text-decoration: none;
}
.rating-login-link:hover {
    text-decoration: underline;
}

.coin-price-large {
    font-size: 2.2rem;
    font-weight: 800;
    font-family: var(--font-mono);
    margin-bottom: 4px;
}

.coin-price-change {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.9rem;
}

.coin-change-badge {
    padding: 4px 12px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.88rem;
}

.coin-change-badge.positive {
    background: var(--color-positive-bg);
    color: var(--color-positive);
}

.coin-change-badge.negative {
    background: var(--color-negative-bg);
    color: var(--color-negative);
}

.coin-price-abs-change {
    color: var(--color-text-secondary);
    font-size: 0.85rem;
}

/* ---------- Coin Metrics Grid ---------- */
.coin-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 32px;
}

.metric-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 16px;
}

.metric-card .metric-label {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 6px;
}

.metric-card .metric-value {
    font-size: 1.05rem;
    font-weight: 700;
    font-family: var(--font-mono);
}

/* ---------- Sparkline Chart on Detail ---------- */
.coin-chart-section {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 24px;
    margin-bottom: 32px;
}

.coin-chart-section h2 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 16px;
}

.coin-chart-section svg {
    width: 100%;
    height: 250px;
}

/* ---------- Coin Description ---------- */
.coin-description {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 28px;
    margin-bottom: 32px;
}

.coin-description h2 {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 16px;
}

.coin-description .description-content {
    font-size: 0.92rem;
    line-height: 1.75;
    color: var(--color-text-secondary);
}

.coin-description .description-content h2,
.coin-description .description-content h3 {
    color: var(--color-text);
    margin-top: 24px;
    margin-bottom: 10px;
    font-size: 1.05rem;
}

.coin-description .description-content p {
    margin-bottom: 12px;
}

.coin-description .description-content a {
    color: var(--color-link);
}

.coin-description .description-content ul,
.coin-description .description-content ol {
    padding-left: 24px;
    margin-bottom: 12px;
}

.coin-description .description-content li {
    margin-bottom: 4px;
}

.coin-description .description-content .cv-section {
    margin-bottom: 20px;
}

.coin-description .description-content .cv-metrics-grid,
.coin-description .description-content .cv-exchanges-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
    margin: 14px 0;
}

.coin-description .description-content .cv-metric-card,
.coin-description .description-content .cv-exchange-card {
    background: var(--color-surface-alt);
    border-radius: var(--radius-sm);
    padding: 14px;
}

.coin-description .description-content .cv-price-highlight {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin: 14px 0;
}

.coin-description .description-content .cv-price-box {
    background: var(--color-surface-alt);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
}

.coin-description .description-content .cv-label {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
}

.coin-description .description-content .cv-timeline-item {
    border-left: 3px solid var(--color-accent);
    padding-left: 16px;
    margin-bottom: 16px;
}

.coin-description .description-content .cv-steps-list li {
    margin-bottom: 8px;
}

/* ---------- Coin Links ---------- */
.coin-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 32px;
}

.coin-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 20px;
    color: var(--color-text-secondary);
    font-size: 0.82rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.15s;
}

.coin-link-btn:hover {
    border-color: var(--color-link);
    color: var(--color-link);
    text-decoration: none;
}

/* ---------- Exchange Table ---------- */
.exchange-table {
    width: 100%;
    font-size: 0.88rem;
}

.exchange-table thead {
    background: var(--color-surface-alt);
    position: sticky;
    top: 0;
    z-index: 10;
}

.exchange-table th {
    padding: 12px 14px;
    text-align: right;
    font-weight: 600;
    font-size: 0.78rem;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    border-bottom: 1px solid var(--color-border);
}

.exchange-table th:first-child,
.exchange-table th:nth-child(2) {
    text-align: left;
}

.exchange-table td {
    padding: 12px 14px;
    text-align: right;
    border-bottom: 1px solid var(--color-border-light);
    white-space: nowrap;
}

.exchange-table td:first-child {
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.82rem;
    width: 50px;
}

.exchange-table tbody tr {
    transition: background 0.1s;
    cursor: pointer;
}

.exchange-table tbody tr:hover {
    background: var(--color-surface-alt);
}

.exchange-name-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
}

.exchange-name-cell img {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    flex-shrink: 0;
}

.exchange-name-cell .name {
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--color-text);
}

.exchange-type-badge {
    font-size: 0.65rem;
    padding: 1px 6px;
    border-radius: 4px;
    font-weight: 600;
    text-transform: uppercase;
}

.exchange-type-badge.cex {
    background: #eef2ff;
    color: #4f46e5;
}

.exchange-type-badge.dex {
    background: #fef3c7;
    color: #d97706;
}

/* ---------- Exchange Detail Page ---------- */
.exchange-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 28px;
}

.exchange-header img {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md);
}

.exchange-header h1 {
    font-size: 1.6rem;
    font-weight: 800;
}

.exchange-header .exchange-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
    font-size: 0.82rem;
    color: var(--color-text-secondary);
}

.exchange-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 32px;
}

.exchange-desc {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 24px;
    margin-bottom: 32px;
    font-size: 0.92rem;
    line-height: 1.7;
    color: var(--color-text-secondary);
}

.exchange-desc h2 {
    color: var(--color-text);
    font-size: 1.1rem;
    margin-bottom: 12px;
}

.visit-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    background: var(--color-link);
    color: white;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: all 0.15s;
}

.visit-btn:hover {
    background: #2a4cc7;
    text-decoration: none;
    color: white;
}

/* ---------- Back Link ---------- */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    font-size: 0.82rem;
    color: var(--color-text-muted);
    text-decoration: none;
}

.back-link:hover {
    color: var(--color-text);
    text-decoration: none;
}

/* ---------- Footer ---------- */
#site-footer {
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    margin-top: auto;
    padding: 0 20px;
}

.footer-inner {
    max-width: var(--max-width);
    margin: 0 auto;
}

.footer-top {
    display: grid;
    grid-template-columns: 1.3fr 3fr;
    gap: 40px;
    padding: 40px 0;
    border-bottom: 1px solid var(--color-border);
}

.footer-brand-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--color-text);
}

.footer-brand-desc {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
}

.footer-links-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.footer-disclaimer {
    font-size: 0.72rem;
    color: var(--color-text-muted);
    max-width: 600px;
    line-height: 1.5;
    margin-top: 4px;
}

.footer-copy {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

/* ---------- Error / Not Found ---------- */
.error-page {
    text-align: center;
    padding: 80px 20px;
}

.error-page h1 {
    font-size: 3rem;
    color: var(--color-text-muted);
    margin-bottom: 8px;
}

.error-page p {
    color: var(--color-text-secondary);
    margin-bottom: 24px;
}

.error-page a {
    display: inline-flex;
    padding: 10px 24px;
    background: var(--color-link);
    color: white;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
    .sparkline-cell { display: none; }
    .coin-table th:last-child,
    .coin-table td:last-child { display: none; }
}

@media (max-width: 768px) {
    .header-inner { gap: 12px; }
    .main-nav { display: none; }
    .main-nav.mobile-open {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: var(--header-height);
        left: 0;
        right: 0;
        background: var(--color-surface);
        border-bottom: 1px solid var(--color-border);
        padding: 12px 20px;
        box-shadow: var(--shadow-md);
        z-index: 99;
    }
    .mobile-menu-btn { display: flex; }

    .search-wrapper {
        width: 100%;
        order: 10;
        display: none;
    }

    .main-nav.mobile-open ~ .search-wrapper {
        display: block;
    }

    .movers-section {
        grid-template-columns: 1fr;
    }

    .coin-table th:nth-child(n+6),
    .coin-table td:nth-child(n+6) {
        display: none;
    }

    .coin-price-large {
        font-size: 1.6rem;
    }

    .coin-metrics {
        grid-template-columns: repeat(2, 1fr);
    }

    .coin-header-left { min-width: auto; }

    #app { padding: 16px 12px; }

    .market-stats-bar { gap: 16px; }

    .exchange-detail-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 480px) {
    .coin-table th:nth-child(n+5),
    .coin-table td:nth-child(n+5) {
        display: none;
    }

    .exchange-table th:nth-child(n+5),
    .exchange-table td:nth-child(n+5) {
        display: none;
    }

    .coin-metrics {
        grid-template-columns: 1fr;
    }

    .exchange-detail-grid {
        grid-template-columns: 1fr;
    }

    .search-wrapper { width: auto; flex: 1; display: block; }
}

/* ---------- Table Responsive Scroll ---------- */
.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ---------- Transition for page changes ---------- */
.page-enter {
    animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ---------- High/Low Bar ---------- */
.highlow-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    font-size: 0.78rem;
}

.highlow-bar .bar-track {
    flex: 1;
    height: 6px;
    background: var(--color-border);
    border-radius: 3px;
    position: relative;
    overflow: hidden;
}

.highlow-bar .bar-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--color-negative), var(--color-positive));
    border-radius: 3px;
}

.highlow-bar .bar-dot {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    background: var(--color-text);
    border: 2px solid white;
    border-radius: 50%;
    box-shadow: var(--shadow-sm);
}

.highlow-label {
    color: var(--color-text-muted);
    white-space: nowrap;
}

.highlow-value {
    font-weight: 600;
    color: var(--color-text);
    font-family: var(--font-mono);
}

/* ---------- Feather Icons ---------- */
.icon {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    vertical-align: middle;
    display: inline-block;
    flex-shrink: 0;
}
.icon-sm { width: 14px; height: 14px; }
.icon-lg { width: 24px; height: 24px; }
.icon-xl { width: 32px; height: 32px; }

/* ---------- Logo Styling ---------- */
.logo {
    font-weight: 600;
    font-size: 1.15rem;
    letter-spacing: -0.01em;
}

.logo .logo-text {
    color: var(--color-text-secondary);
}

.logo .logo-text strong {
    color: var(--color-accent);
    font-weight: 800;
}

.logo-icon-svg {
    color: var(--color-accent);
}

.nav-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* ---------- Search Icon ---------- */
.search-wrapper {
    position: relative;
}

.search-icon-abs {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-muted);
    pointer-events: none;
    z-index: 1;
}

.search-input {
    padding-left: 34px !important;
}

/* ---------- Skeleton Loading ---------- */
.skeleton-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 24px;
    width: 100%;
    max-width: 800px;
}

.skeleton-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 20px;
}

.skeleton-line {
    height: 14px;
    background: linear-gradient(90deg, var(--color-border) 25%, var(--color-border-light) 50%, var(--color-border) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 4px;
    margin-bottom: 10px;
}

.skeleton-line:last-child { margin-bottom: 0; }
.skeleton-line.w40 { width: 40%; }
.skeleton-line.w60 { width: 60%; }
.skeleton-line.w80 { width: 80%; }

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ---------- Stats Cards Grid ---------- */
.stats-cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.stats-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.2s, transform 0.2s;
}

.stats-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.stats-card-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stats-card-label {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 2px;
}

.stats-card-value {
    font-size: 1.15rem;
    font-weight: 700;
    font-family: var(--font-mono);
    color: var(--color-text);
}

/* ---------- Market Overview Row ---------- */
.market-overview-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
    margin: 8px 0;
}

.overview-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 12px;
    box-shadow: var(--shadow-sm);
}

.overview-card h3 {
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-text);
}

.dominance-chart-wrap {
    display: flex;
    align-items: center;
    gap: 16px;
}

.dominance-chart-wrap canvas {
    max-width: 140px;
    max-height: 140px;
}

.dominance-legend {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    font-weight: 500;
}

.legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ---------- Fear & Greed Gauge ---------- */
.fg-gauge-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
}

.fg-gauge { width: 180px; }

.fg-svg { width: 100%; height: auto; }

/* ---------- Quick Stats ---------- */
.quick-stat-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 0;
    border-bottom: 1px solid var(--color-border-light);
    font-size: 0.85rem;
}

.quick-stat-row:last-child { border-bottom: none; }

.quick-stat-row span { flex: 1; color: var(--color-text-secondary); }
.quick-stat-row strong { font-family: var(--font-mono); font-size: 0.85rem; }

/* ---------- Movers Card polish ---------- */
.movers-card {
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.2s;
}

.movers-card:hover {
    box-shadow: var(--shadow-md);
}

/* ---------- Table polish ---------- */
.table-container {
    box-shadow: var(--shadow-sm);
}

.coin-table tbody tr {
    transition: background 0.15s, transform 0.1s;
}

.coin-table tbody tr:hover {
    background: var(--color-surface-alt);
}

.coin-table tbody tr:nth-child(even) {
    background: rgba(0,0,0,0.01);
}

.coin-table tbody tr:nth-child(even):hover {
    background: var(--color-surface-alt);
}

/* Sparkline larger */
.sparkline-cell {
    width: 140px;
}

.sparkline-cell svg {
    width: 100px !important;
    height: 32px !important;
}

/* ---------- Section Divider ---------- */
.section-divider {
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--color-border);
}

.section-divider .section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0;
}

/* ---------- Metric Card polish ---------- */
.metric-card {
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.2s, transform 0.2s;
}

.metric-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.metric-card .metric-label {
    display: flex;
    align-items: center;
    gap: 5px;
}

.metric-sub {
    font-size: 0.72rem;
    color: var(--color-text-muted);
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ---------- Supply Progress Bar ---------- */
.supply-progress-section {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 20px;
    margin-bottom: 24px;
    box-shadow: var(--shadow-sm);
}

.supply-progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--color-text);
}

.supply-progress-header .icon {
    vertical-align: -2px;
}

.supply-percent {
    font-family: var(--font-mono);
    color: var(--color-accent);
    font-weight: 700;
}

.supply-bar-track {
    height: 12px;
    background: var(--color-surface-alt);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 8px;
}

.supply-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-accent), #f7c31a);
    border-radius: 6px;
    transition: width 0.6s ease;
}

.supply-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    font-family: var(--font-mono);
}

/* ---------- ROI Card ---------- */
.roi-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: var(--shadow-sm);
}

.roi-card h3 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.roi-desc {
    font-size: 0.88rem;
    color: var(--color-text-secondary);
    margin-bottom: 12px;
}

.roi-value {
    font-size: 1.8rem;
    font-weight: 800;
    font-family: var(--font-mono);
}

.roi-value.positive { color: var(--color-positive); }
.roi-value.negative { color: var(--color-negative); }

.roi-change {
    font-size: 0.9rem;
    font-weight: 600;
    margin-left: 8px;
}

/* ---------- Chart Section polish ---------- */
.chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.chart-header h2 {
    font-size: 1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.chart-timeframe-btns {
    display: flex;
    gap: 4px;
}

.tf-btn {
    padding: 6px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.tf-btn:hover {
    border-color: var(--color-link);
    color: var(--color-link);
}

.tf-btn.active {
    background: var(--color-link);
    color: white;
    border-color: var(--color-link);
}

.chart-canvas-wrap {
    position: relative;
    height: 300px;
}

.coin-chart-section {
    box-shadow: var(--shadow-sm);
}

/* ---------- Coin Description polish ---------- */
.coin-description {
    box-shadow: var(--shadow-sm);
}

.coin-description h2 {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ---------- Coin Link buttons polish ---------- */
.coin-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* ---------- Footer Enhanced ---------- */
.footer-col h4 {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text);
    margin-bottom: 12px;
}

.footer-col a {
    display: block;
    color: var(--color-text-secondary);
    font-size: 0.85rem;
    padding: 4px 0;
    text-decoration: none;
    transition: color 0.15s;
}

.footer-col a:hover {
    color: var(--color-link);
    text-decoration: none;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    flex-wrap: wrap;
    gap: 8px;
}

.footer-tech {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin-top: 8px;
}

.footer-tech span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* ---------- Page Transition polish ---------- */
.page-enter {
    animation: pageSlideIn 0.3s ease-out;
}

@keyframes pageSlideIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ---------- Additional Responsive ---------- */
@media (max-width: 1024px) {
    .stats-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .market-overview-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .stats-cards-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .stats-card { padding: 14px; gap: 10px; }
    .stats-card-icon { width: 40px; height: 40px; }
    .stats-card-value { font-size: 1rem; }
    .market-overview-row {
        grid-template-columns: 1fr;
    }
    .skeleton-grid {
        grid-template-columns: 1fr;
    }
    .footer-top {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .footer-links-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    .footer-bottom {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }
    /* Mobile nav dropdowns as accordion */
    .main-nav.mobile-open .nav-item.has-dropdown {
        width: 100%;
    }
    .main-nav.mobile-open .nav-dropdown {
        position: static;
        display: none;
        box-shadow: none;
        border: none;
        border-radius: 0;
        padding: 0 0 0 16px;
        min-width: 0;
        background: transparent;
    }
    .main-nav.mobile-open .nav-item.has-dropdown.open .nav-dropdown {
        display: block;
    }
    .main-nav.mobile-open .nav-item.has-dropdown.open .nav-chevron {
        transform: rotate(180deg);
    }
    .main-nav.mobile-open .nav-dropdown a {
        padding: 8px 12px;
    }
}

@media (max-width: 480px) {
    .stats-cards-grid {
        grid-template-columns: 1fr;
    }
    .logo .logo-text { font-size: 0.95rem; }
    .footer-links-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   Trends Page
   ============================================ */

.trends-header {
    text-align: center;
    padding: 32px 0 16px;
}

.trends-title {
    font-size: 1.8rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--color-text);
}

.trends-subtitle {
    color: var(--color-text-secondary);
    font-size: 1rem;
    margin-top: 6px;
}

/* ---------- Filter Bar ---------- */

.trends-filters {
    position: sticky;
    top: var(--header-height);
    z-index: 50;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 20px 24px;
    margin: 16px 0;
    box-shadow: var(--shadow-md);
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.filter-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}

.filter-pills {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.filter-pill {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    transition: all 0.15s ease;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.filter-pill:hover {
    background: var(--color-border);
    color: var(--color-text);
}

.filter-pill.active {
    border-color: transparent;
    color: #fff;
}

.filter-pill.active-green {
    background: var(--color-positive);
}

.filter-pill.active-red {
    background: var(--color-negative);
}

.filter-pill.active-orange {
    background: var(--color-accent);
}

/* ---------- Results Info ---------- */

.trends-results-info {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.88rem;
    color: var(--color-text-secondary);
    padding: 8px 0 4px;
}

/* ---------- Trends Table ---------- */

.trends-table .highlight-col {
    background: rgba(247, 147, 26, 0.06);
    font-weight: 700;
}

.trends-table thead th.highlight-col {
    background: rgba(247, 147, 26, 0.10);
    color: var(--color-accent);
}

.trends-table .rank-cell {
    color: var(--color-text-muted);
    font-size: 0.85rem;
}

/* ---------- Trends Responsive ---------- */

@media (max-width: 1024px) {
    .trends-filters {
        gap: 12px;
    }
}

@media (max-width: 768px) {
    .trends-filters {
        flex-direction: column;
        gap: 12px;
        padding: 16px;
        border-radius: var(--radius-md);
        position: static;
    }

    .trends-header {
        padding: 20px 0 8px;
    }

    .trends-title {
        font-size: 1.3rem;
    }

    .filter-pills {
        flex-wrap: wrap;
    }

    .filter-pill {
        padding: 5px 10px;
        font-size: 0.78rem;
    }
}

@media (max-width: 480px) {
    .trends-title {
        font-size: 1.1rem;
    }

    .trends-subtitle {
        font-size: 0.85rem;
    }

    .filter-pill {
        padding: 4px 8px;
        font-size: 0.75rem;
    }
}

/* Chart info bar */
.chart-info-bar {
    display: flex;
    gap: 24px;
    padding: 8px 16px;
    font-size: 0.8rem;
    color: var(--color-text-muted);
    min-height: 24px;
}
.chart-info-item {
    font-family: 'SF Mono', 'Cascadia Code', 'Consolas', monospace;
}
.chart-canvas-wrap {
    position: relative;
    height: 350px;
}

/* Load more section */
.load-more-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 32px 0;
}
.load-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 40px;
    background: var(--color-accent);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 12px rgba(247, 147, 26, 0.3);
}
.load-more-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(247, 147, 26, 0.4);
}
.load-more-btn:disabled {
    opacity: 0.7;
    cursor: wait;
}
.view-all-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-text-muted);
    font-size: 0.85rem;
    text-decoration: none;
    transition: color 0.2s;
}
.view-all-link:hover {
    color: var(--color-accent);
}

/* SEO Content Section */
.seo-content-section {
    margin-top: 48px;
    padding-top: 32px;
}
.seo-content-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 20px;
}
.seo-content-card {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 20px;
}
.seo-content-card h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
    margin-bottom: 10px;
    color: var(--color-text);
}
.seo-content-card p {
    font-size: 0.88rem;
    color: var(--color-text-muted);
    line-height: 1.6;
    margin: 0;
}
.seo-content-card a {
    color: var(--color-accent);
    text-decoration: none;
    font-weight: 500;
}
.seo-content-card a:hover {
    text-decoration: underline;
}
@media (max-width: 768px) {
    .seo-content-grid {
        grid-template-columns: 1fr;
    }
}

/* Fix coin header icon size */
.coin-header img,
.coin-header-left img {
    width: 48px !important;
    height: 48px !important;
    max-width: 48px !important;
    min-width: 48px !important;
    border-radius: 50%;
    object-fit: cover;
}

/* Fix chart section */
.coin-chart-section {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 24px;
    margin: 24px 0;
}
.coin-chart-section .chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}
.coin-chart-section .chart-header h2 {
    font-size: 1.2rem;
    margin: 0;
}
.coin-chart-section .chart-canvas-wrap {
    position: relative;
    height: 350px;
    width: 100%;
}
.coin-chart-section canvas {
    width: 100% !important;
    height: 100% !important;
}

/* Hide the old SVG chart if both exist */
.coin-chart-section .large-chart-svg {
    display: none;
}

/* Fix high/low bar */
.highlow-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    font-size: 0.85rem;
    width: 100%;
    max-width: 600px;
}
.highlow-track {
    flex: 1;
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(90deg, #ea3943 0%, #ea3943 50%, #16c784 50%, #16c784 100%);
    position: relative;
}
.highlow-marker {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--color-text);
    border: 2px solid #fff;
    top: -2px;
    transform: translateX(-50%);
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* Fix SVG icons inside headings expanding */
h1 .icon, h2 .icon, h3 .icon, h4 .icon {
    width: 24px !important;
    height: 24px !important;
    vertical-align: middle;
    flex-shrink: 0;
}
h1, h2, h3, h4 {
    display: flex;
    align-items: center;
    gap: 8px;
}
/* Ensure chart header is compact */
.chart-header h2 {
    font-size: 1.1rem !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}

/* ---------- Advanced Chart Controls ---------- */
.chart-controls {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}
.chart-type-btns,
.chart-data-btns {
    display: flex;
    gap: 2px;
    background: var(--color-bg-alt, #f8f9fa);
    border-radius: 8px;
    padding: 3px;
}
.ct-btn,
.cd-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    border: none;
    background: transparent;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--color-text-muted, #6c757d);
    transition: all 0.2s;
    white-space: nowrap;
}
.ct-btn:hover,
.cd-btn:hover {
    color: var(--color-text, #212529);
}
.ct-btn.active,
.cd-btn.active {
    background: var(--color-card-bg, #fff);
    color: var(--color-text, #212529);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.ct-btn .icon,
.cd-btn .icon {
    width: 14px !important;
    height: 14px !important;
}

/* ---------- Candlestick Chart ---------- */
.chart-candlestick-wrap {
    position: relative;
    min-height: 350px;
    width: 100%;
}
.candlestick-svg {
    width: 100%;
    display: block;
    cursor: crosshair;
}
.candle-tooltip {
    position: absolute;
    background: #1a1a2e;
    color: #fff;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 0.8rem;
    line-height: 1.6;
    pointer-events: none;
    z-index: 10;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
.candle-tooltip-date {
    font-weight: 700;
    margin-bottom: 4px;
    color: #adb5bd;
    font-size: 0.75rem;
    text-transform: uppercase;
}

/* ---------- Volume Chart Section ---------- */
.chart-volume-wrap {
    margin-top: 12px;
    border-top: 1px solid var(--color-border, #e9ecef);
    padding-top: 8px;
}
.volume-title {
    font-size: 0.8rem !important;
    font-weight: 600;
    color: var(--color-text-muted, #6c757d);
    margin: 0 0 6px 0;
    display: flex;
    align-items: center;
    gap: 6px;
}
.volume-title .icon {
    width: 14px !important;
    height: 14px !important;
}
.volume-canvas-container {
    height: 100px;
    position: relative;
}
.volume-canvas-container canvas {
    width: 100% !important;
    height: 100% !important;
}

/* ---------- Chart Statistics Panel ---------- */
.chart-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    padding: 16px 0 0;
    margin-top: 16px;
    border-top: 1px solid var(--color-border, #e9ecef);
}
.chart-stat {
    text-align: center;
    padding: 8px 4px;
}
.chart-stat-label {
    display: block;
    font-size: 0.72rem;
    color: var(--color-text-muted, #6c757d);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}
.chart-stat-value {
    font-size: 0.95rem;
    font-weight: 700;
    font-family: var(--font-mono, 'SF Mono', 'Cascadia Code', monospace);
    color: var(--color-text, #212529);
}

/* ---------- Chart Responsive ---------- */
@media (max-width: 768px) {
    .chart-controls {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .chart-header {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 10px;
    }
    .chart-stats {
        grid-template-columns: repeat(2, 1fr);
    }
    .ct-btn,
    .cd-btn {
        padding: 4px 10px;
        font-size: 0.72rem;
    }
}
@media (max-width: 480px) {
    .chart-stats {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
}

/* ---------- Markets Table (Exchange & Coin pages) ---------- */
.markets-table th {
    white-space: nowrap;
}
.market-coin-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-text);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.15s;
}
.market-coin-link:hover {
    color: var(--color-link);
}
.market-coin-img {
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
}
.market-coin-name {
    font-weight: 500;
}
.trade-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #fff;
    background: var(--color-link);
    border: none;
    border-radius: var(--radius-sm);
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s, transform 0.1s;
    cursor: pointer;
}
.trade-btn:hover {
    background: #2c4fd6;
    transform: translateY(-1px);
}
.markets-count {
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--color-text-secondary);
}
.load-more-wrap {
    text-align: center;
    margin-top: 16px;
}
.load-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 28px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--color-link);
    background: var(--color-surface);
    border: 2px solid var(--color-link);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.load-more-btn:hover {
    background: var(--color-link);
    color: #fff;
}
.load-more-btn:disabled {
    opacity: 0.6;
    cursor: wait;
}
.load-more-info {
    font-weight: 400;
    font-size: 0.78rem;
    color: var(--color-text-muted);
}
.load-more-btn:hover .load-more-info {
    color: rgba(255,255,255,0.8);
}
.coin-markets-section {
    margin-top: 24px;
}

/* Exchange filters */
.exchange-filters {
    display: flex;
    gap: 24px;
    padding: 16px 20px;
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    margin: 16px 0;
    flex-wrap: wrap;
    align-items: center;
}
.filter-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-muted);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-right: 8px;
}
.filter-pills {
    display: flex;
    gap: 6px;
}
.filter-pill.active-blue {
    background: #3861fb !important;
    color: #fff !important;
}
.filter-pill.active-purple {
    background: #8b5cf6 !important;
    color: #fff !important;
}
.exchange-type-badge.cex {
    background: rgba(56, 97, 251, 0.1);
    color: #3861fb;
}
.exchange-type-badge.dex {
    background: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
}

/* Sortable columns */
th.sortable {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 20px !important;
}
th.sortable::after {
    content: '';
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    border: 4px solid transparent;
    border-top-color: #ccc;
    margin-top: 2px;
}
th.sortable::before {
    content: '';
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    border: 4px solid transparent;
    border-bottom-color: #ccc;
    margin-top: -8px;
}
th.sortable.sort-active::after {
    border-top-color: var(--color-accent);
}
th.sortable.sort-active.sort-desc::after {
    border-top-color: #ccc;
}
th.sortable.sort-active.sort-desc::before {
    border-bottom-color: var(--color-accent);
}
th.sortable.sort-active:not(.sort-desc)::before {
    border-bottom-color: #ccc;
}
th.sortable:hover {
    color: var(--color-accent);
}

/* ============================================
   Converter Page
   ============================================ */

.converter-page {
    max-width: 800px;
    margin: 0 auto;
    padding: 32px 20px;
}

.converter-page .page-header {
    text-align: center;
    margin-bottom: 32px;
}

.converter-page .page-header h1 {
    font-size: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.converter-page .page-subtitle {
    color: var(--color-text-secondary);
    margin-top: 8px;
    font-size: 1rem;
}

/* -- Converter Card -- */
.converter-card {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 28px;
    margin-bottom: 24px;
}

.converter-card h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.1rem;
    margin-bottom: 16px;
}

/* -- Converter Body (two columns) -- */
.converter-body {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    position: relative;
}

.converter-side {
    flex: 1;
    min-width: 0;
}

.converter-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

/* -- Select Button -- */
.converter-select-wrapper {
    position: relative;
    margin-bottom: 12px;
}

.converter-select {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.converter-select:hover {
    border-color: var(--color-accent);
}

.converter-select:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(247, 147, 26, 0.15);
}

.converter-select .icon-sm {
    margin-left: auto;
    color: var(--color-text-muted);
}

.converter-item-img {
    border-radius: 50%;
}

.converter-fiat-symbol {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-accent-light);
    border-radius: 50%;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--color-accent);
}

/* -- Dropdown -- */
.converter-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 50;
    max-height: 320px;
    overflow: hidden;
}

.converter-dropdown.active {
    display: flex;
    flex-direction: column;
}

.converter-dropdown-search {
    padding: 10px 14px;
    border: none;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.9rem;
    background: var(--color-surface-alt);
    outline: none;
}

.converter-dropdown-search:focus {
    background: var(--color-surface);
}

.converter-dropdown-list {
    overflow-y: auto;
    max-height: 270px;
    padding: 4px 0;
}

.converter-dropdown-header {
    padding: 8px 14px 4px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-muted);
}

.converter-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    cursor: pointer;
    transition: background 0.15s;
}

.converter-dropdown-item:hover {
    background: var(--color-surface-alt);
}

.converter-dropdown-item img {
    width: 20px;
    height: 20px;
    border-radius: 50%;
}

.converter-fiat-symbol-sm {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-accent-light);
    border-radius: 50%;
    font-weight: 700;
    font-size: 0.7rem;
    color: var(--color-accent);
    flex-shrink: 0;
}

.converter-dropdown-name {
    flex: 1;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.converter-dropdown-symbol {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    font-weight: 600;
}

.converter-dropdown-empty {
    padding: 20px;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

/* -- Number Input -- */
.converter-input-wrapper {
    position: relative;
}

.converter-input {
    width: 100%;
    padding: 16px 60px 16px 18px;
    font-size: 1.5rem;
    font-weight: 700;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    transition: border-color 0.2s, box-shadow 0.2s;
    -moz-appearance: textfield;
}

.converter-input::-webkit-outer-spin-button,
.converter-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.converter-input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(247, 147, 26, 0.15);
}

.converter-input.converter-result {
    background: var(--color-surface-alt);
    color: var(--color-accent);
}

.converter-input-label {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-muted);
    pointer-events: none;
}

/* -- Swap Button -- */
.converter-swap {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--color-accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 48px;
    box-shadow: var(--shadow-md);
    transition: transform 0.3s, background 0.2s;
    z-index: 2;
}

.converter-swap:hover {
    background: #e5850f;
    transform: scale(1.1);
}

.converter-swap.spinning {
    transform: rotate(180deg);
}

/* -- Rate Line -- */
.converter-rate-line {
    text-align: center;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border-light);
    color: var(--color-text-secondary);
    font-size: 0.95rem;
    font-weight: 500;
}

/* -- Conversion Table -- */
.conversion-table {
    border-collapse: collapse;
}

.conversion-table thead th {
    text-align: left;
    padding: 10px 16px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-muted);
    border-bottom: 2px solid var(--color-border);
}

.conversion-table tbody td {
    padding: 10px 16px;
    font-size: 0.95rem;
    border-bottom: 1px solid var(--color-border-light);
    font-variant-numeric: tabular-nums;
}

.conversion-table tbody tr:last-child td {
    border-bottom: none;
}

.conversion-table tbody tr:hover {
    background: var(--color-surface-alt);
}

/* -- Popular Conversions -- */
.popular-conversions {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 8px;
}

.popular-conversion-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-text);
    background: var(--color-surface-alt);
    transition: background 0.15s, color 0.15s;
    text-decoration: none;
}

.popular-conversion-link:hover {
    background: var(--color-accent-light);
    color: var(--color-accent);
    text-decoration: none;
}

.popular-conversion-link .icon-sm {
    color: var(--color-text-muted);
    flex-shrink: 0;
}

.popular-conversion-link:hover .icon-sm {
    color: var(--color-accent);
}

/* -- Converter Responsive -- */
@media (max-width: 640px) {
    .converter-body {
        flex-direction: column;
        gap: 8px;
    }

    .converter-swap {
        margin: 0 auto;
        transform: rotate(90deg);
    }

    .converter-swap:hover {
        transform: rotate(90deg) scale(1.1);
    }

    .converter-swap.spinning {
        transform: rotate(270deg);
    }

    .converter-input {
        font-size: 1.25rem;
        padding: 14px 55px 14px 14px;
    }

    .converter-page {
        padding: 20px 12px;
    }

    .converter-card {
        padding: 20px 16px;
    }

    .popular-conversions {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   Compare Page
   ============================================ */

.compare-page-title {
    font-size: 1.5rem;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* -- Compare Header (selectors) -- */
.compare-header {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    margin-bottom: 32px;
    background: var(--color-surface);
    border-radius: var(--radius-md);
    padding: 24px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border);
}

.compare-selector {
    flex: 1;
}

.compare-selector label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    margin-bottom: 6px;
}

.compare-search-wrapper {
    position: relative;
}

.compare-search-input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    background: var(--color-bg);
    color: var(--color-text);
    transition: border-color 0.2s;
}

.compare-search-input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(247, 147, 26, 0.15);
}

.compare-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    z-index: 100;
    max-height: 300px;
    overflow-y: auto;
    display: none;
}

.compare-search-results.active {
    display: block;
}

.compare-result-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    cursor: pointer;
    transition: background 0.15s;
    font-size: 0.9rem;
}

.compare-result-item:hover {
    background: var(--color-surface-alt);
}

.compare-result-item img {
    border-radius: 50%;
}

.compare-result-item small {
    color: var(--color-text-muted);
}

.compare-result-rank {
    margin-left: auto;
    color: var(--color-text-muted);
    font-size: 0.8rem;
}

.compare-no-results {
    padding: 12px;
    color: var(--color-text-muted);
    text-align: center;
    font-size: 0.85rem;
}

.compare-vs-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--color-accent);
    padding-bottom: 8px;
    flex-shrink: 0;
}

/* -- Compare Grid (coin cards) -- */
.compare-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 16px;
    margin-bottom: 24px;
    align-items: center;
}

.compare-coin-card {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    padding: 24px;
    text-align: center;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border);
}

.compare-coin-card a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--color-text);
}

.compare-coin-card a:hover h2 {
    color: var(--color-accent);
}

.compare-coin-card img {
    border-radius: 50%;
}

.compare-coin-card h2 {
    font-size: 1.2rem;
    margin: 0;
    transition: color 0.2s;
}

.compare-coin-center {
    background: none;
    border: none;
    box-shadow: none;
    padding: 12px;
}

.compare-vs-label {
    font-weight: 800;
    font-size: 1.5rem;
    color: var(--color-accent);
}

/* -- Compare Metrics -- */
.compare-metrics {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border);
    overflow: hidden;
    margin-bottom: 32px;
}

.compare-metric {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 16px;
    padding: 14px 20px;
    align-items: center;
    border-bottom: 1px solid var(--color-border-light);
}

.compare-metric:last-child {
    border-bottom: none;
}

.compare-metric:hover {
    background: var(--color-surface-alt);
}

.compare-metric-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    white-space: nowrap;
}

.compare-val {
    font-size: 0.95rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

.compare-val-a {
    justify-content: flex-end;
    text-align: right;
}

.compare-val-b {
    justify-content: flex-start;
    text-align: left;
}

/* -- Compare Winner Highlight -- */
.compare-winner {
    color: var(--color-positive);
    display: inline-flex;
    align-items: center;
}

.compare-val.is-winner {
    color: var(--color-positive);
}

/* -- Compare Chart -- */
.compare-chart {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    padding: 24px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border);
    margin-bottom: 32px;
}

.compare-chart-legend {
    display: flex;
    gap: 20px;
    margin-bottom: 16px;
    justify-content: center;
}

.chart-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text-secondary);
}

.legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
}

.compare-chart-canvas-wrap {
    position: relative;
    height: 300px;
}

/* -- Popular Comparisons -- */
.popular-comparisons {
    margin-top: 40px;
    margin-bottom: 20px;
}

.popular-compare-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 16px;
}

.popular-compare-link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 16px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--color-text);
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.2s;
}

.popular-compare-link:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

/* -- Coin page compare button -- */
.coin-compare-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--color-accent-light);
    color: var(--color-accent);
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.2s;
    margin-left: auto;
}

.coin-compare-btn:hover {
    background: var(--color-accent);
    color: #fff;
}

/* -- Compare Responsive -- */
@media (max-width: 768px) {
    .compare-header {
        flex-direction: column;
        gap: 12px;
    }

    .compare-vs-badge {
        padding-bottom: 0;
    }

    .compare-grid {
        grid-template-columns: 1fr;
    }

    .compare-coin-center {
        display: none;
    }

    .compare-metric {
        grid-template-columns: 1fr;
        gap: 4px;
        text-align: center;
    }

    .compare-val-a,
    .compare-val-b {
        justify-content: center;
        text-align: center;
    }

    .compare-metric-label {
        order: -1;
        font-size: 0.8rem;
    }

    .popular-compare-grid {
        grid-template-columns: 1fr;
    }

    .coin-compare-btn {
        margin-left: 0;
        margin-top: 12px;
    }
}

/* ============================================
   Auth & User Area
   ============================================ */

/* -- Header User Area -- */
.user-area {
    display: flex;
    align-items: center;
    margin-left: 12px;
    flex-shrink: 0;
}

.auth-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-auth-header {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 14px;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
    white-space: nowrap;
}

.btn-login-header {
    color: var(--color-text);
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
}

.btn-login-header:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.btn-register-header {
    color: #fff;
    background: var(--color-accent);
    border: 1px solid var(--color-accent);
}

.btn-register-header:hover {
    background: #e5850f;
    border-color: #e5850f;
}

/* -- User Menu Dropdown -- */
.user-menu-wrapper {
    position: relative;
}

.user-menu-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    color: var(--color-text);
}

.user-menu-btn:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.user-menu-name {
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.icon-xs {
    width: 14px;
    height: 14px;
}

.user-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 200px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 1000;
    padding: 6px 0;
}

.user-dropdown.active {
    display: block;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    font-size: 0.9rem;
    color: var(--color-text);
    text-decoration: none;
    transition: background 0.15s;
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    font-family: inherit;
}

.dropdown-item:hover {
    background: var(--color-surface-alt);
}

.dropdown-divider {
    height: 1px;
    background: var(--color-border);
    margin: 4px 0;
}

.dropdown-logout {
    color: var(--color-negative);
}

.dropdown-logout:hover {
    background: var(--color-negative-bg);
}

/* ============================================
   Auth Pages (Login/Register)
   ============================================ */

.auth-page {
    min-height: calc(100vh - var(--header-height) - 200px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

.auth-card {
    width: 100%;
    max-width: 440px;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 40px 36px;
    border: 1px solid var(--color-border);
}

.auth-header {
    text-align: center;
    margin-bottom: 28px;
}

.auth-logo-icon {
    color: var(--color-accent);
    margin-bottom: 12px;
}

.auth-header h1 {
    font-size: 1.5rem;
    margin-bottom: 6px;
}

.auth-header p {
    color: var(--color-text-secondary);
    font-size: 0.9rem;
}

.auth-error {
    background: var(--color-negative-bg);
    color: var(--color-negative);
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    margin-bottom: 20px;
    border: 1px solid rgba(234, 57, 67, 0.2);
}

.auth-form .form-group {
    margin-bottom: 18px;
}

.auth-form label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    margin-bottom: 6px;
}

.auth-form input[type="text"],
.auth-form input[type="email"],
.auth-form input[type="password"] {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    background: var(--color-bg);
    color: var(--color-text);
    transition: border-color 0.2s, box-shadow 0.2s;
    font-family: inherit;
}

.auth-form input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(247, 147, 26, 0.15);
}

.btn-auth {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px;
    background: var(--color-accent);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
    font-family: inherit;
    margin-top: 8px;
}

.btn-auth:hover {
    background: #e5850f;
}

.btn-auth:active {
    transform: scale(0.98);
}

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

.auth-switch {
    text-align: center;
    margin-top: 20px;
    font-size: 0.9rem;
    color: var(--color-text-secondary);
}

.auth-switch a {
    color: var(--color-accent);
    font-weight: 600;
    text-decoration: none;
}

.auth-switch a:hover {
    text-decoration: underline;
}

/* ============================================
   Dashboard
   ============================================ */

.dashboard-page {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 32px 20px;
}

.dashboard-header {
    margin-bottom: 24px;
}

.dashboard-header h1 {
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.dashboard-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 24px;
    background: var(--color-surface);
    border-radius: var(--radius-md);
    padding: 4px;
    border: 1px solid var(--color-border);
    overflow-x: auto;
}

.dash-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    border: none;
    background: none;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--color-text-secondary);
    transition: all 0.2s;
    white-space: nowrap;
    font-family: inherit;
}

.dash-tab:hover {
    color: var(--color-text);
    background: var(--color-surface-alt);
}

.dash-tab.active {
    background: var(--color-accent);
    color: #fff;
}

.dashboard-content {
    min-height: 300px;
}

.loading-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-text-muted);
    padding: 40px 0;
    justify-content: center;
}

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

.spin {
    animation: spin 1s linear infinite;
}

.dash-error {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 20px;
    background: var(--color-negative-bg);
    color: var(--color-negative);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
}

.dash-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--color-text-secondary);
}

.dash-empty .icon-xl {
    width: 48px;
    height: 48px;
    color: var(--color-text-muted);
    margin-bottom: 16px;
}

.dash-empty h3 {
    font-size: 1.1rem;
    margin-bottom: 8px;
    color: var(--color-text);
}

.dash-empty p {
    font-size: 0.9rem;
    margin-bottom: 20px;
}

.dash-section {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    padding: 24px;
    border: 1px solid var(--color-border);
}

.dash-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}

.dash-section-header h3 {
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* -- Buttons -- */
.btn-primary-sm {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 16px;
    background: var(--color-accent);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    text-decoration: none;
    font-family: inherit;
}

.btn-primary-sm:hover {
    background: #e5850f;
}

.btn-secondary-sm {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 16px;
    background: var(--color-surface-alt);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}

.btn-secondary-sm:hover {
    border-color: var(--color-text-muted);
}

.btn-danger-sm {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 16px;
    background: var(--color-negative);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    font-family: inherit;
}

.btn-danger-sm:hover {
    background: #d32f2f;
}

.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    border: none;
    background: none;
    color: var(--color-text-muted);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all 0.2s;
}

.btn-icon:hover {
    color: var(--color-negative);
    background: var(--color-negative-bg);
}

/* -- Watchlist & Portfolio Tables -- */
.watchlist-table,
.portfolio-table {
    font-size: 0.9rem;
}

.coin-name-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--color-text);
    font-weight: 600;
}

.coin-name-cell:hover .coin-name {
    color: var(--color-accent);
}

.coin-name-cell img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    flex-shrink: 0;
}

.coin-symbol {
    font-weight: 500;
    color: var(--color-text-muted);
    font-size: 0.8em;
    text-transform: uppercase;
    margin-left: 4px;
}

.color-positive { color: var(--color-positive) !important; }
.color-negative { color: var(--color-negative) !important; }

/* -- Portfolio Summary -- */
.portfolio-summary {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.summary-card {
    flex: 1;
    min-width: 150px;
    background: var(--color-surface-alt);
    border-radius: var(--radius-sm);
    padding: 16px 20px;
    border: 1px solid var(--color-border-light);
}

.summary-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.summary-value {
    font-size: 1.2rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* -- Dashboard Forms -- */
.dash-form-card {
    background: var(--color-surface-alt);
    border-radius: var(--radius-md);
    padding: 24px;
    margin-bottom: 24px;
    border: 1px solid var(--color-border-light);
}

.dash-form-card h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    font-size: 1rem;
}

.dash-form .form-row {
    display: flex;
    gap: 16px;
    margin-bottom: 12px;
}

.dash-form .form-group {
    flex: 1;
    min-width: 0;
    margin-bottom: 12px;
}

.dash-form label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    margin-bottom: 4px;
}

.dash-form input[type="text"],
.dash-form input[type="number"],
.dash-form input[type="date"],
.dash-form select {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    background: var(--color-surface);
    color: var(--color-text);
    font-family: inherit;
    transition: border-color 0.2s;
}

.dash-form input:focus,
.dash-form select:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(247, 147, 26, 0.15);
}

.form-actions {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}

.checkbox-label {
    display: flex !important;
    align-items: center;
    gap: 8px;
    padding-top: 20px;
    cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--color-accent);
    cursor: pointer;
}

/* -- Alert Cards -- */
.alerts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}

.alert-card {
    background: var(--color-surface-alt);
    border-radius: var(--radius-md);
    padding: 16px 20px;
    border: 1px solid var(--color-border-light);
    transition: box-shadow 0.2s;
}

.alert-card:hover {
    box-shadow: var(--shadow-sm);
}

.alert-inactive {
    opacity: 0.55;
}

.alert-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.alert-coin {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}

.alert-coin img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
}

.alert-badge {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-active {
    background: var(--color-positive-bg);
    color: var(--color-positive);
}

.badge-triggered {
    background: var(--color-accent-light);
    color: var(--color-accent);
}

.badge-inactive {
    background: var(--color-surface);
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
}

.alert-card-body {
    margin-bottom: 12px;
}

.alert-type {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 4px;
}

.alert-target {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 4px;
}

.alert-current {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
}

.alert-card-actions {
    display: flex;
    gap: 6px;
    border-top: 1px solid var(--color-border-light);
    padding-top: 10px;
}

/* -- Profile -- */
.profile-card {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--color-border-light);
}

.profile-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--color-accent-light);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-accent);
    flex-shrink: 0;
}

.profile-avatar .icon-xl {
    width: 32px;
    height: 32px;
}

.profile-info h2 {
    font-size: 1.3rem;
    margin-bottom: 2px;
}

.profile-info .text-muted {
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

.text-sm {
    font-size: 0.8rem !important;
}

.profile-section {
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--color-border-light);
}

.profile-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.profile-section h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
    margin-bottom: 12px;
}

.profile-linked {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-positive);
    font-weight: 600;
    font-size: 0.95rem;
}

.telegram-link-code {
    background: var(--color-surface-alt);
    border-radius: var(--radius-sm);
    padding: 16px 20px;
    margin-top: 16px;
    border: 1px solid var(--color-border-light);
}

.telegram-link-code code {
    background: var(--color-accent-light);
    color: var(--color-accent);
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 2px;
}

.telegram-link-code p {
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.telegram-link-code a {
    color: var(--color-accent);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* -- Dashboard Responsive -- */
@media (max-width: 768px) {
    .auth-card {
        padding: 28px 20px;
    }

    .user-menu-name {
        display: none;
    }

    .auth-buttons .btn-auth-header span {
        display: none;
    }

    .auth-buttons .btn-auth-header {
        padding: 7px 10px;
    }

    .dashboard-tabs {
        gap: 2px;
        padding: 3px;
    }

    .dash-tab span {
        display: none;
    }

    .dash-tab {
        padding: 10px 14px;
    }

    .dash-section {
        padding: 16px;
    }

    .portfolio-summary {
        flex-direction: column;
    }

    .dash-form .form-row {
        flex-direction: column;
        gap: 0;
    }

    .alerts-grid {
        grid-template-columns: 1fr;
    }

    .profile-card {
        flex-direction: column;
        text-align: center;
    }
}

/* ============================================
   Breadcrumbs
   ============================================ */

.breadcrumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    font-size: 0.82rem;
    color: var(--color-text-muted);
    margin-bottom: 16px;
    padding: 8px 0;
}

.breadcrumbs a {
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: color 0.15s;
}

.breadcrumbs a:hover {
    color: var(--color-accent);
}

.bc-sep {
    color: var(--color-border);
    margin: 0 4px;
    font-size: 0.75rem;
}

.bc-current {
    color: var(--color-text);
    font-weight: 600;
}

/* ============================================
   Static Pages (Legal / About)
   ============================================ */

.static-page {
    max-width: 800px;
    margin: 0 auto;
    padding: 24px 16px 60px;
}

.static-page-header {
    text-align: center;
    margin-bottom: 36px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--color-border);
}

.static-page-header .icon-xl {
    width: 48px;
    height: 48px;
    color: var(--color-accent);
    margin-bottom: 12px;
}

.static-page-header h1 {
    font-size: 2rem;
    font-weight: 800;
    color: var(--color-text);
}

.static-page-body {
    line-height: 1.8;
    color: var(--color-text);
}

.static-section {
    margin-bottom: 32px;
}

.static-section h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.static-section h2 .icon {
    color: var(--color-accent);
}

.static-section h3 {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 16px 0 8px;
}

.static-section p {
    margin-bottom: 12px;
    color: var(--color-text-secondary);
}

.static-section ul {
    margin: 8px 0 16px 20px;
    color: var(--color-text-secondary);
}

.static-section ul li {
    margin-bottom: 6px;
    line-height: 1.6;
}

.static-section ul li strong {
    color: var(--color-text);
}

.static-warning {
    background: var(--color-accent-light);
    border-left: 4px solid var(--color-accent);
    border-radius: var(--radius-sm);
    padding: 16px 20px;
    margin: 12px 0;
}

.static-warning p {
    margin-bottom: 8px;
    color: var(--color-text);
}

.static-warning ul {
    color: var(--color-text);
}

.static-contact {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 10px 16px;
    font-weight: 600;
    color: var(--color-text) !important;
}

.static-contact .icon {
    color: var(--color-accent);
}

.static-updated {
    text-align: right;
    font-size: 0.8rem;
    color: var(--color-text-muted);
    font-style: italic;
    margin-top: 32px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
}

/* ============================================
   404 Page (Enhanced)
   ============================================ */

.error-404 {
    text-align: center;
    max-width: 640px;
    margin: 0 auto;
    padding: 48px 16px 60px;
}

.error-404-icon {
    margin-bottom: 12px;
}

.error-404-icon .icon {
    width: 56px;
    height: 56px;
    color: var(--color-accent);
}

.error-404-title {
    font-size: 5rem;
    font-weight: 900;
    line-height: 1;
    margin-bottom: 12px;
    background: linear-gradient(135deg, var(--color-accent), #ea3943);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.error-404-message {
    font-size: 1.25rem;
    color: var(--color-text);
    font-weight: 600;
    margin-bottom: 4px;
}

.error-404-sub {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    margin-bottom: 24px;
}

.error-404-search {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 400px;
    margin: 0 auto 32px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 10px 16px;
}

.error-404-search .icon {
    color: var(--color-text-muted);
    flex-shrink: 0;
}

.error-404-search input {
    flex: 1;
    border: none;
    outline: none;
    background: none;
    font-size: 0.95rem;
    font-family: var(--font-sans);
    color: var(--color-text);
}

.error-404-links h3 {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    font-weight: 600;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.error-404-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}

.error-link-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 16px 12px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--color-text);
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.15s;
}

.error-link-card:hover {
    border-color: var(--color-accent);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

.error-link-card .icon {
    width: 22px;
    height: 22px;
    color: var(--color-accent);
}

.error-404-coins {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.error-404-coins a {
    display: inline-block;
    padding: 6px 14px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 20px;
    text-decoration: none;
    color: var(--color-text-secondary);
    font-size: 0.82rem;
    font-weight: 500;
    transition: all 0.15s;
}

.error-404-coins a:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

@media (max-width: 480px) {
    .error-404-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .error-404-title {
        font-size: 3.5rem;
    }
}

/* ============================================
   Aprender (Learn) Pages
   ============================================ */

.learn-hero {
    text-align: center;
    padding: 48px 20px 40px;
    max-width: 700px;
    margin: 0 auto;
}

.learn-hero-icon {
    color: var(--color-accent);
    margin-bottom: 16px;
}

.learn-hero-icon .icon-xl {
    width: 48px;
    height: 48px;
}

.learn-hero-title {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 12px;
    color: var(--color-text);
}

.learn-hero-subtitle {
    font-size: 1.05rem;
    color: var(--color-text-secondary);
    line-height: 1.7;
}

/* Learn Grid */
.learn-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: var(--max-width);
    margin: 0 auto 48px;
    padding: 0 20px;
}

.learn-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 28px 24px;
    text-decoration: none;
    color: var(--color-text);
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
}

.learn-card:hover {
    text-decoration: none;
    border-color: var(--color-accent);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.learn-card-icon {
    color: var(--color-accent);
    margin-bottom: 16px;
}

.learn-card-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.learn-card-brief {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
    flex: 1;
    margin-bottom: 16px;
}

.learn-card-cta {
    font-size: 0.85rem;
    color: var(--color-accent);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Bottom CTA */
.learn-bottom-cta {
    max-width: var(--max-width);
    margin: 0 auto 48px;
    padding: 0 20px;
}

.learn-bottom-cta h2 {
    font-size: 1.3rem;
    margin-bottom: 16px;
}

.learn-bottom-links {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.learn-bottom-link {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 20px 24px;
    text-decoration: none;
    color: var(--color-text);
    transition: all 0.2s ease;
}

.learn-bottom-link:hover {
    text-decoration: none;
    border-color: var(--color-accent);
    box-shadow: var(--shadow-sm);
}

.learn-bottom-link .icon-lg {
    color: var(--color-accent);
    flex-shrink: 0;
}

.learn-bottom-link div {
    flex: 1;
}

.learn-bottom-link strong {
    display: block;
    font-size: 1rem;
    margin-bottom: 2px;
}

.learn-bottom-link span {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
}

.learn-bottom-link .icon-sm:last-child {
    color: var(--color-text-muted);
    flex-shrink: 0;
}

/* Article Layout */
.article-layout {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 40px;
    max-width: var(--max-width);
    margin: 0 auto 48px;
    padding: 0 20px;
}

.article-main {
    min-width: 0;
}

.article-header {
    margin-bottom: 32px;
}

.article-header-icon {
    color: var(--color-accent);
    margin-bottom: 12px;
}

.article-title {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.3;
}

/* Article content */
.article-content h2 {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 36px 0 16px;
    padding-top: 12px;
    border-top: 1px solid var(--color-border-light);
    color: var(--color-text);
}

.article-content h2:first-child {
    margin-top: 0;
    border-top: none;
    padding-top: 0;
}

.article-content p {
    margin-bottom: 16px;
    line-height: 1.8;
    color: var(--color-text);
    font-size: 0.95rem;
}

.article-content ul,
.article-content ol {
    margin-bottom: 16px;
    padding-left: 24px;
}

.article-content li {
    margin-bottom: 8px;
    line-height: 1.7;
    font-size: 0.95rem;
}

.article-content a {
    color: var(--color-link);
    text-decoration: underline;
    text-decoration-color: rgba(56, 97, 251, 0.3);
}

.article-content a:hover {
    text-decoration-color: var(--color-link);
}

.article-content strong {
    font-weight: 600;
}

/* Article Images */
.article-img {
    width: 100%;
    border-radius: var(--radius-md);
    margin-bottom: 24px;
    object-fit: cover;
}

.article-img-hero {
    max-height: 360px;
    margin-bottom: 32px;
}

.article-img-inline {
    max-height: 300px;
    margin-top: 8px;
    margin-bottom: 24px;
}

/* Table of Contents */
.toc {
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 20px;
    margin-bottom: 24px;
}

.toc-title {
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--color-text);
}

.toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.toc-list li {
    margin-bottom: 6px;
}

.toc-link {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    text-decoration: none;
    display: block;
    padding: 4px 0;
    transition: color 0.15s;
}

.toc-link:hover {
    color: var(--color-accent);
    text-decoration: none;
}

.toc-mobile { display: block; }
.toc-desktop { display: none; }

/* Article sidebar */
.article-sidebar {
    position: sticky;
    top: calc(var(--header-height) + 20px);
    align-self: start;
}

.sidebar-related {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 20px;
    margin-bottom: 16px;
}

.sidebar-title {
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--color-text);
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    text-decoration: none;
    padding: 6px 0;
    transition: color 0.15s;
}

.sidebar-link:hover {
    color: var(--color-accent);
    text-decoration: none;
}

.sidebar-link .icon-sm {
    flex-shrink: 0;
    color: var(--color-text-muted);
}

/* Article next */
.article-next {
    margin-top: 40px;
    padding-top: 24px;
    border-top: 2px solid var(--color-border);
}

.article-next-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    font-weight: 600;
    display: block;
    margin-bottom: 8px;
}

.article-next-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--color-text);
    font-weight: 700;
    font-size: 1.1rem;
    transition: all 0.2s ease;
}

.article-next-link:hover {
    text-decoration: none;
    border-color: var(--color-accent);
    background: var(--color-accent-light);
}

.article-next-link .icon-lg {
    color: var(--color-accent);
}

/* Breadcrumb */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 16px 20px;
    font-size: 0.85rem;
}

.breadcrumb a {
    color: var(--color-text-secondary);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 4px;
}

.breadcrumb a:hover {
    color: var(--color-accent);
    text-decoration: none;
}

.breadcrumb-sep {
    color: var(--color-text-muted);
}

.breadcrumb-current {
    color: var(--color-text);
    font-weight: 600;
}

/* ============================================
   Glosario (Glossary) Page
   ============================================ */

.glossary-search-wrapper {
    max-width: 500px;
    margin: 0 auto 24px;
    padding: 0 20px;
}

.glossary-search {
    position: relative;
    display: flex;
    align-items: center;
}

.glossary-search .icon-sm {
    position: absolute;
    left: 14px;
    color: var(--color-text-muted);
    pointer-events: none;
}

.glossary-search-input {
    width: 100%;
    padding: 12px 16px 12px 42px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    font-size: 0.95rem;
    color: var(--color-text);
    outline: none;
    transition: border-color 0.2s;
}

.glossary-search-input:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(247, 147, 26, 0.1);
}

.glossary-search-input::placeholder {
    color: var(--color-text-muted);
}

/* Alphabet Nav */
.glossary-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    max-width: var(--max-width);
    margin: 0 auto 32px;
    padding: 0 20px;
}

.glossary-nav-letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 0.85rem;
    text-decoration: none;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    transition: all 0.15s;
}

.glossary-nav-letter:hover:not(.disabled) {
    background: var(--color-accent);
    color: #fff;
    border-color: var(--color-accent);
    text-decoration: none;
}

.glossary-nav-letter.disabled {
    color: var(--color-text-muted);
    background: var(--color-surface-alt);
    cursor: default;
    opacity: 0.5;
}

/* Glossary Content */
.glossary-content {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
}

.glossary-section {
    margin-bottom: 32px;
}

.glossary-letter-header {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--color-accent);
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--color-accent);
}

.glossary-term {
    margin-bottom: 20px;
    padding: 16px 20px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: border-color 0.2s;
}

.glossary-term:hover {
    border-color: var(--color-accent);
}

.glossary-term-title {
    font-weight: 700;
    font-size: 1rem;
    color: var(--color-text);
    margin-bottom: 6px;
}

.glossary-term-def {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    line-height: 1.7;
}

.glossary-term-def a {
    color: var(--color-link);
}

/* Glossary footer */
.glossary-footer {
    max-width: 800px;
    margin: 40px auto 48px;
    padding: 20px;
    text-align: center;
}

.glossary-footer p {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-bottom: 12px;
}

.glossary-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    color: var(--color-accent);
    font-weight: 600;
    text-decoration: none;
}

.glossary-back-link:hover {
    text-decoration: underline;
}

/* ============================================
   Aprender & Glosario - Responsive
   ============================================ */

@media (max-width: 900px) {
    .article-layout {
        grid-template-columns: 1fr;
    }

    .article-sidebar {
        position: static;
    }

    .toc-mobile { display: block; }
    .toc-desktop { display: none; }
}

@media (min-width: 901px) {
    .toc-mobile { display: none; }
    .toc-desktop { display: block; }
}

@media (max-width: 768px) {
    .learn-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .learn-hero-title {
        font-size: 1.6rem;
    }

    .article-title {
        font-size: 1.5rem;
    }

    .glossary-nav-letter {
        width: 32px;
        height: 32px;
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .learn-grid {
        grid-template-columns: 1fr;
    }

    .learn-card {
        padding: 20px 16px;
    }

    .learn-hero {
        padding: 32px 16px 24px;
    }

    .glossary-nav {
        gap: 4px;
    }

    .glossary-nav-letter {
        width: 28px;
        height: 28px;
        font-size: 0.75rem;
    }
}

/* Watchlist button on coin page */
.coin-header-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}
.watchlist-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1.5px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-card-bg);
    color: var(--color-text-muted);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
}
.watchlist-btn:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}
.watchlist-btn.watchlist-active {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
}
.watchlist-btn.watchlist-active:hover {
    background: #e0850f;
}

/* Toast notifications */
.cv-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    padding: 12px 24px;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 9999;
    opacity: 0;
    transition: all 0.3s ease;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}
.cv-toast-show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}
.cv-toast-success {
    background: #16c784;
    color: #fff;
}
.cv-toast-error {
    background: #ea3943;
    color: #fff;
}

/* Dashboard watchlist search */
.watchlist-add-bar {
    margin-bottom: 20px;
}
.watchlist-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--color-bg-alt, #f8f9fa);
    border: 1.5px solid var(--color-border);
    border-radius: 10px;
    padding: 10px 16px;
}
.watchlist-search-wrap .icon {
    color: var(--color-text-muted);
    flex-shrink: 0;
}
#watchlist-search {
    border: none;
    background: transparent;
    outline: none;
    font-size: 0.95rem;
    width: 100%;
    color: var(--color-text);
}
.watchlist-search-results {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    max-height: 320px;
    overflow-y: auto;
    z-index: 100;
    margin-top: 4px;
}
.ws-result {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border: none;
    background: transparent;
    width: 100%;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background 0.15s;
    text-align: left;
}
.ws-result:hover {
    background: var(--color-bg-alt, #f8f9fa);
}
.ws-name { font-weight: 600; flex: 1; }
.ws-symbol { color: var(--color-text-muted); font-size: 0.8rem; }
.ws-add { color: var(--color-accent); }
.ws-no-results {
    padding: 16px;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.85rem;
}

/* Article images */
.article-img {
    width: 100%;
    max-width: 800px;
    height: auto;
    border-radius: 12px;
    margin: 24px auto;
    display: block;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
.article-img-hero {
    max-width: 100%;
    margin: 0 0 32px 0;
    border-radius: 12px 12px 0 0;
}
.article-img-inline {
    max-width: 600px;
    float: right;
    margin: 0 0 16px 24px;
    border-radius: 10px;
}
@media (max-width: 768px) {
    .article-img-inline {
        float: none;
        max-width: 100%;
        margin: 16px 0;
    }
}
.article-comparison-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 0.9rem;
}
.article-comparison-table th {
    background: var(--color-bg-alt, #f8f9fa);
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    border-bottom: 2px solid var(--color-border);
}
.article-comparison-table td {
    padding: 10px 16px;
    border-bottom: 1px solid var(--color-border);
}
.article-comparison-table tr:hover {
    background: var(--color-bg-alt, #f8f9fa);
}
.article-step {
    display: flex;
    gap: 16px;
    margin: 20px 0;
    padding: 20px;
    background: var(--color-card-bg);
    border-radius: 12px;
    border: 1px solid var(--color-border);
}
.article-step-num {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background: var(--color-accent);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
}
.article-step-content h3 {
    margin: 0 0 8px 0;
    font-size: 1.1rem;
}
.article-warning {
    background: #fff3cd;
    border-left: 4px solid #ffc107;
    padding: 16px 20px;
    border-radius: 0 8px 8px 0;
    margin: 20px 0;
    font-size: 0.9rem;
}
.article-tip {
    background: #d1ecf1;
    border-left: 4px solid #0dcaf0;
    padding: 16px 20px;
    border-radius: 0 8px 8px 0;
    margin: 20px 0;
    font-size: 0.9rem;
}

/* ========== ARTICLE LEARN TABLES ========== */

/* Wrapper that enables horizontal scroll on small screens */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 24px 0;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
}

/* Base table used inside .article-content */
.article-content .comparison-table,
.article-content .styled-table {
    width: 100%;
    min-width: 480px;
    border-collapse: collapse;
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Header row */
.article-content .comparison-table thead th,
.article-content .styled-table thead th {
    background: var(--color-surface-alt, #f4f5f7);
    color: var(--color-text);
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 12px 16px;
    text-align: left;
    border-bottom: 2px solid var(--color-accent);
    white-space: nowrap;
}

/* Data cells */
.article-content .comparison-table tbody td,
.article-content .styled-table tbody td {
    padding: 11px 16px;
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
    color: var(--color-text);
}

/* Alternating rows */
.article-content .comparison-table tbody tr:nth-child(even),
.article-content .styled-table tbody tr:nth-child(even) {
    background: var(--color-surface-alt, #f9fafb);
}

/* Hover highlight */
.article-content .comparison-table tbody tr:hover,
.article-content .styled-table tbody tr:hover {
    background: rgba(var(--color-accent-rgb, 56 97 251) / 0.06);
}

/* Last row: no bottom border */
.article-content .comparison-table tbody tr:last-child td,
.article-content .styled-table tbody tr:last-child td {
    border-bottom: none;
}

/* Dark-mode overrides */
@media (prefers-color-scheme: dark) {
    .article-content .comparison-table thead th,
    .article-content .styled-table thead th {
        background: var(--color-surface-alt, #1e2130);
    }
    .article-content .comparison-table tbody tr:nth-child(even),
    .article-content .styled-table tbody tr:nth-child(even) {
        background: var(--color-surface-alt, #191c27);
    }
}

/* Article hero image (staking, defi guides) */
.article-hero-img {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 380px;
    object-fit: cover;
    border-radius: var(--radius-md);
    margin: 0 0 32px 0;
    display: block;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* Article inline image (floated right on desktop) */
.article-inline-img {
    width: 100%;
    max-width: 340px;
    height: auto;
    max-height: 260px;
    object-fit: cover;
    float: right;
    margin: 4px 0 20px 24px;
    border-radius: var(--radius-md);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    display: block;
}
@media (max-width: 640px) {
    .article-inline-img {
        float: none;
        max-width: 100%;
        margin: 16px 0;
    }
}

/* Callout blocks inside article content */
.article-callout {
    display: flex;
    gap: 12px;
    padding: 16px 20px;
    border-radius: var(--radius-md);
    margin: 24px 0;
    font-size: 0.9rem;
    line-height: 1.6;
    border: 1px solid transparent;
}
.article-callout-danger {
    background: #fff0f0;
    border-color: #ea3943;
    border-left: 4px solid #ea3943;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    color: #a50000;
}
.article-callout-info {
    background: #eff4ff;
    border-color: var(--color-accent);
    border-left: 4px solid var(--color-accent);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.article-callout-success {
    background: #f0fdf4;
    border-color: #16c784;
    border-left: 4px solid #16c784;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

/* Dark-mode callout danger */
@media (prefers-color-scheme: dark) {
    .article-callout-danger {
        background: rgba(234, 57, 67, 0.1);
        color: #ff8888;
    }
}

/* Responsive: ensure table scroll hint on mobile */
@media (max-width: 640px) {
    .table-responsive {
        border-radius: 8px;
    }
    .table-responsive::after {
        content: '';
        display: none; /* visual indicator handled by overflow */
    }
    .article-content .comparison-table thead th,
    .article-content .styled-table thead th {
        font-size: 0.75rem;
        padding: 10px 12px;
    }
    .article-content .comparison-table tbody td,
    .article-content .styled-table tbody td {
        padding: 9px 12px;
        font-size: 0.85rem;
    }
}

/* ========== MOBILE DASHBOARD FIXES ========== */
@media (max-width: 768px) {
    /* Dashboard tabs - larger touch targets */
    .dashboard-tabs {
        display: flex;
        gap: 4px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 8px;
    }
    .dash-tab {
        flex-shrink: 0;
        padding: 10px 16px;
        font-size: 0.85rem;
        border-radius: 8px;
        min-width: auto;
    }
    .dash-tab span {
        display: inline;
    }

    /* Watchlist table - card layout on mobile */
    .watchlist-table thead { display: none; }
    .watchlist-table tbody tr {
        display: grid;
        grid-template-columns: auto 1fr auto;
        gap: 4px 12px;
        padding: 12px;
        border-bottom: 1px solid var(--color-border);
        align-items: center;
    }
    .watchlist-table tbody td {
        text-align: left !important;
        padding: 2px 0;
    }
    .watchlist-table tbody td:nth-child(1) { grid-column: 1; grid-row: 1 / 3; }
    .watchlist-table tbody td:nth-child(2) { grid-column: 2; grid-row: 1; }
    .watchlist-table tbody td:nth-child(3) { grid-column: 3; grid-row: 1; font-size: 0.95rem; }
    .watchlist-table tbody td:nth-child(4),
    .watchlist-table tbody td:nth-child(5),
    .watchlist-table tbody td:nth-child(6) { 
        grid-column: 2; 
        font-size: 0.8rem; 
        display: inline;
    }
    .watchlist-table tbody td:nth-child(7) { grid-column: 3; grid-row: 2; font-size: 0.75rem; }
    .watchlist-table tbody td:last-child { grid-column: 3; grid-row: 3; }

    /* Portfolio table mobile */
    .portfolio-table thead { display: none; }
    .portfolio-table tbody tr {
        display: block;
        padding: 12px;
        border-bottom: 1px solid var(--color-border);
    }
    .portfolio-table tbody td {
        display: flex;
        justify-content: space-between;
        padding: 4px 0;
        font-size: 0.85rem;
    }
    .portfolio-table tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--color-text-muted);
        font-size: 0.75rem;
    }

    /* Search bar in dashboard */
    .watchlist-search-wrap {
        padding: 8px 12px;
    }
    #watchlist-search {
        font-size: 0.9rem;
    }

    /* Alert cards mobile */
    .alert-card {
        flex-direction: column;
        gap: 8px;
    }
    .alert-card-actions {
        align-self: flex-end;
    }

    /* Dashboard header */
    .dashboard-header h1 {
        font-size: 1.3rem;
    }

    /* User dropdown mobile */
    .user-dropdown {
        right: 0;
        left: auto;
        min-width: 200px;
    }

    /* Coin header mobile */
    .coin-header {
        flex-direction: column;
        gap: 12px;
    }
    .coin-header-actions {
        width: 100%;
        justify-content: flex-start;
    }
    .watchlist-btn, .coin-compare-btn {
        flex: 1;
        justify-content: center;
        text-align: center;
    }

    /* Stats cards mobile */
    .stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .stats-card {
        padding: 12px;
    }
    .stats-card-value {
        font-size: 1.1rem;
    }

    /* Tables general mobile */
    .table-scroll {
        margin: 0 -16px;
        padding: 0 16px;
    }

    /* Chart mobile */
    .chart-controls {
        flex-wrap: wrap;
        gap: 8px;
    }
    .chart-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    /* Converter mobile */
    .converter-body {
        flex-direction: column;
    }
    .converter-swap {
        transform: rotate(90deg);
        align-self: center;
    }
}

@media (max-width: 480px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }
    .market-overview-row {
        grid-template-columns: 1fr;
    }
    .movers-section {
        grid-template-columns: 1fr;
    }
}

/* Hide data attribution - visible but not prominent */
.footer-attribution {
    font-size: 0.6rem;
    color: #ccc;
    margin-top: 8px;
    opacity: 0.4;
}

/* ============================================
   Admin Panel Styles
   ============================================ */

/* Admin link in user dropdown */
.dropdown-admin-link {
    color: var(--color-accent) !important;
    font-weight: 600;
}

/* Layout: sidebar + content */
.admin-layout {
    display: flex;
    min-height: calc(100vh - var(--header-height));
    background: var(--color-bg);
}

/* Sidebar */
.admin-sidebar {
    width: 260px;
    background: #1a1a2e;
    color: #e0e0e0;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    position: sticky;
    top: var(--header-height);
    height: calc(100vh - var(--header-height));
    overflow-y: auto;
}

.admin-sidebar-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px 20px 16px;
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.admin-sidebar-header .icon {
    color: var(--color-accent);
}

.admin-sidebar-nav {
    display: flex;
    flex-direction: column;
    padding: 12px 10px;
    gap: 2px;
    flex: 1;
}

.admin-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    color: #b0b0c0;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.15s;
    text-decoration: none;
    cursor: pointer;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
}

.admin-nav-item:hover {
    background: rgba(255,255,255,0.06);
    color: #fff;
    text-decoration: none;
}

.admin-nav-item.active {
    background: rgba(247,147,26,0.15);
    color: var(--color-accent);
}

.admin-sidebar-footer {
    padding: 10px;
    border-top: 1px solid rgba(255,255,255,0.08);
}

/* Content */
.admin-content {
    flex: 1;
    min-width: 0;
    overflow-x: auto;
}

.admin-main {
    padding: 24px 32px;
    max-width: 1200px;
}

/* Page header */
.admin-page-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

.admin-page-header h1 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.5rem;
    font-weight: 700;
}

.admin-page-count {
    color: var(--color-text-muted);
    font-size: 0.85rem;
    background: var(--color-surface-alt);
    padding: 4px 10px;
    border-radius: 20px;
}

/* Stat cards grid */
.admin-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.admin-stat-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: var(--shadow-sm);
}

.stat-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-icon-users { background: #e8f0fe; color: #3861fb; }
.stat-icon-coins { background: #fff4e6; color: #f7931a; }
.stat-icon-exchanges { background: #e8f8f0; color: #16c784; }
.stat-icon-alerts { background: #fdeaeb; color: #ea3943; }

.stat-info {
    display: flex;
    flex-direction: column;
}

.stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
}

.stat-value small {
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--color-text-muted);
}

.stat-label {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    margin-top: 2px;
}

/* Two-column grid */
.admin-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 24px;
}

.admin-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 20px;
    box-shadow: var(--shadow-sm);
}

.admin-card h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 16px;
    color: var(--color-text);
}

/* Coverage bars */
.coverage-bars { display: flex; flex-direction: column; gap: 16px; }

.coverage-item { display: flex; flex-direction: column; gap: 6px; }

.coverage-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    font-weight: 600;
}

.coverage-bar {
    height: 10px;
    background: var(--color-surface-alt);
    border-radius: 5px;
    overflow: hidden;
}

.coverage-fill {
    height: 100%;
    border-radius: 5px;
    transition: width 0.6s ease;
}

.coverage-fill-coins { background: linear-gradient(90deg, #f7931a, #ffc107); }
.coverage-fill-exchanges { background: linear-gradient(90deg, #16c784, #4ade80); }

.coverage-detail {
    display: flex;
    gap: 10px;
    font-size: 0.75rem;
}

.coverage-extra {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.coverage-stat {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--color-text-secondary);
}

/* Badges */
.badge-has-content {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--color-positive-bg);
    color: var(--color-positive);
}

.badge-no-content {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--color-negative-bg);
    color: var(--color-negative);
}

.badge-admin {
    display: inline-flex;
    padding: 1px 6px;
    border-radius: 20px;
    font-size: 0.65rem;
    font-weight: 700;
    background: var(--color-accent-light);
    color: var(--color-accent);
    margin-left: 4px;
}

/* Admin tables */
.admin-table {
    width: 100%;
    border-collapse: collapse;
}

.admin-table th {
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-muted);
    padding: 10px 12px;
    border-bottom: 2px solid var(--color-border);
    white-space: nowrap;
}

.admin-table td {
    padding: 10px 12px;
    font-size: 0.85rem;
    border-bottom: 1px solid var(--color-border-light);
    vertical-align: middle;
}

.admin-table tbody tr:hover {
    background: var(--color-surface-alt);
}

.admin-table-compact td {
    padding: 8px 10px;
    font-size: 0.8rem;
}

.user-name-cell {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Filters */
.admin-filters {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.admin-search-wrap {
    position: relative;
    flex: 1;
    min-width: 200px;
    max-width: 320px;
}

.admin-search-wrap .icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-muted);
    pointer-events: none;
}

.admin-search-wrap input {
    width: 100%;
    padding: 8px 12px 8px 34px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    background: var(--color-surface);
    color: var(--color-text);
    outline: none;
    transition: border-color 0.2s;
}

.admin-search-wrap input:focus {
    border-color: var(--color-accent);
}

.admin-filter-btns {
    display: flex;
    gap: 4px;
}

.filter-btn {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
    background: var(--color-surface);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
    cursor: pointer;
    transition: all 0.15s;
}

.filter-btn:hover {
    background: var(--color-surface-alt);
}

.filter-btn.active {
    background: var(--color-accent);
    color: #fff;
    border-color: var(--color-accent);
}

/* Edit button */
.btn-edit {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--color-link);
    background: #e8f0fe;
    border: none;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-edit:hover {
    background: #d0e0fc;
}

/* Toggle button */
.toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.15s;
    border: none;
    background: none;
}

.toggle-on { color: var(--color-positive); }
.toggle-off { color: var(--color-text-muted); }
.toggle-btn:hover { background: var(--color-surface-alt); }

/* Delete button */
.btn-delete-user {
    padding: 4px 8px !important;
    font-size: 0.75rem !important;
}

/* Admin input */
.admin-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    background: var(--color-surface);
    color: var(--color-text);
    outline: none;
    transition: border-color 0.2s;
}

.admin-input:focus {
    border-color: var(--color-accent);
}

/* Description editor textarea */
.desc-editor {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-family: var(--font-mono);
    background: var(--color-surface);
    color: var(--color-text);
    outline: none;
    resize: vertical;
    min-height: 250px;
    line-height: 1.6;
    transition: border-color 0.2s;
}

.desc-editor:focus {
    border-color: var(--color-accent);
}

/* Modal */
.admin-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
}

.admin-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
}

.admin-modal-content {
    position: relative;
    background: var(--color-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    width: 90%;
    max-width: 700px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.admin-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-border);
}

.admin-modal-header h2 {
    font-size: 1.1rem;
    font-weight: 600;
}

.btn-close-modal {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: all 0.15s;
    background: none;
    border: none;
}

.btn-close-modal:hover {
    background: var(--color-surface-alt);
    color: var(--color-text);
}

.admin-modal-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

.admin-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 16px 20px;
    border-top: 1px solid var(--color-border);
}

/* Pagination */
.admin-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 20px;
    padding: 12px 0;
}

.admin-pagination .pagination-pages {
    display: flex;
    gap: 4px;
}

.pagination-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    cursor: pointer;
    transition: all 0.15s;
}

.pagination-btn:hover {
    background: var(--color-surface-alt);
}

.pagination-btn.active {
    background: var(--color-accent);
    color: #fff;
    border-color: var(--color-accent);
}

.pagination-ellipsis {
    padding: 6px 8px;
    color: var(--color-text-muted);
}

/* Responsive */
@media (max-width: 900px) {
    .admin-layout {
        flex-direction: column;
    }
    .admin-sidebar {
        width: 100%;
        position: relative;
        top: 0;
        height: auto;
        flex-direction: row;
        overflow-x: auto;
    }
    .admin-sidebar-header {
        display: none;
    }
    .admin-sidebar-nav {
        flex-direction: row;
        padding: 8px;
        gap: 4px;
        overflow-x: auto;
    }
    .admin-nav-item {
        white-space: nowrap;
        padding: 8px 12px;
        font-size: 0.8rem;
    }
    .admin-sidebar-footer {
        display: none;
    }
    .admin-main {
        padding: 16px;
    }
    .admin-grid-2 {
        grid-template-columns: 1fr;
    }
    .admin-stat-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .admin-stat-grid {
        grid-template-columns: 1fr;
    }
    .admin-filters {
        flex-direction: column;
        align-items: stretch;
    }
    .admin-search-wrap {
        max-width: none;
    }
    .admin-table th,
    .admin-table td {
        padding: 8px 6px;
        font-size: 0.78rem;
    }
}

/* ============================================
   Blockchains Page
   ============================================ */

/* ---------- Hero ---------- */
.chains-hero {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    border-radius: var(--radius-lg);
    padding: 40px 36px;
    margin-bottom: 28px;
    display: flex;
    align-items: center;
    gap: 40px;
    color: #fff;
}

.chains-hero-content {
    flex: 1;
}

.chains-hero-title {
    font-size: 1.85rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.chains-hero-title .icon {
    color: var(--color-accent);
}

.chains-hero-subtitle {
    color: #b0b8c8;
    font-size: 1rem;
    line-height: 1.7;
    max-width: 600px;
}

.chains-hero-stats {
    display: flex;
    gap: 16px;
}

.chains-stat-card {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: var(--radius-md);
    padding: 16px 22px;
    text-align: center;
    min-width: 100px;
}

.chains-stat-value {
    display: block;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--color-accent);
    font-family: var(--font-mono);
}

.chains-stat-label {
    display: block;
    font-size: 0.78rem;
    color: #8892a4;
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ---------- Table ---------- */
.chains-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.chains-table thead th {
    background: var(--color-surface-alt);
    padding: 12px 14px;
    text-align: left;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--color-text-secondary);
    white-space: nowrap;
    border-bottom: 2px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 1;
}

.chains-table tbody td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--color-border-light);
    vertical-align: middle;
}

.chains-table tbody tr:hover {
    background: var(--color-surface-alt);
}

.chain-name-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.chain-name-link {
    color: var(--color-text);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s;
}

.chain-name-link:hover {
    color: var(--color-link);
}

.chain-symbol {
    color: var(--color-text-muted);
    font-size: 0.8rem;
    font-weight: 400;
    margin-left: 6px;
    text-transform: uppercase;
}

.chain-tps-cell {
    font-family: var(--font-mono);
    font-weight: 600;
}

/* ---------- Badges ---------- */
.chain-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space: nowrap;
}

.chain-badge-l1 {
    background: #e3f2fd;
    color: #1565c0;
    border: 1px solid #90caf9;
}

.chain-badge-l2 {
    background: #f3e5f5;
    color: #7b1fa2;
    border: 1px solid #ce93d8;
}

.chain-badge-l0 {
    background: #fff3e0;
    color: #e65100;
    border: 1px solid #ffcc80;
}

.chain-badge-pow {
    background: #fff8e1;
    color: #f57f17;
    border: 1px solid #ffe082;
}

.chain-badge-pos {
    background: #e8f5e9;
    color: #2e7d32;
    border: 1px solid #a5d6a7;
}

.chain-sc-yes {
    color: var(--color-positive);
}

.chain-sc-no {
    color: var(--color-text-muted);
}

/* ---------- Chain Cards Grid ---------- */
.chains-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 20px;
    margin-top: 20px;
    margin-bottom: 40px;
}

.chain-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-top: 3px solid var(--chain-color, #666);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: box-shadow 0.2s, transform 0.15s;
}

.chain-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.chain-card-expanded {
    box-shadow: var(--shadow-lg);
}

.chain-card-header {
    padding: 20px;
}

.chain-card-title-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.chain-card-name {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0;
}

.chain-card-symbol {
    color: var(--color-text-muted);
    font-size: 0.82rem;
    text-transform: uppercase;
}

.chain-card-desc {
    color: var(--color-text-secondary);
    font-size: 0.88rem;
    line-height: 1.5;
    margin-bottom: 12px;
}

.chain-card-price-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.chain-card-price {
    font-size: 1.15rem;
    font-weight: 700;
    font-family: var(--font-mono);
}

.chain-card-mcap {
    color: var(--color-text-secondary);
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

.chain-card-toggle {
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 8px 16px;
    font-size: 0.82rem;
    color: var(--color-text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background 0.2s, color 0.2s;
    width: 100%;
    justify-content: center;
}

.chain-card-toggle:hover {
    background: var(--color-border);
    color: var(--color-text);
}

/* ---------- Card Body / Details ---------- */
.chain-card-body {
    padding: 0 20px 20px;
    border-top: 1px solid var(--color-border-light);
}

.chain-specs-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin: 16px 0;
}

.chain-spec {
    background: var(--color-surface-alt);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
}

.chain-spec-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 4px;
}

.chain-spec-value {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text);
}

.chain-detail-section {
    margin-top: 14px;
}

.chain-detail-section h4 {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

.chain-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.chain-tag {
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 0.78rem;
    color: var(--color-text-secondary);
}

.chain-card-links {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--color-border-light);
}

.chain-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
    background: var(--color-link);
    color: #fff;
}

.chain-link-btn:hover {
    opacity: 0.9;
}

.chain-link-external {
    background: var(--color-surface-alt);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
}

.chain-link-external:hover {
    background: var(--color-border);
    color: var(--color-text);
}

/* ---------- Comparison Tool ---------- */
.chains-compare-section {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 32px;
    margin-top: 40px;
}

.chains-compare-selects {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.compare-select-wrap {
    flex: 1;
    min-width: 200px;
}

.compare-select-wrap label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    margin-bottom: 6px;
}

.compare-select-wrap select {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    background: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
}

.compare-select-wrap select:focus {
    outline: none;
    border-color: var(--color-link);
    box-shadow: 0 0 0 3px rgba(56, 97, 251, 0.15);
}

.compare-vs {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--color-text-muted);
    padding-bottom: 10px;
}

.chains-compare-btn {
    padding: 10px 24px;
    white-space: nowrap;
}

.chains-compare-error {
    color: var(--color-negative);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
    font-size: 0.9rem;
}

/* ---------- Comparison Table ---------- */
.chains-compare-table-wrap {
    margin-top: 24px;
    overflow-x: auto;
}

.chains-compare-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.chains-compare-table thead th {
    padding: 14px 16px;
    text-align: left;
    font-weight: 600;
    background: var(--color-surface-alt);
    white-space: nowrap;
}

.chains-compare-table tbody td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-border-light);
}

.chains-compare-table .compare-label {
    font-weight: 600;
    color: var(--color-text-secondary);
    white-space: nowrap;
    width: 160px;
}

.chains-compare-table .compare-val-a,
.chains-compare-table .compare-val-b {
    font-weight: 500;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    .chains-hero {
        flex-direction: column;
        padding: 28px 24px;
        gap: 24px;
    }

    .chains-hero-stats {
        width: 100%;
        justify-content: center;
    }

    .chains-grid {
        grid-template-columns: 1fr;
    }

    .chains-compare-selects {
        flex-direction: column;
        align-items: stretch;
    }

    .compare-vs {
        text-align: center;
        padding: 0;
    }

    .compare-select-wrap {
        min-width: auto;
    }

    .chains-compare-section {
        padding: 20px;
    }
}

@media (max-width: 600px) {
    .chains-hero-title {
        font-size: 1.3rem;
    }

    .chains-hero-subtitle {
        font-size: 0.88rem;
    }

    .chains-hero-stats {
        flex-direction: column;
        gap: 10px;
    }

    .chains-stat-card {
        min-width: auto;
    }

    .chain-specs-grid {
        grid-template-columns: 1fr;
    }

    .chains-table {
        font-size: 0.8rem;
    }

    .chains-table thead th,
    .chains-table tbody td {
        padding: 8px 8px;
    }

    .chain-card-header {
        padding: 14px;
    }

    .chain-card-body {
        padding: 0 14px 14px;
    }

    .chains-category-bar-scroll {
        flex-wrap: wrap;
    }

    .chains-cat-pill {
        font-size: 0.72rem;
        padding: 6px 10px;
    }

    .chains-category-desc {
        flex-direction: column;
        gap: 10px;
        padding: 14px;
    }

    .chain-cat-badges-cell {
        flex-direction: column;
    }
}

/* ---------- Category Filter Bar ---------- */
.chains-category-bar {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 16px 20px;
    margin-bottom: 20px;
}

.chains-category-bar-scroll {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.chains-cat-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 24px;
    font-size: 0.8rem;
    font-weight: 600;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.chains-cat-pill:hover {
    background: var(--color-surface-alt);
    border-color: var(--color-text-muted);
    color: var(--color-text);
}

.chains-cat-pill-active {
    background: var(--color-link);
    color: #fff;
    border-color: var(--color-link);
}

.chains-cat-pill-active:hover {
    opacity: 0.9;
    background: var(--color-link);
    color: #fff;
    border-color: var(--color-link);
}

.chains-cat-count {
    background: rgba(0,0,0,0.1);
    padding: 1px 7px;
    border-radius: 12px;
    font-size: 0.72rem;
    font-weight: 700;
    min-width: 20px;
    text-align: center;
}

.chains-cat-pill-active .chains-cat-count {
    background: rgba(255,255,255,0.25);
}

/* ---------- Category Description ---------- */
.chains-category-desc {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 22px;
    border-radius: var(--radius-md);
    margin-bottom: 20px;
}

.chains-category-desc-icon {
    font-size: 1.6rem;
    flex-shrink: 0;
}

.chains-category-desc strong {
    display: block;
    font-size: 1rem;
    margin-bottom: 4px;
}

.chains-category-desc p {
    color: var(--color-text-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0;
}

.chains-category-desc-count {
    display: inline-block;
    margin-top: 6px;
    font-size: 0.78rem;
    color: var(--color-text-muted);
    font-weight: 600;
}

/* ---------- Category Badges (inline) ---------- */
.chain-cat-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.68rem;
    font-weight: 600;
    white-space: nowrap;
    letter-spacing: 0.2px;
}

.chain-cat-badges-cell {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.chain-card-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 12px;
}

/* ---------- Sidechain Badge ---------- */
.chain-badge-sidechain {
    background: #e8eaf6;
    color: #283593;
    border: 1px solid #9fa8da;
}

/* ============================================
   Wallets Section
   ============================================ */

/* ---------- Hero ---------- */
.wallets-hero {
    background: linear-gradient(135deg, #1a1a2e 0%, #0f3460 50%, #16213e 100%);
    border-radius: var(--radius-lg);
    padding: 40px 36px;
    margin-bottom: 28px;
    color: #fff;
}

.wallets-hero .section-title {
    color: #fff;
    display: flex;
    align-items: center;
    gap: 12px;
}

.wallets-hero .section-title .icon {
    color: var(--color-accent);
}

.wallets-hero .section-subtitle {
    color: #b0b8c8;
    max-width: 700px;
}

/* ---------- Filters ---------- */
.wallet-filters {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

/* ---------- Type Badges ---------- */
.wallet-type-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space: nowrap;
}

.wallet-type-hw {
    background: #fff3e0;
    color: #e65100;
    border: 1px solid #ffcc80;
}

.wallet-type-sw {
    background: #e3f2fd;
    color: #1565c0;
    border: 1px solid #90caf9;
}

/* ---------- Stars ---------- */
.wallet-stars {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.wallet-stars .star-full {
    color: #f7931a;
    fill: #f7931a;
}

.wallet-stars .star-half {
    color: #f7931a;
    fill: none;
}

.wallet-stars .star-empty {
    color: #ddd;
    fill: none;
}

.wallet-stars .star-number {
    margin-left: 6px;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--color-text);
}

.wallet-stars-lg .star-number {
    font-size: 1rem;
}

/* ---------- Price ---------- */
.wallet-price-free {
    background: var(--color-positive-bg);
    color: var(--color-positive);
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
}

.wallet-price-paid {
    font-weight: 700;
    font-family: var(--font-mono);
    font-size: 0.9rem;
    color: var(--color-text);
}

/* ---------- Check / X icons ---------- */
.wallet-check { color: var(--color-positive); }
.wallet-x { color: var(--color-negative); }
.wallet-check-text { color: var(--color-positive); font-weight: 600; }
.wallet-x-text { color: var(--color-negative); font-weight: 600; }

/* ---------- Table ---------- */
.wallets-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.wallets-table thead th {
    background: var(--color-surface-alt);
    padding: 12px 14px;
    text-align: left;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--color-text-secondary);
    white-space: nowrap;
    border-bottom: 2px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 1;
}

.wallets-table tbody td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--color-border-light);
    vertical-align: middle;
}

.wallets-table tbody tr:hover {
    background: var(--color-surface-alt);
}

.wallet-name-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.wallet-name-cell img {
    border-radius: var(--radius-sm);
    object-fit: contain;
}

.wallet-name {
    font-weight: 600;
    display: block;
}

.wallet-company {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    display: block;
}

.clickable-row {
    cursor: pointer;
    transition: background 0.15s;
}

/* ---------- Mobile Cards ---------- */
.wallet-mobile-only { display: none; }
.wallet-desktop-only { display: block; }

.wallets-card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 24px;
}

.wallet-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 16px;
    transition: box-shadow 0.2s, transform 0.15s;
}

.wallet-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.wallet-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.wallet-card-img img {
    border-radius: var(--radius-sm);
    object-fit: contain;
}

.wallet-card-info {
    flex: 1;
}

.wallet-card-name {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 4px;
}

.wallet-card-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    text-align: center;
    background: var(--color-surface-alt);
    border-radius: var(--radius-sm);
    padding: 10px 8px;
}

.wcs-label {
    display: block;
    font-size: 0.7rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 4px;
}

.wcs-value {
    font-size: 0.85rem;
    font-weight: 600;
}

/* ---------- Detail Page ---------- */
.wallet-detail-hero {
    display: flex;
    align-items: flex-start;
    gap: 28px;
    margin-bottom: 32px;
    padding: 28px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.wallet-detail-img-wrap {
    flex-shrink: 0;
}

.wallet-detail-img {
    border-radius: var(--radius-md);
    object-fit: contain;
    background: var(--color-surface-alt);
    padding: 12px;
}

.wallet-detail-header-info {
    flex: 1;
}

.wallet-detail-title-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.wallet-detail-title-row h1 {
    font-size: 1.8rem;
    font-weight: 800;
    margin: 0;
}

.wallet-detail-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    color: var(--color-text-secondary);
    font-size: 0.88rem;
    margin-bottom: 12px;
}

.wallet-detail-meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.wallet-detail-price-rating {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.wallet-detail-price {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 1.3rem;
}

.wallet-detail-price.free {
    color: var(--color-positive);
}

.wallet-detail-price.paid {
    color: var(--color-text);
}

/* ---------- Specs Grid ---------- */
.wallet-specs-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 32px;
}

.wallet-spec-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 20px;
    text-align: center;
}

.wsc-icon {
    margin-bottom: 8px;
    color: var(--color-accent);
}

.wsc-label {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 6px;
}

.wsc-value {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text);
}

.wsc-small {
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.4;
}

/* ---------- Chains Badges ---------- */
.wallet-chains {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 24px;
}

.wallet-chain-badge {
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 0.78rem;
    color: var(--color-text-secondary);
    font-weight: 500;
}

/* ---------- Pros & Cons ---------- */
.wallet-proscons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 32px;
}

.wallet-pros, .wallet-cons {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 24px;
}

.wallet-pros {
    border-top: 3px solid var(--color-positive);
}

.wallet-cons {
    border-top: 3px solid var(--color-negative);
}

.wallet-pros h2, .wallet-cons h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.1rem;
    margin-bottom: 16px;
}

.wallet-pros h2 { color: var(--color-positive); }
.wallet-cons h2 { color: var(--color-negative); }

.wallet-pros ul, .wallet-cons ul {
    list-style: none;
    padding: 0;
}

.wallet-pros li, .wallet-cons li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid var(--color-border-light);
    font-size: 0.88rem;
    line-height: 1.5;
}

.wallet-pros li:last-child, .wallet-cons li:last-child {
    border-bottom: none;
}

.wallet-pros li .icon, .wallet-cons li .icon {
    flex-shrink: 0;
    margin-top: 2px;
}

/* ---------- Description ---------- */
.wallet-description {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 28px;
    margin-bottom: 32px;
}

.wallet-description h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.1rem;
    margin-bottom: 16px;
}

.wallet-desc-content {
    font-size: 0.92rem;
    line-height: 1.8;
    color: var(--color-text-secondary);
}

/* ---------- Actions ---------- */
.wallet-actions {
    display: flex;
    gap: 12px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.btn-wallet-visit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--color-accent);
    color: #fff;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    transition: opacity 0.2s;
    border: none;
    cursor: pointer;
}

.btn-wallet-visit:hover {
    opacity: 0.9;
}

.btn-wallet-compare {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    transition: background 0.2s;
    cursor: pointer;
}

.btn-wallet-compare:hover {
    background: var(--color-surface-alt);
}

/* ---------- Related Wallets ---------- */
.wallet-section {
    margin-bottom: 32px;
}

.wallet-section h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.1rem;
    margin-bottom: 16px;
}

.wallet-related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

.wallet-related-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--color-text);
    transition: box-shadow 0.2s, transform 0.15s;
}

.wallet-related-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.wallet-related-card img {
    border-radius: var(--radius-sm);
    object-fit: contain;
    flex-shrink: 0;
}

.wrc-info {
    flex: 1;
}

.wrc-name {
    font-weight: 600;
    display: block;
}

.wrc-meta {
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.wrc-rating {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--color-accent);
    flex-shrink: 0;
}

/* ---------- Info Section ---------- */
.wallets-info-section {
    margin-top: 40px;
    margin-bottom: 24px;
}

.wallets-info-section h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.2rem;
    margin-bottom: 20px;
}

.wallets-info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.wallets-info-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 24px;
    text-align: center;
}

.wic-icon {
    color: var(--color-accent);
    margin-bottom: 12px;
}

.wallets-info-card h3 {
    font-size: 1rem;
    margin-bottom: 8px;
}

.wallets-info-card p {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
}

/* ---------- Compare Page ---------- */
.compare-selector {
    margin: 24px 0;
}

.compare-checkboxes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 8px;
    margin-bottom: 20px;
}

.compare-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    font-size: 0.88rem;
}

.compare-option:hover {
    background: var(--color-surface-alt);
}

.compare-option.selected {
    border-color: var(--color-accent);
    background: var(--color-accent-light);
}

.compare-option input[type="checkbox"] {
    accent-color: var(--color-accent);
}

.compare-option img {
    border-radius: var(--radius-sm);
    object-fit: contain;
}

.compare-go-btn {
    font-size: 0.92rem;
}

.compare-go-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.compare-table-wrap {
    overflow-x: auto;
    margin: 24px 0;
}

.compare-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
    min-width: 600px;
}

.compare-table thead th {
    padding: 16px;
    text-align: center;
    background: var(--color-surface-alt);
    border-bottom: 2px solid var(--color-border);
}

.compare-label-col {
    width: 140px;
}

.compare-wallet-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--color-text);
}

.compare-wallet-header:hover {
    color: var(--color-link);
}

.compare-wallet-header img {
    border-radius: var(--radius-sm);
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

.compare-wallet-name {
    font-weight: 700;
    font-size: 0.95rem;
}

.compare-table tbody td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-border-light);
    vertical-align: top;
    text-align: center;
}

.compare-label {
    text-align: left !important;
    font-weight: 600;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.compare-win-cell {
    background: var(--color-accent-light);
}

.compare-winner {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--color-accent);
    background: var(--color-accent-light);
    padding: 2px 8px;
    border-radius: 20px;
    margin-left: 4px;
}

.compare-small-text {
    font-size: 0.8rem;
    text-align: center !important;
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.compare-proscons {
    text-align: left !important;
    padding-left: 20px !important;
}

.compare-pros-list, .compare-cons-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.compare-pros-list li, .compare-cons-list li {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 4px 0;
    font-size: 0.8rem;
    line-height: 1.4;
}

.compare-pros-list li .icon, .compare-cons-list li .icon {
    flex-shrink: 0;
    margin-top: 1px;
}

.compare-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--color-link);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.85rem;
}

.compare-link:hover {
    text-decoration: underline;
}

/* Compare: Type Tabs */
.compare-type-tabs {
    display: flex;
    gap: 8px;
    margin: 20px 0 16px;
}

.compare-type-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text-secondary);
    cursor: pointer;
    font-weight: 600;
    font-size: 0.88rem;
    transition: all 0.15s;
}

.compare-type-tab:hover {
    border-color: var(--color-accent);
    color: var(--color-text);
}

.compare-type-tab.active {
    border-color: var(--color-accent);
    background: var(--color-accent-light);
    color: var(--color-accent);
}

.compare-tab-count {
    font-size: 0.75rem;
    background: var(--color-border);
    padding: 1px 7px;
    border-radius: 20px;
}

.compare-type-tab.active .compare-tab-count {
    background: var(--color-accent);
    color: #fff;
}

/* Compare: Popular Comparisons */
.compare-popular {
    margin-top: 40px;
    padding-top: 32px;
    border-top: 1px solid var(--color-border-light);
}

.compare-popular h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.compare-popular-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

.compare-popular-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--color-text);
    transition: border-color 0.15s, background 0.15s;
}

.compare-popular-card:hover {
    border-color: var(--color-accent);
    background: var(--color-surface-alt);
}

.compare-popular-vs {
    font-weight: 600;
    font-size: 0.9rem;
}

.compare-popular-vs em {
    color: var(--color-text-secondary);
    font-style: normal;
    margin: 0 4px;
}

.compare-popular-tag {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 20px;
    background: var(--color-accent-light);
    color: var(--color-accent);
}

/* Compare: Mixed Type Warning */
.compare-mixed-warning {
    max-width: 500px;
    margin: 2rem auto;
    padding: 2rem;
    background: var(--color-surface);
    border: 2px solid #f59e0b;
    border-radius: var(--radius-md);
}

.compare-mixed-warning h2 {
    margin: 1rem 0 0.5rem;
}

.compare-mixed-warning p {
    color: var(--color-text-secondary);
    line-height: 1.6;
}

/* Compare: Verdict Cards */
.compare-verdict-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin: 24px 0;
}

.compare-verdict-card {
    position: relative;
    text-align: center;
    padding: 24px 16px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: border-color 0.15s;
}

.compare-verdict-card:hover {
    border-color: var(--color-accent);
}

.compare-verdict-best {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 1px var(--color-accent);
}

.compare-verdict-ribbon {
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 14px;
    background: var(--color-accent);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    border-radius: 0 0 8px 8px;
}

.compare-verdict-card img {
    border-radius: var(--radius-sm);
    object-fit: contain;
    margin: 0 auto 10px;
    display: block;
}

.compare-verdict-card h3 {
    font-size: 1rem;
    margin-bottom: 6px;
}

.compare-verdict-card h3 a {
    color: var(--color-text);
    text-decoration: none;
}

.compare-verdict-card h3 a:hover {
    color: var(--color-link);
}

.compare-verdict-price {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 1.1rem;
    margin: 8px 0 4px;
}

.compare-verdict-coins {
    font-size: 0.82rem;
    color: var(--color-text-secondary);
    margin-bottom: 12px;
}

.compare-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 32px 0 0;
}

.compare-year-badge {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 20px;
    background: var(--color-accent-light);
    color: var(--color-accent);
    vertical-align: middle;
}

/* Compare: SEO Summary */
.compare-seo-summary {
    margin: 32px 0;
    padding: 24px;
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    line-height: 1.7;
}

.compare-seo-summary h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.compare-seo-summary h3 {
    margin: 16px 0 8px;
    font-size: 1rem;
}

.compare-seo-summary p {
    color: var(--color-text-secondary);
    font-size: 0.9rem;
}

.compare-diff-list {
    padding-left: 20px;
    margin: 8px 0;
}

.compare-diff-list li {
    padding: 4px 0;
    font-size: 0.88rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
}

/* Compare: Other Comparisons */
.compare-also {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--color-border-light);
}

.compare-also h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.compare-also-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.compare-also-link {
    padding: 8px 16px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--color-text);
    font-size: 0.85rem;
    font-weight: 600;
    transition: border-color 0.15s, background 0.15s;
}

.compare-also-link:hover {
    border-color: var(--color-accent);
    background: var(--color-surface-alt);
}

.compare-also-all {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--color-accent);
    border-color: var(--color-accent);
}

/* ---------- Wallets Responsive ---------- */
@media (max-width: 900px) {
    .wallets-hero {
        padding: 28px 20px;
    }

    .wallet-specs-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .wallet-proscons {
        grid-template-columns: 1fr;
    }

    .wallets-info-grid {
        grid-template-columns: 1fr;
    }

    .wallet-detail-hero {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 20px;
    }

    .wallet-detail-title-row {
        justify-content: center;
    }

    .wallet-detail-meta {
        justify-content: center;
    }

    .wallet-detail-price-rating {
        justify-content: center;
    }

    .wallet-mobile-only { display: block; }
    .wallet-desktop-only { display: none; }

    .compare-checkboxes {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .wallet-specs-grid {
        grid-template-columns: 1fr;
    }

    .wallet-detail-title-row h1 {
        font-size: 1.3rem;
    }

    .wallet-card-stats {
        grid-template-columns: 1fr;
    }

    .wallet-actions {
        flex-direction: column;
    }

    .wallet-related-grid {
        grid-template-columns: 1fr;
    }

    .wallets-hero .section-title {
        font-size: 1.2rem;
    }
}

/* ---------- Wallet Gallery ---------- */
.wallet-gallery { margin: 24px 0; }
.gallery-main {
    width: 100%;
    max-width: 500px;
    aspect-ratio: 1;
    background: var(--color-surface-alt);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: zoom-in;
    margin: 0 auto;
}
.gallery-main img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    transition: transform 0.3s;
}
.gallery-main:hover img {
    transform: scale(1.03);
}
.gallery-thumbs {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 12px;
    flex-wrap: wrap;
}
.gallery-thumb {
    width: 72px;
    height: 72px;
    object-fit: contain;
    border-radius: var(--radius-sm);
    border: 2px solid transparent;
    cursor: pointer;
    background: var(--color-surface-alt);
    padding: 4px;
    transition: border-color 0.2s;
}
.gallery-thumb.active,
.gallery-thumb:hover {
    border-color: var(--color-accent);
}
/* Fullscreen overlay */
.gallery-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    cursor: zoom-out;
    animation: fadeIn 0.2s ease;
}
.gallery-overlay img {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: var(--radius-sm);
}
@media (max-width: 600px) {
    .gallery-main { max-width: 100%; aspect-ratio: auto; padding: 24px; }
    .gallery-thumb { width: 56px; height: 56px; }
}

/* ========== Wallet Sections (Hardware / Software) ========== */
.wallets-section {
    margin-bottom: 40px;
}

.wallets-section-header {
    margin-bottom: 20px;
    position: relative;
}

.wallets-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.4rem;
    font-weight: 800;
    margin: 0 0 6px;
}

.wallets-section-hw .wallets-section-title {
    color: var(--color-accent);
}

.wallets-section-sw .wallets-section-title {
    color: #6ea8fe;
}

.wallets-section-subtitle {
    font-size: 0.88rem;
    color: var(--color-text-muted);
    margin: 0;
    max-width: 600px;
}

.wallets-section-count {
    position: absolute;
    top: 4px;
    right: 0;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-text-muted);
    background: var(--color-surface-alt);
    padding: 4px 12px;
    border-radius: 20px;
}

/* ========== Wallet Card Grid (both mobile & desktop) ========== */
.wallets-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.wallet-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: box-shadow 0.2s, transform 0.15s;
    cursor: pointer;
}

.wallet-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.wallet-card-hw {
    border-top: 3px solid var(--color-accent);
}

.wallet-card-sw {
    border-top: 3px solid #6ea8fe;
}

/* Image sections for cards */
.wallet-card-img-section {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: var(--color-surface-alt);
    min-height: 140px;
}

.wallet-card-img-product {
    background: linear-gradient(135deg, var(--color-surface-alt), var(--color-surface));
}

.wallet-card-img-screenshot {
    background: linear-gradient(135deg, #1a1a2e, #16213e);
}

.wallet-card-product-img {
    max-width: 100%;
    max-height: 120px;
    object-fit: contain;
}

.wallet-card-screenshot-img {
    max-width: 100%;
    max-height: 120px;
    object-fit: contain;
    border-radius: var(--radius-sm);
}

/* Card body */
.wallet-card-body {
    padding: 16px;
}

.wallet-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.wallet-card-info {
    flex: 1;
}

.wallet-card-name {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 2px;
}

.wallet-company-small {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.wallet-card-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    text-align: center;
    background: var(--color-surface-alt);
    border-radius: var(--radius-sm);
    padding: 10px 8px;
}

/* ========== Sort Pills ========== */
.sort-pill.active {
    background: var(--color-accent);
    color: #fff;
}

/* ========== Detail Page: Hardware Hero ========== */
.wallet-detail-hero-hw {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 32px;
    align-items: start;
}

.wallet-detail-product-photo {
    background: var(--color-surface-alt);
    border-radius: var(--radius-lg);
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 240px;
}

.wallet-detail-img-large {
    max-width: 100%;
    max-height: 220px;
    object-fit: contain;
}

.btn-wallet-visit-inline {
    margin-top: 16px;
    display: inline-flex;
}

/* ========== Detail Page: Software Hero ========== */
.wallet-detail-hero-sw {
    display: flex;
    align-items: flex-start;
    gap: 28px;
}

/* ========== Screenshot Preview ========== */
.wallet-screenshot-preview {
    margin-bottom: 32px;
}

.wallet-screenshot-preview h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
    margin-bottom: 12px;
    color: var(--color-text-secondary);
}

.wallet-screenshot-frame {
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 16px;
    overflow: hidden;
    max-width: 800px;
}

.wallet-screenshot-img {
    width: 100%;
    border-radius: var(--radius-sm);
    display: block;
}

/* ========== Alternativas Section ========== */
.wallet-alternatives {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 28px;
}

.wallet-alt-subtitle {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin: -8px 0 20px;
}

.wallet-related-hw {
    border-left: 3px solid var(--color-accent);
}

.wallet-related-sw {
    border-left: 3px solid #6ea8fe;
}

.wrc-img-wrap {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wrc-img-wrap img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: var(--radius-sm);
}

.wrc-company {
    display: block;
    font-size: 0.72rem;
    color: var(--color-text-muted);
    margin-top: 2px;
}

/* ========== Responsive: Wallet Sections ========== */
@media (max-width: 900px) {
    .wallets-card-grid {
        grid-template-columns: 1fr;
    }

    .wallet-detail-hero-hw {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .wallet-detail-product-photo {
        max-width: 300px;
        margin: 0 auto;
    }

    .wallet-detail-hero-hw .wallet-detail-title-row {
        justify-content: center;
    }

    .wallet-detail-hero-hw .wallet-detail-meta {
        justify-content: center;
    }

    .wallet-detail-hero-hw .wallet-detail-price-rating {
        justify-content: center;
    }

    .wallet-detail-hero-hw .btn-wallet-visit-inline {
        margin: 16px auto 0;
    }

    .wallet-detail-hero-sw {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .wallets-section-count {
        position: static;
        display: inline-block;
        margin-top: 8px;
    }
}

@media (max-width: 600px) {
    .wallets-section-title {
        font-size: 1.1rem;
    }

    .wallet-card-img-section {
        min-height: 100px;
    }

    .wallet-card-product-img,
    .wallet-card-screenshot-img {
        max-height: 90px;
    }

    .filter-group {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ==================== WALLET RANKING TABS ==================== */

.wallet-ranking-tabs {
    display: flex;
    gap: 8px;
    margin: 0 0 24px 0;
    padding: 0;
}

.wallet-ranking-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border: 2px solid var(--border);
    border-radius: 12px;
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.wallet-ranking-tab:hover {
    border-color: var(--text-secondary);
}

.wallet-ranking-tab.active.wallet-tab-hw {
    background: linear-gradient(135deg, #f97316, #ea580c);
    border-color: #f97316;
    color: #fff;
}

.wallet-ranking-tab.active.wallet-tab-sw {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    border-color: #3b82f6;
    color: #fff;
}

.wallet-tab-count {
    background: rgba(255,255,255,0.2);
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 0.8rem;
}

.wallet-ranking-tab:not(.active) .wallet-tab-count {
    background: var(--bg-hover);
}

.wallet-ranking-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 20px;
}

.wallet-ranking-title {
    font-size: 1.4rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-primary);
    margin: 0;
}

.wallet-ranking-sort {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Ranking badges */
.ranking-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-weight: 700;
    font-size: 0.85rem;
    background: var(--bg-hover);
    color: var(--text-secondary);
}

.ranking-gold {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #78350f;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4);
}

.ranking-silver {
    background: linear-gradient(135deg, #d1d5db, #9ca3af);
    color: #374151;
    box-shadow: 0 2px 8px rgba(156, 163, 175, 0.4);
}

.ranking-bronze {
    background: linear-gradient(135deg, #d97706, #b45309);
    color: #fff;
    box-shadow: 0 2px 8px rgba(217, 119, 6, 0.3);
}

.wallet-ranking-table .td-rank {
    width: 50px;
    text-align: center;
}

.wallet-ranking-table .th-rank {
    width: 50px;
    text-align: center;
}

.wallet-ranking-table .th-center {
    text-align: center;
}

.ranking-top-row {
    background: rgba(245, 158, 11, 0.03);
}

.ranking-top-row:hover {
    background: rgba(245, 158, 11, 0.07) !important;
}

/* Security tags */
.security-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}

.security-high {
    background: rgba(34, 197, 94, 0.12);
    color: #16a34a;
}

.security-good {
    background: rgba(59, 130, 246, 0.12);
    color: #2563eb;
}

.security-mid {
    background: rgba(245, 158, 11, 0.12);
    color: #d97706;
}

.security-low {
    background: rgba(239, 68, 68, 0.12);
    color: #dc2626;
}

/* Platform tags */
.platform-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.platform-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.72rem;
    font-weight: 500;
    background: var(--bg-hover);
    color: var(--text-secondary);
    white-space: nowrap;
}

/* Ranking SEO text */
.wallet-ranking-seo {
    margin-top: 32px;
    padding: 24px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.wallet-ranking-seo h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
    margin: 0 0 12px 0;
    color: var(--text-primary);
}

.wallet-ranking-seo p {
    color: var(--text-secondary);
    line-height: 1.7;
    margin: 0;
    font-size: 0.9rem;
}

/* ==================== ADMIN WALLET STYLES ==================== */

.admin-modal-wide {
    max-width: 900px;
}

.admin-wallet-img-preview {
    width: 40px;
    height: 40px;
    object-fit: contain;
    border-radius: 6px;
    background: var(--bg-hover);
    padding: 2px;
}

.admin-wallet-edit-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.admin-wallet-main-preview {
    width: 100%;
    max-width: 200px;
    aspect-ratio: 1;
    background: var(--bg-hover);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 12px;
    border: 1px solid var(--border);
}

.admin-wallet-main-preview img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.admin-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.admin-gallery-item {
    position: relative;
    aspect-ratio: 1;
    background: var(--bg-hover);
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border);
}

.admin-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.admin-gallery-delete {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(220, 38, 38, 0.9);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
}

.admin-gallery-item:hover .admin-gallery-delete {
    opacity: 1;
}

.admin-upload-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--bg-hover);
    border: 1px dashed var(--border);
    border-radius: 8px;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s;
}

.admin-upload-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.admin-upload-btn-gallery {
    margin-top: 4px;
}

.admin-wallet-edit-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.wallet-type-badge-admin {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: capitalize;
}

.wallet-type-hw-admin {
    background: rgba(249, 115, 22, 0.12);
    color: #ea580c;
}

.wallet-type-sw-admin {
    background: rgba(59, 130, 246, 0.12);
    color: #2563eb;
}

@media (max-width: 768px) {
    .wallet-ranking-tabs {
        flex-direction: column;
    }

    .wallet-ranking-tab {
        justify-content: center;
    }

    .wallet-ranking-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .admin-wallet-edit-grid {
        grid-template-columns: 1fr;
    }

    .admin-wallet-edit-row {
        grid-template-columns: 1fr;
    }
}

/* ====== MOBILE COIN TABLE - Price + Sparkline visible ====== */
@media (max-width: 768px) {
    /* Show: #, Coin, Price, 24h%, Sparkline. Hide: 7d%, Cap, Vol */
    .coin-table th:nth-child(5),
    .coin-table td:nth-child(5),
    .coin-table th:nth-child(6),
    .coin-table td:nth-child(6),
    .coin-table th:nth-child(7),
    .coin-table td:nth-child(7) {
        display: none !important;
    }
    /* Keep sparkline (8th) visible */
    .coin-table th:nth-child(8),
    .coin-table td:nth-child(8) {
        display: table-cell !important;
    }

    /* Compact rank column */
    .coin-table th:first-child,
    .coin-table td:first-child {
        width: 28px;
        padding: 8px 4px !important;
        font-size: 0.75rem;
    }

    /* Truncate long coin names */
    .coin-name-cell {
        max-width: 120px;
    }
    .coin-name-cell .name {
        display: block;
        max-width: 100px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 0.85rem;
    }
    .coin-name-cell .symbol {
        font-size: 0.7rem;
    }
    .coin-name-cell img {
        width: 22px !important;
        height: 22px !important;
    }
    .coin-name-text {
        min-width: 0; /* Allow flex shrink */
    }

    /* Compact price */
    .coin-table .price-cell {
        font-size: 0.8rem !important;
        padding: 8px 4px !important;
        white-space: nowrap;
    }

    /* Compact change % */
    .coin-table td:nth-child(4) {
        font-size: 0.75rem !important;
        padding: 8px 2px !important;
        white-space: nowrap;
    }

    /* Smaller sparkline on mobile */
    .coin-table .sparkline-cell {
        width: 60px !important;
        padding: 4px 2px !important;
    }
    .coin-table .sparkline-cell svg {
        width: 55px !important;
        height: 22px !important;
    }

    /* Reduce overall row padding */
    .coin-table td {
        padding: 8px 4px;
    }
    .coin-table th {
        padding: 8px 4px;
        font-size: 0.7rem;
    }
}

@media (max-width: 480px) {
    /* Extra small: hide 24h% too, keep only #, name, price, sparkline */
    .coin-table th:nth-child(4),
    .coin-table td:nth-child(4) {
        display: none !important;
    }

    .coin-name-cell {
        max-width: 90px;
    }
    .coin-name-cell .name {
        max-width: 80px;
        font-size: 0.8rem;
    }

    .coin-table .price-cell {
        font-size: 0.75rem !important;
    }

    .coin-table .sparkline-cell {
        width: 50px !important;
    }
    .coin-table .sparkline-cell svg {
        width: 45px !important;
        height: 18px !important;
    }
}

/* ====== LONG NAME TRUNCATION (all screens) ====== */
.coin-name-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0; /* Critical for text-overflow to work in flex */
}
.coin-name-text {
    min-width: 0;
    overflow: hidden;
}
.coin-name-cell .name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    max-width: 200px;
}
@media (min-width: 769px) and (max-width: 1200px) {
    .coin-name-cell .name {
        max-width: 150px;
    }
}

/* Portfolio/Alert coin autocomplete */
.portfolio-coin-search-wrap {
    position: relative;
}
.portfolio-coin-search-wrap input[type="text"] {
    width: 100%;
}
.portfolio-coin-results {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    max-height: 280px;
    overflow-y: auto;
    z-index: 200;
    margin-top: 4px;
}

/* -- Dashboard Charts -- */
.dash-charts-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 24px 0;
}
.dash-chart-card {
    background: var(--color-card-bg, var(--color-surface-alt));
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 20px;
    min-height: 280px;
}
.dash-chart-card h4 {
    margin: 0 0 16px 0;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-text);
}
.dash-chart-card canvas {
    max-height: 250px;
}

/* -- Portfolio Summary Grid (enhanced) -- */
.portfolio-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}
.portfolio-summary-grid .summary-card {
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border-light);
    border-radius: 10px;
    padding: 16px;
    text-align: center;
}
.portfolio-summary-grid .summary-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: 6px;
    letter-spacing: 0.5px;
    font-weight: 600;
}
.portfolio-summary-grid .summary-value {
    font-size: 1.15rem;
    font-weight: 700;
    font-family: var(--font-mono, monospace);
    font-variant-numeric: tabular-nums;
}

/* -- 24h Performance Badge -- */
.perf-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
    font-family: var(--font-mono, monospace);
    white-space: nowrap;
}

@media (max-width: 768px) {
    .dash-charts-row {
        grid-template-columns: 1fr;
    }
    .portfolio-summary-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* -- Tab transitions -- */
.tab-fade-out {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.15s ease, transform 0.15s ease;
}
.tab-fade-in {
    animation: tabFadeIn 0.25s ease forwards;
}
@keyframes tabFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* -- Watchlist Summary Grid -- */
.watchlist-summary-grid {
    grid-template-columns: repeat(4, 1fr);
    margin-bottom: 16px;
}

/* -- Watchlist Sparkline column -- */
.wl-sparkline-col {
    width: 90px;
    min-width: 80px;
}
.wl-sparkline {
    display: block;
    margin: 0 auto;
}

/* -- Compare bar -- */
.watchlist-compare-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-sm);
    padding: 10px 16px;
    margin-bottom: 12px;
    font-size: 0.85rem;
}
.compare-label {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--color-text-muted);
    font-weight: 600;
    white-space: nowrap;
}
.compare-names {
    font-weight: 700;
    color: var(--color-text);
    flex: 1;
}
.compare-check {
    width: 16px;
    height: 16px;
    accent-color: var(--color-accent);
    cursor: pointer;
}

/* -- Compare panel -- */
.watchlist-compare-panel {
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    padding: 20px;
    margin: 16px 0;
}
.watchlist-compare-panel h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 0.95rem;
}
.compare-table {
    font-size: 0.88rem;
}

/* -- Portfolio summary 6-card grid -- */
.portfolio-summary-6 {
    grid-template-columns: repeat(3, 1fr);
}

/* -- Portfolio Allocation bar -- */
.portfolio-allocation-section {
    margin: 20px 0;
}
.portfolio-allocation-section h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    margin-bottom: 12px;
}
.allocation-bar {
    display: flex;
    height: 10px;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 10px;
    background: var(--color-surface-alt);
}
.allocation-segment {
    min-width: 4px;
    transition: width 0.3s ease;
}
.allocation-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 0.8rem;
}
.allocation-item {
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}
.allocation-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* -- Alert Stats Row -- */
.alerts-stats-row {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
}
.alert-stat {
    flex: 1;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    text-align: center;
}
.alert-stat-num {
    display: block;
    font-size: 1.3rem;
    font-weight: 700;
    font-family: var(--font-mono);
}
.alert-stat-label {
    display: block;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

/* -- Alert History -- */
.alerts-history-section {
    margin-bottom: 20px;
}
.alerts-history-section h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    margin-bottom: 10px;
}
.alerts-history-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.alert-history-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
}
.alert-history-item img {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    flex-shrink: 0;
}
.alert-history-date {
    margin-left: auto;
    color: var(--color-text-muted);
    font-size: 0.8rem;
    white-space: nowrap;
}
.alert-triggered-date {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.78rem;
    margin-top: 6px;
}

/* -- Quick Alert Section -- */
.alert-quick-section {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--color-border-light);
}
.alert-quick-section h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    margin-bottom: 6px;
}
.alert-quick-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 12px 0;
}
.alert-quick-bar .portfolio-coin-search-wrap {
    max-width: 300px;
}
.quick-alert-coin-name {
    font-weight: 600;
    color: var(--color-text);
}
.alert-quick-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

@media (max-width: 768px) {
    .watchlist-summary-grid {
        grid-template-columns: 1fr 1fr;
    }
    .wl-sparkline-col {
        display: none;
    }
    .portfolio-summary-6 {
        grid-template-columns: 1fr 1fr;
    }
    .alerts-stats-row {
        flex-direction: column;
        gap: 8px;
    }
    .alert-quick-bar {
        flex-direction: column;
        align-items: stretch;
    }
    .alert-quick-bar .portfolio-coin-search-wrap {
        max-width: none;
    }
    .alert-quick-buttons {
        flex-direction: column;
    }
    .alert-history-item {
        flex-wrap: wrap;
    }
    .watchlist-compare-bar {
        flex-wrap: wrap;
    }
}

/* ==================== CARTERAS ON-CHAIN ==================== */

.chain-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.chain-badge-eth {
    background: #627eea;
    color: #fff;
}

.chain-badge-bsc {
    background: #f3ba2f;
    color: #000;
}

.chain-badge-sol {
    background: #9945ff;
    color: #fff;
}

.wallets-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.wallet-address-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 18px;
    transition: border-color 0.2s;
    box-shadow: var(--shadow-sm);
}

.wallet-address-card:hover {
    border-color: var(--color-accent);
}

.wallet-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.wallet-card-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.wallet-label {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-primary, #fff);
}

.wallet-total-value {
    font-family: var(--font-mono, monospace);
    font-size: 1.2rem;
    font-weight: 700;
    color: #16c784;
}

.wallet-card-address {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.wallet-card-address code {
    font-family: var(--font-mono, monospace);
    font-size: 0.85rem;
    color: var(--text-muted, #999);
    background: var(--color-bg);
    padding: 4px 10px;
    border-radius: 6px;
}

.wallet-card-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 12px;
    font-size: 0.8rem;
}

.wallet-card-meta .icon-xs {
    width: 12px;
    height: 12px;
}

.wallet-card-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--color-border-light);
}

.sync-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    padding: 6px 14px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

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

.wallet-tokens-list {
    margin-top: 16px;
    border-top: 1px solid var(--color-border-light);
    padding-top: 12px;
}

.token-balance-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    margin-top: 8px;
}

.token-balance-table thead th {
    text-align: left;
    padding: 8px 12px;
    font-size: 0.72rem;
    text-transform: uppercase;
    color: var(--color-text-muted);
    font-weight: 600;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--color-border-light);
}

.token-balance-row td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--color-border-light);
    vertical-align: middle;
}

.token-balance-row:last-child td {
    border-bottom: none;
}

.token-balance-row td small {
    display: block;
    font-size: 0.72rem;
    color: var(--color-text-muted);
}

.token-link {
    color: var(--color-accent);
    font-weight: 600;
    text-decoration: none;
}

.token-link:hover {
    text-decoration: underline;
}

.token-link {
    color: var(--color-accent, #f7931a);
    text-decoration: none;
    font-weight: 600;
}

.token-link:hover {
    text-decoration: underline;
}

/* Chain selector in form */
.wallet-chain-selector {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.chain-option {
    cursor: pointer;
}

.chain-option input[type="radio"] {
    display: none;
}

.chain-option-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    opacity: 0.5;
    transition: all 0.2s;
    border: 2px solid transparent;
}

.chain-option input[type="radio"]:checked + .chain-option-label {
    opacity: 1;
    border-color: rgba(255,255,255,0.3);
    box-shadow: 0 0 12px rgba(255,255,255,0.1);
}

.chain-option:hover .chain-option-label {
    opacity: 0.8;
}

.btn-copy-addr {
    opacity: 0.5;
    transition: opacity 0.2s;
}

.btn-copy-addr:hover {
    opacity: 1;
}

@media (max-width: 768px) {
    .wallet-card-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .wallet-total-value {
        font-size: 1rem;
    }

    .wallet-chain-selector {
        flex-direction: column;
    }

    .wallet-card-actions {
        flex-wrap: wrap;
    }

    .token-balance-table {
        font-size: 0.78rem;
    }

    .token-balance-row td {
        padding: 8px 6px;
    }
}

/* =============================================
   Enriched Data Sections - Coin & Exchange
   ============================================= */

/* Community & Social Stats */
.coin-community-section,
.coin-developer-section,
.coin-scores-section,
.coin-price-history,
.coin-categories-section,
.coin-contracts-section,
.coin-extra-info {
    margin-bottom: 12px;
}

.social-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
}

.social-stat {
    text-align: center;
    padding: 20px 16px;
    background: var(--color-card-bg, #fff);
    border-radius: 12px;
    border: 1px solid var(--color-border, #e9ecef);
    transition: transform 0.2s, box-shadow 0.2s;
}

.social-stat:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.social-value {
    font-size: 1.4rem;
    font-weight: 700;
    display: block;
    margin: 8px 0 4px;
    color: var(--color-text, #1a1a2e);
}

.social-label {
    font-size: 0.75rem;
    color: var(--color-text-muted, #6c757d);
    display: block;
    margin-bottom: 6px;
}

.social-icon {
    font-size: 1.2rem;
    display: block;
    margin-bottom: 4px;
}

.social-icon.twitter { color: #1da1f2; }
.social-icon.reddit { color: #ff4500; }
.social-icon.telegram { color: #0088cc; }
.social-icon.watchlist { color: #f7931a; }
.social-icon.facebook { color: #1877f2; }

.social-link {
    font-size: 0.72rem;
    color: var(--color-accent, #6c5ce7);
    text-decoration: none;
    display: inline-block;
    margin-top: 4px;
}

.social-link:hover {
    text-decoration: underline;
}

/* Developer Activity */
.dev-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.dev-stat {
    text-align: center;
    padding: 16px 12px;
    background: var(--color-card-bg, #fff);
    border-radius: 10px;
    border: 1px solid var(--color-border, #e9ecef);
}

.dev-value {
    font-size: 1.2rem;
    font-weight: 700;
    display: block;
    color: var(--color-text, #1a1a2e);
    margin-bottom: 4px;
}

.dev-label {
    font-size: 0.72rem;
    color: var(--color-text-muted, #6c757d);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.dev-activity-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--color-card-bg, #fff);
    border-radius: 10px;
    border: 1px solid var(--color-border, #e9ecef);
}

.dev-activity-label {
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--color-text-muted, #6c757d);
}

.dev-bar-track {
    height: 8px;
    background: var(--color-border, #e9ecef);
    border-radius: 4px;
    flex: 1;
    overflow: hidden;
}

.dev-bar-fill {
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, #ea3943, #f7931a, #16c784);
    transition: width 0.6s ease;
}

.dev-activity-level {
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
    color: var(--color-text, #1a1a2e);
}

/* Score Rings */
.scores-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.score-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px;
    background: var(--color-card-bg, #fff);
    border-radius: 12px;
    border: 1px solid var(--color-border, #e9ecef);
}

.score-card span {
    font-size: 0.75rem;
    color: var(--color-text-muted, #6c757d);
    font-weight: 600;
}

.score-ring {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.2rem;
    color: var(--color-text, #1a1a2e);
    background: conic-gradient(var(--color-accent, #6c5ce7) calc(var(--pct) * 1%), var(--color-border, #e9ecef) 0);
    position: relative;
}

.score-ring::before {
    content: '';
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    background: var(--color-card-bg, #fff);
}

.score-ring::after {
    content: attr(style);
    display: none;
}

/* Make the number show above the pseudo-element */
.score-ring {
    z-index: 0;
}

/* Sentiment Bar */
.sentiment-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--color-card-bg, #fff);
    border-radius: 10px;
    border: 1px solid var(--color-border, #e9ecef);
}

.sentiment-up {
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 700;
    font-size: 0.85rem;
    color: #16c784;
    white-space: nowrap;
}

.sentiment-down {
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 700;
    font-size: 0.85rem;
    color: #ea3943;
    white-space: nowrap;
}

.sentiment-track {
    height: 10px;
    background: #ea3943;
    border-radius: 5px;
    flex: 1;
    overflow: hidden;
}

.sentiment-fill-up {
    height: 100%;
    background: #16c784;
    border-radius: 5px 0 0 5px;
}

/* Price History */
.price-history-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.ph-card {
    padding: 20px;
    background: var(--color-card-bg, #fff);
    border-radius: 12px;
    border: 1px solid var(--color-border, #e9ecef);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ph-label {
    font-size: 0.78rem;
    color: var(--color-text-muted, #6c757d);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
}

.ph-value {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--color-text, #1a1a2e);
}

.ph-date {
    font-size: 0.72rem;
    color: var(--color-text-muted, #6c757d);
}

.ph-change {
    font-size: 0.8rem;
    font-weight: 600;
}

.ph-change.positive { color: #16c784; }
.ph-change.negative { color: #ea3943; }

.price-changes-table {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
}

.pc-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 16px;
    background: var(--color-card-bg, #fff);
    border-radius: 8px;
    border: 1px solid var(--color-border, #e9ecef);
    font-size: 0.82rem;
}

.pc-row span:first-child {
    color: var(--color-text-muted, #6c757d);
    font-weight: 500;
}

.pc-row .positive { color: #16c784; font-weight: 700; }
.pc-row .negative { color: #ea3943; font-weight: 700; }

/* Categories Badges */
.categories-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.category-badge {
    display: inline-block;
    padding: 6px 14px;
    background: var(--color-card-bg, #fff);
    border: 1px solid var(--color-border, #e9ecef);
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--color-text, #1a1a2e);
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s, transform 0.2s;
}

.category-badge:hover {
    background: var(--color-accent, #6c5ce7);
    color: #fff;
    border-color: var(--color-accent, #6c5ce7);
    transform: translateY(-1px);
}

/* Contract Addresses */
.contracts-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.contract-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--color-card-bg, #fff);
    border-radius: 10px;
    border: 1px solid var(--color-border, #e9ecef);
    flex-wrap: wrap;
}

.contract-platform {
    font-weight: 700;
    font-size: 0.82rem;
    text-transform: capitalize;
    min-width: 120px;
    color: var(--color-text, #1a1a2e);
}

.contract-address-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.contract-address {
    font-family: var(--font-mono, monospace);
    font-size: 0.75rem;
    color: var(--color-text-muted, #6c757d);
    word-break: break-all;
    flex: 1;
}

.btn-copy-contract {
    background: none;
    border: 1px solid var(--color-border, #e9ecef);
    border-radius: 6px;
    padding: 4px 8px;
    cursor: pointer;
    color: var(--color-text-muted, #6c757d);
    transition: color 0.2s, border-color 0.2s;
    flex-shrink: 0;
}

.btn-copy-contract:hover {
    color: var(--color-accent, #6c5ce7);
    border-color: var(--color-accent, #6c5ce7);
}

/* Extra Info Grid */
.extra-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}

.extra-info-item {
    padding: 16px;
    background: var(--color-card-bg, #fff);
    border-radius: 10px;
    border: 1px solid var(--color-border, #e9ecef);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.extra-info-label {
    font-size: 0.75rem;
    color: var(--color-text-muted, #6c757d);
    display: flex;
    align-items: center;
    gap: 4px;
}

.extra-info-value {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-text, #1a1a2e);
}

/* Trust Score Badge (Exchanges) */
.trust-badge {
    padding: 4px 12px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.78rem;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.trust-high {
    background: #d4edda;
    color: #155724;
}

.trust-medium {
    background: #fff3cd;
    color: #856404;
}

.trust-low {
    background: #f8d7da;
    color: #721c24;
}

/* Mobile Responsive for Enriched Sections */
@media (max-width: 768px) {
    .social-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .social-stat {
        padding: 14px 10px;
    }

    .social-value {
        font-size: 1.1rem;
    }

    .dev-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .dev-stat {
        padding: 12px 8px;
    }

    .dev-value {
        font-size: 1rem;
    }

    .dev-activity-bar {
        flex-wrap: wrap;
        gap: 8px;
    }

    .scores-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .score-ring {
        width: 64px;
        height: 64px;
        font-size: 1rem;
    }

    .sentiment-bar {
        flex-wrap: wrap;
        gap: 8px;
    }

    .price-history-grid {
        grid-template-columns: 1fr;
    }

    .ph-value {
        font-size: 1.1rem;
    }

    .price-changes-table {
        grid-template-columns: repeat(2, 1fr);
    }

    .contract-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .contract-platform {
        min-width: auto;
    }

    .extra-info-grid {
        grid-template-columns: 1fr;
    }

    .trust-badge {
        font-size: 0.72rem;
        padding: 3px 8px;
    }
}

@media (max-width: 480px) {
    .social-stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .dev-stats-grid {
        grid-template-columns: 1fr 1fr;
    }

    .scores-grid {
        grid-template-columns: 1fr 1fr;
    }

    .price-changes-table {
        grid-template-columns: 1fr;
    }
}

/* Compare chart header with timeframe buttons */
.compare-chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}
.compare-tf-btns {
    display: flex;
    gap: 4px;
}

/* ===== GitHub Developer Section ===== */
.section-link {
    font-size: 0.8rem;
    color: var(--color-accent, #6c5ce7);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.section-link:hover {
    text-decoration: underline;
}

.dev-value-sm {
    font-size: 0.95rem !important;
}

/* Commit Activity Graph */
.dev-commit-graph {
    margin-top: 16px;
    padding: 16px;
    background: var(--color-card-bg, #fff);
    border-radius: 10px;
    border: 1px solid var(--color-border, #e9ecef);
}

.dev-commit-graph h4 {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-muted, #6c757d);
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.commit-bars {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 52px;
    padding: 2px 0;
}

.commit-bar {
    flex: 1;
    min-width: 3px;
    background: #16c784;
    border-radius: 1px 1px 0 0;
    transition: opacity 0.2s;
    cursor: default;
}

.commit-bar:hover {
    opacity: 0.7;
}

.commit-bars-legend {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-size: 0.65rem;
    color: var(--color-text-muted, #6c757d);
}

/* Language Breakdown */
.dev-languages {
    margin-top: 16px;
    padding: 16px;
    background: var(--color-card-bg, #fff);
    border-radius: 10px;
    border: 1px solid var(--color-border, #e9ecef);
}

.dev-languages h4 {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-muted, #6c757d);
    margin: 0 0 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.lang-bar {
    display: flex;
    height: 10px;
    border-radius: 5px;
    overflow: hidden;
    gap: 1px;
}

.lang-bar-segment {
    min-width: 4px;
    transition: opacity 0.2s;
}

.lang-bar-segment:hover {
    opacity: 0.75;
}

.lang-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 10px;
}

.lang-legend-item {
    font-size: 0.75rem;
    color: var(--color-text, #1a1a2e);
    display: flex;
    align-items: center;
    gap: 4px;
}

.lang-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

/* Top Contributors */
.dev-contributors {
    margin-top: 16px;
    padding: 16px;
    background: var(--color-card-bg, #fff);
    border-radius: 10px;
    border: 1px solid var(--color-border, #e9ecef);
}

.dev-contributors h4 {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-muted, #6c757d);
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.contributors-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.contributor-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: var(--color-bg, #f8f9fa);
    border-radius: 8px;
    text-decoration: none;
    color: var(--color-text, #1a1a2e);
    transition: background 0.2s, transform 0.2s;
    border: 1px solid var(--color-border, #e9ecef);
}

.contributor-item:hover {
    background: var(--color-card-bg, #fff);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.contributor-avatar {
    border-radius: 50%;
    flex-shrink: 0;
}

.contributor-name {
    font-size: 0.82rem;
    font-weight: 600;
}

.contributor-count {
    font-size: 0.7rem;
    color: var(--color-text-muted, #6c757d);
    white-space: nowrap;
}

/* Latest Release */
.dev-release {
    margin-top: 16px;
    padding: 16px;
    background: var(--color-card-bg, #fff);
    border-radius: 10px;
    border: 1px solid var(--color-border, #e9ecef);
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.dev-release h4 {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-muted, #6c757d);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.release-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: linear-gradient(135deg, #6c5ce7, #a29bfe);
    color: #fff;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    transition: opacity 0.2s, transform 0.2s;
}

.release-badge:hover {
    opacity: 0.85;
    transform: translateY(-1px);
}

.release-date {
    font-size: 0.75rem;
    color: var(--color-text-muted, #6c757d);
}

/* Responsive adjustments for GitHub section */
@media (max-width: 600px) {
    .commit-bars {
        height: 40px;
    }
    .commit-bar {
        min-width: 2px;
    }
    .contributors-list {
        flex-direction: column;
    }
    .contributor-item {
        width: 100%;
    }
    .dev-release {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ============================================
   Network Stats - Gas Fees Bar & Status Card
   ============================================ */

.network-stats-bar {
    margin: 20px 0;
    padding: 20px;
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: 12px;
}
.network-stats-bar h3 {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 14px 0;
    display: flex;
    align-items: center;
    gap: 6px;
}
.gas-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 12px;
}
.gas-card {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 14px;
    text-align: center;
    transition: transform 0.15s, box-shadow 0.15s;
}
.gas-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.gas-chain {
    font-weight: 700;
    display: block;
    margin-bottom: 4px;
    font-size: 0.85rem;
}
.gas-value {
    font-size: 1.25rem;
    font-weight: 800;
    font-family: var(--font-mono);
    display: block;
    margin-bottom: 2px;
}
.gas-usd {
    font-size: 0.72rem;
    color: var(--color-text-muted);
    display: block;
}

/* Gas level colors */
.gas-cheap .gas-value { color: #16c784; }
.gas-cheap { border-color: #16c78433; }
.gas-moderate .gas-value { color: #f7931a; }
.gas-moderate { border-color: #f7931a33; }
.gas-expensive .gas-value { color: #ea3943; }
.gas-expensive { border-color: #ea394333; }

/* Network Status Card (coin detail) */
.network-status-card {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 20px;
    margin: 20px 0;
}
.network-status-card h3 {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 16px 0;
    display: flex;
    align-items: center;
    gap: 6px;
}
.network-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}
.net-metric {
    text-align: center;
    padding: 12px 10px;
    background: var(--color-bg);
    border-radius: 8px;
    border: 1px solid var(--color-border-light);
}
.net-label {
    font-size: 0.72rem;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 600;
}
.net-value {
    font-size: 1.05rem;
    font-weight: 700;
    font-family: var(--font-mono);
    display: block;
}
.net-value small {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--color-text-muted);
}
.net-value.green { color: #16c784; }
.net-value.yellow { color: #f7931a; }
.net-value.red { color: #ea3943; }

.network-status-time {
    margin: 14px 0 0 0;
    font-size: 0.7rem;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Responsive */
@media (max-width: 600px) {
    .gas-cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    .gas-card {
        padding: 10px;
    }
    .gas-value {
        font-size: 1rem;
    }
    .network-metrics {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    .net-metric {
        padding: 8px;
    }
    .net-value {
        font-size: 0.9rem;
    }
}

/* ========================================
   ON-CHAIN METRICS SECTION
   ======================================== */

.onchain-metrics-section {
    margin: 28px 0;
}

.onchain-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
    margin-top: 16px;
}

.onchain-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.onchain-card:hover {
    border-color: var(--color-accent);
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

.onchain-value {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-text-primary);
    font-family: var(--font-mono);
}

.onchain-label {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    line-height: 1.3;
}

.onchain-timestamp {
    margin: 12px 0 0 0;
    font-size: 0.7rem;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}

@media (max-width: 600px) {
    .onchain-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    .onchain-card {
        padding: 14px 10px;
    }
    .onchain-value {
        font-size: 1rem;
    }
}

/* ========================================
   EXCHANGE FEE COMPARATOR
   ======================================== */

/* Fee color classes */
.fee-free { color: #16c784; font-weight: 600; }
.fee-low { color: #16c784; }
.fee-mid { color: #f7931a; }
.fee-high { color: #ea3943; }

.bool-yes { color: #16c784; }
.bool-no { color: var(--color-text-muted); opacity: 0.4; }

.fee-comparison-table td {
    font-family: var(--font-mono);
    font-size: 0.82rem;
}

/* Fee Calculator */
.fee-calculator-section {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 24px;
    margin: 20px 0 28px;
}

.fee-calculator-section h2 {
    font-size: 1.1rem;
    margin: 0 0 16px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.fee-calc-form {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.fee-calc-input-group {
    flex: 1;
    min-width: 180px;
}

.fee-calc-input-group label {
    display: block;
    font-size: 0.78rem;
    color: var(--color-text-muted);
    margin-bottom: 6px;
}

.fee-calc-input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-bg);
    color: var(--color-text-primary);
    font-size: 0.9rem;
    font-family: var(--font-mono);
    outline: none;
    transition: border-color 0.2s;
}

.fee-calc-input:focus {
    border-color: var(--color-accent);
}

.fee-calc-result-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fee-calc-result-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 8px;
    background: var(--color-bg);
    transition: background 0.15s;
}

.fee-calc-result-row:hover {
    background: var(--color-bg-hover, rgba(255,255,255,0.03));
}

.fee-calc-best {
    background: rgba(22, 199, 132, 0.08);
    border: 1px solid rgba(22, 199, 132, 0.2);
}

.fee-calc-good {
    background: rgba(22, 199, 132, 0.04);
}

.fee-calc-result-info {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 180px;
}

.fee-calc-result-info img {
    border-radius: 50%;
}

.fee-calc-result-name {
    font-weight: 600;
    font-size: 0.85rem;
}

.fee-calc-result-rate {
    font-size: 0.72rem;
    color: var(--color-text-muted);
    font-family: var(--font-mono);
}

.fee-calc-result-bar-wrap {
    flex: 1;
    height: 8px;
    background: var(--color-border);
    border-radius: 4px;
    overflow: hidden;
}

.fee-calc-result-bar {
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, #16c784, #f7931a, #ea3943);
    transition: width 0.4s ease;
}

.fee-calc-result-amount {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.9rem;
    min-width: 70px;
    text-align: right;
}

/* Fee Deposit Section */
.fee-deposit-section {
    margin: 28px 0;
}

.fee-deposit-section h2 {
    font-size: 1.1rem;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.fee-deposit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}

.fee-deposit-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fee-deposit-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.fee-deposit-header img {
    border-radius: 50%;
}

.fee-deposit-detail {
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

@media (max-width: 768px) {
    .fee-calc-result-info {
        min-width: 140px;
    }
    .fee-calc-result-bar-wrap {
        display: none;
    }
    .fee-deposit-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .fee-calc-form {
        flex-direction: column;
    }
    .fee-calc-result-info {
        min-width: auto;
        flex: 1;
    }
}

/* ========================================
   EXCHANGE REGISTRATION GUIDE
   ======================================== */

.exchange-guide-section {
    margin: 28px 0;
}

.guide-steps {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
}

.guide-step {
    display: flex;
    gap: 16px;
    padding: 16px 0;
    position: relative;
}

.guide-step:not(:last-child) {
    border-bottom: none;
}

/* Vertical line connecting steps */
.guide-step:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 19px;
    top: 52px;
    bottom: -16px;
    width: 2px;
    background: var(--color-border);
}

.step-number {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 50%;
    background: var(--color-accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    z-index: 1;
}

.step-content {
    flex: 1;
}

.step-content h3 {
    margin: 0 0 4px 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.step-content p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
}

.step-content a {
    color: var(--color-accent);
    text-decoration: none;
}

.step-content a:hover {
    text-decoration: underline;
}

.guide-cta {
    margin-top: 20px;
    display: flex;
    justify-content: center;
}

@media (max-width: 480px) {
    .guide-step {
        gap: 12px;
        padding: 12px 0;
    }
    .step-number {
        width: 32px;
        height: 32px;
        min-width: 32px;
        font-size: 0.85rem;
    }
    .guide-step:not(:last-child)::after {
        left: 15px;
        top: 44px;
    }
}

/* ==================== INLINE CONVERTER ==================== */

.inline-converter {
    background: var(--color-card-bg, #fff);
    border: 1px solid var(--color-border, #e9ecef);
    border-radius: 12px;
    padding: 16px 20px;
    margin: 16px 0 8px;
}
.ic-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.ic-row input#ic-amount {
    width: 120px;
    padding: 8px 12px;
    border: 1px solid var(--color-border, #dee2e6);
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    background: var(--color-bg, #f8f9fa);
    color: var(--color-text, #212529);
    outline: none;
    transition: border-color 0.2s;
}
.ic-row input#ic-amount:focus {
    border-color: var(--color-primary, #f7931a);
    box-shadow: 0 0 0 3px rgba(247, 147, 26, 0.15);
}
.ic-symbol {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--color-text-muted, #6c757d);
    text-transform: uppercase;
}
.ic-equals {
    font-size: 1.3rem;
    color: var(--color-text-muted, #adb5bd);
    margin: 0 4px;
}
.ic-result {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-primary, #f7931a);
}
.ic-currency {
    font-size: 0.85rem;
    color: var(--color-text-muted, #6c757d);
    font-weight: 600;
}
.ic-quick-amounts {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}
.ic-quick-amounts button {
    padding: 5px 14px;
    border: 1px solid var(--color-border, #dee2e6);
    border-radius: 6px;
    background: var(--color-bg, #f8f9fa);
    color: var(--color-text, #495057);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}
.ic-quick-amounts button:hover {
    background: var(--color-primary, #f7931a);
    color: #fff;
    border-color: var(--color-primary, #f7931a);
}

@media (max-width: 600px) {
    .ic-row {
        gap: 6px;
    }
    .ic-row input#ic-amount {
        width: 90px;
        font-size: 1rem;
    }
    .ic-result {
        font-size: 1.05rem;
    }
}

/* ==================== TOKENOMICS ==================== */

.tokenomics-section {
    margin: 24px 0;
}
.tokenomics-grid {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 24px;
    align-items: center;
    background: var(--color-card-bg, #fff);
    border: 1px solid var(--color-border, #e9ecef);
    border-radius: 12px;
    padding: 20px;
}
.tokenomics-chart-wrap {
    max-width: 250px;
    margin: 0 auto;
}
.tokenomics-legend {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.tokenomics-legend-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    color: var(--color-text, #495057);
}
.tokenomics-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

@media (max-width: 600px) {
    .tokenomics-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .tokenomics-chart-wrap {
        max-width: 200px;
    }
    .tokenomics-legend {
        align-items: center;
    }
}

/* ==================== FAQ ACCORDION ==================== */

.faq-section {
    margin: 32px 0;
}
.faq-accordion {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.faq-item {
    border: 1px solid var(--color-border, #e9ecef);
    border-radius: 10px;
    overflow: hidden;
    background: var(--color-card-bg, #fff);
    transition: box-shadow 0.2s;
}
.faq-item:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 16px 20px;
    background: none;
    border: none;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text, #212529);
    cursor: pointer;
    text-align: left;
    gap: 12px;
}
.faq-question:hover {
    color: var(--color-primary, #f7931a);
}
.faq-chevron {
    transition: transform 0.25s ease;
    flex-shrink: 0;
}
.faq-open .faq-chevron {
    transform: rotate(180deg);
}
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    padding: 0 20px;
}
.faq-open .faq-answer {
    max-height: 300px;
    padding: 0 20px 16px;
}
.faq-answer p {
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--color-text-muted, #6c757d);
    margin: 0;
}
.faq-answer a {
    color: var(--color-primary, #f7931a);
    text-decoration: none;
    font-weight: 500;
}
.faq-answer a:hover {
    text-decoration: underline;
}

/* ==================== CORRELATION ==================== */

.correlation-section {
    margin: 32px 0;
}
.correlation-desc {
    font-size: 0.88rem;
    color: var(--color-text-muted, #6c757d);
    margin: 0 0 16px;
}
.correlation-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: var(--color-card-bg, #fff);
    border: 1px solid var(--color-border, #e9ecef);
    border-radius: 12px;
    padding: 20px;
}
.corr-item {
    display: grid;
    grid-template-columns: 100px 1fr 60px 80px;
    align-items: center;
    gap: 12px;
}
.corr-coin {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--color-text, #212529);
}
.corr-bar-track {
    height: 10px;
    background: var(--color-bg, #f1f3f5);
    border-radius: 5px;
    overflow: hidden;
}
.corr-bar-fill {
    height: 100%;
    border-radius: 5px;
    transition: width 0.6s ease;
}
.corr-value {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--color-text, #212529);
    text-align: right;
    font-family: var(--font-mono, monospace);
}
.corr-label {
    font-size: 0.78rem;
    font-weight: 600;
    text-align: center;
    padding: 3px 8px;
    border-radius: 4px;
    background: var(--color-bg, #f1f3f5);
    color: var(--color-text-muted, #6c757d);
}

@media (max-width: 600px) {
    .corr-item {
        grid-template-columns: 80px 1fr 50px 65px;
        gap: 8px;
    }
    .corr-coin {
        font-size: 0.82rem;
    }
    .corr-value {
        font-size: 0.82rem;
    }
    .corr-label {
        font-size: 0.72rem;
    }
}

/* Fear & Greed improved */
.fg-date {
    font-size: 0.7rem;
    color: #adb5bd;
    text-align: center;
    margin-top: 2px;
}
.fg-gauge-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
}
.fg-gauge {
    width: 100%;
    max-width: 220px;
}
.fg-svg {
    width: 100%;
}

/* Dominance header with toggle */
.dominance-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.dom-toggle {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    cursor: pointer;
}
.dom-toggle input {
    cursor: pointer;
    accent-color: var(--color-accent);
}
.dominance-legend {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 0.78rem;
    max-height: 200px;
    overflow-y: auto;
}

/* ======== MOBILE FIXES 2024-04-03 ======== */

/* 1. SEARCH: hide input on mobile, show search icon button */
@media (max-width: 768px) {
    .search-wrapper {
        position: static;
    }
    .search-wrapper .search-input {
        display: none;
    }
    .search-wrapper .search-icon-abs {
        display: none;
    }
    /* Add a search toggle button */
    .search-toggle-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border-radius: 8px;
        border: 1px solid var(--color-border);
        background: var(--color-card-bg);
        cursor: pointer;
        color: var(--color-text-muted);
    }
    /* Fullscreen search overlay when active */
    .search-wrapper.search-open {
        position: fixed;
        inset: 0;
        z-index: 9999;
        background: #fff;
        padding: 16px;
        display: flex;
        flex-direction: column;
    }
    .search-wrapper.search-open .search-input {
        display: block !important;
        width: 100%;
        font-size: 1.1rem;
        padding: 14px 16px;
        border: 2px solid var(--color-accent);
        border-radius: 12px;
        margin-bottom: 8px;
    }
    .search-wrapper.search-open .search-icon-abs {
        display: none;
    }
    .search-wrapper.search-open .search-results {
        position: static;
        max-height: calc(100vh - 100px);
        border: none;
        box-shadow: none;
    }
    .search-wrapper.search-open .search-close-btn {
        display: block !important;
        position: absolute;
        top: 16px;
        right: 16px;
        background: none;
        border: none;
        font-size: 1.5rem;
        cursor: pointer;
        color: var(--color-text-muted);
    }
    .search-close-btn {
        display: none !important;
    }
    .search-toggle-btn {
        display: flex !important;
    }
}
@media (min-width: 769px) {
    .search-toggle-btn {
        display: none !important;
    }
    .search-close-btn {
        display: none !important;
    }
}

/* 2. DOMINANCE: limit to 7 extra + compact toggle */
.dominance-legend {
    max-height: 180px;
    overflow-y: auto;
}
.dominance-header {
    gap: 4px;
}
.dom-toggle {
    white-space: nowrap;
    font-size: 0.7rem;
}
@media (max-width: 768px) {
    .dominance-chart-wrap {
        flex-direction: column;
        align-items: center;
    }
    .dominance-legend {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 4px 12px;
        max-height: none;
        justify-content: center;
        font-size: 0.72rem;
    }
    .dom-toggle {
        position: absolute;
        top: 8px;
        right: 8px;
    }
    .dominance-card {
        position: relative;
    }
}

/* 3. MOVERS: truncate long names */
.mover-item {
    min-width: 0;
}
.mover-info {
    min-width: 0;
    overflow: hidden;
}
.mover-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
    display: block;
}
@media (max-width: 768px) {
    .mover-name {
        max-width: 80px;
        font-size: 0.8rem;
    }
    .mover-price {
        font-size: 0.75rem;
    }
    .mover-change {
        font-size: 0.72rem;
    }
    .mover-item img {
        width: 22px !important;
        height: 22px !important;
    }
    .movers-card h3 {
        font-size: 0.85rem;
    }
}

/* 4. SPARKLINES: ensure visible on mobile table */
@media (max-width: 768px) {
    .coin-table .sparkline-cell {
        display: table-cell !important;
    }
    .coin-table th:nth-child(8),
    .coin-table td:nth-child(8) {
        display: table-cell !important;
    }
}

/* Rating vote button */
.rating-vote-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-card-bg);
    color: var(--color-text-muted);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
    margin-left: 8px;
}
.rating-vote-btn:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}
.coin-rating-action {
    margin-top: 8px;
    padding: 12px;
    background: var(--color-bg-alt, #f8f9fa);
    border-radius: 8px;
}

/* ============================================
   REDESIGNED LAYOUTS - Compact 2-Column Grids
   ============================================ */

/* --- Generic 2-column grid --- */
.coin-grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 20px 0;
}

/* --- Full width sections --- */
.coin-full-width {
    margin: 20px 0;
}

/* --- Sidebar card style --- */
.coin-sidebar-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 16px;
}

/* --- Coin Hero Section (compact) --- */
.coin-hero {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 18px 20px;
    margin-bottom: 12px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: start;
}

.coin-hero-left {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.coin-hero-identity {
    display: flex;
    align-items: center;
    gap: 14px;
}

.coin-hero-identity img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    flex-shrink: 0;
}

.coin-hero-identity h1 {
    font-size: 1.5rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.coin-hero-price-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}

.coin-hero-price-row .coin-price-large {
    margin: 0;
}

.coin-hero .highlow-bar {
    max-width: 480px;
}

.coin-hero .inline-converter {
    margin: 0;
    padding: 10px 14px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface-alt);
    max-width: 420px;
}

.coin-hero .inline-converter .ic-row {
    gap: 8px;
    font-size: 0.85rem;
}

.coin-hero .inline-converter input {
    width: 70px;
    padding: 4px 8px;
    font-size: 0.85rem;
}

.coin-hero .inline-converter .ic-quick-amounts {
    margin-top: 6px;
}

.coin-hero .inline-converter .ic-quick-amounts button {
    padding: 2px 8px;
    font-size: 0.72rem;
}

.coin-hero-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    min-width: 200px;
}

.coin-hero-actions {
    display: flex;
    gap: 8px;
}

.coin-hero-rating {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* --- Metrics + Tokenomics side by side --- */
.coin-metrics-tokenomics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 0 0 12px;
}

.coin-metrics-tokenomics .coin-sidebar-card .coin-metrics {
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    box-shadow: none;
}

.coin-metrics-tokenomics .coin-sidebar-card .section-divider {
    margin-bottom: 12px;
}

.coin-metrics-tokenomics .tokenomics-section {
    margin: 0;
    padding: 0;
}

.coin-metrics-tokenomics .supply-progress-section {
    margin: 12px 0 0;
    padding: 0;
}

/* --- Network + Correlation side by side --- */
.coin-network-correlation {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 0 0 12px;
}

.coin-network-correlation .coin-sidebar-card > div {
    margin: 0;
    padding: 0;
}

.coin-network-correlation .network-status-card,
.coin-network-correlation .correlation-section {
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
}

/* --- Community + GitHub side by side --- */
.coin-community-dev {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 0 0 12px;
}

.coin-community-dev .coin-sidebar-card > div {
    margin: 0;
    padding: 0;
}

.coin-community-dev .coin-community-section,
.coin-community-dev .coin-developer-section {
    margin: 0;
    padding: 0;
}

/* --- Exchange page: Metrics + Guide side by side --- */
.exchange-grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 20px 0;
}

.exchange-grid-2col .coin-sidebar-card {
    display: flex;
    flex-direction: column;
}

.exchange-grid-2col .exchange-detail-grid {
    margin-bottom: 16px;
}

.exchange-grid-2col .exchange-guide-section {
    margin: 0;
    padding: 0;
}

.exchange-grid-2col .guide-steps {
    gap: 12px;
}

.exchange-grid-2col .guide-step {
    padding: 10px 0;
}

/* --- Hide empty grid containers --- */
.coin-network-correlation .coin-sidebar-card:empty {
    display: none;
    padding: 0;
    border: none;
    min-height: 0;
}

/* When both children are empty, collapse the grid */
.coin-network-correlation:has(.coin-sidebar-card:empty + .coin-sidebar-card:empty) {
    display: none;
}

/* --- Responsive: collapse to 1 column on mobile --- */
@media (max-width: 768px) {
    .coin-grid-2col,
    .coin-metrics-tokenomics,
    .coin-network-correlation,
    .coin-community-dev,
    .exchange-grid-2col {
        grid-template-columns: 1fr;
    }

    .coin-hero {
        grid-template-columns: 1fr;
    }

    .coin-hero-right {
        align-items: flex-start;
        min-width: auto;
    }

    .coin-hero-actions {
        width: 100%;
    }

    .coin-hero-actions .watchlist-btn,
    .coin-hero-actions .coin-compare-btn {
        flex: 1;
        justify-content: center;
    }

    .coin-hero .inline-converter {
        max-width: 100%;
    }
}

/* ============================================================
   COIN SUBPAGE NAV TABS
   ============================================================ */

.coin-subpage-nav {
    display: flex;
    gap: 4px;
    background: var(--color-bg-alt, #f4f6f8);
    border-radius: 10px;
    padding: 4px;
    margin: 16px 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.coin-subpage-nav a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-text-muted, #6c757d);
    text-decoration: none;
    transition: all 0.2s;
    white-space: nowrap;
}

.coin-subpage-nav a:hover {
    background: #fff;
    color: var(--color-text, #212529);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.coin-subpage-nav a.active {
    background: #fff;
    color: var(--color-text, #212529);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    font-weight: 600;
}

.coin-subpage-nav .icon {
    width: 14px;
    height: 14px;
}

/* ============================================================
   SUBPAGE COMMON STYLES
   ============================================================ */

.subpage-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 16px 0 24px;
}

.subpage-header h1 {
    font-size: 1.5rem;
    margin: 0;
}

.subpage-header img {
    border-radius: 8px;
}

.subpage-internal-links {
    margin: 32px 0 16px;
    padding: 24px;
    background: var(--color-bg-alt, #f4f6f8);
    border-radius: 12px;
}

.subpage-internal-links h3 {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 16px;
    font-size: 1rem;
    color: var(--color-text, #212529);
}

.internal-links-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
}

.internal-link-card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: #fff;
    border-radius: 8px;
    text-decoration: none;
    color: var(--color-text, #212529);
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.2s;
    border: 1px solid #e9ecef;
}

.internal-link-card:hover {
    border-color: #667eea;
    color: #667eea;
    box-shadow: 0 2px 6px rgba(102,126,234,0.15);
}

/* ============================================================
   PRECIO SUBPAGE
   ============================================================ */

.subpage-price-hero {
    margin-bottom: 32px;
}

.sp-price-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.sp-price-header img {
    border-radius: 8px;
}

.sp-price-header h1 {
    font-size: 1.5rem;
    margin: 0;
}

.sp-price-display {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 12px;
}

.sp-price-large {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-text, #212529);
    line-height: 1;
}

.sp-converter-section {
    background: var(--color-bg-alt, #f4f6f8);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 32px;
}

.sp-converter-section h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
    font-size: 1.15rem;
}

.sp-converter-display {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.sp-conv-row {
    background: #fff;
    border-radius: 8px;
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #e9ecef;
}

.sp-conv-label {
    font-size: 0.85rem;
    color: var(--color-text-muted, #6c757d);
    font-weight: 500;
}

.sp-conv-value {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text, #212529);
}

.sp-conv-table {
    overflow-x: auto;
}

.sp-conv-table table {
    width: 100%;
    font-size: 0.85rem;
}

.sp-conv-note {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    font-size: 0.8rem;
    color: var(--color-text-muted, #6c757d);
}

.sp-chart-compact {
    margin-bottom: 32px;
}

.sp-chart-compact h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
    font-size: 1.15rem;
}

.sp-chart-wrap {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e9ecef;
    padding: 16px;
    height: 260px;
}

.sp-chart-wrap canvas {
    width: 100% !important;
    height: 100% !important;
}

.sp-chart-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 8px;
    font-size: 0.82rem;
}

.sp-chart-link .icon,
.sp-chart-link svg {
    width: 14px !important;
    height: 14px !important;
    flex-shrink: 0;
}

.sp-stats-grid {
    margin-bottom: 32px;
}

.sp-stats-grid h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
    font-size: 1.15rem;
}

.sp-price-changes {
    margin-bottom: 32px;
}

.sp-price-changes h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
    font-size: 1.15rem;
}

/* ============================================================
   COMPRAR SUBPAGE
   ============================================================ */

.sp-price-ref {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    padding: 12px 16px;
    background: var(--color-bg-alt, #f4f6f8);
    border-radius: 8px;
    font-size: 0.9rem;
}

.sp-price-ref-label {
    color: var(--color-text-muted, #6c757d);
}

.sp-price-ref-value {
    font-weight: 700;
    font-size: 1.1rem;
}

.sp-buy-guide {
    margin-bottom: 32px;
}

.sp-buy-guide h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 20px;
    font-size: 1.15rem;
}

.sp-steps {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sp-step {
    display: flex;
    gap: 16px;
    padding: 16px;
    background: var(--color-bg-alt, #f4f6f8);
    border-radius: 10px;
    transition: transform 0.2s;
}

.sp-step:hover {
    transform: translateX(4px);
}

.sp-step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
    font-weight: 700;
    font-size: 1.1rem;
}

.sp-step-content h3 {
    margin: 0 0 4px;
    font-size: 0.95rem;
}

.sp-step-content p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--color-text-muted, #6c757d);
    line-height: 1.5;
}

.sp-guide-link {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
    font-size: 0.85rem;
}

.sp-markets-section {
    margin-bottom: 32px;
}

.sp-markets-section h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
    font-size: 1.15rem;
}

.sp-markets-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px;
    color: var(--color-text-muted, #6c757d);
}

.sp-no-markets {
    padding: 24px;
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-sm);
    color: var(--color-text-secondary);
    font-size: 0.9rem;
    line-height: 1.6;
}

.sp-no-markets .icon {
    vertical-align: -2px;
    margin-right: 4px;
}

.sp-security-tips {
    margin-bottom: 32px;
}

.sp-security-tips h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
    font-size: 1.15rem;
}

.sp-tips-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}

.sp-tip {
    background: var(--color-bg-alt, #f4f6f8);
    border-radius: 10px;
    padding: 20px;
    text-align: center;
}

.sp-tip-icon {
    margin-bottom: 10px;
    color: #667eea;
}

.sp-tip-icon .icon {
    width: 28px;
    height: 28px;
}

.sp-tip h4 {
    margin: 0 0 6px;
    font-size: 0.9rem;
}

.sp-tip p {
    margin: 0;
    font-size: 0.8rem;
    color: var(--color-text-muted, #6c757d);
    line-height: 1.5;
}

/* ============================================================
   GRAFICO SUBPAGE
   ============================================================ */

.sp-grafico-header {
    flex-wrap: wrap;
    justify-content: space-between;
}

.sp-grafico-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sp-grafico-title img {
    border-radius: 8px;
}

.sp-grafico-price {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.sp-grafico-price .sp-price-large {
    font-size: 1.8rem;
    font-weight: 700;
}

.sp-chart-fullwidth {
    margin-bottom: 32px;
}

.sp-chart-fullwidth .chart-canvas-wrap {
    height: 460px;
}

.sp-chart-fullwidth .chart-candlestick-wrap {
    min-height: 460px;
}

.sp-chart-stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 32px;
}

/* ============================================================
   QUE ES SUBPAGE
   ============================================================ */

.sp-description {
    margin-bottom: 32px;
}

.sp-description .description-content {
    font-size: 0.92rem;
    line-height: 1.75;
    color: var(--color-text, #212529);
}

.sp-description .description-content p {
    margin: 0 0 16px;
}

.sp-extra-info {
    margin-bottom: 32px;
}

.sp-extra-info h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
    font-size: 1.15rem;
}

.sp-categories {
    margin-bottom: 32px;
}

.sp-categories h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
    font-size: 1.15rem;
}

.sp-learn-more {
    margin-bottom: 32px;
}

.sp-learn-more h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
    font-size: 1.15rem;
}

.sp-learn-links {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
}

.sp-learn-card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--color-bg-alt, #f4f6f8);
    border-radius: 8px;
    text-decoration: none;
    color: var(--color-text, #212529);
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.2s;
    border: 1px solid transparent;
}

.sp-learn-card:hover {
    border-color: #667eea;
    color: #667eea;
    background: #fff;
}

/* ============================================================
   SUBPAGE RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {
    .coin-subpage-nav {
        gap: 2px;
        padding: 3px;
    }

    .coin-subpage-nav a {
        padding: 6px 10px;
        font-size: 0.78rem;
    }

    .sp-price-large {
        font-size: 1.8rem;
    }

    .sp-price-display {
        flex-wrap: wrap;
    }

    .sp-converter-display {
        grid-template-columns: 1fr;
    }

    .sp-tips-grid {
        grid-template-columns: 1fr;
    }

    .sp-chart-stats-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .sp-grafico-header {
        flex-direction: column;
        gap: 8px;
    }

    .sp-grafico-price .sp-price-large {
        font-size: 1.4rem;
    }

    .internal-links-grid {
        grid-template-columns: 1fr;
    }

    .sp-learn-links {
        grid-template-columns: 1fr;
    }

    .subpage-header h1 {
        font-size: 1.2rem;
    }

    .sp-chart-fullwidth .chart-canvas-wrap {
        height: 300px;
    }

    .sp-chart-fullwidth .chart-candlestick-wrap {
        min-height: 300px;
    }
}

/* Cross-links cards (Resumen tab) */
.coin-cross-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 8px;
    margin: 0 0 12px;
}

.coin-cross-link-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    background: var(--color-surface, #f8f9fa);
    border: 1px solid var(--color-border, #e9ecef);
    border-radius: 10px;
    color: var(--color-primary, #6c5ce7);
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s, transform 0.15s;
}

.coin-cross-link-card:hover {
    background: var(--color-primary-light, #e8e5ff);
    border-color: var(--color-primary, #6c5ce7);
    transform: translateY(-1px);
}

/* Compact chart on Resumen */
.coin-chart-compact {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
}

.coin-chart-compact .chart-canvas-wrap {
    height: 220px;
    max-height: 220px;
    position: relative;
}

.coin-chart-compact .chart-canvas-wrap canvas {
    max-height: 220px !important;
}

.coin-chart-compact .chart-header {
    margin-bottom: 6px;
}

.coin-chart-compact .chart-header h2 {
    font-size: 1rem;
    margin: 0;
}

/* ============================================
   COMPETITIVE IMPROVEMENTS
   ============================================ */

/* ---------- 1. Global Stats Bar ---------- */
.global-stats-bar {
    background: #1a1a2e;
    color: #8b949e;
    font-size: 0.72rem;
    padding: 4px 0;
    position: sticky;
    top: 0;
    z-index: 1001;
    text-align: center;
    border-bottom: 1px solid #30363d;
}

.gs-inner {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 16px;
}

.gs-item strong { color: #e6edf3; }
.gs-sep { color: #30363d; }

@media (max-width: 768px) {
    .gs-sep:nth-child(n+6) { display: none; }
    .gs-item:nth-child(n+7) { display: none; }
    .gs-inner { gap: 6px; }
    .global-stats-bar { font-size: 0.68rem; }
}

/* ---------- 2. Compact Table ---------- */
.coin-table td { padding: 6px 8px !important; }
.coin-table th { padding: 8px 8px !important; font-size: 0.72rem; }
.coin-table tr { transition: background 0.1s; }
.sparkline-cell svg { width: 100px !important; height: 30px !important; }
@media (min-width: 769px) {
    .sparkline-cell { width: 110px !important; }
}
.market-overview-row { margin: 8px 0; }
.overview-card { padding: 14px; }
.movers-section { margin: 8px 0; }
.stats-grid { gap: 8px; margin: 8px 0; }
.stats-card { padding: 12px; }
.table-controls { margin-bottom: 6px; }

/* ---------- 3. Similar Coins ---------- */
.similar-coins-section {
    margin-top: 12px;
}

.similar-coins-section h3 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-text);
}

.similar-coins-row {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
}

.similar-coin-card {
    flex: 0 0 auto;
    width: 160px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 14px;
    text-decoration: none;
    color: var(--color-text);
    transition: transform 0.15s, box-shadow 0.15s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
}

.similar-coin-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    text-decoration: none;
}

.similar-coin-card img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

.similar-coin-card .sc-name {
    font-weight: 600;
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.similar-coin-card .sc-symbol {
    font-size: 0.72rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
}

.similar-coin-card .sc-price {
    font-weight: 600;
    font-family: var(--font-mono);
    font-size: 0.82rem;
}

.similar-coin-card .sc-change {
    font-size: 0.78rem;
    font-weight: 600;
}

/* ---------- 4. Watchlist Star in Table ---------- */
.table-star-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #ddd;
    padding: 0;
    margin-right: 4px;
    vertical-align: middle;
    display: inline-flex;
    align-items: center;
    transition: color 0.15s;
}

.table-star-btn.starred svg {
    color: #f7931a;
    fill: #f7931a;
}

.table-star-btn:hover svg {
    color: #f7931a;
}

.coin-table td:first-child {
    white-space: nowrap;
}

/* ---------- 5. Filter Tabs ---------- */
.table-filter-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.tft-btn {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 20px;
    padding: 5px 14px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.tft-btn:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.tft-btn.active {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
}

@media (max-width: 480px) {
    .tft-btn {
        padding: 4px 10px;
        font-size: 0.75rem;
    }
    .table-filter-tabs { gap: 3px; }
}

/* ---------- HOMEPAGE DENSITY v2 ---------- */

/* Stats Strip - single compact row */
.stats-strip {
    display: flex;
    align-items: center;
    gap: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0;
    margin-bottom: 10px;
    overflow: hidden;
}

.ss-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 12px;
    border-right: 1px solid var(--color-border-light);
}

.ss-item:last-child { border-right: none; }

.ss-label {
    font-size: 0.68rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 500;
}

.ss-value {
    font-size: 0.95rem;
    font-weight: 700;
    font-family: var(--font-mono);
    color: var(--color-text);
    margin-top: 1px;
}

/* Market Overview Compact (4 columns) */
.market-overview-compact {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin: 0 0 10px;
}

.overview-mini {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 10px 12px;
    box-shadow: var(--shadow-sm);
    overflow: visible;
    position: relative;
}

.overview-mini h3 {
    font-size: 0.82rem;
    font-weight: 700;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--color-text);
}

.overview-mini.dominance-card {
    overflow: hidden;
}

.overview-mini .dominance-chart-wrap {
    gap: 10px;
    justify-content: center;
    align-items: center;
}

.overview-mini .dominance-chart-wrap canvas {
    max-width: 100px;
    max-height: 100px;
    flex-shrink: 0;
}

.overview-mini .dominance-legend {
    gap: 2px;
}

.overview-mini .legend-item {
    font-size: 0.72rem;
    gap: 5px;
}

.overview-mini .legend-dot {
    width: 8px;
    height: 8px;
}

/* ---------- Fear & Greed Card v2 ---------- */
.fg-card-v2 {
    display: flex;
    flex-direction: column;
    overflow: visible;
}

.fg-card-header {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    margin-bottom: 4px;
}

.fg-card-header h3 {
    margin-bottom: 0 !important;
}

.fg-tooltip-wrap {
    position: relative;
    cursor: help;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
}

.fg-tooltip {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    width: 230px;
    background: #1a1a2e;
    color: #fff;
    font-size: 0.7rem;
    line-height: 1.45;
    padding: 10px 12px;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
    z-index: 200;
    font-weight: 400;
    text-align: left;
    pointer-events: none;
}

.fg-tooltip::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-bottom-color: #1a1a2e;
}

.fg-tooltip-wrap:hover .fg-tooltip {
    display: block;
}

.fg-v2-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
    justify-content: center;
}

.fg-v2-value {
    font-size: 2rem;
    font-weight: 900;
    font-family: var(--font-mono);
    line-height: 1;
    margin-bottom: 2px;
}

.fg-v2-max {
    font-size: 0.9rem;
    font-weight: 600;
    opacity: 0.4;
}

.fg-v2-label {
    font-size: 0.78rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.fg-v2-bar-wrap {
    width: 100%;
    max-width: 180px;
}

.fg-v2-bar {
    position: relative;
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(90deg, #ea3943 0%, #ea7b3a 25%, #f7931a 50%, #93c73e 75%, #16c784 100%);
    margin-bottom: 4px;
}

.fg-v2-dot {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2.5px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
    transition: left 0.4s ease;
}

.fg-v2-bar-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.6rem;
    color: var(--color-text-muted);
    font-weight: 500;
}

/* Historical values */
.fg-v2-history {
    border-top: 1px solid var(--color-border-light);
    margin-top: 8px;
    padding-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.fg-hist-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.7rem;
}

.fg-hist-row > span:first-child {
    color: var(--color-text-muted);
    min-width: 52px;
    font-weight: 500;
}

.fg-hist-row strong {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    min-width: 22px;
    text-align: right;
}

.fg-hist-lbl {
    color: var(--color-text-muted);
    font-size: 0.62rem;
    margin-left: auto;
}

.overview-mini .fg-date {
    font-size: 0.7rem;
    text-align: center;
    color: var(--color-text-muted);
    margin-top: 2px;
}

/* Movers Compact (horizontal chips) */
.movers-compact {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}

.movers-row {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 6px 10px;
}

.movers-label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    min-width: 70px;
    color: var(--color-text-secondary);
}

.movers-chips {
    display: flex;
    gap: 6px;
    overflow: hidden;
    flex: 1;
    padding: 2px 0;
    mask-image: linear-gradient(90deg, transparent 0%, #000 3%, #000 97%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 3%, #000 97%, transparent 100%);
}

.movers-chips .movers-chips-track {
    display: flex;
    gap: 6px;
    animation: movers-scroll 60s linear infinite;
    flex-shrink: 0;
}

.movers-chips:hover .movers-chips-track {
    animation-play-state: paused;
}

@keyframes movers-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-50% - 3px)); }
}

.movers-reverse .movers-chips-track {
    animation-name: movers-scroll-reverse;
}

@keyframes movers-scroll-reverse {
    0% { transform: translateX(calc(-50% - 3px)); }
    100% { transform: translateX(0); }
}

.mover-chip {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: var(--color-bg);
    border: 1px solid var(--color-border-light);
    border-radius: 20px;
    text-decoration: none;
    color: var(--color-text);
    font-size: 0.78rem;
    white-space: nowrap;
    transition: border-color 0.15s, box-shadow 0.15s;
    flex-shrink: 0;
}

.mover-chip:hover {
    border-color: var(--color-accent);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
}

.mover-chip img {
    width: 20px;
    height: 20px;
    border-radius: 50%;
}

.mc-name {
    font-weight: 600;
    font-size: 0.75rem;
}

.mc-change {
    font-weight: 700;
    font-size: 0.75rem;
}

/* Mobile responsive for new compact layout */
@media (max-width: 768px) {
    .stats-strip {
        flex-wrap: wrap;
    }
    .ss-item {
        flex: 0 0 50%;
        border-bottom: 1px solid var(--color-border-light);
    }
    .ss-item:nth-child(3),
    .ss-item:nth-child(4) {
        border-bottom: none;
    }
    .ss-item:nth-child(2n) {
        border-right: none;
    }
    .market-overview-compact {
        grid-template-columns: repeat(2, 1fr);
    }
    .movers-label {
        min-width: 60px;
    }
}

@media (max-width: 480px) {
    .ss-value { font-size: 0.82rem; }
    .ss-label { font-size: 0.62rem; }
    .movers-row { padding: 4px 6px; }
    .mover-chip { padding: 3px 7px; font-size: 0.72rem; }
}

/* ---------- COIN PAGE IMPROVEMENTS ---------- */

/* Multi-fiat price section */
.multi-fiat-section {
    margin-bottom: 12px;
}

.fiat-prices-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.fiat-price-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

.fiat-code {
    font-weight: 700;
    font-size: 0.82rem;
    color: var(--color-text-secondary);
    min-width: 36px;
}

.fiat-value {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--color-text);
}

/* Enhanced links section */
.coin-links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

.coin-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text);
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 600;
    transition: all 0.15s;
}

.coin-link-btn:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
    background: var(--color-accent-light);
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.coin-link-btn .icon-sm:last-child {
    opacity: 0.4;
    width: 12px;
    height: 12px;
}

/* Improved supply bar */
.supply-bar-track {
    height: 24px;
    background: var(--color-bg);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--color-border-light);
    margin: 8px 0;
}

.supply-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #16c784, #93c73e);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: width 0.6s ease;
    min-width: 0;
}

.supply-bar-text {
    font-size: 0.72rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.supply-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.78rem;
    color: var(--color-text-secondary);
}

.supply-labels span {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Mobile fiat grid */
@media (max-width: 768px) {
    .fiat-prices-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .fiat-prices-grid {
        grid-template-columns: 1fr;
    }
    .coin-link-btn {
        padding: 6px 12px;
        font-size: 0.78rem;
    }
}

/* ---------- Clickable Dominance Legend ---------- */
.legend-toggle {
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    transition: opacity 0.2s, background 0.15s;
    user-select: none;
}

.legend-toggle:hover {
    background: var(--color-surface-alt, rgba(0,0,0,0.04));
}

.legend-toggle.legend-disabled {
    opacity: 0.35;
    text-decoration: line-through;
}

.legend-toggle.legend-disabled .legend-dot {
    background: #ccc !important;
}

.legend-pct {
    font-family: var(--font-mono);
    font-weight: 600;
}

/* ---------- Altcoin Season Card ---------- */
.altseason-card {
    display: flex;
    flex-direction: column;
}

.altseason-card .altseason-value,
.altseason-card .altseason-label,
.altseason-card .altseason-bar-wrap,
.altseason-card .altseason-detail {
    text-align: center;
    align-self: center;
}

.altseason-value {
    font-size: 2rem;
    font-weight: 900;
    font-family: var(--font-mono);
    line-height: 1;
    margin-bottom: 2px;
}

.altseason-max {
    font-size: 0.9rem;
    font-weight: 600;
    opacity: 0.5;
}

.altseason-label {
    font-size: 0.78rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.altseason-bar-wrap {
    width: 100%;
    max-width: 180px;
}

.altseason-bar {
    position: relative;
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(90deg, #ea3943 0%, #ea7b3a 25%, #f7931a 50%, #93c73e 75%, #16c784 100%);
    margin-bottom: 4px;
}

.altseason-dot {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2.5px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
    transition: left 0.4s ease;
}

.altseason-bar-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.65rem;
    color: var(--color-text-muted);
    font-weight: 500;
}

.altseason-detail {
    font-size: 0.68rem;
    color: var(--color-text-muted);
    margin-top: 6px;
}

/* Mobile: altseason card horizontal */
@media (max-width: 768px) {
    .altseason-card {
        flex-direction: row;
        gap: 12px;
        align-items: center;
    }
    .altseason-bar-wrap {
        flex: 1;
    }
    .altseason-value {
        font-size: 1.5rem;
    }
}

/* ========== ALTCOIN SEASON PAGE ========== */

/* Hero */
.altseason-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: center;
    margin-bottom: 24px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 28px;
    box-shadow: var(--shadow-sm);
}

.altseason-hero h1 {
    font-size: 1.6rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.altseason-hero-desc {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
}

.altseason-hero-gauge {
    text-align: center;
}

.altseason-hero-value {
    font-size: 3.5rem;
    font-weight: 900;
    font-family: var(--font-mono);
    line-height: 1;
}

.altseason-hero-max {
    font-size: 1.2rem;
    font-weight: 600;
    opacity: 0.4;
}

.altseason-hero-label {
    font-size: 1rem;
    font-weight: 700;
    margin: 4px 0 16px;
}

.altseason-hero-bar {
    max-width: 260px;
    margin: 0 auto;
}

.altseason-hero-bar-track {
    position: relative;
    height: 10px;
    border-radius: 5px;
    background: linear-gradient(90deg, #ea3943 0%, #ea7b3a 25%, #f7931a 50%, #93c73e 75%, #16c784 100%);
    margin-bottom: 6px;
}

.altseason-hero-dot {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    transition: left 0.5s ease;
}

.altseason-hero-bar-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    color: var(--color-text-muted);
    font-weight: 500;
}

.altseason-hero-bar-labels span {
    display: flex;
    align-items: center;
    gap: 3px;
}

/* Info Cards */
.altseason-info-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

.as-info-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 16px;
    text-align: center;
    box-shadow: var(--shadow-sm);
}

.as-info-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 8px;
}

.as-info-label {
    font-size: 0.72rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 500;
    margin-bottom: 4px;
}

.as-info-value {
    font-size: 1.3rem;
    font-weight: 800;
    font-family: var(--font-mono);
}

.as-info-sub {
    font-size: 0.72rem;
    color: var(--color-text-muted);
    margin-top: 2px;
}

/* Bar Chart */
.altseason-chart-section {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 20px;
    margin-bottom: 24px;
    box-shadow: var(--shadow-sm);
}

.altseason-chart-desc {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    margin-bottom: 16px;
    line-height: 1.5;
}

.altseason-bars-container {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.as-bar-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 8px;
    border-radius: 4px;
    text-decoration: none;
    color: var(--color-text);
    transition: background 0.1s;
}

.as-bar-row:hover {
    background: var(--color-surface-alt);
    text-decoration: none;
}

.as-bar-info {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 80px;
    flex-shrink: 0;
}

.as-bar-info img {
    width: 20px;
    height: 20px;
    border-radius: 50%;
}

.as-bar-symbol {
    font-weight: 700;
    font-size: 0.78rem;
    min-width: 45px;
}

.as-bar-track {
    flex: 1;
    height: 18px;
    position: relative;
    background: var(--color-bg);
    border-radius: 3px;
    overflow: hidden;
}

.as-bar-zero {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--color-border);
}

.as-bar-fill {
    position: absolute;
    top: 2px;
    bottom: 2px;
    border-radius: 2px;
    transition: width 0.3s ease;
}

.as-bar-value {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 700;
    min-width: 68px;
    text-align: right;
    flex-shrink: 0;
}

/* Methodology */
.altseason-methodology {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 20px;
    margin-bottom: 24px;
    box-shadow: var(--shadow-sm);
}

.methodology-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.methodology-step {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.meth-number {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.meth-text h4 {
    font-size: 0.88rem;
    font-weight: 700;
    margin-bottom: 4px;
}

.meth-text p {
    font-size: 0.82rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
}

/* FAQ */
.altseason-faq {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 20px;
    margin-bottom: 24px;
    box-shadow: var(--shadow-sm);
}

.faq-accordions {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.faq-item {
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: none;
    border: none;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--color-text);
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
}

.faq-question:hover {
    background: var(--color-surface-alt);
}

.faq-question .icon-sm {
    transition: transform 0.2s;
    flex-shrink: 0;
}

.faq-item.open .faq-question .icon-sm {
    transform: rotate(90deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.faq-item.open .faq-answer,
details.faq-item[open] .faq-answer {
    max-height: none;
    overflow: visible;
}

.faq-answer p {
    padding: 0 16px 14px;
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    line-height: 1.65;
}

/* Responsive */
@media (max-width: 768px) {
    .altseason-hero {
        grid-template-columns: 1fr;
        padding: 20px;
    }
    .altseason-info-cards {
        grid-template-columns: 1fr 1fr;
    }
    .methodology-content {
        grid-template-columns: 1fr;
    }
    .as-bar-info { min-width: 60px; }
    .as-bar-symbol { min-width: 35px; font-size: 0.72rem; }
    .as-bar-value { min-width: 58px; font-size: 0.72rem; }
}

@media (max-width: 480px) {
    .altseason-info-cards {
        grid-template-columns: 1fr;
    }
    .altseason-hero-value {
        font-size: 2.5rem;
    }
}

/* ---------- Market Pulse Card ---------- */
.pulse-card {
    display: flex;
    flex-direction: column;
}

.pulse-card h3 {
    margin-bottom: 6px !important;
}

.pulse-metric {
    margin-bottom: 6px;
}

.pulse-metric:last-child {
    margin-bottom: 0;
}

.pulse-metric-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3px;
}

.pulse-metric-name {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    gap: 3px;
}

.pulse-tip-wrap {
    position: relative;
    cursor: help;
    color: var(--color-text-muted);
    display: inline-flex;
    align-items: center;
}

.pulse-tip {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 200px;
    background: #1a1a2e;
    color: #fff;
    font-size: 0.66rem;
    line-height: 1.4;
    padding: 8px 10px;
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.3);
    z-index: 200;
    font-weight: 400;
    text-align: left;
    pointer-events: none;
}

.pulse-tip::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 12px;
    border: 5px solid transparent;
    border-bottom-color: #1a1a2e;
}

.pulse-tip-wrap:hover .pulse-tip {
    display: block;
}

.pulse-metric-val {
    font-size: 0.82rem;
    font-weight: 800;
    font-family: var(--font-mono);
}

.pulse-minibar {
    height: 6px;
    background: var(--color-bg);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 2px;
}

.pulse-minibar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.4s ease;
}

.pulse-metric-detail {
    font-size: 0.62rem;
    color: var(--color-text-muted);
}

/* Responsive: 4-col overview */
@media (max-width: 1024px) {
    .market-overview-compact {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .market-overview-compact {
        grid-template-columns: 1fr;
    }
}

/* ========== NEW COINS PAGE ========== */
.newcoins-hero {
    margin-bottom: 20px;
}

.newcoins-hero h1 {
    font-size: 1.5rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.newcoins-hero p {
    font-size: 0.88rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
    max-width: 700px;
}

.newcoins-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

.nc-stat-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 14px;
    text-align: center;
    box-shadow: var(--shadow-sm);
}

.nc-stat-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 6px;
}

.nc-stat-label {
    font-size: 0.68rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 500;
    margin-bottom: 3px;
}

.nc-stat-value {
    font-size: 1.2rem;
    font-weight: 800;
    font-family: var(--font-mono);
}

.nc-stat-sub {
    font-size: 0.68rem;
    color: var(--color-text-muted);
    margin-top: 2px;
}

.newcoins-filters {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.nc-added-badge {
    display: inline-block;
    padding: 2px 8px;
    background: var(--color-accent-light, #fff4e6);
    color: var(--color-accent, #f7931a);
    border-radius: 10px;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
}

.nc-pagination {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-top: 16px;
}

.nc-page-btn {
    padding: 6px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--color-text);
    transition: all 0.15s;
}

.nc-page-btn:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.nc-page-btn.active {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
}

.newcoins-info {
    margin-top: 24px;
}

.newcoins-warning {
    background: #fff8f0;
    border: 1px solid #ffe0b2;
    border-radius: var(--radius-md);
    padding: 18px 20px;
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--color-text-secondary);
}

.newcoins-warning p {
    margin-bottom: 10px;
}

.newcoins-warning ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.newcoins-warning li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
}

.newcoins-warning li .icon-sm {
    color: #16c784;
    flex-shrink: 0;
}

.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--color-text-muted);
}

.empty-icon {
    margin-bottom: 12px;
}

.empty-icon .icon {
    width: 48px;
    height: 48px;
}

.empty-state h3 {
    font-size: 1.1rem;
    margin-bottom: 6px;
    color: var(--color-text);
}

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

@media (max-width: 768px) {
    .newcoins-stats {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 480px) {
    .newcoins-stats {
        grid-template-columns: 1fr;
    }
    .newcoins-filters {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ========== COIN PAGE v2: 2-Column Layout ========== */

/* Header row: identity + actions inline */
.coin-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 4px;
}

.coin-header-id {
    display: flex;
    align-items: center;
    gap: 10px;
}

.coin-header-id img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
}

.coin-header-id h1 {
    font-size: 1.3rem;
    font-weight: 800;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.coin-header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* Price row */
.coin-price-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.coin-price-row .coin-price-large {
    font-size: 1.8rem;
    font-weight: 900;
    margin: 0;
}

.coin-price-row .highlow-bar {
    margin-left: auto;
}

/* Main 2-column grid */
.coin-main-grid {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 12px;
    margin-bottom: 12px;
}

.coin-main-left .coin-chart-compact {
    margin-bottom: 8px;
}

.coin-main-left .coin-chart-compact .chart-canvas-wrap {
    height: 300px;
    max-height: 300px;
}

.coin-main-left .coin-chart-compact .chart-canvas-wrap canvas {
    max-height: 300px !important;
}

.coin-main-left .inline-converter {
    margin: 0;
    padding: 10px 14px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
    font-size: 0.85rem;
}

.coin-main-left .inline-converter .ic-row {
    gap: 8px;
    font-size: 0.85rem;
}

.coin-main-left .inline-converter input {
    width: 70px;
    padding: 4px 8px;
    font-size: 0.85rem;
}

.coin-main-left .inline-converter .ic-quick-amounts {
    margin-top: 6px;
}

.coin-main-left .inline-converter .ic-quick-amounts button {
    padding: 2px 8px;
    font-size: 0.72rem;
}

/* Sidebar metrics */
.sidebar-metrics {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 14px;
    position: sticky;
    top: 80px;
}

.sm-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 0;
    border-bottom: 1px solid var(--color-border-light);
    font-size: 0.82rem;
}

.sm-row:last-child { border-bottom: none; }

.sm-label {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--color-text-secondary);
    font-weight: 500;
}

.sm-label .icon-sm { width: 14px; height: 14px; }

.sm-value {
    font-weight: 700;
    font-family: var(--font-mono);
    font-size: 0.82rem;
    text-align: right;
}

.sm-supply {
    padding: 4px 0 8px;
}

.sm-supply .supply-bar-track {
    height: 16px;
    margin: 0;
}

.sm-sep {
    height: 1px;
    background: var(--color-border);
    margin: 6px 0;
}

.sm-changes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
}

.sm-ch {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 8px;
    background: var(--color-bg);
    border-radius: 4px;
    font-size: 0.78rem;
}

.sm-ch span:first-child {
    color: var(--color-text-muted);
    font-weight: 500;
}

.sm-ch span:last-child {
    font-weight: 700;
    font-family: var(--font-mono);
}

.sm-links {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.sm-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: var(--color-bg);
    border: 1px solid var(--color-border-light);
    border-radius: 6px;
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: 0.72rem;
    font-weight: 600;
    transition: all 0.15s;
}

.sm-link:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
    text-decoration: none;
}

.sm-link .icon-sm { width: 12px; height: 12px; }

/* Mobile: stack to single column */
@media (max-width: 900px) {
    .coin-main-grid {
        grid-template-columns: 1fr;
    }
    .sidebar-metrics {
        position: static;
    }
    .coin-price-row .highlow-bar {
        margin-left: 0;
        width: 100%;
    }
}

@media (max-width: 480px) {
    .coin-header-row {
        flex-direction: column;
        align-items: flex-start;
    }
    .coin-price-row .coin-price-large {
        font-size: 1.4rem;
    }
}

/* Sidebar contract addresses */
.sm-contracts {
    margin-top: 2px;
}

.sm-contract-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    margin-bottom: 6px;
}

.sm-contract-label .icon-sm { width: 13px; height: 13px; }

.sm-contract-main,
.sm-contract-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    background: var(--color-bg);
    border: 1px solid var(--color-border-light);
    border-radius: 6px;
    margin-bottom: 4px;
    font-size: 0.75rem;
}

.sm-chain-name {
    font-weight: 600;
    color: var(--color-text-secondary);
    white-space: nowrap;
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.7rem;
}

.sm-addr {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--color-text);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sm-copy-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-muted);
    padding: 2px;
    display: flex;
    align-items: center;
    transition: color 0.15s;
    flex-shrink: 0;
}

.sm-copy-btn:hover {
    color: var(--color-accent);
}

.sm-copy-btn .icon-sm {
    width: 13px;
    height: 13px;
}

.sm-more-contracts {
    margin-top: 2px;
}

.sm-more-contracts summary {
    cursor: pointer;
    font-size: 0.72rem;
    color: var(--color-accent);
    font-weight: 600;
    padding: 3px 0;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 4px;
}

.sm-more-contracts summary::before {
    content: '+ ';
}

.sm-more-contracts[open] summary::before {
    content: '- ';
}

.sm-more-contracts .sm-contract-row {
    margin-bottom: 3px;
}

/* ========== Related Coins Links (cross-subpage SEO) ========== */
#related-coins-links {
    margin-top: 20px;
}

#related-coins-links h3 {
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.related-coins-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.related-coin-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 20px;
    color: var(--color-text);
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 600;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.related-coin-link:hover {
    border-color: var(--color-accent);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
}

.related-coin-link img {
    width: 20px;
    height: 20px;
    border-radius: 50%;
}

@media (max-width: 480px) {
    .related-coin-link {
        padding: 5px 10px;
        font-size: 0.75rem;
    }
}

/* ========== Exchange Fee Recommendations ========== */
.fee-recommendations {
    margin: 24px 0;
}

.fee-reco-desc {
    font-size: 0.88rem;
    color: var(--color-text-secondary);
    margin-bottom: 16px;
    line-height: 1.5;
}

.fee-reco-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

@media (max-width: 1100px) {
    .fee-reco-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.fee-reco-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 18px;
    box-shadow: var(--shadow-sm);
}

.fee-reco-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.fee-reco-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    background: var(--color-accent-light);
    color: var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.fee-reco-header h3 {
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0;
}

.fee-reco-profile-desc {
    font-size: 0.78rem;
    color: var(--color-text-secondary);
    line-height: 1.45;
    margin-bottom: 8px;
}

.fee-reco-meta {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.fee-reco-meta span {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    color: var(--color-text-muted);
    font-weight: 500;
}

.fee-reco-ranking {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.fee-reco-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--color-text);
    transition: background 0.15s;
    border: 1px solid var(--color-border-light);
}

.fee-reco-item:hover {
    background: var(--color-surface-alt);
    text-decoration: none;
}

.fee-reco-item img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
}

.fee-reco-pos {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 800;
    flex-shrink: 0;
}

.reco-gold .fee-reco-pos {
    background: #ffd700;
    color: #7a6200;
}

.reco-silver .fee-reco-pos {
    background: #c0c0c0;
    color: #555;
}

.reco-bronze .fee-reco-pos {
    background: #cd7f32;
    color: #fff;
}

.reco-gold {
    border-color: #ffd70066;
    background: #ffd70008;
}

.fee-reco-info {
    display: flex;
    flex-direction: column;
}

.fee-reco-info strong {
    font-size: 0.82rem;
}

.fee-reco-info span {
    font-size: 0.7rem;
    color: var(--color-text-muted);
    font-family: var(--font-mono);
}

@media (max-width: 900px) {
    .fee-reco-grid {
        grid-template-columns: 1fr;
    }
}

/* Fix % display in fee table */
.fee-comparison-table td {
    font-family: var(--font-mono);
    font-size: 0.82rem;
}

/* ========== Fees Page Hero ========== */
.fees-hero {
    margin-bottom: 20px;
}
.fees-hero h1 {
    font-size: 1.5rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}
.fees-hero p {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
}

/* ========== Wizard ========== */
.wizard-section {
    background: var(--color-surface);
    border: 2px solid var(--color-accent);
    border-radius: var(--radius-md);
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 4px 20px rgba(247,147,26,0.08);
}

.wizard-questions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 20px;
}

.wizard-q label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--color-text);
}

.wizard-slider-wrap {
    padding-right: 4px;
}

.wizard-slider {
    width: 100%;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: linear-gradient(90deg, #16c784, #f7931a, #ea3943);
    border-radius: 3px;
    outline: none;
    cursor: pointer;
}

.wizard-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--color-accent);
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    cursor: pointer;
}

.wizard-slider-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.6rem;
    color: var(--color-text-muted);
    margin-top: 4px;
}

.wizard-options {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.wz-opt {
    padding: 7px 14px;
    border: 1px solid var(--color-border);
    border-radius: 20px;
    background: var(--color-bg);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all 0.15s;
}

.wz-opt:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.wz-opt.active {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
}

/* Wizard result */
.wizard-best {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 18px;
}

.wizard-best-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: #16c784;
    color: #fff;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    margin-bottom: 12px;
}

.wizard-best-main {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.wizard-best-main img {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    flex-shrink: 0;
}

.wizard-best-info {
    flex: 1;
}

.wizard-best-info h3 {
    font-size: 1.2rem;
    font-weight: 800;
    margin: 0 0 6px;
}

.wizard-best-fees {
    display: flex;
    gap: 16px;
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.wizard-best-fees strong {
    color: var(--color-text);
    font-family: var(--font-mono);
}

.wizard-best-reasons {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.wizard-best-reasons li {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: var(--color-text-secondary);
}

.wizard-best-reasons li .icon-sm {
    color: #16c784;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.wizard-best-cta {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    background: var(--color-accent);
    color: #fff;
    border-radius: var(--radius-md);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.85rem;
    white-space: nowrap;
    align-self: center;
    transition: background 0.15s;
}

.wizard-best-cta:hover {
    background: #e8850a;
    text-decoration: none;
}

.wizard-also {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--color-border-light);
    display: flex;
    align-items: center;
    gap: 10px;
}

.wizard-also-label {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.wizard-also-item {
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: var(--color-text);
    font-size: 0.82rem;
}

.wizard-also-item:hover { text-decoration: none; color: var(--color-accent); }
.wizard-also-item img { width: 24px; height: 24px; border-radius: 50%; }
.wizard-also-item span { color: var(--color-text-muted); font-size: 0.75rem; }

/* ========== Simulator ========== */
.simulator-section {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 20px;
    margin-bottom: 24px;
    box-shadow: var(--shadow-sm);
}

.simulator-desc {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    margin-bottom: 14px;
}

.sim-controls {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.sim-input-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sim-input-group label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
}

.sim-input {
    padding: 8px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-weight: 600;
    background: var(--color-bg);
    width: 140px;
}

.sim-unit {
    font-size: 0.72rem;
    color: var(--color-text-muted);
    margin-top: 2px;
}

.sim-summary {
    font-size: 0.88rem;
    margin-bottom: 12px;
    color: var(--color-text-secondary);
}

.sim-bars {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sim-bar-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    border-radius: 4px;
}

.sim-best { background: rgba(22,199,132,0.06); }
.sim-good { background: rgba(22,199,132,0.03); }

.sim-bar-info {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 130px;
    flex-shrink: 0;
}

.sim-bar-info img { width: 20px; height: 20px; border-radius: 50%; }
.sim-bar-name { font-size: 0.8rem; font-weight: 600; }

.sim-bar-track {
    flex: 1;
    height: 20px;
    background: var(--color-bg);
    border-radius: 4px;
    overflow: hidden;
}

.sim-bar-fill {
    height: 100%;
    background: #ea394340;
    border-radius: 4px;
    position: relative;
    min-width: 2px;
}

.sim-bar-trading {
    height: 100%;
    background: var(--color-accent);
    border-radius: 4px;
    opacity: 0.7;
}

.sim-bar-cost {
    min-width: 90px;
    text-align: right;
    font-family: var(--font-mono);
    font-size: 0.8rem;
}

.sim-savings {
    display: block;
    font-size: 0.68rem;
    color: #16c784;
    font-weight: 600;
}

.sim-legend {
    display: flex;
    gap: 16px;
    margin-top: 10px;
    font-size: 0.72rem;
    color: var(--color-text-muted);
}

.sim-legend-item { display: flex; align-items: center; gap: 5px; }
.sim-dot { width: 10px; height: 10px; border-radius: 2px; }
.sim-dot-trading { background: var(--color-accent); opacity: 0.7; }
.sim-dot-withdraw { background: #ea394340; }

@media (max-width: 768px) {
    .wizard-questions { grid-template-columns: 1fr; }
    .wizard-best-main { flex-direction: column; }
    .wizard-best-cta { align-self: flex-start; }
    .sim-controls { flex-direction: column; }
    .sim-input { width: 100%; }
    .sim-bar-info { min-width: 90px; }
}

/* ========== Exchange Compare Page ========== */
.exc-hero {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-bottom: 24px;
    padding: 24px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}
.exc-hero-side {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--color-text);
    min-width: 120px;
}
.exc-hero-side:hover { text-decoration: none; }
.exc-hero-side img { width: 56px; height: 56px; border-radius: 12px; }
.exc-hero-side h2 { font-size: 1.2rem; font-weight: 800; margin: 0; }
.exc-hero-rank { font-size: 0.75rem; color: var(--color-text-muted); font-weight: 600; }
.exc-hero-vs {
    font-size: 1.5rem; font-weight: 900; color: var(--color-accent);
    width: 50px; height: 50px; border-radius: 50%;
    background: var(--color-accent-light); display: flex;
    align-items: center; justify-content: center; flex-shrink: 0;
}
.exc-table-wrap {
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-md); overflow: hidden; margin-bottom: 20px;
}
.exc-compare-table { width: 100%; border-collapse: collapse; }
.exc-compare-table th, .exc-compare-table td { padding: 10px 14px; font-size: 0.85rem; text-align: center; }
.exc-compare-table thead th { background: var(--color-bg); font-weight: 700; font-size: 0.88rem; }
.exc-cmp-label { font-weight: 600; color: var(--color-text-secondary); font-size: 0.8rem !important; min-width: 130px; }
.exc-compare-table tbody tr { border-top: 1px solid var(--color-border-light); }
.exc-compare-table tbody td { font-family: var(--font-mono); font-weight: 600; }
.exc-compare-table tbody th { font-family: inherit; }
.cmp-win { color: #16c784; background: rgba(22,199,132,0.06); }
.cmp-lose { color: #ea3943; background: rgba(234,57,67,0.04); }
.exc-sim {
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-md); padding: 18px; margin-bottom: 20px;
}
.exc-sim h3 { font-size: 0.95rem; font-weight: 700; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.exc-sim-controls { display: flex; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; }
.exc-sim-controls label { font-size: 0.82rem; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.exc-sim-controls input, .exc-sim-controls select {
    padding: 6px 10px; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
    font-size: 0.85rem; font-weight: 600; width: 90px; background: var(--color-bg);
}
.exc-sim-bars { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.exc-sim-bar-row { display: flex; align-items: center; gap: 10px; }
.exc-sim-name { min-width: 90px; font-size: 0.82rem; font-weight: 600; }
.exc-sim-bar { height: 24px; border-radius: 4px; transition: width 0.3s; min-width: 10px; }
.exc-sim-bar-row strong { font-family: var(--font-mono); font-size: 0.85rem; min-width: 60px; }
.exc-sim-saving { font-size: 0.82rem; color: var(--color-text-secondary); }
.exc-sim-saving strong { color: #16c784; }
.exc-verdict {
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-md); padding: 18px; margin-bottom: 20px;
}
.exc-verdict h3 { font-size: 0.95rem; font-weight: 700; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.exc-verdict p { font-size: 0.85rem; color: var(--color-text-secondary); line-height: 1.5; margin-bottom: 10px; }
.exc-verdict-cta {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 18px; background: var(--color-accent); color: #fff;
    border-radius: var(--radius-md); text-decoration: none; font-weight: 700; font-size: 0.82rem;
}
.exc-verdict-cta:hover { background: #e8850a; text-decoration: none; }
.exc-popular { margin-bottom: 20px; }
.exc-popular h3 { font-size: 0.95rem; font-weight: 700; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.exc-popular-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.exc-popular-link {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: 20px; text-decoration: none; color: var(--color-text);
    font-size: 0.82rem; font-weight: 600; transition: all 0.15s;
}
.exc-popular-link:hover { border-color: var(--color-accent); color: var(--color-accent); text-decoration: none; }
.exc-popular-selector { margin-top: 16px; }
@media (max-width: 600px) {
    .exc-hero { flex-direction: column; gap: 12px; }
    .exc-compare-table th, .exc-compare-table td { padding: 8px 8px; font-size: 0.78rem; }
    .exc-sim-controls { flex-direction: column; }
}

.exc-sim-cost { min-width: 100px; text-align: right; }
.exc-sim-cost strong { font-family: var(--font-mono); font-size: 0.85rem; display: block; }
.exc-sim-cost span { font-size: 0.68rem; color: var(--color-text-muted); }

/* ========== Exchange Compare Selector Cards ========== */
.exc-section-title {
    font-size: 0.95rem;
    font-weight: 700;
    margin: 20px 0 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--color-text);
}

.exc-vs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
}

.exc-vs-card {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 16px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--color-text);
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.exc-vs-card:hover {
    border-color: var(--color-accent);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    text-decoration: none;
}

.exc-vs-side {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    min-width: 0;
}

.exc-vs-side img {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    flex-shrink: 0;
}

.exc-vs-side span {
    font-weight: 700;
    font-size: 0.78rem;
    text-align: center;
    word-break: break-word;
}

.exc-vs-badge {
    font-size: 0.68rem;
    font-weight: 900;
    color: var(--color-accent);
    background: var(--color-accent-light);
    padding: 3px 8px;
    border-radius: 10px;
    flex-shrink: 0;
}

@media (max-width: 480px) {
    .exc-vs-grid {
        grid-template-columns: 1fr;
    }
    .exc-vs-side img {
        width: 24px;
        height: 24px;
    }
    .exc-vs-side span {
        font-size: 0.75rem;
    }
}

/* Exchange Compare SEO Content */
.exc-seo-intro {
    margin-bottom: 20px;
}
.exc-seo-intro h2 {
    font-size: 1.2rem;
    font-weight: 800;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.exc-seo-intro p {
    font-size: 0.88rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin-bottom: 8px;
}
.exc-section-h2 {
    font-size: 1.05rem;
    font-weight: 800;
    margin: 20px 0 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.exc-sim-intro {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    margin-bottom: 12px;
}
.exc-seo-details {
    margin: 20px 0;
}
.exc-seo-details h2 {
    font-size: 1.05rem;
    font-weight: 800;
    margin: 20px 0 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.exc-seo-details p {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin-bottom: 12px;
}

/* ========== Wallet Wizard Page ========== */
.ww-hero { margin-bottom: 20px; }
.ww-hero h1 { font-size: 1.4rem; font-weight: 800; display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.ww-hero p { font-size: 0.9rem; color: var(--color-text-secondary); line-height: 1.5; }

.ww-wizard {
    background: var(--color-surface);
    border: 2px solid var(--color-accent);
    border-radius: var(--radius-md);
    padding: 24px;
    margin-bottom: 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    box-shadow: 0 4px 20px rgba(247,147,26,0.08);
}

.ww-question label {
    display: flex; align-items: center; gap: 6px;
    font-size: 0.85rem; font-weight: 700; margin-bottom: 10px;
}

.ww-result { margin-bottom: 24px; }

.ww-best {
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-md); padding: 20px; box-shadow: var(--shadow-sm);
}
.ww-best-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 14px; background: #16c784; color: #fff;
    border-radius: 20px; font-size: 0.78rem; font-weight: 700; margin-bottom: 14px;
}
.ww-best-main { display: flex; align-items: flex-start; gap: 16px; }
.ww-best-main img { width: 56px; height: 56px; border-radius: 12px; flex-shrink: 0; }
.ww-best-info { flex: 1; }
.ww-best-info h3 { font-size: 1.3rem; font-weight: 800; margin: 0 0 4px; }
.ww-best-type { font-size: 0.8rem; color: var(--color-text-muted); display: block; margin-bottom: 8px; }
.ww-best-reasons { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.ww-best-reasons li { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--color-text-secondary); }
.ww-best-reasons li .icon-sm { color: #16c784; width: 14px; height: 14px; flex-shrink: 0; }

.ww-also {
    margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--color-border-light);
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.ww-also-label { font-size: 0.78rem; color: var(--color-text-muted); }
.ww-also-item {
    display: flex; align-items: center; gap: 6px; text-decoration: none; color: var(--color-text); font-size: 0.82rem;
}
.ww-also-item:hover { text-decoration: none; color: var(--color-accent); }
.ww-also-item img { width: 24px; height: 24px; border-radius: 50%; }
.ww-also-item span { font-size: 0.72rem; color: var(--color-text-muted); }

.ww-seo-content { margin-top: 24px; }
.ww-seo-content h2 { font-size: 1.1rem; font-weight: 800; margin: 24px 0 10px; display: flex; align-items: center; gap: 8px; }
.ww-seo-content h3 { font-size: 0.95rem; font-weight: 700; margin: 16px 0 8px; }
.ww-seo-content p { font-size: 0.88rem; color: var(--color-text-secondary); line-height: 1.6; margin-bottom: 8px; }
.ww-seo-content ul { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-direction: column; gap: 5px; }
.ww-seo-content li { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--color-text-secondary); }
.ww-seo-content li .icon-sm { color: #16c784; width: 14px; height: 14px; flex-shrink: 0; }

/* Wallet tab wizard link */
.wallet-tab-wizard {
    background: var(--color-accent-light) !important;
    color: var(--color-accent) !important;
    border-color: var(--color-accent) !important;
}
.wallet-tab-wizard:hover { background: var(--color-accent) !important; color: #fff !important; }

@media (max-width: 768px) {
    .ww-wizard { grid-template-columns: 1fr; }
    .ww-best-main { flex-direction: column; }
}

/* Wallet connectivity tags */
.conn-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px;
    background: var(--color-bg);
    border: 1px solid var(--color-border-light);
    border-radius: 4px;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    white-space: nowrap;
    cursor: help;
}

.conn-tag .icon-sm {
    width: 12px;
    height: 12px;
}

/* Wallet User Rating Widget */
.wallet-user-rating {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 14px 18px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.wur-header {
    display: flex;
    align-items: center;
    gap: 8px;
}
.wur-header h3 { font-size: 0.9rem; font-weight: 700; margin: 0; display: flex; align-items: center; gap: 6px; }
.wur-avg { font-family: var(--font-mono); font-weight: 800; font-size: 0.9rem; color: var(--color-accent); }
.wur-count { font-size: 0.75rem; color: var(--color-text-muted); }
.wur-vote { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.wur-label { font-size: 0.78rem; color: var(--color-text-secondary); font-weight: 600; }
.wur-stars { display: flex; gap: 2px; }
.wur-star {
    background: none; border: none; cursor: pointer; padding: 4px;
    color: #ddd; transition: color 0.1s, transform 0.1s;
}
.wur-star:hover { transform: scale(1.2); }
.wur-star.wur-hover, .wur-star.wur-active { color: #f7931a; }
.wur-star.wur-active svg { fill: #f7931a; }
.wur-login { font-size: 0.78rem; color: var(--color-text-muted); }
.wur-login a { color: var(--color-accent); font-weight: 600; }
@media (max-width: 600px) {
    .wallet-user-rating { flex-direction: column; align-items: flex-start; }
    .wur-vote { margin-left: 0; }
}

/* Wallet hero integrated thumbnails */
.wallet-hero-thumbs {
    display: flex;
    gap: 6px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.wht {
    width: 48px;
    height: 48px;
    border-radius: 6px;
    border: 2px solid var(--color-border-light);
    cursor: pointer;
    object-fit: cover;
    transition: border-color 0.15s, transform 0.15s;
    opacity: 0.7;
}

.wht:hover {
    border-color: var(--color-accent);
    transform: scale(1.1);
    opacity: 1;
}

.wht.active {
    border-color: var(--color-accent);
    opacity: 1;
}

/* Accessibility utility */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Dashboard profile improvements */
.profile-danger-zone {
    border: 1px solid #ea394340;
    border-radius: var(--radius-md);
    padding: 16px;
    background: #ea39430a;
}

.profile-danger-zone h3 {
    color: #ea3943;
}

.btn-danger-outline {
    padding: 8px 16px;
    border: 1px solid #ea3943;
    border-radius: var(--radius-sm);
    background: transparent;
    color: #ea3943;
    font-weight: 600;
    font-size: 0.82rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s;
}

.btn-danger-outline:hover {
    background: #ea3943;
    color: #fff;
}

.form-msg {
    display: inline-block;
    margin-left: 10px;
    font-size: 0.82rem;
    font-weight: 600;
}

.form-msg-success { color: #16c784; }
.form-msg-error { color: #ea3943; }

.profile-section {
    margin-bottom: 20px;
}

.profile-section h3 {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.95rem;
    margin-bottom: 10px;
}

/* Altseason period indicators */
.altseason-periods {
    display: flex;
    gap: 8px;
    margin-top: 6px;
    justify-content: center;
}

.as-period {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: var(--color-bg);
    border-radius: 4px;
    font-size: 0.7rem;
}

.as-period span {
    color: var(--color-text-muted);
    font-weight: 500;
}

.as-period strong {
    font-family: var(--font-mono);
    font-size: 0.75rem;
}

/* ========== Trends Filters v2 ========== */
.trends-filters-v2 {
    margin-bottom: 16px;
}

.trends-main-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.trends-type-tabs {
    display: flex;
    gap: 4px;
    background: var(--color-bg);
    border-radius: 10px;
    padding: 3px;
    border: 1px solid var(--color-border);
}

.trends-type-tab {
    padding: 8px 18px;
    border: none;
    border-radius: 8px;
    background: transparent;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--color-text-secondary);
    transition: all 0.15s;
}

.trends-type-tab:hover {
    background: var(--color-surface);
}

.trends-tab-green {
    background: #16c784 !important;
    color: #fff !important;
}

.trends-tab-red {
    background: #ea3943 !important;
    color: #fff !important;
}

.trends-tab-orange {
    background: #f7931a !important;
    color: #fff !important;
}

.trends-tf-group {
    display: flex;
    gap: 3px;
    background: var(--color-bg);
    border-radius: 8px;
    padding: 3px;
    border: 1px solid var(--color-border);
}

.trends-tf-pill {
    padding: 6px 14px;
    border: none;
    border-radius: 6px;
    background: transparent;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--color-text-secondary);
    transition: all 0.15s;
}

.trends-tf-pill:hover {
    background: var(--color-surface);
}

.trends-tf-pill.active {
    background: var(--color-accent);
    color: #fff;
}

.trends-advanced-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    padding: 10px 14px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.trends-adv-filter {
    display: flex;
    align-items: center;
    gap: 6px;
}

.trends-adv-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
}

.trends-adv-pills {
    display: flex;
    gap: 2px;
}

.trends-adv-pill {
    padding: 3px 10px;
    border: 1px solid var(--color-border-light);
    border-radius: 4px;
    background: transparent;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--color-text-secondary);
    transition: all 0.12s;
}

.trends-adv-pill:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.trends-adv-pill.active {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
}

@media (max-width: 768px) {
    .trends-main-row {
        flex-direction: column;
        align-items: stretch;
    }
    .trends-type-tabs {
        justify-content: center;
    }
    .trends-tf-group {
        justify-content: center;
    }
    .trends-advanced-row {
        flex-direction: column;
        gap: 8px;
    }
    .trends-type-tab {
        padding: 7px 12px;
        font-size: 0.78rem;
    }
}

/* ============================================
   Crypto Scanner Page
   ============================================ */

.scanner-hero {
    text-align: center;
    padding: 32px 20px 24px;
}
.scanner-hero h1 {
    font-size: 1.8rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 10px;
}
.scanner-hero h1 .icon {
    color: var(--color-accent);
}
.scanner-hero p {
    color: var(--color-text-secondary);
    max-width: 700px;
    margin: 0 auto;
    font-size: 0.95rem;
    line-height: 1.6;
}

.scanner-strategies {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 0 auto 24px;
    max-width: var(--max-width);
    padding: 0 20px;
}
.scanner-strategy-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--color-surface);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
    font-family: var(--font-sans);
    font-size: 0.88rem;
    position: relative;
    overflow: hidden;
}
.scanner-strategy-card:hover {
    border-color: var(--strat-color, var(--color-accent));
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}
.scanner-strategy-card--active {
    border-color: var(--strat-color, var(--color-accent));
    background: color-mix(in srgb, var(--strat-color, var(--color-accent)) 6%, var(--color-surface));
    box-shadow: 0 2px 8px color-mix(in srgb, var(--strat-color, var(--color-accent)) 20%, transparent);
}
.scanner-strategy-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--strat-color, var(--color-accent)) 12%, transparent);
    color: var(--strat-color, var(--color-accent));
}
.scanner-strategy-icon .icon {
    width: 20px;
    height: 20px;
}
.scanner-strategy-body {
    flex: 1;
    min-width: 0;
}
.scanner-strategy-name {
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--color-text);
    margin-bottom: 2px;
}
.scanner-strategy-desc {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.scanner-strategy-count {
    flex-shrink: 0;
    background: var(--strat-color, var(--color-accent));
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 20px;
    min-width: 28px;
    text-align: center;
}

.scanner-active-info {
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: var(--max-width);
    margin: 0 auto 20px;
    padding: 16px 20px;
    background: var(--color-surface);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
}
.scanner-active-icon {
    flex-shrink: 0;
}
.scanner-active-icon .icon {
    width: 32px;
    height: 32px;
}
.scanner-active-info h2 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 4px;
}
.scanner-active-info p {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
}
.scanner-active-total {
    flex-shrink: 0;
    text-align: center;
    margin-left: auto;
    padding-left: 16px;
    border-left: 1px solid var(--color-border);
}
.scanner-total-number {
    display: block;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--color-accent);
}
.scanner-total-label {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.scanner-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--color-text-muted);
}
.scanner-empty .icon {
    width: 48px;
    height: 48px;
    margin-bottom: 16px;
}
.scanner-empty h3 {
    margin-bottom: 8px;
    color: var(--color-text-secondary);
}
.scanner-empty p {
    max-width: 500px;
    margin: 0 auto;
    font-size: 0.9rem;
    line-height: 1.6;
}

.scanner-results {
    max-width: var(--max-width);
    margin: 0 auto 24px;
    padding: 0 20px;
}
.scanner-results .data-table {
    width: 100%;
}
.scanner-results .clickable-row {
    cursor: pointer;
    transition: background 0.15s;
}
.scanner-results .clickable-row:hover {
    background: var(--color-surface-alt);
}
.scanner-results .coin-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}
.scanner-results .coin-cell img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex-shrink: 0;
}
.scanner-results .coin-name {
    font-weight: 600;
    font-size: 0.88rem;
    display: block;
}
.scanner-results .coin-symbol {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
}
.scanner-results .rank-cell {
    color: var(--color-text-muted);
    font-size: 0.82rem;
}
.scanner-results .sparkline-cell {
    width: 100px;
}
.scanner-results .sparkline-cell svg {
    width: 100px;
    height: 32px;
}

.scanner-vol-ratio {
    font-size: 0.82rem;
    font-weight: 500;
    font-family: var(--font-mono);
}

.scanner-signal-stars {
    display: inline-flex;
    gap: 1px;
}
.scanner-star {
    color: var(--color-border);
    display: inline-flex;
}
.scanner-star .icon {
    width: 14px;
    height: 14px;
}
.scanner-star--filled {
    color: #f7931a;
}
.scanner-star--gem {
    color: #ec4899;
}

.scanner-signal-bar {
    display: inline-flex;
    align-items: center;
    width: 70px;
    height: 18px;
    background: var(--color-surface-alt);
    border-radius: 9px;
    overflow: hidden;
    position: relative;
}
.scanner-signal-bar-fill {
    height: 100%;
    border-radius: 9px;
    transition: width 0.3s ease;
}
.scanner-signal-bar-text {
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--color-text);
    line-height: 18px;
}

.scanner-disclaimer {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    max-width: var(--max-width);
    margin: 24px auto 40px;
    padding: 16px 20px;
    background: var(--color-negative-bg);
    border: 1px solid var(--color-negative);
    border-radius: var(--radius-md);
    font-size: 0.82rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
}
.scanner-disclaimer > .icon {
    flex-shrink: 0;
    color: var(--color-negative);
    width: 20px;
    height: 20px;
    margin-top: 2px;
}
.scanner-disclaimer strong {
    color: var(--color-negative);
}

.scanner-seo {
    max-width: var(--max-width);
    margin: 40px auto 0;
    padding: 0 20px;
}
.scanner-seo h2 {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 12px;
    margin-top: 32px;
}
.scanner-seo h2:first-child {
    margin-top: 0;
}
.scanner-seo > p {
    color: var(--color-text-secondary);
    font-size: 0.92rem;
    line-height: 1.7;
    margin-bottom: 20px;
}
.scanner-seo-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}
.scanner-seo-item {
    padding: 16px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}
.scanner-seo-item h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--color-text);
}
.scanner-seo-item h3 .icon {
    width: 18px;
    height: 18px;
    color: var(--color-accent);
}
.scanner-seo-item p {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
}

.scanner-faq {
    margin-bottom: 24px;
}
.scanner-faq-item {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    margin-bottom: 8px;
    background: var(--color-surface);
    overflow: hidden;
}
.scanner-faq-item summary {
    padding: 14px 16px;
    font-weight: 600;
    font-size: 0.92rem;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.scanner-faq-item summary::-webkit-details-marker {
    display: none;
}
.scanner-faq-item summary::after {
    content: "+";
    font-size: 1.2rem;
    font-weight: 300;
    color: var(--color-text-muted);
    transition: transform 0.2s;
}
.scanner-faq-item[open] summary::after {
    content: "-";
}
.scanner-faq-item p {
    padding: 0 16px 14px;
    font-size: 0.88rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
}

@media (max-width: 1024px) {
    .scanner-strategies {
        grid-template-columns: repeat(2, 1fr);
    }
    .scanner-seo-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .scanner-hero h1 {
        font-size: 1.4rem;
    }
    .scanner-strategies {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .scanner-strategy-desc {
        -webkit-line-clamp: 1;
    }
    .scanner-active-info {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }
    .scanner-active-total {
        margin-left: 0;
        padding-left: 0;
        border-left: none;
        padding-top: 10px;
        border-top: 1px solid var(--color-border);
        width: 100%;
    }
    .scanner-seo-grid {
        grid-template-columns: 1fr;
    }
    .scanner-disclaimer {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .scanner-results .hide-mobile {
        display: none;
    }
    .scanner-results .hide-tablet {
        display: none;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .scanner-results .hide-tablet {
        display: none;
    }
}

/* ========== Buy CTA Buttons ========== */
.buy-buttons-section {
    margin-bottom: 16px;
}

.buy-cta-box {
    background: linear-gradient(135deg, #f7931a08, #16c78408);
    border: 2px solid var(--color-accent);
    border-radius: var(--radius-md);
    padding: 18px;
}

.buy-cta-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.buy-cta-text h3 {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.buy-cta-text p {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    margin: 0;
}

.buy-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--color-accent);
    color: #fff;
    border-radius: var(--radius-md);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
    transition: background 0.15s, transform 0.1s;
    white-space: nowrap;
}

.buy-cta-btn:hover {
    background: #e8850a;
    transform: translateY(-1px);
    text-decoration: none;
    color: #fff;
}

.buy-cta-btn img {
    width: 24px;
    height: 24px;
    border-radius: 6px;
}

.buy-cta-others {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--color-border-light);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.buy-cta-others-label {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    font-weight: 500;
}

.buy-cta-alt {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 20px;
    text-decoration: none;
    color: var(--color-text);
    font-size: 0.78rem;
    font-weight: 600;
    transition: border-color 0.15s;
}

.buy-cta-alt:hover {
    border-color: var(--color-accent);
    text-decoration: none;
}

.buy-cta-alt img {
    width: 20px;
    height: 20px;
    border-radius: 50%;
}

@media (max-width: 600px) {
    .buy-cta-main {
        flex-direction: column;
        align-items: flex-start;
    }
    .buy-cta-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================
   Gastar Criptomonedas - Crypto Cards Page
   ============================================ */

.cards-page {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 20px 16px 60px;
}

/* Hero */
.cards-hero {
    text-align: center;
    padding: 40px 20px 32px;
    margin-bottom: 32px;
    background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-accent-light) 100%);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
}

.cards-hero h1 {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--color-text);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.cards-hero-subtitle {
    font-size: 1.05rem;
    color: var(--color-text-secondary);
    max-width: 720px;
    margin: 0 auto;
    line-height: 1.7;
}

/* Sections */
.cards-section {
    margin-bottom: 40px;
}

.cards-section h2 {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.cards-section-desc {
    font-size: 0.95rem;
    color: var(--color-text-secondary);
    margin-bottom: 20px;
    line-height: 1.6;
}

/* Card Grid */
.crypto-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

@media (max-width: 1024px) {
    .crypto-card-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .crypto-card-grid {
        grid-template-columns: 1fr;
    }
}

/* Card Item */
.crypto-card-item {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
}

.crypto-card-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.crypto-card-img-wrap {
    background: var(--color-surface-alt);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 160px;
    overflow: hidden;
    border-bottom: 1px solid var(--color-border-light);
}

.crypto-card-img {
    max-width: 85%;
    max-height: 130px;
    object-fit: contain;
}

.crypto-card-img-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    width: 100%;
    height: 100%;
}

.crypto-card-body {
    padding: 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.crypto-card-header {
    margin-bottom: 10px;
}

.crypto-card-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 2px;
}

.crypto-card-company {
    font-size: 0.82rem;
    color: var(--color-text-muted);
    font-weight: 500;
}

/* Cashback Badge */
.card-cashback-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--color-positive-bg);
    color: var(--color-positive);
    font-weight: 700;
    font-size: 0.88rem;
    padding: 5px 12px;
    border-radius: 20px;
    margin-bottom: 10px;
}

.card-cashback-sm {
    font-size: 0.8rem;
    padding: 3px 10px;
}

.crypto-card-desc {
    font-size: 0.88rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin-bottom: 10px;
}

/* Features List */
.card-features-list {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
}

.card-features-list li {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.84rem;
    color: var(--color-text);
    padding: 3px 0;
}

.card-features-list li .icon {
    color: var(--color-positive);
    flex-shrink: 0;
}

/* Meta Info */
.crypto-card-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
    padding: 10px 0;
    border-top: 1px solid var(--color-border-light);
}

.crypto-card-meta-item {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 0.82rem;
    color: var(--color-text-secondary);
}

.crypto-card-meta-item .icon {
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--color-text-muted);
}

.crypto-card-meta-item strong {
    color: var(--color-text);
}

/* Footer with stars + CTA */
.crypto-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--color-border-light);
}

.card-stars {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.card-stars .star-full {
    color: #f5b100;
}

.card-stars .star-half {
    color: #f5b100;
    opacity: 0.5;
}

.card-stars .star-empty {
    color: var(--color-border);
}

.card-stars .star-number {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--color-text);
    margin-left: 4px;
}

/* CTA Button */
.card-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    background: var(--color-positive);
    color: #fff;
    font-weight: 700;
    font-size: 0.88rem;
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: background 0.2s, transform 0.1s;
    white-space: nowrap;
}

.card-cta-btn:hover {
    background: #12a96d;
    transform: scale(1.03);
    text-decoration: none;
    color: #fff;
}

.card-cta-sm {
    padding: 6px 12px;
    font-size: 0.82rem;
}

.crypto-card-ref-code {
    display: block;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    text-align: right;
    margin-top: 6px;
}

/* Comparison Table */
.cards-comparison-section {
    margin-bottom: 40px;
}

.cards-comparison-section h2 {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.cards-comparison-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.cards-comparison-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
    min-width: 650px;
}

.cards-comparison-table thead {
    background: var(--color-surface-alt);
}

.cards-comparison-table th {
    padding: 12px 14px;
    text-align: left;
    font-weight: 600;
    color: var(--color-text-secondary);
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border-bottom: 2px solid var(--color-border);
    white-space: nowrap;
}

.cards-comparison-table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--color-border-light);
    vertical-align: middle;
}

.cards-comparison-table tbody tr:hover {
    background: var(--color-surface-alt);
}

.cards-comparison-table tbody tr:last-child td {
    border-bottom: none;
}

.comparison-company {
    display: block;
    font-size: 0.78rem;
    color: var(--color-text-muted);
    font-weight: 400;
}

.comparison-cryptos {
    max-width: 180px;
    font-size: 0.82rem;
    color: var(--color-text-secondary);
}

/* FAQ Section */
.cards-faq-section {
    margin-bottom: 40px;
}

.cards-faq-section h2 {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.cards-faq-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cards-faq-list .faq-item {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.cards-faq-list .faq-question {
    padding: 14px 16px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-text);
    list-style: none;
    transition: background 0.15s;
}

.cards-faq-list .faq-question::-webkit-details-marker {
    display: none;
}

.cards-faq-list .faq-question:hover {
    background: var(--color-surface-alt);
}

.cards-faq-list .faq-item[open] .faq-question .icon {
    transform: rotate(90deg);
    transition: transform 0.2s;
}

.cards-faq-list .faq-answer {
    padding: 0 16px 16px;
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    line-height: 1.7;
}

/* SEO Content */
.cards-seo-content {
    margin-bottom: 40px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 28px 24px;
}

.cards-seo-content h2 {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 14px;
}

.cards-seo-content h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 20px 0 8px;
}

.cards-seo-content p {
    font-size: 0.92rem;
    color: var(--color-text-secondary);
    line-height: 1.75;
    margin-bottom: 6px;
}

/* Disclaimer */
.cards-disclaimer {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 18px;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    margin-top: 12px;
}

.cards-disclaimer .icon {
    flex-shrink: 0;
    color: var(--color-text-muted);
    margin-top: 2px;
}

.cards-disclaimer p {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    line-height: 1.5;
    margin: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .cards-hero {
        padding: 28px 16px 24px;
    }

    .cards-hero h1 {
        font-size: 1.35rem;
    }

    .cards-hero-subtitle {
        font-size: 0.92rem;
    }

    .crypto-card-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .card-cta-btn {
        justify-content: center;
        width: 100%;
    }

    .cards-seo-content {
        padding: 20px 16px;
    }
}

@media (max-width: 480px) {
    .cards-hero h1 {
        font-size: 1.2rem;
    }

    .crypto-card-img-wrap {
        height: 130px;
    }

    .cards-comparison-section h2,
    .cards-faq-section h2,
    .cards-section h2 {
        font-size: 1.15rem;
    }
}

/* ========== Banner System ========== */
.site-banner {
    text-align: center;
    margin: 16px 0;
}

.banner-link {
    display: inline-block;
    border-radius: 8px;
    overflow: hidden;
    transition: opacity 0.15s;
}

.banner-link:hover {
    opacity: 0.9;
}

.banner-img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.site-banner-wide { display: block; }
.site-banner-mobile { display: none; }

@media (max-width: 768px) {
    .site-banner-wide { display: none; }
    .site-banner-mobile { display: block; }
}

/* Register button for exchanges */
.register-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    background: #16c784;
    color: #fff;
    border-radius: var(--radius-md);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.88rem;
    transition: background 0.15s, transform 0.1s;
}

.register-btn:hover {
    background: #12a86d;
    transform: translateY(-1px);
    text-decoration: none;
    color: #fff;
}

/* Buy reward tooltip */
.buy-cta-btn-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.buy-reward-tooltip {
    position: relative;
    cursor: help;
}

.buy-reward-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    background: #16c784;
    color: #fff;
    border-radius: 12px;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}

.buy-reward-popup {
    display: none;
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    width: 280px;
    background: #1a1a2e;
    color: #fff;
    padding: 14px;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
    z-index: 200;
    font-size: 0.78rem;
    line-height: 1.5;
}

.buy-reward-popup::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #1a1a2e;
}

.buy-reward-popup strong {
    display: block;
    margin-bottom: 8px;
    color: #16c784;
    font-size: 0.82rem;
}

.buy-reward-popup ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.buy-reward-popup li {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    font-size: 0.72rem;
    color: #ccc;
}

.buy-reward-popup li .icon-sm {
    color: #16c784;
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    margin-top: 2px;
}

.buy-reward-tooltip:hover .buy-reward-popup {
    display: block;
}

@media (max-width: 600px) {
    .buy-reward-popup {
        width: 240px;
        left: auto;
        right: 0;
        transform: none;
    }
    .buy-reward-popup::after {
        left: auto;
        right: 20px;
        transform: none;
    }
}

/* ============================================
   Hardware Wallet Technical Specs Table
   ============================================ */

.wallet-hw-specs {
    margin-top: 2rem;
}

.wallet-hw-specs h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 1rem;
}

.wallet-specs-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-surface);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border);
    font-size: 0.9rem;
}

.wallet-specs-table tbody tr {
    border-bottom: 1px solid var(--color-border-light);
    transition: background 0.15s;
}

.wallet-specs-table tbody tr:last-child {
    border-bottom: none;
}

.wallet-specs-table tbody tr:hover {
    background: var(--color-surface-alt);
}

.wallet-specs-table tbody tr:nth-child(even) {
    background: var(--color-surface-alt);
}

.wallet-specs-table tbody tr:nth-child(even):hover {
    background: var(--color-border-light);
}

.wst-label {
    padding: 10px 16px;
    font-weight: 600;
    color: var(--color-text-secondary);
    white-space: nowrap;
    width: 36%;
    display: flex;
    align-items: center;
    gap: 7px;
    vertical-align: middle;
}

.wst-label .icon-sm {
    color: var(--color-accent);
    flex-shrink: 0;
    opacity: 0.85;
}

.wst-value {
    padding: 10px 16px;
    color: var(--color-text);
    vertical-align: middle;
    line-height: 1.5;
}

/* Affiliate / Buy button */
.btn-wallet-buy {
    background: var(--color-accent) !important;
    color: #fff !important;
    font-weight: 700;
}

.btn-wallet-buy:hover {
    background: #e07e00 !important;
    color: #fff !important;
}

.btn-wallet-secondary {
    background: transparent;
    border: 1.5px solid var(--color-border);
    color: var(--color-text-secondary) !important;
}

.btn-wallet-secondary:hover {
    border-color: var(--color-accent);
    color: var(--color-accent) !important;
    background: var(--color-accent-light);
}

@media (max-width: 640px) {
    .wst-label {
        width: 42%;
        padding: 9px 12px;
        font-size: 0.82rem;
    }
    .wst-value {
        padding: 9px 12px;
        font-size: 0.85rem;
    }
}

/* Admin gallery actions */
.admin-gallery-actions {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 2px;
    padding: 3px;
    background: rgba(0,0,0,0.7);
    border-radius: 0 0 6px 6px;
    opacity: 0;
    transition: opacity 0.15s;
}

.admin-gallery-item { position: relative; }
.admin-gallery-item:hover .admin-gallery-actions { opacity: 1; }

.admin-gallery-actions button {
    background: none;
    border: none;
    color: #ccc;
    cursor: pointer;
    padding: 2px 4px;
    display: flex;
    align-items: center;
}

.admin-gallery-actions button:hover { color: #fff; }
.admin-gallery-actions button:disabled { opacity: 0.3; cursor: default; }

.admin-gallery-star.active { color: #f7931a !important; }
.admin-gallery-star.active svg { fill: #f7931a; }

.gallery-featured {
    border: 2px solid #f7931a !important;
    box-shadow: 0 0 8px rgba(247,147,26,0.3);
}

/* Software wallet download buttons */
.sw-download-btns {
    display: flex;
    gap: 6px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.sw-dl-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.15s;
    color: #fff;
}

.sw-dl-btn:hover { opacity: 0.85; text-decoration: none; color: #fff; transform: translateY(-1px); }
.sw-dl-ios { background: #333; }
.sw-dl-android { background: #3ddc84; color: #000 !important; }
.sw-dl-chrome { background: #4285f4; }
.sw-dl-desktop { background: #6c5ce7; }

/* Software features grid */
.sw-features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin: 12px 0;
}

.sw-feature-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 8px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    text-align: center;
    font-size: 0.78rem;
}

.sw-feature-card span { color: var(--color-text-secondary); font-weight: 500; }
.sw-feature-yes strong { color: #16c784; }
.sw-feature-no strong { color: var(--color-text-muted); }

/* HW wallet compatibility */
.sw-hw-compat {
    margin: 12px 0;
    padding: 12px 16px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.sw-hw-compat h3 {
    font-size: 0.88rem;
    font-weight: 700;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.sw-hw-badges { display: flex; gap: 6px; flex-wrap: wrap; }

.sw-hw-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    background: var(--color-bg);
    border: 1px solid var(--color-border-light);
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-secondary);
}

/* Platforms section */
.sw-platforms {
    margin: 12px 0;
}

.sw-platforms h3 {
    font-size: 0.88rem;
    font-weight: 700;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.sw-platform-badges { display: flex; gap: 6px; flex-wrap: wrap; }

.sw-platform-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 600;
}

@media (max-width: 600px) {
    .sw-features-grid { grid-template-columns: repeat(2, 1fr); }
    .sw-download-btns { flex-direction: column; }
    .sw-dl-btn { justify-content: center; }
}