/* ==========================================
   DASHBOARD CARDS
========================================== */

.card {

    background: var(--card-bg);

    border: 1px solid var(--border);

    border-radius: var(--radius);

    padding: var(--padding);

    box-shadow: var(--shadow);

    transition: all 0.3s ease;

}

.card:hover {

    transform: translateY(-4px);

}

.card h2 {

    font-size: 0.95rem;

    color: var(--text-muted);

    margin-bottom: 14px;

    font-weight: 600;

    letter-spacing: 0.5px;

    text-transform: uppercase;

}

.card p {

    font-size: 1.7rem;

    font-weight: 700;

    color: var(--text);

}

/* ==========================================
   SPECIAL STATUS COLOURS
========================================== */

.status-buy {

    color: var(--success);

}

.status-sell {

    color: var(--danger);

}

.status-neutral {

    color: var(--warning);

}

/* ==========================================
   HERO CARD
========================================== */

.hero-card {

    text-align: center;

    padding: 32px;

}

.hero-card p {

    font-size: 2.4rem;

    margin: 20px 0;

    font-weight: bold;

}

.hero-card small {

    display: block;

    color: var(--text-muted);

    font-size: .9rem;

}

/* ==========================================
   LIVE CLOCK
========================================== */

.live-clock {

    margin-top: 20px;

}

.live-clock span {

    display: block;

    color: var(--text-muted);

    font-size: .9rem;

}

.live-clock strong {

    display: block;

    margin-top: 8px;

    font-size: 1.6rem;

    color: var(--gold);

}