/* ====== БАЗА ====== */
    body {
        margin: 0;
        background: #111;
        font-family: "Segoe UI", Arial, sans-serif;
        color: #eee;
        overflow: hidden;
        width: 100vw;
        height: 100vh;
    }

    :root {
        --accent: #00e6c3;
        --accent2: #14ffa3;
        --green: #4cff75;
        --red: #ff4d4d;
        --divider: #2a2a2a;
        --side-text: #cccccc;
        --ticker-bg: #0d0d0d;
    }

    .layout {
        display: grid;
        grid-template-columns: 20% 60% 20%;
        grid-template-rows: 45% 47% 8%;
        height: 100%;
        width: 100%;
    }

    .fade-in {
        opacity: 0;
        animation: fadeIn 1.2s ease forwards;
    }
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(25px); }
        to   { opacity: 1; transform: translateY(0); }
    }

	.logo-wrapper img {
        width: 90%; 
        display: block;
        margin: 0 auto 30px;
        opacity:8%;
    }

    .left-sidebar {
        grid-column: 1;
        grid-row: 1 / 3;
        background: #1a1a1a;
        padding: 60px 50px;
        font-size: 36px;
        letter-spacing: 0.5px;
    }

    .left-sidebar h2 {
        color: #bbbbbb;
        font-size: 48px;
        margin-bottom: 40px;
    }

    .market-item {
        margin-bottom: 30px;
        padding-bottom:30px;
        border-bottom:1px solid #2A2A2A;
    }
	.market-item:last-child {
		border-bottom:none;
    }

    .label {
        font-size: 32px;
        color: #999;
    }

    .value {
        font-size: 44px;
        font-weight: bold;
        margin-top: 8px;
    }

    .change {
        margin-top: 6px;
        font-size: 32px;
    }

    .pos { color: var(--green); }
    .neg { color: var(--red); }

    .main-image {
        background-size: cover;
        background-position: center;
        filter: brightness(0.92);
        position: relative;
        box-shadow: inset 0 0 60px rgba(0,0,0,0.4);
    }

    .main-image::after {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(
                    ellipse at center,
                    rgba(0, 230, 195, 0.18),
                    transparent 70%);
        pointer-events: none;
    }

    .right-sidebar {
        grid-column: 3;
        grid-row: 1;
        padding: 50px;
        background: #1b1b1b;
        text-align: right;
    }

    .time {
        font-size: 130px;
        font-weight: 300;
        color: #ffffff;
    }

    .weather {
        margin-top: 20px;
        font-size: 56px;
        color: #ffdd55;
    }

    .weekday {
        margin-top: 20px;
        font-size: 48px;
        color: #cccccc;
        letter-spacing: 2px;
    }

    .main-news {
        grid-column: 2 / 4;
        grid-row: 2;
        padding: 50px 70px;
        background: #141414;
    }

    .main-news h1 {
        font-size: 58px;
        margin-bottom: 25px;
        color: #fff;
        font-weight: 600;
        padding-bottom: 15px;
    }

    .main-news p {
        font-size: 38px;
        color: #ddd;
        line-height: 1.45;
        max-width: 90%;
    }

.footer-ticker {
    grid-row: 3;
    grid-column: 1 / 4;
    background: var(--ticker-bg);
    overflow: hidden;
    display: flex;
    align-items: center;
    height: 100%;
    position: relative;
}

.footer-ticker::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;

    background: linear-gradient(
        to right,
        rgba(0, 230, 195, 0.35) 0%,
        rgba(0, 230, 195, 0.20) 50%,
        rgba(0, 230, 195, 0.12) 100%
    );

    clip-path: polygon(
        0 0,
        100% 0,
        100% 1px,
        0 4px
    );
}

.ticker-label {
    background: var(--ticker-bg);
    color: #fff;
    font-size: 38px;
    padding: 12px 40px 12px 30px;
    font-weight: 500;
    position: relative;
    z-index: 5;
    white-space: nowrap;
}

.ticker-track {
    display: flex;
    white-space: nowrap;
    position: relative;
    z-index: 1;
    margin-left: -20px;
}

.ticker-list {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 60px;
}

.ticker-list li {
    font-size: 40px;
    color: #ddd;
    position: relative;
    padding-right: 80px;
}

.ticker-list li::after {
    content: "•";
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    color: #777;
}
.ticker-list li:last-child::after {
    content: "";
}
/* ============================
   АВТОМАСШТАБИРОВАНИЕ ПО DPI
   ============================ */

/* Устройства с повышенной плотностью (примерно 2× DPI)
   → 4K мониторы, Retina и т.п. */
@media 
  (min-resolution: 180dpi),
  (min-resolution: 2dppx),
  (-webkit-min-device-pixel-ratio: 2) {

    body {
        font-size: 130%;
    }

    .left-sidebar      { font-size: 46px; }
    .left-sidebar h2   { font-size: 60px; }

    .label             { font-size: 40px; }
    .value             { font-size: 56px; }
    .change            { font-size: 40px; }

    .time              { font-size: 170px; }
    .weather           { font-size: 70px; }
    .weekday           { font-size: 60px; }

    .main-news h1      { font-size: 72px; }
    .main-news p       { font-size: 48px; }

    .ticker-label      { font-size: 48px; }
    .ticker-list li    { font-size: 52px; }
}


/* Устройства с очень высокой плотностью 3× DPI (5K, Retina 5K) */
@media 
  (min-resolution: 260dpi),
  (min-resolution: 3dppx),
  (-webkit-min-device-pixel-ratio: 3) {

    body {
        font-size: 155%;
    }

    .left-sidebar      { font-size: 52px; }
    .left-sidebar h2   { font-size: 68px; }

    .label             { font-size: 46px; }
    .value             { font-size: 66px; }
    .change            { font-size: 46px; }

    .time              { font-size: 190px; }
    .weather           { font-size: 80px; }
    .weekday           { font-size: 70px; }

    .main-news h1      { font-size: 82px; }
    .main-news p       { font-size: 54px; }

    .ticker-label      { font-size: 54px; }
    .ticker-list li    { font-size: 60px; }
}