/* Полноэкранная страница для ТВ/монитора в офисе — курс на весь экран, без прокрутки.
   Структура по референсу (kotandcode.ru/pagetv), цвета/шрифты — под бренд ASKMONEY. */

:root {
  --tv-bg: #eef2ee;
  --tv-panel: #ffffff;
  --tv-ink: #141a16;
  --tv-muted: #647065;
  --tv-line: #dfe6db;
  --tv-accent: #226d32;
  --tv-lime: #e1ff49;
  --tv-dark: #141a16;
  --tv-green: #2e8a41;
  --tv-danger: #e95a77;
  --tv-shadow: 0 18px 44px rgba(20, 26, 22, 0.12);
}

* { box-sizing: border-box; }

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

body.tv-page {
  min-height: 100vh;
  overflow: hidden;
  font-family: 'Manrope', Arial, Helvetica, sans-serif;
  color: var(--tv-ink);
  background: linear-gradient(135deg, #f6f8f4 0%, #eef3ea 45%, #e9f0e4 100%);
}

.tv {
  width: 100vw;
  height: 100vh;
  padding: clamp(14px, 1.5vw, 30px);
  display: grid;
  grid-template-rows: auto 1fr;
  gap: clamp(12px, 1.1vw, 22px);
}

.tv-status {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: center;
}

.tv-ticker {
  min-height: 52px;
  overflow: hidden;
  border-radius: 12px;
  background: var(--tv-dark);
  color: #fff;
  display: flex;
  align-items: center;
  box-shadow: var(--tv-shadow);
}

.tv-ticker__track {
  display: flex;
  gap: 38px;
  padding-left: 100%;
  white-space: nowrap;
  animation: tv-marquee 46s linear infinite;
  font-family: 'Unbounded', 'Manrope', sans-serif;
  font-size: clamp(20px, 1.5vw, 32px);
  font-weight: 700;
}

.tv-ticker__track span { color: var(--tv-lime); }

@keyframes tv-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

.tv-clock {
  min-width: 200px;
  min-height: 52px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--tv-lime);
  color: var(--tv-dark);
  font-family: 'Unbounded', 'Manrope', sans-serif;
  font-size: clamp(26px, 2vw, 44px);
  font-weight: 700;
  box-shadow: var(--tv-shadow);
}

.tv-panel {
  min-height: 0;
  border-radius: 16px;
  background: var(--tv-panel);
  border: 1px solid var(--tv-line);
  box-shadow: var(--tv-shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.tv-panel--full {
  width: 100%;
}

.tv-panel__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  padding: clamp(12px, 1vw, 20px) clamp(16px, 1.25vw, 24px) 10px;
  border-bottom: 1px solid var(--tv-line);
}

.tv-panel__title {
  margin: 0;
  font-family: 'Unbounded', 'Manrope', sans-serif;
  text-transform: uppercase;
  font-size: clamp(26px, 2vw, 42px);
  font-weight: 700;
}

.tv-panel__updated {
  color: var(--tv-muted);
  font-size: clamp(14px, 0.9vw, 19px);
  font-weight: 700;
  white-space: nowrap;
}

.tv-cash-grid {
  flex: 1;
  min-height: 0;
  padding: 14px 18px 18px;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  gap: 10px;
  overflow: hidden;
}

.tv-rate-card {
  min-height: 0;
  padding: 10px 14px;
  border: 1px solid var(--tv-line);
  border-radius: 10px;
  background: #f8faf6;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  gap: 6px;
}

.tv-rate-card__code {
  min-width: 0;
  font-size: clamp(14px, 1vw, 21px);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tv-rate-card__label {
  color: var(--tv-muted);
  font-size: clamp(10px, 0.7vw, 14px);
  font-weight: 600;
}

.tv-rate-card__value {
  color: var(--tv-accent);
  font-family: 'Unbounded', 'Manrope', sans-serif;
  font-size: clamp(19px, 1.5vw, 32px);
  font-weight: 700;
  white-space: nowrap;
}

@media (max-aspect-ratio: 4/3) {
  body.tv-page { overflow: auto; }
  .tv { height: auto; min-height: 100vh; }
  .tv-cash-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
}