@layer od-layout {
  :where(.od-stack,.od-row,.od-row-top,.od-cluster,.od-grid,.od-field,.od-stat,.od-cell,.od-tile) > :where(*) { min-width: 0; }

  /* containers */
  .od-stack   { display: flex; flex-direction: column; gap: var(--od-gap, 8px); }
  .od-row     { display: flex; align-items: center; gap: var(--od-gap, 8px); }
  .od-row-top { display: flex; align-items: flex-start; gap: var(--od-gap, 8px); }
  .od-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--od-gap, 8px); }
  .od-fill    { flex: 1 1 0; min-width: 0; }
  .od-fixed   { flex: none; }
  .od-grid    { display: grid; gap: var(--od-gap, 12px); grid-template-columns: repeat(var(--od-cols, 3), minmax(0, 1fr)); }

  /* stacked information: each piece is its own line — never sibling inline spans */
  .od-stat, .od-field, .od-cell { display: grid; gap: var(--od-gap, 2px); }
  :where(.od-stat,.od-field,.od-cell) > :where(*) { display: block; }
  .od-tile { display: grid; grid-template-rows: auto 1fr; }
  :where(.od-tile) > :where(*) { display: block; }

  /* media keeps its intrinsic ratio by default; never a distorted or cropped
     cover by accident. height:auto lets the ratio win over an <img height="…">
     attribute. Cropping to a uniform box is an explicit opt-in: set --od-ratio
     AND add .od-media-cover together (per the core rule, only where a crop is
     deliberate — tile thumbs, decorative fills — never on full-frame content). */
  .od-media { display: block; width: 100%; height: auto; aspect-ratio: var(--od-ratio, auto); }
  .od-media-cover { object-fit: cover; }

  /* data text only — authored copy is rewritten to its budget instead */
  .od-truncate { display: block; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .od-clamp-2, .od-clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
  .od-clamp-2 { -webkit-line-clamp: 2; }
  .od-clamp-3 { -webkit-line-clamp: 3; }
  .od-lines-2 { min-height: calc(2 * 1.4em); }
  .od-nowrap  { white-space: nowrap; }
  .od-keep    { word-break: keep-all; overflow-wrap: anywhere; }

  /* screen skeleton (optional): bars take their own space, the middle scrolls — no padding guessed for chrome */
  .od-screen { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; }
  .od-scroll { overflow-y: auto; overscroll-behavior: contain; min-height: 0; }

  /* horizontal rail: the next item peeks at the edge; trailing room survives overflow */
  .od-rail { display: flex; gap: var(--od-gap, 8px); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
             padding-inline: var(--od-rail-pad, 16px); scroll-padding-inline: var(--od-rail-pad, 16px); }
  .od-rail::-webkit-scrollbar { display: none; }
  :where(.od-rail) > :where(*) { flex: none; scroll-snap-align: start; }
  :where(.od-rail) > :where(:last-child) { margin-inline-end: var(--od-rail-pad, 16px); }

  .od-spacer { flex: none; visibility: hidden; pointer-events: none; }
  .od-touch  { min-width: 44px; min-height: 44px; }
}
/* /OD-LAYOUT-PRIMITIVES v1 */

:root {
  --font-ui: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --bg: #cfeef2;
  --bg-deep: #b9e3e9;
  --surface: #ffffff;
  --surface-soft: #f5fbfb;
  --ink: #111315;
  --muted: #536169;
  --line: #d5e2e4;
  --line-strong: #b7ced1;
  --brand: #159db8;
  --brand-deep: #087f98;
  --brand-soft: #d9f4f5;
  --yellow: #ffb000;
  --yellow-soft: #fff3cf;
  --blue: #4169f5;
  --blue-soft: #e7ecff;
  --red: #d83b45;
  --red-soft: #ffe7e8;
  --green: #16845b;
  --green-soft: #e1f5ea;
  --shadow: 0 18px 45px rgba(18, 48, 55, 0.12);
  --shadow-soft: 0 8px 24px rgba(18, 48, 55, 0.08);
  --radius-sm: 10px;
  --radius: 18px;
  --radius-lg: 28px;
  --max-width: 1240px;
  --nav-width: 238px;
}

.channel-identity-fields { display: grid; grid-template-columns: minmax(0, 1fr) 64px; gap: 16px; align-items: end; }
.channel-identity-fields > .field { min-width: 0; }
.channel-color-picker { display: block; width: 64px; height: 48px; padding: 4px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; }
.channel-color-picker:focus-visible { outline: 3px solid var(--brand-deep); outline-offset: 3px; }
.profile-avatar-generator { display: grid; gap: 16px; }
.profile-avatar-actions { display: flex; align-items: end; justify-content: space-between; gap: 16px; }
.profile-settings-row { grid-column: 1 / -1; --od-gap: 16px; align-items: end; }
.profile-demographics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.profile-demographics > .field { min-width: 0; align-content: start; }
.profile-demographics .input, .profile-demographics .select { height: 48px; }
.profile-background-field { flex: 0 1 128px; min-width: 0; justify-items: end; text-align: right; }
.profile-avatar-preview, .profile-avatar-placeholder { display: block; width: 128px; max-width: 100%; aspect-ratio: 1; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); }
.profile-avatar-preview { height: auto; object-fit: contain; }
.profile-avatar-placeholder { display: grid; place-items: center; padding: 16px; background: var(--surface); color: var(--text); text-align: center; }
.channel-color-dot { display: inline-block; width: 16px; height: 16px; margin-inline-end: 8px; border: 1px solid var(--muted); border-radius: 50%; vertical-align: middle; }
.theme-selector { min-width: 0; }
@font-face { font-family: Fredoka; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/fredoka-700.woff2') format('woff2'); }
@font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/nunito-sans-400.woff2') format('woff2'); }
@font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/nunito-sans-700.woff2') format('woff2'); }
.theme-explorer.reference-explorer { --graph-bg: #f1eef8; --graph-ink: #2c2440; --graph-ring: #6746ac; color: var(--graph-ink); background: var(--graph-bg); font-family: 'Nunito Sans', system-ui, sans-serif; }
.reference-explorer .reference-title { margin: 0; font-family: Fredoka, ui-rounded, system-ui, sans-serif; font-size: 20px; }
.reference-explorer .theme-explorer-header { padding: 12px; }
.reference-explorer .reference-theme-canvas { height: 440px; border-color: #9785b5; border-radius: 16px; }
.reference-explorer .label { color: inherit; }
.reference-explorer .theme-hub { font-family: var(--font-ui); font-size: 20px; font-weight: 700; line-height: 1.5; }
.reference-explorer .reference-legend { gap: 8px 16px; font-size: 14px; }
.reference-legend > span { display: inline-flex; align-items: center; gap: 8px; }
.reference-legend i { display: block; width: 12px; height: 12px; border-radius: 50%; flex: none; }
.reference-explorer .theme-accessible-choices .theme-bubble { font-family: Fredoka, ui-rounded, system-ui, sans-serif; border-radius: 24px; }
.reference-search-results { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; max-height: 224px; overflow-y: auto; }
.reference-search-results button { min-height: 44px; padding: 8px; border: 1px solid #9785b5; border-radius: 8px; background: #fff; color: #2c2440; font: inherit; text-align: left; overflow-wrap: anywhere; cursor: pointer; }
.reference-explorer :focus-visible { outline-color: var(--graph-ring); }
@media (hover:hover) { .reference-search-results button:hover { background: #e6e0f2; } }
@media (prefers-color-scheme:dark) {
  .theme-explorer.reference-explorer { --graph-bg: #14111d; --graph-ink: #efeaff; --graph-ring: #b092ff; }
  .reference-explorer .input { background: #241d3a; color: #efeaff; border-color: #9785b5; }
  .reference-explorer .input::placeholder { color: #b3a8d6; }
  .reference-search-results button { background: #241d3a; color: #efeaff; }
  .reference-search-results button:hover { background: #39294c; }
}
.theme-canvas-section { margin-top: 0; }
.theme-canvas { display: block; width: 100%; height: 352px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); touch-action: none; cursor: grab; }
.theme-graph-pages { justify-content: center; }
.theme-list-label { padding-block: 16px; }
.theme-accessible-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 136px), 1fr)); gap: 8px; }
.theme-accessible-choices .theme-branch::before { display: none; }
.theme-accessible-choices .theme-bubble { min-height: 32px; padding: 3px 12px; }
.theme-hint { margin: 0; font-size: 16px; line-height: 1.5; }
.theme-explorer { border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); }
.theme-explorer-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px; }
.theme-explorer-toggle { min-width: 0; min-height: 44px; padding: 8px; border: 0; background: none; font: inherit; font-weight: 700; color: var(--brand-deep); text-align: left; }
.theme-explorer-header > .btn { flex: none; }
.theme-help { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; font: inherit; }
.theme-help > span { display: inline-flex; align-items: center; justify-content: center; width: 17.6px; height: 17.6px; border-radius: 50%; background: #d9d9d9; color: #333; font-size: 12px; font-weight: 700; line-height: 1; }
.theme-explorer[hidden], .theme-explorer [hidden] { display: none; }
.theme-explorer-body { padding: 0 16px 16px; --od-gap: 16px; }
.theme-map { --theme-connector: var(--line-strong); padding: 0; }
.theme-hub { margin: 0; font-size: 16px; font-weight: 700; text-align: left; overflow-wrap: anywhere; }
.theme-toolbar { justify-content: center; flex-wrap: nowrap; gap: 8px; }
.theme-toolbar > button { min-width: 0; padding-inline: 8px; border-radius: 4px; }
.button.theme-close { flex: none; width: 44px; height: 44px; padding: 8px; border-radius: 8px; }
.theme-branches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 16px; margin-top: 24px; border-top: 2px solid var(--theme-connector); position: relative; }
.theme-branches::before { content: ''; position: absolute; bottom: 100%; left: 50%; width: 2px; height: 24px; background: var(--theme-connector); }
.theme-branch { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.theme-branch::before { content: ''; display: block; width: 2px; height: 24px; background: var(--theme-connector); }
.theme-bubble { display: block; width: 100%; min-height: 64px; padding: 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-lg); font: inherit; font-size: 16px; font-weight: 650; line-height: 1.5; color: var(--ink); background: var(--brand-soft); cursor: pointer; overflow-wrap: anywhere; }
.theme-group-k { background: var(--yellow-soft); }
.theme-group-s { background: var(--blue-soft); }
.theme-group-root { background: var(--surface-soft); }
.theme-choice { padding: 0; }
.theme-choice > span { overflow-wrap: anywhere; min-width: 0; }
.theme-explorer :focus-visible, .theme-hub:focus { outline: 3px solid var(--brand-deep); outline-offset: 3px; }
@media (hover: hover) { .theme-bubble:hover { border-color: var(--brand-deep); box-shadow: 0 0 0 1px var(--brand-deep); } }
@media (max-width: 480px) { .theme-branches { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 8px; } .theme-explorer-body { padding-inline: 8px; } }

* { box-sizing: border-box; }
html, body, #root { min-height: 100%; margin: 0; }
.hashtag-nav { --hashtag-gap: 16px; display: grid; gap: var(--hashtag-gap); min-width: 0; font-family: var(--font-ui); }
.hashtag-nav h3, .hashtag-nav p { margin: 0; }
.hashtag-nav-body { display: grid; gap: var(--hashtag-gap); min-width: 0; }
.hashtag-nav .hashtag-nav-selected { font: 700 20px/1.5 var(--font-ui); overflow-wrap: anywhere; }
.hashtag-nav-actions, .hashtag-nav-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.hashtag-selected-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.hashtag-selected-row .hashtag-nav-selected { margin: 0; }
.hashtag-nav .button { min-height: 44px; border-radius: 4px; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.hashtag-nav .button.square-btn, .button.square-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-width: 44px;
  max-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: 10px;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
  flex: 0 0 44px;
}
.hashtag-nav .button:focus-visible { outline: 3px solid #087b91; outline-offset: 3px; }
.hashtag-pagination .button { background: var(--bg-deep); color: var(--ink); border-color: var(--brand-deep); }
.hashtag-pagination .hashtag-page-count { margin-inline-start: auto; text-align: right; flex: none; }
@media (hover: hover) { .hashtag-pagination .button:hover:not(:disabled) { background: var(--brand-soft); color: var(--ink); } }
.hashtag-nav-canvas { display: block; width: 100%; height: 400px; border-radius: 8px; touch-action: none; font-family: var(--font-ui); }
.hashtag-nav-note { font-size: 16px; line-height: 1.5; }
.filter-explorer { --filter-line: #626a7a; --filter-ink: #21172f; --filter-ground: #f4f6fa; --filter-space: 8px; --filter-radius: 4px; --filter-dot: 32px; --filter-row: 128px; }
.filter-explorer[hidden] { display: none; }
.filter-network { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(var(--filter-row), auto)); gap: var(--filter-space); padding: var(--filter-space); background: var(--filter-ground); border-radius: var(--filter-space); touch-action: none; }
.filter-network-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; stroke: var(--filter-line); stroke-width: 2px; }
.filter-network-lines .filter-drag-line { stroke: var(--filter-ink); stroke-dasharray: 4 4; }
.filter-network-node { position: relative; align-items: center; justify-content: center; min-width: 0; min-height: 44px; padding: var(--filter-space) 0; border: 0; border-radius: var(--filter-radius); background: transparent; color: var(--filter-ink); font: 700 16px/1.5 var(--font-ui); cursor: pointer; }
.filter-node-dot { display: block; flex: none; width: var(--filter-dot); height: var(--filter-dot); border: 2px solid var(--filter-ink); border-radius: 50%; background: var(--filter-node-color); }
.filter-network-node[aria-current="true"] .filter-node-dot { --filter-dot: 48px; }
.filter-node-label { display: block; max-width: 100%; overflow-wrap: anywhere; background: var(--filter-ground); border-radius: var(--filter-radius); }
.filter-network-node:focus-visible { outline: 3px solid var(--filter-ink); outline-offset: 2px; }
@media (hover: hover) { .filter-network-node:hover .filter-node-dot { outline: 2px solid var(--filter-ink); outline-offset: 4px; } }
.hashtag-input-with-network [aria-expanded="true"] { outline: 2px solid currentColor; outline-offset: 2px; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
img { max-width: 100%; }
:focus-visible { outline: 3px solid rgba(21, 157, 184, 0.38); outline-offset: 2px; }

.app { min-height: 100vh; }
.icon { display: inline-block; flex: none; vertical-align: -3px; }
.muted { color: var(--muted); }
.small { font-size: 0.82rem; }
.tiny { font-size: 0.74rem; }
.success-text { color: var(--green); font-weight: 700; }
.error-text { color: var(--red); font-weight: 700; }
.divider { height: 1px; background: var(--line); border: 0; margin: 18px 0; }

.button {
  align-items: center;
  border: 1px solid transparent;
  border-radius: 999px;
  display: inline-flex;
  font-weight: 750;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease, border-color 160ms ease;
  white-space: nowrap;
}
.button:hover:not(:disabled) { transform: translateY(-1px); }
.button:active:not(:disabled) { transform: translateY(0); }
.button-primary { background: var(--brand); color: #fff; box-shadow: 0 8px 18px rgba(21, 157, 184, 0.22); }
.button-primary:hover:not(:disabled) { background: var(--brand-deep); }
.button-secondary { background: var(--surface); border-color: var(--line-strong); color: var(--ink); }
.button-secondary:hover:not(:disabled) { border-color: var(--brand); color: var(--brand-deep); }
.button-ghost { background: transparent; color: var(--brand-deep); }
.button-ghost:hover:not(:disabled) { background: var(--brand-soft); }
.button-danger { background: var(--red-soft); color: #a52832; }
.button-danger:hover:not(:disabled) { background: #ffd8db; }
.button-small { min-height: 36px; padding: 0 13px; font-size: 0.86rem; }
.button:disabled { opacity: 0.48; box-shadow: none; }

.icon-button {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 13px;
  color: var(--ink);
  display: inline-flex;
  height: 44px;
  justify-content: center;
  width: 44px;
}
.icon-button:hover:not(:disabled) { border-color: var(--brand); color: var(--brand-deep); }
.icon-button:disabled { opacity: 0.42; }

.field { display: grid; gap: 7px; }
.label { color: #263439; font-size: 0.88rem; font-weight: 750; }
.input, .select, .textarea {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--ink);
  min-height: 46px;
  padding: 0 14px;
  width: 100%;
}
.textarea { min-height: 92px; padding: 12px 14px; resize: vertical; }
.input::placeholder, .textarea::placeholder { color: #8a999d; }
.input:hover, .select:hover, .textarea:hover { border-color: #91b8bd; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--brand); outline: 3px solid rgba(21, 157, 184, 0.16); }
.checkbox-row { align-items: flex-start; display: flex; gap: 10px; }
.checkbox-row input { accent-color: var(--brand); height: 18px; margin-top: 4px; width: 18px; }
.switch {
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 4px;
  justify-content: center;
  min-height: 44px;
  min-width: 48px;
  text-align: center;
  user-select: none;
}
.switch input { height: 1px; opacity: 0; position: absolute; width: 1px; }
.switch-track { background: #b8c9cc; border-radius: 999px; height: 26px; position: relative; width: 48px; }
.switch-track::after { background: #fff; border-radius: 50%; box-shadow: 0 2px 5px rgba(0,0,0,0.18); content: ""; height: 20px; left: 3px; position: absolute; top: 3px; transition: transform 180ms ease; width: 20px; }
.switch input:checked + .switch-track { background: var(--brand); }
.switch input:checked + .switch-track::after { transform: translateX(22px); }
.switch input:focus-visible + .switch-track { outline: 3px solid rgba(21, 157, 184, 0.38); outline-offset: 2px; }
.switch-copy { display: grid; gap: 1px; text-align: center; }
.switch-copy strong { font-size: 0.78rem; font-weight: 750; }
.switch-copy span { color: var(--muted); font-size: 0.74rem; }

.login-page {
  display: grid;
  min-height: 100vh;
  overflow: hidden;
  place-items: center;
  padding: 32px 18px;
  position: relative;
}
.login-page::before, .login-page::after { border-radius: 50%; content: ""; position: absolute; z-index: 0; }
.login-page::before { background: var(--yellow); height: 260px; right: -100px; top: -120px; width: 360px; }
.login-page::after { background: var(--blue); bottom: -140px; height: 300px; left: -120px; width: 300px; }
.login-card {
  background: var(--surface);
  border: 1px solid rgba(255,255,255,0.7);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  max-width: 470px;
  padding: 34px;
  position: relative;
  width: 100%;
  z-index: 1;
}
.login-brand { align-items: center; display: flex; gap: 12px; justify-content: center; margin-bottom: 28px; }
.brand-mark { align-items: center; background: var(--brand-soft); border-radius: 17px; display: inline-flex; height: 54px; justify-content: center; width: 54px; }
.brand-mark img { height: 43px; width: 43px; }
.login-brand-mark { background: transparent; }
.login-brand-mark img { height: 54px; width: auto; }
.brand-lockup { display: grid; gap: 0; }
.brand-name { font-size: 1.55rem; font-weight: 850; letter-spacing: -0.05em; line-height: 1; }
.brand-tagline { color: var(--muted); font-size: 0.8rem; font-weight: 650; }
.login-card h1 { font-size: 1.75rem; letter-spacing: -0.04em; line-height: 1.12; margin: 0 0 8px; text-align: center; }
.login-intro { color: var(--muted); margin: 0 auto 24px; max-width: 36ch; text-align: center; }
.login-form { display: grid; gap: 14px; }
.provider-row { display: flex; gap: 16px; justify-content: center; margin-top: 4px; }
.provider-button { align-items: center; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 12px; color: var(--ink); display: inline-flex; font-weight: 750; gap: 8px; justify-content: center; min-height: 44px; }
.provider-button:hover:not(:disabled) { border-color: var(--brand); color: var(--brand-deep); }
.provider-mark { align-items: center; background: var(--brand-soft); border-radius: 8px; color: var(--brand-deep); display: inline-flex; font-size: 0.82rem; font-weight: 850; height: 24px; justify-content: center; width: 24px; }
.login-link { color: var(--brand-deep); font-size: 0.88rem; font-weight: 750; justify-self: end; margin-top: -4px; text-decoration: underline; text-underline-offset: 3px; }
.login-link:hover { color: var(--brand); }
.login-legal { color: var(--muted); font-size: 0.78rem; line-height: 1.5; margin: 18px 0 0; text-align: center; }
.login-legal a { color: var(--brand-deep); font-weight: 750; text-decoration: underline; text-underline-offset: 3px; }
.login-legal a:hover { color: var(--brand); }
.legal-page .login-card { display: grid; gap: 18px; }
.legal-page { align-items: start; overflow: auto; }
.legal-page .login-card { max-width: 760px; margin: 0 auto; }
.legal-content { color: var(--ink); font-size: 0.9rem; line-height: 1.6; max-height: 62vh; overflow: auto; padding: 0 4px; }
.legal-content .font-bold { font-weight: 750; }
.legal-content a { color: var(--brand-deep); text-decoration: underline; text-underline-offset: 3px; }
.legal-content a:hover { color: var(--brand); }
.legal-content br { content: ''; display: block; margin-bottom: 10px; }
.mode-toggle { background: var(--surface-soft); border: 1px solid var(--line); border-radius: 14px; margin-top: 18px; padding: 13px 14px; }
.mode-toggle-row { align-items: center; display: flex; gap: 16px; justify-content: space-between; }
.mode-toggle-copy { display: grid; flex: 1 1 0; gap: 2px; min-width: 0; }
.mode-toggle-copy strong { font-size: 0.9rem; }
.mode-toggle-copy span { color: var(--muted); font-size: 0.78rem; }
.form-error { background: var(--red-soft); border-radius: 10px; color: #9f2631; font-size: 0.86rem; padding: 10px 12px; }
.login-footnote { color: var(--muted); font-size: 0.78rem; margin: 18px 0 0; text-align: center; }

.topbar {
  align-items: center;
  background: rgba(255,255,255,0.88);
  border-bottom: 1px solid rgba(183,206,209,0.7);
  display: flex;
  gap: 16px;
  justify-content: space-between;
  min-height: 76px;
  padding: 14px 20px;
  position: sticky;
  top: 0;
  z-index: 30;
}
.topbar-brand { align-items: center; display: flex; gap: 10px; min-width: 0; }
.topbar-brand .brand-mark { height: 42px; width: 42px; }
.topbar-brand .brand-mark img { height: 34px; width: auto; }
.topbar-title { display: grid; gap: 0; min-width: 0; }
.topbar-title strong { font-size: 1rem; letter-spacing: -0.02em; }
.topbar-title span { color: var(--muted); font-size: 0.76rem; }
.top-actions { align-items: center; display: flex; gap: 10px; }

.parent-layout { min-height: calc(100vh - 76px); }
.parent-nav {
  align-items: stretch;
  background: rgba(255,255,255,0.76);
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 6px;
  padding: 10px 16px;
  position: sticky;
  top: 76px;
  z-index: 20;
}
.nav-item {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 11px;
  color: var(--muted);
  display: inline-flex;
  font-size: 0.88rem;
  font-weight: 750;
  gap: 8px;
  justify-content: center;
  min-height: 44px;
  padding: 0 13px;
  white-space: nowrap;
}
.nav-item:hover { background: var(--brand-soft); color: var(--brand-deep); }
.nav-item.active { background: var(--brand-deep); color: #fff; }
.nav-label-mobile { display: none; }
.nav-label-desktop { display: inline; }
.parent-main { margin: 0 auto; max-width: var(--max-width); padding: 28px 18px 110px; width: 100%; }
.page-head { align-items: flex-start; display: flex; gap: 16px; justify-content: space-between; margin-bottom: 24px; }
.eyebrow { color: var(--brand-deep); font-size: 0.74rem; font-weight: 850; letter-spacing: 0.1em; margin: 0 0 5px; text-transform: uppercase; }
.page-title { font-size: clamp(1.7rem, 3vw, 2.45rem); letter-spacing: -0.05em; line-height: 1.05; margin: 0; }
.lead { color: var(--muted); margin: 9px 0 0; max-width: 58ch; }
.page-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 9px; justify-content: flex-end; }
.home-view { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.home-view > *, .home-view .page-head > div, .home-view .card-header > div, .home-view .quick-action > span { min-width: 0; }
.home-view .table-wrap { max-width: 100%; }
#home-schedule-profile { width: 100%; }
@media (min-width: 768px) {
  #home-schedule-profile { width: 50%; }
}
.home-view .quick-action > .quick-icon { display: grid; flex: 0 0 38px; margin-top: 0; color: var(--brand-deep); place-items: center; }
.home-view .quick-icon svg { display: block; }
.home-view .quick-action > span:last-child { flex: 1; overflow-wrap: anywhere; }
.home-view .page-head { margin-bottom: 0; }
.home-view .quick-grid { margin-top: 0; }
.home-view .card + .card { margin-top: 0; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-soft); padding: 20px; }
.card + .card { margin-top: 16px; }
.card-header { align-items: flex-start; display: flex; gap: 12px; justify-content: space-between; margin-bottom: 16px; }
.card-title { font-size: 1.08rem; letter-spacing: -0.025em; margin: 0; }
.card-subtitle { color: var(--muted); font-size: 0.86rem; margin: 4px 0 0; }
.stat-grid { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stat-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-soft); padding: 17px; }
.stat-label { color: var(--muted); font-size: 0.8rem; font-weight: 700; }
.stat-value { font-size: 1.85rem; font-weight: 850; letter-spacing: -0.05em; line-height: 1.05; margin-top: 7px; }
.stat-note { color: var(--muted); font-size: 0.78rem; margin-top: 7px; }
.home-view .stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.home-view .stat-card { min-width: 0; padding: 16px; }
.home-view .stat-value { font-size: clamp(1rem, 4vw, 1.85rem); white-space: nowrap; }
@media (max-width: 767px) {
  .home-view .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .home-view .stat-card { padding: 8px; }
  .home-view .stat-label, .home-view .stat-note { font-size: 0.75rem; line-height: 1.5; }
  .home-view .stat-label { min-height: 3em; }
}
.quick-grid { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 16px; }
.quick-action { align-items: flex-start; background: var(--surface-soft); border: 1px solid var(--line); border-radius: var(--radius); display: flex; gap: 12px; min-height: 92px; padding: 15px; text-align: left; width: 100%; }
.quick-action:hover { border-color: var(--brand); }
.quick-icon { align-items: center; background: var(--brand-soft); border-radius: 12px; color: var(--brand-deep); display: grid; height: 38px; justify-content: center; place-items: center; width: 38px; }
.quick-action strong { display: block; font-size: 0.94rem; }
.quick-action span { color: var(--muted); display: block; font-size: 0.78rem; margin-top: 3px; }
.schedule-table { border-collapse: collapse; width: 100%; }
.table-wrap { overflow-x: auto; }
.schedule-table th, .schedule-table td { border-bottom: 1px solid var(--line); padding: 12px 10px; text-align: left; vertical-align: top; }
.schedule-table .schedule-col-preview,
.schedule-table th:first-child,
.schedule-table td:first-child {
  width: 1%;
  max-width: 240px;
  white-space: nowrap;
}
.schedule-table th:last-child,
.schedule-table td:last-child {
  width: 1%;
  white-space: nowrap;
}
.schedule-table th { color: var(--muted); font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; }
.schedule-table td { font-size: 0.88rem; }
.schedule-table tr:last-child td { border-bottom: 0; }
.channel-name { font-weight: 750; }
.channel-theme { color: var(--muted); font-size: 0.8rem; margin-top: 2px; }
.tag-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tag { background: var(--brand-soft); border-radius: 999px; color: var(--brand-deep); display: inline-flex; font-size: 0.72rem; font-weight: 750; padding: 4px 8px; }
.tag.neutral { background: #edf1f2; color: #526169; }
.tag.yellow { background: var(--yellow-soft); color: #765500; }
.tag.blue { background: var(--blue-soft); color: #3452bd; }
.tag.red { background: var(--red-soft); color: #a52832; }

.profile-grid { display: grid; gap: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 24px; }
.profile-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-soft); display: flex; flex-direction: column; gap: 15px; padding: 18px; }
.profile-card:hover { border-color: var(--line-strong); }
.profile-top { align-items: center; display: flex; gap: 13px; }
.avatar { align-items: center; border: 3px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px var(--line-strong); display: inline-flex; font-weight: 850; height: 56px; justify-content: center; overflow: hidden; width: 56px; }
.avatar img { height: 100%; object-fit: cover; width: 100%; }
.avatar.small { height: 40px; width: 40px; font-size: 0.86rem; }
.profile-name { font-size: 1.05rem; font-weight: 800; letter-spacing: -0.025em; }
.profile-alias { color: var(--muted); font-size: 0.82rem; margin-top: 1px; }
.profile-meta { display: grid; gap: 7px; }
.profile-channel-summary { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 0.8rem; line-height: 1.5; }
.profile-channel-summary td { padding: 4px 0; text-align: left; }
.profile-channel-row { display: flex; align-items: center; gap: 6px; }
.icon-button.profile-channel-preview-btn { background: transparent; border: 0; height: 24px; min-height: 24px; width: 24px; min-width: 24px; flex: 0 0 24px; padding: 0; }
.meta-row { align-items: center; display: flex; font-size: 0.84rem; gap: 7px; justify-content: space-between; }
.profile-channels-card { background: var(--surface-soft); border: 1px solid var(--line); border-radius: var(--radius); display: flex; flex-direction: column; gap: 10px; padding: 16px; }
.profile-channels-head { align-items: center; display: flex; gap: 10px; }
.profile-channels-title-group { align-items: baseline; display: flex; gap: 8px; }
.profile-channels-title { font-size: 0.98rem; margin: 0; }
.profile-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.daily-limit-profile { background: var(--surface-soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.daily-limit-profile-head { align-items: center; display: flex; gap: 10px; }
.daily-limit-profile-head h3 { flex: 1; font-size: 0.98rem; margin: 0; }
.daily-limit-actions { display: flex; justify-content: flex-end; margin-top: 14px; }
.daily-limit-total { align-items: center; border-bottom: 1px solid var(--line); display: flex; gap: 12px; justify-content: space-between; margin-top: 16px; padding-bottom: 12px; }
.daily-limit-total .switch { flex: none; }
.daily-limit-total-field { margin-top: 12px; }
.daily-limit-channels { display: grid; gap: 8px; margin-top: 18px; }
.daily-limit-channels h4 { font-size: 0.82rem; margin: 0 0 2px; }
/* Keep channel growth inside the list, not the profile panel. */
.daily-limit-channel-list { --channel-list-max-height: 288px; display: grid; align-content: start; gap: 8px; min-width: 0; max-height: var(--channel-list-max-height); overflow-y: auto; scrollbar-gutter: stable; padding: 4px; }
.daily-limit-channel-list:focus-visible { outline: 2px solid var(--brand-deep); outline-offset: 2px; }
.daily-limit-channel-list .daily-limit-channel-name { min-width: 0; overflow-wrap: anywhere; }
.daily-limit-channel-list .select { min-width: 0; max-width: 100%; }
.daily-limit-channel-row { align-items: center; border-top: 1px solid var(--line); display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr) minmax(132px, 0.8fr); padding-top: 8px; }
.daily-limit-channel-name { font-size: 0.84rem; font-weight: 700; }
.profile-delete-channels-action { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.shared-directory-toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; margin-bottom: 16px; }
.shared-directory-toolbar > .field { flex: 1 1 140px; min-width: 0; margin: 0; gap: 4px; }
.shared-directory-toolbar > .shared-directory-search { flex: 2 1 240px; }
.shared-directory-toolbar .input { width: 100%; min-width: 0; min-height: 44px; padding: 8px 10px; }
.shared-directory-toolbar > .button { min-height: 44px; }
.shared-directory-owned-filter { margin: -4px 0 12px; }
.shared-channel-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; width: 100%; margin: 12px 0; }
.shared-channel-result { display: grid; gap: 0; min-width: 0; overflow-wrap: anywhere; }
.shared-channel-result > p { margin: 0; }
.shared-channel-summary { display: grid; gap: 6px; min-width: 0; max-width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); overflow-wrap: anywhere; }
.shared-channel-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.icon-button.shared-channel-preview-btn { background: transparent; border: 0; border-radius: 6px; height: 22px; min-height: 22px; min-width: 22px; width: 22px; flex: 0 0 22px; padding: 0; }
.shared-channel-header .shared-channel-theme { margin: 0; font-size: 0.95rem; font-weight: 700; flex: 1; min-width: 0; }
.shared-channel-header .button.shared-channel-apply-btn { flex-shrink: 0; height: 24px; min-height: 24px; padding: 0 10px; font-size: 0.85rem; }
.shared-channel-theme { margin: 0; font-size: 0.95rem; }
.shared-channel-header .curated-marker { flex-shrink: 0; margin-left: 0; }
.shared-channel-description { margin: 0; color: var(--muted); font-size: 0.85rem; line-height: 1.4; }
.shared-channel-tags { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.shared-channel-tags .tag { display: inline-block; min-width: 0; max-width: 100%; white-space: normal; padding: 2px 8px; font-size: 0.78rem; }
.shared-channel-metadata { display: flex; flex-wrap: wrap; gap: 3px 14px; margin: 0; font-size: 0.78rem; }
.shared-channel-metadata > div { display: inline-flex; align-items: baseline; gap: 4px; min-width: 0; }
.shared-channel-metadata dt { color: var(--muted); }
.shared-channel-metadata dt::after { content: ':'; }
.shared-channel-metadata dd { margin: 0; font-weight: 600; }
.shared-channel-bottom-row { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-top: 2px; padding-top: 6px; border-top: 1px solid var(--line); }
.shared-channel-report-btn, .shared-channel-delete-btn { display: inline-flex; align-items: center; justify-content: center; background: transparent; border: none; cursor: pointer; color: var(--muted); padding: 2px; border-radius: var(--radius-sm); min-width: 28px; min-height: 28px; transition: color 0.15s, background-color 0.15s; }
.shared-channel-report-btn:hover { color: var(--text-color, #1e293b); background: var(--surface-soft, rgba(0, 0, 0, 0.04)); }
.shared-channel-delete-btn { color: var(--danger, #b42318); }
.shared-channel-delete-btn:hover { background: rgba(180, 35, 24, 0.08); }
.shared-channel-date { font-size: 0.78rem; color: var(--muted); text-align: center; flex: 1; padding: 0 4px; }
.shared-channel-like-btn { display: inline-flex; align-items: center; gap: 5px; background: transparent; border: none; cursor: pointer; color: red; font-weight: 700; font-size: 0.88rem; padding: 2px 4px; border-radius: var(--radius-sm); min-height: 28px; transition: background-color 0.15s; }
.shared-channel-like-btn:hover { background: rgba(255, 0, 0, 0.05); }
.shared-channel-like-heart { stroke: red; fill: #ffffff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.shared-channel-like-btn.liked .shared-channel-like-heart { fill: red; }
.shared-channel-like-count { color: red; }
@media (max-width: 600px) { .shared-channel-results { grid-template-columns: 1fr; width: 100%; } }
.shared-channels .button-primary, .shared-publication .button-primary { background: var(--brand-deep); }
.share-channels-footer { display: flex; justify-content: space-between; align-items: center; width: 100%; gap: 8px; flex-wrap: wrap; }
.share-channel-list { display: grid; gap: 8px; margin: 12px 0; }
.share-channel-capsule {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}
.share-channel-capsule:hover {
  background: var(--surface-soft);
  border-color: var(--line-strong, #cbd5e1);
}
.share-channel-capsule:focus-within {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}
.share-channel-capsule.selected {
  border-color: var(--brand);
  background: var(--brand-light, #f0fdf4);
}
.share-channel-capsule input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--brand);
  margin: 0;
}
.share-channel-capsule-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  flex: 1 1 0;
  min-width: 0;
  flex-wrap: wrap;
}
.share-channel-capsule-theme {
  font-weight: 700;
  font-size: 0.95rem;
}
.share-channel-capsule-status {
  font-size: 0.82rem;
  color: var(--muted);
}
.button.delete-channels-btn { background: var(--red-soft); border-color: #f3c4c8; color: #a52832; }
.button.delete-channels-btn:hover:not(:disabled) { background: #ffd8db; border-color: #e5999f; color: #8c1e27; }
.delete-channel-checkbox-list { max-height: 300px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 12px; background: var(--surface-soft); gap: 6px; }
.delete-channel-checkbox-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; cursor: pointer; }
.delete-channel-checkbox-row:not(:last-child) { border-bottom: 1px solid var(--line); }
.delete-channel-checkbox-row input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; accent-color: var(--brand); }
.delete-channel-name { font-weight: 700; font-size: 0.92rem; }
.delete-channel-info { display: flex; align-items: baseline; gap: 6px; flex: 1 1 0; min-width: 0; flex-wrap: wrap; }
.delete-channel-hashtags { overflow-wrap: anywhere; }
.delete-channel-confirm-list { list-style: none; padding: 0; margin: 8px 0; display: flex; flex-direction: column; gap: 6px; max-height: 200px; overflow-y: auto; }
.delete-channel-confirm-list li { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--surface-soft); border-radius: var(--radius-sm); }
.upgrade-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 16px; }
.plan-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.plan-card.active { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand) inset; }
.plan-card h3 { font-size: 1.05rem; margin: 0 0 5px; }
.plan-price { font-size: 1.5rem; font-weight: 850; letter-spacing: -0.04em; }
.plan-list { color: var(--muted); display: grid; gap: 5px; font-size: 0.84rem; list-style: none; margin: 13px 0 16px; padding: 0; }
.plan-list li::before { color: var(--brand); content: "✓"; font-weight: 850; margin-right: 7px; }
.settings-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1.4fr) minmax(260px, 0.6fr); }
.settings-profile-limits { margin-top: 24px; }
.settings-legal-agreements { margin-top: 24px; }
.settings-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-soft); padding: 20px; }
.settings-card h3 { font-size: 1.05rem; margin: 0 0 16px; }
.subscription-header { align-items: center; display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; margin-bottom: 16px; }
.subscription-header h3 { margin: 0; }
.subscription-stats { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 16px; }
.subscription-stats .stat-card { box-shadow: none; min-width: 0; padding: 14px; }
.plan-change-menu { background: var(--surface-soft); border: 1px solid var(--line); border-radius: 12px; margin-top: 16px; padding: 14px; }
.plan-change-menu h4 { font-size: 0.94rem; margin: 0 0 4px; }
.plan-choice-grid { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 12px; }
.plan-choice { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; display: flex; flex-direction: column; gap: 6px; padding: 12px; }
.plan-choice.active { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand) inset; }
.plan-choice strong { font-size: 0.88rem; }
.plan-choice span { color: var(--muted); font-size: 0.76rem; line-height: 1.45; }
.plan-choice .button { margin-top: auto; width: 100%; }
.form-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid .field.full { grid-column: 1 / -1; }
.form-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
.saved-note { color: var(--green); font-size: 0.84rem; font-weight: 700; }
.locked-panel { align-items: center; background: var(--surface-soft); border: 1px dashed var(--line-strong); border-radius: var(--radius); display: flex; flex-direction: column; gap: 9px; padding: 28px 18px; text-align: center; }
.locked-icon { align-items: center; background: var(--yellow-soft); border-radius: 50%; color: #8a6100; display: inline-flex; height: 48px; justify-content: center; width: 48px; }
.analytics-table { border-collapse: collapse; width: 100%; }
.analytics-table th, .analytics-table td { border-bottom: 1px solid var(--line); padding: 12px 10px; text-align: left; }
.analytics-table th { color: var(--muted); font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; }
.analytics-table td { font-size: 0.88rem; }
.per-kid-summary .analytics-table { min-width: 0; table-layout: fixed; margin-bottom: 24px; }
.per-kid-summary .analytics-table caption { text-align: left; padding: 8px 10px; }
.per-kid-summary .analytics-table th { width: 40%; font-size: 0.88rem; letter-spacing: normal; text-transform: none; }
.per-kid-summary .analytics-table th, .per-kid-summary .analytics-table td { vertical-align: top; overflow-wrap: anywhere; }
.analytics-chart-section { border-bottom: 1px solid var(--line); margin-bottom: 18px; padding-bottom: 20px; }
.analytics-chart-section .card-header { margin-bottom: 10px; }
.channel-share-chart { display: grid; gap: 14px; min-width: 0; width: 100%; }
.chart-canvas-wrap { height: 220px; min-width: 0; position: relative; width: 100%; }
.chart-legend { display: grid; gap: 8px; min-width: 0; padding-right: 18px; }
.chart-legend-item { align-items: center; display: flex; gap: 10px; font-size: 0.82rem; min-width: 0; }
.chart-legend-dot { border-radius: 50%; flex: none; height: 9px; width: 9px; }
.chart-legend-item .od-fill { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chart-legend-item strong { flex: none; font-variant-numeric: tabular-nums; text-align: right; }
.recent-channel-callout { align-items: center; background: var(--surface-soft); border: 1px solid var(--line); border-radius: 12px; display: flex; gap: 12px; justify-content: space-between; margin-bottom: 20px; padding: 12px 14px; }
.recent-channel-callout > div { display: grid; gap: 3px; }
.recent-channel-callout strong { font-size: 0.94rem; }
.recent-channel-callout > .icon { color: var(--brand-deep); flex: none; }
.watch-log { display: grid; gap: 9px; }
.watch-log-row { align-items: center; background: var(--surface-soft); border: 1px solid var(--line); border-radius: 12px; display: flex; gap: 10px; justify-content: space-between; padding: 11px 12px; }
.watch-log-row strong { font-size: 0.88rem; }
.watch-log-row span { color: var(--muted); font-size: 0.78rem; }

.kid-layout { min-height: 100vh; }
.kid-topbar { align-items: center; background: var(--surface); border-bottom: 1px solid var(--line); display: flex; gap: 12px; justify-content: space-between; min-height: 72px; padding: 13px 18px; position: sticky; top: 0; z-index: 25; }
.kid-topbar .brand-mark { height: 42px; width: 42px; }
.kid-topbar .brand-mark img { height: 34px; width: auto; }
.kid-topbar-title { display: grid; gap: 0; min-width: 0; }
.kid-topbar-title strong { font-size: 0.98rem; }
.kid-topbar-title span { color: var(--muted); font-size: 0.76rem; }
.kid-like-button { gap: 8px; color: var(--red); }
.kid-like-button .icon { height: 18px; stroke-width: 2.2; width: 18px; }
.kid-like-button:hover:not(:disabled) { border-color: var(--red); color: var(--red); }
.kid-like-button.is-liked { background: var(--red-soft); border-color: var(--red); color: var(--red); }
.kid-main { margin: 0 auto; max-width: 1040px; padding: 22px 18px 96px; width: 100%; }
.kid-head { align-items: flex-start; display: flex; gap: 14px; justify-content: space-between; margin-bottom: 8px; }
.kid-head h1 { font-size: clamp(1.55rem, 3vw, 2.2rem); letter-spacing: -0.045em; line-height: 1.05; margin: 0; }
.youtube-logo { display: block; height: clamp(24px, 3vw, 32px); width: auto; }
.kid-head-actions { align-items: flex-end; display: flex; flex-direction: column; gap: 8px; }
.kid-head-actions .eyebrow { margin: 0; }
.kid-head p { color: var(--muted); margin: 12px 0 0; }
@media (min-width: 521px) { .kid-head > div:first-child { align-self: flex-end; } }
.player-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; }
.video-frame { background: #0d1114; aspect-ratio: 16 / 9; min-width: 200px; min-height: 200px; position: relative; width: 100%; }
.video-frame iframe { border: 0; height: 100%; inset: 0; position: absolute; width: 100%; pointer-events: none; }
html[data-mobile-app="1"] .video-frame iframe { pointer-events: auto; } /* plan 30 T8: the store app never covers the player */
.video-shield { position: absolute; inset: 0; z-index: 2; cursor: pointer; background: transparent; }
.video-frame:fullscreen,
.video-frame:-webkit-full-screen,
.video-frame.is-maximized { position: fixed !important; inset: 0 !important; width: 100vw !important; height: 100vh !important; max-width: 100vw !important; max-height: 100vh !important; z-index: 99999 !important; background: #000 !important; }
.video-fullscreen-exit-button { position: absolute; top: 16px; right: 16px; z-index: 100000; background: rgba(0, 0, 0, 0.75); color: #fff; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 50%; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.video-fullscreen-exit-button:hover { background: rgba(0, 0, 0, 0.95); }
.player-loading { align-items: center; background: rgba(13,17,20,0.72); color: #fff; display: flex; gap: 10px; inset: 0; justify-content: center; position: absolute; }
.player-loading.is-hidden { display: none; }
.player-error { display: block; max-width: 320px; font-size: 0.82rem; line-height: 1.4; text-align: center; }
.skeleton { animation: pulse 1.2s ease-in-out infinite; background: rgba(255,255,255,0.16); border-radius: 8px; height: 12px; width: 110px; }
.player-controls { padding: 10px 16px 8px; }
.player-title-row { align-items: flex-start; display: flex; gap: 12px; justify-content: space-between; }
.player-controls-row { align-items: center; display: flex; gap: 12px; justify-content: space-between; margin: 4px 0 8px; }
.player-controls-row .volume-row { align-items: center; display: flex; flex: 0 0 auto; gap: 8px; justify-content: flex-start; }
.player-controls-row .player-control-layout { align-items: center; display: flex; flex: 1 1 auto; gap: clamp(10px, 2vw, 24px); justify-content: center; margin: 0; }
.control-cluster { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.control-cluster-label { color: var(--muted); font-size: 0.75rem; font-weight: 750; letter-spacing: 0.02em; line-height: 1.1; text-align: center; user-select: none; }
.player-controls-row .like-maximize-group { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 0 0 auto; }
.player-controls-row .maximize-button { display: inline-flex; align-items: center; justify-content: center; min-height: 28px; padding: 4px 8px; background: transparent; border: 0; color: var(--ink); cursor: pointer; border-radius: var(--radius-sm); }
.player-controls-row .maximize-button:hover { background: var(--surface-soft); }
.player-controls-row .player-like-button { align-items: center; background: transparent; border: 0; color: #d9383a; display: inline-flex; flex: 0 0 auto; font-size: 0.95rem; font-weight: 700; gap: 6px; padding: 6px 10px; cursor: pointer; }
.player-controls-row .player-like-button:hover:not(:disabled) { background: rgba(217, 56, 58, 0.08); border-radius: var(--radius-sm); color: #d9383a; }
.player-controls-row .player-like-button.is-liked { background: transparent; color: #d9383a; }
.player-play-button { min-width: 52px; min-height: 42px; border-radius: 12px; }
.channel-control-buttons { display: flex; flex: none; gap: 8px; }
.control-row { align-items: center; display: flex; flex: none; gap: 8px; justify-content: flex-end; }
.control-button { align-items: center; background: var(--surface-soft); border: 1px solid var(--line); border-radius: 12px; color: var(--ink); display: inline-flex; justify-content: center; min-height: 40px; min-width: 44px; padding: 6px 10px; }
.control-button:hover:not(:disabled) { border-color: var(--brand); color: var(--brand-deep); }
.control-button.primary { background: var(--red); border-color: var(--red); color: #fff; }
.control-button.primary:hover:not(:disabled) { background: #bd2d37; }
.control-button:disabled { opacity: 0.42; }
.progress-track { background: #dce8e9; border-radius: 999px; cursor: default; display: block; height: 6px; margin: 0 0 3px; pointer-events: none; position: relative; user-select: none; }
.progress-fill { background: var(--brand); border-radius: 999px; height: 100%; min-width: 0; position: relative; }
.progress-fill::after { display: none; }
.progress-time { color: var(--muted); display: flex; font-size: 0.74rem; line-height: 1.2; justify-content: space-between; margin-bottom: 4px; }
.skip-badge-row { align-items: center; display: flex; justify-content: center; margin: 4px 0 2px; }
.skip-badge { background: #e9ecf8; border-radius: 999px; color: #4361c4; font-size: 0.76rem; font-weight: 800; padding: 4px 12px; white-space: nowrap; }
.skip-badge.full { background: var(--red-soft); color: #a52832; }
.volume-row { align-items: center; display: flex; gap: 10px; justify-content: center; }
.volume-row input { accent-color: var(--brand); width: 110px; }
.parent-preview-controls { align-items: center; display: flex; gap: 12px; justify-content: center; margin: 16px 0; }
.preview-attribution { text-align: center; margin-top: 16px; }
.visually-hidden { border: 0; clip: rect(0, 0, 0, 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px; }
.channel-widget { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); margin-top: 18px; padding: 18px; }
.channel-widget-head { align-items: flex-start; display: flex; gap: 12px; justify-content: space-between; margin-bottom: 14px; }
.channel-widget-head h2 { font-size: 1.12rem; margin: 0; }
.channel-widget-head p { color: var(--muted); font-size: 0.82rem; margin: 3px 0 0; }
.channel-list { display: grid; gap: 9px; }
.channel-row { align-items: center; background: var(--surface-soft); border: 1px solid var(--line); border-radius: 15px; display: grid; gap: 13px; grid-template-columns: minmax(120px, 200px) minmax(0, 1fr); padding: 12px; text-align: left; width: 100%; }
.channel-row:hover { border-color: var(--brand); }
.channel-row.active { background: var(--brand-soft); border-color: var(--brand); }
.channel-row-content { display: grid; gap: 4px; min-width: 0; }
.channel-row-name { font-size: 0.94rem; font-weight: 800; }
.channel-row-desc { color: var(--muted); font-size: 0.78rem; }
.upcoming-list { display: grid; gap: 6px; }
.upcoming-item { align-items: center; display: grid; column-gap: 8px; row-gap: 4px; grid-template-columns: auto minmax(0, 1fr); min-width: 0; }
/* YouTube playback thumbnails require at least 120 × 70px; 128 × 72 preserves 16:9. */
.upcoming-thumb { align-items: center; aspect-ratio: 16 / 9; background: var(--blue-soft); border: 1px solid var(--line); border-radius: 8px; color: var(--brand-deep); display: inline-flex; justify-content: center; overflow: hidden; position: relative; width: 128px; min-width: 120px; min-height: 70px; }
.upcoming-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.upcoming-details { display: grid; gap: 3px; min-width: 0; }
.upcoming-channel { color: var(--brand-deep); font-size: 0.78rem; font-weight: 800; overflow-wrap: anywhere; }
.upcoming-description { color: var(--muted); font-size: 0.78rem; overflow-wrap: anywhere; }
.upcoming-time { color: var(--brand-deep); display: block; align-self: end; font-size: 0.74rem; font-weight: 800; white-space: nowrap; }
.upcoming-item .upcoming-title { display: block; align-self: start; }
.upcoming-title { color: #263439; flex: 1 1 0; font-size: 0.82rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upcoming-title.current { color: var(--brand-deep); font-weight: 750; }
.kid-footer-note { color: var(--muted); font-size: 0.78rem; margin: 14px 2px 0; }
.captions-note { color: var(--ink); font-size: 1rem; margin: 6px 0 2px; text-align: center; }

/* Older-adult (large_text) Viewer Mode: larger type, larger tap targets, stronger contrast. */
.kid-layout.large-text .kid-topbar-title strong { font-size: 1.25rem; }
.kid-layout.large-text .kid-topbar-title span { color: var(--ink); font-size: 1rem; }
.kid-layout.large-text .control-cluster-label { color: var(--ink); font-size: 0.95rem; }
.kid-layout.large-text .control-button { border: 2px solid var(--ink); min-height: 56px; min-width: 60px; }
.kid-layout.large-text .control-button .icon { height: 26px; width: 26px; }
.kid-layout.large-text .control-button:disabled { opacity: 0.6; }
.kid-layout.large-text .player-controls-row .player-like-button { font-size: 1.15rem; min-height: var(--touch-target); }
.kid-layout.large-text .volume-row input { width: 160px; }
.kid-layout.large-text .volume-row .small,
.kid-layout.large-text .channel-row .muted.small { color: var(--ink); font-size: 0.95rem; }
.kid-layout.large-text .progress-track { height: 10px; }
.kid-layout.large-text .progress-time,
.kid-layout.large-text .skip-badge { color: var(--ink); font-size: 0.95rem; }
.kid-layout.large-text .channel-widget-head h2 { font-size: 1.4rem; }
.kid-layout.large-text .channel-row-name { font-size: 1.18rem; }
.kid-layout.large-text .channel-row-desc,
.kid-layout.large-text .upcoming-title,
.kid-layout.large-text .upcoming-channel,
.kid-layout.large-text .upcoming-description,
.kid-layout.large-text .upcoming-time { color: var(--ink); font-size: 1rem; }

@media (prefers-contrast: more) {
  .control-button { border-color: var(--ink); }
  .control-button:disabled { opacity: 0.6; }
  .control-cluster-label, .progress-time, .channel-row-desc, .upcoming-description, .kid-topbar-title span { color: var(--ink); }
}

.modal-backdrop { align-items: center; background: rgba(10, 25, 29, 0.48); display: flex; inset: 0; padding: 18px; position: fixed; z-index: 100; }
.modal { background: var(--surface); border-radius: var(--radius-lg); box-shadow: 0 28px 80px rgba(8, 30, 35, 0.25); max-height: min(760px, calc(100vh - 36px)); overflow-y: auto; width: 100%; }
.modal-small { max-width: 430px; }
.app-dialog { border: 0; color: var(--ink); margin: auto; padding: 0; width: calc(100% - 32px); max-height: calc(100dvh - 32px); }
.app-dialog::backdrop { background: rgba(10, 25, 29, 0.48); }
.modal-wide { max-width: 760px; }
dialog.parent-preview { border: 0; padding: 0; color: var(--ink); width: calc(100% - 32px); margin: auto; }
.parent-preview > .modal-head { position: sticky; top: 0; z-index: 2; background: var(--surface); }
.channel-queue-summary { padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-soft); }
.channel-queue-summary p { margin: 0; }
.button.channel-preview-button {
  box-sizing: border-box;
  display: inline-flex;
  width: 100%;
  max-width: 240px;
  min-height: 44px;
  padding: 8px 12px;
  gap: 8px;
  border-radius: var(--radius-sm);
  border-color: var(--ink);
  text-align: left;
  white-space: nowrap;
}
.channel-preview-button > svg { flex: none; }
.channel-preview-button > span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.icon-button.parent-preview-close { flex: 0 0 44px; border-radius: 4px; font: 700 20px/1 var(--font-ui); }
.parent-preview-head-actions { display: flex; gap: 8px; flex: none; }
.parent-preview .modal-body { --od-gap: 16px; }
.parent-preview p, .parent-preview h3 { margin: 0; overflow-wrap: anywhere; font-size: 16px; line-height: 1.5; }
.preview-guidance { background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); overflow: hidden; }
.preview-guidance > summary { cursor: pointer; font-weight: 750; padding: 11px 14px; }
.preview-guidance > summary::marker { color: var(--brand-deep); }
.preview-guidance[open] > summary { border-bottom: 1px solid var(--line-strong); }
.preview-guidance-copy { display: grid; gap: 8px; padding: 12px 14px 14px; }
.preview-video { display: block; width: 100%; aspect-ratio: 16 / 9; min-height: 200px; border: 0; }
.preview-video iframe { display: block; width: 100%; height: 100%; min-height: 200px; border: 0; }
.youtube-mount { width: 100%; height: 100%; }
.playback-feedback { display: grid; gap: 8px; font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; }
.playback-feedback p { margin: 0; }
.playback-feedback p:empty { display: none; }
.playback-feedback .button { min-height: 44px; }
.playback-feedback a { text-decoration: none; }
.preview-queue { max-height: 288px; overflow-y: auto; overscroll-behavior: contain; margin: 0; padding: 4px 4px 4px 32px; }
.preview-queue li + li { margin-top: 8px; }
.preview-queue button { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 44px; padding: 8px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); text-align: left; font: inherit; cursor: pointer; }
.preview-queue button span { display: block; overflow-wrap: anywhere; }
.preview-queue button[aria-current] { background: var(--brand-soft); font-weight: 700; }
.parent-preview :focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
@media (hover: hover) { .preview-queue button:hover { background: var(--surface-soft); } }
.modal-head { align-items: flex-start; border-bottom: 1px solid var(--line); display: flex; gap: 12px; justify-content: space-between; padding: 19px 21px 16px; }
.modal-head-actions { align-items: center; display: flex; flex: 0 0 auto; gap: 2pt; }
.modal-head h2 { font-size: 1.22rem; letter-spacing: -0.03em; margin: 0; }
.modal-head p { color: var(--muted); font-size: 0.84rem; margin: 4px 0 0; }
.modal-body { padding: 20px 21px; }
.modal-foot { align-items: center; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 9px; justify-content: flex-end; padding: 15px 21px; }
.pin-card { display: grid; gap: 14px; }
.pin-input { font-size: 1.6rem; font-weight: 850; letter-spacing: 0.35em; text-align: center; }
.channel-editor { display: grid; gap: 12px; }
.profile-channels { min-width: 0; }
.profile-editor-actions { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 8px; width: 100%; }
.profile-editor-actions .button { flex: 0 1 auto; min-width: 0; padding-inline: 8px; white-space: nowrap; }
.profile-editor-save { margin-left: auto; }
.update-shared-footer { margin: 0; }
.profile-channels .channel-editor-row:first-child { border-top: 4px solid var(--line-strong); padding-top: 24px; }
.profile-channels > .card-header { align-items: center; flex-wrap: wrap; margin-bottom: 4px; }
.channel-limit-status { margin: 0 0 4px; }
.channel-selector { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 12px; }
.channel-selector-button { align-items: center; background: var(--surface-soft); border: 1px solid var(--line); border-radius: 999px; color: var(--ink); cursor: pointer; display: inline-flex; font: inherit; font-weight: 750; gap: 7px; min-height: 44px; padding: 8px 13px; }
.channel-selector-button:hover, .channel-selector-button.active { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); color: var(--brand-deep); }
.channel-selector-button:focus-visible { outline: 3px solid rgba(21, 157, 184, 0.34); outline-offset: 2px; }
.curated-marker { background: var(--blue-soft); color: #3452bd; margin-left: 8px; }
.channel-selector-button .curated-marker { margin-left: 0; }
.moderation-disabled-marker { background: var(--red-soft); color: #9f2631; margin-left: 8px; }
.channel-selector-button .moderation-disabled-marker { margin-left: 0; }
.curated-import-fields { background: var(--blue-soft); border: 1px solid #c7d3ff; border-radius: var(--radius-sm); padding: 14px; }
.curated-import-fields p { margin: 4px 0 10px; }
.channel-source-picker { border: 0; margin: 0; min-width: 0; padding: 0; }
.channel-source-option { align-items: center; cursor: pointer; display: inline-flex; gap: 6px; min-height: var(--touch-target); }
.channel-source-input { display: flex; flex-wrap: wrap; gap: 8px; }
.channel-source-input .input { flex: 1 1 260px; min-width: 0; }
.channel-source-card { align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); display: flex; gap: 12px; padding: 12px; }
.channel-source-card img { border-radius: 8px; flex: none; object-fit: cover; }
.channel-source-card p { margin: 0; }
.channel-source-upgrade { background: var(--blue-soft); border: 1px solid #c7d3ff; border-radius: var(--radius-sm); padding: 12px 14px; }
.channel-source-error p { color: #a52832; margin: 0 0 6px; }
.profile-channels .channel-editor-row { background: none; border: 0; border-radius: 0; grid-template-columns: minmax(0, 1fr); padding: 0; }
.profile-channels .channel-editor-row + .channel-editor-row { border-top: 4px solid var(--line-strong); margin-top: 12px; padding-top: 24px; }
.channel-editor-row { align-items: flex-start; background: var(--surface-soft); border: 1px solid var(--line); border-radius: 14px; display: grid; gap: 11px; grid-template-columns: minmax(0, 1fr) auto; padding: 13px; }
.channel-editor-row h3 { font-size: 0.95rem; margin: 0; }
.channel-editor-row p { color: var(--muted); font-size: 0.78rem; margin: 3px 0 0; }
.channel-editor-actions { display: flex; gap: 7px; }
.avatar-picker { display: flex; flex-wrap: wrap; gap: 9px; }
.swatch { align-items: center; border: 3px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px var(--line-strong); display: inline-flex; height: 38px; justify-content: center; width: 38px; }
.swatch.selected { box-shadow: 0 0 0 2px var(--brand); }
.hashtag-input, .theme-input { display: flex; flex-flow: row nowrap; align-items: center; gap: 8px; min-width: 0; }
.hashtag-input .input, .theme-input .input { flex: 1 1 0; min-width: 0; }
.hashtag-input .icon-button, .theme-input .icon-button { flex: 0 0 44px; width: 44px; min-height: 44px; }
.hashtag-input .button, .theme-input .button { flex: 0 0 auto; min-height: 44px; }
.theme-input .channel-color-picker { flex: 0 0 54px; width: 54px; height: 44px; min-height: 44px; padding: 3px; }
.icon-button.channel-delete-btn, .button.channel-delete-btn, .icon-button.curated-remove-video-btn { background: var(--red-soft); border-color: #f3c4c8; color: #a52832; }
.icon-button.channel-delete-btn:hover:not(:disabled), .button.channel-delete-btn:hover:not(:disabled), .icon-button.curated-remove-video-btn:hover:not(:disabled) { background: #ffd8db; border-color: #e5999f; color: #8c1e27; }
.icon-button.curated-delete-channel-btn { background: var(--red); border-color: var(--red); color: #fff; }
.icon-button.curated-delete-channel-btn:hover:not(:disabled) { background: #b8303a; border-color: #b8303a; color: #fff; }
.empty-state { align-items: center; background: var(--surface-soft); border: 1px dashed var(--line-strong); border-radius: var(--radius); display: flex; flex-direction: column; gap: 8px; padding: 28px 18px; text-align: center; }
.empty-icon { align-items: center; background: var(--brand-soft); border-radius: 50%; color: var(--brand-deep); display: inline-flex; height: 46px; justify-content: center; width: 46px; }
.empty-state h3 { font-size: 1rem; margin: 0; }
.empty-state p { color: var(--muted); font-size: 0.86rem; margin: 0; max-width: 42ch; }
.empty-state-create-button { margin-top: 8px; }
.error-state { align-items: center; background: var(--red-soft); border: 1px solid #f3c4c8; border-radius: var(--radius); display: flex; gap: 10px; padding: 13px 14px; }
.error-state strong { color: #9f2631; }
.loading-state { align-items: center; display: flex; gap: 10px; justify-content: center; min-height: 150px; }
.content-review { display: grid; gap: 18px; }
.content-review-search, .content-review-section { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-soft); display: grid; gap: 12px; padding: 18px; }
.content-review-search .input, .content-review-section textarea { width: 100%; }
.content-review-list { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.content-review-card { background: var(--surface-soft); border: 1px solid var(--line); border-radius: var(--radius-sm); display: grid; gap: 8px; padding: 14px; text-align: left; }
button.content-review-card { color: var(--ink); cursor: pointer; font: inherit; min-height: 64px; }
button.content-review-card:hover, button.content-review-card.selected { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); }
.content-review-heading, .content-review-pager { align-items: center; display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; }
.content-review-heading h2 { margin-bottom: 4px; }
.content-review-queue { display: grid; gap: 10px; }
.content-review-video { align-items: start; border-top: 1px solid var(--line); display: grid; gap: 12px; grid-template-columns: 160px minmax(0, 1fr); padding-top: 12px; }
.content-review-video img { aspect-ratio: 16 / 9; background: var(--surface-soft); border-radius: var(--radius-sm); object-fit: cover; width: 100%; }
.content-review-video p { margin: 4px 0; }
.content-message-preview { background: var(--surface-soft); border-radius: var(--radius-sm); font: inherit; margin: 0; overflow-wrap: anywhere; padding: 14px; white-space: pre-wrap; }
.content-delivery { border-radius: var(--radius-sm); font-weight: 700; padding: 12px; }
.content-delivery.sent { background: var(--brand-soft); color: var(--brand-deep); }
.content-delivery.failed, .content-delivery.unknown { background: var(--yellow-soft); color: #765500; }
.content-workspace, .curated-workspace { display: grid; gap: 18px; }
.content-tabs { border-bottom: 1px solid var(--line); display: flex; gap: 4px; }
.content-tab { background: transparent; border: 0; border-bottom: 3px solid transparent; color: var(--muted); cursor: pointer; font: inherit; font-weight: 800; padding: 11px 14px; }
.content-tab:hover, .content-tab.active { border-bottom-color: var(--brand); color: var(--brand-deep); }
.content-tab:focus-visible { outline: 3px solid rgba(21, 157, 184, 0.34); outline-offset: 2px; }
.curated-search-section, .curated-editor { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-soft); display: grid; gap: 14px; padding: 18px; }
.curated-search-section { width: 100%; box-sizing: border-box; }
.curated-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.curated-search-field { display: grid; gap: 4px; flex: 1 1 200px; }
.curated-search-field:first-child { flex: 2 1 260px; }
.curated-search-buttons { display: flex; gap: 8px; align-items: center; }
.curated-results-table-wrap { width: 100%; overflow-x: auto; }
.curated-results-table { width: 100%; border-collapse: separate; border-spacing: 6px; table-layout: fixed; }
.curated-results-cell { width: 20%; padding: 0; vertical-align: top; }
.curated-results-cell .curated-channel-card { width: 100%; min-height: 58px; box-sizing: border-box; }
.curated-selected-videos { display: grid; gap: 9px; }
.curated-channel-card { background: var(--surface-soft); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink); cursor: pointer; display: grid; font: inherit; gap: 4px; padding: 12px; text-align: left; }
.curated-channel-card:hover, .curated-channel-card.selected { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); }
.curated-channel-card span { color: var(--muted); font-size: 0.78rem; }
.curated-channel-card .badge { margin-right: 2px; }
.curated-channel-card .curated-status-published { background: var(--brand-soft); color: var(--brand-deep); }
.curated-channel-card .curated-status-draft { background: var(--yellow-soft); color: #765500; }
.curated-channel-card .curated-status-unpublished, .curated-channel-card .curated-status-revoked { background: var(--red-soft); color: #9f2631; }
.curated-editor-heading, .curated-section-heading, .curated-editor-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; }
.curated-editor-heading h2, .curated-section-heading h3 { margin: 0; }
.curated-section-heading .od-cluster { flex-wrap: nowrap; }
.curated-disclosure-body { display: grid; gap: 12px; }
.curated-disclosure-body[hidden] { display: none; }
.curated-editor-actions { justify-content: flex-start; }
.curated-editor-actions .od-cluster { margin-left: auto; }
.curated-youtube-attribution { display: inline-flex; flex-shrink: 0; }
.curated-youtube-attribution img { display: block; height: 24px; width: auto; }
.curated-public-details { display: grid; gap: 10px; }
.curated-details-row { align-items: start; display: grid; gap: 10px 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.curated-details-title-row { grid-template-columns: minmax(0, 1fr) auto; }
.curated-details-description-row { grid-template-columns: minmax(0, 1fr); }
.curated-public-details .field, .curated-checkbox-field legend { font-size: 0.86rem; font-weight: 700; gap: 4px; }
.curated-editor .input { font-weight: 400; min-height: 38px; padding-block: 6px; }
.curated-editor textarea.input { resize: vertical; }
.curated-checkbox-field { border: 0; margin: 0; min-width: 0; padding: 0; }
.curated-checkbox-field legend { margin-bottom: 4px; padding: 0; }
.curated-checkbox-options { display: flex; flex-wrap: wrap; gap: 2px 14px; }
.curated-checkbox-options .check-row { align-items: center; cursor: pointer; display: inline-flex; font-size: 0.88rem; font-weight: 600; gap: 6px; min-height: 30px; }
.curated-checkbox-options input { accent-color: var(--brand); height: 18px; margin: 0; width: 18px; }
.curated-editor .empty-state { position: relative; }
.curated-editor .empty-state .curated-create-circle-btn { position: absolute; right: 12px; top: 12px; }
.curated-create-circle-btn { width: 44px; height: 44px; min-width: 44px; min-height: 44px; box-sizing: border-box; border-radius: 50% !important; padding: 0 !important; display: inline-flex !important; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 700; line-height: 1; box-shadow: var(--shadow-soft); cursor: pointer; }
.curated-create-circle-btn:focus-visible { outline: 3px solid rgba(21, 157, 184, 0.4); outline-offset: 2px; }
.curated-close-editor-btn { width: 36px; height: 36px; min-width: 36px; min-height: 36px; box-sizing: border-box; border-radius: 6px !important; padding: 0 !important; display: inline-flex !important; align-items: center; justify-content: center; font-size: 1.15rem; font-weight: 700; line-height: 1; cursor: pointer; }
.curated-close-editor-btn:focus-visible { outline: 3px solid rgba(21, 157, 184, 0.4); outline-offset: 2px; }
.curated-search-terms-field { display: grid; gap: 4px; }
.curated-search-type-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 2px; }
.curated-radio-group { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.curated-radio-label { display: inline-flex; align-items: center; gap: 6px; font-size: 0.9rem; font-weight: 600; cursor: pointer; }
.curated-radio-label input[type="radio"] { cursor: pointer; accent-color: var(--brand); width: 16px; height: 16px; }
.curated-video-filter-row { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.curated-video-filter { display: grid; font-size: 0.78rem; font-weight: 700; gap: 3px; }
.curated-video-filter .select { box-sizing: border-box; min-height: 36px; width: 100%; }
.curated-search-action-row { display: flex; justify-content: flex-start; margin-top: 4px; }
.curated-selected-source-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; background: var(--surface-soft); border: 1px solid var(--brand); border-radius: var(--radius-sm); }
.curated-sources-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.curated-source-card { background: var(--surface-soft); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px; display: grid; gap: 12px; grid-template-columns: auto minmax(0, 1fr); align-items: start; }
.curated-source-thumb { width: 96px; height: 96px; border-radius: var(--radius-sm); object-fit: cover; }
.curated-source-card.is-channel .curated-source-thumb { border-radius: 50%; }
.curated-source-card.is-playlist .curated-source-thumb { width: 160px; height: 90px; }
.curated-source-thumb-fallback { align-items: center; background: var(--brand-soft); color: var(--brand-deep); display: inline-flex; justify-content: center; }
.curated-source-card .curated-source-resolve-btn { border-radius: 8px; height: 40px; min-height: 40px; min-width: 40px; width: 40px; }
.curated-source-card .curated-import-all-btn { align-self: flex-start; border-radius: var(--radius-sm); min-height: var(--touch-target); }
.curated-source-info { display: flex; flex-direction: column; gap: 4px; overflow: hidden; }
.curated-source-title { font-size: 0.92rem; font-weight: 700; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.curated-source-owner { font-size: 0.8rem; color: var(--muted); }
.curated-source-desc { font-size: 0.75rem; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0; }
.curated-triage-container { display: grid; gap: 12px; }
.curated-triage-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; background: var(--surface-soft); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.curated-select-all-label { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 0.9rem; cursor: pointer; }
.curated-select-all-label input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--brand); cursor: pointer; }
.curated-triage-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.curated-triage-card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-soft); transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.curated-triage-card.selected { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); }
.curated-triage-thumb-wrap { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; overflow: hidden; }
.curated-triage-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.curated-card-checkbox { position: absolute; top: 8px; left: 8px; width: 24px; height: 24px; margin: 0; accent-color: var(--brand); cursor: pointer; z-index: 2; }
.curated-triage-thumb-wrap .curated-card-preview { background: rgba(255, 255, 255, 0.92); border-radius: 8px; height: 36px; min-height: 36px; min-width: 36px; position: absolute; right: 8px; top: 8px; width: 36px; z-index: 2; }
.curated-triage-body { padding: 10px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.curated-triage-title { font-size: 0.88rem; font-weight: 700; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.curated-triage-by { font-size: 0.78rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.curated-editor .curated-color-input { height: 38px; min-height: 38px; padding: 3px; width: 38px; }
.curated-video-search { display: grid; gap: 10px; }
.curated-video-search .input { width: 100%; box-sizing: border-box; }
.curated-selected-video img, .curated-video-preview img { aspect-ratio: 16 / 9; background: var(--surface-soft); border-radius: var(--radius-sm); object-fit: cover; width: 100%; }
.curated-selected-videos { list-style: none; margin: 0; padding: 0; }
.curated-selected-video { align-items: center; border-top: 1px solid var(--line); display: grid; gap: 12px; grid-template-columns: auto 128px minmax(0, 1fr) auto; padding-top: 10px; }
.curated-selected-video.is-drop-target { box-shadow: inset 0 0 0 2px var(--brand); }
.curated-selected-video:first-child { border-top: 0; padding-top: 0; }
.curated-position { align-items: center; background: var(--brand-soft); border-radius: 50%; color: var(--brand-deep); cursor: grab; display: inline-flex; font-weight: 850; height: 28px; justify-content: center; touch-action: none; user-select: none; width: 28px; }
.curated-position.is-dragging { cursor: grabbing; outline: 2px solid var(--brand); outline-offset: 2px; }
.curated-selected-video-info { display: grid; gap: 2px; grid-column: 3; }
.curated-order-actions { display: flex; gap: 6px; grid-column: 4; justify-content: flex-end; }
.curated-order-actions .icon-button, .curated-editor-actions .curated-delete-channel-btn { border-radius: 8px; height: 40px; min-height: 40px; min-width: 40px; width: 40px; }
.curated-channel-preview, .curated-video-preview { display: grid; gap: 12px; }
.curated-preview-heading { align-items: start; display: flex; gap: 12px; }
.curated-preview-heading h3, .curated-preview-heading p { margin: 0; }
.curated-color { border-radius: 50%; flex: 0 0 28px; height: 28px; }
.curated-preview-videos { display: grid; gap: 6px; margin: 0; padding-left: 22px; }
.toast { background: #14272b; border-radius: 12px; box-shadow: 0 12px 30px rgba(8, 30, 35, 0.24); bottom: 22px; color: #fff; font-size: 0.86rem; font-weight: 700; left: 50%; max-width: min(420px, calc(100vw - 32px)); padding: 12px 16px; position: fixed; transform: translateX(-50%); z-index: 200; }
.badge { align-items: center; align-self: center; border-radius: 999px; display: inline-flex; font-size: 0.72rem; font-weight: 800; justify-content: center; line-height: 1.2; padding: 5px 8px; }
.badge.free { background: var(--yellow-soft); color: #765500; }
.badge.paid { background: var(--brand-soft); color: var(--brand-deep); }
.badge.kid { background: var(--blue-soft); color: #3452bd; }
.profile-picker { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); padding: 24px; }
.profile-picker-head { align-items: flex-start; display: flex; gap: 18px; justify-content: space-between; margin-bottom: 22px; }
.profile-picker-head h1 { font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: -0.045em; line-height: 1.05; margin: 0; }
.profile-picker-head .lead { margin: 5px 0 0; max-width: 48ch; }
.profile-picker-grid { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.profile-picker-card { align-items: center; background: var(--surface-soft); border: 1px solid var(--line); border-radius: 18px; display: flex; flex-direction: column; gap: 8px; min-height: 160px; justify-content: center; padding: 22px 16px; text-align: center; }
.profile-picker-card:hover { border-color: var(--brand); box-shadow: var(--shadow-soft); transform: translateY(-1px); }
.profile-picker-card .avatar { height: 68px; width: 68px; font-size: 1.35rem; }
.profile-picker-name { display: block; font-size: 1.05rem; font-weight: 800; }
.profile-picker-lock { background: var(--yellow-soft); border-radius: 999px; color: var(--ink); font-size: 0.72rem; font-weight: 800; padding: 5px 8px; }
.profile-picker-meta { color: var(--muted); display: block; font-size: 0.8rem; }
.home-profile-selector { align-items: center; display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.home-profile-btn { align-items: center; background: var(--surface-soft); border: 2px solid var(--line); border-radius: var(--radius-sm); color: var(--ink); cursor: pointer; display: inline-flex; flex-direction: column; gap: 6px; min-width: 68px; padding: 8px 12px; text-align: center; transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; font-family: inherit; }
.home-profile-btn:hover { border-color: var(--brand); box-shadow: var(--shadow-soft); transform: translateY(-1px); }
.home-profile-btn.is-selected { background: var(--surface); border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); }
.home-profile-btn:focus-visible { outline: 3px solid rgba(21, 157, 184, 0.34); outline-offset: 2px; }
.home-profile-btn .avatar { height: 44px; width: 44px; font-size: 1.1rem; }
.home-profile-btn .home-profile-name { color: var(--ink); font-size: 0.78rem; font-weight: 700; line-height: 1.2; max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@keyframes pulse { 0%, 100% { opacity: 0.45; } 50% { opacity: 0.9; } }

@media (max-width: 767px) {
  .profile-picker { padding: 18px 15px; }
  .profile-picker-head { align-items: flex-start; flex-direction: column; gap: 8px; }
  .profile-picker-grid { grid-template-columns: 1fr; }
  .profile-picker-card { min-height: 132px; }
  .topbar { min-height: 68px; padding: 12px 15px; }
  .topbar-title span { display: none; }
  .parent-nav { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2px; padding: 6px 4px; top: 68px; }
  .parent-nav.has-content { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .parent-nav.has-content .nav-item { grid-column: span 2; }
  .parent-nav.has-content .nav-item:nth-child(5) { grid-column: 2 / span 2; }
  .nav-item { flex: 1 1 0; flex-direction: column; font-size: clamp(0.58rem, 2.2vw, 0.68rem); gap: 2px; min-width: 0; min-height: 44px; padding: 4px 1px; white-space: nowrap; }
  .nav-item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nav-label-mobile { display: inline; }
  .nav-label-desktop { display: none; }
  .page-head { align-items: flex-start; flex-direction: column; gap: 13px; margin-bottom: 19px; }
  .page-actions { justify-content: flex-start; width: 100%; }
  .page-actions .button { flex: 1 1 130px; }
  .stat-grid, .quick-grid, .upgrade-grid, .settings-grid, .profile-picker-grid { grid-template-columns: 1fr; }
  .profile-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .field.full { grid-column: auto; }
  .daily-limit-channel-row { grid-template-columns: 1fr; }
  .daily-limit-total { align-items: flex-start; flex-direction: column; }
  .login-card { padding: 26px 20px; }
  .kid-main { padding: 18px 14px 92px; }
  .kid-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px; }
  .kid-head > div:first-child { grid-column: 1; grid-row: 1; min-width: 0; }
  .kid-head-actions { display: contents; }
  .kid-head-actions .button { grid-column: 2; grid-row: 1; justify-self: end; }
  .kid-head .youtube-logo { max-width: 100%; height: auto; width: auto; max-height: 24px; }
  .player-controls { padding: 8px 12px 6px; }
  .player-controls-row { flex-wrap: wrap; justify-content: center; gap: 8px 16px; margin: 4px 0 6px; }
  .player-controls-row .player-control-layout { order: 1; width: 100%; justify-content: center; gap: 12px; }
  .player-controls-row .volume-row { order: 2; }
  .player-controls-row .player-like-button, .player-controls-row .like-maximize-group { order: 3; }
  .channel-control-buttons { gap: 6px; }
  .control-row { gap: 6px; }
  .control-button { min-height: 38px; min-width: 42px; padding: 4px 8px; }
  .control-cluster-label { font-size: 0.72rem; }
  .skip-badge-row { margin: 4px 0 2px; }
  .channel-widget { padding: 14px; }
  .channel-widget-head { align-items: flex-start; flex-direction: column; gap: 4px; }
  .channel-row { grid-template-columns: 1fr; padding: 12px; }
  .channel-row-content { gap: 2px; }
  .modal-backdrop { padding: 10px; }
  .modal { max-height: calc(100vh - 20px); }
  .modal-head, .modal-body, .modal-foot { padding-left: 16px; padding-right: 16px; }
  .content-review-video { grid-template-columns: 112px minmax(0, 1fr); }
  .curated-results-table, .curated-results-table tbody, .curated-results-row, .curated-results-cell { display: block; width: 100%; }
  .curated-results-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px; margin-bottom: 6px; }
  .curated-results-cell { width: 100%; }
  .curated-details-row { grid-template-columns: minmax(0, 1fr); }
  .curated-details-title-row { grid-template-columns: minmax(0, 1fr) auto; }
  .curated-selected-video { align-items: start; grid-template-columns: auto minmax(0, 1fr); }
  .curated-selected-video img { width: 128px; }
  .curated-selected-video-info, .curated-order-actions { grid-column: 2; }
  .curated-order-actions { justify-content: flex-start; }
  .curated-source-card.is-playlist { grid-template-columns: minmax(0, 1fr); }
  .curated-triage-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
  .curated-triage-toolbar { flex-direction: column; align-items: flex-start; gap: 8px; }
  .curated-sources-grid { grid-template-columns: 1fr; }
  .channel-editor-row { grid-template-columns: 1fr; }
  .channel-editor-actions { justify-content: flex-start; }
}

@media (min-width: 768px) and (max-width: 1099px) {
  .parent-nav { flex-wrap: wrap; justify-content: flex-start; top: 76px; }
  .nav-item { min-width: 112px; }
  .parent-main { padding: 34px 28px 80px; }
  .stat-grid, .quick-grid, .profile-grid, .upgrade-grid, .profile-picker-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .settings-grid { grid-template-columns: 1fr; }
  .channel-row { grid-template-columns: minmax(120px, 200px) minmax(0, 1fr); }
}

@media (min-width: 1100px) {
  .parent-layout { display: grid; grid-template-columns: var(--nav-width) minmax(0, 1fr); }
  .parent-nav { align-items: stretch; border-bottom: 0; border-right: 1px solid var(--line); flex-direction: column; gap: 5px; padding: 26px 15px; top: 0; }
  .nav-item { justify-content: flex-start; min-height: 48px; padding: 0 15px; }
  .parent-main { padding: 48px 46px 72px; }
  .stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .home-view .stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .quick-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .profile-grid, .upgrade-grid, .profile-picker-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .settings-grid { grid-template-columns: minmax(0, 1.4fr) minmax(270px, 0.6fr); align-items: start; }
  .kid-main { padding-top: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

/* UI refinement: preserve behavior while tightening rhythm, focus, and small-screen fit. */
html { overflow-x: hidden; }
body { min-width: 320px; }
.button, .provider-button, .control-button, .nav-item, .icon-button, .quick-action, .channel-row, .profile-picker-card, .swatch, .home-profile-btn {
  -webkit-tap-highlight-color: transparent;
}
.button:focus-visible, .provider-button:focus-visible, .control-button:focus-visible, .nav-item:focus-visible,
.icon-button:focus-visible, .quick-action:focus-visible, .channel-row:focus-visible, .profile-picker-card:focus-visible,
.swatch:focus-visible, .home-profile-btn:focus-visible {
  outline: 3px solid rgba(21, 157, 184, 0.34);
  outline-offset: 3px;
}
.login-page { min-height: 100dvh; padding: clamp(24px, 6vw, 64px) 18px; }
.login-card { padding: clamp(24px, 4vw, 34px); }
.login-form { gap: 16px; }
.provider-button { --provider-size: 72px; flex: 0 0 var(--provider-size); width: var(--provider-size); height: var(--provider-size); min-height: var(--provider-size); padding: 0; border-radius: 50%; }
.provider-mark { --provider-icon-size: 44px; background: transparent; border-radius: 0; height: var(--provider-icon-size); width: var(--provider-icon-size); }
.provider-mark svg { display: block; height: var(--provider-icon-size); width: var(--provider-icon-size); }
.page-actions .button, .form-actions .button { min-width: 44px; }
.card, .settings-card, .profile-picker, .channel-widget { padding: clamp(16px, 2vw, 20px); }
.page-head, .kid-head, .profile-picker-head { min-width: 0; }
.page-actions, .form-actions, .profile-actions, .channel-editor-actions { max-width: 100%; }
.page-actions .button, .form-actions .button, .profile-actions .button { max-width: 100%; }
.schedule-table, .analytics-table { min-width: 560px; }
.table-wrap { -webkit-overflow-scrolling: touch; scrollbar-width: thin; }

@media (max-width: 520px) {
  .login-page { padding: 20px 12px; }
  .login-card { border-radius: 22px; }
  .login-brand { margin-bottom: 22px; }
  .login-card h1 { font-size: 1.6rem; }
  .login-intro { margin-bottom: 20px; }
  .topbar { gap: 10px; }
  .top-actions { gap: 6px; }
  .top-actions .button { min-height: var(--touch-target); }
  .page-actions { gap: 8px; }
  .page-actions .button { flex: 1 1 100%; }
  .card-header, .modal-head { gap: 9px; }
  .watch-log-row { align-items: flex-start; flex-direction: column; }
}

/* Shared accessibility tokens; visual styling remains FamTiVi's existing system. */
:root { --touch-target: 48px; --focus-ring: var(--brand-deep); }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
a:focus-visible, [tabindex]:focus-visible, .button:focus-visible, .provider-button:focus-visible,
.control-button:focus-visible, .nav-item:focus-visible, .icon-button:focus-visible,
.quick-action:focus-visible, .channel-row:focus-visible, .profile-picker-card:focus-visible, .swatch:focus-visible {
  outline: 3px solid var(--focus-ring); outline-offset: 3px;
}
.button, .button-small, .icon-button, .filter-network-node,
.channel-color-picker, .checkbox-row, .switch { min-height: var(--touch-target); min-width: var(--touch-target); }
.icon-button, .channel-color-picker { min-width: var(--touch-target); }
.input, .select, .textarea { font-size: 1rem; min-height: var(--touch-target); }
.checkbox-row { display: inline-flex; align-items: center; }
.switch { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; }
.hashtag-nav-choices, .hashtag-nav-actions { gap: 8px; }
.tag-list { gap: 8px; }
/* dev_fmtv-npx: the shared --touch-target (48px) minimum is right for buttons/checkboxes but
   blew up these inline hashtag chips into oversized squares; 28px clears the WCAG 2.5.8 AA
   floor (24px) while staying visually a small pill, and .tag-list's 8px gap keeps mis-taps rare. */
.tag-removable { border: 0; cursor: pointer; min-height: 28px; border-radius: var(--radius-sm); }
.theme-accessible-choices .theme-bubble { min-height: var(--touch-target); }
.theme-help { flex-basis: var(--touch-target); width: var(--touch-target); height: var(--touch-target); }
.volume-row input[type="range"] { min-height: var(--touch-target); }
.parent-main, .kid-main { padding-bottom: max(32px, env(safe-area-inset-bottom)); }
.app-dialog { padding-bottom: env(safe-area-inset-bottom); }
@media (max-width: 520px) {
  .schedule-table { min-width: 440px; width: 100%; table-layout: auto; }
  .schedule-table th, .schedule-table td { padding: 8px 6px; }
  .schedule-table .channel-preview-button { padding: 8px; }
  .profile-settings-row { flex-wrap: wrap; }
  .chart-legend { padding-right: 28px; }
  .delete-channel-checkbox-row { align-items: flex-start; }
  .delete-channel-confirm-list li { align-items: flex-start; }
  .delete-channel-checkbox-row input[type="checkbox"] { margin-top: 3px; }
  .delete-channel-checkbox-row .channel-color-dot,
  .delete-channel-confirm-list .channel-color-dot { margin-top: 4px; }
  .delete-channel-info { flex-direction: column; align-items: flex-start; gap: 2px; }
  .delete-channel-hashtags { font-size: 0.76rem; line-height: 1.3; }
  .button-primary,
  .button-secondary,
  .button,
  .top-actions .button,
  .page-actions .button,
  .form-actions .button,
  .profile-actions .button,
  .channel-editor-actions .button,
  .modal-actions .button {
    font-size: 0.75rem;
    min-height: 36px;
    min-width: 0;
    padding: 0 14px;
    gap: 6px;
  }
  .button .icon,
  .button-primary .icon,
  .button-secondary .icon {
    width: 14px;
    height: 14px;
  }
  .top-actions .button {
    min-height: 36px;
  }
  .login-card .button {
    min-height: 44px;
    font-size: 0.94rem;
    padding: 0 18px;
  }
  .player-controls { padding: 8px 10px 6px; }
  .control-button { min-height: 36px; min-width: 40px; padding: 4px 6px; }
  .control-cluster-label { font-size: 0.70rem; }
}

/* Help & Guide View */
.help-view {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.help-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
}

.help-card {
  background: var(--card-bg, #ffffff);
  border: 1px solid var(--border, #cbd5e1);
  border-radius: var(--radius-lg, 16px);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
}

.help-card-hero {
  border-color: var(--teal, #0f766e);
}

.help-card-top {
  align-items: flex-start;
  display: flex;
  gap: 16px;
  justify-content: space-between;
}

.help-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--teal-soft, #ccfbf1);
  color: var(--teal, #0f766e);
}

.help-card-icon.feedback {
  background: #fef3c7;
  color: #b45309;
}

.help-card-icon.tips {
  background: #e0e7ff;
  color: #4338ca;
}

.help-card h3 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--brand-deep, #0f2c33);
}

.help-card p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--muted, #64748b);
  flex-grow: 1;
}

/* How-To Guide Modal */
.modal-howto {
  max-width: 860px;
  width: min(860px, calc(100vw - 32px));
}

.howto-container {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 4px 0 16px;
  color: var(--brand-deep, #1e293b);
}

.howto-section {
  background: #ffffff;
  border: 1px solid var(--border, #cbd5e1);
  border-radius: 14px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.howto-section-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.howto-step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 700;
  background: var(--teal, #0f766e);
  color: #ffffff;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.howto-section-title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 750;
  color: var(--brand-deep, #0f2c33);
}

.howto-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #334155;
  margin: 0;
}

.howto-illustration-card {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
}

.howto-illustration-card img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  background: #f8fafc;
}

/* Section 1 Carousel */
.howto-carousel {
  display: flex;
  flex-direction: column;
}

.howto-carousel-stage {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8fafc;
  min-height: 240px;
}

.howto-carousel-stage img {
  width: 100%;
  max-height: 440px;
  object-fit: contain;
  display: block;
  user-select: none;
}

.howto-carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid #cbd5e1;
  color: var(--brand-deep, #0f2c33);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
  z-index: 2;
  padding: 0;
}

.howto-carousel-arrow:hover {
  background: #ffffff;
  color: var(--teal, #0f766e);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  transform: translateY(-50%) scale(1.06);
}

.howto-carousel-arrow:active {
  transform: translateY(-50%) scale(0.96);
}

.howto-carousel-arrow.prev {
  left: 12px;
}

.howto-carousel-arrow.next {
  right: 12px;
}

.howto-carousel-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  background: #f1f5f9;
  border-top: 1px solid #e2e8f0;
}

.howto-carousel-dots {
  display: flex;
  align-items: center;
  gap: 8px;
}

.howto-carousel-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #cbd5e1;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all 0.2s ease;
}

.howto-carousel-dot:hover {
  background: #94a3b8;
}

.howto-carousel-dot.active {
  background: var(--teal, #0f766e);
  width: 24px;
  border-radius: 12px;
}

.howto-carousel-counter {
  font-size: 0.82rem;
  font-weight: 600;
  color: #64748b;
}

@media (max-width: 640px) {
  .howto-carousel-stage img {
    max-height: 280px;
  }
  .howto-carousel-arrow {
    width: 32px;
    height: 32px;
  }
  .howto-carousel-arrow.prev {
    left: 6px;
  }
  .howto-carousel-arrow.next {
    right: 6px;
  }
}

.howto-illustration-caption {
  padding: 10px 14px;
  font-size: 0.82rem;
  color: #64748b;
  font-style: italic;
  text-align: center;
  background: #f8fafc;
  border-top: 1px solid #f1f5f9;
}

.howto-callout {
  padding: 14px 18px;
  border-radius: 10px;
  background: #f0fdfa;
  border-left: 4px solid var(--teal, #0f766e);
  font-size: 0.92rem;
  line-height: 1.5;
  color: #134e4a;
}

.howto-callout strong {
  color: #0f766e;
}

.howto-tag-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 6px 0;
}

.howto-tag-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 16px;
  font-size: 0.82rem;
  font-weight: 600;
  background: #f1f5f9;
  color: #334155;
  border: 1px solid #cbd5e1;
}

.howto-tag-pill.gold {
  background: #fef3c7;
  color: #92400e;
  border-color: #fde68a;
}

.howto-tag-pill.cyan {
  background: #e0f2fe;
  color: #0369a1;
  border-color: #bae6fd;
}

.howto-tag-pill.teal {
  background: #ccfbf1;
  color: #0f766e;
  border-color: #99f6e4;
}

.howto-tag-pill.dark {
  background: #1e293b;
  color: #f8fafc;
  border-color: #0f172a;
}

/* Plan 30 T22 (owner requests 2026-10-07) */
.legal-accept-button { justify-content: center; min-width: 11rem; text-align: center; white-space: normal; }
html[data-mobile-app="1"] .settings-pin-input { background: #fdeaea; border-color: #e8a3a3; }
.forgot-pin-link { background: none; border: 0; color: var(--brand-deep); cursor: pointer; font: inherit; font-weight: 700; justify-self: center; min-height: 44px; padding: 0 8px; text-decoration: underline; }
.forgot-pin-steps { margin: 8px 0 16px; padding-left: 1.2rem; }
.focus-options h3 { font-size: 1rem; margin: 16px 0 4px; }
.focus-options h4 { font-size: 0.95rem; margin: 12px 0 2px; }