* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: #f5f5f5;
  color: #222;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 30px;
  background: #ffffff;
  border-bottom: 1px solid #ddd;
}

.logo {
  font-size: 22px;
  font-weight: bold;
}

.layout {
  display: grid;
  grid-template-columns: 20% 55% 25%;
  gap: 14px;
  padding: 16px;
}

.left, .right {
  background: #ffffff;
  padding: 15px;
  border: 1px solid #ddd;
}

.center {
  background: #ffffff;
  padding: 20px;
  border: 1px solid #ddd;
}

.article-list {
  list-style: none;
  padding: 0;
}

.article-list li {
  margin-bottom: 10px;
}

.article-list a {
  text-decoration: none;
  color: #003366;
}

.news img {
  max-width: 100%;
  margin: 15px 0;
}

.right ul {
  list-style: none;
  padding: 0;
}

.qr img {
  width: 120px;
  margin-bottom: 15px;
}

.article {
  max-width: 800px;
  margin: 30px auto;
  background: #ffffff;
  padding: 25px;
  border: 1px solid #ddd;
}
/* ЯЗЫК */
.lang-switch button {
  margin-left: 5px;
  padding: 5px 10px;
  border: 1px solid #ccc;
  background: #fff;
  cursor: pointer;
}

.lang-switch button.active {
  background: #003366;
  color: #fff;
}

/* ======================================================сраблтало установлена
   ICON FIX (CRYPTO)
====================================================== */
.c-icon {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  max-width: 18px;
  max-height: 18px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.c-icon img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  display: block;
}

/* ============================================================================
   UNIFIED ROW (CRYPTO + MARKETS)
====================================================== */
#crypto li {
  display: grid;
  grid-template-columns:
    auto                  /* icon (crypto) */
    minmax(110px, 1.6fr)  /* name уезжают проценты от крипты*/
    minmax(100px, 1fr)     /* price + abs уезжают проценты у крипты*/
    minmax(70px, auto);   /* % */
    align-items: center;
  gap: 1px;
  padding: 4px 0;  /* между строчное*/
  width: 100%;
}

/* === Exchange Traded Fund === */
#markets li {
  display: grid;
  grid-template-columns:
    1px                    /*фиктивная колонка */
    minmax(150px, 1.6fr)  /* name уезжают проценты от крипты*/
    minmax(80px, 1.6fr)     /* price + abs уезжают проценты у крипты*/
    minmax(70px, auto);   /* % */
    align-items: center; 
  gap: 1px;
  padding: 4px 0;
  width: 100%;
}
#markets .m-name,
#markets .m-price-wrap,
#markets .m-pct {
  grid-column: auto;
}

#markets .m-name {
  grid-column: 2;
}

#markets .m-price-wrap {
  grid-column: 3;
}

#markets .m-pct {
  grid-column: 4;
}

/* ======================================================
   NAME + TICKER (SUP)
====================================================== */
.c-name,
.m-name {
  font-size: 12px;
  font-weight: 550;
  line-height: 1.1;
  white-space: nowrap;
}

.c-ticker,
.m-ticker {
  font-size: 0.7em;
  margin-left: 2px;
  color: #888;
}

/* ======================================================
   PRICE + ABS (SUP)
====================================================== */
.c-price-wrap,
.m-price-wrap {
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
}

.c-price,
.m-price {
  font-size: 12px;
  font-weight: 550;
  font-variant-numeric: tabular-nums;
}

.c-diff,
.m-abs {
  font-size: 0.65em;
  margin-left: 1px;
  opacity: 0.75;
  position: relative;
  top: -0.45em;   /* 🔥 стабильная степень */
  vertical-align: super;  
}

/* ======================================================
   % + ARROW
====================================================== */
.c-change,
.m-pct {
  font-size: 11px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  font-variant-numeric: tabular-nums;
}

.arrow {
  font-size: 14px;
  margin-right: 3px;
}

/* ======================================================
   COLORS 
====================================================== */
#crypto li,
#markets li,
.c-price,
.m-price,
.c-diff,
.m-abs,
.c-change,
.m-pct {
  transition: color 0.35s ease;
}

.up    { color: #1fa64b; }
.down  { color: #d64545; }
.flat  { color: #999; }

/* ======================================================
   MOBILE
====================================================== */
@media (max-width: 900px) {
  .layout {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 8px;           /* 🔥 главное */
  }

  .left,
  .center,
  .right {
    padding: 10px;
  }

  .header {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }

  .datetime {
    font-size: 14px;
  }

  img {
    max-width: 100%;
    height: auto;
  }

  #crypto li {
    grid-template-columns:
      auto
      minmax(86px, 1.2fr)
      minmax(78px, 1fr)
      minmax(58px, auto);
  }

  #markets li {
    grid-template-columns:
      auto
      minmax(86px, 1.2fr)
      minmax(78px, 1fr)
      minmax(58px, auto);
  }

  .c-change,
  .m-pct {
    font-size: 9px;
  }
}
/* ======================================================
   MOBILE FIX — NO OVERFLOW, NO SHIFT
====================================================== */
@media (max-width: 520px) {

  #crypto li, {
    grid-template-columns:
      18px                 /* icon / spacer */
      minmax(90px, 1.4fr)  /* name */
      92px                 /* PRICE — ФИКС */
      62px;                /* % — ФИКС */

    column-gap: 6px;
  }

  #markets li {
    grid-template-columns:
      1px                 /* icon / spacer */
      minmax(90px, 1.4fr)  /* name */
      92px                 /* PRICE — ФИКС */
      62px;                /* % — ФИКС */

    column-gap: 6px;
  }  

  /* ETF — пустая иконка */
  #markets li::before {
    content: "";
    width:  1px;
    height: 1px;
  }

  .c-name,
  .m-name {
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .c-price,
  .m-price {
    font-size: 11px;
    text-align: right;
  }

  .c-change,
  .m-pct {
    font-size: 10px;
    text-align: right;
  }

  .m-price,
  .m-pct {
  font-variant-numeric: tabular-nums;
  }

  .m-price,
  .m-pct {
  text-align: right;
  }

}

/* ======================================================
   MOBILE LANDSCAPE FIX (ETF)
====================================================== */
/*@media (max-width: 900px) and (orientation: landscape) {

#markets li {
    grid-template-columns:
      auto
      minmax(100px, 1.4fr)   /* name
      minmax(100px, 1fr)      /* price + abs
      minmax(70px, auto);    /* % 
    column-gap: 6px;
  }

  .m-price-wrap {
    justify-self: flex-start;
  }

  .m-pct {
    justify-self: flex-end;
  }
}
*/