/* Blue dark theme, same hues as the admin app (.dark in src/renderer/src/main.css).
   Loaded after Pico so these win. */
:root,
[data-theme='dark'] {
  --pico-font-size: 100%;
  --pico-border-radius: 0.5rem;
  --pico-font-family-sans-serif: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --pico-background-color: oklch(0.1953 0.013 264.2);
  --pico-color: oklch(0.9357 0.0092 258.3);
  --pico-h1-color: oklch(0.9357 0.0092 258.3);
  --pico-h2-color: oklch(0.9357 0.0092 258.3);
  --pico-muted-color: oklch(0.7513 0.0225 259.2);
  --pico-muted-border-color: oklch(0.3192 0.0258 260.1);
  --pico-card-background-color: oklch(0.2303 0.0167 264.2);
  --pico-card-border-color: oklch(0.3192 0.0258 260.1);
  --pico-card-box-shadow: none;
  --pico-form-element-background-color: oklch(0.1953 0.013 264.2);
  --pico-form-element-border-color: oklch(0.3192 0.0258 260.1);
  --pico-form-element-focus-color: oklch(0.7581 0.1023 263.7);
  --pico-primary: oklch(0.7581 0.1023 263.7);
  --pico-primary-background: oklch(0.532 0.1533 264.7);
  --pico-primary-border: oklch(0.532 0.1533 264.7);
  --pico-primary-hover: oklch(0.82 0.09 263.7);
  --pico-primary-hover-background: oklch(0.58 0.1533 264.7);
  --pico-primary-hover-border: oklch(0.58 0.1533 264.7);
  --pico-primary-focus: oklch(0.7581 0.1023 263.7 / 0.3);
  --pico-primary-inverse: #fff;
  --pico-form-element-invalid-border-color: oklch(0.7412 0.1253 24.1);
  --pico-form-element-invalid-focus-color: oklch(0.7412 0.1253 24.1);
}

[x-cloak] { display: none !important; }
body { min-height: 100vh; }
main.container { max-width: 44rem; padding-block: 3rem; }
header { display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem; }
header img { border-radius: 0.75rem; }
header p { margin: 0; }
header h1 { margin-bottom: 0.25rem; font-size: 1.75rem; }
.muted { color: var(--pico-muted-color); font-size: 0.9rem; }
.error { color: oklch(0.7412 0.1253 24.1); }
.toolbar { display: flex; justify-content: space-between; align-items: center; }
article h2 { font-size: 1.15rem; margin-bottom: 0.75rem; }
ul { list-style: none; padding: 0; margin: 0; }
li {
  display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap;
  gap: 0.25rem 1rem; padding: 0.6rem 0; border-top: 1px solid var(--pico-muted-border-color);
}
li:first-child { border-top: 0; }
li a { word-break: break-all; }
article form button { width: 100%; margin-top: 0.5rem; }
article section + section { margin-top: 1rem; }
article h3 {
  font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--pico-muted-color); margin-bottom: 0.25rem;
}
button.copy {
  width: auto; margin: 0 0 0 0.5rem; padding: 0.1rem 0.6rem; font-size: 0.8rem;
  background: transparent; color: var(--pico-primary); border-color: var(--pico-muted-border-color);
}
nav.channels { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
nav.channels button { width: auto; margin: 0; padding: 0.35rem 1rem; }