:root {
    --bg-grad-start: #6029b7;
    --bg-grad-end:   #7a00b8;
    --card:          #20073c;
    --card-hover:    #2d0d52;
    --accent:        #fec800;
    --twitch:        #9146ff;
    --text:          #ffffff;
    --muted:         #b39ddb;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0; padding: 0;
    background: linear-gradient(to right, var(--bg-grad-start), var(--bg-grad-end));
    color: var(--text);
    font-family: 'Segoe UI', system-ui, sans-serif;
    min-height: 100vh;
    overflow-x: hidden;
}

/* ── Header / nawigacja ─────────────────────────────── */
.app-header {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 10px 22px;
    background: rgba(0, 0, 0, .35);
    backdrop-filter: blur(10px);
    position: sticky; top: 0; z-index: 1000;
}

.app-header .logo {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 1px;
    text-decoration: none;
}

.tabs {
    display: flex;
    gap: 6px;
    flex: 1;
    flex-wrap: wrap;
}

.tab {
    padding: 8px 16px;
    border-radius: 20px;
    color: var(--text);
    text-decoration: none;
    font-size: .9rem;
    transition: background .15s, color .15s;
}

.tab:hover {
    background: var(--card-hover);
}

.tab.active {
    background: var(--accent);
    color: var(--card);
    font-weight: 600;
}

.user-slot {
    margin-left: auto;
    flex-shrink: 0;
}

.twitch-login-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 15px;
    border-radius: 20px;
    background: var(--twitch);
    color: #fff;
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s, opacity .15s;
    white-space: nowrap;
}

.twitch-login-btn:hover {
    background: #7c39e8;
}

.twitch-login-btn:active {
    opacity: .8;
}

/* ── Main content ───────────────────────────────────── */
#app-content {
    padding: 18px;
    min-height: calc(100vh - 60px);
}

#app-content.loading {
    opacity: .4;
    pointer-events: none;
    transition: opacity .15s;
}

/* Drobne globalne pomocniki współdzielone przez partials */
.szejk-page { animation: fadeIn .18s ease-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

@media (max-width: 700px) {
    .app-header { flex-wrap: wrap; gap: 8px; padding: 8px 12px; }
    .tabs { order: 3; width: 100%; gap: 4px; }
    .tab { padding: 10px 14px; font-size: .95rem; }

    /* Na małym ekranie chowamy tekst przycisku, zostaje tylko ikona */
    .twitch-login-btn span { display: none; }
    .twitch-login-btn { padding: 8px 11px; }

    #app-content { padding: 10px; }
}