:root {
    --nf-ink: #172c29;
    --nf-muted: #697773;
    --nf-paper: #f4f6f3;
    --nf-surface: #fff;
    --nf-line: #dce3df;
    --nf-green: #174c43;
    --nf-green-dark: #103b34;
    --nf-lime: #d8e8a8;
    --nf-gold: #c28a31;
}

* { box-sizing: border-box; }

.app-body {
    min-height: 100vh;
    margin: 0;
    background: var(--nf-paper);
    color: var(--nf-ink);
    font-family: "Segoe UI", Tahoma, sans-serif;
}

.app-shell { min-height: 100vh; display: flex; flex-direction: column; }
.app-header { background: var(--nf-green-dark); color: #fff; box-shadow: 0 3px 14px #103b3426; }
.app-header-inner { min-height: 76px; display: flex; align-items: center; gap: 2rem; }
.app-brand { display: inline-flex; align-items: center; gap: .7rem; color: #fff; text-decoration: none; font-size: 1.15rem; font-weight: 700; white-space: nowrap; }
.app-brand-mark { display: grid; width: 34px; aspect-ratio: 1; place-items: center; border-radius: 9px; background: var(--nf-lime); color: var(--nf-green-dark); font-family: Georgia, serif; font-size: 1.2rem; }
.app-nav { display: flex; flex-wrap: wrap; align-items: center; flex: 1; gap: .25rem; }
.app-nav a { border-radius: 6px; padding: .6rem .8rem; color: #e3ece8; text-decoration: none; font-size: .94rem; }
.app-nav a:hover, .app-nav a[aria-current] { background: #ffffff17; color: #fff; }
.app-nav a[aria-current] { box-shadow: inset 0 -2px var(--nf-lime); }
.app-area-nav { background: var(--nf-surface); border-bottom: 1px solid var(--nf-line); }
.app-area-nav > div { display: flex; flex-wrap: wrap; gap: .25rem; padding-top: .5rem; padding-bottom: .5rem; }
.app-area-nav a { padding: .4rem .6rem; border-radius: 5px; color: var(--nf-green); font-size: .88rem; text-decoration: none; }
.app-area-nav a:hover, .app-area-nav a[aria-current] { background: #e7eeeb; }
.app-account { display: flex; align-items: center; gap: .9rem; white-space: nowrap; }
.app-account-name { max-width: 190px; overflow: hidden; text-overflow: ellipsis; color: #d9e4df; font-size: .88rem; }
.app-account form { margin: 0; }
.app-logout { border: 1px solid #ffffff55; border-radius: 6px; padding: .42rem .7rem; background: transparent; color: white; font: inherit; font-size: .85rem; }
.app-logout:hover { background: #ffffff16; }
.app-main { flex: 1; width: 100%; padding-top: 2rem; padding-bottom: 3rem; }
.app-footer { border-top: 1px solid var(--nf-line); background: var(--nf-surface); color: var(--nf-muted); }
.app-footer-inner { display: flex; justify-content: space-between; gap: 1rem; padding-top: 1rem; padding-bottom: 1rem; font-size: .82rem; }
.app-main .card { border-color: var(--nf-line); border-radius: 7px; }
.app-main .table { --bs-table-bg: transparent; }
.app-main h1, .app-main h2, .app-main h3 { color: var(--nf-ink); }
.winner-card-image, .winner-card-placeholder { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.winner-card { overflow: hidden; }
.winner-card-image { display: block; }
.winner-card-placeholder { display: grid; place-items: center; padding: 1rem; background: #e7eeeb; color: var(--nf-muted); text-align: center; }
.media-list-preview { width: 72px; height: 56px; border-radius: 5px; object-fit: cover; background: #e7eeeb; }
.media-list-audio { display: block; width: 240px; height: 40px; }
.media-list-table { contain: layout paint; }
.media-list-preview.media-type-icon { object-fit: contain; background: white; }
.media-edit-preview { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: #e7eeeb; }
.presentation-preview-frame { display: block; width: 100%; height: min(68vh, 640px); border: 1px solid var(--nf-line); border-radius: 5px; background: #101418; }
.changelog-scroll { max-height: 32rem; overflow-y: auto; }

@media (max-width: 900px) {
    .app-header-inner { flex-wrap: wrap; gap: .5rem 1rem; padding-top: .8rem; padding-bottom: .8rem; }
    .app-nav { order: 3; flex-basis: 100%; overflow-x: auto; }
    .app-account { margin-left: auto; }
}

@media (max-width: 560px) {
    .app-main { padding-top: 1.25rem; }
    .app-account-name { max-width: 120px; }
    .app-footer-inner { flex-wrap: wrap; justify-content: flex-start; column-gap: 1.25rem; }
}