/* Page-specific styles extracted from mediaserver.html. */

.stack-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 16px;
        }

        .stack-card {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 22px 20px;
            position: relative;
            overflow: hidden;
            display: flex;
            gap: 16px;
            align-items: flex-start;
        }

        .stack-card::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 2px;
        }

        .stack-card.sonarr::before  { background: linear-gradient(90deg, #35c5f4, #1a9dc7); }
        .stack-card.radarr::before  { background: linear-gradient(90deg, #ffc230, #e5a800); }
        .stack-card.lidarr::before  { background: linear-gradient(90deg, #00d4b5, #00a88f); }
        .stack-card.prowlarr::before { background: linear-gradient(90deg, #ff7b00, #e56a00); }
        .stack-card.plex::before    { background: linear-gradient(90deg, #e5a00d, #c88a00); }
        .stack-card.qbit::before    { background: linear-gradient(90deg, var(--purple), var(--cyan)); }

        .stack-logo {
            font-size: 36px;
            flex-shrink: 0;
            width: 48px;
            text-align: center;
        }

        .stack-info { flex: 1; }

        .stack-name {
            font-family: var(--font-head);
            font-size: 13px;
            letter-spacing: 2px;
            color: var(--white);
            text-transform: uppercase;
            margin-bottom: 4px;
        }

        .stack-tagline {
            font-size: 11px;
            color: var(--cyan);
            letter-spacing: 1px;
            margin-bottom: 10px;
        }

        .stack-card.radarr  .stack-tagline { color: #ffc230; }
        .stack-card.lidarr  .stack-tagline { color: #00d4b5; }
        .stack-card.prowlarr .stack-tagline { color: #ff7b00; }
        .stack-card.plex    .stack-tagline { color: #e5a00d; }
        .stack-card.qbit    .stack-tagline { color: var(--purple); }

        .stack-desc {
            font-size: 12px;
            color: var(--text-muted);
            line-height: 1.6;
        }

        .stack-stats {
            display: flex;
            gap: 16px;
            margin-top: 12px;
            flex-wrap: wrap;
        }

        .stack-stat {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        .stack-stat-val {
            font-family: var(--font-head);
            font-size: 16px;
            color: var(--white);
            letter-spacing: 1px;
        }

        .stack-stat-lbl {
            font-size: 9px;
            color: var(--text-muted);
            letter-spacing: 1px;
            text-transform: uppercase;
        }

        .library-totals {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 1px;
            background: var(--border);
            border: 1px solid var(--border);
            border-radius: 8px;
            overflow: hidden;
        }

        .total-block {
            background: var(--bg-card);
            padding: 28px 24px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
            position: relative;
            overflow: hidden;
        }

        .total-block::after {
            content: '';
            position: absolute;
            bottom: 0; left: 0; right: 0;
            height: 2px;
            opacity: 0.4;
        }

        .total-block.tv::after     { background: #35c5f4; }
        .total-block.movies::after { background: #ffc230; }
        .total-block.music::after  { background: #00d4b5; }
        .total-block.total::after  { background: linear-gradient(90deg, var(--purple), var(--cyan)); }

        .total-val {
            font-family: var(--font-head);
            font-size: 36px;
            letter-spacing: 3px;
            line-height: 1;
        }

        .total-block.tv .total-val     { color: #35c5f4; }
        .total-block.movies .total-val { color: #ffc230; }
        .total-block.music .total-val  { color: #00d4b5; }
        .total-block.total .total-val  { color: var(--white); }

        .total-lbl {
            font-family: var(--font-head);
            font-size: 10px;
            letter-spacing: 2px;
            color: var(--text-muted);
            text-transform: uppercase;
            text-align: center;
        }

        .total-sub {
            font-size: 11px;
            color: var(--text-muted);
            margin-top: 2px;
        }

        .how-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 1px;
            background: var(--border);
            border: 1px solid var(--border);
            border-radius: 8px;
            overflow: hidden;
        }

        .how-item {
            background: var(--bg-card);
            padding: 20px 18px;
        }

        .how-step {
            font-family: var(--font-head);
            font-size: 28px;
            color: var(--purple);
            opacity: 0.4;
            line-height: 1;
            margin-bottom: 8px;
        }

        .how-title {
            font-family: var(--font-head);
            font-size: 10px;
            letter-spacing: 2px;
            color: var(--white);
            text-transform: uppercase;
            margin-bottom: 8px;
        }

        .how-desc {
            font-size: 12px;
            color: var(--text-muted);
            line-height: 1.6;
        }