* { box-sizing: border-box; margin: 0; padding: 0; }

/* базовый размер шрифта масштабируется от размеров окна (и ширины, и высоты):
   на мониторе ~14px, на ТВ ~19px; если браузер ТВ съедает часть высоты,
   всё пропорционально ужимается и колонки не обрезаются */
html { font-size: clamp(10px, min(1.05vw, 1.7vh), 26px); }

body {
    font-family: 'Inter', 'Roboto', 'Segoe UI', system-ui, sans-serif;
    background: #0b0e11;
    color: #eaecef;
    height: 100vh;
    overflow: hidden;
    padding: .8rem;
    font-size: 1rem;
}

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr auto;
    gap: .8rem;
    height: 100%;
}

.col-right {
    display: flex;
    flex-direction: column;
    gap: .8rem;
    min-height: 0;
}
.col-right .card { flex: 1; }

.card {
    background: #14181d;
    border: 1px solid #22272e;
    border-radius: .5rem;
    padding: .7rem 1.1rem;
    min-height: 0;
}

.card-cbr { display: flex; flex-direction: column; }

.card-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #848e9c;
    margin-bottom: .45rem;
}
.card-title::before {
    content: '';
    width: .4rem;
    height: .4rem;
    border-radius: 50%;
    background: #f0b90b;
    box-shadow: 0 0 .35rem rgba(240, 185, 11, .8);
}

.card-subtitle {
    font-size: .78rem;
    color: #5e6673;
    margin-bottom: .3rem;
}

table { width: 100%; border-collapse: collapse; }
td { padding: .32rem .25rem; white-space: nowrap; }
tr + tr td { border-top: 1px solid #1c2127; }
tr > td:last-child { font-weight: 600; color: #fff; }
.muted { color: #848e9c; width: 100%; font-weight: 400; }
.num { text-align: right; font-variant-numeric: tabular-nums; }

.green { color: #0ecb81 !important; font-weight: 600; }
.red { color: #f6465d !important; font-weight: 600; }

.chart-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-top: .8rem;
    min-height: 0;
}
#chart { flex: 1; width: 100%; min-height: 0; }
.chart-caption { font-size: .72rem; color: #5e6673; margin-top: .3rem; text-align: center; }

.row-bottom { display: flex; gap: .8rem; min-height: 0; }
.row-bottom .card { flex: 1; }

.card-balance { text-align: center; }
.balance-value {
    font-size: 1.7rem;
    font-weight: 600;
    color: #fff;
    font-variant-numeric: tabular-nums;
    margin-top: .15rem;
}
.balance-cur { font-size: .9rem; color: #f0b90b; font-weight: 600; }
.balance-sub { font-size: .7rem; color: #5e6673; margin-top: .1rem; }
[hidden] { display: none !important; }

.card-time { display: flex; align-items: center; }
.clocks { display: flex; width: 100%; justify-content: space-around; }
.clock { text-align: center; }
.clock-label {
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .16em;
    color: #848e9c;
}
.clock-value {
    font-size: 2.1rem;
    font-weight: 600;
    margin-top: .1rem;
    color: #f0b90b;
    font-variant-numeric: tabular-nums;
}

.status {
    position: fixed;
    right: .9rem;
    bottom: .3rem;
    font-size: .65rem;
    color: #5e6673;
}