/* ══════════════════════════════════════
   CSS VARIABLES
══════════════════════════════════════ */
:root {
    --bg:          #080A0F;
    --surface:     #0F1420;
    --surf-el:     #161D2C;
    --primary:     #3CFFA0;
    --primary-dim: rgba(60, 255, 160, 0.08);
    --accent:      #FF5C3A;
    --text:        #DDE6F0;
    --muted:       #7A8899;
    --border:      rgba(255, 255, 255, 0.045);
    --border-hi:   rgba(60, 255, 160, 0.18);
    --fd: 'Unbounded', sans-serif;
    --fb: 'Montserrat', sans-serif;
}

/* ══════════════════════════════════════
   RESET
══════════════════════════════════════ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html { scroll-behavior: smooth; }


body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--fb);
    font-weight: 300;
    padding-bottom: 60px;
    overflow-x: hidden;
    transition: background .7s, color .6s;
    display: flex;
}

/* Noise texture */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
    background-size: 200px 200px;
    pointer-events: none;
    z-index: 0;
}

body::after {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23g)' opacity='0.03'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 9000;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* ══════════════════════════════════════
   LAYOUT CONTAINERS
══════════════════════════════════════ */
.pw {
    max-width: 1150px;
    margin: 0 auto;
    padding: 0 16px;
}

/* ══════════════════════════════════════
   SHARED UTILITIES
══════════════════════════════════════ */
.loader-wrap {
    display: flex;
    justify-content: center;
    padding: 48px;
    gap: 6px;
}
.loader-wrap span {
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--primary);
    animation: ld .9s ease-in-out infinite;
}
.loader-wrap span:nth-child(2) { animation-delay: .15s; }
.loader-wrap span:nth-child(3) { animation-delay: .30s; }

@keyframes ld {
    0%, 80%, 100% { transform: scale(.4); opacity: .3; }
    40%           { transform: scale(1);  opacity: 1;  }
}

.empty-state {
    text-align: center;
    padding: 64px 16px;
    color: var(--muted);
    font-family: 'Courier New', monospace;
    font-size: .7rem;
    letter-spacing: .08em;
    line-height: 1.8;
}

/* Page header pattern (new-tracks, afisha, etc.) */
.page-top {
    padding-top: 78px;
    padding-bottom: 20px;
    display: flex;
    align-items: baseline;
    gap: 14px;
    flex-wrap: wrap;
}
.page-eyebrow {
    font-family: var(--fd);
    font-size: .52rem; font-weight: 700;
    letter-spacing: .18em; text-transform: uppercase;
    color: var(--primary);
}
.page-title {
    font-family: var(--fd);
    font-size: clamp(1.1rem, 3vw, 1.6rem);
    font-weight: 900; letter-spacing: -.01em;
    color: var(--text);
}
.page-line {
    flex: 1; height: 1px;
    background: var(--border); min-width: 20px;
}
.page-count {
    font-family: 'Courier New', monospace;
    font-size: .58rem; color: var(--muted); letter-spacing: .06em;
}