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

/* ---------- COLOR SYSTEM + GRID ---------- */
:root {
    --bg: #0b1220;
    --panel1: #0f1726;
    --panel2: #131c2e;
    --text: #e7eefc;
    --muted: #9db0d0;
    --ring: rgba(255, 255, 255, .06);

    /* brand positives/negatives */
    --good: #22c38e;
    --bad: #ff5d73;

    /* 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: radial-gradient(1100px 600px at 20% -10%, #14223e, transparent 60%), var(--bg);
    color: var(--text);
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* ---------- BRAND BAR ---------- */
.brandbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 22px;
    border-bottom: 1px solid var(--ring);
    background: linear-gradient(180deg, rgba(10, 15, 28, .85), rgba(10, 15, 28, .55));
    backdrop-filter: blur(6px);
    position: sticky;
    top: 0;
    z-index: 10;
}

.brand {
    color: var(--text);
    text-decoration: none;
    font-weight: 800;
    letter-spacing: .2px;
}

.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;
}

/* ---------- 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;
    }
}

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