/* beta.9 — reference-based, fixed-shell density layout */
:root {
  --density-page: #090b0f;
  --density-shell: #171a21;
  --density-header: #1b1f27;
  --density-command: #161a21;
  --density-list: #1b1f27;
  --density-card: #252b34;
  --density-card-offline: #171a20;
  --density-line: #3d444e;
  --density-line-strong: #596574;
  --density-copy: #e8e7de;
  --density-muted: #929ba7;
  --density-accent: #a9b9d2;
  --density-accent-strong: #d6dfeb;
}

html,
body,
#appRoot {
  width: 100%;
  min-width: 0;
  min-height: 100%;
}

body {
  min-height: 100dvh;
  padding: 12px;
  color: var(--density-copy);
  background: var(--density-page);
}

#appRoot {
  display: grid;
  min-height: 0;
  place-items: center;
}

.widget {
  display: grid;
  grid-template-rows: 74px 116px minmax(0, 1fr);
  width: min(1280px, calc(100vw - 24px));
  max-width: 1280px;
  height: min(900px, calc(100dvh - 24px));
  min-height: min(620px, calc(100dvh - 24px));
  max-height: 900px;
  overflow: hidden;
  border: 1px solid var(--density-line);
  border-radius: 20px;
  background: var(--density-shell);
  box-shadow: 0 24px 72px rgba(0, 0, 0, .48);
}

.widget .density-titlebar {
  box-sizing: border-box;
  min-height: 0;
  padding: 13px 20px;
  border-bottom: 1px solid var(--density-line);
  background: var(--density-header);
}

.density-titlebar .brand {
  min-width: 0;
  gap: 11px;
}

.widget .brand-mark {
  width: 40px;
  height: 40px;
  padding: 6px;
  border-color: #4a5360;
  border-radius: 12px;
  background: #252b34;
}

.widget .brand-mark .signal {
  stroke: var(--density-accent);
  stroke-width: 2.15;
}

.widget .brand-mark .lamp {
  fill: var(--density-accent-strong);
}

.widget .brand .brand-title {
  overflow: hidden;
  margin: 0;
  color: var(--density-copy);
  font-size: .84rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.widget .brand p {
  margin: 4px 0 0;
  color: #9ca6b3;
  font-size: .7rem;
}

.beta-badge {
  margin-left: 5px;
  color: #8493a8;
  font-size: .54rem;
  letter-spacing: .08em;
}

.titlebar-status {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  min-width: 0;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 31px;
  padding: 0 11px;
  color: #8d97a4;
  border: 1px solid #444b55;
  border-radius: 999px;
  background: #1a1e25;
  font-size: .68rem;
  white-space: nowrap;
}

.status-pill strong {
  color: #bdc5cf;
  font-size: .76rem;
  font-variant-numeric: tabular-nums;
}

.status-pill.is-live {
  color: #b4c3d8;
  border-color: #556274;
}

.status-pill.is-live strong {
  color: #e4eaf2;
}

.widget #updatedAt {
  width: 50px;
  overflow: hidden;
  color: #727d8b;
  font-size: .66rem;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.density-command-panel {
  display: grid;
  grid-template-rows: 48px 68px;
  min-width: 0;
  min-height: 0;
  border-bottom: 1px solid var(--density-line);
  background: var(--density-command);
}

.density-command-topline,
.density-command-actions {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 0 18px;
}

.density-command-topline {
  border-bottom: 1px solid #343b44;
}

.widget .view-tabs {
  display: flex;
  flex: 0 0 auto;
  gap: 7px;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.widget .view-tab {
  min-width: 0;
  height: 34px;
  padding: 0 13px;
  color: #8e98a5;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  font-size: .76rem;
  font-weight: 650;
}

.widget .view-tab.active {
  color: #f0efe8;
  border-color: #66717e;
  background: #232830;
}

.density-command-actions {
  align-items: center;
}

.widget .footer-actions {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.widget .footer-actions button {
  flex: 0 0 auto;
  width: auto;
  min-height: 36px;
  height: 36px;
  padding: 0 12px;
  color: #c5cbd3;
  border: 1px solid #4a525d;
  border-radius: 10px;
  background: #20242b;
  font-size: .72rem;
  font-weight: 650;
  box-shadow: none;
}

.widget .footer-actions button:hover {
  color: #f1f0e9;
  border-color: #687483;
  background: #292e37;
  filter: none;
}

.widget .footer-actions .primary-button {
  color: #e8ecf2;
  border-color: #68788d;
  background: #29313c;
}

.widget .footer-actions svg {
  width: 14px;
  height: 14px;
}

.widget .footer-icon {
  display: inline-flex;
  place-items: initial;
}

.widget .tab-toolbar {
  display: flex;
  flex: 0 0 300px;
  width: 300px;
  min-height: 40px;
  padding: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  border: 0;
  background: transparent;
}

.favorite-sort,
.bulk-delete-toggle,
.bulk-delete-actions {
  max-height: 36px;
}

.widget .favorite-sort {
  height: 34px;
  border-color: #3e4650;
  background: #11151b;
}

.widget .sort-mode {
  height: 28px;
}

.widget .bulk-delete-toggle,
.widget .bulk-delete-cancel,
.widget .bulk-delete-confirm {
  min-height: 34px;
  height: 34px;
  padding: 0 10px;
  border-color: #434b55;
  background: #1c2027;
  font-size: .7rem;
}

.widget .streamer-list {
  display: block;
  min-width: 0;
  min-height: 0;
  padding: 10px 14px 18px;
  overflow-x: hidden;
  overflow-y: auto;
  border: 0;
  background: var(--density-list);
  scrollbar-gutter: stable;
}

.streamer-group + .streamer-group {
  margin-top: 10px;
}

.streamer-group-heading {
  min-height: 34px;
  padding: 8px 1px 7px;
  background: var(--density-list);
}

.streamer-group-heading h2 {
  color: var(--density-copy);
  font-size: .82rem;
  letter-spacing: .06em;
}

.streamer-group-heading span {
  color: #7e8792;
  font-size: .68rem;
}

.streamer-grid,
.streamer-group-offline .streamer-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
}

.widget .streamer-card,
.streamer-list.is-dense .streamer-card {
  height: 82px;
  border-color: #454d58;
  border-radius: 11px;
  background: var(--density-card);
}

.widget .streamer-card.is-live {
  border-color: #566273;
  background: var(--density-card);
  box-shadow: inset 3px 0 var(--density-accent);
}

.widget .streamer-card.is-live:hover,
.widget .streamer-card.is-live:focus-visible,
.widget .streamer-card.is-detail-open {
  border-color: #8799b2;
  box-shadow: inset 3px 0 var(--density-accent-strong), 0 0 0 2px rgba(169, 185, 210, .1);
}

.widget .streamer-main,
.streamer-list.is-dense .streamer-main {
  grid-template-columns: 34px minmax(0, 1fr) 52px;
  grid-template-rows: 25px 15px 26px;
  grid-template-areas:
    "avatar copy actions"
    "avatar elapsed elapsed"
    "platforms platforms platforms";
  row-gap: 1px;
  column-gap: 7px;
  padding: 6px 8px 5px;
}

.streamer-list.is-dense .streamer-grid {
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.streamer-list.is-dense .streamer-main {
  grid-template-columns: 31px minmax(0, 1fr) 46px;
  column-gap: 5px;
  padding-inline: 6px;
}

.streamer-card .avatar,
.streamer-list.is-dense .avatar {
  width: 32px;
  height: 32px;
  color: #d9dde3;
  border: 1px solid #5c6570;
  border-radius: 50%;
  background: #303640;
  font-size: .58rem;
}

.streamer-card .avatar img {
  border-radius: 50%;
}

.streamer-copy > strong {
  color: var(--density-copy);
  font-size: .78rem;
  line-height: 1.25;
}

.streamer-copy small {
  margin: 1px 0 0;
}

.streamer-copy .status-text {
  color: #bdc8d6;
  font-size: .61rem;
  line-height: 1.2;
}

.streamer-main > .elapsed-time {
  color: #b8c8df;
  font-size: .78rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .02em;
}

.streamer-main > .card-actions {
  gap: 1px;
}

.streamer-main .notify-button,
.streamer-main .pin-button {
  width: 24px;
  min-width: 24px;
  height: 24px;
  padding: 5px;
  border-radius: 7px;
}

.streamer-main .notify-button svg,
.streamer-main .pin-button svg {
  width: 14px;
  height: 14px;
}

.streamer-main .platform-row {
  grid-area: platforms;
  gap: 2px;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  min-width: 0;
}

.streamer-main .platform-link,
.streamer-main .platform-link.online {
  flex: 0 0 23px;
  width: 23px;
  min-width: 23px;
  height: 18px;
  padding: 0;
  border-radius: 5px;
  font-size: .46rem;
}

.streamer-main .add-platform-button {
  height: 18px;
  padding-inline: 5px;
  border-radius: 5px;
  font-size: .46rem;
}

.streamer-main .edit-sites-button {
  flex-basis: 18px;
  width: 18px;
  min-width: 18px;
}

.streamer-main .edit-sites-button svg {
  width: 11px;
  height: 11px;
}

.widget .streamer-group-offline .streamer-card,
.streamer-list.is-dense .streamer-group-offline .streamer-card {
  height: 66px;
  border-color: #30363d;
  background: var(--density-card-offline);
  box-shadow: none;
}

.streamer-group-offline .streamer-main,
.streamer-list.is-dense .streamer-group-offline .streamer-main {
  grid-template-columns: 30px minmax(0, 1fr) 50px;
  grid-template-rows: 26px 26px;
  grid-template-areas:
    "avatar copy actions"
    "platforms platforms platforms";
  row-gap: 2px;
  padding: 5px 7px 4px;
}

.streamer-group-offline .avatar {
  width: 29px;
  height: 29px;
}

.streamer-group-offline .streamer-copy > strong {
  color: #858c93;
}

.empty-state {
  min-height: 210px;
  padding: 72px 22px;
  border: 1px dashed #3a414a;
  border-radius: 12px;
  background: #181c23;
}

html[data-theme="light"] {
  --density-page: #d8dbdc;
  --density-shell: #ebeae5;
  --density-header: #f2f0e9;
  --density-command: #e7e5de;
  --density-list: #e9e8e2;
  --density-card: #f6f3eb;
  --density-card-offline: #dcdedc;
  --density-line: #b9b9b4;
  --density-line-strong: #8d969f;
  --density-copy: #292d31;
  --density-muted: #656d74;
  --density-accent: #687f98;
  --density-accent-strong: #526d8a;
}

html[data-theme="mist"] {
  --density-page: #d7e1de;
  --density-shell: #e4ebe8;
  --density-header: #edf2ef;
  --density-command: #dfe7e3;
  --density-list: #e3e9e6;
  --density-card: #eef3f0;
  --density-card-offline: #d5ddda;
  --density-line: #afc0ba;
  --density-line-strong: #809f95;
  --density-copy: #24312d;
  --density-muted: #60716b;
  --density-accent: #5f887d;
  --density-accent-strong: #456f64;
}

@media (max-width: 1180px) {
  .streamer-grid,
  .streamer-group-offline .streamer-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .streamer-list.is-dense .streamer-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .widget .tab-toolbar {
    flex-basis: 230px;
    width: 230px;
  }

  .streamer-list.is-dense .streamer-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  body {
    display: block;
    min-height: 100dvh;
    padding: 0;
    background: var(--density-shell);
  }

  #appRoot {
    display: block;
    height: 100dvh;
  }

  .widget {
    grid-template-rows: 66px 142px minmax(0, 1fr);
    width: 100%;
    max-width: none;
    height: 100dvh;
    min-height: 0;
    max-height: none;
    border: 0;
    border-radius: 0;
  }

  .widget .density-titlebar {
    padding: 10px 12px;
  }

  .widget .brand-mark {
    width: 36px;
    height: 36px;
  }

  .widget .brand .brand-title {
    max-width: 39vw;
    font-size: .74rem;
    letter-spacing: .1em;
  }

  .widget .brand p,
  .widget #updatedAt,
  .status-pill > span {
    display: none;
  }

  .status-pill {
    min-width: 34px;
    min-height: 30px;
    padding: 0 9px;
    justify-content: center;
  }

  .density-command-panel {
    grid-template-rows: 48px 94px;
  }

  .density-command-topline,
  .density-command-actions {
    padding-inline: 10px;
  }

  .density-command-topline {
    gap: 8px;
  }

  .widget .view-tab {
    height: 32px;
    padding: 0 9px;
    font-size: .68rem;
  }

  .density-command-actions {
    display: grid;
    grid-template-rows: 45px 39px;
    align-content: center;
    gap: 0;
  }

  .widget .footer-actions {
    display: grid;
    grid-template-columns: 1.35fr 1fr .8fr .9fr;
    width: 100%;
    gap: 5px;
  }

  .widget .footer-actions button {
    width: 100%;
    min-width: 0;
    height: 34px;
    padding: 0 6px;
    font-size: .59rem;
    white-space: nowrap;
  }

  .widget .footer-actions svg {
    width: 12px;
    height: 12px;
  }

  .widget .tab-toolbar {
    width: 100%;
    min-width: 0;
    min-height: 36px;
    justify-content: flex-end;
  }

  .widget .streamer-list {
    padding: 7px 8px 16px;
    scrollbar-gutter: auto;
  }

  .streamer-grid,
  .streamer-group-offline .streamer-grid,
  .streamer-list.is-dense .streamer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .widget .streamer-card,
  .streamer-list.is-dense .streamer-card {
    height: 82px;
  }

  .widget .streamer-group-offline .streamer-card,
  .streamer-list.is-dense .streamer-group-offline .streamer-card {
    height: 66px;
  }
}

/* beta.10.1 — viewport-filling shell, tab-only header and lower action rail */
body {
  padding: 0;
  background: var(--density-shell);
}

#appRoot {
  height: 100dvh;
  min-height: 0;
}

.widget {
  position: relative;
  grid-template-rows: 58px 56px minmax(0, 1fr);
  width: 100vw;
  max-width: none;
  height: 100dvh;
  min-height: 0;
  max-height: none;
  border-width: 0;
  border-radius: 0;
}

.density-command-panel {
  grid-template-rows: 1fr;
}

.density-command-topline {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-inline: 18px;
  border-bottom: 1px solid var(--density-line);
}

.widget .footer-actions {
  position: absolute;
  right: 18px;
  bottom: 14px;
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px;
  border: 1px solid var(--density-line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--density-shell) 92%, transparent);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
}

.widget .footer-actions button {
  min-height: 32px;
  height: 32px;
  padding-inline: 9px;
}

.widget .tab-toolbar {
  position: absolute;
  top: 122px;
  right: 18px;
  z-index: 7;
  display: flex;
  width: auto;
  min-width: 0;
  height: 36px;
  align-items: center;
  justify-content: flex-end;
  padding: 0;
}

.widget .streamer-list {
  height: 100%;
  padding: 48px 18px 76px;
}

.streamer-group + .streamer-group {
  margin-top: 42px;
  padding-top: 2px;
  border-top: 1px solid color-mix(in srgb, var(--density-line) 64%, transparent);
}

.streamer-group-offline .streamer-group-heading {
  padding-top: 16px;
}

.notify-button {
  border: 1px solid transparent;
  color: #7d8795;
  background: transparent;
  opacity: .82;
}

.notify-button::after {
  display: none;
}

.notify-button.is-enabled {
  color: var(--density-accent-strong);
  border-color: var(--density-accent);
  background: color-mix(in srgb, var(--density-accent) 13%, transparent);
  opacity: 1;
}

.notify-button.is-enabled svg {
  stroke-width: 2;
}

html[data-theme="light"] .widget .footer-actions,
html[data-theme="mist"] .widget .footer-actions {
  border-color: var(--app-border);
  background: color-mix(in srgb, var(--app-surface-raised) 94%, transparent);
  box-shadow: 0 8px 22px var(--app-shadow);
}

html[data-theme="light"] .widget .footer-actions button,
html[data-theme="mist"] .widget .footer-actions button {
  color: var(--app-accent);
  border-color: var(--app-border-strong);
  background: var(--app-accent-soft);
}

html[data-theme="light"] .widget .footer-actions button:hover,
html[data-theme="mist"] .widget .footer-actions button:hover {
  color: var(--app-text);
  border-color: var(--app-accent);
  background: color-mix(in srgb, var(--app-accent-soft) 70%, var(--app-surface-raised));
}

html[data-theme="light"] .widget .footer-actions .primary-button,
html[data-theme="mist"] .widget .footer-actions .primary-button {
  color: var(--app-accent);
  border-color: var(--app-border-strong);
  background: var(--app-accent-soft);
}

@media (max-width: 760px) {
  .widget {
    grid-template-rows: 58px 56px minmax(0, 1fr);
  }

  .density-command-topline {
    padding-inline: 10px;
  }

  .widget .tab-toolbar {
    top: 122px;
    right: 10px;
  }

  .widget .streamer-list {
    padding: 48px 10px 76px;
  }

  .widget .footer-actions {
    right: 10px;
    bottom: 10px;
    left: 10px;
    justify-content: stretch;
  }

  .widget .footer-actions button {
    flex: 1 1 0;
    min-width: 0;
    padding-inline: 5px;
    font-size: .58rem;
  }
}

@media (max-width: 360px) {
  .widget .footer-actions button {
    font-size: .54rem;
  }

  .streamer-grid,
  .streamer-group-offline .streamer-grid,
  .streamer-list.is-dense .streamer-grid {
    grid-template-columns: 1fr;
  }
}

/* beta.9.1 — compact header/command row and anchored detail panels */
:root {
  --settings-surface: #1b2028;
  --settings-surface-soft: #222832;
  --settings-surface-raised: #272e38;
  --settings-border: #46515e;
  --settings-text: #e8e7de;
  --settings-muted: #a6afbb;
  --settings-accent: #a9b9d2;
}

.widget {
  grid-template-rows: 58px 64px minmax(0, 1fr);
}

.widget .density-titlebar {
  padding-block: 9px;
}

.widget .brand-mark {
  width: 36px;
  height: 36px;
}

.titlebar-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.widget #updatedAt {
  width: auto;
  min-width: 86px;
  color: #929dab;
  font-size: .65rem;
  text-align: right;
  white-space: nowrap;
}

.density-command-panel {
  grid-template-rows: 1fr;
}

.density-command-topline {
  display: grid;
  grid-template-columns: auto minmax(130px, 1fr) auto minmax(230px, 300px);
  align-items: center;
  gap: 10px;
  padding-inline: 14px;
  border-bottom: 0;
}

.widget .footer-actions {
  flex: 0 0 auto;
  width: auto;
  justify-content: flex-end;
}

.widget .footer-actions button {
  min-height: 34px;
  height: 34px;
  padding-inline: 10px;
}

.widget .footer-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.widget .footer-icon svg {
  flex: 0 0 auto;
}

.widget .tab-toolbar {
  flex-basis: auto;
  width: auto;
  min-width: 0;
}

.notify-button {
  position: relative;
  color: #687382;
}

.notify-button::after {
  position: absolute;
  right: -2px;
  bottom: -2px;
  min-width: 13px;
  padding: 1px 2px;
  border: 1px solid #252b34;
  border-radius: 4px;
  background: #171a20;
  color: #8f99a6;
  content: attr(data-state);
  font-size: 5px;
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
}

.notify-button.is-enabled {
  color: var(--density-accent-strong);
}

.notify-button.is-enabled::after {
  border-color: #566574;
  background: #303947;
  color: #d6dfeb;
}

.notify-button[data-state="OFF"] .bell-slash {
  display: block;
}

.notify-button[data-state="ON"] .bell-slash {
  display: none;
}

.stream-detail-popover {
  right: auto;
  bottom: auto;
  left: 8px;
  top: 8px;
  width: min(560px, calc(100vw - 20px));
  max-height: min(54dvh, 420px);
  padding: 12px;
  border-radius: 13px;
}

.stream-detail-sites {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 7px;
}

.stream-detail-site {
  flex: 1 1 150px;
  min-width: 145px;
  margin: 0;
  padding: 9px;
}

.stream-detail-title {
  margin: 7px 0 9px;
  font-size: .78rem;
  line-height: 1.45;
}

.stream-detail-link {
  font-size: .7rem;
}

/* Settings are deliberately themed from the same palette as the main shell. */
.settings-dialog {
  width: min(720px, calc(100vw - 28px));
  height: min(680px, calc(100dvh - 24px));
  max-height: calc(100dvh - 24px);
  color: var(--settings-text);
  background: var(--settings-surface);
  border-color: var(--settings-border);
}

.settings-dialog > form {
  grid-template-rows: auto auto minmax(0, 1fr);
}

.settings-dialog .dialog-heading {
  margin: 0;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--settings-border);
}

.settings-dialog .dialog-heading span {
  color: var(--settings-accent);
}

.settings-dialog .dialog-heading h2 {
  color: var(--settings-text);
  font-size: 1.12rem;
}

.settings-dialog .settings-tabs {
  display: flex;
  gap: 6px;
  padding: 10px 24px;
  border-bottom: 1px solid var(--settings-border);
  background: var(--settings-surface-soft);
}

.settings-dialog .settings-tab {
  min-height: 34px;
  padding: 0 12px;
  color: var(--settings-muted);
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  font-size: .77rem;
  font-weight: 700;
}

.settings-dialog .settings-tab.active,
.settings-dialog .settings-tab[aria-selected="true"] {
  color: var(--settings-text);
  border-color: var(--settings-accent);
  background: color-mix(in srgb, var(--settings-accent) 14%, transparent);
}

.settings-dialog .settings-panel {
  padding: 20px 24px 28px;
  color: var(--settings-text);
  font-size: .82rem;
  line-height: 1.55;
}

.settings-dialog .settings-intro,
.settings-dialog .settings-footnote,
.settings-dialog .sync-description,
.settings-dialog .sync-description p,
.settings-dialog .account-delete-note,
.settings-dialog .legal-note {
  color: var(--settings-muted);
}

.settings-dialog .settings-intro strong,
.settings-dialog .sync-description > strong,
.settings-dialog .sync-box strong,
.settings-dialog .install-box strong,
.settings-dialog .beta-box strong,
.settings-dialog .notification-modes legend {
  color: var(--settings-text);
}

.settings-dialog .settings-intro p,
.settings-dialog .sync-description p {
  margin: 5px 0 0;
}

.settings-dialog .notification-modes,
.settings-dialog .notification-details,
.settings-dialog .sync-primary-group,
.settings-dialog .sync-box,
.settings-dialog .install-box,
.settings-dialog .theme-picker,
.settings-dialog .uninstall-guide,
.settings-dialog .beta-box,
.settings-dialog .developer-box {
  border-color: var(--settings-border);
  background: var(--settings-surface-soft);
}

.settings-dialog .notification-modes {
  margin: 18px 0 0;
}

.settings-dialog .notification-modes label,
.settings-dialog .notification-details label {
  border-color: color-mix(in srgb, var(--settings-border) 82%, transparent);
  background: var(--settings-surface-raised);
}

.settings-dialog .notification-modes label:has(input:checked),
.settings-dialog .notification-details label:has(input:checked) {
  border-color: var(--settings-accent);
  background: color-mix(in srgb, var(--settings-accent) 12%, var(--settings-surface-raised));
}

.settings-dialog .notification-modes label strong,
.settings-dialog .notification-details label strong,
.settings-dialog .notification-modes label small,
.settings-dialog .notification-details label small {
  color: var(--settings-text);
}

.settings-dialog .notification-modes label small,
.settings-dialog .notification-details label small {
  opacity: .72;
}

.settings-dialog .sync-primary-group {
  padding: 16px;
}

.settings-dialog .sync-primary-group .sync-description p {
  color: var(--settings-muted);
}

.settings-dialog .theme-picker {
  color: var(--settings-text);
}

.settings-dialog .theme-option {
  color: var(--settings-text);
  border-color: var(--settings-border);
  background: var(--settings-surface-soft);
}

.settings-dialog .theme-option:hover,
.settings-dialog .theme-option:has(input:focus-visible) {
  border-color: var(--settings-accent);
}

.settings-dialog .theme-option:has(input:checked) {
  border-color: var(--settings-accent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--settings-accent) 34%, transparent);
}

.settings-dialog .theme-option-copy strong {
  color: var(--settings-text);
}

.settings-dialog .theme-option-copy small {
  color: var(--settings-muted);
}

html[data-theme="light"],
html[data-theme="mist"] {
  --settings-surface: var(--app-surface-raised);
  --settings-surface-soft: var(--app-surface-soft);
  --settings-surface-raised: var(--app-card);
  --settings-border: var(--app-border);
  --settings-text: var(--app-text);
  --settings-muted: var(--app-muted);
  --settings-accent: var(--app-accent);
}

html[data-theme="light"] .settings-dialog,
html[data-theme="mist"] .settings-dialog {
  color: var(--settings-text);
}

@media (max-width: 1100px) and (min-width: 761px) {
  .density-command-topline {
    grid-template-columns: auto minmax(0, 1fr) auto minmax(190px, 230px);
  }

}

@media (max-width: 760px) {
  .widget {
    grid-template-rows: 58px 104px minmax(0, 1fr);
  }

  .density-command-topline {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: 48px 56px;
    gap: 0 7px;
    padding-inline: 9px;
  }

  .widget .footer-actions {
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid;
    grid-template-columns: 1.35fr 1fr .8fr .9fr;
    width: 100%;
    gap: 5px;
  }

  .widget .tab-toolbar {
    grid-column: 2;
    grid-row: 1;
    justify-content: flex-end;
  }

  .widget .view-tabs {
    grid-column: 1;
    grid-row: 1;
  }

  .widget .footer-actions button {
    padding-inline: 5px;
    font-size: .58rem;
  }

  .settings-dialog {
    width: calc(100vw - 16px);
    height: calc(100dvh - 16px);
    max-height: calc(100dvh - 16px);
  }

  .settings-dialog .dialog-heading,
  .settings-dialog .settings-tabs,
  .settings-dialog .settings-panel {
    padding-inline: 16px;
  }

  .settings-dialog .settings-tabs {
    overflow-x: auto;
  }

  .settings-dialog .settings-tab {
    flex: 0 0 auto;
    padding-inline: 10px;
    font-size: .7rem;
  }

  .stream-detail-popover {
    width: min(560px, calc(100vw - 16px));
  }
}

/* beta12 — compact action row, section-local scrolling, and theme-safe controls */
:root {
  --sort-active-bg: #b9d8cf;
  --sort-active-text: #1d3b35;
  --settings-control-surface: #252b34;
  --settings-control-border: #566171;
  --settings-control-text: #e8e7de;
  --settings-danger-text: #efafb5;
  --settings-danger-border: #80535d;
  --settings-danger-surface: #33252b;
}

/* The top row contains only the view tabs and the app actions. */
.density-command-topline {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "tabs spacer actions";
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding-inline: 18px;
  border-bottom: 1px solid var(--density-line);
}

.widget .view-tabs {
  grid-area: tabs;
  min-width: 0;
}

.widget .tab-toolbar {
  display: none;
}

.widget .footer-actions {
  position: static;
  grid-area: actions;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  width: auto;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.widget .footer-actions button {
  min-height: 34px;
  height: 34px;
  padding-inline: 10px;
  color: #c5cbd3;
  border-color: #4a525d;
  background: #20242b;
  box-shadow: none;
}

.widget .footer-actions button:hover {
  color: #f1f0e9;
  border-color: #687483;
  background: #292e37;
}

.widget .footer-actions .primary-button {
  color: #e8ecf2;
  border-color: #68788d;
  background: #29313c;
}

/* The favorite sort belongs to the online section heading, not to a second toolbar. */
.streamer-group-heading {
  display: flex;
  align-items: center;
  gap: 8px;
}

.streamer-group-heading .favorite-sort {
  flex: 0 0 auto;
  margin-left: auto;
}

.widget .favorite-sort {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 34px;
  padding: 2px;
  border: 1px solid var(--density-line-strong);
  border-radius: 10px;
  background: transparent;
}

.widget .favorite-sort[hidden] { display: none; }

.widget .sort-mode {
  height: 28px;
  padding-inline: 11px;
  color: var(--density-muted);
  border: 0;
  border-radius: 7px;
  background: transparent;
  font-size: .7rem;
  font-weight: 650;
}

.widget .sort-mode.active {
  color: var(--sort-active-text);
  background: var(--sort-active-bg);
}

/* Desktop keeps online and offline in separate, smooth-scrolling panes. */
@media (min-width: 761px) {
  .widget .streamer-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) minmax(190px, min(42vh, 420px));
    grid-auto-rows: auto;
    align-content: stretch;
    gap: 18px;
    height: 100%;
    padding: 14px 18px 18px;
    overflow: hidden;
    scroll-behavior: smooth;
  }

  .widget .streamer-list:not(.has-offline) {
    grid-template-rows: minmax(0, 1fr);
  }

  .streamer-list > .streamer-group {
    grid-column: 1;
    min-width: 0;
    min-height: 0;
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0 4px 8px 0;
    border: 0;
    scroll-behavior: smooth;
    overscroll-behavior: contain;
  }

  .streamer-list > .streamer-group + .streamer-group {
    padding-top: 10px;
    border-top: 1px solid color-mix(in srgb, var(--density-line) 72%, transparent);
  }

  .streamer-list > .streamer-group .streamer-group-heading {
    position: sticky;
    top: 0;
    z-index: 3;
    min-height: 34px;
    padding: 7px 2px 6px;
    background: var(--density-list);
  }

  .streamer-list > .streamer-group .streamer-grid {
    align-content: start;
  }
}

/* Settings controls use semantic theme tokens instead of browser-default gray boxes. */
.settings-dialog .notification-details summary {
  color: var(--settings-text);
  font-weight: 750;
  opacity: 1;
}

.settings-dialog .notification-details summary::marker {
  color: var(--settings-accent);
}

.settings-dialog .sync-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
}

.settings-dialog .sync-box > div:first-child {
  min-width: 0;
}

.settings-dialog .sync-box small {
  display: block;
  margin-top: 3px;
  color: var(--settings-muted);
}

.settings-dialog .sync-actions {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}

.settings-dialog #syncSignOutButton,
.settings-dialog #deleteAccountButton {
  appearance: none;
  box-sizing: border-box;
  border-radius: 9px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.settings-dialog #syncSignOutButton {
  min-height: 36px;
  padding: 0 12px;
  color: var(--settings-control-text);
  border: 1px solid var(--settings-control-border);
  background: var(--settings-control-surface);
}

.settings-dialog #syncSignOutButton:hover {
  border-color: var(--settings-accent);
  background: color-mix(in srgb, var(--settings-control-surface) 78%, var(--settings-accent));
}

.settings-dialog #deleteAccountButton:not([hidden]) {
  min-height: 38px;
  margin: 12px 0 0;
  padding: 8px 13px;
  color: var(--settings-danger-text);
  border: 1px solid var(--settings-danger-border);
  border-radius: 9px;
  background: var(--settings-danger-surface);
  font-size: .88rem;
  line-height: 1.35;
  text-align: left;
  white-space: normal;
}

.settings-dialog #deleteAccountButton:not([hidden]):hover {
  border-color: var(--settings-danger-text);
  background: color-mix(in srgb, var(--settings-danger-surface) 78%, var(--settings-danger-text));
}

.settings-dialog .account-delete-note {
  color: var(--settings-muted);
}

html[data-theme="light"],
html[data-theme="mist"] {
  --sort-active-bg: var(--app-accent-soft);
  --sort-active-text: var(--app-text);
  --settings-control-surface: var(--app-surface-soft);
  --settings-control-border: var(--app-border-strong);
  --settings-control-text: var(--app-text);
  --settings-danger-text: var(--app-danger);
  --settings-danger-border: color-mix(in srgb, var(--app-danger) 46%, var(--app-border));
  --settings-danger-surface: color-mix(in srgb, var(--app-danger) 8%, var(--app-surface-soft));
}

html[data-theme="light"] .widget .footer-actions button,
html[data-theme="mist"] .widget .footer-actions button {
  color: var(--app-text);
  border-color: var(--app-border-strong);
  background: var(--app-surface-soft);
}

html[data-theme="light"] .widget .footer-actions button:hover,
html[data-theme="mist"] .widget .footer-actions button:hover {
  color: var(--app-text);
  border-color: var(--app-accent);
  background: color-mix(in srgb, var(--app-accent-soft) 72%, var(--app-surface-raised));
}

html[data-theme="light"] .widget .footer-actions .primary-button,
html[data-theme="mist"] .widget .footer-actions .primary-button {
  color: var(--app-text);
  border-color: var(--app-border-strong);
  background: var(--app-accent-soft);
}

@media (max-width: 760px) {
  /* Preserve the compact two-row mobile header while using the new colors. */
  .widget {
    grid-template-rows: 58px 104px minmax(0, 1fr);
  }

  .density-command-topline {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 48px 56px;
    grid-template-areas: "tabs" "actions";
    gap: 0;
    padding-inline: 9px;
  }

  .widget .footer-actions {
    grid-area: actions;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    width: 100%;
    gap: 5px;
  }

  .widget .footer-actions button {
    min-width: 0;
    padding-inline: 4px;
    font-size: .58rem;
  }

  .widget .footer-actions svg {
    width: 13px;
    height: 13px;
  }

  .widget .streamer-list {
    display: block;
    height: 100%;
    padding: 14px 10px 76px;
    overflow-y: auto;
  }

  .streamer-list > .streamer-group {
    min-height: 0;
    overflow: visible;
    padding: 0;
  }

  .streamer-list > .streamer-group + .streamer-group {
    margin-top: 42px;
    padding-top: 2px;
    border-top: 1px solid color-mix(in srgb, var(--density-line) 64%, transparent);
  }

  .streamer-list > .streamer-group .streamer-group-heading {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--density-list);
  }

  .widget .favorite-sort {
    max-width: 50vw;
  }

  .widget .sort-mode {
    padding-inline: 8px;
    font-size: .64rem;
  }

  .settings-dialog .sync-box {
    align-items: flex-start;
    flex-direction: column;
  }

  .settings-dialog .sync-actions {
    width: 100%;
  }
}

/* beta12.1 — flatten settings hierarchy and make emphasis intentional */
.settings-dialog .settings-tabs {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 10px 24px;
  border-top: 1px solid var(--settings-border);
  border-bottom: 1px solid var(--settings-border);
  background: transparent;
}

.settings-dialog .settings-tab {
  color: var(--settings-muted);
  border-color: transparent;
  background: transparent;
}

.settings-dialog .settings-tab:hover {
  color: var(--settings-text);
  background: color-mix(in srgb, var(--settings-accent) 7%, transparent);
}

.settings-dialog .settings-tab.active,
.settings-dialog .settings-tab[aria-selected="true"] {
  color: var(--settings-text);
  border-color: var(--settings-border);
  background: color-mix(in srgb, var(--settings-accent) 14%, transparent);
}

.settings-dialog .notification-modes,
.settings-dialog .notification-details {
  box-sizing: border-box;
  margin: 18px 0 0;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--settings-border);
  border-radius: 0;
  background: transparent;
}

.settings-dialog .notification-modes legend {
  padding: 0 0 6px;
  color: var(--settings-text);
  font-size: .82rem;
  font-weight: 700;
}

.settings-dialog .notification-modes label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 9px;
  min-height: 0;
  margin: 0;
  padding: 10px 8px;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--settings-border) 72%, transparent);
  border-radius: 0;
  background: transparent;
}

.settings-dialog .notification-modes label:last-of-type {
  border-bottom: 0;
}

.settings-dialog .notification-modes label:has(input:checked) {
  border-color: color-mix(in srgb, var(--settings-accent) 42%, var(--settings-border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--settings-accent) 10%, transparent);
}

.settings-dialog .notification-modes label span,
.settings-dialog .notification-details label span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.settings-dialog .notification-modes label strong,
.settings-dialog .notification-details label strong {
  color: var(--settings-text);
  font-size: .92rem;
  line-height: 1.35;
}

.settings-dialog .notification-modes label small,
.settings-dialog .notification-details label small {
  color: var(--settings-muted);
  font-size: .82rem;
  line-height: 1.45;
  opacity: 1;
}

.settings-dialog .notification-modes input,
.settings-dialog .notification-details input {
  accent-color: var(--settings-accent);
}

.settings-dialog .notification-details {
  border-top: 1px solid var(--settings-border);
}

.settings-dialog .notification-details summary {
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 0 2px;
  color: var(--settings-text);
  border: 0;
  background: transparent;
  font-size: .88rem;
  font-weight: 750;
}

.settings-dialog .notification-details[open] summary {
  border-bottom: 1px solid color-mix(in srgb, var(--settings-border) 72%, transparent);
}

.settings-dialog .notification-details-body {
  display: block;
  padding: 9px 0 0;
}

.settings-dialog .notification-details label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  margin: 0;
  padding: 11px 12px;
  border: 1px solid color-mix(in srgb, var(--settings-accent) 30%, var(--settings-border));
  border-radius: 10px;
  background: color-mix(in srgb, var(--settings-accent) 7%, transparent);
}

.settings-dialog .settings-footnote {
  color: var(--settings-muted);
}

/* Remove competing fills from the account section; the group itself is the surface. */
.settings-dialog .sync-primary-group {
  margin-bottom: 26px;
  padding: 0 0 16px;
  border: 0;
  border-bottom: 1px solid var(--settings-border);
  border-radius: 0;
  background: transparent;
}

.settings-dialog .sync-primary-group .sync-description p {
  color: var(--settings-muted);
}

.settings-dialog .sync-primary-group .sync-box {
  margin-top: 16px;
  border: 1px solid var(--settings-border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--settings-accent) 6%, transparent);
}

.settings-dialog .sync-description + .sync-description {
  margin-top: 24px;
}

.settings-dialog .account-delete-note {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--settings-border) 72%, transparent);
}

/* beta12.2 — stable tabs, integrated actions, and intentional state styling */
:root {
  --bulk-selection-accent: #d8894a;
  --bulk-selection-surface: #25221f;
}

/* Keep the tab row dimensionally identical across All and Favorites. */
.widget .view-tabs {
  height: 40px;
  align-items: center;
  gap: 7px;
}

.widget .view-tab {
  box-sizing: border-box;
  width: 120px;
  min-width: 120px;
  height: 34px;
  margin: 0;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  line-height: 1;
  font-size: .76rem;
  font-weight: 650;
  letter-spacing: 0;
}

.widget .view-tab span {
  margin: 0;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* The action row is transparent; each button owns its own surface. */
.widget .footer-actions {
  gap: 7px;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
}

.widget .footer-actions button {
  box-sizing: border-box;
  margin: 0;
  border-radius: 10px;
  white-space: nowrap;
}

/* Sharing remains available to the existing flow but is not part of the
   three-button navigation row requested for the main screen. */
.widget .footer-actions #shareButton { display: none; }

/* Bulk actions and favorite sorting live beside the online heading. */
.streamer-group-heading > .favorite-sort,
.streamer-group-heading > .bulk-delete-toggle,
.streamer-group-heading > .bulk-delete-actions {
  flex: 0 0 auto;
  margin-left: auto;
}

.streamer-group-heading > .bulk-delete-actions {
  margin-left: 0;
}

.widget .streamer-group-heading > .bulk-delete-toggle,
.widget .streamer-group-heading > .bulk-delete-actions {
  max-height: 34px;
}

/* During bulk selection every card uses the offline visual language. The
   selected card is the only one allowed to carry a strong accent. */
.widget .streamer-card.bulk-select-mode,
.widget .streamer-card.bulk-select-mode.is-live,
.widget .streamer-card.bulk-select-mode:not(.is-live) {
  color: var(--density-muted);
  border-color: var(--density-line);
  background: var(--density-card-offline);
  box-shadow: none;
}

.widget .streamer-card.bulk-select-mode .streamer-main {
  opacity: .68;
}

.widget .streamer-card.bulk-select-mode.is-selected {
  color: var(--density-copy);
  border-color: var(--bulk-selection-accent);
  background: var(--bulk-selection-surface);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bulk-selection-accent) 28%, transparent);
}

.widget .streamer-card.bulk-select-mode.is-selected .streamer-main {
  opacity: 1;
}

.widget .bulk-select-checkbox:checked + span {
  border-color: var(--bulk-selection-accent);
  background: var(--bulk-selection-accent);
  box-shadow: inset 0 0 0 4px var(--density-card-offline);
}

/* Make the closed details row self-explanatory without relying on the native
   marker, which differs across browsers. */
.settings-dialog .notification-details summary {
  position: relative;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}

.settings-dialog .notification-details summary::-webkit-details-marker {
  display: none;
}

.settings-dialog .notification-details summary::marker {
  content: "";
}

.settings-dialog .notification-details summary::before {
  content: "›";
  display: inline-block;
  width: 14px;
  color: var(--settings-accent);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1;
  transform: translateY(-1px);
}

.settings-dialog .notification-details[open] summary::before {
  content: "⌄";
  transform: translateY(-2px);
}

.settings-dialog .notification-details summary::after {
  content: "クリックで表示";
  margin-left: auto;
  color: var(--settings-muted);
  font-size: .72rem;
  font-weight: 600;
}

.settings-dialog .notification-details[open] summary::after {
  content: "クリックで閉じる";
}

/* The automatic theme preview describes a device setting, not a split color
   swatch: a small monitor with a link/connection mark. */
.settings-dialog .theme-swatch.system {
  display: grid;
  place-items: center;
  color: var(--theme-picker-text);
  background: var(--theme-picker-surface);
}

.settings-dialog .theme-swatch.system svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Give the feedback form enough room to read and compose comfortably. */
.feedback-dialog {
  width: min(780px, calc(100vw - 32px));
}

.feedback-dialog textarea {
  min-height: 180px;
}

/* Move the smaller close affordance up so TITLE has the visual weight. */
.stream-detail-heading {
  align-items: flex-start;
  padding-bottom: 9px;
}

.stream-detail-heading > .icon-button {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  min-width: 28px;
  padding: 0;
  align-self: flex-start;
  margin-top: -4px;
  font-size: 16px;
  line-height: 1;
}

.stream-detail-heading span {
  font-size: .74rem;
  line-height: 1.2;
}

.stream-detail-title {
  font-size: .92rem;
  line-height: 1.5;
}

html[data-theme="light"],
html[data-theme="mist"] {
  --bulk-selection-accent: #d77a32;
  --bulk-selection-surface: #fff0e2;
}

html[data-theme="light"] .widget .streamer-card.bulk-select-mode,
html[data-theme="light"] .widget .streamer-card.bulk-select-mode.is-live,
html[data-theme="mist"] .widget .streamer-card.bulk-select-mode,
html[data-theme="mist"] .widget .streamer-card.bulk-select-mode.is-live {
  border-color: var(--app-border);
  background: var(--app-card);
}

html[data-theme="light"] .widget .streamer-card.bulk-select-mode.is-selected,
html[data-theme="mist"] .widget .streamer-card.bulk-select-mode.is-selected {
  border-color: var(--bulk-selection-accent);
  background: var(--bulk-selection-surface);
}

html[data-theme="light"] .widget .bulk-select-checkbox:checked + span,
html[data-theme="mist"] .widget .bulk-select-checkbox:checked + span {
  box-shadow: inset 0 0 0 4px var(--app-card);
}

@media (max-width: 760px) {
  .widget .view-tab {
    width: 112px;
    min-width: 112px;
  }

  .density-command-topline {
    gap: 0;
  }

  .widget .footer-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .widget .footer-actions button {
    min-width: 0;
  }

  .streamer-group-heading > .bulk-delete-actions {
    gap: 4px;
  }

  .streamer-group-heading > .bulk-delete-actions > span {
    display: none;
  }

  .feedback-dialog {
    width: calc(100vw - 20px);
  }

  .feedback-dialog textarea {
    min-height: 150px;
  }
}

/* beta12.3 — theme-owned colors and stable card controls */

/* Each theme owns its controls. Do not let the bright-theme mint rules leak
   into the night palette, or vice versa. */
html[data-theme="dark"] {
  --density-titlebar: #202630;
  --density-command: #181d25;
  --density-list: #181d25;
  --density-shell: #181d25;
  --density-header: #202630;
  --settings-tab-surface: #202630;
  --settings-tab-text: #aeb9c9;
  --settings-tab-border: #4f5d70;
  --settings-tab-active-bg: #d9e0e8;
  --settings-tab-active-text: #1a2532;
  --settings-tab-hover-bg: #2b3441;
  --feedback-type-bg: #252c36;
  --feedback-type-text: #dfe5ec;
  --feedback-type-border: #4a5666;
  --feedback-type-selected-bg: #e3e7eb;
  --feedback-type-selected-text: #1a2634;
  --feedback-type-selected-border: #b9c5d1;
  --feedback-submit-bg: #cdd8e4;
  --feedback-submit-text: #172433;
  --feedback-submit-border: #aab9ca;
  --feedback-submit-hover: #e0e6ec;
  --sort-active-bg: #d9e0e8;
  --sort-active-text: #1a2532;
}

html[data-theme="light"] {
  /* Light is neutral/blue-gray rather than mint-green. */
  --app-page: #f1f2f3;
  --app-page-accent: #e7e9ec;
  --app-surface: #fbfbfa;
  --app-surface-raised: #ffffff;
  --app-surface-soft: #eef0f2;
  --app-card: #ffffff;
  --app-card-live: #f7f9fb;
  --app-border: #d2d8df;
  --app-border-strong: #aeb9c6;
  --app-text: #1c2733;
  --app-muted: #5d6976;
  --app-faint: #778391;
  --app-accent: #536b88;
  --app-accent-soft: #e4e9ef;
  --app-live: #3f6381;
  --density-titlebar: #f7f7f5;
  --density-command: #eef0f2;
  --density-list: #eef0f2;
  --density-shell: #fbfbfa;
  --density-header: #f7f7f5;
  --settings-tab-surface: #eef0f2;
  --settings-tab-text: #5d6976;
  --settings-tab-border: #b8c2cd;
  --settings-tab-active-bg: #e0e6ed;
  --settings-tab-active-text: #1c2c3c;
  --settings-tab-hover-bg: #e6e9ed;
  --feedback-type-bg: #f0f2f4;
  --feedback-type-text: #283542;
  --feedback-type-border: #c4ccd5;
  --feedback-type-selected-bg: #e9e5dc;
  --feedback-type-selected-text: #24303b;
  --feedback-type-selected-border: #b8ab91;
  --feedback-submit-bg: #536b88;
  --feedback-submit-text: #ffffff;
  --feedback-submit-border: #405873;
  --feedback-submit-hover: #405873;
  --sort-active-bg: #e0e6ed;
  --sort-active-text: #1c2c3c;
}

html[data-theme="mist"] {
  --density-titlebar: #e3eeea;
  --density-command: #e7efec;
  --density-list: #e7efec;
  --density-shell: #f6faf9;
  --density-header: #e3eeea;
  --settings-tab-surface: #e0ebe8;
  --settings-tab-text: #526e68;
  --settings-tab-border: #aac2bb;
  --settings-tab-active-bg: #d5e5e0;
  --settings-tab-active-text: #17332f;
  --settings-tab-hover-bg: #dce9e5;
  --feedback-type-bg: #e4eeeb;
  --feedback-type-text: #29413d;
  --feedback-type-border: #b4c9c2;
  --feedback-type-selected-bg: #d9e8e2;
  --feedback-type-selected-text: #1d3934;
  --feedback-type-selected-border: #8eaea3;
  --feedback-submit-bg: #5f7b73;
  --feedback-submit-text: #ffffff;
  --feedback-submit-border: #4e6a63;
  --feedback-submit-hover: #4e6a63;
  --sort-active-bg: #d5e5e0;
  --sort-active-text: #17332f;
}

/* The titlebar is the only separate horizontal color band. The command row,
   live/offline sections, and card list share one continuous surface. */
.widget .density-titlebar {
  background: var(--density-titlebar);
}

.widget .density-command-panel,
.widget .streamer-list {
  background: var(--density-command);
}

/* Settings tabs use one dimension and one state system in every theme. */
.settings-dialog .settings-tabs {
  background: var(--settings-tab-surface);
}

.settings-dialog .settings-tab,
.settings-dialog .settings-tab.active,
.settings-dialog .settings-tab[aria-selected="true"] {
  box-sizing: border-box;
  min-height: 36px;
  border: 1px solid transparent;
  border-radius: 9px;
  font-weight: 700;
  line-height: 1;
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}

.settings-dialog .settings-tab {
  color: var(--settings-tab-text);
  background: transparent;
}

.settings-dialog .settings-tab:hover {
  color: var(--settings-tab-active-text);
  border-color: var(--settings-tab-border);
  background: var(--settings-tab-hover-bg);
}

.settings-dialog .settings-tab.active,
.settings-dialog .settings-tab[aria-selected="true"] {
  color: var(--settings-tab-active-text);
  border-color: var(--settings-tab-border);
  background: var(--settings-tab-active-bg);
  box-shadow: none;
}

.settings-dialog .theme-option:hover,
.settings-dialog .theme-option:has(input:focus-visible) {
  border-color: var(--settings-tab-border);
}

.settings-dialog .theme-option:has(input:checked) {
  border-color: var(--settings-tab-border);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--settings-tab-border) 36%, transparent);
}

/* Feedback controls are theme-owned instead of inheriting the old green
   primary-button palette. Unselected options remain readable and distinct. */
.feedback-dialog .feedback-types {
  gap: 7px;
  padding: 0;
  background: transparent;
}

.feedback-dialog .feedback-types legend {
  color: var(--settings-text);
}

.feedback-dialog .feedback-types span {
  box-sizing: border-box;
  min-height: 38px;
  padding: 8px 13px;
  color: var(--feedback-type-text);
  border: 1px solid var(--feedback-type-border);
  border-radius: 9px;
  background: var(--feedback-type-bg);
  font-weight: 650;
  line-height: 1.2;
}

.feedback-dialog .feedback-types span:hover {
  border-color: var(--settings-tab-border);
  background: var(--settings-tab-hover-bg);
}

.feedback-dialog .feedback-types input:checked + span {
  color: var(--feedback-type-selected-text);
  border-color: var(--feedback-type-selected-border);
  background: var(--feedback-type-selected-bg);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--feedback-type-selected-border) 34%, transparent);
}

.feedback-dialog .dialog-actions .primary-button,
.feedback-dialog #feedbackSubmitButton {
  color: var(--feedback-submit-text);
  border: 1px solid var(--feedback-submit-border);
  background: var(--feedback-submit-bg);
  box-shadow: none;
}

.feedback-dialog .dialog-actions .primary-button:hover,
.feedback-dialog #feedbackSubmitButton:hover {
  background: var(--feedback-submit-hover);
}

.feedback-dialog .dialog-actions .secondary-button {
  color: var(--feedback-type-text);
  border-color: var(--feedback-type-border);
  background: var(--feedback-type-bg);
}

/* Remove green from the night/light sort switch while preserving mist's
   intentionally soft green-gray character. */
html[data-theme="dark"] .widget .favorite-sort,
html[data-theme="light"] .widget .favorite-sort {
  border-color: var(--settings-tab-border);
  background: transparent;
}

html[data-theme="dark"] .widget .sort-mode,
html[data-theme="light"] .widget .sort-mode {
  color: var(--settings-tab-text);
}

html[data-theme="dark"] .widget .sort-mode.active,
html[data-theme="light"] .widget .sort-mode.active {
  color: var(--sort-active-text);
  background: var(--sort-active-bg);
}

/* The bell and star share a fixed box in every card, so no card density or
   live/offline layout can move the bell vertically. */
.streamer-main > .card-actions {
  box-sizing: border-box;
  display: flex;
  align-self: center;
  justify-self: end;
  align-items: center;
  justify-content: flex-end;
  width: 68px;
  height: 32px;
  min-height: 32px;
  gap: 4px;
  line-height: 0;
}

.streamer-main > .card-actions .notify-button,
.streamer-main > .card-actions .pin-button {
  box-sizing: border-box;
  display: grid;
  place-items: center;
  flex: 0 0 32px;
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 6px;
  margin: 0;
  transform: none;
}

.streamer-main > .card-actions .notify-button svg,
.streamer-main > .card-actions .pin-button svg {
  position: static;
  display: block;
  width: 18px;
  height: 18px;
  margin: 0;
  transform: none;
}

.streamer-main > .card-actions .notify-button::after {
  display: none;
}

/* The compact card keeps the same alignment, only the boxes become smaller
   together; they never use a different vertical origin. */
.streamer-list.is-dense .streamer-main > .card-actions {
  width: 64px;
  height: 28px;
  min-height: 28px;
}

.streamer-list.is-dense .streamer-main > .card-actions .notify-button,
.streamer-list.is-dense .streamer-main > .card-actions .pin-button {
  flex-basis: 28px;
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 5px;
}

html[data-theme="dark"] .widget .primary-button,
html[data-theme="light"] .widget .primary-button {
  color: #172433;
  border-color: #aab9ca;
  background: #cdd8e4;
  box-shadow: none;
}

html[data-theme="dark"] .widget .primary-button:hover,
html[data-theme="light"] .widget .primary-button:hover {
  background: #e0e6ec;
}

/* beta12.4 — feedback dialog alignment */
.feedback-dialog .dialog-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  align-items: start;
  gap: 16px;
  min-height: 42px;
  margin: 0 0 18px;
}

.feedback-dialog .dialog-heading > div {
  min-width: 0;
}

.feedback-dialog .dialog-heading .dialog-close {
  position: static;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  justify-self: end;
  align-self: start;
  width: 42px;
  min-width: 42px;
  height: 42px;
  min-height: 42px;
  margin: 0;
  padding: 0;
  line-height: 1;
  font-size: 21px;
  transform: none;
}

.feedback-dialog .feedback-types {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  grid-template-rows: auto 38px;
  align-items: center;
  justify-content: start;
  column-gap: 8px;
  row-gap: 7px;
  width: 100%;
  margin: 0 0 15px;
}

.feedback-dialog .feedback-types legend {
  grid-column: 1 / -1;
  grid-row: 1;
  align-self: end;
  width: 100%;
  margin: 0;
  padding: 0;
  line-height: 1;
}

.feedback-dialog .feedback-types label {
  display: block;
  grid-row: 2;
  height: 38px;
  margin: 0;
}

.feedback-dialog .feedback-types span {
  display: grid;
  place-items: center;
  height: 38px;
  min-height: 38px;
  margin: 0;
  white-space: nowrap;
}

@media (max-width: 440px) {
  .feedback-dialog .dialog-heading {
    grid-template-columns: minmax(0, 1fr) 38px;
    gap: 10px;
  }

  .feedback-dialog .dialog-heading .dialog-close {
    width: 38px;
    min-width: 38px;
    height: 38px;
    min-height: 38px;
  }

  .feedback-dialog .feedback-types {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 6px;
  }

  .feedback-dialog .feedback-types span {
    padding-inline: 6px;
    font-size: .78rem;
  }
}

/* beta12.5 — bright-theme add dialog, subdued offline lane, and compact TITLE header */

html[data-theme="light"] {
  --add-dialog-surface: #fffefa;
  --add-dialog-field: #fbfdff;
  --add-dialog-border: #b8c6d3;
  --add-dialog-action: #e1e8ef;
  --add-dialog-action-hover: #d4e0ea;
  --add-dialog-action-text: #1d2d3d;
  --density-card-offline: #eef1f4;
  --density-line-offline: #d0d7de;
}

html[data-theme="mist"] {
  --add-dialog-surface: #f8fcfa;
  --add-dialog-field: #f0f8f5;
  --add-dialog-border: #acc6bd;
  --add-dialog-action: #e0e9ee;
  --add-dialog-action-hover: #d2dfe7;
  --add-dialog-action-text: #1c3340;
  --density-card-offline: #e7efec;
  --density-line-offline: #c5d3ce;
}

html[data-theme="light"] body {
  background: #f4f6f8;
}

html[data-theme="mist"] body {
  background: #e8f2ef;
}

html[data-theme="light"] #addDialog,
html[data-theme="mist"] #addDialog {
  color: var(--app-text);
  border-color: var(--add-dialog-border);
  background: var(--add-dialog-surface);
}

html[data-theme="light"] #addDialog input[type="url"],
html[data-theme="light"] #addDialog input[type="text"],
html[data-theme="mist"] #addDialog input[type="url"],
html[data-theme="mist"] #addDialog input[type="text"] {
  color: var(--app-text);
  border-color: var(--add-dialog-border);
  background: var(--add-dialog-field);
}

html[data-theme="light"] #addDialog .platform-fields label,
html[data-theme="mist"] #addDialog .platform-fields label {
  color: var(--app-text);
  font-weight: 650;
}

html[data-theme="light"] #addDialog input::placeholder,
html[data-theme="mist"] #addDialog input::placeholder {
  color: var(--app-faint);
}

html[data-theme="light"] #addDialog .dialog-actions .primary-button,
html[data-theme="mist"] #addDialog .dialog-actions .primary-button {
  color: var(--add-dialog-action-text);
  border: 1px solid var(--add-dialog-border);
  background: var(--add-dialog-action);
  box-shadow: none;
}

html[data-theme="light"] #addDialog .dialog-actions .primary-button:hover,
html[data-theme="mist"] #addDialog .dialog-actions .primary-button:hover {
  background: var(--add-dialog-action-hover);
}

html[data-theme="light"] #addDialog .dialog-actions .secondary-button,
html[data-theme="mist"] #addDialog .dialog-actions .secondary-button {
  color: var(--app-muted);
  border-color: var(--add-dialog-border);
  background: var(--add-dialog-field);
}

html[data-theme="light"] .streamer-group-offline .streamer-card,
html[data-theme="mist"] .streamer-group-offline .streamer-card {
  color: var(--app-muted);
  border-color: var(--density-line-offline);
  background: var(--density-card-offline);
  box-shadow: none;
}

html[data-theme="light"] .streamer-group-offline .streamer-copy > strong,
html[data-theme="mist"] .streamer-group-offline .streamer-copy > strong {
  color: var(--app-muted);
}

html[data-theme="light"] .streamer-group-offline .streamer-copy .status-text,
html[data-theme="mist"] .streamer-group-offline .streamer-copy .status-text {
  color: var(--app-faint);
}

html[data-theme="light"] .streamer-group-offline .streamer-group-heading h2,
html[data-theme="mist"] .streamer-group-offline .streamer-group-heading h2 {
  color: color-mix(in srgb, var(--app-text) 72%, var(--app-muted));
}

html[data-theme="light"] .streamer-group-offline .streamer-group-heading span,
html[data-theme="mist"] .streamer-group-offline .streamer-group-heading span {
  color: var(--app-faint);
}

html[data-theme="light"] .streamer-group-offline .card-actions,
html[data-theme="light"] .streamer-group-offline .platforms,
html[data-theme="mist"] .streamer-group-offline .card-actions,
html[data-theme="mist"] .streamer-group-offline .platforms {
  opacity: .62;
}

.streamer-group + .streamer-group,
.streamer-list > .streamer-group + .streamer-group {
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: color-mix(in srgb, var(--density-line) 42%, transparent);
}

.stream-detail-popover {
  padding: 10px 12px 12px;
}

.stream-detail-heading {
  align-items: center;
  gap: 8px;
  min-height: 24px;
  padding-bottom: 7px;
}

.stream-detail-heading > .icon-button,
#streamDetailClose {
  align-self: center;
  flex: 0 0 24px;
  width: 24px;
  min-width: 24px;
  height: 24px;
  min-height: 24px;
  margin: 0;
  padding: 0;
  font-size: 14px;
  line-height: 1;
}

.stream-detail-heading span {
  font-size: .68rem;
  line-height: 1.1;
}

/* beta12.6 — right-aligned bulk actions, clearer hierarchy, and shared submit color */

/* Keep the selection count and both actions together at the far right of the
   live heading. The heading label and total remain on the left. */
.streamer-group-heading > .bulk-delete-actions {
  margin-left: auto;
}

/* Use one strong structural rule for the top shell boundary, then quieter
   separators for the command row and live/offline sections. */
.widget .density-titlebar {
  border-bottom: 2px solid color-mix(
    in srgb,
    var(--app-border-strong, var(--density-line-strong)) 86%,
    transparent
  );
}

.density-command-topline {
  border-bottom: 1px solid color-mix(
    in srgb,
    var(--app-border, var(--density-line)) 58%,
    transparent
  );
}

.streamer-list > .streamer-group + .streamer-group {
  border-top: 1px solid color-mix(
    in srgb,
    var(--app-border, var(--density-line)) 46%,
    transparent
  );
}

/* The TITLE cards use the same compact badge, with a small readability bump
   for the site name only. */
.stream-detail-site-heading .platform {
  font-size: .68rem;
  line-height: 1.2;
}

/* The add form must use the same theme-owned primary color as the feedback
   form's 投函する action. */
html[data-theme="dark"] #addDialog .dialog-actions .primary-button,
html[data-theme="light"] #addDialog .dialog-actions .primary-button,
html[data-theme="mist"] #addDialog .dialog-actions .primary-button {
  color: var(--feedback-submit-text);
  border: 1px solid var(--feedback-submit-border);
  background: var(--feedback-submit-bg);
  box-shadow: none;
}

html[data-theme="dark"] #addDialog .dialog-actions .primary-button:hover,
html[data-theme="light"] #addDialog .dialog-actions .primary-button:hover,
html[data-theme="mist"] #addDialog .dialog-actions .primary-button:hover {
  background: var(--feedback-submit-hover);
}

@media (min-width: 761px) {
  /* Reduce the empty band above 配信中 without changing the mobile layout. */
  .widget .streamer-list {
    padding-top: 6px;
  }

  .streamer-list > .streamer-group .streamer-group-heading {
    min-height: 30px;
    padding-top: 3px;
    padding-bottom: 4px;
  }
}

@media (max-width: 600px) {
  /* Keep all bulk actions visible and right-aligned without clipping on a
     narrow screen; they may occupy a second heading row when necessary. */
  .streamer-group-heading {
    align-items: center;
    flex-wrap: wrap;
  }

  .streamer-group-heading > h2 {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .streamer-group-heading > .bulk-delete-actions {
    box-sizing: border-box;
    flex: 0 0 100%;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    max-height: none;
    justify-content: flex-end;
    margin-left: 0;
  }

  .streamer-group-heading > .bulk-delete-actions > span {
    display: inline;
    margin-right: auto;
  }
}

/* beta13.1 — collapse the offline lane without changing wheel or touchpad behavior */
.streamer-group-offline .offline-collapse-toggle {
  flex: 0 0 auto;
  margin-left: auto;
}

.streamer-group-offline.is-collapsed {
  min-height: 0;
  padding-bottom: 0;
  overflow: hidden;
}

.streamer-group-offline.is-collapsed .streamer-group-heading {
  position: static;
  min-height: 42px;
  padding: 4px 2px;
}

@media (min-width: 761px) {
  .widget .streamer-list.is-offline-collapsed {
    grid-template-rows: minmax(0, 1fr) auto;
  }

  .streamer-list > .streamer-group-offline.is-collapsed {
    overflow: hidden;
  }
}

@media (max-width: 760px) {
  .streamer-group-offline.is-collapsed {
    margin-bottom: 2px;
  }
}

/* beta.15 — YouTube API policy links and first-use consent */
.public-legal-links {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-right: 4px;
  white-space: nowrap;
}

.public-legal-links a {
  color: #aeb9c9;
  font-size: .68rem;
  text-decoration: underline;
  text-decoration-color: rgba(174, 185, 201, .45);
  text-underline-offset: 3px;
}

.public-legal-links a:hover { color: #edf3fb; }

.policy-consent-dialog {
  width: min(560px, calc(100vw - 24px));
  max-height: min(760px, calc(100dvh - 24px));
}

.policy-consent-dialog::backdrop {
  background: rgba(3, 7, 12, .84);
  backdrop-filter: blur(4px);
}

.policy-consent-lead {
  margin: 0;
  color: #edf3fb;
  font-weight: 700;
  line-height: 1.65;
}

.policy-consent-dialog .dialog-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.policy-consent-dialog .dialog-actions > button {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  white-space: normal;
}

.policy-consent-points {
  margin: 16px 0;
  padding-left: 1.35rem;
  color: #bdc9d7;
  font-size: .88rem;
  line-height: 1.65;
}

.policy-consent-points li + li { margin-top: 6px; }

.policy-consent-check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  margin-top: 18px;
  padding: 14px;
  border: 1px solid #445165;
  border-radius: 12px;
  background: #111821;
  color: #dce6f2;
  font-size: .9rem;
  line-height: 1.65;
}

.policy-consent-check input { margin-top: .35em; }
.policy-consent-check a { color: #8fc7ff; }
.policy-consent-dialog .dialog-actions { justify-content: stretch; }
.policy-consent-dialog .dialog-actions .primary-button { width: 100%; }

@media (max-width: 760px) {
  .widget { grid-template-rows: auto 104px minmax(0, 1fr); }
  .widget .density-titlebar { min-height: 58px; padding-block: 6px; column-gap: 8px; }
  .titlebar-meta { flex-wrap: wrap; column-gap: 4px; row-gap: 0; }
  .public-legal-links { gap: 4px; margin-right: 0; }
  .public-legal-links a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding-inline: 6px; }
  .policy-consent-dialog { max-height: calc(100dvh - 16px); }
}

/* beta.16 — Official platform attribution. Downloaded brand images are kept
   unmodified; live/offline state is conveyed by a shared channel strip. */
.platform-brand-icon {
  display: block;
  height: auto;
  max-width: none;
  object-fit: contain;
  filter: none !important;
  opacity: 1 !important;
  box-shadow: none !important;
  transform: none !important;
}

.brand-icon-yt { width: 24px; }
.brand-icon-tw { width: 15px; height: 18px; }
.brand-icon-kc { width: 18px; height: 18px; }
.brand-icon-tc { width: 18px; height: 18px; }

/* beta.16-r9 — Broadcast-console channel slots.
   Every service receives the same neutral surface. The logo remains the
   identity; the signal rail and LIVE/OFF label carry the state. */
.streamer-main .platform-row {
  gap: 5px;
  align-items: center;
  flex-wrap: wrap;
  align-content: center;
  padding-top: 2px;
  border-top: 1px solid rgba(173, 190, 211, .12);
}

.streamer-main .platform-link.has-brand-icon,
.streamer-main .platform-link.has-brand-icon.online {
  box-sizing: border-box;
  position: relative;
  flex: 0 0 46px;
  width: 46px;
  min-width: 46px;
  height: 26px;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  justify-content: center;
  column-gap: 4px;
  padding: 0 6px 2px 5px;
  overflow: hidden;
  border: 1px solid var(--platform-slot-border);
  border-radius: 6px 6px 4px 4px;
  background: var(--platform-slot-bg) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .025);
}

.streamer-main .platform-link.has-brand-icon.online {
  border-color: var(--platform-slot-online-border);
  background: var(--platform-slot-online-bg) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .05);
}

.streamer-main .platform-link.has-brand-icon::before {
  content: "";
  display: block;
  position: absolute;
  right: 4px;
  bottom: 3px;
  left: 4px;
  height: 2px;
  border-radius: 2px;
  background: var(--platform-signal-muted);
  box-shadow: none;
}

.streamer-main .platform-link.has-brand-icon.online::before {
  background: var(--platform-signal);
  box-shadow: 0 0 7px var(--platform-signal-glow);
}

.streamer-main .platform-link.has-brand-icon::after {
  content: "";
  display: block;
  position: absolute;
  top: 4px;
  right: 4px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--platform-led-muted);
}

.streamer-main .platform-link.has-brand-icon.online::after {
  background: var(--platform-signal);
  box-shadow: 0 0 5px var(--platform-signal-glow);
}

.streamer-main .platform-link.has-brand-icon:hover,
.streamer-main .platform-link.has-brand-icon:focus-visible {
  filter: none;
  transform: translateY(-1px);
  border-color: #8194a8;
  outline: none;
}

.streamer-main .brand-icon-yt { width: 18px; }
.streamer-main .brand-icon-tw,
.streamer-main .brand-icon-kc,
.streamer-main .brand-icon-tc {
  width: 15px;
  height: 15px;
}

.streamer-group-offline .platform-link.has-brand-icon {
  opacity: 1;
}

.streamer-group-offline .platform-link.has-brand-icon.online {
  border-color: var(--platform-slot-online-border);
}

.platform-fields label:has(> .platform-brand-link) {
  padding-left: 38px;
}

.platform-fields .platform-brand-link {
  box-sizing: border-box;
  top: 0;
  width: 30px;
  height: 26px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent !important;
  text-decoration: none;
}

.platform-fields .platform-brand-link:hover,
.platform-fields .platform-brand-link:focus-visible {
  outline: none;
}

.platform-fields .platform-brand-link.brand-yt:hover,
.platform-fields .platform-brand-link.brand-yt:focus-visible { border-color: #ff0033; }
.platform-fields .platform-brand-link.brand-tw:hover,
.platform-fields .platform-brand-link.brand-tw:focus-visible { border-color: #9146ff; }
.platform-fields .platform-brand-link.brand-kc:hover,
.platform-fields .platform-brand-link.brand-kc:focus-visible { border-color: #53fc18; }
.platform-fields .platform-brand-link.brand-tc:hover,
.platform-fields .platform-brand-link.brand-tc:focus-visible { border-color: #31c87a; }

.stream-detail-site-heading .platform.has-brand-icon {
  position: static;
  box-sizing: border-box;
  width: 32px;
  min-width: 32px;
  height: 28px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent !important;
}

.stream-detail-site-heading .platform.has-brand-icon .brand-icon-yt { width: 26px; }
.stream-detail-site-heading .platform.has-brand-icon .brand-icon-tw { width: 17px; height: 20px; }
.stream-detail-site-heading .platform.has-brand-icon .brand-icon-kc { width: 20px; height: 20px; }
.stream-detail-site-heading .platform.has-brand-icon .brand-icon-tc { width: 20px; height: 20px; }

.stream-detail-site-heading .platform.has-brand-icon:hover,
.stream-detail-site-heading .platform.has-brand-icon:focus-visible {
  outline: none;
}

.stream-detail-site-heading .platform.brand-yt:hover,
.stream-detail-site-heading .platform.brand-yt:focus-visible { border-color: #ff0033; }
.stream-detail-site-heading .platform.brand-tw:hover,
.stream-detail-site-heading .platform.brand-tw:focus-visible { border-color: #9146ff; }
.stream-detail-site-heading .platform.brand-kc:hover,
.stream-detail-site-heading .platform.brand-kc:focus-visible { border-color: #53fc18; }
.stream-detail-site-heading .platform.brand-tc:hover,
.stream-detail-site-heading .platform.brand-tc:focus-visible { border-color: #31c87a; }

/* beta.16-r9 — Signal colors are theme-owned. The state line is deliberately
   separate from each platform's official logo color. */
html[data-theme="dark"] {
  --platform-slot-border: #394552;
  --platform-slot-bg: #171d25;
  --platform-slot-online-border: #71859c;
  --platform-slot-online-bg: #202832;
  --platform-signal: #b8d0ea;
  --platform-signal-glow: rgba(184, 208, 234, .68);
  --platform-signal-muted: #3e4854;
  --platform-led-muted: #5b6572;
}

html[data-theme="pearl"] {
  --density-page: #c8d8ee;
  --density-shell: #d9e5f5;
  --density-titlebar: #b8cceb;
  --density-header: #c1d2ec;
  --density-command: #cddbef;
  --density-list: #c9d8ed;
  --density-card: #b9cbe5;
  --density-card-offline: #aebfd8;
  --density-line: #91a9ca;
  --density-line-strong: #708cb5;
  --density-copy: #23364f;
  --density-muted: #506987;
  --density-accent: #6f8fbe;
  --density-accent-strong: #4f72a5;
  --app-page: #c8d8ee;
  --app-page-accent: #b8cceb;
  --app-surface: #d9e5f5;
  --app-surface-raised: #e3ecf9;
  --app-surface-soft: #cddbef;
  --app-card: #b9cbe5;
  --app-card-live: #c3d3eb;
  --app-border: #91a9ca;
  --app-border-strong: #708cb5;
  --app-text: #23364f;
  --app-muted: #506987;
  --app-faint: #617895;
  --app-accent: #6f8fbe;
  --app-accent-soft: #b7cbe6;
  --app-live: #4f72a5;
  --app-danger: #a94d58;
  --app-shadow: rgba(44, 67, 97, .18);
  --settings-surface: #d9e5f5;
  --settings-surface-soft: #cddbef;
  --settings-surface-raised: #e3ecf9;
  --settings-border: #91a9ca;
  --settings-text: #23364f;
  --settings-muted: #506987;
  --settings-accent: #6f8fbe;
  --settings-control-surface: #b9cbe5;
  --settings-control-border: #708cb5;
  --settings-control-text: #23364f;
  --settings-tab-surface: #c1d2ec;
  --settings-tab-text: #506987;
  --settings-tab-border: #91a9ca;
  --settings-tab-active-bg: #b7cbe6;
  --settings-tab-active-text: #23364f;
  --settings-tab-hover-bg: #c3d3eb;
  --feedback-type-bg: #cddbef;
  --feedback-type-text: #23364f;
  --feedback-type-border: #91a9ca;
  --feedback-type-selected-bg: #b7cbe6;
  --feedback-type-selected-text: #23364f;
  --feedback-type-selected-border: #708cb5;
  --feedback-submit-bg: #6f8fbe;
  --feedback-submit-text: #ffffff;
  --feedback-submit-border: #4f72a5;
  --feedback-submit-hover: #5e7eae;
  --sort-active-bg: #b7cbe6;
  --sort-active-text: #23364f;
  --theme-picker-border: #91a9ca;
  --theme-picker-surface: #d9e5f5;
  --theme-picker-text: #23364f;
  --theme-picker-muted: #506987;
  --theme-picker-accent: #6f8fbe;
  --platform-slot-border: #819bc0;
  --platform-slot-bg: #b9cbe5;
  --platform-slot-online-border: #6f8fbe;
  --platform-slot-online-bg: #c7d7ed;
  --platform-signal: #607fae;
  --platform-signal-glow: rgba(96, 127, 174, .52);
  --platform-signal-muted: #8ea7c8;
  --platform-led-muted: #6f8fbe;
}

html[data-theme="amber"] {
  --density-page: #0e1014;
  --density-shell: #17191e;
  --density-titlebar: #1e2026;
  --density-header: #1e2026;
  --density-command: #17191e;
  --density-list: #17191e;
  --density-card: #24272d;
  --density-card-offline: #15171c;
  --density-line: #3d4148;
  --density-line-strong: #6d6252;
  --density-copy: #e8e3d9;
  --density-muted: #a29a8e;
  --density-accent: #c2a477;
  --density-accent-strong: #e0c38f;
  --app-page: #0e1014;
  --app-page-accent: #1b1e24;
  --app-surface: #17191e;
  --app-surface-raised: #24272d;
  --app-surface-soft: #1e2127;
  --app-card: #24272d;
  --app-card-live: #292821;
  --app-border: #3d4148;
  --app-border-strong: #6d6252;
  --app-text: #e8e3d9;
  --app-muted: #a29a8e;
  --app-faint: #81796d;
  --app-accent: #c2a477;
  --app-accent-soft: #312b22;
  --app-live: #e0c38f;
  --app-danger: #d17b73;
  --app-shadow: rgba(0, 0, 0, .4);
  --settings-surface: #1e2127;
  --settings-surface-soft: #24272d;
  --settings-surface-raised: #2a2d33;
  --settings-border: #4a4742;
  --settings-text: #e8e3d9;
  --settings-muted: #a29a8e;
  --settings-accent: #c2a477;
  --settings-control-surface: #23262b;
  --settings-control-border: #5a5145;
  --settings-control-text: #e8e3d9;
  --settings-tab-surface: #1e2127;
  --settings-tab-text: #a29a8e;
  --settings-tab-border: #4a4742;
  --settings-tab-active-bg: #3a3227;
  --settings-tab-active-text: #f0dfbf;
  --settings-tab-hover-bg: #292b30;
  --feedback-type-bg: #23262b;
  --feedback-type-text: #e8e3d9;
  --feedback-type-border: #4a4742;
  --feedback-type-selected-bg: #3a3227;
  --feedback-type-selected-text: #f0dfbf;
  --feedback-type-selected-border: #9c815d;
  --feedback-submit-bg: #c2a477;
  --feedback-submit-text: #211b14;
  --feedback-submit-border: #987d59;
  --feedback-submit-hover: #d2b688;
  --sort-active-bg: #3a3227;
  --sort-active-text: #f0dfbf;
  --theme-picker-border: #4a4742;
  --theme-picker-surface: #1e2127;
  --theme-picker-text: #e8e3d9;
  --theme-picker-muted: #a29a8e;
  --theme-picker-accent: #d8b477;
  --platform-slot-border: #48443d;
  --platform-slot-bg: #1a1c21;
  --platform-slot-online-border: #907552;
  --platform-slot-online-bg: #28251f;
  --platform-signal: #d8b477;
  --platform-signal-glow: rgba(216, 180, 119, .58);
  --platform-signal-muted: #514b42;
  --platform-led-muted: #81796d;
}

html[data-theme="light"],
html[data-theme="mist"] {
  --platform-slot-border: var(--app-border);
  --platform-slot-bg: var(--app-surface-soft);
  --platform-slot-online-border: var(--app-border-strong);
  --platform-slot-online-bg: var(--app-accent-soft);
  --platform-signal: var(--app-live);
  --platform-signal-glow: color-mix(in srgb, var(--app-live) 52%, transparent);
  --platform-signal-muted: var(--app-border);
  --platform-led-muted: var(--app-faint);
}

html[data-theme="dark"] .streamer-main > .elapsed-time,
html[data-theme="pearl"] .streamer-main > .elapsed-time,
html[data-theme="amber"] .streamer-main > .elapsed-time,
html[data-theme="light"] .streamer-main > .elapsed-time,
html[data-theme="mist"] .streamer-main > .elapsed-time {
  color: var(--platform-signal);
}

html[data-theme="pearl"] .widget .streamer-card.is-live,
html[data-theme="amber"] .widget .streamer-card.is-live {
  border-color: var(--density-line-strong);
  background: var(--density-card);
  box-shadow: inset 3px 0 var(--platform-signal);
}

html[data-theme="pearl"] .widget .streamer-card,
html[data-theme="pearl"] .widget .streamer-group-offline .streamer-card {
  color: var(--density-copy);
  border-color: var(--density-line);
  background: var(--density-card);
}

html[data-theme="amber"] .widget .streamer-card,
html[data-theme="amber"] .widget .streamer-group-offline .streamer-card {
  color: var(--density-copy);
  border-color: var(--density-line);
  background: var(--density-card);
}

html[data-theme="pearl"] .widget .streamer-group-offline .streamer-card,
html[data-theme="amber"] .widget .streamer-group-offline .streamer-card {
  background: var(--density-card-offline);
}

html[data-theme="pearl"] .streamer-card.is-live .avatar i,
html[data-theme="amber"] .streamer-card.is-live .avatar i {
  background: var(--platform-signal);
  box-shadow: 0 0 8px var(--platform-signal-glow);
}

/* beta.16-r11 — Complete theme pass. Every visible control and text surface
   uses one palette instead of inheriting the original green/navy defaults. */
html[data-theme="dark"] {
  --theme-page: #18222d;
  --theme-surface: #202c38;
  --theme-surface-soft: #263645;
  --theme-surface-raised: #2d3e4e;
  --theme-card: #2b3a49;
  --theme-card-offline: #23313f;
  --theme-line: #4b6074;
  --theme-line-strong: #71869c;
  --theme-text: #eef3f8;
  --theme-muted: #b3bfcc;
  --theme-faint: #91a0af;
  --theme-accent: #a9c2dc;
  --theme-accent-strong: #d5e4f1;
  --theme-control: #324758;
  --theme-control-hover: #3d5367;
  --theme-selected: #3a5268;
  --theme-dialog: #253543;
  --theme-input: #1d2a36;
  --theme-offline-text: #a9b7c5;
  --theme-offline-muted: #91a0af;
  --theme-danger: #e2a0a5;
}

html[data-theme="pearl"] {
  --theme-page: #c8d8ee;
  --theme-surface: #d9e5f5;
  --theme-surface-soft: #cddbef;
  --theme-surface-raised: #e3ecf9;
  --theme-card: #b9cbe5;
  --theme-card-offline: #afc0d8;
  --theme-line: #91a9ca;
  --theme-line-strong: #708cb5;
  --theme-text: #23364f;
  --theme-muted: #506987;
  --theme-faint: #637b98;
  --theme-accent: #6f8fbe;
  --theme-accent-strong: #4f72a5;
  --theme-control: #b7cbe6;
  --theme-control-hover: #c3d3eb;
  --theme-selected: #a9c0df;
  --theme-dialog: #d9e5f5;
  --theme-input: #e3ecf9;
  --theme-offline-text: #526b88;
  --theme-offline-muted: #637b98;
  --theme-danger: #9d4c58;
}

html[data-theme="amber"] {
  --theme-page: #262624;
  --theme-surface: #32312e;
  --theme-surface-soft: #3b3934;
  --theme-surface-raised: #454139;
  --theme-card: #403e38;
  --theme-card-offline: #353430;
  --theme-line: #625d53;
  --theme-line-strong: #91816a;
  --theme-text: #eee7dc;
  --theme-muted: #b8ac9b;
  --theme-faint: #978b7b;
  --theme-accent: #d4b17b;
  --theme-accent-strong: #f0d19b;
  --theme-control: #4a4439;
  --theme-control-hover: #5a5143;
  --theme-selected: #554936;
  --theme-dialog: #393630;
  --theme-input: #2c2b28;
  --theme-offline-text: #aaa092;
  --theme-offline-muted: #918678;
  --theme-danger: #df9b91;
}

html[data-theme="light"] {
  --theme-page: #f3f5f7;
  --theme-surface: #ffffff;
  --theme-surface-soft: #edf1f4;
  --theme-surface-raised: #ffffff;
  --theme-card: #ffffff;
  --theme-card-offline: #e6eaed;
  --theme-line: #d7dee5;
  --theme-line-strong: #aab9c8;
  --theme-text: #17212b;
  --theme-muted: #5f6d7a;
  --theme-faint: #7b8793;
  --theme-accent: #557892;
  --theme-accent-strong: #3f617d;
  --theme-control: #e2eaf0;
  --theme-control-hover: #d5e1e9;
  --theme-selected: #d2e0e9;
  --theme-dialog: #ffffff;
  --theme-input: #f8fafb;
  --theme-offline-text: #5f6d7a;
  --theme-offline-muted: #71808d;
  --theme-danger: #a34852;
}

html[data-theme="mist"] {
  --theme-page: #e5efec;
  --theme-surface: #f6faf9;
  --theme-surface-soft: #dfece8;
  --theme-surface-raised: #fbfdfc;
  --theme-card: #f2f8f5;
  --theme-card-offline: #d7e3df;
  --theme-line: #bfd2cd;
  --theme-line-strong: #94b8ae;
  --theme-text: #17332f;
  --theme-muted: #526e68;
  --theme-faint: #708983;
  --theme-accent: #5b8c82;
  --theme-accent-strong: #3f7168;
  --theme-control: #d4e8e2;
  --theme-control-hover: #c7ded7;
  --theme-selected: #c3ddd5;
  --theme-dialog: #f1f8f5;
  --theme-input: #fbfdfc;
  --theme-offline-text: #58746d;
  --theme-offline-muted: #708983;
  --theme-danger: #a84f58;
}

/* Base aliases remove hard-coded green/navy from the original component CSS. */
html[data-theme] {
  --bg: var(--theme-page);
  --panel: var(--theme-surface);
  --panel-2: var(--theme-surface-soft);
  --line: var(--theme-line);
  --muted: var(--theme-muted);
  --text: var(--theme-text);
  --accent: var(--theme-accent);
  --accent-strong: var(--theme-accent-strong);
}

html[data-theme] body {
  color: var(--theme-text);
  background: var(--theme-page);
}

html[data-theme] .widget {
  color: var(--theme-text);
  background: var(--theme-surface);
  border-color: var(--theme-line);
  box-shadow: 0 24px 70px color-mix(in srgb, var(--theme-text) 16%, transparent);
}

html[data-theme] .titlebar,
html[data-theme] .status-summary,
html[data-theme] .view-tabs,
html[data-theme] .tab-toolbar,
html[data-theme] .footer-actions {
  color: var(--theme-text);
  border-color: var(--theme-line);
}

html[data-theme] .brand-mark {
  background: linear-gradient(145deg, var(--theme-control-hover), var(--theme-control));
  border-color: color-mix(in srgb, var(--theme-accent) 58%, var(--theme-line));
}

html[data-theme] .brand-mark i {
  background: var(--theme-accent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--theme-accent) 48%, transparent);
}

html[data-theme] .icon-button {
  color: var(--theme-muted);
  background: transparent;
}

html[data-theme] .icon-button:hover,
html[data-theme] .icon-button.active {
  color: var(--theme-accent-strong);
  background: color-mix(in srgb, var(--theme-accent) 14%, transparent);
}

html[data-theme] .live-pulse {
  background: var(--theme-accent);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--theme-accent) 13%, transparent), 0 0 12px var(--theme-accent);
}

html[data-theme] .brand .brand-title,
html[data-theme] .live-summary,
html[data-theme] .status-summary strong,
html[data-theme] .view-tab.active,
html[data-theme] .streamer-copy > strong,
html[data-theme] .is-live .streamer-copy small {
  color: var(--theme-text);
}

html[data-theme] .is-live .streamer-copy small {
  color: var(--theme-accent-strong);
}

html[data-theme] .brand p,
html[data-theme] #updatedAt,
html[data-theme] .tab-toolbar p,
html[data-theme] .view-tab,
html[data-theme] .streamer-copy .status-text,
html[data-theme] .form-note,
html[data-theme] .share-note,
html[data-theme] .settings-footnote {
  color: var(--theme-muted);
}

html[data-theme] .view-tab.active {
  border-bottom-color: var(--theme-accent);
}

html[data-theme] .widget .footer-actions {
  background: color-mix(in srgb, var(--theme-surface-raised) 88%, transparent);
  border-color: var(--theme-line);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--theme-text) 12%, transparent);
}

html[data-theme] .widget .footer-actions button,
html[data-theme] .widget .bulk-delete-toggle,
html[data-theme] .widget .bulk-delete-cancel,
html[data-theme] .widget .offline-collapse-toggle,
html[data-theme] .widget .favorite-sort {
  color: var(--theme-text);
  border-color: var(--theme-line-strong);
  background: var(--theme-control);
}

html[data-theme] .widget .footer-actions button:hover,
html[data-theme] .widget .bulk-delete-toggle:hover,
html[data-theme] .widget .bulk-delete-cancel:hover,
html[data-theme] .widget .offline-collapse-toggle:hover,
html[data-theme] .widget .sort-mode:hover {
  color: var(--theme-text);
  border-color: var(--theme-accent);
  background: var(--theme-control-hover);
}

html[data-theme] .widget .footer-actions .primary-button,
html[data-theme] .widget .dialog-actions .primary-button,
html[data-theme] .widget .x-share-confirm {
  color: var(--theme-text);
  border-color: var(--theme-line-strong);
  background: var(--theme-selected);
  box-shadow: none;
}

html[data-theme] .widget .footer-actions .primary-button:hover,
html[data-theme] .widget .dialog-actions .primary-button:hover,
html[data-theme] .widget .x-share-confirm:hover {
  background: var(--theme-control-hover);
}

html[data-theme] .widget .feedback-button {
  color: var(--theme-text);
  border-color: var(--theme-line-strong);
  background: var(--theme-control);
}

html[data-theme] .widget .favorite-sort {
  padding: 2px;
  background: var(--theme-surface-soft);
}

html[data-theme] .widget .sort-mode {
  color: var(--theme-muted);
}

html[data-theme] .widget .sort-mode.active {
  color: var(--theme-text);
  background: var(--theme-selected);
}

html[data-theme] .notify-button {
  color: var(--theme-muted);
  border-color: transparent;
  background: transparent;
}

html[data-theme] .notify-button.is-enabled {
  color: var(--theme-accent-strong);
  border-color: var(--theme-accent);
  background: color-mix(in srgb, var(--theme-accent) 16%, transparent);
}

html[data-theme] .pin-button {
  color: var(--theme-muted);
}

html[data-theme] .streamer-group-offline .streamer-copy > strong,
html[data-theme] .streamer-group-offline .streamer-copy .status-text,
html[data-theme] .streamer-group-offline .streamer-group-heading h2,
html[data-theme] .streamer-group-offline .streamer-group-heading span {
  color: var(--theme-offline-text);
}

html[data-theme] .streamer-group-offline .streamer-copy .status-text,
html[data-theme] .streamer-group-offline .streamer-group-heading span {
  color: var(--theme-offline-muted);
}

html[data-theme] .streamer-group-offline .card-actions,
html[data-theme] .streamer-group-offline .platforms {
  opacity: .82;
}

html[data-theme] .streamer-group-offline .offline-collapse-toggle {
  color: var(--theme-text);
  background: var(--theme-control);
}

html[data-theme] .add-platform-button,
html[data-theme] .public-legal-links a,
html[data-theme] .stream-detail-link,
html[data-theme] .stream-detail-title {
  color: var(--theme-muted);
}

html[data-theme] .add-platform-button:hover,
html[data-theme] .public-legal-links a:hover,
html[data-theme] .stream-detail-link:hover {
  color: var(--theme-accent-strong);
}

html[data-theme] .toast {
  color: var(--theme-text);
  background: var(--theme-dialog);
  border-color: var(--theme-line-strong);
  box-shadow: 0 12px 45px color-mix(in srgb, var(--theme-text) 18%, transparent);
}

/* Dialogs and every settings surface share the same semantic ladder. */
html[data-theme] .dialog {
  color: var(--theme-text);
  background: var(--theme-dialog);
  border-color: var(--theme-line);
  box-shadow: 0 30px 100px color-mix(in srgb, var(--theme-text) 24%, transparent);
}

html[data-theme] .dialog::backdrop {
  background: color-mix(in srgb, var(--theme-page) 74%, transparent);
}

html[data-theme] .dialog label,
html[data-theme] .dialog .feedback-types legend,
html[data-theme] .dialog-heading h2,
html[data-theme] .dialog-heading span,
html[data-theme] .settings-dialog .settings-intro strong,
html[data-theme] .settings-dialog .sync-description > strong,
html[data-theme] .settings-dialog .sync-box strong,
html[data-theme] .settings-dialog .install-box strong,
html[data-theme] .settings-dialog .beta-box strong,
html[data-theme] .settings-dialog .notification-modes legend {
  color: var(--theme-text);
}

html[data-theme] .dialog input[type="url"],
html[data-theme] .dialog input[type="text"],
html[data-theme] .dialog input[type="search"],
html[data-theme] .dialog textarea {
  color: var(--theme-text);
  background: var(--theme-input);
  border-color: var(--theme-line);
}

html[data-theme] .dialog input::placeholder,
html[data-theme] .dialog textarea::placeholder {
  color: var(--theme-faint);
}

html[data-theme] .settings-dialog {
  color: var(--theme-text);
  background: var(--theme-dialog);
  border-color: var(--theme-line);
}

html[data-theme] .settings-dialog .dialog-heading,
html[data-theme] .settings-dialog .settings-tabs {
  border-color: var(--theme-line);
  background: var(--theme-surface-soft);
}

html[data-theme] .settings-dialog .settings-tab {
  color: var(--theme-muted);
}

html[data-theme] .settings-dialog .settings-tab.active,
html[data-theme] .settings-dialog .settings-tab[aria-selected="true"] {
  color: var(--theme-text);
  border-color: var(--theme-accent);
  background: var(--theme-selected);
}

html[data-theme] .settings-dialog .settings-panel,
html[data-theme] .settings-dialog .settings-intro,
html[data-theme] .settings-dialog .settings-footnote,
html[data-theme] .settings-dialog .sync-description,
html[data-theme] .settings-dialog .sync-description p,
html[data-theme] .settings-dialog .account-delete-note,
html[data-theme] .settings-dialog .legal-note {
  color: var(--theme-muted);
}

html[data-theme] .settings-dialog .notification-modes,
html[data-theme] .settings-dialog .notification-details,
html[data-theme] .settings-dialog .sync-primary-group,
html[data-theme] .settings-dialog .sync-box,
html[data-theme] .settings-dialog .install-box,
html[data-theme] .settings-dialog .theme-picker,
html[data-theme] .settings-dialog .uninstall-guide,
html[data-theme] .settings-dialog .beta-box,
html[data-theme] .settings-dialog .developer-box {
  color: var(--theme-text);
  border-color: var(--theme-line);
  background: var(--theme-surface-soft);
}

html[data-theme] .settings-dialog .notification-modes label,
html[data-theme] .settings-dialog .notification-details label,
html[data-theme] .settings-dialog .theme-option {
  color: var(--theme-text);
  border-color: var(--theme-line);
  background: var(--theme-surface-raised);
}

html[data-theme] .settings-dialog .notification-modes label:has(input:checked),
html[data-theme] .settings-dialog .notification-details label:has(input:checked),
html[data-theme] .settings-dialog .theme-option:has(input:checked) {
  color: var(--theme-text);
  border-color: var(--theme-accent);
  background: var(--theme-selected);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--theme-accent) 24%, transparent);
}

html[data-theme] .settings-dialog .notification-modes label strong,
html[data-theme] .settings-dialog .notification-details label strong,
html[data-theme] .settings-dialog .notification-modes label small,
html[data-theme] .settings-dialog .notification-details label small,
html[data-theme] .settings-dialog .theme-option-copy strong {
  color: var(--theme-text);
}

html[data-theme] .settings-dialog .notification-modes label small,
html[data-theme] .settings-dialog .notification-details label small,
html[data-theme] .settings-dialog .theme-option-copy small {
  color: var(--theme-muted);
  opacity: 1;
}

html[data-theme] .settings-dialog .secondary-button,
html[data-theme] .settings-dialog .text-button,
html[data-theme] .dialog-actions .secondary-button {
  color: var(--theme-text);
  border-color: var(--theme-line-strong);
  background: var(--theme-control);
}

html[data-theme] .settings-dialog .secondary-button:hover,
html[data-theme] .settings-dialog .text-button:hover,
html[data-theme] .dialog-actions .secondary-button:hover {
  color: var(--theme-text);
  border-color: var(--theme-accent);
  background: var(--theme-control-hover);
}

html[data-theme] .settings-dialog .sync-box small,
html[data-theme] .settings-dialog .sync-privacy,
html[data-theme] .settings-dialog .notification-details small {
  color: var(--theme-muted);
}

html[data-theme] .settings-dialog .notification-details summary {
  color: var(--theme-text);
}

html[data-theme] .bulk-delete-actions > span,
html[data-theme] .bulk-delete-confirm {
  color: var(--theme-danger);
}

html[data-theme] .bulk-delete-confirm {
  border-color: color-mix(in srgb, var(--theme-danger) 56%, var(--theme-line));
  background: color-mix(in srgb, var(--theme-danger) 12%, var(--theme-surface-soft));
}

/* beta.16-r12 — Semantic control pass.
   Every non-destructive action uses the same control surface in every theme.
   Active/selected controls use one selected surface; destructive actions keep
   the danger color. This only changes paint, not layout or interaction. */
html[data-theme] .widget .footer-actions > button,
html[data-theme] .widget .tab-toolbar > button,
html[data-theme] .widget .bulk-delete-actions > button,
html[data-theme] .dialog-actions > .secondary-button,
html[data-theme] .dialog-actions > .primary-button,
html[data-theme] .dialog-actions > .x-share-confirm,
html[data-theme] .sync-conflict-actions > button:not(.sync-choice-cancel),
html[data-theme] .settings-dialog .support-links > a,
html[data-theme] .settings-dialog .sync-actions > button:not(.danger-text-button) {
  color: var(--theme-text);
  border-color: var(--theme-line-strong);
  background: var(--theme-control);
  box-shadow: none;
}

html[data-theme] .widget .footer-actions > button:hover,
html[data-theme] .widget .tab-toolbar > button:hover,
html[data-theme] .widget .bulk-delete-actions > button:hover,
html[data-theme] .dialog-actions > .secondary-button:hover,
html[data-theme] .dialog-actions > .primary-button:hover,
html[data-theme] .dialog-actions > .x-share-confirm:hover,
html[data-theme] .sync-conflict-actions > button:not(.sync-choice-cancel):hover,
html[data-theme] .settings-dialog .support-links > a:hover,
html[data-theme] .settings-dialog .sync-actions > button:not(.danger-text-button):hover {
  color: var(--theme-text);
  border-color: var(--theme-accent);
  background: var(--theme-control-hover);
}

/* The command row is one action family. The add button is emphasised only
   with its accent border, so it does not introduce a second button color. */
html[data-theme] .widget .footer-actions .primary-button,
html[data-theme] .widget .footer-actions .feedback-button,
html[data-theme] .widget .footer-actions .share-button,
html[data-theme] .widget .footer-actions .footer-icon {
  color: var(--theme-text);
  border-color: var(--theme-line-strong);
  background: var(--theme-control);
}

html[data-theme] .widget .footer-actions .primary-button:hover,
html[data-theme] .widget .footer-actions .feedback-button:hover,
html[data-theme] .widget .footer-actions .share-button:hover,
html[data-theme] .widget .footer-actions .footer-icon:hover {
  color: var(--theme-text);
  border-color: var(--theme-accent-strong);
  background: var(--theme-control-hover);
}

html[data-theme] .beta-badge {
  color: var(--theme-muted);
}

/* The sort wrapper and both sort choices share the same neutral/selected
   ladder as the main command buttons. */
html[data-theme] .widget .favorite-sort {
  border-color: var(--theme-line-strong);
  background: var(--theme-surface-soft);
}

html[data-theme] .widget .favorite-sort .sort-mode {
  color: var(--theme-muted);
  border-color: transparent;
  background: transparent;
}

html[data-theme] .widget .favorite-sort .sort-mode:hover,
html[data-theme] .widget .favorite-sort .sort-mode.active {
  color: var(--theme-text);
  border-color: var(--theme-line-strong);
  background: var(--theme-selected);
}

html[data-theme] .widget .view-tab,
html[data-theme] .widget .view-tab.active {
  color: var(--theme-muted);
  border-color: transparent;
  background: transparent;
}

html[data-theme] .widget .view-tab:hover,
html[data-theme] .widget .view-tab.active {
  color: var(--theme-text);
}

html[data-theme] .widget .view-tab.active {
  border-bottom-color: var(--theme-accent);
}

/* Small card controls use the same neutral family, while their pressed state
   uses the one selected color. */
html[data-theme] .widget .notify-button,
html[data-theme] .widget .pin-button,
html[data-theme] .widget .icon-button {
  color: var(--theme-muted);
  border-color: var(--theme-line);
  background: var(--theme-surface-soft);
  opacity: 1;
  box-shadow: inset 0 1px color-mix(in srgb, var(--theme-text) 10%, transparent);
}

html[data-theme] .widget .notify-button:hover,
html[data-theme] .widget .pin-button:hover,
html[data-theme] .widget .icon-button:hover,
html[data-theme] .widget .notify-button.is-enabled,
html[data-theme] .widget .notify-button[aria-pressed="true"],
html[data-theme] .widget .pin-button[aria-pressed="true"],
html[data-theme] .widget .icon-button.active {
  color: var(--theme-accent-strong);
  border-color: var(--theme-line-strong);
  background: var(--theme-selected);
}

html[data-theme] .widget .notify-button.is-enabled,
html[data-theme] .widget .notify-button[aria-pressed="true"],
html[data-theme] .widget .pin-button[aria-pressed="true"] {
  border-color: var(--theme-accent);
  background: var(--theme-selected);
}

html[data-theme] .widget .notify-button svg,
html[data-theme] .widget .pin-button svg {
  stroke-width: 2;
  filter: drop-shadow(0 1px 0 color-mix(in srgb, var(--theme-text) 16%, transparent));
}

html[data-theme] .widget .notify-button.is-enabled svg,
html[data-theme] .widget .notify-button[aria-pressed="true"] svg,
html[data-theme] .widget .pin-button[aria-pressed="true"] svg {
  color: var(--theme-accent-strong);
  stroke: var(--theme-accent-strong);
}

html[data-theme] .widget .pin-button[aria-pressed="true"] svg {
  fill: color-mix(in srgb, var(--theme-accent) 48%, transparent);
}

html[data-theme] .widget .danger-text-button,
html[data-theme] .widget .danger-button,
html[data-theme] .widget .bulk-delete-confirm {
  color: var(--theme-danger);
}

html[data-theme] .settings-dialog .settings-tab,
html[data-theme] .settings-dialog .settings-tab.active,
html[data-theme] .settings-dialog .settings-tab[aria-selected="true"] {
  color: var(--theme-muted);
  border-color: transparent;
  background: transparent;
}

html[data-theme] .settings-dialog .settings-tab:hover,
html[data-theme] .settings-dialog .settings-tab.active,
html[data-theme] .settings-dialog .settings-tab[aria-selected="true"] {
  color: var(--theme-text);
  border-color: var(--theme-line-strong);
  background: var(--theme-selected);
}

/* Make inherited/legacy text colors impossible to miss in settings. */
html[data-theme] .settings-dialog,
html[data-theme] .settings-dialog p,
html[data-theme] .settings-dialog small,
html[data-theme] .settings-dialog em,
html[data-theme] .settings-dialog .settings-intro,
html[data-theme] .settings-dialog .settings-footnote,
html[data-theme] .settings-dialog .sync-description p,
html[data-theme] .settings-dialog .sync-box small,
html[data-theme] .settings-dialog .sync-privacy,
html[data-theme] .settings-dialog .notification-details small,
html[data-theme] .settings-dialog .legal-note,
html[data-theme] .settings-dialog .uninstall-guide p,
html[data-theme] .settings-dialog .uninstall-guide small {
  color: var(--theme-muted);
}

html[data-theme] .settings-dialog h2,
html[data-theme] .settings-dialog strong,
html[data-theme] .settings-dialog legend,
html[data-theme] .settings-dialog summary,
html[data-theme] .settings-dialog .notification-modes label,
html[data-theme] .settings-dialog .notification-details label,
html[data-theme] .settings-dialog .theme-option,
html[data-theme] .settings-dialog .theme-option strong,
html[data-theme] .settings-dialog .notification-modes label strong,
html[data-theme] .settings-dialog .notification-details label strong {
  color: var(--theme-text);
}

html[data-theme] .settings-dialog .notification-modes,
html[data-theme] .settings-dialog .notification-details,
html[data-theme] .settings-dialog .sync-primary-group,
html[data-theme] .settings-dialog .sync-box,
html[data-theme] .settings-dialog .install-box,
html[data-theme] .settings-dialog .theme-picker,
html[data-theme] .settings-dialog .uninstall-guide,
html[data-theme] .settings-dialog .beta-box,
html[data-theme] .settings-dialog .developer-box,
html[data-theme] .settings-dialog .theme-option,
html[data-theme] .settings-dialog .notification-modes label,
html[data-theme] .settings-dialog .notification-details label {
  border-color: var(--theme-line);
  background: var(--theme-surface-soft);
}

html[data-theme] .settings-dialog .notification-modes label,
html[data-theme] .settings-dialog .notification-details label,
html[data-theme] .settings-dialog .theme-option {
  background: var(--theme-surface-raised);
}

html[data-theme] .settings-dialog .notification-modes label:has(input:checked),
html[data-theme] .settings-dialog .notification-details label:has(input:checked),
html[data-theme] .settings-dialog .theme-option:has(input:checked) {
  border-color: var(--theme-accent);
  background: var(--theme-selected);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--theme-accent) 28%, transparent);
}

html[data-theme] .settings-dialog input,
html[data-theme] .settings-dialog textarea,
html[data-theme] .settings-dialog select {
  color: var(--theme-text);
  border-color: var(--theme-line);
  background: var(--theme-input);
}

html[data-theme] .settings-dialog input::placeholder,
html[data-theme] .settings-dialog textarea::placeholder {
  color: var(--theme-faint);
}

/* Shell and card surfaces also follow the same token ladder. */
html[data-theme] .widget .density-command-panel,
html[data-theme] .widget .density-command-topline,
html[data-theme] .widget .streamer-list,
html[data-theme] .widget .streamer-group-heading {
  color: var(--theme-text);
  border-color: var(--theme-line);
  background: var(--theme-surface);
}

html[data-theme] .widget .density-command-panel,
html[data-theme] .widget .density-command-topline {
  background: var(--theme-surface-soft);
}

html[data-theme] .widget .streamer-card,
html[data-theme] .widget .streamer-list.is-dense .streamer-card {
  color: var(--theme-text);
  border-color: var(--theme-line);
  background: var(--theme-card);
  box-shadow: none;
}

html[data-theme] .widget .streamer-card.is-live {
  border-color: var(--theme-line-strong);
  background: var(--theme-card);
  box-shadow: inset 3px 0 var(--theme-accent);
}

html[data-theme] .widget .streamer-card.is-live:hover,
html[data-theme] .widget .streamer-card.is-live:focus-visible,
html[data-theme] .widget .streamer-card.is-detail-open {
  border-color: var(--theme-accent);
  box-shadow: inset 3px 0 var(--theme-accent-strong), 0 0 0 2px color-mix(in srgb, var(--theme-accent) 16%, transparent);
}

html[data-theme] .widget .streamer-group-offline .streamer-card,
html[data-theme] .widget .streamer-list.is-dense .streamer-group-offline .streamer-card {
  border-color: var(--theme-line);
  background: var(--theme-card-offline);
}

html[data-theme] .widget .streamer-group-heading h2,
html[data-theme] .widget .streamer-copy > strong {
  color: var(--theme-text);
}

html[data-theme] .widget .streamer-group-heading span,
html[data-theme] .widget .streamer-copy .status-text,
html[data-theme] .widget .streamer-main > .elapsed-time,
html[data-theme] .widget .empty-state {
  color: var(--theme-muted);
}

html[data-theme] .widget .is-live .streamer-copy small,
html[data-theme] .widget .streamer-main > .elapsed-time {
  color: var(--theme-accent-strong);
}

html[data-theme] .widget .empty-state {
  border-color: var(--theme-line);
  background: var(--theme-surface-soft);
}

html[data-theme] .widget .streamer-card .avatar {
  color: var(--theme-text);
  border-color: var(--theme-line-strong);
  background: var(--theme-surface-raised);
}

html[data-theme] .widget .streamer-card .avatar i {
  border-color: var(--theme-card);
  background: var(--theme-faint);
}

html[data-theme] .widget .streamer-card.is-live .avatar i {
  background: var(--theme-accent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--theme-accent) 54%, transparent);
}

html[data-theme] .widget .platform-link:not(.online),
html[data-theme] .widget .add-platform-button {
  color: var(--theme-muted);
  border-color: var(--theme-line);
  background: var(--theme-surface-soft);
}

html[data-theme] .widget .platform-link.online {
  border-color: color-mix(in srgb, var(--platform) 72%, var(--theme-line));
  background: color-mix(in srgb, var(--platform) 38%, var(--theme-surface));
}

html[data-theme] .widget .notify-button::after {
  border-color: var(--theme-line);
  background: var(--theme-surface-soft);
  color: var(--theme-muted);
}

html[data-theme] .widget .notify-button.is-enabled::after,
html[data-theme] .widget .notify-button[aria-pressed="true"]::after {
  border-color: var(--theme-accent);
  background: var(--theme-selected);
  color: var(--theme-accent-strong);
}

html[data-theme] .stream-detail-popover {
  color: var(--theme-text);
  border-color: var(--theme-line);
  background: var(--theme-dialog);
  box-shadow: 0 24px 70px color-mix(in srgb, var(--theme-text) 24%, transparent);
}

html[data-theme] .stream-detail-site {
  color: var(--theme-text);
  border-color: var(--theme-line);
  background: var(--theme-surface-soft);
}

/* Feedback choices use the same selected color as tabs and settings choices;
   the former amber/white checked state is intentionally removed. */
html[data-theme] .feedback-types span {
  color: var(--theme-muted);
  border-color: var(--theme-line);
  background: var(--theme-surface-soft);
}

html[data-theme] .feedback-types input:checked + span {
  color: var(--theme-text);
  border-color: var(--theme-accent);
  background: var(--theme-selected);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--theme-accent) 24%, transparent);
}

html[data-theme] .feedback-types label:hover span {
  border-color: var(--theme-accent);
  background: var(--theme-control-hover);
}

/* r17: feedback choices use a crisp, matte state surface.
   Remove the soft inset treatment that made the selected color look blurred. */
html[data-theme] .feedback-dialog .feedback-types span {
  background: var(--theme-surface-soft);
  box-shadow: none;
  filter: none;
}

html[data-theme] .feedback-dialog .feedback-types input:checked + span {
  color: var(--theme-text);
  border-color: var(--theme-accent);
  background: var(--theme-selected);
  box-shadow: none;
  filter: none;
}

/* r15: let the account copy belong to the dialog surface.
   Only the actionable sync row remains a card; the explanatory copy no longer
   sits on an unrelated rectangular fill. */
html[data-theme] .settings-dialog .sync-primary-group {
  border: 0;
  border-bottom: 1px solid var(--theme-line);
  border-radius: 0;
  background: transparent;
}

html[data-theme] .settings-dialog .sync-primary-group .sync-description,
html[data-theme] .settings-dialog .sync-primary-group .sync-description p,
html[data-theme] .settings-dialog .sync-description p,
html[data-theme] .settings-dialog .settings-footnote,
html[data-theme] .settings-dialog .sync-box small,
html[data-theme] .settings-dialog .sync-privacy,
html[data-theme] .settings-dialog .legal-note,
html[data-theme] .settings-dialog .uninstall-guide p,
html[data-theme] .settings-dialog .uninstall-guide small {
  color: color-mix(in srgb, var(--theme-text) 72%, var(--theme-muted));
}

html[data-theme] .settings-dialog .sync-box {
  border-color: var(--theme-line-strong);
  background: var(--theme-surface-raised);
  box-shadow: inset 0 1px color-mix(in srgb, var(--theme-text) 9%, transparent);
}

/* r14: mechanical shared control rail for notification and favorite */
html[data-theme] .widget .streamer-main > .card-actions {
  box-sizing: border-box;
  width: 100%;
  max-width: 52px;
  min-width: 0;
  height: 28px;
  padding: 1px;
  gap: 0;
  border: 1px solid var(--theme-line);
  border-radius: 8px;
  background: var(--theme-surface-raised);
  box-shadow: inset 0 1px color-mix(in srgb, var(--theme-text) 12%, transparent);
}
html[data-theme] .widget .streamer-main > .card-actions::before {
  content: "";
  position: absolute;
  inset-block: 4px;
  left: 50%;
  border-left: 1px solid var(--theme-line);
  pointer-events: none;
}
html[data-theme] .widget .streamer-main > .card-actions .notify-button,
html[data-theme] .widget .streamer-main > .card-actions .pin-button {
  box-sizing: border-box;
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  height: 24px;
  padding: 4px;
  border: 0;
  border-radius: 6px;
  color: var(--theme-muted);
  background: transparent;
  box-shadow: none;
  opacity: 1;
}
html[data-theme] .widget .streamer-main > .card-actions .notify-button:hover,
html[data-theme] .widget .streamer-main > .card-actions .pin-button:hover {
  color: var(--theme-text);
  background: color-mix(in srgb, var(--theme-text) 9%, transparent);
}
html[data-theme] .widget .streamer-main > .card-actions .notify-button svg,
html[data-theme] .widget .streamer-main > .card-actions .pin-button svg {
  stroke: currentColor;
  stroke-width: 2;
  filter: none;
}
html[data-theme] .widget .streamer-main > .card-actions .notify-button::after,
html[data-theme] .widget .streamer-main > .card-actions .pin-button::after {
  content: "";
  position: absolute;
  left: 50%;
  right: auto;
  bottom: 1px;
  width: 7px;
  min-width: 0;
  height: 2px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: var(--theme-faint);
  box-shadow: none;
  transform: translateX(-50%);
}
html[data-theme] .widget .streamer-main > .card-actions .notify-button.is-enabled,
html[data-theme] .widget .streamer-main > .card-actions .notify-button[aria-pressed="true"],
html[data-theme] .widget .streamer-main > .card-actions .pin-button[aria-pressed="true"] {
  color: var(--theme-accent-strong);
  background: color-mix(in srgb, var(--theme-selected) 82%, transparent);
}
html[data-theme] .widget .streamer-main > .card-actions .notify-button.is-enabled::after,
html[data-theme] .widget .streamer-main > .card-actions .notify-button[aria-pressed="true"]::after,
html[data-theme] .widget .streamer-main > .card-actions .pin-button[aria-pressed="true"]::after {
  width: 10px;
  background: var(--theme-accent-strong);
  box-shadow: none;
}
html[data-theme] .widget .streamer-main > .card-actions .pin-button[aria-pressed="true"] svg {
  fill: color-mix(in srgb, var(--theme-accent) 48%, transparent);
}

/* r16: precision keys — independent controls, no decorative center rail */
html[data-theme] .widget .streamer-main > .card-actions {
  box-sizing: border-box;
  width: 100%;
  max-width: 52px;
  min-width: 0;
  height: 28px;
  padding: 0;
  gap: 3px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

html[data-theme] .widget .streamer-main > .card-actions::before {
  content: none;
}

html[data-theme] .widget .streamer-main > .card-actions .notify-button,
html[data-theme] .widget .streamer-main > .card-actions .pin-button {
  position: relative;
  box-sizing: border-box;
  flex: 0 0 24px;
  width: 24px;
  min-width: 24px;
  height: 24px;
  padding: 4px;
  border: 1px solid var(--theme-line-strong);
  border-radius: 5px;
  color: var(--theme-muted);
  background: var(--theme-surface-soft);
  box-shadow: inset 0 1px color-mix(in srgb, var(--theme-text) 10%, transparent);
  opacity: 1;
}

html[data-theme] .widget .streamer-main > .card-actions .notify-button:hover,
html[data-theme] .widget .streamer-main > .card-actions .pin-button:hover {
  color: var(--theme-text);
  border-color: var(--theme-accent);
  background: var(--theme-control-hover);
}

html[data-theme] .widget .streamer-main > .card-actions .notify-button svg,
html[data-theme] .widget .streamer-main > .card-actions .pin-button svg {
  stroke: currentColor;
  stroke-width: 2;
  filter: none;
}

html[data-theme] .widget .streamer-main > .card-actions .notify-button::after,
html[data-theme] .widget .streamer-main > .card-actions .pin-button::after {
  content: none;
}

html[data-theme] .widget .streamer-main > .card-actions .notify-button.is-enabled,
html[data-theme] .widget .streamer-main > .card-actions .notify-button[aria-pressed="true"],
html[data-theme] .widget .streamer-main > .card-actions .pin-button[aria-pressed="true"] {
  color: var(--theme-accent-strong);
  border-color: var(--theme-accent);
  background: var(--theme-selected);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--theme-accent) 20%, transparent);
}

html[data-theme] .widget .streamer-main > .card-actions .notify-button.is-enabled::after,
html[data-theme] .widget .streamer-main > .card-actions .notify-button[aria-pressed="true"]::after,
html[data-theme] .widget .streamer-main > .card-actions .pin-button[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  top: 2px;
  right: 2px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--theme-accent);
}

html[data-theme] .widget .streamer-main > .card-actions .pin-button[aria-pressed="true"] svg {
  fill: color-mix(in srgb, var(--theme-accent) 44%, transparent);
}

/* r18: the active view tab uses a quiet light-rail instead of a hard
   rectangular underline. The solid lower edge remains legible while the
   light gently recedes toward the label. */
html[data-theme] .widget .view-tab {
  position: relative;
  border-bottom: 0 !important;
}

html[data-theme] .widget .view-tab::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 1px;
  width: min(96px, calc(100% - 24px));
  height: 10px;
  border-radius: 999px 999px 2px 2px;
  background: linear-gradient(
    to top,
    var(--theme-accent-strong) 0,
    var(--theme-accent-strong) 2px,
    color-mix(in srgb, var(--theme-accent) 30%, transparent) 3px,
    color-mix(in srgb, var(--theme-accent) 10%, transparent) 52%,
    transparent 100%
  );
  box-shadow: 0 -2px 8px color-mix(in srgb, var(--theme-accent) 16%, transparent);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%);
  transition: opacity 180ms ease;
}

html[data-theme] .widget .view-tab.active::after,
html[data-theme] .widget .view-tab[aria-selected="true"]::after {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme] .widget .view-tab::after {
    transition: none;
  }
}

/* r19: separate notification and favorite states with distinct hues.
   The control remains frameless and marker-free; the icon itself carries
   the state so the two actions are easy to scan without adding decoration. */
html[data-theme="dark"] {
  --notify-on: #e4b66d;
  --favorite-on: #c4a6e8;
}

html[data-theme="pearl"] {
  --notify-on: #b87524;
  --favorite-on: #7558b0;
}

html[data-theme="amber"] {
  --notify-on: #e4b86e;
  --favorite-on: #c0a7df;
}

html[data-theme="light"] {
  --notify-on: #9b671c;
  --favorite-on: #7056a8;
}

html[data-theme="mist"] {
  --notify-on: #a86e29;
  --favorite-on: #6e5aa1;
}

html[data-theme] .widget .streamer-main > .card-actions {
  width: 52px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  gap: 3px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

html[data-theme] .widget .streamer-main > .card-actions::before,
html[data-theme] .widget .streamer-main > .card-actions::after,
html[data-theme] .widget .streamer-main > .card-actions .notify-button::before,
html[data-theme] .widget .streamer-main > .card-actions .notify-button::after,
html[data-theme] .widget .streamer-main > .card-actions .pin-button::before,
html[data-theme] .widget .streamer-main > .card-actions .pin-button::after {
  content: none !important;
  display: none !important;
}

html[data-theme] .widget .streamer-main > .card-actions .notify-button,
html[data-theme] .widget .streamer-main > .card-actions .pin-button {
  position: relative;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  flex: 0 0 24px;
  width: 24px;
  min-width: 24px;
  height: 24px;
  min-height: 24px;
  padding: 3px;
  border: 0;
  border-radius: 0;
  color: var(--theme-faint);
  background: transparent;
  box-shadow: none;
  opacity: 1;
  transition: color 160ms ease, transform 160ms ease;
}

html[data-theme] .widget .streamer-main > .card-actions .notify-button:hover,
html[data-theme] .widget .streamer-main > .card-actions .notify-button:focus-visible {
  color: var(--notify-on);
  background: transparent;
}

html[data-theme] .widget .streamer-main > .card-actions .pin-button:hover,
html[data-theme] .widget .streamer-main > .card-actions .pin-button:focus-visible {
  color: var(--favorite-on);
  background: transparent;
}

html[data-theme] .widget .streamer-main > .card-actions .notify-button:active,
html[data-theme] .widget .streamer-main > .card-actions .pin-button:active {
  transform: scale(.92);
}

html[data-theme] .widget .streamer-main > .card-actions .notify-button svg,
html[data-theme] .widget .streamer-main > .card-actions .pin-button svg {
  position: static;
  display: block;
  width: 18px;
  height: 18px;
  margin: 0;
  transform: none;
  stroke: currentColor;
  stroke-width: 1.75;
  fill: none;
  filter: none;
}

html[data-theme] .widget .streamer-main > .card-actions .notify-button.is-enabled,
html[data-theme] .widget .streamer-main > .card-actions .notify-button[data-state="ON"],
html[data-theme] .widget .streamer-main > .card-actions .notify-button[aria-pressed="true"] {
  color: var(--notify-on);
}

html[data-theme] .widget .streamer-main > .card-actions .pin-button[aria-pressed="true"] {
  color: var(--favorite-on);
}

html[data-theme] .widget .streamer-main > .card-actions .notify-button.is-enabled svg,
html[data-theme] .widget .streamer-main > .card-actions .notify-button[data-state="ON"] svg,
html[data-theme] .widget .streamer-main > .card-actions .notify-button[aria-pressed="true"] svg {
  stroke-width: 2.25;
}

html[data-theme] .widget .streamer-main > .card-actions .pin-button[aria-pressed="true"] svg {
  fill: currentColor;
  stroke-width: 1.75;
}

html[data-theme] .widget .streamer-main > .card-actions .notify-button:focus-visible,
html[data-theme] .widget .streamer-main > .card-actions .pin-button:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--theme-accent) 82%, var(--theme-text));
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme] .widget .streamer-main > .card-actions .notify-button,
  html[data-theme] .widget .streamer-main > .card-actions .pin-button {
    transition: none;
  }
}

/* r20: persistent colored states for the frameless card actions. Hover is
   only a preview; ON must remain visible after the pointer leaves. */
html[data-theme] .widget .streamer-main > .card-actions .notify-button,
html[data-theme] .widget .streamer-main > .card-actions .pin-button,
html[data-theme] .widget .streamer-main > .card-actions .notify-button:hover,
html[data-theme] .widget .streamer-main > .card-actions .pin-button:hover,
html[data-theme] .widget .streamer-main > .card-actions .notify-button.is-enabled,
html[data-theme] .widget .streamer-main > .card-actions .notify-button[data-state="ON"],
html[data-theme] .widget .streamer-main > .card-actions .notify-button[aria-pressed="true"],
html[data-theme] .widget .streamer-main > .card-actions .pin-button[aria-pressed="true"] {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-theme] .widget .streamer-main > .card-actions .notify-button.is-enabled,
html[data-theme] .widget .streamer-main > .card-actions .notify-button[data-state="ON"],
html[data-theme] .widget .streamer-main > .card-actions .notify-button[aria-pressed="true"] {
  color: var(--notify-on) !important;
}

html[data-theme] .widget .streamer-main > .card-actions .pin-button[aria-pressed="true"] {
  color: var(--favorite-on) !important;
}

/* r38: make the favorite state unmistakable on every theme. OFF remains a
   quiet outline; ON keeps the outline but switches to a dedicated signal hue. */
html[data-theme="dark"] { --favorite-on: #ff5fc7; }
html[data-theme="pearl"] { --favorite-on: #8b2fa3; }
html[data-theme="amber"] { --favorite-on: #27c7ff; }
html[data-theme="light"] { --favorite-on: #b51f9f; }
html[data-theme="mist"] { --favorite-on: #7046c9; }

html[data-theme] .widget .streamer-main > .card-actions .pin-button[aria-pressed="true"] svg {
  fill: none !important;
  stroke: var(--favorite-on) !important;
  stroke-width: 2.5 !important;
  filter: drop-shadow(0 0 2px color-mix(in srgb, var(--favorite-on) 48%, transparent));
}

/* r39: use the same title rail on settings and streamer dialogs so the
   important entry points share one visual language. */
html[data-theme] .settings-dialog .dialog-heading,
html[data-theme] #addDialog .dialog-heading,
html[data-theme] .site-dialog .dialog-heading {
  position: relative;
  padding-bottom: 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--theme-line) 72%, transparent);
}

html[data-theme] .settings-dialog .dialog-heading::after,
html[data-theme] #addDialog .dialog-heading::after,
html[data-theme] .site-dialog .dialog-heading::after {
  content: "";
  position: absolute;
  right: auto;
  bottom: -1px;
  left: 0;
  width: 58px;
  height: 2px;
  border-radius: 999px;
  background: var(--theme-accent);
  transform-origin: left center;
  transition: width 220ms ease;
}

html[data-theme] .settings-dialog:focus-within .dialog-heading::after,
html[data-theme] #addDialog:focus-within .dialog-heading::after,
html[data-theme] .site-dialog:focus-within .dialog-heading::after {
  width: 92px;
}

/* r30: favorite gets a dedicated violet signal, independent of each theme's
   own accent. The stronger outline is enough to make the saved state clear
   while keeping the control quiet and unfilled. */
html[data-theme="dark"],
html[data-theme="amber"] {
  --favorite-on: #d77cff;
}

html[data-theme="pearl"],
html[data-theme="light"],
html[data-theme="mist"] {
  --favorite-on: #8d3eaa;
}

html[data-theme] .widget .streamer-main > .card-actions .pin-button[aria-pressed="true"] svg {
  fill: none !important;
  stroke: var(--favorite-on) !important;
  stroke-width: 2.3 !important;
}

/* r31: keep the edit glyph optically centered inside its compact platform
   slot. Explicit grid sizing prevents inherited line-height or button padding
   from shifting the SVG toward an edge. */
html[data-theme] .widget .streamer-main .edit-sites-button {
  display: grid !important;
  place-items: center !important;
  box-sizing: border-box;
  padding: 0 !important;
  line-height: 0 !important;
  text-align: center;
}

html[data-theme] .widget .streamer-main .edit-sites-button svg {
  display: block;
  place-self: center;
  margin: 0 !important;
  transform: translateX(.35px);
}

/* r33: add restrained hierarchy to the feedback flow without introducing
   another filled panel. Important moments use a line, color, and motion. */
html[data-theme] .feedback-dialog .dialog-heading {
  position: relative;
  padding-bottom: 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--theme-line) 72%, transparent);
}

html[data-theme] .feedback-dialog .dialog-heading::after {
  content: "";
  position: absolute;
  right: auto;
  bottom: -1px;
  left: 0;
  width: 58px;
  height: 2px;
  border-radius: 999px;
  background: var(--theme-accent);
  transform-origin: left center;
  transition: width 220ms ease;
}

html[data-theme] .feedback-dialog:focus-within .dialog-heading::after {
  width: 92px;
}

html[data-theme] .feedback-dialog .feedback-types legend {
  display: flex;
  align-items: center;
  gap: 8px;
}

html[data-theme] .feedback-dialog .feedback-types legend::before {
  content: "";
  width: 3px;
  height: 14px;
  flex: 0 0 3px;
  border-radius: 999px;
  background: var(--theme-accent);
}

html[data-theme] .feedback-dialog .feedback-types span {
  position: relative;
  transition: color 160ms ease;
}

html[data-theme] .feedback-dialog .feedback-types span::after {
  content: "";
  position: absolute;
  right: 8px;
  bottom: -1px;
  left: 8px;
  height: 2px;
  border-radius: 999px;
  background: var(--theme-accent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 180ms ease;
}

html[data-theme] .feedback-dialog .feedback-types input:checked + span {
  box-shadow: none !important;
}

/* r59: the enlarged feedback hit area stays visually invisible. Only the
   selected text and its aligned underline communicate the active state. */
html[data-theme] .feedback-dialog .feedback-type-button,
html[data-theme] .feedback-dialog .feedback-type-button:hover,
html[data-theme] .feedback-dialog .feedback-type-button:active,
html[data-theme] .feedback-dialog .feedback-type-button:focus,
html[data-theme] .feedback-dialog .feedback-type-button[aria-pressed="true"],
html[data-theme] .feedback-dialog .feedback-type-button.active {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* r50: keep ON states visible without hover. Use one yellow signal family for
   the bell and star, with darker golds on light surfaces for contrast. The
   favorite icon remains outline-only. */
html[data-theme="dark"] {
  --notify-on: #f4c95d;
  --favorite-on: #f4c95d;
}

html[data-theme="pearl"] {
  --notify-on: #a86f12;
  --favorite-on: #a86f12;
}

html[data-theme="amber"] {
  --notify-on: #f4cf79;
  --favorite-on: #f4cf79;
}

html[data-theme="light"] {
  --notify-on: #a96808;
  --favorite-on: #a96808;
}

html[data-theme="mist"] {
  --notify-on: #a87316;
  --favorite-on: #a87316;
}

html[data-theme] .widget .streamer-main > .card-actions .notify-button,
html[data-theme] .widget .streamer-main > .card-actions .pin-button {
  opacity: 1 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-theme] .widget .streamer-main > .card-actions .notify-button[aria-pressed="false"],
html[data-theme] .widget .streamer-main > .card-actions .pin-button[aria-pressed="false"] {
  color: color-mix(in srgb, var(--theme-muted) 86%, var(--theme-text)) !important;
}

html[data-theme] .widget .streamer-main > .card-actions .notify-button.is-enabled,
html[data-theme] .widget .streamer-main > .card-actions .notify-button[data-state="ON"],
html[data-theme] .widget .streamer-main > .card-actions .notify-button[aria-pressed="true"] {
  color: var(--notify-on) !important;
}

html[data-theme] .widget .streamer-main > .card-actions .pin-button[aria-pressed="true"] {
  color: var(--favorite-on) !important;
}

html[data-theme] .widget .streamer-main > .card-actions .notify-button[aria-pressed="false"] svg,
html[data-theme] .widget .streamer-main > .card-actions .pin-button[aria-pressed="false"] svg {
  color: inherit !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 2 !important;
  filter: none !important;
}

html[data-theme] .widget .streamer-main > .card-actions .notify-button.is-enabled svg,
html[data-theme] .widget .streamer-main > .card-actions .notify-button[data-state="ON"] svg,
html[data-theme] .widget .streamer-main > .card-actions .notify-button[aria-pressed="true"] svg {
  color: inherit !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 2.35 !important;
  filter: none !important;
}

html[data-theme] .widget .streamer-main > .card-actions .pin-button[aria-pressed="true"] svg {
  color: inherit !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 2.25 !important;
  filter: none !important;
}

/* r58: keep the feedback categories on one shared rail. The selected button
   places its thicker accent segment on the exact same baseline, so it covers
   the thin rail instead of creating a second offset line. */
html[data-theme] .feedback-dialog .feedback-types {
  position: relative;
}

html[data-theme] .feedback-dialog .feedback-types::after {
  content: "" !important;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: var(--theme-line) !important;
  pointer-events: none;
}

html[data-theme] .feedback-dialog .feedback-type-button,
html[data-theme] .feedback-dialog .feedback-type-button:hover,
html[data-theme] .feedback-dialog .feedback-type-button:focus-visible,
html[data-theme] .feedback-dialog .feedback-type-button[aria-pressed="true"],
html[data-theme] .feedback-dialog .feedback-type-button.active {
  position: relative;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-theme] .feedback-dialog .feedback-type-button:focus-visible {
  outline: 1px solid color-mix(in srgb, var(--theme-accent) 50%, transparent);
  outline-offset: -2px;
}

html[data-theme] .feedback-dialog .feedback-type-button::after {
  content: none !important;
  display: none !important;
}

html[data-theme] .feedback-dialog .feedback-type-button[aria-pressed="true"]::after,
html[data-theme] .feedback-dialog .feedback-type-button.active::after {
  content: "" !important;
  display: block !important;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  border-radius: 999px;
  background: var(--theme-accent-strong) !important;
  pointer-events: none;
}

/* r47: make each feedback category a forgiving, invisible hit target. The
   previous max-content columns only accepted clicks close to the glyphs;
   these wider tabs keep the visual rail unchanged while making the whole
   category area clickable. */
.feedback-dialog .feedback-types {
  grid-template-columns: repeat(3, minmax(70px, max-content));
}

.feedback-dialog .feedback-types label,
.feedback-dialog .feedback-types span {
  width: 100%;
}

@media (max-width: 440px) {
  .feedback-dialog .feedback-types {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* r48: stop the quiet base rail just after the third category instead of
   carrying it across the entire feedback form. The active segment remains
   tied to its wider click target. */
html[data-theme] .feedback-dialog .feedback-types::after {
  right: auto;
  width: 226px;
  max-width: 100%;
}

@media (max-width: 440px) {
  html[data-theme] .feedback-dialog .feedback-types::after {
    right: 0;
    width: 100%;
    max-width: none;
  }
}

/* r49: align the settings title copy slightly closer to the dialog edge
   without moving the title rail or the close control. */
.settings-dialog .dialog-heading > div {
  transform: translateX(-8px);
}

/* r46: keep unselected notification radios inside the active theme. The
   native unchecked ring was falling back to a neutral/taupe system color,
   while the selected state already follows --theme-accent. Only the
   unchecked controls are custom-painted so the selected appearance stays
   unchanged. */
html[data-theme="dark"] .settings-dialog .notification-modes input[type="radio"]:not(:checked) {
  appearance: none;
  width: 15px;
  height: 15px;
  margin: 2px 0 0;
  border: 1.5px solid #7895b5;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
}

html[data-theme="amber"] .settings-dialog .notification-modes input[type="radio"]:not(:checked) {
  appearance: none;
  width: 15px;
  height: 15px;
  margin: 2px 0 0;
  border: 1.5px solid #b18b5c;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
}

html[data-theme] .feedback-dialog .feedback-types input:checked + span::after {
  transform: scaleX(1);
}

html[data-theme] .feedback-dialog textarea {
  /* Keep the message field close to the dialog surface instead of creating
     a dark/light rectangle inside the feedback form. */
  border-color: color-mix(in srgb, var(--theme-line) 78%, var(--theme-dialog)) !important;
  background: color-mix(in srgb, var(--theme-input) 56%, var(--theme-dialog) 44%) !important;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

html[data-theme] .feedback-dialog textarea:focus {
  border-color: var(--theme-accent) !important;
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-accent) 18%, transparent) !important;
}

/* r57: make the message label recede into the feedback form. The field
   remains identifiable through its softened surface and border. */
html[data-theme] .feedback-dialog .feedback-message-label {
  color: var(--theme-muted) !important;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .02em;
}

html[data-theme] .feedback-dialog .dialog-actions .primary-button {
  transition: transform 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

html[data-theme] .feedback-dialog .dialog-actions .primary-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--theme-accent) 18%, transparent);
}

html[data-theme] .feedback-dialog .dialog-actions .primary-button:active {
  transform: translateY(0) scale(.98);
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme] .feedback-dialog .dialog-heading::after,
  html[data-theme] .feedback-dialog .feedback-types span,
  html[data-theme] .feedback-dialog .feedback-types span::after,
  html[data-theme] .feedback-dialog textarea,
  html[data-theme] .feedback-dialog .dialog-actions .primary-button {
    transition: none;
  }
}

html[data-theme] .widget .streamer-main > .card-actions .notify-button.is-enabled svg,
html[data-theme] .widget .streamer-main > .card-actions .notify-button[data-state="ON"] svg,
html[data-theme] .widget .streamer-main > .card-actions .notify-button[aria-pressed="true"] svg {
  stroke: var(--notify-on) !important;
  fill: none !important;
  stroke-width: 2.25;
}

html[data-theme] .widget .streamer-main > .card-actions .pin-button[aria-pressed="true"] svg {
  stroke: var(--favorite-on) !important;
  fill: var(--favorite-on) !important;
  stroke-width: 1.75;
}

html[data-theme] .widget .streamer-main > .card-actions .notify-button[aria-pressed="false"] svg,
html[data-theme] .widget .streamer-main > .card-actions .pin-button[aria-pressed="false"] svg {
  fill: none !important;
}

/* r21: replace the stepped active-tab gradient with a precise light line.
   The short, low-radius glow keeps the active state visible without a broad
   haze or visible gradient bands. */
html[data-theme] .widget .view-tab::after {
  left: 50%;
  bottom: 1px;
  width: min(92px, calc(100% - 26px));
  height: 2px;
  border-radius: 999px;
  background: var(--theme-accent-strong);
  box-shadow: 0 0 4px color-mix(in srgb, var(--theme-accent) 28%, transparent);
  transform: translateX(-50%);
}

/* r22: soften settings surfaces that were left with square corners by the
   compact layout pass. Every theme now follows the same rounded surface
   rhythm, including the notification choices shown as a grouped panel. */
html[data-theme] .settings-dialog .notification-modes,
html[data-theme] .settings-dialog .notification-details,
html[data-theme] .settings-dialog .sync-primary-group {
  box-sizing: border-box;
  border: 1px solid var(--theme-line) !important;
  border-radius: 12px !important;
  background: var(--theme-surface-soft) !important;
  overflow: hidden;
}

html[data-theme] .settings-dialog .notification-modes {
  padding: 0 0 4px;
}

html[data-theme] .settings-dialog .notification-modes legend {
  padding: 10px 12px 6px;
}

html[data-theme] .settings-dialog .notification-modes label {
  margin: 0 6px;
  border-bottom: 1px solid color-mix(in srgb, var(--theme-line) 72%, transparent);
  border-radius: 8px;
  background: transparent;
}

html[data-theme] .settings-dialog .notification-modes label:last-of-type {
  border-bottom: 0;
}

html[data-theme] .settings-dialog .notification-modes label:has(input:checked) {
  border: 1px solid color-mix(in srgb, var(--theme-accent) 64%, var(--theme-line));
  background: color-mix(in srgb, var(--theme-accent) 12%, var(--theme-surface-raised));
}

html[data-theme] .settings-dialog .notification-details {
  padding: 0 12px 12px;
}

html[data-theme] .settings-dialog .notification-details summary {
  border-radius: 9px;
}

html[data-theme] .settings-dialog .sync-primary-group {
  padding: 16px;
  border-bottom: 1px solid var(--theme-line) !important;
}

/* r24: the theme grid already owns its visible surfaces. Keep the fieldset
   itself transparent so a second rectangular layer does not sit behind the
   cards and make the settings panel look patched together. */
html[data-theme] .settings-dialog .theme-picker {
  background: transparent !important;
  border: 0 !important;
}

/* r25: remove the remaining wrapper paints around the settings content. The
   dialog itself supplies the base surface; only cards and explicit controls
   should introduce a second surface. */
html[data-theme] .settings-dialog .settings-panel,
html[data-theme] .settings-dialog .theme-picker,
html[data-theme] .settings-dialog .theme-options {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* r23: remove the avatar status dot and platform corner LED. Platform slots
   keep only their short bottom signal rail and share the card surface so
   their backgrounds do not look like separate dark stickers. */
html[data-theme] .widget .streamer-card .avatar i {
  display: none !important;
}

html[data-theme] .widget .streamer-main .platform-link.has-brand-icon::after,
html[data-theme] .widget .streamer-main .platform-link.has-brand-icon.online::after,
html[data-theme] .widget .streamer-main .platform-link::after {
  content: none !important;
  display: none !important;
}

html[data-theme] .widget .streamer-main .platform-link.has-brand-icon,
html[data-theme] .widget .streamer-main .platform-link.has-brand-icon.online {
  border-color: var(--theme-line) !important;
  border-radius: 8px;
  background: var(--theme-card) !important;
  box-shadow: inset 0 1px color-mix(in srgb, var(--theme-text) 7%, transparent) !important;
}

html[data-theme] .widget .streamer-main .platform-link.has-brand-icon.online {
  border-color: color-mix(in srgb, var(--theme-line-strong) 76%, var(--theme-line)) !important;
}

/* r26: replace the broad outer dialog glow with one precise light rail. The
   page stays a solid theme color and the rail uses an outline so it never
   changes layout or creates a blurred gradient outside the frame. */
html[data-theme] body,
html[data-theme] #appRoot {
  background: var(--theme-page) !important;
  background-image: none !important;
}

html[data-theme] .settings-dialog {
  box-shadow: none !important;
  outline: none !important;
  border-color: var(--theme-line-strong) !important;
}

@media (max-width: 760px) {
  html[data-theme] .settings-dialog {
    outline: none;
  }
}

/* r27: keep the notification group as the only framed surface. Individual
   choices use a flat state fill, so a selected row never becomes a card inside
   the group card. */
html[data-theme] .settings-dialog .notification-modes label,
html[data-theme] .settings-dialog .notification-details label,
html[data-theme] .settings-dialog .notification-modes label:has(input:checked),
html[data-theme] .settings-dialog .notification-details label:has(input:checked) {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

html[data-theme] .settings-dialog .notification-modes label:has(input:checked),
html[data-theme] .settings-dialog .notification-details label:has(input:checked) {
  background: var(--theme-selected) !important;
  border-radius: 8px !important;
}

/* r28: the settings shell is one continuous surface. Remove the separate
   rectangular paint from the heading, tabs, and scrolling panel so their
   boundaries are carried only by the existing divider lines. */
html[data-theme] .settings-dialog .dialog-heading,
html[data-theme] .settings-dialog .settings-tabs,
html[data-theme] .settings-dialog .settings-panel {
  background: transparent !important;
  background-image: none !important;
}

/* Feedback categories sit directly on the dialog surface. The active choice
   keeps a compact bottom rail instead of becoming a small colored card. */
html[data-theme] .feedback-dialog .feedback-types {
  background: transparent !important;
}

html[data-theme] .feedback-dialog .feedback-types span,
html[data-theme] .feedback-dialog .feedback-types span:hover,
html[data-theme] .feedback-dialog .feedback-types input:checked + span {
  color: var(--theme-muted) !important;
  border-color: transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-theme] .feedback-dialog .feedback-types span:hover {
  color: var(--theme-text) !important;
}

html[data-theme] .feedback-dialog .feedback-types input:checked + span {
  color: var(--theme-text) !important;
  font-weight: 750;
  box-shadow: inset 0 -2px var(--theme-accent) !important;
}

/* r32: all primary user dialogs share the settings dialog's single clean
   perimeter. Remove the heavier outer shadow without changing dialog size. */
html[data-theme] .feedback-dialog,
html[data-theme] #addDialog,
html[data-theme] .site-dialog {
  box-shadow: none !important;
  outline: none !important;
  border-color: var(--theme-line-strong) !important;
}

/* r29: notification and favorite use the same outline-only icon language.
   Favorite remains distinguishable through its theme-owned ON hue, never a
   filled star. */
html[data-theme] .widget .streamer-main > .card-actions .pin-button svg,
html[data-theme] .widget .streamer-main > .card-actions .pin-button[aria-pressed="true"] svg,
html[data-theme] .widget .streamer-main > .card-actions .pin-button[aria-pressed="false"] svg {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.9 !important;
}

html[data-theme] .widget .streamer-main > .card-actions .pin-button[aria-pressed="true"] {
  color: var(--favorite-on) !important;
}

/* r37: raise Pearl's darker surfaces by roughly two steps. Keep all legacy
   density/app/settings tokens aligned so no older component leaves a darker
   rectangle behind the newer theme surfaces. */
html[data-theme="pearl"] {
  --density-page: #dbe7f3;
  --density-shell: #e8eef7;
  --density-titlebar: #d2e0ee;
  --density-header: #d9e6f2;
  --density-command: #e1eaf4;
  --density-list: #dbe7f3;
  --density-card: #d5e2ef;
  --density-card-offline: #cedbe8;

  --app-page: #dbe7f3;
  --app-page-accent: #d2e0ee;
  --app-surface: #e8eef7;
  --app-surface-raised: #f0f5fa;
  --app-surface-soft: #e1eaf4;
  --app-card: #d5e2ef;
  --app-card-live: #dbe8f4;

  --settings-surface: #e8eef7;
  --settings-surface-soft: #e1eaf4;
  --settings-surface-raised: #f0f5fa;
  --settings-control-surface: #d5e2ef;
  --settings-tab-surface: #d9e6f2;
  --settings-tab-active-bg: #d5e2f0;
  --settings-tab-hover-bg: #e0eaf4;

  --feedback-type-bg: #e1eaf4;
  --feedback-type-selected-bg: #d5e2f0;
  --sort-active-bg: #d5e2f0;

  --theme-page: #e4edf7;
  --theme-surface: #eef4fa;
  --theme-surface-soft: #e8f0f7;
  --theme-surface-raised: #f5f8fc;
  --theme-card: #e0ebf5;
  --theme-card-offline: #d8e4ef;
  --theme-control: #e0ebf5;
  --theme-control-hover: #e9f1f8;
  --theme-selected: #d9e6f1;
  --theme-dialog: #eef4fa;
  --theme-input: #f5f8fc;
}

/* r40: notification and favorite share one brighter ON signal per theme. */
html[data-theme="dark"] {
  --notify-on: #c8ddf0;
  --favorite-on: #c8ddf0;
}

html[data-theme="pearl"] {
  --notify-on: #c58a3a;
  --favorite-on: #c58a3a;
}

html[data-theme="amber"] {
  --notify-on: #f0c783;
  --favorite-on: #f0c783;
}

html[data-theme="light"] {
  --notify-on: #b97827;
  --favorite-on: #b97827;
}

html[data-theme="mist"] {
  --notify-on: #c4823a;
  --favorite-on: #c4823a;
}

/* r41: native radio controls must follow the active theme instead of the
   legacy settings accent, which could make dark themes look brown. */
html[data-theme] .settings-dialog .notification-modes input[type="radio"],
html[data-theme] .settings-dialog .notification-details input[type="radio"] {
  accent-color: var(--theme-accent) !important;
}

/* r44: feedback category changes should feel immediate. The rail is limited
   to the tab cluster instead of stretching across the whole dialog. */
html[data-theme] .feedback-dialog .feedback-types label,
html[data-theme] .feedback-dialog .feedback-types span {
  cursor: pointer;
  touch-action: manipulation;
}

html[data-theme] .feedback-dialog .feedback-types span,
html[data-theme] .feedback-dialog .feedback-types span::after,
html[data-theme] .feedback-dialog .feedback-types input:checked + span {
  transition: none !important;
}

html[data-theme] .feedback-dialog .feedback-types::after {
  right: auto;
  width: min(240px, 100%);
}

@media (max-width: 440px) {
  html[data-theme] .feedback-dialog .feedback-types::after {
    width: 100%;
  }
}

/* r42: E案 — a quiet full-width rail with the active tab revealed on top.
   Both rails use the real grid/label bounds, so the accent cannot drift away
   from its selected tab when the viewport or label widths change. */
html[data-theme] .feedback-dialog .feedback-types {
  position: relative;
}

html[data-theme] .feedback-dialog .feedback-types::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: var(--theme-line);
  pointer-events: none;
}

html[data-theme] .feedback-dialog .feedback-types span::after {
  right: 0;
  bottom: -1px;
  left: 0;
  height: 3px;
  border-radius: 999px;
  background: var(--theme-accent-strong);
}

html[data-theme] .feedback-dialog .feedback-types input:checked + span {
  box-shadow: none !important;
}

/* r53: expand the feedback category hit targets without changing the compact
   visual treatment. Each label now owns a wider, continuous column and a
   taller touch area, including the space around the text. */
html[data-theme] .feedback-dialog .feedback-types {
  grid-template-columns: repeat(3, minmax(86px, 1fr)) !important;
  column-gap: 0 !important;
  width: min(300px, 100%) !important;
}

html[data-theme] .feedback-dialog .feedback-types label {
  box-sizing: border-box;
  width: 100% !important;
  min-height: 46px;
  padding: 4px;
}

html[data-theme] .feedback-dialog .feedback-types span {
  box-sizing: border-box;
  width: 100% !important;
  height: 46px;
  min-height: 46px;
  padding: 8px 10px;
}

/* r55: use one shared rail for feedback categories. The active segment sits
   on the exact same baseline as the rail, while the enlarged labels remain
   transparent hit targets instead of becoming colored cards. */
html[data-theme] .feedback-dialog .feedback-types {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  column-gap: 6px !important;
  width: min(300px, 100%) !important;
}

html[data-theme] .feedback-dialog .feedback-types label,
html[data-theme] .feedback-dialog .feedback-types label:has(input:checked) {
  box-sizing: border-box;
  width: 100% !important;
  min-height: 46px;
  padding: 4px;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transition: none !important;
}

html[data-theme] .feedback-dialog .feedback-types span,
html[data-theme] .feedback-dialog .feedback-types span::after {
  transition: none !important;
}

html[data-theme] .feedback-dialog .feedback-types span::after {
  bottom: 0;
}

/* r54: sharpen the warm ON signal on the three lightest themes. The extra
   root specificity keeps these theme values ahead of legacy palette blocks. */
html:root[data-theme="pearl"] {
  --notify-on: #b87308;
  --favorite-on: #b87308;
}

html:root[data-theme="light"] {
  --notify-on: #ad6b00;
  --favorite-on: #ad6b00;
}

html:root[data-theme="mist"] {
  --notify-on: #ad7410;
  --favorite-on: #ad7410;
}

html:root[data-theme="pearl"] .widget .streamer-main > .card-actions .notify-button[aria-pressed="true"] svg,
html:root[data-theme="light"] .widget .streamer-main > .card-actions .notify-button[aria-pressed="true"] svg,
html:root[data-theme="mist"] .widget .streamer-main > .card-actions .notify-button[aria-pressed="true"] svg,
html:root[data-theme="pearl"] .widget .streamer-main > .card-actions .pin-button[aria-pressed="true"] svg,
html:root[data-theme="light"] .widget .streamer-main > .card-actions .pin-button[aria-pressed="true"] svg,
html:root[data-theme="mist"] .widget .streamer-main > .card-actions .pin-button[aria-pressed="true"] svg {
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 2.45 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  filter: none !important;
}

/* r60: make the shared guide rail clearly visible beneath the moving active
   segment. The enlarged hit area remains fully transparent in every theme. */
html[data-theme] .feedback-dialog .feedback-types::after {
  content: "" !important;
  display: block !important;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: color-mix(in srgb, var(--theme-line) 78%, transparent) !important;
  pointer-events: none;
  z-index: 0;
}

html[data-theme] .feedback-dialog .feedback-type-button,
html[data-theme] .feedback-dialog .feedback-type-button:hover,
html[data-theme] .feedback-dialog .feedback-type-button:active,
html[data-theme] .feedback-dialog .feedback-type-button:focus,
html[data-theme] .feedback-dialog .feedback-type-button[aria-pressed="true"],
html[data-theme] .feedback-dialog .feedback-type-button.active {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

html[data-theme] .feedback-dialog .feedback-type-button[aria-pressed="true"]::after,
html[data-theme] .feedback-dialog .feedback-type-button.active::after {
  z-index: 1;
}

/* r61: rebalance the feedback hierarchy. The three choices stay prominent,
   while the section labels remain large enough to read as labels. */
html[data-theme] .feedback-dialog .feedback-types legend,
html[data-theme] .feedback-dialog .feedback-message-label {
  font-size: 12px !important;
  font-weight: 600;
  line-height: 1.35;
}

html[data-theme] .feedback-dialog .feedback-type-button {
  font-size: 14px !important;
  font-weight: 700;
  line-height: 1.2;
}

html[data-theme] .feedback-dialog .feedback-message-label textarea {
  font-size: 14px;
}

/* r63: extend the quiet guide beyond the third label while keeping the
   selected marker compact and centered inside its tab. */
html[data-theme] .feedback-dialog .feedback-types::after {
  right: auto;
  left: 0;
  width: min(340px, calc(100% + 40px));
  max-width: calc(100vw - 56px);
  background: color-mix(in srgb, var(--theme-line) 72%, transparent) !important;
}

html[data-theme] .feedback-dialog .feedback-type-button[aria-pressed="true"]::after,
html[data-theme] .feedback-dialog .feedback-type-button.active::after {
  right: auto;
  left: 50%;
  width: min(64px, calc(100% - 22px));
  transform: translateX(-50%);
}

@media (max-width: 440px) {
  html[data-theme] .feedback-dialog .feedback-types::after {
    right: 0;
    left: 0;
    width: 100%;
    max-width: none;
  }

  html[data-theme] .feedback-dialog .feedback-type-button[aria-pressed="true"]::after,
  html[data-theme] .feedback-dialog .feedback-type-button.active::after {
    width: min(56px, calc(100% - 18px));
  }
}

/* r64: settings tabs use the same transparent hit area and layered rail as
   feedback categories. The active marker is short, centered, and aligned to
   the shared guide instead of painting a rectangle around the tab. */
html[data-theme] .settings-dialog .settings-tabs {
  position: relative;
  border-bottom: 0 !important;
  background: transparent !important;
  background-image: none !important;
}

html[data-theme] .settings-dialog .settings-tabs::after {
  content: "" !important;
  position: absolute;
  right: 24px;
  bottom: 0;
  left: 0;
  height: 1px;
  background: color-mix(in srgb, var(--theme-line) 72%, transparent) !important;
  pointer-events: none;
}

html[data-theme] .settings-dialog .settings-tab,
html[data-theme] .settings-dialog .settings-tab:hover,
html[data-theme] .settings-dialog .settings-tab:active,
html[data-theme] .settings-dialog .settings-tab:focus,
html[data-theme] .settings-dialog .settings-tab.active,
html[data-theme] .settings-dialog .settings-tab[aria-selected="true"] {
  position: relative;
  min-height: 42px;
  padding-right: 18px;
  padding-left: 18px;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

html[data-theme] .settings-dialog .settings-tab:focus-visible {
  outline: 1px solid color-mix(in srgb, var(--theme-accent) 50%, transparent);
  outline-offset: -2px;
}

html[data-theme] .settings-dialog .settings-tab::after {
  content: none !important;
  display: none !important;
}

html[data-theme] .settings-dialog .settings-tab.active::after,
html[data-theme] .settings-dialog .settings-tab[aria-selected="true"]::after {
  content: "" !important;
  display: block !important;
  position: absolute;
  right: auto;
  bottom: -10px;
  left: 50%;
  width: min(78px, calc(100% - 16px));
  height: 3px;
  border-radius: 999px;
  background: var(--theme-accent-strong) !important;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 1;
}

@media (max-width: 760px) {
  html[data-theme] .settings-dialog .settings-tabs::after {
    right: 16px;
    left: 0;
  }
}

/* r50: keep ON states visible without hover. Use one yellow signal family for
   the bell and star, with darker golds on light surfaces for contrast. The
   favorite icon remains outline-only. */
html[data-theme="dark"] {
  --notify-on: #ffd34f;
  --favorite-on: #ffd34f;
}

html[data-theme="pearl"] {
  --notify-on: #c27600;
  --favorite-on: #c27600;
}

html[data-theme="amber"] {
  --notify-on: #ffd166;
  --favorite-on: #ffd166;
}

html[data-theme="light"] {
  --notify-on: #bd7000;
  --favorite-on: #bd7000;
}

html[data-theme="mist"] {
  --notify-on: #c07800;
  --favorite-on: #c07800;
}

html[data-theme] .widget .streamer-main > .card-actions .notify-button,
html[data-theme] .widget .streamer-main > .card-actions .pin-button {
  opacity: 1 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-theme] .widget .streamer-main > .card-actions .notify-button[aria-pressed="false"],
html[data-theme] .widget .streamer-main > .card-actions .pin-button[aria-pressed="false"] {
  color: color-mix(in srgb, var(--theme-muted) 86%, var(--theme-text)) !important;
}

html[data-theme] .widget .streamer-main > .card-actions .notify-button.is-enabled,
html[data-theme] .widget .streamer-main > .card-actions .notify-button[data-state="ON"],
html[data-theme] .widget .streamer-main > .card-actions .notify-button[aria-pressed="true"] {
  color: var(--notify-on) !important;
}

html[data-theme] .widget .streamer-main > .card-actions .pin-button[aria-pressed="true"] {
  color: var(--favorite-on) !important;
}

html[data-theme] .widget .streamer-main > .card-actions .notify-button[aria-pressed="false"] svg,
html[data-theme] .widget .streamer-main > .card-actions .pin-button[aria-pressed="false"] svg {
  color: inherit !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 2 !important;
  filter: none !important;
}

html[data-theme] .widget .streamer-main > .card-actions .notify-button.is-enabled svg,
html[data-theme] .widget .streamer-main > .card-actions .notify-button[data-state="ON"] svg,
html[data-theme] .widget .streamer-main > .card-actions .notify-button[aria-pressed="true"] svg {
  color: inherit !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 2.55 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  shape-rendering: geometricPrecision;
  opacity: 1 !important;
  filter: none !important;
}

html[data-theme] .widget .streamer-main > .card-actions .pin-button[aria-pressed="true"] svg {
  color: inherit !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 2.55 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  shape-rendering: geometricPrecision;
  opacity: 1 !important;
  filter: none !important;
}

/* r70: separate the announcement from the service disclaimer and keep the
   support links aligned as a readable vertical list. */
html[data-theme] .settings-dialog .developer-copy {
  min-width: 0;
  flex: 1 1 auto;
}

html[data-theme] .settings-dialog .developer-copy .legal-note {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--theme-line) 78%, transparent);
}

html[data-theme] .settings-dialog .developer-box .support-links > a {
  justify-content: flex-start;
  text-align: left;
}

/* r88: establish one settings type scale and align notice copy to the same
   upper-left origin as the other framed sections. The link column remains
   vertically centered so the developer box keeps its existing balance. */
html[data-theme] .settings-dialog .settings-panel {
  font-size: 14px;
  line-height: 1.45;
}

html[data-theme] .settings-dialog .settings-intro strong,
html[data-theme] .settings-dialog .sync-description > strong,
html[data-theme] .settings-dialog .sync-box strong,
html[data-theme] .settings-dialog .install-box strong,
html[data-theme] .settings-dialog .beta-box strong,
html[data-theme] .settings-dialog .developer-copy > strong {
  font-size: 15px;
  line-height: 1.3;
  font-weight: 700;
}

/* r113: tighten only the gap between the theme cards and the install card;
   the cards themselves and the install card height remain unchanged. */
html[data-theme] .settings-dialog .theme-picker {
  margin-bottom: 8px;
}

/* r114: keep the three lower App-panel frames on one spacing rhythm, while
   the theme grid-to-install gap stays intentionally tighter. */
html[data-theme] .settings-dialog .install-box {
  margin-top: 8px;
}

html[data-theme] .settings-dialog .uninstall-guide,
html[data-theme] .settings-dialog .developer-box {
  margin-top: 12px;
}

/* r110: align the three primary notification/sync headings to the notice
   heading scale. Their framed groups use the same breathing room so the
   larger legends do not sit against the border. */
html[data-theme] .settings-dialog .settings-intro > strong,
html[data-theme] .settings-dialog .notification-modes > legend,
html[data-theme] .settings-dialog .sync-primary-group > legend {
  font-size: 15px;
  line-height: 1.3;
  font-weight: 700;
}

html[data-theme] .settings-dialog .notification-modes,
html[data-theme] .settings-dialog .sync-primary-group {
  padding-bottom: 6px;
}

html[data-theme] .settings-dialog .notification-modes legend,
html[data-theme] .settings-dialog .notification-details summary,
html[data-theme] .settings-dialog .uninstall-guide summary {
  font-size: 13px;
  line-height: 1.35;
  font-weight: 700;
}

html[data-theme] .settings-dialog .notification-modes label strong,
html[data-theme] .settings-dialog .notification-details label strong,
html[data-theme] .settings-dialog .theme-option-copy strong {
  font-size: 14px;
  line-height: 1.32;
  font-weight: 700;
}

html[data-theme] .settings-dialog .notification-modes label small,
html[data-theme] .settings-dialog .notification-details label small,
html[data-theme] .settings-dialog .theme-option-copy small,
html[data-theme] .settings-dialog .sync-box small,
html[data-theme] .settings-dialog .install-box small,
html[data-theme] .settings-dialog .uninstall-guide p,
html[data-theme] .settings-dialog .uninstall-guide small,
html[data-theme] .settings-dialog .legal-note,
html[data-theme] .settings-dialog .account-delete-note {
  font-size: 12px;
  line-height: 1.4;
  font-weight: 400;
}

html[data-theme] .settings-dialog .developer-box {
  align-items: flex-start;
}

html[data-theme] .settings-dialog .developer-copy {
  align-self: flex-start;
}

html[data-theme] .settings-dialog .developer-box .support-links {
  align-self: center;
}

/* r116: bring the notification frames slightly closer to the explanatory
   copy while keeping the two sections evenly separated. */
html[data-theme] .settings-dialog .notification-modes,
html[data-theme] .settings-dialog .notification-details {
  margin-top: 12px;
}

/* r117: match the breathing room before the login-free explanation to the
   spacing used between the two explanatory sections below it. */
html[data-theme] .settings-dialog .sync-primary-group {
  margin-bottom: 18px;
}

/* r118: make only the notification details label one step smaller while
   leaving the other settings headings at their established scale. */
html[data-theme] .settings-dialog .notification-details summary {
  font-size: 14px !important;
  line-height: 1.35 !important;
}

/* Keep modal deletion errors visibly pale red in every theme. */
.dialog-floating-message {
  color: #f2b1b6;
}

/* r117-early: keep the gap above the login-free explanation equal to the
   gap between the two account explanations below it. */
html[data-theme] .settings-dialog .sync-primary-group {
  margin-bottom: 18px;
}

/* r118-early: make only the notification details label one step smaller. */
html[data-theme] .settings-dialog .notification-details summary {
  font-size: 14px !important;
  line-height: 1.35 !important;
}

/* r111: final typography pass for the App panel. Keep these declarations at
   the end of the stylesheet so the shared legacy scale cannot override them. */
html[data-theme] .settings-dialog .settings-intro > strong,
html[data-theme] .settings-dialog .notification-modes > legend,
html[data-theme] .settings-dialog .sync-primary-group > legend,
html[data-theme] .settings-dialog .install-box > div > strong,
html[data-theme] .settings-dialog .uninstall-guide > summary,
html[data-theme] .settings-dialog .developer-copy > strong {
  font-size: 15px;
  line-height: 1.3;
  font-weight: 700;
}

html[data-theme] .settings-dialog .notification-modes,
html[data-theme] .settings-dialog .sync-primary-group {
  padding-bottom: 6px;
}

/* r107: make the account-sync group use the same legend-led fieldset frame as
   the notification-methods group. The legend owns the top-line gap while the
   copy and action card share the same inner inset. */
html[data-theme] .settings-dialog .sync-primary-group {
  box-sizing: border-box;
  min-inline-size: 0;
  margin: 0;
  padding: 0 0 4px;
  border: 1px solid var(--theme-line) !important;
  border-radius: 12px !important;
  background: var(--theme-surface-soft) !important;
  box-shadow: none;
}

html[data-theme] .settings-dialog .sync-primary-group > legend {
  margin: 0;
  padding: 10px 12px 6px;
  color: var(--theme-text);
  font-size: 15px;
  line-height: 1.3;
  font-weight: 700;
}

html[data-theme] .settings-dialog .sync-primary-group > .sync-description {
  margin: 0;
  padding: 0 8px;
}

html[data-theme] .settings-dialog .sync-primary-group > .sync-description,
html[data-theme] .settings-dialog .sync-primary-group > .sync-box {
  margin-left: 6px;
  margin-right: 6px;
}

html[data-theme] .settings-dialog .sync-primary-group > .sync-description p {
  margin: 5px 0 0;
}

/* Keep the two sync actions at the same readable auxiliary-text size. */
html[data-theme] .settings-dialog .sync-box .sync-actions > button {
  font-size: 12px;
  line-height: 1.35;
  font-weight: 400;
}

/* r108: make the settings tab labels a touch stronger than body copy while
   keeping them lighter than the settings heading and section legends. */
html[data-theme] .settings-dialog .settings-tab,
html[data-theme] .settings-dialog .settings-tab:hover,
html[data-theme] .settings-dialog .settings-tab:active,
html[data-theme] .settings-dialog .settings-tab:focus,
html[data-theme] .settings-dialog .settings-tab.active,
html[data-theme] .settings-dialog .settings-tab[aria-selected="true"] {
  font-size: 15px;
  line-height: 1.3;
  font-weight: 600;
}

/* r109: use one heading scale for the app-install card, uninstall guide, and
   notice heading so the App panel reads as one consistent information set. */
html[data-theme] .settings-dialog .install-box > div > strong,
html[data-theme] .settings-dialog .uninstall-guide > summary,
html[data-theme] .settings-dialog .developer-copy > strong {
  font-size: 15px;
  line-height: 1.3;
  font-weight: 700;
}

/* Ensure the modal error remains a clearly readable pale red even before a
   theme attribute is applied (or when a theme supplies a muted text color). */
.dialog-floating-message {
  color: #f2b1b6;
}

/* r76: lift the divider slightly inside the notice copy. */
html[data-theme] .settings-dialog .developer-copy .legal-note {
  margin-top: 6px;
  padding-top: 8px;
}

/* r77: keep the details summary on one fixed rail in both states. A fixed
   summary height prevents the open-state divider/body from nudging the row;
   the marker uses one rotated glyph so its box does not change between › and
   the open state. */
html[data-theme] .settings-dialog .notification-details summary {
  box-sizing: border-box;
  height: 42px;
  min-height: 42px;
  align-items: center;
  line-height: 1.35;
}

html[data-theme] .settings-dialog .notification-details summary > span {
  display: inline-block;
  transform: translateY(1px);
}

html[data-theme] .settings-dialog .notification-details summary::before,
html[data-theme] .settings-dialog .notification-details[open] summary::before {
  content: "›";
  display: inline-grid;
  place-items: center;
  width: 14px;
  height: 18px;
  line-height: 1;
  transform: none;
}

html[data-theme] .settings-dialog .notification-details[open] summary::before {
  transform: rotate(90deg);
}

/* r74: match the account explanation to the spacing rhythm used by the
   neighbouring sync descriptions. The follow-up paragraph is explanatory,
   not a new section, so it should not carry the larger account-note gap. */
html[data-theme] .settings-dialog .sync-description + .sync-description {
  margin-top: 18px;
}

html[data-theme] .settings-dialog .sync-description p + p,
html[data-theme] .settings-dialog .sync-description .account-delete-note {
  margin-top: 6px;
}

/* r71: the account-deletion note is separated by spacing, not another rule,
   so the section reads as one continuous explanation. */
html[data-theme] .settings-dialog .account-delete-note {
  margin-top: 16px;
  padding-top: 0;
  border-top: 0;
}

/* r72: keep Japanese glyphs on the same UI font stack as the main app. Use
   whole-pixel sizes and standard weights so the browser does not synthesize
   fractional glyphs that look rough on light themes. */
html[data-theme] .settings-dialog {
  font-family: Inter, "Yu Gothic UI", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-synthesis: none;
}

html[data-theme] .settings-dialog .settings-panel {
  font-size: 14px;
}

html[data-theme] .settings-dialog .settings-intro,
html[data-theme] .settings-dialog .settings-intro p,
html[data-theme] .settings-dialog .settings-footnote,
html[data-theme] .settings-dialog .sync-description p,
html[data-theme] .settings-dialog .developer-box p {
  font-size: 14px;
}

html[data-theme] .settings-dialog .settings-intro strong,
html[data-theme] .settings-dialog .sync-description > strong,
html[data-theme] .settings-dialog .sync-box strong,
html[data-theme] .settings-dialog .install-box strong,
html[data-theme] .settings-dialog .beta-box strong,
html[data-theme] .settings-dialog .developer-box > div:first-child > strong {
  font-size: 15px;
  font-weight: 700;
}

html[data-theme] .settings-dialog .notification-modes label strong,
html[data-theme] .settings-dialog .notification-details label strong,
html[data-theme] .settings-dialog .theme-option-copy strong {
  font-size: 14px;
  font-weight: 700;
}

html[data-theme] .settings-dialog .notification-modes label small,
html[data-theme] .settings-dialog .notification-details label small,
html[data-theme] .settings-dialog .theme-option-copy small,
html[data-theme] .settings-dialog .sync-box small,
html[data-theme] .settings-dialog .install-box small {
  font-size: 12px;
  font-weight: 400;
}

html[data-theme] .settings-dialog .notification-details summary,
html[data-theme] .settings-dialog .uninstall-guide summary {
  font-size: 13px;
  font-weight: 700;
}

html[data-theme] .settings-dialog .uninstall-guide p,
html[data-theme] .settings-dialog .uninstall-guide small,
html[data-theme] .settings-dialog .legal-note,
html[data-theme] .settings-dialog .account-delete-note {
  font-size: 12px;
  font-weight: 400;
}

html[data-theme] .settings-dialog .settings-footnote,
html[data-theme] .settings-dialog .legal-note {
  opacity: 1;
  color: var(--theme-muted);
}

/* r69: give settings copy one deliberate type scale. Section headings and
   controls stay clear, while explanatory copy and legal notes recede without
   leaving oversized gaps between lines. */
html[data-theme] .settings-dialog .settings-panel {
  font-size: .86rem;
  line-height: 1.48;
}

html[data-theme] .settings-dialog .settings-intro,
html[data-theme] .settings-dialog .settings-intro p,
html[data-theme] .settings-dialog .settings-footnote,
html[data-theme] .settings-dialog .sync-description p,
html[data-theme] .settings-dialog .developer-box p {
  font-size: .84rem;
  line-height: 1.45;
}

html[data-theme] .settings-dialog .settings-intro p,
html[data-theme] .settings-dialog .sync-description p,
html[data-theme] .settings-dialog .developer-box p {
  margin-top: 6px;
}

html[data-theme] .settings-dialog .settings-intro strong,
html[data-theme] .settings-dialog .sync-description > strong,
html[data-theme] .settings-dialog .sync-box strong,
html[data-theme] .settings-dialog .install-box strong,
html[data-theme] .settings-dialog .beta-box strong,
html[data-theme] .settings-dialog .developer-box > div:first-child > strong {
  font-size: .94rem;
  line-height: 1.3;
}

html[data-theme] .settings-dialog .notification-modes legend,
html[data-theme] .settings-dialog .theme-picker legend {
  font-size: .8rem;
  line-height: 1.3;
}

html[data-theme] .settings-dialog .notification-modes label strong,
html[data-theme] .settings-dialog .notification-details label strong,
html[data-theme] .settings-dialog .theme-option-copy strong {
  font-size: .88rem;
  line-height: 1.32;
}

html[data-theme] .settings-dialog .notification-modes label small,
html[data-theme] .settings-dialog .notification-details label small,
html[data-theme] .settings-dialog .theme-option-copy small,
html[data-theme] .settings-dialog .sync-box small,
html[data-theme] .settings-dialog .install-box small {
  font-size: .76rem;
  line-height: 1.42;
}

html[data-theme] .settings-dialog .notification-details summary,
html[data-theme] .settings-dialog .uninstall-guide summary {
  font-size: .84rem;
  line-height: 1.35;
}

html[data-theme] .settings-dialog .uninstall-guide p,
html[data-theme] .settings-dialog .uninstall-guide small,
html[data-theme] .settings-dialog .legal-note,
html[data-theme] .settings-dialog .account-delete-note {
  font-size: .74rem;
  line-height: 1.42;
}

html[data-theme] .settings-dialog .settings-footnote {
  margin-top: 8px;
  opacity: .84;
}

html[data-theme] .settings-dialog .legal-note {
  opacity: .78;
}

/* r73: final settings typography rhythm. Keep one readable body size,
   reserve emphasis for headings, and explicitly reset paragraph margins so
   browser defaults cannot create uneven gaps between explanatory notes. */
html[data-theme] .settings-dialog {
  font-family: Inter, "Yu Gothic UI", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-synthesis: none;
}

html[data-theme] .settings-dialog .settings-panel {
  font-size: 14px;
  line-height: 1.45;
}

html[data-theme] .settings-dialog .settings-panel p {
  margin: 0;
  line-height: 1.45;
}

html[data-theme] .settings-dialog .settings-intro,
html[data-theme] .settings-dialog .sync-description p,
html[data-theme] .settings-dialog .developer-box p {
  font-size: 14px;
  line-height: 1.45;
}

html[data-theme] .settings-dialog .settings-intro strong,
html[data-theme] .settings-dialog .sync-description > strong,
html[data-theme] .settings-dialog .sync-box strong,
html[data-theme] .settings-dialog .install-box strong,
html[data-theme] .settings-dialog .beta-box strong,
html[data-theme] .settings-dialog .developer-copy > strong {
  font-size: 15px;
  line-height: 1.3;
  font-weight: 700;
}

html[data-theme] .settings-dialog .settings-intro p,
html[data-theme] .settings-dialog .sync-description p,
html[data-theme] .settings-dialog .developer-box p {
  margin-top: 5px;
}

html[data-theme] .settings-dialog .settings-footnote {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.4;
  opacity: 1;
  color: var(--theme-muted);
}

html[data-theme] .settings-dialog .settings-footnote + .settings-footnote {
  margin-top: 4px;
}

html[data-theme] .settings-dialog .notification-modes legend,
html[data-theme] .settings-dialog .theme-picker legend {
  font-size: 13px;
  line-height: 1.3;
  font-weight: 700;
}

html[data-theme] .settings-dialog .notification-modes label strong,
html[data-theme] .settings-dialog .notification-details label strong,
html[data-theme] .settings-dialog .theme-option-copy strong {
  font-size: 14px;
  line-height: 1.32;
  font-weight: 700;
}

html[data-theme] .settings-dialog .notification-modes label small,
html[data-theme] .settings-dialog .notification-details label small,
html[data-theme] .settings-dialog .theme-option-copy small,
html[data-theme] .settings-dialog .sync-box small,
html[data-theme] .settings-dialog .install-box small {
  font-size: 12px;
  line-height: 1.4;
  font-weight: 400;
}

html[data-theme] .settings-dialog .notification-details summary,
html[data-theme] .settings-dialog .uninstall-guide summary {
  font-size: 13px;
  line-height: 1.35;
  font-weight: 700;
}

html[data-theme] .settings-dialog .uninstall-guide p,
html[data-theme] .settings-dialog .uninstall-guide small,
html[data-theme] .settings-dialog .legal-note,
html[data-theme] .settings-dialog .account-delete-note {
  font-size: 12px;
  line-height: 1.4;
  font-weight: 400;
}

html[data-theme] .settings-dialog .developer-copy .legal-note {
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--theme-line) 78%, transparent);
  opacity: 1;
  color: var(--theme-muted);
}

html[data-theme] .settings-dialog .settings-panel .account-delete-note {
  margin-top: 12px;
  padding-top: 0;
  border-top: 0;
}

html[data-theme] .settings-dialog .developer-box .support-links > a {
  justify-content: flex-start;
  text-align: left;
}

/* r78: keep the退会 explanation on the same compact paragraph rhythm as the
   surrounding sync copy. This overrides the older account-note spacing that
   made the second line sit noticeably too far below the first. */
html[data-theme] .settings-dialog .sync-description > p.account-delete-note {
  margin: 6px 0 0;
  padding: 0;
  border: 0;
  line-height: 1.4;
}

/* r79: raise only the notice divider while leaving the box dimensions and
   support-link column unchanged. */
html[data-theme] .settings-dialog .developer-copy .legal-note {
  margin-top: 2px;
  padding-top: 8px;
}

/* r80: use one compact rhythm for the three notification paragraphs after
   combining the two auxiliary notes into a single line of explanation. */
html[data-theme] .settings-dialog .settings-intro > p {
  margin-top: 4px;
  line-height: 1.4;
}

html[data-theme] .settings-dialog .settings-intro > p + p {
  margin-top: 4px;
}

/* r81: use one alignment for all three support links so short and long
   labels share the same visual center inside their equal-width buttons. */
html[data-theme] .settings-dialog .developer-box .support-links > a {
  justify-content: center;
  text-align: center;
}

/* r82: preserve the notification panel's scroll range when details are
   closed. The reserved bottom room matches the expanded detail row, so
   closing it at the bottom does not clamp scrollTop and cause a visible jump. */
html[data-theme] .settings-dialog .settings-panel[data-settings-panel="notifications"]:has(.notification-details:not([open])) {
  padding-bottom: 116px;
}

/* r83: tighten the two-line uninstall guidance without changing its panel
   width or typography scale. */
html[data-theme] .settings-dialog .uninstall-guide p {
  margin: 0 0 4px;
  line-height: 1.4;
}

html[data-theme] .settings-dialog .uninstall-guide small {
  margin: 0 0 8px;
  line-height: 1.4;
}

/* r84: give the sync dialog the same themed frame/backdrop as the settings
   dialog, then make its email and verification fields readable at a glance. */
html[data-theme] .sync-dialog {
  color: var(--theme-text);
  background: var(--theme-dialog);
  border-color: var(--theme-line);
  box-shadow: 0 30px 100px color-mix(in srgb, var(--theme-text) 24%, transparent);
}

html[data-theme] .sync-dialog::backdrop {
  background: color-mix(in srgb, var(--theme-page) 74%, transparent);
  backdrop-filter: blur(5px);
}

html[data-theme] .sync-dialog .sync-lead {
  margin: 0 0 18px;
  font-size: 15px;
  line-height: 1.55;
}

html[data-theme] .sync-dialog > form > label,
html[data-theme] .sync-dialog #syncCodePanel > label {
  font-size: 14px;
  line-height: 1.4;
}

html[data-theme] .sync-dialog #syncCodePanel > .form-note {
  font-size: 12px;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: 0;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html[data-theme] .sync-dialog #syncEmail,
html[data-theme] .sync-dialog #syncCode {
  box-sizing: border-box;
  display: block;
  width: 100%;
  min-height: 44px;
  margin-top: 7px;
  padding: 8px 12px;
  font-size: 16px;
  line-height: 1.4;
}

html[data-theme] .sync-dialog .sync-privacy {
  margin: 16px 0 0;
  font-size: 13px;
  line-height: 1.5;
}

/* r86: keep deletion errors outside the settings layout and use the theme's
   danger color instead of inheriting muted navy text from dialog paragraphs. */
html[data-theme] .toast.is-error {
  color: var(--theme-danger);
  border-color: color-mix(in srgb, var(--theme-danger) 62%, var(--theme-line));
  background: color-mix(in srgb, var(--theme-danger) 18%, var(--theme-dialog));
}

/* Keep destructive-action errors in the modal's top layer without changing
   the dialog's layout or placing the message behind its blurred backdrop. */
html[data-theme] .dialog-floating-message {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 18px;
  z-index: 30;
  box-sizing: border-box;
  margin: 0;
  padding: 11px 14px;
  border: 1px solid color-mix(in srgb, var(--theme-danger) 62%, var(--theme-line));
  border-radius: 10px;
  color: var(--theme-danger);
  background: color-mix(in srgb, var(--theme-danger) 18%, var(--theme-dialog));
  box-shadow: 0 10px 28px rgba(0, 0, 0, .34);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  pointer-events: none;
}

/* Successful account actions use each theme's accent palette. This keeps the
   settings-bottom notification distinct from destructive and error messages. */
html[data-theme] .dialog-floating-message.is-success,
html[data-theme] .toast.is-success {
  color: var(--theme-accent-strong) !important;
  border-color: color-mix(in srgb, var(--theme-accent) 62%, var(--theme-line)) !important;
  background: color-mix(in srgb, var(--theme-accent) 16%, var(--theme-dialog)) !important;
}

/* r87: align support-link labels to a shared left edge inside their buttons. */
html[data-theme] .settings-dialog .developer-box .support-links > a {
  justify-content: flex-start;
  text-align: left;
}

/* r85: lower only the summary labels slightly so they sit closer to the
   lower divider while the fixed summary rail and marker stay unchanged. */
html[data-theme] .settings-dialog .notification-details summary > span {
  transform: translateY(3px);
}

html[data-theme] .settings-dialog .notification-details summary::after {
  transform: translateY(2px);
}

/* r89: final settings type and notice alignment pass. */
/* r97: keep disclosure labels and markers on one vertical rail in both
   states, with a slight downward nudge toward the row divider. */
/* r102: reserve the summary divider in both states so opening details cannot
   add a pixel and make the row or scroll position jump. */
/* r103: render the main-screen policy links and update time with a stable
   whole-pixel type scale so small glyphs do not look jagged. */
/* r105: meet YouTube's minimum 20px digital-media height without changing
   the supplied logo artwork or its aspect ratio. */
html[data-theme] .streamer-main .platform-link.has-brand-icon {
  grid-template-columns: 24px minmax(0, 1fr);
}

html[data-theme] .streamer-main .brand-icon-yt {
  width: auto;
  height: 20px;
  min-height: 20px;
  object-fit: contain;
}

html[data-theme] .titlebar-meta {
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

html[data-theme] .public-legal-links a,
html[data-theme] .widget #updatedAt {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

html[data-theme] .settings-dialog .notification-details summary {
  box-sizing: border-box;
  border-bottom: 1px solid transparent;
}

html[data-theme] .settings-dialog .notification-details[open] summary {
  border-bottom-color: color-mix(in srgb, var(--theme-line) 72%, transparent);
}

html[data-theme] .settings-dialog .notification-details summary::before {
  transform-origin: 50% 50%;
}

html[data-theme] .settings-dialog .notification-details[open] summary::before {
  transform: rotate(90deg);
}

/* r98: keep the grouped frame on the notification methods section only;
   the sync explanation stays on the dialog surface with its inner action
   card retaining its own border. */
html[data-theme] .settings-dialog .sync-primary-group {
  padding: 0 0 8px;
  margin-bottom: 6px;
  border: 1px solid var(--theme-line) !important;
  border-radius: 12px !important;
  background: var(--theme-surface-soft) !important;
  overflow: hidden;
}

html[data-theme] .settings-dialog .notification-modes {
  border: 1px solid var(--theme-line) !important;
  border-radius: 12px !important;
  background: var(--theme-surface-soft) !important;
}

/* r115: lift the sync group toward the tabs while reserving a clear inner
   bottom inset, so the white mail-sync card remains fully inside its frame. */
html[data-theme] .settings-dialog .settings-panel[data-settings-panel="sync"] {
  padding-top: 12px;
}

/* Keep both grouped settings sections on the exact same frame treatment. */
html[data-theme] .settings-dialog .notification-modes,
html[data-theme] .settings-dialog .sync-primary-group {
  box-sizing: border-box;
  border: 1px solid var(--theme-line) !important;
  border-radius: 12px !important;
  background: var(--theme-surface-soft) !important;
  box-shadow: none;
}

html[data-theme] .settings-dialog .notification-details summary {
  padding: 2px 2px 0;
}

html[data-theme] .settings-dialog .notification-details summary > span {
  position: relative;
  top: 2px;
  transform: none;
}

html[data-theme] .settings-dialog .notification-details summary::before {
  position: relative;
  top: -3px;
  left: -2px;
  transform: none;
}

html[data-theme] .settings-dialog .notification-details[open] summary::before {
  transform: rotate(90deg);
}

html[data-theme] .settings-dialog .notification-details summary::after {
  position: relative;
  top: 2px;
  transform: none;
}

html[data-theme] .settings-dialog .uninstall-guide summary::before {
  position: relative;
  top: -3px;
  left: -2px;
}

html[data-theme] .settings-dialog .uninstall-guide[open] summary::before {
  transform: rotate(90deg);
}

/* r96: use the same custom disclosure marker on the uninstall guide as on
   the notification details row. */
html[data-theme] .settings-dialog .uninstall-guide summary {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}

html[data-theme] .settings-dialog .uninstall-guide summary::-webkit-details-marker {
  display: none;
}

html[data-theme] .settings-dialog .uninstall-guide summary::marker {
  content: "";
}

html[data-theme] .settings-dialog .uninstall-guide summary::before {
  content: "›";
  display: inline-grid;
  place-items: center;
  width: 14px;
  height: 18px;
  color: var(--settings-accent);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1;
}

html[data-theme] .settings-dialog .uninstall-guide[open] summary::before {
  transform: rotate(90deg);
}

/* Error copy uses a pale red with enough contrast against the modal surface. */
html[data-theme] .dialog-floating-message {
  color: #f2b1b6;
}

/* Pearl's deletion action should use the same softened red instead of the
   darker semantic danger token used for borders and surfaces. */
html[data-theme="pearl"] .settings-dialog #deleteAccountButton:not([hidden]) {
  color: #b85f6a;
  border-color: #d698a0;
  background: #f3dfe2;
}

html[data-theme="pearl"] {
  --settings-danger-text: #b85f6a;
}

html[data-theme="pearl"] .settings-dialog #deleteAccountButton:not([hidden]):hover {
  border-color: #c9828a;
  background: #efd2d6;
}

html[data-theme] .dialog-floating-message {
  color: var(--settings-danger-text);
}

html[data-theme] .settings-dialog .settings-panel {
  font-size: 14px;
  line-height: 1.45;
}

html[data-theme] .settings-dialog .settings-intro strong,
html[data-theme] .settings-dialog .sync-description > strong,
html[data-theme] .settings-dialog .sync-box strong,
html[data-theme] .settings-dialog .install-box strong,
html[data-theme] .settings-dialog .beta-box strong,
html[data-theme] .settings-dialog .developer-copy > strong {
  font-size: 15px;
  line-height: 1.3;
  font-weight: 700;
}

html[data-theme] .settings-dialog .notification-modes legend,
html[data-theme] .settings-dialog .notification-details summary,
html[data-theme] .settings-dialog .uninstall-guide summary {
  font-size: 15px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
}

html[data-theme] .settings-dialog .notification-modes label strong,
html[data-theme] .settings-dialog .notification-details label strong,
html[data-theme] .settings-dialog .theme-option-copy strong {
  font-size: 14px;
  line-height: 1.32;
  font-weight: 700;
}

html[data-theme] .settings-dialog .notification-modes label small,
html[data-theme] .settings-dialog .notification-details label small,
html[data-theme] .settings-dialog .theme-option-copy small,
html[data-theme] .settings-dialog .sync-box small,
html[data-theme] .settings-dialog .install-box small,
html[data-theme] .settings-dialog .uninstall-guide p,
html[data-theme] .settings-dialog .uninstall-guide small,
html[data-theme] .settings-dialog .legal-note,
html[data-theme] .settings-dialog .account-delete-note {
  font-size: 12px;
  line-height: 1.4;
  font-weight: 400;
}

html[data-theme] .settings-dialog .developer-box {
  align-items: flex-start;
}

html[data-theme] .settings-dialog .developer-copy {
  align-self: flex-start;
}

html[data-theme] .settings-dialog .developer-box .support-links {
  align-self: center;
}

/* Keep modal deletion errors visibly pale red in every theme. */
.dialog-floating-message {
  color: #f2b1b6;
}

/* r117-final: keep the gap above the login-free explanation equal to the
   gap between the two account explanations below it. */
html[data-theme] .settings-dialog .sync-primary-group {
  margin-bottom: 18px;
}

/* r118-final: make only the notification details label one step smaller. */
html[data-theme] .settings-dialog .notification-details summary {
  font-size: 14px !important;
  line-height: 1.35 !important;
}

/* r119: use the selected-row treatment chosen for the notification mockup:
   a very light tint plus the same accent rail used by live streamer cards. */
html[data-theme] .settings-dialog .notification-modes label:has(input:checked),
html[data-theme] .settings-dialog .theme-option:has(input:checked) {
  border-color: var(--theme-line);
  background: color-mix(in srgb, var(--theme-accent) 7%, var(--theme-surface-raised));
  box-shadow: inset 3px 0 var(--theme-accent);
}

/* r119-final: outrank the legacy notification reset so the chosen pale tint
   and live-card accent rail are actually visible. */
html[data-theme] .settings-dialog .notification-modes label:has(input:checked) {
  border: 0 !important;
  border-radius: 8px !important;
  background: color-mix(in srgb, var(--theme-accent) 7%, var(--theme-surface-raised)) !important;
  box-shadow: inset 3px 0 var(--theme-accent) !important;
}

html[data-theme] .settings-dialog .theme-option:has(input:checked) {
  border-color: var(--theme-line) !important;
  background: color-mix(in srgb, var(--theme-accent) 7%, var(--theme-surface-raised)) !important;
  box-shadow: inset 3px 0 var(--theme-accent) !important;
}

/* r120: integrate the selected notification state into one continuous list.
   Keep the accent rail, but remove the floating-card effect with a quiet
   surface, light separators, and softly rounded rail ends. */
html[data-theme] .settings-dialog .notification-modes {
  padding: 0 8px 10px !important;
  border: 1px solid var(--theme-line) !important;
  border-radius: 16px !important;
  background: transparent !important;
}

html[data-theme] .settings-dialog .notification-modes legend {
  padding: 0 8px 7px !important;
}

html[data-theme] .settings-dialog .notification-modes label {
  position: relative;
  margin: 0 !important;
  padding: 17px 12px 17px 16px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 30ms linear;
}

html[data-theme] .settings-dialog .notification-modes label.is-pressing {
  background: color-mix(in srgb, var(--theme-accent) 12%, transparent) !important;
}

html[data-theme] .settings-dialog .notification-modes label + label {
  border-top: 1px solid color-mix(in srgb, var(--theme-line) 72%, transparent) !important;
}

html[data-theme] .settings-dialog .notification-modes label:has(input:checked) {
  background: color-mix(in srgb, var(--theme-accent) 8%, transparent) !important;
  box-shadow: inset 3px 0 var(--theme-accent) !important;
}

html[data-theme] .settings-dialog .notification-modes input {
  align-self: center;
  width: 16px;
  height: 16px;
  margin: 0;
  cursor: pointer;
}

/* r126: paint notification checkboxes from theme tokens instead of relying
   on the browser's native unchecked color, which could appear brown in the
   night theme or white in the amber theme. */
html[data-theme] .settings-dialog .notification-modes input[type="checkbox"] {
  appearance: none !important;
  display: grid;
  place-content: center;
  box-sizing: border-box;
  color: var(--theme-dialog);
  border: 1.5px solid var(--theme-line-strong) !important;
  border-radius: 3px;
  background: color-mix(in srgb, var(--theme-input) 88%, var(--theme-dialog) 12%) !important;
  box-shadow: none !important;
}

html[data-theme] .settings-dialog .notification-modes input[type="checkbox"]::before {
  content: "";
  width: 7px;
  height: 4px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-1px) rotate(-45deg) scale(0);
  transform-origin: center;
  transition: transform 30ms linear;
}

html[data-theme] .settings-dialog .notification-modes input[type="checkbox"]:checked {
  color: var(--theme-dialog);
  border-color: var(--theme-accent) !important;
  background: var(--theme-accent) !important;
}

html[data-theme] .settings-dialog .notification-modes input[type="checkbox"]:checked::before {
  transform: translateY(-1px) rotate(-45deg) scale(1);
}

html[data-theme] .settings-dialog .notification-modes input[type="checkbox"]:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--theme-accent) 58%, transparent);
  outline-offset: 2px;
}

html[data-theme] .settings-dialog .notification-modes label:has(input:checked)::before {
  content: none;
}

html[data-theme] .settings-dialog .notification-modes label:has(input:checked) strong {
  font-weight: 750;
}

/* Keep theme cards on the same integrated state treatment without adding a
   second full-border highlight inside the card. */
html[data-theme] .settings-dialog .theme-option:has(input:checked) {
  background: color-mix(in srgb, var(--theme-accent) 4%, var(--theme-surface-raised)) !important;
  box-shadow: inset 3px 0 var(--theme-accent) !important;
}

/* r132: leave the same corner allowance beside the sync legend as the
   notification fieldset, so the left rail reaches and rounds into the top. */
html[data-theme] .settings-dialog .sync-primary-group {
  border-radius: 16px !important;
}

html[data-theme] .settings-dialog .sync-primary-group > legend {
  margin-left: 8px !important;
}

/* r133: keep ordinary operation notices outline-only in every theme. The
   page itself shows through the toast, matching the settings fieldset frame. */
html[data-theme] .toast:not(.is-error) {
  background: transparent !important;
  background-image: none !important;
  border-color: var(--theme-line-strong) !important;
  box-shadow: none !important;
}

/* r135: treat the three sync explanation paragraphs as one continuous text
   rhythm. Wrapped lines and paragraph boundaries now use the same interval. */
html[data-theme] .settings-dialog
  .sync-primary-group > .sync-description p {
  line-height: 1.45 !important;
}

html[data-theme] .settings-dialog
  .sync-primary-group > .sync-description p + p {
  margin-top: 0 !important;
}

/* r136: mirror the sync tab's section rhythm after moving the notification
   frame above its explanatory copy. */
html[data-theme] .settings-dialog .notification-modes + .settings-intro {
  margin-top: 18px !important;
}

html[data-theme] .settings-dialog .settings-intro > p {
  font-size: 14px !important;
  line-height: 1.45 !important;
  margin-top: 5px !important;
}

html[data-theme] .settings-dialog .settings-intro > p + p {
  margin-top: 0 !important;
}

/* r139: match the notification explanation's heading-to-copy gap to the
   login-free sync explanation's first row. */
html[data-theme] .settings-dialog .settings-intro > strong {
  margin-bottom: 0 !important;
}

/* r140: use the sync fieldset's legend inset for the notification frame so
   its top border runs through the same visual center of the heading. */
html[data-theme] .settings-dialog .notification-modes > legend {
  padding: 10px 12px 6px !important;
}

/* r138: use the login-free explanation's three-line rhythm as the baseline
   for the four-line account-deletion explanation. */
html[data-theme] .settings-dialog
  .settings-panel[data-settings-panel="sync"] > .sync-description:last-child > p {
  line-height: 1.45 !important;
}

html[data-theme] .settings-dialog
  .settings-panel[data-settings-panel="sync"] > .sync-description:last-child > p + p,
html[data-theme] .settings-dialog
  .settings-panel[data-settings-panel="sync"] > .sync-description:last-child > p + button {
  margin-top: 0 !important;
}

/* r141: give the destructive action a small breathing space after the final
   explanatory line while keeping the two text rows on the shared rhythm. */
html[data-theme] .settings-dialog
  .settings-panel[data-settings-panel="sync"] > .sync-description:last-child > p + button {
  margin-top: 4px !important;
}

/* r137: start both primary settings frames on the same horizontal guide.
   This prevents a visible jump when switching between notification and sync. */
html[data-theme] .settings-dialog
  .settings-panel[data-settings-panel="notifications"],
html[data-theme] .settings-dialog
  .settings-panel[data-settings-panel="sync"] {
  padding-top: 12px !important;
}

html[data-theme] .settings-dialog .notification-modes {
  margin-top: 0 !important;
}

/* r142: keep the first-use consent surface consistent with the settings
   frame. The modal uses an outline-only shell (no gradient or glow), while
   the consent row remains an explicit control surface. Give the legal
   sentence the same readable 14px rhythm as settings copy so it wraps cleanly
   instead of collapsing beside the checkbox. */
.policy-consent-dialog {
  background: transparent !important;
  background-image: none !important;
  border: 1px solid rgba(128, 151, 184, .64) !important;
  box-shadow: none !important;
}

.policy-consent-lead {
  color: var(--theme-text, #edf3fb) !important;
}

.policy-consent-points {
  color: var(--theme-muted, #bdc9d7) !important;
}

.policy-consent-check {
  box-sizing: border-box;
  align-items: start;
  gap: 12px;
  padding: 14px 16px;
  border-color: var(--theme-line, #445165) !important;
  background: var(--theme-input, #111821) !important;
  color: var(--theme-text, #dce6f2) !important;
  font-size: 14px;
  line-height: 1.55;
  font-weight: 400;
  overflow-wrap: anywhere;
}

.policy-consent-check input {
  margin-top: .28em;
}

.policy-consent-check a {
  color: var(--theme-accent-strong, #8fc7ff);
}

html[data-theme] .policy-consent-dialog {
  border-color: var(--theme-line-strong) !important;
}

html[data-theme] .policy-consent-check {
  font-size: 14px !important;
  line-height: 1.55 !important;
  font-weight: 400 !important;
}

/* r143: make the cloud-sync dialog follow the same outline-only frame as
   settings and consent. The email field is type=email, so the legacy input
   selector did not reach it and the browser's gray control background leaked
   through; explicitly bind both sync fields to the active theme tokens. */
.sync-dialog {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

.sync-dialog #syncEmail,
.sync-dialog #syncCode {
  box-sizing: border-box;
  color: var(--theme-text, #eef3f8) !important;
  background: var(--theme-input, #1d2a36) !important;
  background-image: none !important;
  border: 1px solid var(--theme-line, #4b6074) !important;
}

.sync-dialog #syncEmail::placeholder,
.sync-dialog #syncCode::placeholder {
  color: var(--theme-faint, #91a0af) !important;
  opacity: 1;
}

.sync-dialog #syncEmail:focus,
.sync-dialog #syncCode:focus {
  border-color: var(--theme-accent, #a9c2dc) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-accent, #a9c2dc) 18%, transparent) !important;
}

html[data-theme] .sync-dialog {
  border: 1px solid var(--theme-line-strong) !important;
}

/* r144: keep the sync-conflict chooser legible in every theme.  The chooser
   used to inherit dark, semi-transparent card colors and browser-default
   button paint, which made the light and mist themes especially low contrast.
   Use the same semantic theme tokens as the settings surface instead. */
html[data-theme] .sync-conflict-dialog {
  color: var(--theme-text);
  background: var(--theme-dialog) !important;
  background-image: none !important;
  border: 1px solid var(--theme-line-strong) !important;
  box-shadow: none !important;
}

html[data-theme] .sync-conflict-dialog::backdrop {
  background: color-mix(in srgb, var(--theme-page) 74%, transparent);
  backdrop-filter: blur(5px);
}

html[data-theme] .sync-conflict-dialog .sync-conflict-lead {
  color: var(--theme-text);
}

html[data-theme] .sync-conflict-dialog .sync-compare-card {
  appearance: none;
  -webkit-appearance: none;
  color: var(--theme-text);
  border-color: var(--theme-line);
  background: var(--theme-surface-soft);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}

html[data-theme] .sync-conflict-dialog .sync-compare-card.recommended {
  border-color: var(--theme-accent);
  background: color-mix(in srgb, var(--theme-selected) 72%, var(--theme-surface-soft));
}

html[data-theme] .sync-conflict-dialog .sync-compare-card:hover {
  border-color: var(--theme-accent);
  background: var(--theme-control);
}

html[data-theme] .sync-conflict-dialog .sync-compare-card:focus-visible {
  outline: 2px solid var(--theme-accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-accent) 18%, transparent);
}

html[data-theme] .sync-conflict-dialog .sync-source-label {
  color: var(--theme-accent-strong);
}

html[data-theme] .sync-conflict-dialog .sync-compare-card strong {
  color: var(--theme-text);
}

html[data-theme] .sync-conflict-dialog .sync-compare-card small,
html[data-theme] .sync-conflict-dialog .sync-compare-card em,
html[data-theme] .sync-conflict-dialog .sync-conflict-note {
  color: var(--theme-muted);
}

/* “今は同期しない” is a secondary action, not a browser-default button.
   A quiet theme-colored pill keeps it discoverable without competing with
   the two replacement choices above. */
html[data-theme] .sync-conflict-dialog .sync-choice-cancel {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  min-height: 36px;
  margin: 14px auto 0;
  padding: 7px 16px;
  border: 1px solid var(--theme-line);
  border-radius: 999px;
  color: var(--theme-muted);
  background: color-mix(in srgb, var(--theme-surface-soft) 54%, transparent);
  font: inherit;
  font-size: .84rem;
  line-height: 1.25;
  cursor: pointer;
  transition: color .16s ease, border-color .16s ease, background-color .16s ease;
}

html[data-theme] .sync-conflict-dialog .sync-choice-cancel:hover {
  color: var(--theme-text);
  border-color: var(--theme-accent);
  background: var(--theme-control);
}

html[data-theme] .sync-conflict-dialog .sync-choice-cancel:focus-visible {
  outline: 2px solid var(--theme-accent);
  outline-offset: 2px;
}

html[data-theme] .sync-conflict-dialog .sync-overwrite-confirm h3 {
  color: var(--theme-text);
}

html[data-theme] .sync-conflict-dialog .sync-overwrite-confirm p {
  color: var(--theme-muted);
}

html[data-theme] .sync-conflict-dialog .sync-overwrite-confirm .dialog-actions > button {
  min-width: 96px;
  min-height: 44px;
}

/* r145: the account-sync actions should share one intermediate label scale.
   Explicitly set the same font metrics on both buttons so “ログアウト” and
   “今すぐ同期” do not rasterize at noticeably different weights/sizes. */
html[data-theme] .settings-dialog .sync-box .sync-actions > button {
  box-sizing: border-box;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: 0;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html[data-theme] .sync-dialog .turnstile-widget {
  box-sizing: border-box;
  width: 100%;
  min-height: 65px;
  margin: 2px 0 0;
  overflow: hidden;
  border-radius: 10px;
}

html[data-theme] .sync-dialog .turnstile-widget[hidden] {
  display: none;
}

/* r146: keep cloud-sync onboarding concise and give the two inputs similar
   visual weight. Turnstile's flexible widget has a fixed 65px height, so the
   email field is enlarged without attempting to scale the protected iframe. */
html[data-theme] .sync-dialog .sync-lead {
  margin: 0 0 22px;
  color: var(--theme-muted);
  font-size: 14px;
  line-height: 1.65;
}

html[data-theme] .sync-dialog .sync-lead a {
  color: var(--theme-accent-strong);
  font-weight: 700;
}

html[data-theme] .sync-dialog > form > label {
  margin-bottom: 16px;
}

html[data-theme] .sync-dialog #syncEmail,
html[data-theme] .sync-dialog #syncCode {
  min-height: 56px;
  padding-inline: 14px;
  border-radius: 10px;
}

html[data-theme] .sync-dialog .turnstile-widget {
  margin-top: 0;
}

html[data-theme] .sync-dialog .dialog-actions {
  margin-top: 18px;
  gap: 8px;
}

html[data-theme] .sync-dialog .dialog-actions > .secondary-button,
html[data-theme] .sync-dialog .dialog-actions > .primary-button {
  box-sizing: border-box;
  min-height: 36px;
  padding-inline: 10px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 12px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: 0;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* r147: center every close glyph inside the same square hit area. Several
   dialogs inherited the generic icon padding while feedback supplied its own
   dimensions, which shifted the multiplication glyph relative to its hover
   background. The small bottom padding compensates for the font baseline
   without moving the button surface itself. */
html[data-theme] .dialog .dialog-heading .dialog-close {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  align-self: flex-start;
  flex: 0 0 42px;
  width: 42px;
  min-width: 42px;
  height: 42px;
  min-height: 42px;
  margin: 0;
  padding: 0 0 4px;
  border-radius: 10px;
  font-family: "Segoe UI Symbol", "Arial", sans-serif;
  font-size: 21px;
  font-weight: 400;
  line-height: 1;
  text-align: center;
  transform: none;
}

html[data-theme] #streamDetailClose {
  display: grid;
  place-items: center;
  box-sizing: border-box;
  padding: 0 0 2px;
  font-family: "Segoe UI Symbol", "Arial", sans-serif;
  text-align: center;
}

@media (max-width: 440px) {
  html[data-theme] .dialog .dialog-heading .dialog-close {
    flex-basis: 38px;
    width: 38px;
    min-width: 38px;
    height: 38px;
    min-height: 38px;
    padding-bottom: 3px;
  }
}

/* r148: use the existing logout control as the fixed size for both account
   sync actions. Equal inline and block dimensions prevent the primary label
   from making “今すぐ同期” appear larger than “ログアウト”. */
html[data-theme] .settings-dialog .sync-box .sync-actions > #syncSignOutButton,
html[data-theme] .settings-dialog .sync-box .sync-actions > #syncButton {
  box-sizing: border-box;
  flex: 0 0 98px;
  width: 98px;
  min-width: 98px;
  height: 44px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 9px;
}

/* r154: the legacy ID rule gave logout a different surface. Keep both
   account actions on the sync button's theme-owned color family. */
html[data-theme] .settings-dialog .sync-box .sync-actions > #syncSignOutButton,
html[data-theme] .settings-dialog .sync-box .sync-actions > #syncButton {
  color: var(--theme-text) !important;
  border-color: var(--theme-line-strong) !important;
  background: var(--theme-control) !important;
  box-shadow: none !important;
}

html[data-theme] .settings-dialog .sync-box .sync-actions > #syncSignOutButton:hover,
html[data-theme] .settings-dialog .sync-box .sync-actions > #syncButton:hover {
  color: var(--theme-text) !important;
  border-color: var(--theme-accent) !important;
  background: var(--theme-control-hover) !important;
}

/* r149: the completed account-deletion notice is destructive feedback, not
   muted body copy. Use a clean pale red on dark themes and a stronger related
   red on light themes so the text remains readable against the dialog. */
html[data-theme="dark"] .dialog-floating-message.is-destructive,
html[data-theme="dark"] .toast.is-destructive {
  color: #ffadb7 !important;
}

html[data-theme="amber"] .dialog-floating-message.is-destructive,
html[data-theme="amber"] .toast.is-destructive {
  color: #ffaea3 !important;
}

html[data-theme="pearl"] .dialog-floating-message.is-destructive,
html[data-theme="pearl"] .toast.is-destructive {
  color: #b84f5d !important;
}

html[data-theme="light"] .dialog-floating-message.is-destructive,
html[data-theme="light"] .toast.is-destructive {
  color: #b13f4d !important;
}

html[data-theme="mist"] .dialog-floating-message.is-destructive,
html[data-theme="mist"] .toast.is-destructive {
  color: #b24753 !important;
}

/* Smartphone settings are simplified by device capability rather than width,
   so landscape phones stay simplified and narrow desktop windows do not. */
html[data-theme] .settings-tabs .settings-tab-label-mobile {
  display: none;
}

html.mobile-settings-simplified[data-theme] [data-mobile-hidden="true"] {
  display: none !important;
}

html.mobile-settings-simplified[data-theme] .settings-tabs {
  display: flex;
  overflow-x: hidden;
}

html.mobile-settings-simplified[data-theme] .settings-tabs .settings-tab,
html.mobile-settings-simplified[data-theme] .settings-dialog .settings-tab {
  flex: 1 1 0;
  min-width: 0;
  padding-inline: 8px;
}

html.mobile-settings-simplified[data-theme] .settings-tabs .settings-tab-label-wide {
  display: none;
}

html.mobile-settings-simplified[data-theme] .settings-tabs .settings-tab-label-mobile {
  display: inline;
}

html.mobile-settings-simplified[data-theme] .settings-dialog .developer-box .support-links > a {
  justify-content: center;
  text-align: center;
}

html.mobile-settings-simplified[data-theme] .settings-dialog .sync-actions {
  justify-content: flex-end;
}

html.mobile-settings-simplified[data-theme] .widget .streamer-main > .card-actions,
html.mobile-settings-simplified[data-theme] .widget .streamer-list.is-dense .streamer-main > .card-actions {
  width: 24px !important;
  max-width: 24px !important;
  gap: 0 !important;
}

@media (max-width: 760px) {
  html[data-theme] .settings-tabs {
    display: flex;
    overflow-x: hidden;
  }

  html[data-theme] .settings-tabs .settings-tab {
    flex: 1 1 0;
    min-width: 0;
    padding-inline: 8px;
  }

}

/* r150: smartphone-specific polish. Keep small screens compact without
   changing the desktop layout, and use each theme's own accent for selected
   tabs and transient messages. */
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  html[data-theme] .widget .streamer-main .edit-sites-button,
  html[data-theme] .widget .streamer-main .edit-sites-button:hover,
  html[data-theme] .widget .streamer-main .edit-sites-button:active,
  html[data-theme] .widget .streamer-main .edit-sites-button:focus-visible {
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
  }

  html[data-theme] .settings-dialog {
    height: min(620px, calc(100dvh - 32px)) !important;
    max-height: calc(100dvh - 32px) !important;
  }

  html[data-theme] .settings-dialog .settings-tab.active::after,
  html[data-theme] .settings-dialog .settings-tab[aria-selected="true"]::after,
  html[data-theme] .feedback-dialog .feedback-type-button[aria-pressed="true"]::after,
  html[data-theme] .feedback-dialog .feedback-type-button.active::after {
    box-sizing: border-box;
    height: 4px;
    border: 0;
    border-bottom: 4px solid currentColor;
    background: transparent !important;
    box-shadow: 0 2px 5px color-mix(in srgb, currentColor 38%, transparent);
  }

  html[data-theme] .settings-dialog .settings-tab.active::after,
  html[data-theme] .settings-dialog .settings-tab[aria-selected="true"]::after {
    bottom: -10px;
  }

  html[data-theme] .feedback-dialog .feedback-type-button[aria-pressed="true"]::after,
  html[data-theme] .feedback-dialog .feedback-type-button.active::after {
    bottom: 0;
  }

  html[data-theme] .site-dialog > form {
    padding: 18px 16px;
  }

  html[data-theme] .site-dialog .platform-fields label {
    margin-bottom: 12px;
  }

  html[data-theme] .site-dialog .dialog-actions {
    flex-wrap: wrap;
    align-items: center;
    margin-top: 16px;
  }

  html[data-theme] .dialog-floating-message {
    right: 16px;
    bottom: max(16px, env(safe-area-inset-bottom));
    left: 16px;
  }

  html[data-theme] .toast {
    bottom: max(20px, env(safe-area-inset-bottom));
  }
}

/* r153: match the TITLE surface to the settings dialog's outline-only shell.
   The previous large shadow looked like a gradient below the popover. */
html[data-theme] .stream-detail-popover {
  background: var(--theme-dialog) !important;
  border: 1px solid var(--theme-line-strong) !important;
  box-shadow: none !important;
}

/* r151: feedback actions belong to one button family. The primary surface
   still shows the submission action, but its label should not look heavier
   than the adjacent cancel action. */
html[data-theme] .feedback-dialog .dialog-actions > .secondary-button,
html[data-theme] .feedback-dialog .dialog-actions > .primary-button {
  font-weight: 400;
}

/* r155: the first-use explanation is real page content for people and search
   engines, while remaining an empty-state surface rather than a second card. */
html[data-theme] .widget .empty-state-onboarding {
  box-sizing: border-box;
  display: flex;
  min-height: 100%;
  padding: clamp(32px, 6vh, 72px) clamp(20px, 5vw, 72px);
  align-items: center;
  flex-direction: column;
  justify-content: center;
  color: var(--theme-muted);
}

html[data-theme] .widget .empty-state-onboarding h1 {
  max-width: 920px;
  margin: 0 0 22px;
  color: var(--theme-text);
  font-size: clamp(1.25rem, 2.1vw, 1.85rem);
  line-height: 1.5;
  letter-spacing: .01em;
}

html[data-theme] .widget .empty-state-onboarding p {
  max-width: 820px;
  margin: 0;
  font-size: clamp(.88rem, 1.25vw, 1.05rem);
  line-height: 1.9;
}

html[data-theme] .widget .empty-state-onboarding p strong {
  display: inline;
  margin: 0;
  color: var(--theme-text);
  font-size: inherit;
}

html[data-theme] .widget .empty-state-onboarding .empty-state-action {
  margin-top: 20px;
}

html[data-theme] .widget .empty-state-onboarding .empty-state-beta {
  margin-top: 28px;
  color: var(--theme-faint);
  font-size: clamp(.8rem, 1.1vw, .92rem);
}

@media (max-width: 440px) {
  html[data-theme] .widget .empty-state-onboarding {
    min-height: 100%;
    padding: 30px 16px;
  }

  html[data-theme] .widget .empty-state-onboarding h1 {
    margin-bottom: 16px;
    font-size: 1.05rem;
    line-height: 1.55;
  }

  html[data-theme] .widget .empty-state-onboarding p {
    font-size: .9rem;
    line-height: 1.8;
  }

  html[data-theme] .widget .empty-state-onboarding .empty-state-action {
    margin-top: 16px;
  }

  html[data-theme] .widget .empty-state-onboarding .empty-state-beta {
    margin-top: 22px;
    font-size: .82rem;
  }

  html[data-theme] .site-dialog .dialog-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  html[data-theme] .site-dialog .streamer-delete-button {
    grid-column: 1 / -1;
    justify-self: start;
  }

  html[data-theme] .site-dialog .dialog-actions > .secondary-button,
  html[data-theme] .site-dialog .dialog-actions > .primary-button {
    width: 100%;
  }
}

/* r152: keep all four service slots and the edit control on one row even when
   a desktop grid produces a narrow card. The slots respond to the card width
   itself instead of relying on a smartphone viewport breakpoint. */
html[data-theme] .widget .streamer-main > .platform-row {
  flex-wrap: nowrap;
  gap: 4px;
  overflow: visible;
}

html[data-theme] .widget .streamer-main .platform-link.has-brand-icon,
html[data-theme] .widget .streamer-main .platform-link.has-brand-icon.online {
  flex: 1 1 46px;
  width: auto;
  min-width: 0;
  max-width: 46px;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  padding-inline: 3px;
}

html[data-theme] .widget .streamer-main .platform-link.has-brand-icon .platform-brand-icon {
  max-width: 100%;
  place-self: center;
}

html[data-theme] .widget .streamer-main .edit-sites-button {
  flex: 0 0 25px;
  width: 25px;
  min-width: 25px;
}

/* First-use content only: retain the existing shell, controls and theme tokens. */
html[data-theme] .widget .empty-state-onboarding {
  height: auto;
  min-height: 100%;
  padding: 24px;
  justify-content: flex-start;
  border: 0;
  background: transparent;
}
.onboarding-content {
  width: min(100%, 840px);
  /* Center the closed-state block; disclosure text does not recenter it. */
  margin: auto;
  flex: 0 0 auto;
  text-align: left;
}
.onboarding-heading { margin-bottom: 24px; }
html[data-theme] .widget .onboarding-content h1 {
  margin: 0;
  font-size: clamp(1.25rem, 2vw, 1.7rem);
  line-height: 1.5;
}
html[data-theme] .widget .onboarding-content p {
  margin: 12px 0 0;
  color: var(--theme-muted);
  font-size: .875rem;
  line-height: 1.8;
}
.onboarding-flow {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--theme-line);
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
  background: var(--theme-surface);
}
.onboarding-step { position: relative; min-width: 0; padding: 24px 28px; }
.onboarding-step + .onboarding-step { border-left: 1px solid var(--theme-line); }
.onboarding-connector {
  position: absolute;
  z-index: 1;
  top: 50%;
  right: -23px;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  transform: translateY(-50%);
  border: 1px solid var(--theme-line);
  border-radius: 50%;
  color: var(--theme-text);
  background: var(--theme-surface);
  pointer-events: none;
}
.onboarding-connector svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
html[data-theme] .widget .onboarding-step h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--theme-text);
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.5;
}
.onboarding-step-number {
  display: grid;
  place-items: center;
  flex: 0 0 26px;
  height: 26px;
  border: 1px solid var(--theme-line-strong);
  border-radius: 6px;
  background: var(--theme-control);
  font-size: .8125rem;
  font-variant-numeric: tabular-nums;
}
.onboarding-example { margin: 20px 0 0; }
.onboarding-example figcaption { margin-top: 10px; color: var(--theme-muted); font-size: .75rem; line-height: 1.6; }
html[data-theme] .widget .onboarding-step .onboarding-card-hint { margin-top: 12px; font-size: .8125rem; }
html[data-theme] .widget .onboarding-sample-card { width: 100%; margin: 0; cursor: default; }
html[data-theme] .widget .onboarding-sample-card .streamer-copy > strong { margin: 0; }
html[data-theme] .widget .onboarding-actions {
  position: static;
  display: flex;
  justify-content: flex-start;
  width: auto;
  padding: 0;
  margin: 20px 0 0;
  border: 0;
  background: transparent;
}
html[data-theme] .widget .onboarding-actions .primary-button { flex: 0 0 auto; min-height: 44px; padding-inline: 16px; }
html[data-theme] .widget .onboarding-start .onboarding-reassurance { margin-top: 12px; font-size: .75rem; }
.onboarding-extras { padding: 20px 28px; border: 1px solid var(--theme-line); border-radius: 0 0 12px 12px; background: var(--theme-surface); }
.onboarding-features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: 0;
}
html[data-theme] .widget .onboarding-features h2 { margin: 0; color: var(--theme-text); font-size: .875rem; font-weight: 600; line-height: 1.6; }
html[data-theme] .widget .onboarding-features p { margin: 4px 0 0; font-size: .8125rem; }
.onboarding-content a { color: var(--theme-accent-strong); text-underline-offset: 4px; }
.onboarding-guide { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--theme-line); font-size: .875rem; }
/* 機能の一覧を外したので、使い方へのリンクが箱の先頭に来るときは区切り線と余白を付けない */
.onboarding-extras > .onboarding-guide:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.onboarding-notes { margin-top: 14px; font-size: .8125rem; height: calc(1.5em + 16px); overflow: visible; }
.onboarding-notes summary { cursor: pointer; padding-block: 8px; line-height: 1.5; }
/* This disclosure is the last item. Its visible body extends the list's scroll area. */
.onboarding-notes > p:last-child { padding-bottom: 24px; }
html[data-theme] .widget .onboarding-notes p { margin-top: 8px; font-size: .8125rem; }
/* よくある質問：通知・データ保存の注記より前に置く。各回答は開いたときだけ高さを取る */
.onboarding-faq { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--theme-line); }
html[data-theme] .widget .onboarding-faq h2 { margin: 0 0 4px; color: var(--theme-text); font-size: .875rem; font-weight: 600; line-height: 1.6; }
.onboarding-faq details { font-size: .8125rem; }
.onboarding-faq summary { cursor: pointer; padding-block: 8px; line-height: 1.5; }
html[data-theme] .widget .onboarding-faq p { margin: 0 0 10px; font-size: .8125rem; }
.onboarding-content :is(a, button, summary):focus-visible { outline: 2px solid var(--theme-accent); outline-offset: 4px; }
@media (max-width: 760px) {
  html[data-theme] .widget .empty-state-onboarding { padding: 20px 16px; }
  .onboarding-content { max-width: 480px; }
  .onboarding-flow { grid-template-columns: minmax(0, 1fr); }
  .onboarding-step, .onboarding-extras { padding: 20px; }
  .onboarding-step + .onboarding-step { border-left: 0; border-top: 1px solid var(--theme-line); }
  .onboarding-start { padding-bottom: 30px; }
  .onboarding-start + .onboarding-step { padding-top: 30px; }
  .onboarding-connector { top: auto; right: auto; bottom: -19px; left: 50%; width: 38px; height: 38px; transform: translateX(-50%); }
  .onboarding-connector svg { transform: rotate(90deg); }
  .onboarding-features { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .onboarding-features li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 12px; align-items: baseline; }
  html[data-theme] .widget .onboarding-features p { margin: 0; }
}