/* Star Wars keeps the original stylesheet. The other themes replace its
   decorative surfaces while sharing the same layout and accessible controls. */
html[data-theme="japanese_garden"] {
  color-scheme: light;
  --space: #fbf7f1;
  --space-raised: #f4ebe5;
  --panel: #fffdfa;
  --line: #e2d3cd;
  --line-strong: #b8808b;
  --text: #3d3033;
  --muted: #706065;
  --blue: #915066;
  --blue-bright: #87435a;
  --glow: #8e435c;
  --danger: #a33346;
  --theme-accent: #8c405b;
  --theme-soft: #f4e5e8;
  --theme-shadow: 0 8px 28px rgba(92, 56, 59, .06);
}

html[data-theme="slate"] {
  color-scheme: light;
  --space: #f3f5f6;
  --space-raised: #e8edef;
  --panel: #ffffff;
  --line: #d5dde2;
  --line-strong: #879ca8;
  --text: #1d2a33;
  --muted: #536672;
  --blue: #286574;
  --blue-bright: #205c6b;
  --glow: #286574;
  --danger: #a83345;
  --theme-accent: #263e4a;
  --theme-soft: #e4ecee;
  --theme-shadow: 0 5px 20px rgba(29, 42, 51, .04);
}

html[data-theme="star_wars"] { color-scheme: dark; }
html:not([data-theme="star_wars"]) body {
  background: var(--space);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
html[data-theme="japanese_garden"] body {
  background: radial-gradient(ellipse at 92% 15%, #f5e6e9, transparent 38rem), var(--space);
}
html:not([data-theme="star_wars"]) .app-header {
  background: var(--panel);
  box-shadow: none;
}

.app-header__brand--themed {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  width: min(calc(100% - 1.5rem), 1080px);
  height: clamp(7rem, 17vw, 11rem);
  background: none;
  box-shadow: none;
  color: var(--text);
  text-decoration: none;
}
.app-header__brand--themed img.theme-garden-art {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  max-height: none;
  visibility: visible;
  object-fit: cover;
  object-position: center 53%;
  box-shadow: none;
}
.theme-brand { display: grid; gap: .2rem; padding: 1.4rem 2rem; }
.theme-brand__name { font-size: clamp(2rem, 5vw, 3.6rem); font-weight: 800; letter-spacing: -.065em; line-height: 1.1; }
.theme-brand__dot { color: var(--blue); }
.theme-brand__caption { font-size: .78rem; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); }
html[data-theme="japanese_garden"] .theme-brand__name { font-family: Georgia, "Times New Roman", serif; font-weight: 500; letter-spacing: -.05em; color: #63394b; }
html[data-theme="japanese_garden"] .theme-brand__dot { display: none; }
html[data-theme="slate"] .app-header__brand--themed { height: 7.5rem; border-bottom: 1px solid var(--line); border-radius: 0; }
html[data-theme="slate"] .theme-brand { padding-left: .2rem; }
html[data-theme="slate"] .app-header__tab { border-radius: .5rem; }

html:not([data-theme="star_wars"]) :is(.app-header__tab--active, .tag-chip--active, .channel-pager__num.is-active) {
  color: #fff;
  background: var(--theme-accent);
  border-color: var(--theme-accent);
  box-shadow: none;
}
html:not([data-theme="star_wars"]) :is(.channels-index__row, .video-card, .preview-card) {
  background: var(--panel);
  box-shadow: var(--theme-shadow);
}
html:not([data-theme="star_wars"]) :is(.channels-index__thumb--placeholder, .channel-video-tile__placeholder) {
  background: linear-gradient(135deg, var(--theme-soft), var(--space-raised));
}
html:not([data-theme="star_wars"]) :is(.app-header__search-input, input[type="text"], input[type="email"], input[type="password"], textarea) {
  color: var(--text);
  background: var(--panel);
}
html:not([data-theme="star_wars"]) :is(.tag-chip, .video-card__tag, .channel-pager__edge, .channel-pager__num:not(.is-active), .preview-kicker) {
  background: var(--theme-soft);
  color: var(--blue-bright);
}
html:not([data-theme="star_wars"]) button[type="submit"],
html:not([data-theme="star_wars"]) input[type="submit"] {
  background: var(--theme-accent);
  color: #fff;
}
html:not([data-theme="star_wars"]) .button-danger[type="submit"] { color: var(--danger); background: var(--panel); border: 1px solid var(--line); }
html:not([data-theme="star_wars"]) .app-notice { color: #326044; }
.app-alert { color: var(--danger); }
.channel-unavailable { margin: .7rem .9rem; color: var(--muted); }
.channels-index__row > form { margin: 0 .9rem .9rem; padding: 0; border: 0; background: none; }

/* Theme chooser: native radios and a normal form work without JavaScript. */
.theme-picker { padding: 1rem 0 2rem; }
.theme-picker__eyebrow { margin: 0 0 .5rem; color: var(--blue-bright); font-size: .72rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.theme-picker h1 { margin: 0; font-size: clamp(2.25rem, 6vw, 3.5rem); line-height: 1.15; letter-spacing: -.045em; }
.theme-picker__intro { max-width: 39rem; margin: .8rem 0 2rem; color: var(--muted); line-height: 1.65; }
.theme-picker__form { max-width: none; margin: 0; padding: 0; border: 0; background: none; }
.theme-picker fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.theme-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; }
.theme-option {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0;
  border: 2px solid var(--line);
  border-radius: 1rem;
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
  transition: border-color .15s, transform .15s;
}
.theme-option:hover { border-color: var(--line-strong); }
.theme-option:has(input:checked) { border-color: var(--blue); box-shadow: 0 0 0 2px var(--space), 0 0 0 4px var(--blue); }
.theme-option:has(input:focus-visible) { outline: 3px solid var(--glow); outline-offset: 5px; }
.theme-option input { position: absolute; top: .8rem; right: .8rem; z-index: 2; width: 1.4rem; height: 1.4rem; margin: 0; accent-color: var(--blue); cursor: pointer; }
.theme-option__art { position: relative; display: block; overflow: hidden; height: 10.8rem; }
.theme-option__art--star_wars { background: radial-gradient(circle at 80% 0, #174076, transparent 65%), #070e1c; }
.theme-option__orbit { position: absolute; top: 44%; left: 20%; width: 11rem; height: 11rem; border: 1px solid #38729f; border-radius: 50%; box-shadow: 0 0 0 20px #0f253d, 0 0 0 21px #244763; background: radial-gradient(circle at 30% 20%, #5a92b2, #122a45 62%); }
.theme-option__spark { position: absolute; top: 1.6rem; left: 2rem; color: #b6e5fa; font-size: 1.6rem; }
.theme-option__art--japanese_garden { background: #f6efe3; }
.theme-option__art--japanese_garden img { width: 100%; height: 100%; object-fit: cover; object-position: 90% center; }
.theme-option__art--slate { background: #e6ecee; }
.theme-option__slate-mark { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 2.5rem; color: #293f4b; font: 800 6rem/1 -apple-system, BlinkMacSystemFont, sans-serif; letter-spacing: -.1em; }
.theme-option__slate-mark > span { font-size: 3.5rem; font-weight: 400; color: #738d98; }
.theme-option__copy { display: grid; gap: .6rem; padding: 1.25rem; }
.theme-option__name { font-size: 1.15rem; font-weight: 750; letter-spacing: -.02em; }
.theme-option__description { min-height: 3rem; color: var(--muted); font-size: .9rem; font-weight: 400; line-height: 1.5; }
.theme-option__palette { display: flex; gap: .35rem; margin-top: .3rem; }
.theme-option__palette i { width: .85rem; height: .85rem; border: 1px solid #80808040; border-radius: 50%; background: #07101f; }
.theme-option__palette--star_wars i:nth-child(2) { background: #4093da; }
.theme-option__palette--star_wars i:nth-child(3) { background: #87d4ee; }
.theme-option__palette--japanese_garden i { background: #e3aebd; }
.theme-option__palette--japanese_garden i:nth-child(2) { background: #f8f0e2; }
.theme-option__palette--japanese_garden i:nth-child(3) { background: #96ab91; }
.theme-option__palette--slate i { background: #2b414e; }
.theme-option__palette--slate i:nth-child(2) { background: #9bafb6; }
.theme-option__palette--slate i:nth-child(3) { background: #e7edef; }
.theme-picker__footer { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }
.theme-picker__footer > span { font-size: .82rem; color: var(--muted); }
.theme-picker input[type="submit"] { min-height: 2.9rem; padding: .75rem 1.3rem; border: 0; border-radius: .6rem; background: linear-gradient(135deg, #0369a1, #0e7490); color: #fff; font: inherit; font-weight: 750; cursor: pointer; }

.parent-settings { padding: 1rem 0 2rem; }
.parent-settings h1 { margin: 0; }
.parent-settings__intro { max-width: 45rem; margin: 1rem 0 1.75rem; color: var(--muted); line-height: 1.6; }
.parent-settings__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.parent-settings__card { padding: 1.4rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--panel); }
.parent-settings__card h2 { margin: 0 0 .75rem; font-size: 1.25rem; }
.parent-settings__card p { color: var(--muted); line-height: 1.6; }
.parent-settings__card .parent-settings__status { font-size: .8rem; font-weight: 700; color: var(--blue-bright); }
.parent-settings__links { display: flex; flex-wrap: wrap; gap: 1rem; }

@media (max-width: 680px) {
  .parent-settings__grid { grid-template-columns: 1fr; }
  .theme-options { grid-template-columns: 1fr; gap: 1rem; }
  .theme-option__art { height: 8rem; }
  .theme-option__description { min-height: 0; }
  .theme-brand { padding: 1rem; }
  .theme-brand__caption { font-size: .6rem; letter-spacing: .08em; }
  .theme-picker { padding-top: .5rem; }
  .app-header__tabs { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .theme-option, .channels-index__row, .channel-video-tile, .video-card { transition: none; transform: none; }
}