html {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;   /* Safari/macOS */
  -moz-osx-font-smoothing: grayscale;    /* Firefox/macOS */
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1; /* базовые фичи */
  font-optical-sizing: auto;             /* для variable шрифтов */
}


h1 {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 19px;
font-weight: 590;
font-style: Semibold;
leading-trim: NONE;
color: #ffffff;
line-height: 24px;
letter-spacing: -0.45px;

}

/* Fullscreen overlay above the fixed bottom nav */
.start-screen{
  position: fixed;           /* take out of flow, layer above */
  inset: 0;                  /* top:0; right:0; bottom:0; left:0 */
  z-index: 2000;             /* higher than .bottom-nav z-index:10 */
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  /* gap: 12px; */

  height: 100dvh;            /* respect mobile dynamic viewport */
  padding:
    env(safe-area-inset-top)
    env(safe-area-inset-right)
    env(safe-area-inset-bottom)
    env(safe-area-inset-left);

  background: #000;
  color: #fff;
}

/* Logo + текст слева от него */
.start-title{
  margin-right: 12px;
  font-size: 2rem;
  font-weight: 700;
  margin: 0;

  /* цвет под иконку */
  color: #76CAA6;
  /* можно задать другой семейств шрифта, если нужно отличать от h1 */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.start-logo{
  width: 80px;
  height: 80px;
  display: block;
  object-fit: contain;
}


a {
    color: #0f0;
}

.top-nav {
    display: flex;
    gap: 1rem;
    background: #111;
    padding: 0.5rem 1rem;
    flex-wrap: wrap;
}

.top-nav a {
    text-decoration: none;
    padding: 0.25rem 0.5rem;
    transition: color 0.3s ease;
}

.top-nav a:hover {
    color: #0c0;
}

.top-nav .nav-link.active {
    border-bottom: 2px solid #0f0;
    font-weight: bold;
}

/* === Global CSS variables === */
:root {
  /* Base height of the bottom nav without safe-area */
  --nav-base-height: 74px;

  /* Safe area for iOS bottom gesture bar */
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* Total occupied height of the bottom nav (what content must avoid) */
  --nav-height: calc(var(--nav-base-height) + var(--safe-bottom));

   --font-sans: ui-sans-serif, system-ui, -apple-system,
               "SF Pro Text", "SF Pro Display",
               "InterVariable", "Inter", "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --bg-purple: #AF51DE;
  --text-white: #FFF;
  --text-secondary: #6D6D71;
  --custom-green: #32E55E;
  --bg-gray-2: #3A3A3A;
  --custom-white: #FFF;
}

body {
  font-family: var(--font-sans);
  margin: 0;
  /* keep top/right/left safe areas; bottom handled by the nav itself */
  padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
  /* padding-bottom: calc(var(--nav-base-height) + env(safe-area-inset-bottom, 0px)); */
  background-color: #000;
  color: #0f0;
}

/* App root container with Telegram content safe area padding */
.app-root {
  /* padding-top is set dynamically via inline style from use_telegram_top_padding() */
  /* This ensures content doesn't overlap with Telegram's fullscreen UI (close, dropdown, menu) */
  min-height: 100dvh;
}

/* Контейнер больше не «90px из головы», а реальная высота навбара */
.container {
  padding-bottom: var(--nav-height);
}

/* Если где-то нужен экран «за вычетом» навбара (адекватно на мобильных):
   используем 100dvh, чтобы не прыгало при показе/скрытии браузерных тулбаров */
.page-fill {
  min-height: calc(100dvh - var(--nav-height));
}


.prices {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));

    gap: 1rem;
    margin-bottom: 1rem;
}

.price-widget {
    border: 1px solid #0f0;
    padding: 0.5rem;
    background: #111;
}

.price {
    transition: color 0.3s ease, background-color 0.3s ease;
}

.price.up {
    color: #0f0;
    animation: flash-up 0.5s ease;
}

.price.down {
    color: #f00;
    animation: flash-down 0.5s ease;
}

@keyframes flash-up {
    from { background-color: rgba(0, 255, 0, 0.2); }
    to { background-color: transparent; }
}

@keyframes flash-down {
    from { background-color: rgba(255, 0, 0, 0.2); }
    to { background-color: transparent; }
}

@media (max-width: 600px) {
    .prices {
        grid-template-columns: 1fr;
    }
}


.error {
    color: #f00;
}


.market-card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.5rem;
    background: #111;
    border-radius: 8px;
}

.market-card.up {
    border: 1px solid #0f0;
}

.market-card.down {
    border: 1px solid #f00;
}

.market-card .header {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
}

.market-card .pair {
    font-weight: bold;
}

.market-card .price {
    margin-left: auto;
}

.market-card .details {
    display: flex;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: #aaa;
}
/* Search input widget */
.search-input {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 10px 12px;
    gap: 8px;
    width: 351px;
    height: 44px;
    background: rgba(56, 56, 56, 0.32);
    border-radius: 12px;
}

.search-input--focus {
    border: 1px solid #FFFFFF;
}

.search-input-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #78797E;
}

.search-input input {
    flex: 1;
    background: transparent;
    border: none;
    color: #FFFFFF;
    font-family: 'SF Pro', sans-serif;
    font-size: 16px;
    line-height: 21px;
    letter-spacing: -0.23px;
}

.search-input input::placeholder {
    color: #78797E;

}


.skeleton {
    height: 2rem;
    background: #222;
    border-radius: 4px;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% { opacity: 0.5; }
    50% { opacity: 1; }
    100% { opacity: 0.5; }
}

@media (max-width: 768px) {
  .top-nav {
    flex-direction: column;
    gap: 0.5rem;
  }

  .prices {
    grid-template-columns: 1fr;
  }
}