/* ===============================================================
   CINO CAPITAL — LIVE MARKETS (Clean Final Version)
   =============================================================== */

/* ---------- COLOR SYSTEM + GRID ---------- */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root {
    --bg: #0a0e1a;
    --panel1: #0f1420;
    --panel2: #141a28;
    --text: #ffffff;
    --text-muted: #94a3b8;
    --border: rgba(255, 255, 255, 0.08);

    /* brand positives/negatives */
    --good: #16c784;
    --bad: #ea3943;

    /* aliases used by JS */
    --pos: var(--good);
    --neg: var(--bad);

    /* Grid columns */
    --col-asset: minmax(240px, 1.8fr);
    --col-price: minmax(140px, .9fr);
    --col-cap: minmax(160px, 1fr);
    --col-1h: 100px;
    --col-24h: 100px;
    --col-7d: 100px;
}

/* ---------- WS DOT ---------- */
.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    vertical-align: middle;
}

.dot-green {
    background: var(--pos);
}

.dot-red {
    background: var(--neg);
}

/* ---------- PERCENT CELLS ---------- */
.pct1h .pct1hv,
.pct24 .pct24v,
.pct7d .pct7dv {
    font-variant-numeric: tabular-nums;
    color: var(--muted);
    /* default; JS will override inline */
}


/* ---------- BASE ---------- */
* {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    margin: 0;
}

body {
    background: linear-gradient(180deg, var(--bg) 0%, var(--panel1) 100%);
    color: var(--text);
    font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Prevent image dragging only (allow text selection) */
img {
    user-select: none;
    -webkit-user-drag: none;
}

/* ---------- BRAND BAR ---------- */
.brandbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-bottom: 1px solid var(--border);
    background: rgba(10, 14, 26, 0.85);
    backdrop-filter: blur(12px);
    position: sticky;
    top: 0;
    z-index: 10;
}

.brand {
    color: var(--text);
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.brand:hover {
    opacity: 0.85;
}

.pill {
    color: var(--text);
    text-decoration: none;
    font-size: 12px;
    padding: 6px 10px;
    border: 1px solid var(--ring);
    border-radius: 999px;
    opacity: .8;
}

/* ---------- PAGE LAYOUT ---------- */
.wrap {
    max-width: 1100px;
    margin: 26px auto 80px;
    padding: 0 18px;
}

.page-title {
    font-size: 36px;
    font-weight: 800;
    letter-spacing: .5px;
    margin: 4px 0 6px;
}

/* ---------- STATUS ROW ---------- */
.live-status {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--muted);
    font-weight: 600;
    margin-bottom: 14px;
}

.live-status .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #6c7385;
}

.live-status .dot.green {
    background: var(--good);
}

.live-status .dot.red {
    background: var(--bad);
}

.live-status .sep {
    opacity: .6;
}

/* ---------- HEADER ---------- */
.table-head,
.live-head {
    display: grid;
    align-items: center;
    grid-template-columns:
        var(--col-asset) var(--col-price) var(--col-cap) var(--col-1h) var(--col-24h) var(--col-7d);
    column-gap: 16px;
    padding: 10px 10px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-bottom: 1px solid var(--ring);
}

/* ---------- ROWS ---------- */
#rows>.row,
#tokens>.row {
    display: grid;
    align-items: center;
    grid-template-columns:
        var(--col-asset) var(--col-price) var(--col-cap) var(--col-1h) var(--col-24h) var(--col-7d);
    column-gap: 16px;
    padding: 14px 10px;
    border-bottom: 1px solid var(--ring);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .01) 100%);
    transition: background .2s ease;
}

#rows>.row:hover,
#tokens>.row:hover {
    background: rgba(255, 255, 255, .02);
}

/* ---------- ASSET CELL ---------- */
.asset {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #1b2747;
    object-fit: contain;
    overflow: hidden;
    display: grid;
    place-items: center;
}

.meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.name {
    font-weight: 700;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sym {
    font-size: 12px;
    color: var(--muted);
    letter-spacing: .04em;
}

/* ---------- NUMERIC CELLS ---------- */
.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

.price {
    font-size: 15px;
}

.cap {
    color: var(--muted);
}

/* ---------- PERCENTAGE CHIPS ---------- */
.chip {
    font-size: 12px;
    font-weight: 700;
    min-width: 82px;
    display: inline-block;
}

.chip.g {
    color: var(--good);
}

.chip.r {
    color: var(--bad);
}

.chip:not(.g):not(.r) {
    color: var(--muted);
}

/* ---------- SNAPSHOT BANNER ---------- */
.banner {
    margin: 12px 10px;
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--panel2);
    border: 1px solid var(--ring);
    color: var(--muted);
    font-size: 13px;
}

/* ---------- SEARCH BOX ---------- */
.search-container {
    margin: 16px 0;
}

.search-input {
    width: 100%;
    max-width: 400px;
    padding: 12px 16px;
    font-size: 15px;
    font-family: inherit;
    color: var(--text);
    background: var(--panel1);
    border: 1px solid var(--ring);
    border-radius: 12px;
    outline: none;
    transition: all 0.2s ease;
}

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

.search-input:focus {
    border-color: rgba(255, 255, 255, 0.15);
    background: var(--panel2);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.03);
}

/* ---------- MOBILE RESPONSIVE ---------- */
@media (max-width:760px) {

    .table-head,
    .live-head {
        display: none;
    }

    #rows>.row,
    #tokens>.row {
        grid-template-columns:
            1.2fr
            /* Asset */
            minmax(120px, .9fr)
            /* Price */
            0px 0px
            /* hide Cap & 1h */
            minmax(100px, .8fr)
            /* 24h */
            0px;
        /* hide 7d */
        row-gap: 8px;
        padding: 12px 10px;
        border: 1px solid var(--ring);
        border-radius: 12px;
        margin: 8px 0;
    }

    /* hide: Market Cap (3), 1h (4), 7d (6) */
    #rows>.row> :nth-child(3),
    #rows>.row> :nth-child(4),
    #rows>.row> :nth-child(6),
    #tokens>.row> :nth-child(3),
    #tokens>.row> :nth-child(4),
    #tokens>.row> :nth-child(6) {
        display: none;
    }

    /* Left align numbers for readability */
    #rows>.row> :nth-child(n+2),
    #tokens>.row> :nth-child(n+2) {
        justify-self: start;
        text-align: left;
    }
}

/* ---------- LOADING SKELETONS ---------- */
.skeleton-row {
    display: grid;
    grid-template-columns: var(--col-asset) var(--col-price) var(--col-cap) var(--col-1h) var(--col-24h) var(--col-7d);
    gap: 22px;
    padding: 18px 14px;
    margin-bottom: 8px;
    background: var(--panel1);
    border-radius: 12px;
    border: 1px solid var(--ring);
}

.skeleton-item {
    height: 20px;
    background: linear-gradient(90deg, var(--panel2) 25%, rgba(255, 255, 255, 0.05) 50%, var(--panel2) 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
    border-radius: 6px;
}

.skeleton-asset {
    display: flex;
    align-items: center;
    gap: 12px;
}

.skeleton-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(90deg, var(--panel2) 25%, rgba(255, 255, 255, 0.05) 50%, var(--panel2) 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
}

.skeleton-text {
    flex: 1;
}

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

/* Hide skeletons when data loads */
.loaded .skeleton-row {
    display: none;
}

/* =============================================================== */