* { font-family: 'Poppins'; margin: 0; box-sizing: border-box; }

:root {
    --outer-spacing: 48px;
}

body { background-color: var(--bg); }

.sitetitle { font-size: 2.5rem; color: var(--text-bg); }
.sitelogo { width: auto; height: 2.5rem; }

.slide { padding: 64px; display: flex; flex-direction: column; row-gap: 40px; position: fixed; top: 0; bottom: 0; left: 0; right: 0; }


@keyframes signage-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}


/* FEED OVERVIEW */
.feed-overview { min-height: 100vh; padding: 64px; display: flex; flex-direction: column; align-items: center; }
.feed-overview__header { text-align: center; margin-bottom: 48px; }
.feed-overview__header h1 { font-size: 32px; font-weight: 600; color: var(--text-bg); margin-bottom: 8px; }
.feed-overview__header p { font-size: 18px; color: var(--text-bg); font-weight: 300; }

.feed-list { width: 100%; max-width: 640px; display: flex; flex-direction: column; row-gap: 12px; }

.feed-card { display: flex; align-items: center; column-gap: 16px; padding: 20px 24px; border-radius: 12px; background-color: var(--bg-alt); color: var(--text-bg-alt); text-decoration: none; transition: background-color .15s ease, color .15s ease, transform .15s ease; }
.feed-card * { transition: color .15s ease; }
.feed-card__icon { width: 48px; height: 48px; border-radius: 10px; background-color: var(--icon-wrap-alt); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.feed-card__icon svg { color: var(--accent); }
.feed-card__body { flex: 1; min-width: 0; }
.feed-card__title { font-size: 18px; font-weight: 600; line-height: 1.3; margin-bottom: 4px; }
.feed-card__url { display: block; font-size: 13px; color: var(--text-bg-alt); font-weight: 300; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed-card__meta { display: inline-block; margin-top: 6px; font-size: 12px; color: var(--accent); font-weight: 500; }
.feed-card__arrow { flex-shrink: 0; color: var(--accent); }

.feed-empty { text-align: center; color: var(--text-bg); }
.feed-empty a { color: var(--accent); text-decoration: underline; }

.feed-card:hover {
    background-color: var(--accent); color: var(--text-accent); transform: scale(1.01);

    .feed-card__icon svg { color: var(--text-accent); }
    .feed-card__url { color: var(--text-accent); }
    .feed-card__arrow { color: var(--text-accent); }
    .feed-card__meta { color: var(--text-accent); }
}


/* Sync placeholder (shown for video slides) */
.signage-sync-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100vw; height: 100vh; background: var(--bg); color: var(--text-bg); }
.signage-sync-icon { margin-bottom: 16px; width: 60px; height: 60px; animation: signage-spin 2s linear infinite; }
.signage-sync-icon svg { width: 100%; height: 100%; }
.signage-sync-placeholder p { font-size: 18px; font-weight: 300; letter-spacing: .5px; color: var(--text-bg); }


/* Slide error */
.signage-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100vw; height: 100vh; background: var(--bg); color: var(--text-bg); }
.signage-empty-icon { margin-bottom: 16px; width: 60px; height: 60px; opacity: .4; }
.signage-empty-icon svg { width: 100%; height: 100%; fill: var(--text-bg); }
.signage-empty p { font-size: 18px; font-weight: 300; letter-spacing: .5px; color: var(--text-bg); opacity: .6; }

.signage-error { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100vw; height: 100vh; background: var(--bg); color: var(--text-bg); }
.signage-error-icon { margin-bottom: 16px; width: 60px; height: 60px; }
.signage-error-icon svg { width: 100%; height: 100%; fill: var(--text-bg); }
.signage-error p { font-size: 18px; font-weight: 300; letter-spacing: .5px; color: var(--text-bg); }