:root {
  --bg: #f2f5f8; --surface: #fff; --ink: #1b2733; --ink-2: #4a5866; --ink-3: #7d8994; --line: #d3dce4;
  --accent: #23776a; --accent-ink: #1a5c52; --accent-tint: #dcefe9; --warn: #b7791f; --bad: #a8433b;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #12181f; --surface: #1a232c; --ink: #e6ecf1; --ink-2: #aeb9c4; --ink-3: #7d8994; --line: #2f3c48; --accent: #5cc2ad; --accent-ink: #8fdcc9; --accent-tint: #1d3a35; --warn: #e0a64a; --bad: #e0776c; }
}
* { box-sizing: border-box; }
/* custom elements are inline by default; every component here is a block */
yk-app, yk-kid-card, yk-channel-compare, yk-kid-lists { display: block; }
yk-live-view { display: block; margin-top: .4rem; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.5 system-ui, "Segoe UI", sans-serif; }
body.embedded header nav a { display: none; }
header nav { display: flex; gap: 1rem; align-items: center; }
header nav a { color: var(--ink-2); text-decoration: none; padding: .3rem .1rem; border-bottom: 2px solid transparent; }
header nav a.active { color: var(--ink); border-bottom-color: var(--accent); }
header { display: flex; align-items: center; justify-content: space-between; padding: .8rem 1rem; border-bottom: 1px solid var(--line); background: var(--surface); }
header h1 { font-size: 1.1rem; margin: 0; }
main { max-width: 880px; margin: 0 auto; padding: 1rem; }
/* data-dense pages (channel comparison) use the whole window */
main.wide { max-width: none; }
button, .btn { font: inherit; padding: .5rem .9rem; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 1rem; margin-bottom: 1rem; }
.muted { color: var(--ink-3); }
.pill { display: inline-block; padding: .1rem .55rem; border-radius: 999px; font-size: .8rem; font-weight: 600; }
.pill.playing { background: var(--accent-tint); color: var(--accent-ink); }
.pill.paused { background: #f7ecd6; color: var(--warn); }
.pill.offline { background: var(--line); color: var(--ink-2); }

/* channel suggestions under the add-a-channel box; hidden until there is something to show */
.suggest { display: none; flex-direction: column; border: 1px solid var(--line); border-radius: 8px; margin-top: .4rem; overflow: hidden; }
.suggest.open { display: flex; }
.suggest button { text-align: left; border: 0; border-radius: 0; background: transparent; padding: .5rem .6rem; }
.suggest button:hover { background: var(--bg); }