/* ========================================
   ROOT
======================================== */
:root {

  --bg: #fafafa;
  --card: #ffffff;

  --text: #111827;
  --muted: #6b7280;

  --border: rgba(0,0,0,0.05);

  --green: #16a34a;
  --red: #dc2626;

  --blue: #2563eb;
  --purple: #7c3aed;
  --orange: #ea580c;

  --shadow-sm:
    0 1px 2px rgba(0,0,0,0.02);

  --shadow-md:
    0 8px 24px rgba(0,0,0,0.04);

  --shadow-lg:
    0 14px 40px rgba(0,0,0,0.08);

  --radius-sm: 14px;
  --radius-md: 22px;
  --radius-lg: 32px;

  --transition:
    220ms cubic-bezier(0.4, 0, 0.2, 1);
}

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

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Manrope', sans-serif;
  overflow-x: hidden;
}

/* ========================================
   TYPOGRAPHY
======================================== */
h1,
h2,
h3 {
  letter-spacing: -0.04em;
}

h1 {
  font-size: 56px;
  line-height: 1;
  font-weight: 800;
}

h2 {
  font-size: 18px;
  line-height: 1.3;
  font-weight: 600;
}

h3 {
  font-size: 24px;
  line-height: 1.2;
  font-weight: 700;
}

p {
  margin: 0;
}

/* ========================================
   HEADER
======================================== */
.header {

  padding-top: 42px;

  padding-bottom: 18px;
}

.header-content {

  max-width: 1440px;

  margin: 0 auto;

  padding-inline: 40px;

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 28px;
}

/* ========================================
   HEADER TEXT
======================================== */
.header-text {

  display: flex;

  flex-direction: column;

  align-items: flex-start;
}

.header-text h1 {

  color: var(--text);

  margin-bottom: 10px;
}

.subtitle {

  font-size: 18px;

  color: var(--muted);

  font-weight: 500;
}

/* ========================================
   PRODUCT SWITCHER
======================================== */
.product-switcher {

  display: flex;

  align-items: center;

  gap: 12px;

  flex-wrap: wrap;
}

.product-switch {

  height: 44px;

  padding-inline: 22px;

  border-radius: 999px;

  border: 1px solid rgba(0,0,0,0.06);

  background: rgba(255,255,255,0.92);

  color: var(--text);

  font-family: inherit;

  font-size: 14px;

  font-weight: 700;

  cursor: pointer;

  transition:
    transform var(--transition),
    box-shadow var(--transition),
    border-color var(--transition),
    background var(--transition);

  box-shadow:
    var(--shadow-sm),
    0 4px 14px rgba(0,0,0,0.03);

  backdrop-filter: blur(10px);
}

.product-switch:hover {

  transform: translateY(-1px);

  box-shadow:
    0 8px 24px rgba(0,0,0,0.06);
}

.product-switch.active {

  background: #111827;

  color: white;

  border-color: rgba(17,24,39,0.12);
}

/* ========================================
   MAIN
======================================== */
.main-content {

  max-width: 1440px;

  margin: 0 auto;

  padding: 30px 40px 80px;
}

.chart-section {
  margin-bottom: 32px;
}

/* ========================================
   MAIN CARD
======================================== */
.card {

  background: var(--card);

  border-radius: var(--radius-lg);

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

  padding: 42px;

  box-shadow:
    var(--shadow-sm),
    var(--shadow-md);
}

/* ========================================
   PRICE AREA
======================================== */
.price-container {

  display: flex;

  justify-content: space-between;

  align-items: flex-start;

  gap: 40px;

  margin-bottom: 34px;
}

.price-left {

  flex-shrink: 0;
}

.product-title {

  color: #374151;

  margin-bottom: 18px;
}

.price {

  font-size: 84px;

  line-height: 1;

  font-weight: 800;

  letter-spacing: -0.06em;

  color: var(--text);
}

.change {

  margin-top: 12px;

  font-size: 16px;

  font-weight: 700;
}

.change.up {
  color: var(--green);
}

.change.down {
  color: var(--red);
}

/* ========================================
   TOP BAR
======================================== */
.top-bar {

  flex: 1;

  display: flex;

  justify-content: flex-end;
}

.chart-actions {

  display: grid;

  grid-template-columns: repeat(5, 1fr);

  gap: 10px;
}

/* ========================================
   PREMIUM TICKER CARDS
======================================== */
.ticker-card {

  width: 128px;

  min-height: 74px;

  background: rgba(255,255,255,0.92);

  border: 1px solid rgba(0,0,0,0.04);

  border-radius: 20px;

  padding: 14px;

  display: flex;

  align-items: flex-start;

  gap: 10px;

  cursor: pointer;

  transition:
    transform var(--transition),
    box-shadow var(--transition),
    border-color var(--transition),
    background var(--transition);

  box-shadow:
    var(--shadow-sm),
    0 8px 24px rgba(0,0,0,0.03);

  backdrop-filter: blur(10px);
}

.ticker-card:hover {

  transform: translateY(-2px);

  box-shadow:
    0 8px 30px rgba(0,0,0,0.06);
}

.ticker-card.active {

  background: #ffffff;

  border-color: rgba(17,24,39,0.12);

  box-shadow:
    0 12px 30px rgba(0,0,0,0.05);
}

/* ========================================
   TICKER DOTS
======================================== */
.ticker-dot {

  width: 7px;

  height: 7px;

  border-radius: 999px;

  margin-top: 5px;

  flex-shrink: 0;
}

/* ========================================
   TICKER CONTENT
======================================== */
.ticker-content {

  display: flex;

  flex-direction: column;

  gap: 8px;
}

.ticker-name {

  font-size: 11px;

  line-height: 1.3;

  color: var(--muted);

  font-weight: 600;
}

.ticker-value {

  font-size: 17px;

  line-height: 1;

  font-weight: 800;

  letter-spacing: -0.04em;

  color: var(--text);
}

/* ========================================
   CHART
======================================== */
.chart-wrapper {

  position: relative;

  width: 100%;

  min-height: 680px;
}

#currencyChart {

  width: 100% !important;

  height: 680px !important;
}

/* ========================================
   DASHBOARD CARDS
======================================== */
.dashboard-cards {

  margin-top: 32px;

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 24px;
}

/* ========================================
   REPORT CARD
======================================== */
.report-card {

  background: var(--card);

  border-radius: 28px;

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

  padding: 32px;

  display: flex;

  flex-direction: column;

  box-shadow:
    var(--shadow-sm),
    0 8px 24px rgba(0,0,0,0.03);

  transition:
    transform var(--transition),
    box-shadow var(--transition);
}

.report-card:hover {

  transform: translateY(-3px);

  box-shadow:
    var(--shadow-lg);
}

.report-label {

  font-size: 12px;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  color: #9ca3af;

  font-weight: 700;

  margin-bottom: 18px;
}

.report-title {

  margin-bottom: 16px;

  color: var(--text);
}

.report-desc {

  font-size: 15px;

  line-height: 1.7;

  color: var(--muted);

  margin-bottom: 24px;

  flex-grow: 1;
}

.report-button {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: fit-content;

  height: 42px;

  padding-inline: 20px;

  border-radius: 999px;

  background: #111827;

  color: white;

  font-size: 14px;

  font-weight: 700;

  text-decoration: none;

  transition:
    transform var(--transition),
    opacity var(--transition);
}

.report-button:hover {

  transform: translateY(-1px);

  opacity: 0.92;
}

/* ========================================
   FOOTER
======================================== */
.footer {

  margin-top: 80px;

  padding: 48px 32px 32px;

  text-align: center;

  background: var(--bg);

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

.footer p {

  color: #9ca3af;

  font-size: 14px;

  line-height: 1.8;
}

.disclaimer {

  margin-top: 14px;

  color: var(--muted);

  max-width: 1200px;

  margin-inline: auto;
}

/* ========================================
   ACCESSIBILITY
======================================== */
*:focus-visible {

  outline: 2px solid #111827;

  outline-offset: 2px;
}

/* ========================================
   RESPONSIVE
======================================== */
@media (max-width: 1280px) {

  .chart-actions {

    grid-template-columns: repeat(2, 1fr);
  }

  .ticker-card {

    width: 100%;
  }
}

@media (max-width: 1024px) {

  .price-container {

    flex-direction: column;

    gap: 24px;
  }

  .top-bar {

    width: 100%;
  }

  .chart-actions {

    width: 100%;
  }
}

@media (max-width: 768px) {

  .header-content,
  .main-content,
  .footer {

    padding-inline: 20px;
  }

  .header-content {

    flex-direction: column;

    align-items: flex-start;

    gap: 20px;
  }

  .main-content {

    padding-top: 20px;
  }

  h1 {

    font-size: 42px;
  }

  .subtitle {

    font-size: 16px;
  }

  .card {

    padding: 24px;

    border-radius: 24px;
  }

  .price {

    font-size: 60px;
  }

  .product-switcher {

    width: 100%;
  }

  .product-switch {

    flex: 1;
  }

  .top-bar {

    justify-content: stretch;
  }

  .chart-actions {

    grid-template-columns: 1fr;

    width: 100%;
  }

  .ticker-card {

    width: 100%;
  }

  .dashboard-cards {

    grid-template-columns: 1fr;
  }

  #currencyChart {

    height: 480px !important;
  }

  .chart-wrapper {

    min-height: 480px;
  }

  .footer {

    padding-inline: 20px;
  }
}

/* ========================================
   PRINT
======================================== */
@media print {

  .top-bar,
  .product-switcher {

    display: none;
  }

  body {

    background: white;
  }

  .card,
  .report-card {

    box-shadow: none;
  }
}