:root {
  --bg: #eef1f4;
  --surface: #ffffff;
  --surface-soft: #f6f7f8;
  --surface-blue: #f7faff;
  --text: #111827;
  --muted: #667085;
  --line: #d9dee7;
  --line-soft: #e9edf2;
  --blue: #1D4ED8;
  --blue-soft: #eaf2ff;
  --black: #101828;
  --danger: #a62f2f;
  --max: 1500px;
}

* { box-sizing: border-box; }

html {
  color-scheme: light;
  background: var(--bg);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

button,
input {
  font: inherit;
}

button {
  cursor: pointer;
}

.hidden {
  display: none !important;
}

.shell {
  width: min(var(--max), calc(100% - 28px));
  margin: 10px auto 40px;
  padding: 0 24px 36px;
  background: rgba(255,255,255,.82);
  border: 1px solid #cdd4de;
  border-radius: 16px;
  min-height: calc(100vh - 28px);
  box-shadow: 0 1px 2px rgba(16,24,40,.04);
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  min-height: 76px;
  border-bottom: 1px solid var(--line-soft);
}

.brand {
  position: relative;
  padding-right: 28px;
}

.brand::after {
  content: "";
  position: absolute;
  right: 0;
  top: 17px;
  width: 1px;
  height: 26px;
  background: #c7ced8;
}

.eyebrow {
  font-size: 10px;
  letter-spacing: .17em;
  color: #626b78;
  font-weight: 800;
  text-transform: uppercase;
}

h1 {
  margin: 2px 0 0;
  font-size: 30px;
  line-height: .95;
  letter-spacing: -.035em;
  font-weight: 900;
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.updated {
  color: #667085;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.top-button {
  appearance: none;
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: #344054;
  padding: 2px 0 2px 12px;
  font-size: 12px;
  font-weight: 800;
}

.top-button:hover {
  color: var(--blue);
}

.login-card {
  max-width: 520px;
  margin: 72px auto 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 28px;
}

.login-card h2 {
  margin: 0 0 8px;
}

.login-card p {
  color: var(--muted);
  margin: 0 0 20px;
}

.login-card label {
  display: block;
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 7px;
}

.login-row {
  display: flex;
  gap: 8px;
}

.login-row input {
  flex: 1;
  min-width: 0;
}

input {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 10px 14px;
  background: white;
  color: var(--text);
  outline: none;
}

input:focus {
  border-color: #98a2b3;
  box-shadow: 0 0 0 3px rgba(11,87,208,.08);
}

.login-row button,
.ask-submit {
  border: 0;
  border-radius: 999px;
  background: var(--black);
  color: white;
  padding: 9px 16px;
  font-weight: 800;
}

.error {
  color: var(--danger) !important;
  margin: 12px 0 0 !important;
}

.dashboard {
  padding-top: 18px;
}

.sourcebar {
  min-height: 50px;
  padding: 8px 10px;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: #f7f8fa;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
}

.source-list,
.view-filter {
  display: flex;
  align-items: center;
  gap: 7px;
}

.source-pill,
.filter-button {
  border: 1px solid #d5dae2;
  background: #edf0f3;
  color: #344054;
  border-radius: 999px;
  min-height: 30px;
  padding: 5px 11px;
  font-size: 12px;
  font-weight: 800;
}

.source-pill.active {
  background: #191c22;
  color: white;
  border-color: #191c22;
}

.source-icon {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  vertical-align: -2px;
  margin-right: 5px;
}

.source-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  margin-left: 3px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  font-size: 10px;
}

.filter-button {
  background: #fff;
}

.filter-button.active {
  color: #111827;
  background: #fff;
  box-shadow: 0 0 0 1px #cfd5dd inset;
}

.status {
  margin: 12px 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 8px;
  color: var(--muted);
}

.table-wrap {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.news-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.news-table th {
  text-align: left;
  padding: 11px 14px 9px;
  color: #667085;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line-soft);
}

.head-note {
  font-size: 9px;
  color: #98a2b3;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
}

.time-col {
  width: 120px;
}

.title-col {
  width: 34%;
}

.news-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
  font-size: 14px;
  line-height: 1.4;
}

.day-row td {
  padding: 8px 14px;
  background: #f2f4f7;
  color: #475467;
  border-bottom: 1px solid var(--line);
}

.day-heading {
  font-size: 10px;
  letter-spacing: .11em;
  font-weight: 900;
  text-transform: uppercase;
}

.news-row {
  position: relative;
  transition: background .12s ease;
}

.news-row:hover {
  background: #fbfcfe;
}

.news-row.selected {
  background: #f8fbff;
  box-shadow: inset 3px 0 0 var(--blue);
}

.news-row.checked:not(.selected) {
  background: #fafafa;
}

.news-row.checked:not(.selected) .story-title,
.news-row.checked:not(.selected) .story-desc {
  color: #667085;
}

.story-meta {
  width: 120px;
}

.story-time {
  color: #344054;
  font-size: 13px;
  font-weight: 850;
  white-space: nowrap;
}

.story-row-tools {
  margin-top: 7px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.quick-ask {
  border: 1px solid #d0d5dd;
  background: #fff;
  color: #344054;
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 10px;
  font-weight: 850;
}

.quick-ask:hover {
  border-color: var(--blue);
  color: var(--blue);
}

.news-row.selected .quick-ask {
  display: none;
}

.read-indicator {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #98a2b3;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.read-box {
  width: 13px;
  height: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid #98a2b3;
  border-radius: 4px;
  font-size: 9px;
  line-height: 1;
  color: white;
}

.read-indicator.is-read {
  color: #667085;
}

.read-indicator.is-read .read-box {
  border-color: var(--blue);
  background: var(--blue);
}

.story-title {
  color: #111827;
  text-decoration: none;
  font-weight: 850;
  font-size: 15px;
  line-height: 1.35;
}

.story-title:hover {
  color: var(--blue);
}

.external-mark {
  color: var(--blue);
  font-size: 11px;
  white-space: nowrap;
}

.story-desc {
  color: #475467;
  font-weight: 400;
}

.analysis-row td {
  padding: 0;
  background: #f7faff;
}

.analysis-panel {
  padding: 14px 18px 18px 134px;
  border-bottom: 1px solid var(--line);
  background: #f8fbff;
}

.analysis-topline {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
}

.analysis-actions {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}

.analysis-button {
  border: 1px solid #d0d5dd;
  background: #fff;
  color: #344054;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 850;
}

.analysis-button.primary-action {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}

.analysis-actions button.completed,
.analysis-actions button:disabled {
  opacity: 1;
  background: #e8ebef !important;
  color: #98a2b3 !important;
  border-color: #d6dbe2 !important;
  cursor: default;
  box-shadow: none;
}

.ask-form {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: min(430px, 45%);
}

.ask-input {
  width: 100%;
  min-width: 220px;
  background: #f1f3f6;
  border-color: transparent;
  font-size: 12px;
  padding: 7px 12px;
}

.ask-submit {
  white-space: nowrap;
  font-size: 11px;
  padding: 6px 14px;
}

.analysis-history {
  max-width: 1050px;
  margin-top: 16px;
  display: grid;
  gap: 12px;
}

.history-card {
  position: relative;
  border-top: 1px solid #dfe6ef;
  padding-top: 14px;
  padding-bottom: 2px;
  color: #1d2939;
}

.history-card:first-child {
  border-top: 0;
  padding-top: 2px;
}

.history-card .result-label {
  margin-bottom: 8px;
  color: var(--blue);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 900;
}

.history-question {
  margin-bottom: 7px;
  font-weight: 850;
  color: #101828;
}

.history-answer {
  white-space: pre-wrap;
  color: #344054;
  font-size: 14px;
  line-height: 1.56;
}

.history-card.collapsed .history-answer {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.history-card.collapsed .sources {
  display: none;
}

.history-card-toggle {
  margin-top: 5px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--blue);
  font-size: 11px;
  font-weight: 900;
  text-transform: lowercase;
}

.sources {
  margin-top: 10px;
}

.sources-title {
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  color: #667085;
  margin-bottom: 5px;
}

.sources a {
  display: block;
  color: var(--blue);
  font-size: 11px;
  margin-bottom: 3px;
  word-break: break-word;
}

.analysis-result {
  max-width: 1050px;
  margin-top: 14px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.analysis-result .answer {
  white-space: pre-wrap;
  line-height: 1.56;
  font-size: 14px;
}

.loading {
  color: var(--muted);
}

.empty-row td {
  padding: 26px;
  text-align: center;
  color: var(--muted);
}

/* Mobile */
@media (max-width: 900px) {
  body {
    background: #fff;
  }

  .shell {
    width: 100%;
    margin: 0;
    min-height: 100vh;
    padding: 0 12px 32px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: #fff;
  }

  .topbar {
    min-height: 68px;
    gap: 12px;
  }

  .brand::after {
    display: none;
  }

  .eyebrow {
    font-size: 9px;
  }

  h1 {
    font-size: 28px;
  }

  .top-actions {
    gap: 8px;
  }

  .updated {
    display: none;
  }

  .top-button {
    font-size: 12px;
    padding-left: 8px;
  }

  .dashboard {
    padding-top: 12px;
  }

  .sourcebar {
    margin-bottom: 10px;
    padding: 7px;
    gap: 8px;
    flex-wrap: wrap;
  }

  .source-pill,
  .filter-button {
    min-height: 34px;
    font-size: 13px;
  }

  .table-wrap {
    border: 0;
    overflow: visible;
  }

  .news-table,
  .news-table tbody {
    display: block;
    width: 100%;
  }

  .news-table thead {
    display: none;
  }

  .day-row {
    display: block;
    margin: 12px 0 6px;
  }

  .day-row td {
    display: block;
    padding: 7px 2px;
    border: 0;
    background: transparent;
  }

  .day-heading {
    font-size: 12px;
  }

  .news-row {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    grid-template-areas:
      "meta title"
      "meta desc";
    column-gap: 10px;
    row-gap: 8px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line-soft);
  }

  .news-row.selected {
    padding: 14px 10px;
    margin: 0 -10px;
    border-radius: 10px 10px 0 0;
    box-shadow: inset 3px 0 0 var(--blue);
  }

  .news-row.checked:not(.selected) {
    background: transparent;
  }

  .news-row td {
    display: block;
    padding: 0;
    border: 0;
    min-width: 0;
  }

  .story-meta {
    grid-area: meta;
  }

  .story-title-cell {
    grid-area: title;
  }

  .story-desc {
    grid-area: desc;
  }

  .story-time {
    color: #000;
    font-size: 15px;
  }

  .story-row-tools {
    margin-top: 8px;
  }

  .quick-ask {
    padding: 5px 10px;
    font-size: 13px;
  }

  .read-indicator {
    font-size: 11px;
    color: #000;
  }

  .story-title,
  .news-row.checked:not(.selected) .story-title {
    color: #000;
    font-size: 20px;
    line-height: 1.34;
    font-weight: 850;
  }

  .story-desc,
  .news-row.selected .story-desc,
  .news-row.checked .story-desc,
  .news-row.checked.selected .story-desc,
  .news-row.checked:not(.selected) .story-desc {
    color: #000 !important;
    font-size: 20px !important;
    line-height: 1.45 !important;
    font-weight: 400 !important;
  }

  .analysis-row {
    display: block;
    margin: 0 -10px 12px;
  }

  .analysis-row td {
    display: block;
    padding: 0;
    border: 0;
  }

  .analysis-panel {
    padding: 14px 12px 18px;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0 0 10px 10px;
  }

  .analysis-topline {
    flex-direction: column;
    gap: 12px;
  }

  .analysis-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }

  .analysis-button {
    min-height: 42px;
    padding: 7px 6px;
    font-size: 13px;
  }

  .ask-form {
    width: 100%;
    min-width: 0;
  }

  .ask-input {
    min-width: 0;
    flex: 1;
    font-size: 16px;
    padding: 10px 13px;
  }

  .ask-submit {
    min-height: 42px;
    font-size: 14px;
  }

  .analysis-history {
    margin-top: 14px;
    gap: 15px;
  }

  .history-card .result-label {
    color: #000;
    font-size: 13px;
  }

  .history-question {
    color: #000;
    font-size: 20px;
    line-height: 1.45;
  }

  .history-answer,
  .analysis-result .answer {
    color: #000;
    font-size: 20px;
    line-height: 1.5;
    font-weight: 400;
  }

  .history-card-toggle {
    font-size: 16px;
    padding: 5px 0;
  }

  .sources-title,
  .sources a {
    color: #000;
    font-size: 14px;
  }

  .login-card {
    margin-top: 34px;
    padding: 20px;
  }

  .login-row {
    flex-direction: column;
  }

  .login-row button {
    min-height: 44px;
  }
}

@media (max-width: 520px) {
  .topbar {
    align-items: center;
  }

  .view-filter {
    margin-left: auto;
  }

  .news-row {
    grid-template-columns: 70px minmax(0, 1fr);
  }

  .analysis-actions {
    grid-template-columns: 1fr;
  }

  .ask-form {
    display: grid;
    grid-template-columns: 1fr auto;
  }
}


/* v2.6 - match supplied reference palette and keep Ask inside table width */
:root {
  --bg: #f0f2f4;
  --surface: #ffffff;
  --surface-soft: #f6f8fa;
  --surface-blue: #ffffff;
  --text: #181a1c;
  --muted: #62676d;
  --line: #d9dde2;
  --line-soft: #eceff2;
  --blue: #1130a2;
  --blue-soft: #eef2ff;
  --black: #181a1c;
}

body {
  background: #f0f2f4;
  color: #181a1c;
}

.shell {
  background: #f6f8fa;
  border-color: #cfd4da;
}

.topbar {
  background: #f6f8fa;
}

.eyebrow,
.updated,
.news-table th,
.head-note,
.day-heading {
  color: #62676d;
}

.sourcebar {
  background: #ffffff;
  border-color: #e4e7eb;
}

.source-pill.active {
  background: #181a1c;
  color: #ffffff;
  border-color: #181a1c;
}

.filter-button,
.filter-button.active {
  background: #ffffff;
  color: #181a1c;
  border-color: #d7dce1;
}

.table-wrap,
.news-table {
  background: #ffffff;
}

.day-row td {
  background: #f0f2f4;
  color: #4b5158;
}

.news-row {
  background: #ffffff;
}

.news-row:hover {
  background: #f6f8fa;
}

.news-row.selected {
  background: #f0f2f4;
  box-shadow: inset 3px 0 0 #1130a2;
}

.news-row.checked:not(.selected) {
  background: #ffffff;
}

.news-row.checked:not(.selected) .story-title {
  color: #4c535b;
}

.news-row.checked:not(.selected) .story-desc {
  color: #6a7077;
}

.story-time,
.story-title,
.story-desc {
  color: #181a1c;
}

.story-desc {
  color: #4b5158;
}

.external-mark,
.story-title:hover {
  color: #1130a2;
}

.quick-ask {
  background: #ffffff;
  color: #181a1c;
  border-color: #cfd4da;
}

.quick-ask:hover {
  color: #1130a2;
  border-color: #1130a2;
}

.read-indicator {
  color: #62676d;
}

.read-indicator.is-read .read-box {
  background: #1130a2;
  border-color: #1130a2;
}

.analysis-row td,
.analysis-panel {
  background: #ffffff;
}

/* keep the action row physically inside the same table width */
.analysis-panel {
  padding-right: 18px;
  overflow: hidden;
}

.analysis-topline {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 430px);
  align-items: center;
  gap: 18px;
}

.analysis-actions {
  min-width: 0;
}

.ask-form {
  width: 100%;
  max-width: 430px;
  min-width: 0;
  justify-self: end;
}

.ask-input {
  width: 100%;
  min-width: 0;
  background: #f0f2f4;
  color: #181a1c;
}

.ask-input::placeholder {
  color: #8c9197;
}

.ask-submit {
  flex: 0 0 auto;
  background: #181a1c;
}

.analysis-button {
  background: #f0f2f4;
  color: #181a1c;
  border-color: transparent;
}

.analysis-button.primary-action {
  background: #1130a2;
  color: #ffffff;
  border-color: #1130a2;
}

.analysis-actions button.completed,
.analysis-actions button:disabled {
  background: #e8eaed !important;
  color: #8b9096 !important;
  border-color: transparent !important;
}

.analysis-history {
  color: #181a1c;
}

.history-card {
  color: #181a1c;
  border-color: #e2e5e8;
}

.history-card .result-label {
  color: #1130a2;
}

.history-answer,
.history-question {
  color: #181a1c;
}

.history-card-toggle,
.sources a {
  color: #1130a2;
}

.sources-title {
  color: #62676d;
}

/* Reference design has the generated answer block on a neutral gray card */
.history-card.history-ask,
.history-card:has(.history-question) {
  background: #f0f2f4;
  border: 0;
  border-radius: 4px;
  padding: 12px 14px;
}

/* mobile: same neutral palette, no blue-gray body copy */
@media (max-width: 900px) {
  body,
  .shell,
  .topbar {
    background: #ffffff;
  }

  .sourcebar {
    background: #f6f8fa;
  }

  .news-row,
  .news-row.checked:not(.selected) {
    background: #ffffff;
  }

  .news-row.selected {
    background: #f0f2f4;
  }

  .story-time,
  .story-title,
  .story-desc,
  .news-row.checked:not(.selected) .story-title,
  .news-row.checked:not(.selected) .story-desc,
  .history-answer,
  .history-question,
  .analysis-result .answer,
  .sources-title,
  .sources a {
    color: #000000 !important;
  }

  .analysis-panel {
    background: #ffffff;
  }

  .analysis-topline {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .ask-form {
    width: 100%;
    max-width: none;
    justify-self: stretch;
  }
}


/* v2.7 - structural table fix + reference proportions */
.news-table {
  table-layout: fixed;
}

.time-col {
  width: 120px;
}

.title-col {
  width: 35%;
}

/* Ensure all rows/cells paint across the true 3-column table width */
.news-row > td,
.day-row > td,
.analysis-row > td {
  background-clip: border-box;
}

.news-row.selected > td {
  background: #f0f2f4;
}

.news-row.checked:not(.selected) > td {
  background: #ffffff;
}

.analysis-row > td {
  width: 100%;
  background: #ffffff;
}

/* Keep expanded content comfortably inside the table, like the reference */
.analysis-panel {
  width: 100%;
  max-width: 100%;
  padding-left: 134px;
  padding-right: 18px;
}

.analysis-topline {
  max-width: 100%;
}

.analysis-history,
.analysis-result {
  width: 100%;
  max-width: 1050px;
}

@media (max-width: 900px) {
  .analysis-panel {
    padding-left: 12px;
    padding-right: 12px;
  }

  .news-row.selected > td,
  .news-row.checked:not(.selected) > td {
    background: transparent;
  }

  .news-row.selected {
    background: #f0f2f4;
  }
}


/* v2.8 - place Ask directly next to AI action buttons */
.analysis-topline {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.analysis-actions {
  flex: 0 0 auto;
}

.ask-form {
  display: flex;
  align-items: center;
  gap: 7px;
  width: auto;
  max-width: none;
  min-width: 0;
  justify-self: auto;
  margin-left: 0;
}

.ask-submit {
  order: 1;
}

.ask-input {
  order: 2;
  width: 320px;
  max-width: 42vw;
  min-width: 220px;
}

@media (max-width: 900px) {
  .analysis-topline {
    align-items: stretch;
    gap: 10px;
  }

  .ask-form {
    width: 100%;
    max-width: none;
  }

  .ask-input {
    width: 100%;
    max-width: none;
    min-width: 0;
  }
}

@media (max-width: 520px) {
  .ask-form {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
  }
}


/* v2.9 - supplied palette */
:root {
  --primary: #1D4ED8;
  --secondary: #0F172A;
  --tertiary: #64748B;
  --neutral: #F8FAFC;
  --read-bg: #EFEFFE;
  --bg: #F8FAFC;
  --surface: #ffffff;
  --surface-soft: #F8FAFC;
  --text: #0F172A;
  --muted: #64748B;
  --blue: #1D4ED8;
  --black: #0F172A;
}

body,
.shell {
  color: var(--secondary);
}

body {
  background: var(--neutral);
}

.source-pill.active,
.analysis-button.primary-action {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.source-pill:not(.active) {
  background: #fff;
  color: var(--secondary);
}

.external-mark,
.story-title:hover,
.history-card .result-label,
.history-card-toggle,
.sources a {
  color: var(--primary);
}

/* Description expansion control; QF02 uses a three-line clamp on every viewport. */
.story-desc-toggle {
  display: none !important;
}
.story-desc-text,
.story-title-trigger {
  cursor: pointer;
}

/* v3.0 default-feed pin */
.source-list {
  display: flex;
  align-items: center;
  gap: 6px;
}

.source-pin {
  width: 28px;
  height: 28px;
  min-height: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #d7dce1;
  border-radius: 999px;
  background: #ffffff;
  color: #64748B;
  font-size: 14px;
  line-height: 1;
}

.source-pin:hover {
  color: #1D4ED8;
  border-color: #1D4ED8;
}

.source-pin.is-default {
  background: #EEF2FF;
  color: #1D4ED8;
  border-color: #AFC1F7;
}

@media (max-width: 900px) {
  .source-pin {
    width: 34px;
    height: 34px;
    font-size: 16px;
  }
}


/* v3.1 default source indicator + Settings */
.source-pin {
  display: none !important;
}

/* Permanent default-source indication */
.source-pill.is-default-source {
  border: 1px solid #D06666 !important;
  box-shadow: 0 0 0 1px rgba(208, 102, 102, 0.08);
}

.source-pill.active.is-default-source {
  border-color: #D06666 !important;
}

.settings-panel {
  margin: 0 0 14px;
  padding: 16px 18px;
  background: #ffffff;
  border: 1px solid #d9dde2;
  border-radius: 9px;
}

.settings-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 13px;
  margin-bottom: 13px;
  border-bottom: 1px solid #eceff2;
}

.settings-title {
  color: #0F172A;
  font-size: 15px;
  font-weight: 850;
}

.settings-subtitle {
  margin-top: 3px;
  color: #64748B;
  font-size: 12px;
}

.settings-close {
  border: 0;
  background: transparent;
  color: #64748B;
  padding: 2px 0;
  font-size: 12px;
  font-weight: 800;
}

.settings-row {
  display: grid;
  gap: 8px;
  max-width: 560px;
}

.settings-row label {
  color: #0F172A;
  font-size: 12px;
  font-weight: 850;
}

.settings-control-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.settings-control-row select {
  flex: 1;
  min-width: 0;
  border: 1px solid #d9dde2;
  border-radius: 7px;
  background: #F8FAFC;
  color: #0F172A;
  padding: 9px 11px;
  font: inherit;
}

.settings-control-row button {
  border: 0;
  border-radius: 7px;
  background: #1D4ED8;
  color: white;
  padding: 9px 14px;
  font-weight: 800;
}

.settings-message {
  color: #64748B;
  font-size: 12px;
}

.settings-message.error-text {
  color: #a62f2f;
}

@media (max-width: 900px) {
  .settings-panel {
    padding: 14px;
  }

  .settings-panel-head {
    gap: 12px;
  }

  .settings-control-row {
    align-items: stretch;
    flex-direction: column;
  }

  .settings-control-row select,
  .settings-control-row button {
    width: 100%;
    min-height: 44px;
    font-size: 16px;
  }
}


/* v3.2 settings dropdown typography */
.settings-control-row select,
.settings-control-row select option {
  font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 14px !important;
  line-height: 1.4;
  font-weight: 600;
}

@media (max-width: 900px) {
  .settings-control-row select,
  .settings-control-row select option {
    font-size: 16px !important;
  }
}


/* v3.4 experimental RSS images */
.image-col {
  width: 116px;
}

.story-image-cell {
  width: 116px;
  padding-right: 12px !important;
  vertical-align: top;
}

.story-image {
  display: block;
  width: 104px;
  height: 68px;
  object-fit: cover;
  border-radius: 6px;
  background: #EEF1F4;
}

.story-image-placeholder {
  width: 104px;
  height: 68px;
}

@media (max-width: 900px) {
  .news-table thead .image-col {
    display: none;
  }

  .story-image-cell {
    width: 92px;
    padding-right: 10px !important;
  }

  .story-image {
    width: 82px;
    height: 58px;
    border-radius: 6px;
  }

  .story-image-placeholder {
    width: 82px;
    height: 58px;
  }
}

@media (max-width: 620px) {
  .story-image-cell {
    width: 78px;
    padding-right: 8px !important;
  }

  .story-image {
    width: 70px;
    height: 52px;
  }

  .story-image-placeholder {
    width: 70px;
    height: 52px;
  }
}


/* v3.5 tighter image table layout + corrected header alignment */
.news-table {
  width: 100%;
  table-layout: fixed;
}

.time-col {
  width: 112px;
}

.image-col {
  width: 92px !important;
}

.title-col {
  width: 34%;
}

.description-col {
  width: auto;
}

.story-image-cell {
  width: 92px !important;
  padding-left: 0 !important;
  padding-right: 8px !important;
  vertical-align: middle;
}

.story-image {
  width: 84px !important;
  height: 58px !important;
  object-fit: cover;
  border-radius: 6px;
}

.story-image-placeholder {
  width: 84px !important;
  height: 58px !important;
}

.story-title-cell {
  padding-left: 8px !important;
  padding-right: 14px !important;
}

/* Keep headers aligned to the actual cells */
.news-table thead th {
  box-sizing: border-box;
}

.news-table thead .image-col {
  padding-left: 0 !important;
  padding-right: 8px !important;
}

.news-table thead .title-col {
  padding-left: 8px !important;
}

/* On desktop, vertically center compact rows around the thumbnail */
.news-row > td {
  vertical-align: middle;
}

/* Preserve the time/tools block near the top enough for readability */
.story-meta {
  vertical-align: top !important;
}

@media (max-width: 900px) {
  .news-table {
    table-layout: auto;
  }

  .news-table thead .image-col {
    display: none;
  }

  .story-image-cell {
    width: 82px !important;
    padding-right: 8px !important;
  }

  .story-image {
    width: 74px !important;
    height: 52px !important;
  }

  .story-image-placeholder {
    width: 74px !important;
    height: 52px !important;
  }

  .story-title-cell {
    padding-left: 4px !important;
  }
}


/* v3.6 AI-response indicator on row Ask button */
.quick-ask.has-ai-response {
  color: #1D4ED8 !important;
  border-color: #1D4ED8 !important;
  border-width: 2px !important;
  background: #ffffff !important;
  font-weight: 800;
}

.quick-ask.has-ai-response:hover {
  background: #EEF2FF !important;
}


/* v3.8 row read status + unified AI buttons */
.read-box {
  display: none !important;
}

.read-indicator {
  gap: 0 !important;
}

/* Sum up, Background and Ask now share the same visual style */
.analysis-button,
.ask-submit {
  border: 1px solid #d0d5dd !important;
  background: #ffffff !important;
  color: #344054 !important;
  border-radius: 999px !important;
  font-weight: 850 !important;
  box-shadow: none !important;
}

.analysis-button:hover,
.ask-submit:hover {
  border-color: #1D4ED8 !important;
  color: #1D4ED8 !important;
  background: #ffffff !important;
}

.analysis-button.primary-action {
  border: 1px solid #d0d5dd !important;
  background: #ffffff !important;
  color: #344054 !important;
}

@media (max-width: 900px) {
  .read-indicator {
    padding-left: 0 !important;
  }
}


/* v4.1 third source: Pilates research */
@media (max-width: 900px) {
  .source-list {
    flex-wrap: wrap;
  }

  .source-pill {
    white-space: nowrap;
  }
}


/* v4.2 - Ask/Answer history uses the same style as Sum up and Background */
.history-card.history-ask,
.history-card:has(.history-question) {
  background: transparent !important;
  border-radius: 0 !important;
  border-top: 1px solid #e2e5e8 !important;
  padding: 14px 0 2px !important;
}

/* If an Answer happens to be the first AI result, match the normal first-card treatment */
.history-card:first-child:has(.history-question) {
  border-top: 0 !important;
  padding-top: 2px !important;
}

.history-card:has(.history-question) .result-label {
  margin-bottom: 8px;
  font-size: 10px;
  letter-spacing: .1em;
  font-weight: 900;
  color: #1D4ED8;
}

.history-card:has(.history-question) .history-answer {
  font-size: 14px;
  line-height: 1.56;
  font-weight: 400;
  color: #181a1c;
}

@media (max-width: 900px) {
  .history-card:has(.history-question) .result-label {
    font-size: 13px;
  }

  .history-card:has(.history-question) .history-answer {
    font-size: 20px;
    line-height: 1.5;
    font-weight: 400;
    color: #000;
  }
}


/* v4.3 - Answer section formatting */
.ask-history-card .history-question {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-bottom: 7px;
  color: #181a1c;
  font-weight: 400 !important;
}

.ask-history-card .history-question::before {
  content: "•";
  flex: 0 0 auto;
  color: #181a1c;
  font-weight: 700;
}

.ask-history-card + .ask-history-card {
  border-top: 1px solid #e2e5e8 !important;
  padding-top: 14px !important;
}

/* Only the first Ask card carries the ANSWER section label. */
.ask-history-card:not(:has(.result-label)) {
  padding-top: 14px;
}

@media (max-width: 900px) {
  .ask-history-card .history-question {
    font-size: 20px;
    line-height: 1.45;
    font-weight: 400 !important;
  }
}


/* v4.4 - white Ask input */
.ask-input {
  background: #ffffff !important;
  border-color: #d0d5dd !important;
}


/* v4.5 - structured AI response formatting */
.history-answer {
  white-space: normal !important;
}

.history-answer p {
  margin: 0 0 9px;
}

.history-answer p:last-child {
  margin-bottom: 0;
}

.history-answer strong {
  font-weight: 800;
}

.history-answer em {
  font-style: italic;
}

.ai-subheading {
  margin: 16px 0 6px;
  color: #181a1c;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 850;
}

.ai-subheading:first-child {
  margin-top: 0;
}

.ai-bullet-list {
  margin: 5px 0 12px;
  padding-left: 21px;
}

.ai-bullet-list li {
  margin: 0 0 5px;
  padding-left: 2px;
}

.ai-bullet-list li:last-child {
  margin-bottom: 0;
}

/* Block-based formatting needs height clipping instead of line-clamp. */
.history-card.collapsed .history-answer {
  display: block !important;
  max-height: 3.15em;
  overflow: hidden;
}

.history-card.expanded .history-answer {
  max-height: none;
  overflow: visible;
}

@media (max-width: 900px) {
  .ai-subheading {
    margin-top: 18px;
    margin-bottom: 7px;
    font-size: 17px;
    line-height: 1.35;
  }

  .ai-bullet-list {
    margin: 6px 0 14px;
    padding-left: 24px;
  }

  .ai-bullet-list li {
    margin-bottom: 7px;
  }

  .history-card.collapsed .history-answer {
    max-height: 3.05em;
  }
}


/* v4.7 - asked-question bullet matches default source indicator */
.ask-history-card .history-question::before {
  color: #D06666 !important;
}


/* v4.8 - minimal arrow before asked questions */
.ask-history-card .history-question::before {
  content: "→" !important;
  color: #D06666 !important;
  font-weight: 700;
  line-height: 1.2;
}


/* v4.9 - mobile left thumbnail stack + two AI action buttons */
.story-mobile-image {
  display: none;
}

@media (max-width: 900px) {
  .news-row {
    grid-template-columns: 108px minmax(0, 1fr) !important;
    grid-template-areas:
      "meta title"
      "meta desc" !important;
    column-gap: 14px !important;
    row-gap: 8px !important;
  }

  .story-meta {
    grid-area: meta !important;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    align-self: start;
    width: 108px !important;
  }

  /* Desktop image column is hidden on mobile; thumbnail lives in the left stack instead. */
  .story-image-cell {
    display: none !important;
  }

  .story-mobile-image {
    display: block;
    width: 92px;
    margin-top: 12px;
  }

  .story-mobile-image img {
    display: block;
    width: 92px;
    height: 68px;
    object-fit: cover;
    border-radius: 10px;
    background: #eef2f7;
  }

  .story-title-cell {
    grid-area: title !important;
    padding-left: 0 !important;
  }

  .story-desc {
    grid-area: desc !important;
  }

  /* Sum up + Background stay together on one row. */
  .analysis-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100%;
  }

  .analysis-button {
    width: 100%;
  }
}

@media (max-width: 520px) {
  .news-row {
    grid-template-columns: 98px minmax(0, 1fr) !important;
    column-gap: 12px !important;
  }

  .story-meta {
    width: 98px !important;
  }

  .story-mobile-image {
    width: 84px;
    margin-top: 11px;
  }

  .story-mobile-image img {
    width: 84px;
    height: 62px;
  }

  /* Override older one-column mobile rule. */
  .analysis-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}


/* v5.0 - contextual Ask follow-up */
.followup-form {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #e2e5e8;
  max-width: 760px;
}

.followup-input {
  flex: 1;
  min-width: 0;
  background: #ffffff !important;
  border: 1px solid #d0d5dd !important;
  color: #181a1c;
  font-size: 14px;
  padding: 9px 13px;
}

.followup-submit {
  white-space: nowrap;
  border: 1px solid #d0d5dd;
  background: #ffffff;
  color: #344054;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 850;
}

.followup-submit:hover {
  border-color: #1D4ED8;
  color: #1D4ED8;
}

@media (max-width: 900px) {
  .followup-form {
    max-width: none;
    width: 100%;
    gap: 8px;
  }

  .followup-input {
    font-size: 16px;
    min-height: 44px;
  }

  .followup-submit {
    min-height: 44px;
    font-size: 14px;
  }
}

@media (max-width: 520px) {
  .followup-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }
}


/* v5.2 - structured AI panel, Summary/Background chevrons, HU/EN selector */
.analysis-topline,
.analysis-history,
.analysis-result {
  max-width: 980px !important;
}

.analysis-history {
  gap: 0 !important;
}

.ai-language-toggle {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  overflow: hidden;
  border: 1px solid #d0d5dd;
  border-radius: 999px;
  background: #ffffff;
}

.language-choice {
  min-width: 34px;
  height: 30px;
  padding: 0 9px;
  border: 0;
  border-radius: 0;
  background: #ffffff;
  color: #64748B;
  font-size: 10px;
  font-weight: 850;
  line-height: 1;
}

.language-choice + .language-choice {
  border-left: 1px solid #e1e5ea;
}

.language-choice.active {
  background: #1D4ED8;
  color: #ffffff;
}

.analysis-section-card {
  border-top: 1px solid #dfe4ea !important;
  padding: 0 !important;
}

.analysis-section-card:first-child {
  border-top: 0 !important;
}

.analysis-section-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0 11px;
  border: 0;
  border-bottom: 1px solid #e6e9ed;
  background: transparent;
  color: #181a1c;
  text-align: left;
}

.analysis-section-header .result-label {
  margin: 0 !important;
  color: #1D4ED8;
  font-size: 11px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.section-chevron {
  flex: 0 0 auto;
  color: #64748B;
  font-size: 15px;
  line-height: 1;
  font-weight: 700;
}

.analysis-section-body {
  max-width: 940px;
  padding: 13px 0 8px;
}

.analysis-section-card.collapsed .analysis-section-body {
  display: none;
}

.analysis-section-card.expanded .analysis-section-body {
  display: block;
}

.answer-section-heading {
  margin-top: 4px;
  padding: 15px 0 10px;
  border-top: 1px solid #dfe4ea;
  color: #1D4ED8;
  font-size: 11px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.ask-history-card {
  max-width: 940px;
}

.ask-history-card.collapsed .history-answer {
  display: block !important;
  max-height: 3.15em !important;
  overflow: hidden !important;
}

.ask-history-card.expanded .history-answer {
  max-height: none !important;
  overflow: visible !important;
}

.ask-history-card.collapsed .sources {
  display: none;
}

.ask-history-card.expanded .sources {
  display: block;
}

.ai-subheading {
  margin-top: 18px !important;
}

.analysis-section-body .ai-subheading:first-child {
  margin-top: 0 !important;
}

@media (max-width: 900px) {
  .analysis-topline,
  .analysis-history,
  .analysis-result {
    max-width: none !important;
  }

  .analysis-section-header {
    min-height: 44px;
    padding: 12px 0 10px;
  }

  .analysis-section-header .result-label,
  .answer-section-heading {
    font-size: 13px;
  }

  .section-chevron {
    font-size: 17px;
  }

  .analysis-section-body {
    max-width: none;
    padding-top: 12px;
  }

  .ask-form {
    width: 100% !important;
  }

  .ai-language-toggle {
    height: 44px;
  }

  .language-choice {
    min-width: 42px;
    height: 42px;
    font-size: 12px;
  }
}

@media (max-width: 520px) {
  .ask-form {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    gap: 7px !important;
  }

  .ask-submit {
    grid-column: 1;
  }

  .ask-input {
    grid-column: 2;
  }

  .ai-language-toggle {
    grid-column: 3;
  }
}


/* v5.3 - visible section chevrons, collapsed previews, compact AI language selector */

/* Section header: triangle immediately beside the section title. */
.analysis-section-header {
  justify-content: flex-start !important;
  gap: 8px !important;
}

.section-chevron {
  width: 14px;
  flex: 0 0 14px;
  color: #1D4ED8 !important;
  font-size: 11px !important;
  line-height: 1;
  text-align: center;
  transform: translateY(-1px);
}

.analysis-section-preview {
  display: none;
  padding: 10px 0 9px 22px;
  color: #344054;
  font-size: 14px;
  line-height: 1.56;

  /* Always exactly a compact two-line preview when collapsed. */
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.analysis-section-card.collapsed .analysis-section-preview {
  display: -webkit-box;
}

.analysis-section-card.expanded .analysis-section-preview {
  display: none;
}

.analysis-section-card.collapsed .analysis-section-body {
  display: none !important;
}

.analysis-section-card.expanded .analysis-section-body {
  display: block !important;
}

/* AI language selector is part of the Ask controls, but clearly identified as AI-only. */
.ai-language-control {
  order: 3;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  height: 30px;
  border: 1px solid #d0d5dd;
  border-radius: 999px;
  background: #ffffff;
  overflow: hidden;
  color: #64748B;
}

.ai-language-label {
  padding: 0 7px 0 10px;
  font-size: 10px;
  line-height: 1;
  font-weight: 750;
  color: #64748B;
  white-space: nowrap;
}

.ai-language-toggle {
  height: 100% !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  background: transparent !important;
}

.language-choice {
  min-width: 32px !important;
  height: 28px !important;
  padding: 0 8px !important;
  background: transparent !important;
  color: #64748B !important;
  font-size: 10px !important;
  font-weight: 650 !important;
}

.language-choice + .language-choice {
  border-left: 1px solid #e1e5ea !important;
}

.language-choice.active {
  background: #EEF2FF !important;
  color: #1D4ED8 !important;
  font-weight: 900 !important;
}

/* Force Ask -> textbox -> AI language selector order. */
.ask-submit {
  order: 1 !important;
}

.ask-input {
  order: 2 !important;
}

.ai-language-control {
  order: 3 !important;
}

@media (max-width: 900px) {
  .analysis-section-preview {
    padding-left: 22px;
    font-size: 17px;
    line-height: 1.45;
  }

  .section-chevron {
    font-size: 12px !important;
  }

  .ai-language-control {
    height: 42px;
  }

  .ai-language-label {
    padding-left: 11px;
    padding-right: 7px;
    font-size: 11px;
  }

  .language-choice {
    min-width: 39px !important;
    height: 40px !important;
    font-size: 12px !important;
  }
}

@media (max-width: 520px) {
  .ask-form {
    grid-template-columns: auto minmax(0, 1fr) auto !important;
  }

  .ask-submit {
    grid-column: 1 !important;
  }

  .ask-input {
    grid-column: 2 !important;
  }

  .ai-language-control {
    grid-column: 3 !important;
  }
}


/* v5.5 - collapsed Sources + exact two-line previews + inline more */

/* Sources are always closed until explicitly opened by the user. */
.sources {
  margin-top: 11px;
}

.sources > summary.sources-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  margin-bottom: 0;
}

.sources > summary.sources-title::-webkit-details-marker {
  display: none;
}

.sources > summary.sources-title::before {
  content: "▶";
  color: #64748B;
  font-size: 9px;
  line-height: 1;
}

.sources[open] > summary.sources-title::before {
  content: "▼";
}

.sources-links {
  margin-top: 6px;
}

/* The card can be expanded while Sources themselves remain closed. */
.ask-history-card.expanded .sources {
  display: block;
}

/* Exactly two visible preview lines — never a clipped third line. */
.analysis-section-preview {
  position: relative;
  display: none;
  padding: 10px 0 9px 22px !important;
  color: #344054;
  font-size: 14px;
  line-height: 1.56;
  overflow: hidden;
}

.analysis-section-card.collapsed .analysis-section-preview {
  display: block !important;
}

.analysis-preview-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  max-height: 3.12em;
  padding-right: 64px;
}

.analysis-preview-more {
  position: absolute;
  right: 0;
  bottom: 9px;
  border: 0;
  padding: 0 0 0 15px;
  background: linear-gradient(90deg, rgba(255,255,255,0), #fff 24%, #fff 100%);
  color: #1D4ED8;
  font: inherit;
  font-size: 12px;
  line-height: 1.56;
  font-weight: 850;
  cursor: pointer;
}

.analysis-preview-more::before {
  content: "… ";
}

.analysis-section-card.expanded .analysis-section-preview {
  display: none !important;
}

@media (max-width: 900px) {
  .analysis-section-preview {
    padding: 10px 0 9px 22px !important;
    font-size: 17px;
    line-height: 1.45;
  }

  .analysis-preview-text {
    max-height: 2.90em;
    padding-right: 70px;
  }

  .analysis-preview-more {
    bottom: 9px;
    font-size: 15px;
    line-height: 1.45;
  }
}


/* v5.6 - consistent collapsed preview / ... more behavior */

/* If there is no hidden continuation, don't reserve space for more. */
.analysis-preview-text:not(.has-more),
.ask-preview-text:not(.has-more) {
  padding-right: 0 !important;
}

/* AI Answer collapsed preview mirrors Summary / Background. */
.ask-answer-preview {
  position: relative;
  display: none;
  margin-top: 6px;
  color: #181a1c;
  font-size: 14px;
  line-height: 1.56;
  overflow: hidden;
}

.ask-history-card.collapsed .ask-answer-preview {
  display: block;
}

.ask-history-card.expanded .ask-answer-preview {
  display: none;
}

.ask-preview-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  max-height: 3.12em;
  padding-right: 64px;
}

.ask-preview-more {
  position: absolute;
  right: 0;
  bottom: 0;
  border: 0;
  padding: 0 0 0 15px;
  background: linear-gradient(90deg, rgba(255,255,255,0), #fff 24%, #fff 100%);
  color: #1D4ED8;
  font: inherit;
  font-size: 12px;
  line-height: 1.56;
  font-weight: 850;
  cursor: pointer;
}

.ask-preview-more::before {
  content: "… ";
}

/* Full Answer content appears only when expanded. */
.ask-history-card.collapsed .ask-answer-body {
  display: none;
}

.ask-history-card.expanded .ask-answer-body {
  display: block;
}

/* Bottom control is only needed for collapsing an expanded answer. */
.ask-history-card.collapsed .history-card-toggle {
  display: none !important;
}

.ask-history-card.expanded .history-card-toggle {
  display: inline-block !important;
}

/* Existing Sources remain available only in expanded answer and closed by default. */
.ask-history-card.collapsed .sources {
  display: none !important;
}

@media (max-width: 900px) {
  .ask-answer-preview {
    font-size: 20px;
    line-height: 1.5;
  }

  .ask-preview-text {
    max-height: 3em;
    padding-right: 74px;
  }

  .ask-preview-more {
    font-size: 16px;
    line-height: 1.5;
  }
}


/* v5.7 - preserve viewport when switching between open stories */
.analysis-row {
  overflow-anchor: none;
}


/* v5.8 - interface language selector + preference-first startup */
.ui-language-control {
  display: inline-flex;
  align-items: center;
  height: 28px;
  border: 1px solid #d0d5dd;
  border-radius: 999px;
  background: #fff;
  overflow: hidden;
  flex: 0 0 auto;
}

.ui-language-label {
  padding: 0 7px 0 9px;
  color: #64748B;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}

.ui-language-choice {
  height: 26px;
  min-width: 31px;
  padding: 0 7px;
  border: 0;
  border-left: 1px solid #e1e5ea;
  background: transparent;
  color: #64748B;
  font-size: 10px;
  font-weight: 650;
}

.ui-language-choice.active {
  background: #EEF2FF;
  color: #1D4ED8;
  font-weight: 900;
}

.loading-panel {
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loading-message {
  color: #64748B;
  font-size: 13px;
  font-weight: 700;
}

@media (max-width: 900px) {
  .top-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .ui-language-control {
    height: 32px;
  }

  .ui-language-choice {
    height: 30px;
    min-width: 34px;
    font-size: 11px;
  }
}

@media (max-width: 520px) {
  .ui-language-label {
    display: none;
  }

  .ui-language-choice:first-of-type {
    border-left: 0;
  }
}


/* v6.0 - saved Links source */
.source-glyph {
  display: inline-block;
  margin-right: 4px;
  color: currentColor;
  font-size: 13px;
  font-weight: 900;
}

.add-link-button {
  background: #fff !important;
  color: #1D4ED8 !important;
  border-color: #b8c7ea !important;
}

.add-link-button:hover {
  border-color: #1D4ED8 !important;
}

.link-add-panel {
  margin: -8px 0 14px;
  padding: 10px;
  border: 1px solid #dfe4ec;
  border-radius: 8px;
  background: #f8fafc;
}

.link-add-form {
  display: flex;
  align-items: center;
  gap: 7px;
}

.link-add-form input {
  flex: 1 1 auto;
  min-width: 180px;
  height: 32px;
  padding: 6px 11px;
}

.link-add-form button {
  min-height: 30px;
  border: 1px solid #d5dae2;
  border-radius: 999px;
  background: #fff;
  color: #344054;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 800;
}

#linkAddSubmitBtn {
  background: #1D4ED8;
  border-color: #1D4ED8;
  color: #fff;
}

.link-add-message {
  margin-top: 7px;
  color: #64748B;
  font-size: 12px;
}

.link-add-message.error-text {
  color: #b42318;
}

.remove-link-button {
  padding: 0;
  border: 0;
  background: transparent;
  color: #98a2b3;
  font-size: 9px;
  font-weight: 750;
  text-transform: none;
}

.remove-link-button:hover {
  color: #b42318;
}

.story-publisher {
  margin-top: 3px;
  color: #98a2b3;
  font-size: 10px;
  font-weight: 650;
}

.link-extraction-note {
  margin: 0 0 10px;
  padding: 8px 10px;
  border: 1px solid #e4e7ec;
  border-radius: 7px;
  background: #f8fafc;
  color: #64748B;
  font-size: 11px;
  line-height: 1.4;
}

@media (max-width: 900px) {
  .link-add-panel {
    margin-top: 0;
  }

  .link-add-form {
    flex-wrap: wrap;
  }

  .link-add-form input {
    flex-basis: 100%;
    height: 38px;
  }

  .remove-link-button {
    font-size: 10px;
  }

  .story-publisher {
    font-size: 11px;
  }
}


/* v6.1 - saved-link remove action as a bin icon */
.news-row .story-desc {
  position: relative;
}

.remove-link-button {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #98A2B3;
  cursor: pointer;
  z-index: 3;
}

.remove-link-button:hover,
.remove-link-button:focus-visible {
  background: #FEF3F2;
  color: #B42318;
  outline: none;
}

.remove-link-icon {
  width: 15px;
  height: 15px;
  fill: currentColor;
  pointer-events: none;
}

/* Keep long descriptions clear of the icon. */
.news-row .story-desc:has(.remove-link-button) {
  padding-right: 44px;
}

@media (max-width: 900px) {
  .news-row {
    position: relative;
  }

  .news-row .story-desc {
    position: static;
  }

  .remove-link-button {
    top: 8px;
    right: 8px;
    transform: none;
    width: 30px;
    height: 30px;
  }

  .remove-link-icon {
    width: 16px;
    height: 16px;
  }

  .news-row .story-desc:has(.remove-link-button) {
    padding-right: 0;
  }

  /* Keep the mobile title clear of the top-right bin icon. */
  .news-row:has(.remove-link-button) .story-title-cell {
    padding-right: 42px;
  }
}


/* v6.2 - My articles + numbered Summary points */
.ai-number-list {
  margin: 5px 0 12px;
  padding-left: 25px;
}

.ai-number-list li {
  margin: 0 0 5px;
  padding-left: 3px;
}

.ai-number-list li:last-child {
  margin-bottom: 0;
}

/* Summary number markers use the requested accent. */
.ai-number-list li::marker {
  color: #D96666;
  font-weight: 850;
}

.my-articles-empty-row td {
  padding-top: 34px !important;
  padding-bottom: 34px !important;
  color: #64748B;
  font-size: 14px;
  font-weight: 650;
  text-align: center;
}

@media (max-width: 900px) {
  .ai-number-list {
    margin: 6px 0 14px;
    padding-left: 28px;
  }

  .ai-number-list li {
    margin-bottom: 7px;
  }

  .my-articles-empty-row td {
    padding-top: 28px !important;
    padding-bottom: 28px !important;
    font-size: 16px;
  }
}


/* v6.3 - consistent AI list marker accent */
.ai-bullet-list li::marker,
.ai-number-list li::marker {
  color: #D96666;
  font-weight: 850;
}


/* v6.4 - My articles: publication date + thumbnail-aligned remove icon */

/* My articles thumbnails start at the top of the row content so the right-side
   date/bin can align precisely with their top and bottom edges. */
.news-row:has(.article-date) .story-image-cell {
  vertical-align: top !important;
}

.article-date {
  position: absolute;
  top: 12px;
  right: 10px;
  color: #64748B;
  font-size: 10px;
  line-height: 1;
  font-weight: 750;
  white-space: nowrap;
  z-index: 2;
}

/* Thumbnail is 58px tall and begins at the cell's 12px top padding.
   12 + 58 - 28 = 42px, so the 28px bin ends exactly at thumbnail bottom. */
.news-row:has(.article-date) .remove-link-button {
  top: 42px;
  right: 10px;
  bottom: auto;
  transform: none;
}

/* Keep description text away from the right-side date/bin rail. */
.news-row .story-desc:has(.article-date) {
  padding-right: 112px !important;
}

@media (max-width: 900px) {
  /* Mobile cards keep the controls cleanly on the right without covering text. */
  .news-row:has(.article-date) {
    position: relative;
  }

  .news-row:has(.article-date) .article-date {
    top: 10px;
    right: 10px;
    font-size: 11px;
  }

  .news-row:has(.article-date) .remove-link-button {
    top: 38px;
    right: 8px;
    transform: none;
  }

  .news-row .story-desc:has(.article-date) {
    padding-right: 0 !important;
  }

  .news-row:has(.article-date) .story-title-cell {
    padding-right: 94px !important;
  }
}


/* v12.3 — save/remove media actions use the thumbnail rail rather than absolute card positioning. */
.save-article-button,
.remove-link-button.story-media-action {
  position: static !important;
  inset: auto !important;
  transform: none !important;
}

/* v6.7 - guaranteed solid saved bookmark */
.save-article-icon .bookmark-outline {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linejoin: round;
}

.save-article-icon .bookmark-solid {
  display: none;
  fill: currentColor;
}

.save-article-button.is-saved .bookmark-outline {
  display: none;
}

.save-article-button.is-saved .bookmark-solid {
  display: block;
  fill: #1D4ED8;
}

.save-article-button.is-saved,
.save-article-button:disabled.is-saved {
  background: #EEF2FF;
  color: #1D4ED8;
  opacity: 1;
}


/* v6.8 - fixed icon header controls + semantic source labels */
.top-button.icon-button {
  width: 32px;
  min-width: 32px;
  height: 32px;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.top-button.icon-button svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  pointer-events: none;
}

.top-button.icon-button:hover,
.top-button.icon-button:focus-visible {
  color: #1D4ED8;
}

.source-pill {
  width: auto;
  max-width: none;
}

@media (max-width: 900px) {
  .top-button.icon-button {
    width: 34px;
    min-width: 34px;
    height: 34px;
  }

  .top-button.icon-button svg {
    width: 17px;
    height: 17px;
  }
}


/* v6.11 - on-demand source refresh counters */
.source-pill {
  position: relative;
}

.source-count {
  position: absolute !important;
  top: -7px;
  right: -6px;
  margin-left: 0 !important;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: #64748B;
  color: #fff;
  border: 2px solid #f7f8fa;
  box-sizing: border-box;
  line-height: 14px;
  z-index: 4;
}

.source-pill.active .source-count {
  background: #1D4ED8;
}

.source-count[hidden] {
  display: none !important;
}

.source-count.is-loading {
  width: 18px;
  min-width: 18px;
  padding: 0;
}

.source-count-spinner {
  width: 8px;
  height: 8px;
  display: block;
  border: 1.5px solid rgba(255,255,255,.45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: source-count-spin .75s linear infinite;
}

@keyframes source-count-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .source-count-spinner { animation: none; }
}


/* v6.14 - user-defined RSS / Atom sources */
.custom-source-buttons {
  display: contents;
}

.custom-rss-glyph {
  font-size: 10px;
  opacity: .72;
}

.add-source-button {
  background: #fff !important;
  color: #1D4ED8 !important;
  border-color: #b8c7ea !important;
}

.add-source-button:hover {
  border-color: #1D4ED8 !important;
}

.source-add-panel {
  margin: -8px 0 14px;
  padding: 10px;
  border: 1px solid #dfe4ec;
  border-radius: 8px;
  background: #f8fafc;
}

.source-add-form {
  display: grid;
  grid-template-columns: minmax(240px, 1.5fr) minmax(150px, .8fr) auto auto;
  align-items: center;
  gap: 7px;
}

.source-add-form input {
  min-width: 0;
  height: 32px;
  padding: 6px 11px;
}

.source-add-form button,
.custom-source-setting-actions button {
  min-height: 30px;
  border: 1px solid #d5dae2;
  border-radius: 999px;
  background: #fff;
  color: #344054;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 800;
}

#sourceAddSubmitBtn {
  background: #1D4ED8;
  border-color: #1D4ED8;
  color: #fff;
}

.source-add-message {
  margin-top: 7px;
  color: #64748B;
  font-size: 12px;
}

.source-add-message.error-text {
  color: #b42318;
}

.custom-sources-settings-list {
  display: grid;
  gap: 8px;
}

.custom-sources-settings-empty {
  color: #98A2B3;
  font-size: 12px;
}

.custom-source-setting-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid #eaecf0;
}

.custom-source-setting-main {
  flex: 1 1 auto;
  min-width: 0;
}

.custom-source-name-input {
  width: min(360px, 100%);
  height: 30px;
  padding: 5px 9px;
}

.custom-source-url {
  margin-top: 4px;
  color: #98A2B3;
  font-size: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.custom-source-setting-actions {
  display: flex;
  gap: 6px;
  flex: 0 0 auto;
}

.custom-source-remove:hover {
  color: #B42318;
  border-color: #F3B7B1;
}

@media (max-width: 900px) {
  .source-add-form {
    grid-template-columns: 1fr 1fr;
  }

  #sourceUrlInput,
  #sourceNameInput {
    grid-column: 1 / -1;
    height: 40px;
    font-size: 16px;
  }

  .custom-source-setting-item {
    align-items: stretch;
    flex-direction: column;
  }

  .custom-source-setting-actions {
    align-self: flex-start;
  }
}


/* v6.17 - source settings polish */
.source-count,
.custom-source-count {
  display: none !important;
}

.source-favicon-wrap,
.settings-source-favicon-wrap {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  overflow: hidden;
}

.source-favicon,
.settings-source-favicon {
  width: 16px;
  height: 16px;
  object-fit: contain;
  display: block;
}

.source-favicon-fallback,
.settings-source-favicon-fallback {
  color: #64748B;
  font-size: 9px;
  line-height: 1;
}

.custom-source-pill {
  gap: 6px;
}

.custom-source-setting-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.custom-source-order-actions {
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-self: center;
}

.custom-source-move {
  width: 26px;
  height: 24px;
  min-height: 24px !important;
  padding: 0 !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  line-height: 1 !important;
}

.custom-source-move:disabled {
  opacity: .28;
  cursor: default;
}

.custom-source-setting-name-line {
  display: flex;
  align-items: center;
  gap: 7px;
}

.custom-source-setting-name-line .custom-source-name-input {
  flex: 1 1 auto;
  min-width: 0;
}

.custom-source-setting-actions {
  align-items: center;
}

.custom-source-row-status {
  min-width: 68px;
  color: #15803D;
  font-size: 11px;
  font-weight: 800;
  opacity: 0;
  transition: opacity .18s ease;
  white-space: nowrap;
  text-align: right;
}

.custom-source-row-status.visible {
  opacity: 1;
}

@media (max-width: 900px) {
  .custom-source-setting-item {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
  }

  .custom-source-setting-actions {
    grid-column: 1 / -1;
    padding-left: 36px;
  }

  .custom-source-row-status {
    text-align: left;
  }
}


/* v6.18 - Summary numbering must continue 1, 2, 3... */
.ai-number-list {
  list-style-type: decimal !important;
}

.ai-number-list > li {
  display: list-item !important;
}


/* v6.19 - vertically center source-tab favicon, label and pill contents */
.source-pill,
.custom-source-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center;
  vertical-align: middle;
  line-height: 1 !important;
}

.source-favicon-wrap,
.custom-source-pill .source-favicon-wrap {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: center !important;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  line-height: 1;
  margin: 0;
}

.source-favicon,
.custom-source-pill .source-favicon {
  display: block;
  width: 16px;
  height: 16px;
  margin: 0;
  object-fit: contain;
  align-self: center;
}

.source-favicon-fallback,
.custom-source-pill .source-favicon-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  line-height: 1;
  margin: 0;
}

.custom-source-label,
.source-pill > span:not(.source-favicon-wrap) {
  display: inline-flex;
  align-items: center;
  line-height: 1 !important;
  margin: 0;
}

.source-pill img {
  vertical-align: middle;
}


/* v6.20 - squarer source tabs + favicon fallback fix */
.source-pill,
.custom-source-pill,
.add-link-button,
.add-source-button {
  border-radius: 8px !important;
}

/* The hidden attribute must win over the generic inline-flex fallback styling.
   Without this, the fallback occupied a tiny white/blank sliver beside the favicon. */
.source-favicon-fallback[hidden],
.settings-source-favicon-fallback[hidden] {
  display: none !important;
}

.source-favicon-wrap,
.settings-source-favicon-wrap {
  overflow: visible !important;
  background: transparent !important;
}

.custom-source-pill {
  gap: 5px !important;
}

.source-favicon,
.custom-source-pill .source-favicon {
  width: 16px;
  height: 16px;
  border-radius: 2px;
}

.source-favicon-fallback,
.settings-source-favicon-fallback {
  margin: 0 !important;
  padding: 0 !important;
}


/* v7.0 multi-user authentication */
.auth-login-card {
  max-width: 460px;
}

.google-login-button {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid #cfd6df;
  border-radius: 10px;
  background: #fff;
  color: #182238;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.google-login-button:hover { background: #f7f8fa; }
.google-login-button svg { width: 18px; height: 18px; }
.google-login-button svg path:nth-child(1) { fill: #4285f4; }
.google-login-button svg path:nth-child(2) { fill: #34a853; }
.google-login-button svg path:nth-child(3) { fill: #fbbc05; }
.google-login-button svg path:nth-child(4) { fill: #ea4335; }

.auth-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0;
  color: #768091;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.auth-divider::before,
.auth-divider::after {
  content: "";
  height: 1px;
  flex: 1;
  background: #e1e5ea;
}

.email-login-form {
  display: grid;
  gap: 8px;
}
.email-login-form input {
  width: 100%;
  box-sizing: border-box;
  min-height: 42px;
  padding: 9px 11px;
  border: 1px solid #cfd6df;
  border-radius: 8px;
  background: #fff;
  color: #111827;
  font: inherit;
}

.login-actions-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-top: 5px;
}
.login-actions-row button {
  min-height: 42px;
  border-radius: 8px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
#loginSubmitBtn {
  border: 1px solid #1d4ed8;
  background: #1d4ed8;
  color: #fff;
}
.secondary-auth-button {
  border: 1px solid #cfd6df;
  background: #fff;
  color: #182238;
}
.login-message {
  margin-top: 12px !important;
  color: #315b3c;
  font-size: 13px;
}

.account-info-line {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  color: #243044;
  font-weight: 600;
}
.account-plan-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: #eef2ff;
  color: #1d4ed8;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
}

@media (max-width: 620px) {
  .login-actions-row { grid-template-columns: 1fr; }
}


/* v7.1 private beta login */
.login-actions-row.login-actions-single {
  grid-template-columns: 1fr;
}

.login-beta-note {
  margin: 13px 0 0;
  color: #768091;
  font-size: 12px;
  line-height: 1.45;
  text-align: center;
}


/* v7.2 - brand-new accounts show only source/article creation controls */
#viewFilter.hidden,
#newsTableWrap.hidden {
  display: none !important;
}


/* v7.3 - mobile story text matches AI response size */
@media (max-width: 900px) {
  .story-title,
  .news-row.checked .story-title,
  .news-row.checked.selected .story-title,
  .news-row.checked:not(.selected) .story-title {
    font-size: 20px !important;
    line-height: 1.34 !important;
  }

  .story-desc,
  .news-row.selected .story-desc,
  .news-row.checked .story-desc,
  .news-row.checked.selected .story-desc,
  .news-row.checked:not(.selected) .story-desc {
    font-size: 20px !important;
    line-height: 1.45 !important;
  }
}


/* v8.0 — Stitch-inspired mobile redesign, preserving desktop */
.mobile-brand,
.mobile-bottom-nav,
.mobile-saved-toolbar,
.mobile-sources-panel,
.all-sources-overlay,
.account-menu-button,
.account-menu,
.story-title-mobile-text,
.saved-mobile-meta,
.story-source-name,
.all-sources-trigger {
  display: none;
}

.text-size-settings-row .settings-label-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
}
.profile-saved-note {
  color: #1D4ED8;
  font-size: 11px;
  font-weight: 800;
}
.text-size-control {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 5px;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  background: #F8FAFC;
}
.text-size-choice {
  min-height: 58px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #475569;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 12px;
  font-weight: 750;
}
.text-size-choice strong { font-size: 18px; line-height: 1; }
.text-size-choice.active { background: #1D4ED8; color: #fff; }
.settings-help { margin-top: 8px; color: #64748B; font-size: 12px; line-height: 1.4; }

.story-title-wrap { display: inline; }
.story-source-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  min-height: 22px;
  margin-left: 3px;
  text-decoration: none;
  vertical-align: middle;
  color: #64748B;
  border-radius: 7px;
}
.story-source-link:hover,
.story-source-link:focus-visible { color: #1D4ED8; background: #EEF2FF; outline: none; }

@media (max-width: 900px) {
  body[data-text-size="standard"] {
    --mobile-title-size: 20px;
    --mobile-body-size: 20px;
    --mobile-ai-size: 20px;
    --mobile-ui-size: 15px;
    --mobile-meta-size: 13px;
  }
  body[data-text-size="large"] {
    --mobile-title-size: 22px;
    --mobile-body-size: 22px;
    --mobile-ai-size: 22px;
    --mobile-ui-size: 16px;
    --mobile-meta-size: 14px;
  }
  body[data-text-size="extra-large"] {
    --mobile-title-size: 24px;
    --mobile-body-size: 24px;
    --mobile-ai-size: 24px;
    --mobile-ui-size: 17px;
    --mobile-meta-size: 15px;
  }

  html, body { background: #F8FAFC; }
  body { overflow-x: hidden; }
  body.sheet-open { overflow: hidden; }

  .shell {
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    min-height: 100vh;
    box-shadow: none;
    background: #F8FAFC;
  }

  .topbar {
    position: sticky;
    top: 0;
    z-index: 80;
    min-height: 64px;
    padding: 10px 14px;
    gap: 8px;
    background: rgba(255,255,255,.97);
    border-bottom: 1px solid #E2E8F0;
    backdrop-filter: blur(12px);
  }
  .brand { display: none; }
  .mobile-brand {
    display: block;
    color: #0F172A;
    font-size: 25px;
    font-weight: 900;
    letter-spacing: -.04em;
    line-height: 1;
  }
  .top-actions { gap: 3px; margin-left: auto; }
  .updated { display: none; }
  .ui-language-control { height: 34px; border-color: #E2E8F0; background: #F8FAFC; }
  .ui-language-label { display: none; }
  .ui-language-choice { height: 32px; min-width: 34px; padding: 0 8px; font-size: 13px; }
  .ui-language-choice:first-of-type { border-left: 0; }
  .top-button.icon-button,
  .account-menu-button {
    width: 40px;
    min-width: 40px;
    height: 40px;
    padding: 0 !important;
    border: 0;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: #475569;
  }
  .top-button.icon-button svg { width: 20px; height: 20px; }
  #logoutBtn { display: none !important; }
  .account-menu-button:not(.hidden) {
    display: inline-flex !important;
    background: #EEF2FF;
    color: #1D4ED8;
    font-size: 13px;
    font-weight: 900;
  }
  .account-menu {
    position: fixed;
    top: 58px;
    right: 12px;
    z-index: 120;
    width: min(280px, calc(100vw - 24px));
    padding: 10px;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 16px 42px rgba(15,23,42,.16);
  }
  .account-menu:not(.hidden) { display: block; }
  .account-menu-email { padding: 8px 10px 11px; color: #475569; font-size: 13px; overflow-wrap: anywhere; }
  .account-menu-logout { width: 100%; min-height: 42px; border: 0; border-radius: 8px; background: #F8FAFC; color: #0F172A; font-weight: 800; text-align: left; padding: 0 12px; }

  .dashboard { padding: 0 0 78px; }
  .sourcebar {
    min-height: 0;
    margin: 0;
    padding: 10px 14px 9px;
    display: block;
    border: 0;
    border-bottom: 1px solid #E2E8F0;
    border-radius: 0;
    background: #fff;
  }
  .sourcebar.mobile-section-hidden,
  #newsTableWrap.mobile-section-hidden,
  #status.mobile-section-hidden { display: none !important; }
  .source-list {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    padding: 1px 1px 4px;
    white-space: nowrap;
  }
  .source-list::-webkit-scrollbar { display: none; }
  #sourceLinksBtn,
  #addLinkBtn,
  #addSourceBtn { display: none !important; }
  .custom-source-buttons { display: contents; }
  .source-pill,
  .custom-source-pill,
  .all-sources-trigger {
    flex: 0 0 auto;
    min-height: 42px;
    padding: 0 13px;
    border: 1px solid transparent !important;
    border-radius: 18px !important;
    background: #F1F5F9 !important;
    color: #0F172A !important;
    font-size: var(--mobile-ui-size);
    font-weight: 800;
    gap: 7px !important;
  }
  .custom-source-pill.active {
    background: #1D4ED8 !important;
    color: #fff !important;
    border-color: #1D4ED8 !important;
  }
  .custom-source-pill.is-default-source:not(.active) { border-color: #D96666 !important; }
  .source-favicon-wrap { width: 19px; height: 19px; flex-basis: 19px; border-radius: 4px; overflow: hidden !important; }
  .source-favicon { width: 18px !important; height: 18px !important; }
  .source-favicon-fallback { width: 18px !important; height: 18px !important; color: currentColor; }
  .all-sources-trigger { display: inline-flex !important; width: 46px; padding: 0; font-size: 19px; letter-spacing: .08em; }

  .view-filter {
    width: fit-content;
    margin: 8px 0 0 auto;
    padding: 3px;
    gap: 2px;
    border-radius: 9px;
    background: #F1F5F9;
  }
  .filter-button,
  .filter-button.active {
    min-height: 34px;
    padding: 0 12px;
    border: 0 !important;
    border-radius: 7px !important;
    background: transparent !important;
    color: #64748B !important;
    font-size: 13px;
    font-weight: 800;
  }
  .filter-button.active { background: #fff !important; color: #1D4ED8 !important; box-shadow: 0 1px 4px rgba(15,23,42,.08); }

  .mobile-saved-toolbar {
    min-height: 58px;
    padding: 9px 14px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #fff;
    border-bottom: 1px solid #E2E8F0;
  }
  .mobile-saved-toolbar:not(.hidden) { display: flex; }
  .mobile-section-title { font-size: 23px; font-weight: 900; color: #0F172A; letter-spacing: -.02em; }
  .mobile-primary-compact,
  .mobile-add-rss {
    min-height: 42px;
    padding: 0 14px;
    border: 0;
    border-radius: 10px;
    background: #1D4ED8;
    color: #fff;
    font-size: var(--mobile-ui-size);
    font-weight: 850;
  }

  .table-wrap { margin: 0; border: 0; border-radius: 0; background: transparent; overflow: visible; }
  .news-table { display: block; width: 100%; border: 0; background: transparent; }
  .news-table tbody { display: block; }
  .news-table thead { display: none; }
  .day-row { display: block; }
  .day-row td { display: block; padding: 13px 15px 9px !important; border: 0 !important; background: #F8FAFC !important; }
  .day-heading { color: #64748B; font-size: 12px; letter-spacing: .09em; text-transform: uppercase; font-weight: 900; }

  .news-row {
    position: relative;
    display: grid !important;
    grid-template-columns: minmax(0,1fr) 104px;
    grid-template-areas:
      "meta meta"
      "title image"
      "desc image";
    gap: 0 10px;
    width: 100%;
    padding: 15px 14px 18px;
    border: 0 !important;
    border-bottom: 1px solid #E2E8F0 !important;
    background: #fff;
  }
  .news-row.checked:not(.selected) { background: #EFEFFE !important; }
  .news-row.selected { background: #fff !important; box-shadow: inset 3px 0 0 #1D4ED8; }
  .news-row > td { display: block !important; width: auto !important; border: 0 !important; }
  .story-meta {
    grid-area: meta;
    padding: 0 84px 7px 0 !important;
    display: flex !important;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    color: #64748B;
    font-size: var(--mobile-meta-size) !important;
    line-height: 1.25;
  }
  .story-time { font-size: inherit !important; line-height: inherit !important; font-weight: 800; color: inherit; }
  .story-source-name { display: inline; font-size: inherit; font-weight: 750; color: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 35vw; }
  .story-source-name::before { content: "· "; }
  .story-row-tools { display: flex; align-items: center; gap: 7px; margin-left: 2px; }
  .read-label { display: none; }
  .read-indicator { display: inline-flex; align-items: center; justify-content: center; width: 12px; height: 12px; }
  .read-indicator::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #1D4ED8; }
  .read-indicator.is-read::before { width: 11px; height: 11px; background: transparent; border: 2px solid #94A3B8; box-sizing: border-box; }
  .quick-ask {
    min-height: 25px;
    padding: 0 8px !important;
    border: 0 !important;
    border-radius: 5px !important;
    background: transparent !important;
    color: #64748B !important;
    font-size: 11px !important;
    font-weight: 850 !important;
  }
  .quick-ask.has-ai-response { background: #FDEBEC !important; color: #D96666 !important; }

  .story-image-cell {
    grid-area: image;
    display: flex !important;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 7px 0 0 !important;
  }
  .story-image,
  .story-image-placeholder { width: 96px !important; height: 78px !important; border-radius: 7px !important; object-fit: cover; background: #E2E8F0; }
  .story-mobile-image { display: none !important; }
  .story-title-cell { grid-area: title; padding: 7px 0 0 !important; min-width: 0; }
  .story-title-wrap { display: block; padding-right: 2px; }
  .story-title-desktop-link { display: none !important; }
  .story-title-mobile-text {
    display: inline;
    color: #0F172A !important;
    font-size: var(--mobile-title-size) !important;
    line-height: 1.34 !important;
    font-weight: 900 !important;
    letter-spacing: -.015em;
    cursor: pointer;
  }
  .news-row.checked:not(.selected) .story-title-mobile-text { color: #475569 !important; font-weight: 750 !important; }
  .story-source-link {
    position: absolute;
    top: 9px;
    right: 9px;
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    margin: 0;
    color: #64748B;
    font-size: 20px;
    touch-action: manipulation;
  }
  .save-article-button {
    top: 9px !important;
    right: 49px !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 8px !important;
  }
  .save-article-icon { width: 19px !important; height: 19px !important; }
  .story-publisher { margin-top: 5px; font-size: 12px; color: #64748B; }
  .saved-mobile-meta { display: block; margin-top: 6px; color: #64748B; font-size: 12px; line-height: 1.35; }

  .story-desc {
    grid-area: desc;
    padding: 8px 0 0 !important;
    position: static !important;
    color: #475569 !important;
    font-size: var(--mobile-body-size) !important;
    line-height: 1.45 !important;
  }
  .story-desc-text { font-size: inherit !important; line-height: inherit !important; }
  .news-row:not(.selected) .story-desc-text:not(.expanded) { -webkit-line-clamp: 3 !important; line-clamp: 3 !important; max-height: 4.35em !important; }
  .story-desc-toggle { font-size: 13px !important; margin-top: 5px; color: #1D4ED8; }
  .article-date { display: none !important; }
  .remove-link-button { top: 9px !important; right: 49px !important; width: 40px !important; height: 40px !important; }
  .news-row:has(.remove-link-button) .story-title-cell,
  .news-row:has(.article-date) .story-title-cell { padding-right: 0 !important; }

  .analysis-row { display: block !important; width: 100%; }
  .analysis-row > td { display: block !important; padding: 0 !important; border: 0 !important; }
  .analysis-panel {
    margin: 0 !important;
    padding: 15px 14px 20px !important;
    border: 0 !important;
    border-bottom: 1px solid #E2E8F0 !important;
    border-radius: 0 !important;
    background: #fff !important;
    font-size: var(--mobile-ai-size);
  }
  .analysis-topline { gap: 9px !important; margin: 0 0 12px !important; }
  .analysis-actions { display: grid !important; grid-template-columns: 1fr 1fr; gap: 7px !important; width: 100%; }
  .analysis-button,
  .ask-submit {
    min-height: 44px !important;
    border-radius: 9px !important;
    font-size: var(--mobile-ui-size) !important;
    font-weight: 850 !important;
  }
  .analysis-button.primary-action { background: #1D4ED8 !important; border-color: #1D4ED8 !important; color: #fff !important; }
  .ask-form { display: grid !important; grid-template-columns: auto minmax(0,1fr) auto !important; width: 100%; gap: 6px !important; }
  .ask-input { min-height: 44px !important; font-size: 16px !important; border-radius: 9px !important; }
  .ai-language-control { min-height: 44px; }
  .analysis-history,
  .analysis-result,
  .analysis-section-preview,
  .analysis-section-body,
  .ask-answer-preview,
  .ask-answer-body,
  .analysis-result .answer { font-size: var(--mobile-ai-size) !important; line-height: 1.5 !important; }
  .analysis-section-header .result-label { font-size: 16px !important; }
  .analysis-preview-more,
  .ask-preview-more { font-size: max(14px, calc(var(--mobile-ai-size) - 4px)) !important; }

  .settings-panel {
    position: fixed;
    top: 64px;
    right: 0;
    bottom: 70px;
    left: 0;
    z-index: 95;
    margin: 0 !important;
    padding: 16px 14px 24px !important;
    overflow-y: auto;
    border: 0 !important;
    border-radius: 0 !important;
    background: #F8FAFC !important;
  }
  .settings-panel-head { position: sticky; top: -16px; z-index: 2; margin: -16px -14px 14px !important; padding: 14px; background: #fff; border-bottom: 1px solid #E2E8F0; }
  .settings-title { font-size: 24px !important; }
  .settings-subtitle { font-size: 13px !important; }
  .settings-close { min-height: 40px; border-radius: 9px !important; }
  .settings-row { margin: 0 0 12px !important; padding: 14px !important; border: 1px solid #E2E8F0 !important; border-radius: 12px !important; background: #fff; }
  .custom-source-settings-row { display: none !important; }
  .text-size-control { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .text-size-choice { min-height: 68px; font-size: 12px; }
  .text-size-choice strong { font-size: 21px; }

  .link-add-panel,
  .source-add-panel {
    margin: 0 !important;
    padding: 14px !important;
    border: 0 !important;
    border-bottom: 1px solid #E2E8F0 !important;
    border-radius: 0 !important;
    background: #fff !important;
  }
  .link-add-form,
  .source-add-form { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .link-add-form input,
  .source-add-form input { grid-column: 1/-1; height: 46px !important; font-size: 16px !important; border-radius: 10px !important; }
  .link-add-form button,
  .source-add-form button { min-height: 44px !important; border-radius: 9px !important; font-size: 14px !important; }

  .mobile-sources-panel:not(.hidden) {
    display: block;
    padding: 18px 14px 24px;
    background: #F8FAFC;
  }
  .mobile-sources-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
  .mobile-sources-eyebrow { color: #1D4ED8; font-size: 11px; font-weight: 900; letter-spacing: .08em; }
  .mobile-sources-heading h2 { margin: 3px 0 4px; color: #0F172A; font-size: 28px; line-height: 1.05; letter-spacing: -.03em; }
  .mobile-sources-heading p { margin: 0; max-width: 34em; color: #64748B; font-size: 14px; line-height: 1.45; }
  .mobile-sources-list { display: grid; gap: 9px; }
  .mobile-sources-empty { padding: 24px 12px; text-align: center; color: #64748B; font-size: 15px; }
  .mobile-source-item {
    display: grid;
    grid-template-columns: 42px 32px 28px minmax(0,1fr) 38px 38px 38px;
    align-items: center;
    gap: 7px;
    padding: 10px;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    background: #fff;
  }
  .mobile-source-order { display: grid; gap: 3px; }
  .mobile-source-up,
  .mobile-source-down,
  .mobile-default-radio,
  .mobile-source-rename,
  .mobile-source-remove {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border: 0;
    border-radius: 8px;
    background: #EEF2FF;
    color: #334155;
    font-size: 17px;
    font-weight: 900;
  }
  .mobile-source-up,
  .mobile-source-down { width: 42px; height: 32px; }
  .mobile-source-up:disabled,
  .mobile-source-down:disabled { opacity: .28; }
  .mobile-source-position { display: flex; align-items: center; justify-content: center; width: 32px; height: 38px; border-radius: 7px; background: #EEF2FF; color: #1D4ED8; font-size: 13px; font-weight: 900; }
  .mobile-source-favicon-wrap { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; overflow: hidden; border-radius: 5px; }
  .mobile-source-favicon { width: 24px; height: 24px; object-fit: contain; }
  .mobile-source-main { min-width: 0; }
  .mobile-source-name-line { display: flex; align-items: center; gap: 6px; min-width: 0; }
  .mobile-source-name-line strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #0F172A; font-size: 15px; }
  .mobile-default-badge { flex: 0 0 auto; padding: 2px 6px; border-radius: 999px; background: #FDEBEC; color: #9F3A40; font-size: 10px; font-weight: 850; }
  .mobile-source-url { margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #64748B; font-size: 11px; }
  .mobile-default-radio { background: transparent; border: 2px solid #94A3B8; border-radius: 50%; width: 24px; min-width: 24px; height: 24px; margin: 0 auto; padding: 3px; }
  .mobile-default-radio span { display: block; width: 100%; height: 100%; border-radius: 50%; }
  .mobile-default-radio.active { border-color: #1D4ED8; }
  .mobile-default-radio.active span { background: #1D4ED8; }
  .mobile-source-rename,
  .mobile-source-remove { background: transparent; color: #475569; }
  .mobile-source-remove { color: #94A3B8; }

  .mobile-bottom-nav {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 90;
    height: 70px;
    padding: 5px max(8px, env(safe-area-inset-right)) max(5px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    display: grid;
    grid-template-columns: repeat(3,1fr);
    border-top: 1px solid #E2E8F0;
    background: rgba(255,255,255,.98);
    backdrop-filter: blur(12px);
  }
  .mobile-nav-button { border: 0; background: transparent; color: #475569; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 12px; font-weight: 850; border-radius: 10px; }
  .mobile-nav-button.active { color: #1D4ED8; }
  .mobile-nav-icon { font-size: 22px; line-height: 1; }

  .all-sources-overlay:not(.hidden) { display: block; position: fixed; inset: 0; z-index: 110; }
  .all-sources-backdrop { position: absolute; inset: 0; width: 100%; border: 0; background: rgba(15,23,42,.36); }
  .all-sources-sheet {
    position: absolute;
    right: 0;
    bottom: 70px;
    left: 0;
    max-height: min(76vh, 720px);
    display: grid;
    grid-template-rows: auto auto auto minmax(0,1fr) auto;
    padding: 8px 14px 0;
    border-radius: 18px 18px 0 0;
    background: #fff;
    box-shadow: 0 -14px 40px rgba(15,23,42,.18);
  }
  .sheet-grabber { width: 58px; height: 5px; margin: 0 auto 10px; border-radius: 99px; background: #D8E1F8; }
  .all-sources-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .all-sources-title-row { display: flex; align-items: center; gap: 9px; min-width: 0; }
  .all-sources-title-row h2 { margin: 0; color: #0F172A; font-size: 25px; letter-spacing: -.025em; }
  .source-total-badge { padding: 4px 9px; border-radius: 999px; background: #EEF2FF; color: #1D4ED8; font-size: 12px; font-weight: 900; white-space: nowrap; }
  .sheet-close { width: 42px; height: 42px; border: 0; border-radius: 10px; background: #F1F5F9; color: #475569; font-size: 28px; line-height: 1; }
  .all-sources-search { width: 100%; height: 48px; margin: 12px 0; border: 0; border-radius: 10px; background: #F1F5F9; color: #0F172A; font-size: 16px; padding: 0 14px; }
  .all-sources-list { overflow-y: auto; overscroll-behavior: contain; padding-bottom: 8px; }
  .all-source-row { width: 100%; min-height: 48px; display: grid; grid-template-columns: 30px minmax(0,1fr) 30px; align-items: center; gap: 9px; margin-bottom: 6px; padding: 6px 10px; border: 1px solid transparent; border-radius: 9px; background: #fff; color: #0F172A; text-align: left; }
  .all-source-row.active { border-color: #1D4ED8; background: #EEF2FF; color: #1D4ED8; }
  .picker-favicon-wrap { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; overflow: hidden; border-radius: 5px; }
  .picker-favicon { width: 24px; height: 24px; object-fit: contain; }
  .picker-favicon-fallback { color: #64748B; font-size: 12px; }
  .all-source-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; font-weight: 800; }
  .all-source-check { text-align: center; font-size: 20px; font-weight: 900; }
  .all-sources-empty { padding: 28px 12px; text-align: center; color: #64748B; }
  .all-sources-actions { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 8px; padding: 10px 0 12px; border-top: 1px solid #E2E8F0; background: #fff; }
  .picker-add-rss,
  .picker-manage-sources { min-height: 46px; border-radius: 9px; font-size: 15px; font-weight: 850; }
  .picker-add-rss { padding: 0 18px; border: 0; background: #1D4ED8; color: #fff; }
  .picker-manage-sources { border: 1px solid #CBD5E1; background: #fff; color: #0F172A; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 12px; }
}

@media (max-width: 620px) {
  .mobile-source-item {
    grid-template-columns: 38px 28px 24px minmax(0,1fr) 30px 34px 34px;
    gap: 5px;
    padding: 9px 7px;
  }
  .mobile-source-up,
  .mobile-source-down { width: 38px; }
  .mobile-source-rename,
  .mobile-source-remove { width: 34px; min-width: 34px; }
  .mobile-source-name-line strong { font-size: 14px; }
  .mobile-source-url { font-size: 10px; }
}

/* v8.0 readability scaling refinements */
@media (max-width: 900px) {
  .day-heading { font-size: var(--mobile-meta-size) !important; }
  .filter-button, .filter-button.active { font-size: max(13px, calc(var(--mobile-ui-size) - 2px)) !important; }
  .story-publisher, .saved-mobile-meta { font-size: var(--mobile-meta-size) !important; }
  .mobile-source-name-line strong, .all-source-name { font-size: var(--mobile-ui-size) !important; }
  .mobile-source-url { font-size: max(11px, calc(var(--mobile-meta-size) - 2px)) !important; }
  .mobile-nav-button { font-size: max(12px, calc(var(--mobile-ui-size) - 3px)) !important; }
  .mobile-sources-heading p, .mobile-sources-empty { font-size: max(14px, calc(var(--mobile-ui-size) - 1px)) !important; }
}


/* v8.1 — fix legacy mobile grid rules overriding the Stitch story-card layout */
@media (max-width: 900px) {
  .news-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 104px !important;
    grid-template-areas:
      "meta meta"
      "title image"
      "desc image" !important;
    column-gap: 10px !important;
    row-gap: 0 !important;
    align-items: start !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 15px 14px 18px !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-top: 0 !important;
    border-bottom: 1px solid #E2E8F0 !important;
    border-radius: 0 !important;
  }

  .news-row.selected {
    margin: 0 !important;
    padding: 15px 14px 18px !important;
    border-radius: 0 !important;
    box-shadow: inset 3px 0 0 #1D4ED8 !important;
  }

  .story-meta {
    grid-area: meta !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    align-self: auto !important;
    justify-content: flex-start !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 84px 7px 0 !important;
    gap: 6px !important;
  }

  .story-row-tools {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    margin: 0 0 0 2px !important;
    gap: 7px !important;
  }

  .story-mobile-image {
    display: none !important;
  }

  .story-image-cell {
    grid-area: image !important;
    display: flex !important;
    width: auto !important;
    align-items: flex-start !important;
    justify-content: flex-end !important;
    padding: 7px 0 0 !important;
  }

  .story-title-cell {
    grid-area: title !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 7px 0 0 !important;
  }

  .story-desc {
    grid-area: desc !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 8px 0 0 !important;
  }
}

/* The old <=520px layout had an important 98px left metadata column.
   Keep the new editorial card layout on small phones too. */
@media (max-width: 520px) {
  .news-row {
    grid-template-columns: minmax(0, 1fr) 96px !important;
    grid-template-areas:
      "meta meta"
      "title image"
      "desc image" !important;
    column-gap: 10px !important;
  }

  .story-meta {
    width: auto !important;
  }

  .story-image,
  .story-image-placeholder {
    width: 90px !important;
    height: 72px !important;
  }
}


/* v8.2 — mobile startup/card polish */
@media (max-width: 900px) {
  .news-row {
    grid-template-columns: minmax(0, 1fr) 104px !important;
    grid-template-areas:
      "meta meta"
      "title image"
      "desc desc" !important;
    column-gap: 12px !important;
    padding: 14px 14px 17px !important;
  }

  /* Metadata should read as one compact editorial line, not the legacy
     centered time / Asked / READ stack. */
  .story-meta {
    grid-area: meta !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    align-self: auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 26px !important;
    margin: 0 !important;
    padding: 0 88px 6px 0 !important;
    gap: 6px !important;
    text-align: left !important;
    border: 0 !important;
  }

  .story-time {
    flex: 0 0 auto !important;
    width: auto !important;
    margin: 0 !important;
    text-align: left !important;
  }

  .story-source-name {
    flex: 0 1 auto !important;
    max-width: 42vw !important;
    margin: 0 !important;
    text-align: left !important;
  }

  .story-row-tools {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: auto !important;
    margin: 0 !important;
    gap: 6px !important;
    text-align: left !important;
  }

  .quick-ask {
    flex: 0 0 auto !important;
    margin: 0 !important;
  }

  .read-indicator {
    flex: 0 0 12px !important;
    width: 12px !important;
    min-width: 12px !important;
    margin: 0 !important;
    justify-content: center !important;
    text-align: left !important;
  }

  .story-title-cell,
  .story-image-cell,
  .story-desc {
    border: 0 !important;
  }

  .story-title-cell {
    padding-top: 8px !important;
  }

  .story-image-cell {
    padding-top: 8px !important;
  }

  .story-desc {
    grid-area: desc !important;
    width: 100% !important;
    padding: 10px 0 0 !important;
  }

  .story-desc-text {
    width: 100% !important;
  }

  .story-image,
  .story-image-placeholder {
    width: 96px !important;
    height: 78px !important;
  }

  /* Keep the outbound/bookmark controls visually small but easy to tap. */
  .story-source-link {
    top: 8px !important;
    right: 8px !important;
  }

  .save-article-button,
  .remove-link-button {
    top: 8px !important;
    right: 48px !important;
  }
}

@media (max-width: 520px) {
  .news-row {
    grid-template-columns: minmax(0, 1fr) 94px !important;
    grid-template-areas:
      "meta meta"
      "title image"
      "desc desc" !important;
    column-gap: 10px !important;
  }

  .story-meta {
    padding-right: 84px !important;
  }

  .story-image,
  .story-image-placeholder {
    width: 90px !important;
    height: 72px !important;
  }
}


/* v8.3 — simpler, clearer mobile story cards */
@media (max-width: 900px) {
  /* The active RSS tab already identifies the source. Avoid repeating
     "Gazdaság", "Külföld", etc. inside every story card. */
  .story-source-name {
    display: none !important;
  }

  .story-meta {
    gap: 8px !important;
    min-height: 34px !important;
    padding-top: 0 !important;
    padding-bottom: 7px !important;
  }

  .story-time {
    color: #0F172A !important;
    font-weight: 900 !important;
  }

  /* Read/unread is communicated by card background/title weight on mobile.
     The old dot was visually ambiguous. */
  .read-indicator {
    display: none !important;
  }

  .story-row-tools {
    gap: 0 !important;
    margin-left: 2px !important;
  }

  /* Make Ask / Asked a real, readable mobile action/status chip. */
  .quick-ask {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 32px !important;
    padding: 0 11px !important;
    border: 1px solid #BFDBFE !important;
    border-radius: 8px !important;
    background: #FFFFFF !important;
    color: #1D4ED8 !important;
    font-size: 14px !important;
    line-height: 1 !important;
    font-weight: 850 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
  }

  .quick-ask.has-ai-response {
    border-color: #F1C7C7 !important;
    background: #FDEBEC !important;
    color: #C75454 !important;
  }

  /* Keep the story itself visually clean; there should be only one separator
     between stories, not internal table-like rules. */
  .story-meta,
  .story-title-cell,
  .story-image-cell,
  .story-desc {
    border: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
  }

  .story-title-cell {
    padding-top: 7px !important;
  }

  .story-desc {
    padding-top: 9px !important;
  }

  /* Saved/Mentett can still identify the publisher, because there the user
     is viewing articles from multiple origins. */
  .story-publisher {
    margin-top: 6px !important;
    color: #64748B !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
    font-weight: 750 !important;
  }
}

@media (max-width: 520px) {
  .quick-ask {
    font-size: 14px !important;
    min-height: 32px !important;
  }
}


/* v8.4 — apply the simpler story-state treatment to desktop too */
@media (min-width: 901px) {
  /* Active source is already obvious from the source tab, so do not repeat it
     inside every RSS row. Mentett still receives a publisher label from JS. */
  .story-meta {
    gap: 7px;
  }

  .story-time {
    font-weight: 800;
    color: #0F172A;
  }

  /* Read state is communicated by row background/title weight instead of a
     separate READ/unread marker. */
  .read-indicator {
    display: none !important;
  }

  .story-row-tools {
    margin-top: 5px;
  }

  .quick-ask {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 10px;
    border: 1px solid #BFDBFE;
    border-radius: 7px;
    background: #FFFFFF;
    color: #1D4ED8;
    font-size: 13px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 0;
    white-space: nowrap;
  }

  .quick-ask.has-ai-response {
    border-color: #F1C7C7;
    background: #FDEBEC;
    color: #C75454;
  }

  .story-publisher {
    margin-top: 5px;
    color: #64748B;
    font-size: 12px;
    line-height: 1.3;
    font-weight: 750;
  }

  /* Keep the desktop table clean and editorial rather than status-heavy. */
  .news-row.checked .story-title {
    font-weight: 500;
  }

  .news-row:not(.checked) .story-title {
    font-weight: 750;
  }
}


/* v8.5 — allow native iOS/macOS text replacement and autofill in login */
#emailInput,
#passwordInput {
  text-transform: none !important;
  -webkit-user-select: text !important;
  user-select: text !important;
  -webkit-touch-callout: default !important;
}

#emailInput {
  font-variant: normal !important;
}


/* v8.6 — Safari/WebKit text replacement requires spellcheck not to be disabled.
   Email stays a text field with email inputmode, so native substitutions can run. */


/* v8.7 — compact mobile navigation without shrinking readable text */
@media (max-width: 900px) {
  /* Top source navigation */
  .mobile-feed-toolbar,
  .source-strip,
  .source-tabs,
  .source-bar {
    min-height: 0 !important;
  }

  .source-pill,
  .custom-source-pill,
  .all-sources-button {
    min-height: 40px !important;
    height: 40px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    border-radius: 10px !important;
    line-height: 1 !important;
  }

  .custom-source-pill {
    gap: 5px !important;
  }

  .source-favicon-wrap {
    width: 16px !important;
    height: 16px !important;
    flex-basis: 16px !important;
  }

  .source-favicon {
    width: 15px !important;
    height: 15px !important;
  }

  /* Reduce vertical whitespace around the horizontal source scroller. */
  .mobile-source-strip,
  .source-scroll,
  .source-tabs-scroll,
  .custom-source-buttons {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* All / Unread segmented filter */
  .feed-filter,
  .feed-view-toggle,
  .mobile-feed-filter {
    min-height: 40px !important;
    height: 40px !important;
    padding: 3px !important;
    border-radius: 10px !important;
  }

  .feed-filter button,
  .feed-view-toggle button,
  .mobile-feed-filter button {
    min-height: 34px !important;
    height: 34px !important;
    padding: 0 12px !important;
    border-radius: 8px !important;
    line-height: 1 !important;
  }

  /* Tighten the gap between source tabs/filter and day heading. */
  .mobile-feed-controls,
  .feed-controls {
    padding-top: 4px !important;
    padding-bottom: 6px !important;
    margin-bottom: 0 !important;
  }

  .day-heading,
  .story-day-heading {
    margin-top: 0 !important;
  }

  /* Bottom nav: preserve a usable touch target but reduce empty space. */
  .mobile-bottom-nav {
    min-height: 68px !important;
    height: 68px !important;
    padding: 5px 10px calc(5px + env(safe-area-inset-bottom)) !important;
  }

  .mobile-bottom-nav button,
  .mobile-bottom-nav .mobile-nav-item {
    min-height: 56px !important;
    height: 56px !important;
    padding: 3px 10px !important;
    gap: 2px !important;
    justify-content: center !important;
  }

  .mobile-bottom-nav svg,
  .mobile-bottom-nav .nav-icon,
  .mobile-bottom-nav .material-symbols-outlined {
    width: 22px !important;
    height: 22px !important;
    font-size: 22px !important;
    line-height: 22px !important;
    margin: 0 !important;
  }

  .mobile-bottom-nav .nav-label,
  .mobile-bottom-nav button span:last-child {
    margin-top: 1px !important;
    line-height: 1.1 !important;
  }

  /* Content should stop just above the slimmer fixed nav. */
  body,
  .app-shell,
  main {
    padding-bottom: max(74px, calc(74px + env(safe-area-inset-bottom))) !important;
  }
}

@media (max-width: 520px) {
  .source-pill,
  .custom-source-pill,
  .all-sources-button {
    min-height: 38px !important;
    height: 38px !important;
    padding-left: 11px !important;
    padding-right: 11px !important;
  }

  .mobile-bottom-nav {
    min-height: 64px !important;
    height: 64px !important;
    padding-top: 4px !important;
    padding-bottom: calc(4px + env(safe-area-inset-bottom)) !important;
  }

  .mobile-bottom-nav button,
  .mobile-bottom-nav .mobile-nav-item {
    min-height: 52px !important;
    height: 52px !important;
  }

  body,
  .app-shell,
  main {
    padding-bottom: max(70px, calc(70px + env(safe-area-inset-bottom))) !important;
  }
}


/* v8.8 — source tabs + All/Unread on one compact mobile row */
@media (max-width: 900px) {
  .sourcebar {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 7px !important;
    min-height: 44px !important;
    padding: 4px 8px !important;
    margin: 0 !important;
  }

  .source-list {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    gap: 5px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
  }

  .source-pill,
  .custom-source-pill,
  .all-sources-trigger {
    min-height: 34px !important;
    height: 34px !important;
    padding: 0 10px !important;
    border-radius: 9px !important;
    gap: 5px !important;
  }

  .source-favicon-wrap {
    width: 15px !important;
    height: 15px !important;
    flex: 0 0 15px !important;
  }

  .source-favicon {
    width: 14px !important;
    height: 14px !important;
  }

  .all-sources-trigger {
    width: 38px !important;
    min-width: 38px !important;
    padding: 0 !important;
    font-size: 17px !important;
  }

  .view-filter {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    height: 34px !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 2px !important;
    gap: 1px !important;
    border-radius: 8px !important;
  }

  .filter-button,
  .filter-button.active {
    min-height: 30px !important;
    height: 30px !important;
    padding: 0 9px !important;
    border-radius: 7px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 520px) {
  .sourcebar {
    min-height: 42px !important;
    padding: 4px 6px !important;
    gap: 5px !important;
  }

  .source-pill,
  .custom-source-pill,
  .all-sources-trigger {
    min-height: 32px !important;
    height: 32px !important;
    padding-left: 9px !important;
    padding-right: 9px !important;
  }

  .all-sources-trigger {
    width: 36px !important;
    min-width: 36px !important;
    padding: 0 !important;
  }

  .view-filter {
    height: 32px !important;
    min-height: 32px !important;
    padding: 2px !important;
  }

  .filter-button,
  .filter-button.active {
    min-height: 28px !important;
    height: 28px !important;
    padding: 0 8px !important;
  }
}


/* v8.9 — remove internal story separators + text-only mobile bottom navigation */
@media (max-width: 900px) {
  /* Headline + thumbnail are one visual block. Remove any legacy table rules
     that can appear between/under the two cells. */
  .news-row .story-title-cell,
  .news-row .story-image-cell,
  .news-row .story-title-wrap,
  .news-row .story-mobile-image,
  .news-row .story-image,
  .news-row .story-image-placeholder {
    border: 0 !important;
    border-top: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
  }

  .news-row .story-title-cell::before,
  .news-row .story-title-cell::after,
  .news-row .story-image-cell::before,
  .news-row .story-image-cell::after {
    display: none !important;
    content: none !important;
  }

  /* Keep only the separator between complete stories. */
  .news-row {
    border-top: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 1px solid #E2E8F0 !important;
  }

  /* Text-only bottom navigation. */
  .mobile-bottom-nav {
    min-height: 48px !important;
    height: 48px !important;
    padding: 0 8px env(safe-area-inset-bottom) !important;
    align-items: stretch !important;
  }

  .mobile-bottom-nav button,
  .mobile-bottom-nav .mobile-nav-item {
    min-height: 48px !important;
    height: 48px !important;
    padding: 0 10px !important;
    gap: 0 !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Hide every icon implementation used by the mobile nav. */
  .mobile-bottom-nav svg,
  .mobile-bottom-nav .nav-icon,
  .mobile-bottom-nav .material-symbols-outlined,
  .mobile-bottom-nav [aria-hidden="true"]:not(.nav-label) {
    display: none !important;
  }

  .mobile-bottom-nav .nav-label,
  .mobile-bottom-nav button span:last-child {
    display: block !important;
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
  }

  /* Reclaim the space previously reserved for the taller icon nav. */
  body,
  .app-shell,
  main {
    padding-bottom: max(54px, calc(54px + env(safe-area-inset-bottom))) !important;
  }
}

@media (max-width: 520px) {
  .mobile-bottom-nav {
    min-height: 46px !important;
    height: 46px !important;
  }

  .mobile-bottom-nav button,
  .mobile-bottom-nav .mobile-nav-item {
    min-height: 46px !important;
    height: 46px !important;
  }

  body,
  .app-shell,
  main {
    padding-bottom: max(52px, calc(52px + env(safe-area-inset-bottom))) !important;
  }
}


/* v9.0 — prioritize native Apple Text Replacement on login email field */
#emailInput {
  text-transform: none !important;
  -webkit-user-select: text !important;
  user-select: text !important;
  -webkit-touch-callout: default !important;
}

.login-email-hint {
  margin: 5px 2px 10px;
  color: #64748B;
  font-size: 12px;
  line-height: 1.2;
}


/* v9.1 — scalable source row + five per-user text sizes */
@media (max-width: 900px) {
  body[data-text-size="extra-small"] {
    --mobile-title-size: 16px;
    --mobile-body-size: 16px;
    --mobile-ai-size: 16px;
    --mobile-ui-size: 13px;
    --mobile-meta-size: 12px;
  }

  body[data-text-size="small"] {
    --mobile-title-size: 18px;
    --mobile-body-size: 18px;
    --mobile-ai-size: 18px;
    --mobile-ui-size: 14px;
    --mobile-meta-size: 12px;
  }

  /* Source tabs are the only horizontally scrolling element.
     The All Sources trigger and All/Unread filter remain permanently visible. */
  .sourcebar {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 5px !important;
    overflow: hidden !important;
  }

  .source-list {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    flex-wrap: nowrap !important;
    scrollbar-width: none !important;
  }

  .source-list::-webkit-scrollbar {
    display: none !important;
  }

  .all-sources-trigger {
    display: inline-flex !important;
    flex: 0 0 36px !important;
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    position: relative !important;
    z-index: 3 !important;
  }

  .view-filter {
    flex: 0 0 auto !important;
    position: relative !important;
    z-index: 3 !important;
  }

  /* Five choices should remain readable instead of being squeezed into
     tiny equal-width boxes on a phone. */
  .text-size-control {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 6px !important;
    overflow-x: auto !important;
    padding-bottom: 3px !important;
    scrollbar-width: none !important;
  }

  .text-size-control::-webkit-scrollbar {
    display: none !important;
  }

  .text-size-choice {
    flex: 0 0 auto !important;
    min-width: 92px !important;
    min-height: 58px !important;
    padding: 7px 8px !important;
  }
}


/* v9.2 — show "tovább / more" only when the RSS description is truly truncated */
@media (max-width: 900px) {
  .news-row:not(.selected) .story-desc-toggle.is-unneeded,
  .story-desc-toggle.is-unneeded {
    display: none !important;
  }
}


/* v9.4 — description expands only through the explicit more/less control */
@media (max-width: 900px) {
  .story-desc-text {
    cursor: default !important;
  }

  .story-desc-toggle {
    cursor: pointer !important;
  }

  /* Existing AI output should look like an action to reopen content,
     not merely a passive status badge. */
  .quick-ask.has-ai-response {
    text-decoration: none !important;
  }
}


/* v9.5 — clear, predictable mobile source bar */
.all-sources-mobile-label {
  display: none;
}

@media (max-width: 900px) {
  .sourcebar {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 5px !important;
    overflow: hidden !important;
  }

  /* 1. Only the source tabs scroll. */
  .source-list {
    order: 1 !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    flex-wrap: nowrap !important;
  }

  /* 2. Filter is always fixed and visible. */
  .view-filter {
    order: 2 !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
  }

  /* 3. Explicit Sources button is always the far-right control. */
  .all-sources-trigger {
    order: 3 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 72px !important;
    max-width: none !important;
    height: 32px !important;
    padding: 0 9px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    position: relative !important;
    z-index: 3 !important;
  }

  .all-sources-trigger .all-sources-dots {
    display: none !important;
  }

  .all-sources-trigger .all-sources-mobile-label {
    display: inline !important;
  }
}

@media (max-width: 390px) {
  /* Keep the meaning explicit even on narrow phones. */
  .all-sources-trigger {
    min-width: 64px !important;
    padding-left: 7px !important;
    padding-right: 7px !important;
    font-size: 12px !important;
  }

  .filter-button,
  .filter-button.active {
    padding-left: 7px !important;
    padding-right: 7px !important;
  }
}


/* v9.6 — real horizontally scrollable mobile source tabs */
@media (max-width: 900px) {
  .sourcebar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    grid-template-areas: "tabs dots filter" !important;
    align-items: center !important;
    gap: 5px !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    padding: 4px 6px !important;
  }

  .source-list {
    grid-area: tabs !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 5px !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-x: contain !important;
    touch-action: pan-x !important;
    scrollbar-width: none !important;
    position: relative !important;
    z-index: 1 !important;
  }

  .source-list::-webkit-scrollbar {
    display: none !important;
  }

  #customSourceButtons,
  .custom-source-buttons {
    display: inline-flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    flex-wrap: nowrap !important;
    gap: 5px !important;
    min-width: max-content !important;
    width: max-content !important;
    white-space: nowrap !important;
  }

  .source-list > *,
  #customSourceButtons > *,
  .custom-source-buttons > * {
    flex: 0 0 auto !important;
  }

  .source-pill,
  .custom-source-pill {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  /* Dots indicate more sources / open the complete picker. */
  .all-sources-trigger {
    grid-area: dots !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 32px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 8px !important;
    font-size: 18px !important;
    line-height: 1 !important;
    position: relative !important;
    z-index: 2 !important;
    pointer-events: auto !important;
  }

  .view-filter {
    grid-area: filter !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    position: relative !important;
    z-index: 2 !important;
  }

  /* Remove v9.5 mobile label remnants. */
  .all-sources-mobile-label,
  .all-sources-dots {
    display: none !important;
  }
}

@media (max-width: 520px) {
  .sourcebar {
    grid-template-columns: minmax(0, 1fr) 34px auto !important;
    gap: 4px !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
  }

  .all-sources-trigger {
    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    height: 32px !important;
    font-size: 17px !important;
  }
}


/* v9.7 — per-user Light / Dark appearance */
.appearance-settings-row {
  margin-top: 16px;
}

.appearance-settings-row .settings-label-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
}

.theme-control {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 5px;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  background: #F8FAFC;
}

.theme-choice {
  min-height: 46px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #475569;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-weight: 800;
}

.theme-choice-mark {
  font-size: 15px;
  line-height: 1;
}

.theme-choice.active {
  background: #1D4ED8;
  color: #fff;
}

/* Core palette */
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0B1120;
  --surface: #111827;
  --surface-soft: #172033;
  --surface-blue: #111C33;
  --text: #E5E7EB;
  --muted: #94A3B8;
  --line: #334155;
  --line-soft: #253247;
  --blue: #60A5FA;
  --blue-soft: #172554;
  --black: #E5E7EB;
  --danger: #F87171;
  background: #0B1120;
}

html[data-theme="dark"] body,
body[data-theme="dark"] {
  background: #0B1120 !important;
  color: #E5E7EB !important;
}

body[data-theme="dark"] .shell {
  background: rgba(15,23,42,.96);
  border-color: #334155;
}

body[data-theme="dark"] .topbar,
body[data-theme="dark"] .sourcebar,
body[data-theme="dark"] .table-wrap,
body[data-theme="dark"] .settings-panel,
body[data-theme="dark"] .login-card,
body[data-theme="dark"] .status,
body[data-theme="dark"] .link-add-panel,
body[data-theme="dark"] .source-add-panel {
  background: #111827 !important;
  border-color: #334155 !important;
}

body[data-theme="dark"] h1,
body[data-theme="dark"] h2,
body[data-theme="dark"] .mobile-brand,
body[data-theme="dark"] .settings-title,
body[data-theme="dark"] .settings-row label,
body[data-theme="dark"] .story-title,
body[data-theme="dark"] .history-question,
body[data-theme="dark"] .mobile-section-title,
body[data-theme="dark"] .mobile-sources-title,
body[data-theme="dark"] .all-sources-title-row h2 {
  color: #F8FAFC !important;
}

body[data-theme="dark"] .eyebrow,
body[data-theme="dark"] .settings-subtitle,
body[data-theme="dark"] .settings-help,
body[data-theme="dark"] .settings-message,
body[data-theme="dark"] .account-menu-email,
body[data-theme="dark"] .story-desc,
body[data-theme="dark"] .sources-title,
body[data-theme="dark"] .all-sources-empty,
body[data-theme="dark"] .mobile-sources-heading p,
body[data-theme="dark"] .mobile-sources-empty,
body[data-theme="dark"] .saved-mobile-meta,
body[data-theme="dark"] .story-publisher {
  color: #94A3B8 !important;
}

/* Inputs and settings */
body[data-theme="dark"] input,
body[data-theme="dark"] select,
body[data-theme="dark"] textarea,
body[data-theme="dark"] .settings-control-row select,
body[data-theme="dark"] .ask-input,
body[data-theme="dark"] .all-sources-search {
  background: #172033 !important;
  color: #F8FAFC !important;
  border-color: #334155 !important;
}

body[data-theme="dark"] input::placeholder,
body[data-theme="dark"] textarea::placeholder {
  color: #64748B !important;
}

body[data-theme="dark"] .text-size-control,
body[data-theme="dark"] .theme-control {
  background: #0F172A !important;
  border-color: #334155 !important;
}

body[data-theme="dark"] .text-size-choice,
body[data-theme="dark"] .theme-choice {
  color: #CBD5E1;
}

body[data-theme="dark"] .text-size-choice.active,
body[data-theme="dark"] .theme-choice.active {
  background: #1D4ED8 !important;
  color: #fff !important;
}

body[data-theme="dark"] .profile-saved-note {
  color: #60A5FA !important;
}

/* Source tabs + filters */
body[data-theme="dark"] .source-pill,
body[data-theme="dark"] .filter-button,
body[data-theme="dark"] .all-sources-trigger {
  background: #172033 !important;
  color: #CBD5E1 !important;
  border-color: #334155 !important;
}

body[data-theme="dark"] .source-pill.active {
  background: #1D4ED8 !important;
  color: #fff !important;
  border-color: #3B82F6 !important;
}

body[data-theme="dark"] .filter-button.active {
  background: #E2E8F0 !important;
  color: #0F172A !important;
  box-shadow: none !important;
}

body[data-theme="dark"] .view-filter {
  background: #172033 !important;
  border-color: #334155 !important;
}

/* Feed rows */
body[data-theme="dark"] .news-table th {
  color: #94A3B8 !important;
  border-color: #253247 !important;
}

body[data-theme="dark"] .news-table td,
body[data-theme="dark"] .news-row,
body[data-theme="dark"] .news-row.checked > td,
body[data-theme="dark"] .news-row.checked + .news-row.checked > td {
  border-color: #334155 !important;
}

body[data-theme="dark"] .news-row {
  background: #0F172A !important;
}

body[data-theme="dark"] .news-row:hover {
  background: #131E31 !important;
}

body[data-theme="dark"] .news-row.checked:not(.selected) {
  background: #172033 !important;
}

body[data-theme="dark"] .news-row.selected {
  background: #13213A !important;
  box-shadow: inset 3px 0 0 #3B82F6 !important;
}

body[data-theme="dark"] .news-row.checked:not(.selected) .story-title,
body[data-theme="dark"] .news-row.checked:not(.selected) .story-desc {
  color: #94A3B8 !important;
}

body[data-theme="dark"] .story-time {
  color: #E2E8F0 !important;
}

body[data-theme="dark"] .story-desc {
  color: #CBD5E1 !important;
}

body[data-theme="dark"] .story-source-link {
  color: #94A3B8 !important;
}

body[data-theme="dark"] .story-source-link:hover,
body[data-theme="dark"] .story-source-link:focus-visible {
  color: #60A5FA !important;
  background: #172554 !important;
}

body[data-theme="dark"] .quick-ask,
body[data-theme="dark"] .analysis-button {
  background: #172033 !important;
  color: #93C5FD !important;
  border-color: #3B4A61 !important;
}

body[data-theme="dark"] .quick-ask.has-ai-response {
  background: #3A2028 !important;
  color: #FDA4AF !important;
  border-color: #6B3642 !important;
}

/* AI panel */
body[data-theme="dark"] .analysis-row td,
body[data-theme="dark"] .analysis-panel {
  background: #111C2F !important;
}

body[data-theme="dark"] .analysis-panel,
body[data-theme="dark"] .analysis-result,
body[data-theme="dark"] .history-card {
  border-color: #334155 !important;
}

body[data-theme="dark"] .history-card,
body[data-theme="dark"] .history-answer,
body[data-theme="dark"] .analysis-result .answer {
  color: #DCE4EE !important;
}

body[data-theme="dark"] .analysis-actions button.completed,
body[data-theme="dark"] .analysis-actions button:disabled {
  background: #1E293B !important;
  color: #64748B !important;
  border-color: #334155 !important;
}

body[data-theme="dark"] .analysis-button.primary-action,
body[data-theme="dark"] .ask-submit {
  background: #1D4ED8 !important;
  color: #fff !important;
  border-color: #3B82F6 !important;
}

/* Menus and overlays */
body[data-theme="dark"] .account-menu,
body[data-theme="dark"] .all-sources-sheet,
body[data-theme="dark"] .all-source-row,
body[data-theme="dark"] .all-sources-actions {
  background: #111827 !important;
  color: #E5E7EB !important;
  border-color: #334155 !important;
}

body[data-theme="dark"] .account-menu-logout,
body[data-theme="dark"] .sheet-close,
body[data-theme="dark"] .picker-manage-sources {
  background: #172033 !important;
  color: #E5E7EB !important;
  border-color: #334155 !important;
}

body[data-theme="dark"] .all-source-row.active {
  background: #172554 !important;
  color: #93C5FD !important;
  border-color: #3B82F6 !important;
}

body[data-theme="dark"] .source-total-badge {
  background: #172554 !important;
  color: #93C5FD !important;
}

body[data-theme="dark"] .sheet-grabber {
  background: #475569 !important;
}

/* Mobile-specific surfaces */
@media (max-width: 900px) {
  html[data-theme="dark"],
  html[data-theme="dark"] body,
  body[data-theme="dark"],
  body[data-theme="dark"] .shell {
    background: #0B1120 !important;
  }

  body[data-theme="dark"] .topbar {
    background: rgba(15,23,42,.97) !important;
    border-bottom-color: #334155 !important;
  }

  body[data-theme="dark"] .sourcebar {
    background: #0F172A !important;
    border-bottom-color: #334155 !important;
  }

  body[data-theme="dark"] .ui-language-control {
    background: #172033 !important;
    border-color: #334155 !important;
  }

  body[data-theme="dark"] .ui-language-choice {
    color: #94A3B8 !important;
  }

  body[data-theme="dark"] .ui-language-choice.active {
    background: #1E293B !important;
    color: #93C5FD !important;
  }

  body[data-theme="dark"] .top-button.icon-button,
  body[data-theme="dark"] .account-menu-button {
    color: #CBD5E1 !important;
  }

  body[data-theme="dark"] .account-menu-button:not(.hidden) {
    background: #172554 !important;
    color: #93C5FD !important;
  }

  body[data-theme="dark"] .day-heading {
    color: #94A3B8 !important;
    background: #0B1120 !important;
  }

  body[data-theme="dark"] .mobile-bottom-nav {
    background: rgba(15,23,42,.98) !important;
    border-top-color: #334155 !important;
  }

  body[data-theme="dark"] .mobile-nav-button {
    color: #94A3B8 !important;
  }

  body[data-theme="dark"] .mobile-nav-button.active {
    color: #60A5FA !important;
  }

  body[data-theme="dark"] .mobile-saved-toolbar,
  body[data-theme="dark"] .mobile-sources-panel,
  body[data-theme="dark"] .mobile-source-item {
    background: #0F172A !important;
    color: #E5E7EB !important;
    border-color: #334155 !important;
  }

  body[data-theme="dark"] .mobile-source-name-line strong {
    color: #F8FAFC !important;
  }

  body[data-theme="dark"] .mobile-source-url,
  body[data-theme="dark"] .mobile-sources-eyebrow {
    color: #94A3B8 !important;
  }

  body[data-theme="dark"] .story-image,
  body[data-theme="dark"] .story-image-placeholder {
    background: #1E293B !important;
  }

  body[data-theme="dark"] .all-sources-backdrop {
    background: rgba(2,6,23,.68) !important;
  }
}


/* v9.8 — robust theme application fallback */
html.theme-dark,
html.theme-dark body,
body.theme-dark {
  background: #0B1120 !important;
  color: #E5E7EB !important;
}

html.theme-dark .shell,
html.theme-dark .topbar,
html.theme-dark .sourcebar,
html.theme-dark .table-wrap,
html.theme-dark .settings-panel,
html.theme-dark .login-card,
html.theme-dark .account-menu,
html.theme-dark .all-sources-sheet,
html.theme-dark .mobile-bottom-nav {
  background-color: #0F172A !important;
  color: #E5E7EB !important;
  border-color: #334155 !important;
}

html.theme-dark .news-row {
  background-color: #0F172A !important;
  border-color: #334155 !important;
}

html.theme-dark .news-row.checked:not(.selected) {
  background-color: #172033 !important;
}

html.theme-dark .news-row.selected {
  background-color: #13213A !important;
}

html.theme-dark .story-title,
html.theme-dark .story-time,
html.theme-dark h1,
html.theme-dark h2,
html.theme-dark h3,
html.theme-dark label {
  color: #F8FAFC !important;
}

html.theme-dark .story-desc,
html.theme-dark .settings-help,
html.theme-dark .settings-subtitle,
html.theme-dark .story-publisher {
  color: #CBD5E1 !important;
}

html.theme-dark input,
html.theme-dark textarea,
html.theme-dark select {
  background-color: #172033 !important;
  color: #F8FAFC !important;
  border-color: #334155 !important;
}

html.theme-dark .source-pill,
html.theme-dark .filter-button,
html.theme-dark .all-sources-trigger,
html.theme-dark .text-size-choice,
html.theme-dark .theme-choice,
html.theme-dark .quick-ask,
html.theme-dark .analysis-button {
  border-color: #334155 !important;
}

html.theme-dark .theme-choice.active,
html.theme-dark .text-size-choice.active,
html.theme-dark .source-pill.active {
  background: #1D4ED8 !important;
  color: #FFFFFF !important;
}

html.theme-dark .view-filter,
html.theme-dark .text-size-control,
html.theme-dark .theme-control {
  background: #172033 !important;
  border-color: #334155 !important;
}

html.theme-dark .analysis-row td,
html.theme-dark .analysis-panel,
html.theme-dark .analysis-result,
html.theme-dark .history-card {
  background: #111C2F !important;
  color: #E5E7EB !important;
  border-color: #334155 !important;
}

html.theme-dark .mobile-nav-button {
  color: #94A3B8 !important;
}

html.theme-dark .mobile-nav-button.active {
  color: #60A5FA !important;
}


/* ============================================================
   v9.9 — complete dark mode
   Final override layer for every remaining hard-coded light surface.
   ============================================================ */

html.theme-dark,
html[data-theme="dark"] {
  --dark-page: #0B1120;
  --dark-surface: #0F172A;
  --dark-panel: #111827;
  --dark-soft: #172033;
  --dark-hover: #1E293B;
  --dark-read: #172033;
  --dark-selected: #13213A;
  --dark-border: #334155;
  --dark-border-soft: #253247;
  --dark-text: #F8FAFC;
  --dark-body: #CBD5E1;
  --dark-muted: #94A3B8;
  --dark-blue: #60A5FA;
  --dark-blue-strong: #3B82F6;
  background: var(--dark-page) !important;
  color: var(--dark-text) !important;
  color-scheme: dark;
}

html.theme-dark body,
html[data-theme="dark"] body,
body.theme-dark,
body[data-theme="dark"] {
  background: var(--dark-page) !important;
  color: var(--dark-text) !important;
}

/* App frame / header / primary surfaces */
html.theme-dark .shell,
html.theme-dark .dashboard,
html.theme-dark .topbar,
html.theme-dark .sourcebar,
html.theme-dark .table-wrap,
html.theme-dark .news-table,
html.theme-dark .settings-panel,
html.theme-dark .settings-panel-head,
html.theme-dark .settings-row,
html.theme-dark .status,
html.theme-dark .loading-panel,
html.theme-dark .mobile-saved-toolbar,
html.theme-dark .mobile-sources-panel,
html.theme-dark .mobile-source-item,
html.theme-dark .all-sources-sheet,
html.theme-dark .all-sources-actions,
html.theme-dark .account-menu,
html.theme-dark .login-card,
html.theme-dark .auth-login-card,
html.theme-dark .link-add-panel,
html.theme-dark .source-add-panel {
  background: var(--dark-surface) !important;
  color: var(--dark-text) !important;
  border-color: var(--dark-border) !important;
}

/* Raised / interactive surfaces */
html.theme-dark input,
html.theme-dark textarea,
html.theme-dark select,
html.theme-dark .email-login-form input,
html.theme-dark .ask-input,
html.theme-dark .followup-input,
html.theme-dark .all-sources-search,
html.theme-dark .settings-control-row select,
html.theme-dark .ui-language-control,
html.theme-dark .ai-language-control,
html.theme-dark .ai-language-toggle,
html.theme-dark .text-size-control,
html.theme-dark .theme-control,
html.theme-dark .view-filter,
html.theme-dark .account-menu-logout,
html.theme-dark .sheet-close,
html.theme-dark .picker-manage-sources,
html.theme-dark .link-add-form button,
html.theme-dark .source-add-form button,
html.theme-dark .custom-source-setting-actions button,
html.theme-dark .google-login-button,
html.theme-dark .secondary-auth-button,
html.theme-dark .add-link-button,
html.theme-dark .add-source-button,
html.theme-dark .source-pin,
html.theme-dark .followup-submit {
  background: var(--dark-soft) !important;
  color: var(--dark-text) !important;
  border-color: var(--dark-border) !important;
}

html.theme-dark input::placeholder,
html.theme-dark textarea::placeholder {
  color: #64748B !important;
}

/* Source tabs, filters, language selectors */
html.theme-dark .source-pill,
html.theme-dark .custom-source-pill,
html.theme-dark .all-sources-trigger,
html.theme-dark .filter-button,
html.theme-dark .ui-language-choice,
html.theme-dark .language-choice,
html.theme-dark .text-size-choice,
html.theme-dark .theme-choice {
  background: var(--dark-soft) !important;
  color: var(--dark-body) !important;
  border-color: var(--dark-border) !important;
  box-shadow: none !important;
}

html.theme-dark .source-pill.active,
html.theme-dark .custom-source-pill.active,
html.theme-dark .text-size-choice.active,
html.theme-dark .theme-choice.active {
  background: #1D4ED8 !important;
  color: #FFFFFF !important;
  border-color: var(--dark-blue-strong) !important;
}

html.theme-dark .filter-button.active,
html.theme-dark .ui-language-choice.active,
html.theme-dark .language-choice.active {
  background: #E2E8F0 !important;
  color: #0F172A !important;
  border-color: #CBD5E1 !important;
}

/* News list, including all read/selected combinations */
html.theme-dark .news-table,
html.theme-dark .news-table tbody,
html.theme-dark .news-table tr,
html.theme-dark .news-table td {
  border-color: var(--dark-border) !important;
}

html.theme-dark .news-row,
html.theme-dark .news-row > td {
  background: var(--dark-surface) !important;
  color: var(--dark-text) !important;
  border-color: var(--dark-border) !important;
}

html.theme-dark .news-row:hover,
html.theme-dark .news-row:hover > td {
  background: #131E31 !important;
}

html.theme-dark .news-row.checked,
html.theme-dark .news-row.checked > td,
html.theme-dark .news-row.checked:not(.selected),
html.theme-dark .news-row.checked:not(.selected) > td {
  background: var(--dark-read) !important;
}

html.theme-dark .news-row.selected,
html.theme-dark .news-row.selected > td,
html.theme-dark .news-row.checked.selected,
html.theme-dark .news-row.checked.selected > td {
  background: var(--dark-selected) !important;
}

html.theme-dark .day-row,
html.theme-dark .day-row td,
html.theme-dark .day-heading {
  background: var(--dark-page) !important;
  color: var(--dark-muted) !important;
  border-color: var(--dark-border-soft) !important;
}

html.theme-dark .story-title,
html.theme-dark .story-time {
  color: var(--dark-text) !important;
}

html.theme-dark .news-row.checked:not(.selected) .story-title {
  color: #CBD5E1 !important;
}

html.theme-dark .story-desc,
html.theme-dark .news-row.checked:not(.selected) .story-desc {
  color: var(--dark-body) !important;
}

html.theme-dark .story-publisher,
html.theme-dark .story-source-name,
html.theme-dark .story-source-link,
html.theme-dark .saved-mobile-meta {
  color: var(--dark-muted) !important;
}

html.theme-dark .story-source-link:hover,
html.theme-dark .story-source-link:focus-visible {
  color: var(--dark-blue) !important;
  background: #172554 !important;
}

html.theme-dark .story-title-cell,
html.theme-dark .story-image-cell,
html.theme-dark .story-desc,
html.theme-dark .story-meta {
  border-color: var(--dark-border) !important;
}

html.theme-dark .story-image-placeholder {
  background: var(--dark-hover) !important;
  border-color: var(--dark-border) !important;
}

/* Ask / AI state */
html.theme-dark .quick-ask,
html.theme-dark .analysis-button,
html.theme-dark .ask-submit {
  background: var(--dark-soft) !important;
  color: #93C5FD !important;
  border-color: #3B4A61 !important;
}

html.theme-dark .quick-ask:hover,
html.theme-dark .analysis-button:hover,
html.theme-dark .ask-submit:hover {
  background: var(--dark-hover) !important;
  color: #BFDBFE !important;
  border-color: #475569 !important;
}

html.theme-dark .quick-ask.has-ai-response {
  background: #3A2028 !important;
  color: #FDA4AF !important;
  border-color: #6B3642 !important;
}

html.theme-dark .analysis-button.primary-action,
html.theme-dark .ask-submit.primary-action {
  background: #1D4ED8 !important;
  color: #FFFFFF !important;
  border-color: var(--dark-blue-strong) !important;
}

html.theme-dark .analysis-button.completed,
html.theme-dark .analysis-button:disabled {
  background: var(--dark-hover) !important;
  color: #64748B !important;
  border-color: var(--dark-border) !important;
}

/* Full AI content surfaces */
html.theme-dark .analysis-row,
html.theme-dark .analysis-row > td,
html.theme-dark .analysis-panel,
html.theme-dark .analysis-history,
html.theme-dark .analysis-result,
html.theme-dark .history-card,
html.theme-dark .history-answer,
html.theme-dark .analysis-result .answer,
html.theme-dark .analysis-preview-more,
html.theme-dark .ask-preview-more {
  background: #111C2F !important;
  color: #DCE4EE !important;
  border-color: var(--dark-border) !important;
}

html.theme-dark .analysis-topline,
html.theme-dark .analysis-actions,
html.theme-dark .ask-form {
  border-color: var(--dark-border) !important;
}

html.theme-dark .history-question {
  color: var(--dark-text) !important;
}

/* Settings */
html.theme-dark .settings-title,
html.theme-dark .settings-row label,
html.theme-dark .settings-label-line,
html.theme-dark .appearance-settings-row label {
  color: var(--dark-text) !important;
}

html.theme-dark .settings-subtitle,
html.theme-dark .settings-help,
html.theme-dark .settings-message,
html.theme-dark .profile-saved-note {
  color: var(--dark-muted) !important;
}

html.theme-dark .profile-saved-note {
  color: var(--dark-blue) !important;
}

html.theme-dark .settings-close {
  color: var(--dark-body) !important;
  background: var(--dark-soft) !important;
  border-color: var(--dark-border) !important;
}

/* Add-source / add-link sections */
html.theme-dark .link-extraction-note,
html.theme-dark .source-add-message,
html.theme-dark .link-add-message,
html.theme-dark .custom-source-settings-empty,
html.theme-dark .mobile-sources-empty {
  background: var(--dark-soft) !important;
  color: var(--dark-muted) !important;
  border-color: var(--dark-border) !important;
}

/* Source management */
html.theme-dark .mobile-sources-heading,
html.theme-dark .mobile-sources-list,
html.theme-dark .custom-sources-settings-list,
html.theme-dark .custom-source-settings-row {
  background: var(--dark-surface) !important;
  border-color: var(--dark-border) !important;
}

html.theme-dark .mobile-source-name-line strong,
html.theme-dark .mobile-section-title,
html.theme-dark .mobile-sources-title {
  color: var(--dark-text) !important;
}

html.theme-dark .mobile-source-url,
html.theme-dark .mobile-sources-eyebrow,
html.theme-dark .mobile-sources-heading p {
  color: var(--dark-muted) !important;
}

html.theme-dark .mobile-default-badge {
  background: #3A2028 !important;
  color: #FDA4AF !important;
  border-color: #6B3642 !important;
}

/* All-sources picker */
html.theme-dark .all-sources-backdrop {
  background: rgba(2, 6, 23, .76) !important;
}

html.theme-dark .all-sources-head,
html.theme-dark .all-sources-title-row,
html.theme-dark .all-sources-list {
  background: var(--dark-panel) !important;
  color: var(--dark-text) !important;
  border-color: var(--dark-border) !important;
}

html.theme-dark .all-source-row {
  background: var(--dark-panel) !important;
  color: var(--dark-text) !important;
  border-color: var(--dark-border) !important;
}

html.theme-dark .all-source-row:hover {
  background: var(--dark-soft) !important;
}

html.theme-dark .all-source-row.active {
  background: #172554 !important;
  color: #93C5FD !important;
  border-color: var(--dark-blue-strong) !important;
}

html.theme-dark .source-total-badge {
  background: #172554 !important;
  color: #93C5FD !important;
}

html.theme-dark .sheet-grabber {
  background: #475569 !important;
}

/* Account menu / authentication */
html.theme-dark .account-info-line,
html.theme-dark .account-menu-email,
html.theme-dark .login-beta-note,
html.theme-dark .login-email-hint,
html.theme-dark .login-message {
  color: var(--dark-muted) !important;
}

html.theme-dark .account-plan-badge {
  background: #172554 !important;
  color: #93C5FD !important;
  border-color: #1E40AF !important;
}

/* Mobile nav + mobile frame */
@media (max-width: 900px) {
  html.theme-dark body,
  html.theme-dark .shell,
  html.theme-dark .dashboard {
    background: var(--dark-page) !important;
  }

  html.theme-dark .topbar {
    background: rgba(15, 23, 42, .98) !important;
    border-bottom-color: var(--dark-border) !important;
  }

  html.theme-dark .sourcebar {
    background: var(--dark-surface) !important;
    border-bottom-color: var(--dark-border) !important;
  }

  html.theme-dark .mobile-bottom-nav {
    background: rgba(15, 23, 42, .99) !important;
    border-top-color: var(--dark-border) !important;
  }

  html.theme-dark .mobile-nav-button {
    background: transparent !important;
    color: var(--dark-muted) !important;
  }

  html.theme-dark .mobile-nav-button.active {
    color: var(--dark-blue) !important;
  }

  html.theme-dark .news-row,
  html.theme-dark .news-row > td {
    background: var(--dark-surface) !important;
  }

  html.theme-dark .news-row.checked:not(.selected),
  html.theme-dark .news-row.checked:not(.selected) > td {
    background: var(--dark-read) !important;
  }

  html.theme-dark .news-row.selected,
  html.theme-dark .news-row.selected > td,
  html.theme-dark .news-row.checked.selected,
  html.theme-dark .news-row.checked.selected > td {
    background: var(--dark-selected) !important;
  }

  html.theme-dark .settings-panel,
  html.theme-dark .settings-panel-head,
  html.theme-dark .settings-row {
    background: var(--dark-surface) !important;
  }

  html.theme-dark .mobile-saved-toolbar,
  html.theme-dark .mobile-sources-panel,
  html.theme-dark .mobile-source-item {
    background: var(--dark-surface) !important;
  }
}


/* v10.0 — clearer read + AI-response states in dark mode */
html.theme-dark .news-row,
html.theme-dark .news-row > td {
  background: #0F172A !important;
}

/* Unread = strongest title contrast. */
html.theme-dark .news-row:not(.checked):not(.selected) .story-title {
  color: #F8FAFC !important;
  font-weight: 800 !important;
}

/* Read = clearly different blue-violet surface, like the lilac read state in light mode. */
html.theme-dark .news-row.checked:not(.selected),
html.theme-dark .news-row.checked:not(.selected) > td {
  background: #1B2038 !important;
}

html.theme-dark .news-row.checked:not(.selected) .story-title {
  color: #AAB6CC !important;
  font-weight: 500 !important;
}

html.theme-dark .news-row.checked:not(.selected) .story-desc,
html.theme-dark .news-row.checked:not(.selected) .story-time,
html.theme-dark .news-row.checked:not(.selected) .story-source-link,
html.theme-dark .news-row.checked:not(.selected) .story-publisher {
  color: #8896AD !important;
}

/* Open/selected remains a third, distinct state. */
html.theme-dark .news-row.selected,
html.theme-dark .news-row.selected > td,
html.theme-dark .news-row.checked.selected,
html.theme-dark .news-row.checked.selected > td {
  background: #132B46 !important;
}

html.theme-dark .news-row.selected {
  box-shadow: inset 3px 0 0 #60A5FA !important;
}

/* Existing AI response = obvious rose/coral action chip. */
html.theme-dark .quick-ask.has-ai-response {
  background: #4A1F2B !important;
  color: #FFD0D7 !important;
  border-color: #FB7185 !important;
  box-shadow: inset 0 0 0 1px rgba(251, 113, 133, .12) !important;
  font-weight: 850 !important;
}

html.theme-dark .quick-ask.has-ai-response:hover,
html.theme-dark .quick-ask.has-ai-response:focus-visible {
  background: #5A2635 !important;
  color: #FFE4E8 !important;
  border-color: #FDA4AF !important;
}

/* Keep Ask distinct from "AI response exists". */
html.theme-dark .quick-ask:not(.has-ai-response) {
  background: #172033 !important;
  color: #93C5FD !important;
  border-color: #3B4A61 !important;
}


/* v10.1 — explicit read + AI states in dark mode */

/* Read rows get a clearly different surface plus a left-edge cue. */
html.theme-dark .news-row.checked:not(.selected),
html.theme-dark .news-row.checked:not(.selected) > td {
  background: #222746 !important;
}

html.theme-dark .news-row.checked:not(.selected) {
  box-shadow: inset 3px 0 0 #7C83D6 !important;
}

/* Show a textual read status only in dark mode. Earlier versions hid the
   read indicator because the light-mode row background was sufficient. */
html.theme-dark .read-indicator {
  display: none !important;
}

html.theme-dark .read-indicator.is-read {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 26px !important;
  padding: 0 8px !important;
  border: 1px solid #555D98 !important;
  border-radius: 7px !important;
  background: #30365D !important;
  color: #D8DCF9 !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

html.theme-dark .read-indicator.is-read .read-label {
  display: inline !important;
  color: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  font-weight: inherit !important;
}

/* Existing AI response should be unmistakable and look clickable. */
html.theme-dark .quick-ask.has-ai-response {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 30px !important;
  padding: 0 10px !important;
  background: #66283A !important;
  color: #FFE0E5 !important;
  border: 1px solid #FB7185 !important;
  border-radius: 8px !important;
  box-shadow: 0 0 0 1px rgba(251, 113, 133, .16) !important;
  font-weight: 900 !important;
}

html.theme-dark .quick-ask.has-ai-response:hover,
html.theme-dark .quick-ask.has-ai-response:focus-visible {
  background: #7A3047 !important;
  color: #FFFFFF !important;
  border-color: #FDA4AF !important;
}

/* Ask-with-no-existing-response remains clearly different. */
html.theme-dark .quick-ask:not(.has-ai-response) {
  background: #172033 !important;
  color: #9CC7FF !important;
  border-color: #42526B !important;
}

/* Keep selected/open as the third state, distinct from merely read. */
html.theme-dark .news-row.selected,
html.theme-dark .news-row.selected > td,
html.theme-dark .news-row.checked.selected,
html.theme-dark .news-row.checked.selected > td {
  background: #123252 !important;
}

html.theme-dark .news-row.selected {
  box-shadow: inset 3px 0 0 #60A5FA !important;
}

@media (max-width: 900px) {
  html.theme-dark .story-row-tools {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
  }

  html.theme-dark .read-indicator.is-read {
    min-height: 28px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    font-size: 12px !important;
  }
}


/* v10.2 — fix mobile source tabs: one dots button, full-width sliding strip */
@media (max-width: 900px) {
  .sourcebar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 38px !important;
    grid-template-areas:
      "tabs dots"
      "filter filter" !important;
    gap: 4px 5px !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 4px 6px 5px !important;
    overflow: hidden !important;
  }

  /* The actual source strip gets the full available width. */
  .source-list {
    grid-area: tabs !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 5px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-x: contain !important;
    touch-action: pan-x !important;
    scrollbar-width: none !important;
    padding: 0 2px 0 0 !important;
    margin: 0 !important;
    scroll-snap-type: x proximity !important;
  }

  .source-list::-webkit-scrollbar {
    display: none !important;
  }

  #customSourceButtons,
  .custom-source-buttons {
    display: inline-flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    flex: 0 0 auto !important;
    width: max-content !important;
    min-width: max-content !important;
    gap: 5px !important;
    white-space: nowrap !important;
  }

  #customSourceButtons > *,
  .custom-source-buttons > *,
  .source-list > * {
    flex: 0 0 auto !important;
  }

  .source-pill,
  .custom-source-pill {
    flex: 0 0 auto !important;
    max-width: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    scroll-snap-align: start !important;
  }

  /* Prevent a source name itself from turning into a fake-looking "..." tab.
     Long names can extend naturally inside the scroll strip. */
  .source-pill .source-name,
  .custom-source-pill .source-name,
  .source-pill span:not(.source-favicon-wrap),
  .custom-source-pill span:not(.source-favicon-wrap) {
    max-width: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
  }

  /* Exactly one explicit "more sources" control. */
  .all-sources-trigger {
    grid-area: dots !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 9px !important;
    font-size: 18px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    position: relative !important;
    z-index: 4 !important;
    pointer-events: auto !important;
  }

  /* Filter goes on its own very compact row, so it doesn't steal width from
     source tabs. */
  .view-filter {
    grid-area: filter !important;
    justify-self: start !important;
    display: inline-flex !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 2px !important;
    margin: 0 !important;
    gap: 1px !important;
    border-radius: 8px !important;
  }

  .filter-button,
  .filter-button.active {
    min-height: 26px !important;
    height: 26px !important;
    padding: 0 9px !important;
    border-radius: 7px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 520px) {
  .sourcebar {
    grid-template-columns: minmax(0, 1fr) 36px !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
    gap: 3px 4px !important;
  }

  .all-sources-trigger {
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 32px !important;
    min-height: 32px !important;
  }

  .view-filter {
    height: 28px !important;
    min-height: 28px !important;
  }

  .filter-button,
  .filter-button.active {
    min-height: 24px !important;
    height: 24px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}


/* v10.3 — prevent Read / Ask overlap in dark mode */
@media (max-width: 900px) {
  .story-meta {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    grid-template-areas:
      "time read controls"
      "ask  ask  controls" !important;
    align-items: center !important;
    column-gap: 7px !important;
    row-gap: 6px !important;
  }

  .story-time {
    grid-area: time !important;
    align-self: center !important;
  }

  .read-indicator {
    grid-area: read !important;
    justify-self: start !important;
    align-self: center !important;
    margin: 0 !important;
  }

  .story-row-tools {
    grid-area: ask !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 7px !important;
    margin: 0 !important;
    min-width: 0 !important;
  }

  .story-row-tools .quick-ask {
    margin: 0 !important;
  }

  .story-actions,
  .story-top-actions,
  .story-link-actions {
    grid-area: controls !important;
    align-self: start !important;
    justify-self: end !important;
  }

  html.theme-dark .read-indicator.is-read {
    min-height: 24px !important;
    height: 24px !important;
    padding: 0 7px !important;
    font-size: 11px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  html.theme-dark .quick-ask,
  html.theme-dark .quick-ask.has-ai-response {
    min-height: 34px !important;
  }
}


/* ============================================================
   v10.4 — Smart RSS discovery + source-management fixes
   ============================================================ */

.current-default-source {
  margin-top: 7px;
  color: #1D4ED8;
  font-size: 12px;
  font-weight: 850;
}

.desktop-default-badge {
  flex: 0 0 auto;
  padding: 3px 7px;
  border-radius: 999px;
  background: #EEF2FF;
  color: #1D4ED8;
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}

.custom-source-setting-item.is-default-source-row {
  background: #FAFBFF;
}

/* Smart discovery results */
.source-discovery-results {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #E2E8F0;
}

.source-discovery-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.source-discovery-head strong {
  color: #0F172A;
  font-size: 14px;
  font-weight: 900;
}

.source-discovery-help {
  margin-top: 3px;
  color: #64748B;
  font-size: 11px;
  line-height: 1.35;
}

.source-discovery-count {
  flex: 0 0 auto;
  padding: 3px 7px;
  border-radius: 999px;
  background: #EEF2FF;
  color: #1D4ED8;
  font-size: 10px;
  font-weight: 900;
}

.source-discovery-list {
  display: grid;
  gap: 7px;
}

.source-discovery-item {
  display: grid;
  grid-template-columns: 22px 28px minmax(0,1fr);
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  background: #FFFFFF;
}

.source-discovery-checkbox {
  width: 18px;
  height: 18px;
  accent-color: #1D4ED8;
}

.source-discovery-favicon-wrap {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 5px;
}

.source-discovery-favicon {
  width: 23px;
  height: 23px;
  object-fit: contain;
}

.source-discovery-favicon-fallback {
  color: #64748B;
  font-size: 11px;
}

.source-discovery-main {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.source-discovery-name-input {
  width: 100%;
  min-width: 0;
  height: 32px;
  padding: 4px 8px;
  border: 1px solid #D9DDE2;
  border-radius: 7px;
  background: #FFFFFF;
  color: #0F172A;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
}

.source-discovery-url {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #64748B;
  font-size: 10px;
}

.source-discovery-meta {
  color: #94A3B8;
  font-size: 10px;
}

.source-discovery-empty {
  padding: 18px 12px;
  border: 1px dashed #CBD5E1;
  border-radius: 9px;
  color: #64748B;
  text-align: center;
  font-size: 12px;
}

.source-discovery-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.source-discovery-actions button {
  min-height: 38px;
  border-radius: 8px;
  font-weight: 850;
}

#sourceDiscoveryAddSelected {
  border: 0;
  background: #1D4ED8;
  color: #FFFFFF;
  padding: 0 14px;
}

#sourceDiscoveryClear {
  border: 1px solid #CBD5E1;
  background: #FFFFFF;
  color: #334155;
  padding: 0 12px;
}

/* Desktop All Sources picker: the desktop ••• now really works. */
@media (min-width: 901px) {
  .all-sources-trigger {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 42px;
    min-width: 42px;
    padding: 0;
  }

  .all-sources-overlay:not(.hidden) {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 110;
  }

  .all-sources-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    border: 0;
    background: rgba(15,23,42,.22);
  }

  .all-sources-sheet {
    position: absolute;
    top: 104px;
    right: max(24px, calc((100vw - 1440px) / 2 + 24px));
    width: min(440px, calc(100vw - 48px));
    max-height: min(72vh, 680px);
    display: grid;
    grid-template-rows: auto auto minmax(0,1fr) auto;
    padding: 14px;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    background: #FFFFFF;
    box-shadow: 0 18px 50px rgba(15,23,42,.18);
  }

  .sheet-grabber {
    display: none;
  }

  .all-sources-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .all-sources-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .all-sources-title-row h2 {
    margin: 0;
    font-size: 20px;
  }

  .sheet-close {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 8px;
    background: #F1F5F9;
    color: #475569;
    font-size: 22px;
  }

  .all-sources-search {
    width: 100%;
    height: 40px;
    margin: 10px 0;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    background: #F8FAFC;
    color: #0F172A;
    padding: 0 11px;
  }

  .all-sources-list {
    overflow-y: auto;
    min-height: 80px;
  }

  .all-source-row {
    width: 100%;
    min-height: 42px;
    display: grid;
    grid-template-columns: 28px minmax(0,1fr) 26px;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
    padding: 5px 8px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: #FFFFFF;
    color: #0F172A;
    text-align: left;
  }

  .all-source-row.active {
    border-color: #1D4ED8;
    background: #EEF2FF;
    color: #1D4ED8;
  }

  .all-sources-actions {
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid #E2E8F0;
  }
}

/* Compact mobile default marker instead of long "Alapértelmezett" badge. */
.mobile-default-mark {
  flex: 0 0 auto;
  color: #1D4ED8;
  font-size: 13px;
  line-height: 1;
}

/* Expanding only the RSS description must not visually demote an unread title. */
@media (max-width: 900px) {
  .news-row:not(.checked) .story-title-mobile-text {
    font-weight: 800 !important;
  }

  .source-discovery-item {
    grid-template-columns: 22px 26px minmax(0,1fr);
    padding: 9px;
  }

  .source-discovery-name-input {
    min-height: 38px;
    font-size: 16px;
  }

  .source-discovery-actions {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
  }

  .mobile-default-badge {
    display: none !important;
  }
}

/* Dark-mode additions for the new UI. */
html.theme-dark .current-default-source {
  color: #93C5FD !important;
}

html.theme-dark .desktop-default-badge,
html.theme-dark .source-discovery-count {
  background: #172554 !important;
  color: #93C5FD !important;
}

html.theme-dark .custom-source-setting-item.is-default-source-row,
html.theme-dark .source-discovery-item {
  background: #111827 !important;
  border-color: #334155 !important;
}

html.theme-dark .source-discovery-head strong {
  color: #F8FAFC !important;
}

html.theme-dark .source-discovery-help,
html.theme-dark .source-discovery-url,
html.theme-dark .source-discovery-meta,
html.theme-dark .source-discovery-empty {
  color: #94A3B8 !important;
}

html.theme-dark .source-discovery-name-input {
  background: #172033 !important;
  color: #F8FAFC !important;
  border-color: #334155 !important;
}

html.theme-dark #sourceDiscoveryClear {
  background: #172033 !important;
  color: #E5E7EB !important;
  border-color: #334155 !important;
}

html.theme-dark .mobile-default-mark {
  color: #93C5FD !important;
}

@media (min-width: 901px) {
  html.theme-dark .all-sources-sheet,
  html.theme-dark .all-source-row {
    background: #111827 !important;
    color: #F8FAFC !important;
    border-color: #334155 !important;
  }

  html.theme-dark .all-sources-search,
  html.theme-dark .sheet-close {
    background: #172033 !important;
    color: #F8FAFC !important;
    border-color: #334155 !important;
  }

  html.theme-dark .all-source-row.active {
    background: #172554 !important;
    color: #93C5FD !important;
    border-color: #3B82F6 !important;
  }

  html.theme-dark .all-sources-actions {
    border-color: #334155 !important;
  }
}


/* ============================================================
   v10.5 — mobile reading efficiency + sticky helpers
   ============================================================ */

/* Desktop brand is always NEWS; the old eyebrow line is gone. */
@media (min-width: 901px) {
  .brand {
    display: flex !important;
    align-items: center !important;
    min-width: 150px;
  }

  .brand h1 {
    margin: 0 !important;
  }
}

/* Login email uses a one-line textarea so Apple's normal text editing /
   replacement pipeline is available, while visually remaining an input. */
#emailInput {
  box-sizing: border-box;
  width: 100%;
  min-height: 42px;
  height: 42px;
  max-height: 42px;
  resize: none;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 14px;
  background: #FFFFFF;
  color: var(--text);
  outline: none;
  font: inherit;
  line-height: 22px;
  white-space: nowrap;
  -webkit-user-select: text !important;
  user-select: text !important;
  -webkit-touch-callout: default !important;
}

#emailInput:focus {
  border-color: #98A2B3;
  box-shadow: 0 0 0 3px rgba(29,78,216,.08);
}

/* Sticky active-source indicator. */
.sticky-source-indicator {
  position: fixed;
  z-index: 74;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  max-width: min(72vw, 420px);
  padding: 5px 10px;
  border: 1px solid #DCE3EC;
  border-radius: 999px;
  background: rgba(255,255,255,.94);
  color: #0F172A;
  box-shadow: 0 8px 24px rgba(15,23,42,.12);
  backdrop-filter: blur(10px);
  font-size: 12px;
  font-weight: 850;
  pointer-events: none;
}

.sticky-source-indicator.hidden {
  display: none !important;
}

.sticky-source-favicon-wrap {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 50%;
}

.sticky-source-favicon-wrap img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.sticky-source-fallback {
  font-size: 7px;
  font-weight: 900;
  color: #1D4ED8;
}

.sticky-source-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (min-width: 901px) {
  .sticky-source-indicator {
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
  }
}

@media (max-width: 900px) {
  .sticky-source-indicator {
    top: 68px;
    left: 10px;
    max-width: calc(100vw - 20px);
  }
}

/* Back to Top */
.back-to-top {
  position: fixed;
  right: 20px;
  bottom: 22px;
  z-index: 76;
  min-height: 40px;
  padding: 0 13px;
  border: 1px solid #CBD5E1;
  border-radius: 999px;
  background: rgba(255,255,255,.96);
  color: #1D4ED8;
  box-shadow: 0 8px 24px rgba(15,23,42,.14);
  backdrop-filter: blur(10px);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 900;
  cursor: pointer;
}

.back-to-top.hidden {
  display: none !important;
}

@media (max-width: 900px) {
  .back-to-top {
    right: 12px;
    bottom: calc(58px + env(safe-area-inset-bottom));
    min-width: 42px;
    min-height: 42px;
    padding: 0 11px;
    font-size: 13px;
  }
}

/* Footer */
.app-footer {
  padding: 28px 12px 22px;
  text-align: center;
  color: #64748B;
}

.d2-footer-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: .01em;
}

.d2-footer-mark {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #0F172A;
  color: #FFFFFF;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: -.03em;
  text-transform: lowercase;
}

.d2-footer-copy strong {
  color: #334155;
  font-weight: 850;
}

@media (max-width: 900px) {
  .app-footer {
    padding: 22px 10px calc(64px + env(safe-area-inset-bottom));
  }

  .d2-footer-brand {
    font-size: 10px;
    gap: 7px;
  }

  .d2-footer-mark {
    width: 20px;
    height: 20px;
    border-radius: 6px;
  }
}

/* Mobile story layout:
   the thumbnail floats beside the first title lines, then the title can use
   the full width once it reaches below the image. Description starts below
   the image so it always gets the full line width. */
@media (max-width: 900px) {
  body[data-text-size="extra-small"] {
    --story-thumb-w: 76px;
    --story-thumb-h: 62px;
  }

  body[data-text-size="small"] {
    --story-thumb-w: 82px;
    --story-thumb-h: 66px;
  }

  body[data-text-size="standard"] {
    --story-thumb-w: 88px;
    --story-thumb-h: 70px;
  }

  body[data-text-size="large"] {
    --story-thumb-w: 94px;
    --story-thumb-h: 76px;
  }

  body[data-text-size="extra-large"] {
    --story-thumb-w: 100px;
    --story-thumb-h: 80px;
  }

  .news-row {
    display: block !important;
    position: relative !important;
  }

  .news-row::after {
    content: "";
    display: table;
    clear: both;
  }

  .story-meta {
    width: 100% !important;
    margin-bottom: 2px !important;
  }

  .story-image-cell {
    display: block !important;
    float: right !important;
    width: var(--story-thumb-w) !important;
    margin: 7px 0 7px 12px !important;
    padding: 0 !important;
  }

  .story-image,
  .story-image-placeholder {
    width: var(--story-thumb-w) !important;
    height: var(--story-thumb-h) !important;
    max-width: none !important;
    object-fit: cover !important;
    border-radius: 8px !important;
  }

  .story-title-cell {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 7px 0 0 !important;
  }

  .story-title-wrap {
    display: block !important;
    padding-right: 0 !important;
  }

  /* Let the title naturally wrap around the float and then become full width. */
  .story-title-mobile-text {
    display: inline !important;
  }

  .story-desc {
    display: block !important;
    clear: both !important;
    width: 100% !important;
    padding-top: 10px !important;
  }

  .story-desc,
  .story-desc-text,
  .news-row.checked:not(.selected) .story-desc,
  .news-row.checked:not(.selected) .story-desc-text {
    color: #334155 !important;
  }

  /* Top-right save/outbound actions remain absolute and don't reserve a fake
     permanent column beside the title. */
  .news-row:has(.save-article-button) .story-title-cell,
  .news-row:has(.remove-link-button) .story-title-cell {
    padding-right: 0 !important;
  }
}

/* Dark equivalents */
html.theme-dark #emailInput {
  background: #172033 !important;
  color: #F8FAFC !important;
  border-color: #334155 !important;
}

html.theme-dark .sticky-source-indicator,
html.theme-dark .back-to-top {
  background: rgba(15,23,42,.96) !important;
  color: #93C5FD !important;
  border-color: #334155 !important;
}

html.theme-dark .d2-footer-mark {
  background: #E2E8F0 !important;
  color: #0F172A !important;
}

html.theme-dark .app-footer,
html.theme-dark .d2-footer-copy {
  color: #94A3B8 !important;
}

html.theme-dark .d2-footer-copy strong {
  color: #E2E8F0 !important;
}

@media (max-width: 900px) {
  html.theme-dark .story-desc,
  html.theme-dark .story-desc-text,
  html.theme-dark .news-row.checked:not(.selected) .story-desc,
  html.theme-dark .news-row.checked:not(.selected) .story-desc-text {
    color: #D3DAE6 !important;
  }
}

/* Summary numbering now matches the primary NEWS blue. */
.ai-number-list li::marker {
  color: #1D4ED8 !important;
  font-weight: 900 !important;
}

html.theme-dark .ai-number-list li::marker {
  color: #60A5FA !important;
}


/* v10.6 — expanding RSS short description must not demote unread title */
@media (max-width: 900px) {
  .news-row:not(.checked) .story-title,
  .news-row:not(.checked) .story-title-mobile-text {
    font-weight: 800 !important;
  }

  .news-row:not(.checked) .story-desc-text.expanded ~ *,
  .news-row:not(.checked) .story-title {
    font-weight: 800 !important;
  }
}


/* v10.7 — mobile RSS descriptions expand by tapping the text itself */
@media (max-width: 900px) {
  .story-desc-toggle,
  .news-row:not(.selected) .story-desc-toggle,
  .story-desc-toggle.is-unneeded {
    display: none !important;
  }

  .story-desc-text {
    cursor: default !important;
    -webkit-tap-highlight-color: transparent;
  }

  .story-desc-text.description-expandable {
    cursor: pointer !important;
    touch-action: manipulation;
  }

  /* No extra link/label is shown; the native line-clamp ellipsis is the cue. */
  .story-desc-text.description-expandable:not(.expanded) {
    -webkit-user-select: none;
    user-select: none;
  }

  .story-desc-text.expanded {
    -webkit-user-select: text;
    user-select: text;
  }

  /* Reading the RSS description still does not change unread title emphasis. */
  .news-row:not(.checked) .story-title,
  .news-row:not(.checked) .story-title-mobile-text {
    font-weight: 800 !important;
  }
}


/* v10.9 — whole short-summary block is the tap target */
@media (max-width: 900px) {
  .story-desc.description-area-expandable {
    cursor: pointer !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: rgba(29, 78, 216, .06);
  }

  .story-desc.description-area-expandable .story-desc-text {
    cursor: pointer !important;
  }

  /* Ensure the tappable area spans the full available summary width,
     not just the glyphs on the last visible line. */
  .story-desc.description-area-expandable,
  .story-desc.description-area-expandable .story-desc-text {
    width: 100% !important;
  }

  .story-desc.description-area-expandable .story-desc-text {
    display: -webkit-box !important;
  }

  .story-desc.description-area-expandable .story-desc-text.expanded {
    display: block !important;
  }
}


/* v11.1 — final mobile RSS description interaction:
   tap logic measures truncation synchronously; CSS classes are only cosmetic. */
@media (max-width: 900px) {
  .story-desc {
    -webkit-tap-highlight-color: rgba(29, 78, 216, .05);
  }

  .story-desc-text.expanded {
    display: block !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
    overflow: visible !important;
  }

  /* Expanding/collapsing the RSS description never changes unread emphasis. */
  .news-row:not(.checked) .story-title,
  .news-row:not(.checked) .story-title-mobile-text {
    font-weight: 800 !important;
  }
}


/* ============================================================
   v11.2 — local Today / Yesterday / Earlier filters
   ============================================================ */

/* The global All / Unread filter is gone. Keep mobile source navigation
   on a single compact row instead of reserving an empty second grid row. */
@media (max-width: 900px) {
  .sourcebar {
    grid-template-areas: "tabs dots" !important;
    grid-template-rows: auto !important;
    padding-bottom: 4px !important;
  }
}

.day-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.day-heading-label {
  flex: 0 1 auto;
  min-width: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: uppercase;
  white-space: nowrap;
}

.day-filter-controls {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  margin-left: auto;
  letter-spacing: 0;
  text-transform: none;
}

.day-filter-button {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  border-radius: 999px;
  min-height: 26px;
  padding: 3px 9px;
  background: transparent;
  color: #64748B;
  font-family: inherit;
  font-size: 11px;
  line-height: 1;
  font-weight: 850;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
}

.day-filter-button:hover:not(:disabled) {
  background: #E2E8F0;
  color: #334155;
}

.day-filter-button.active {
  background: #DBEAFE;
  color: #1D4ED8;
}

.day-filter-button:disabled {
  opacity: .42;
  cursor: default;
}

@media (max-width: 900px) {
  .day-row td {
    padding-top: 10px !important;
    padding-bottom: 8px !important;
  }

  .day-heading {
    gap: 7px;
    flex-wrap: nowrap;
  }

  .day-heading-label {
    font-size: 12px;
  }

  .day-filter-controls {
    gap: 3px;
  }

  .day-filter-button {
    min-height: 28px;
    padding: 4px 8px;
    font-size: 11px;
  }
}

@media (max-width: 390px) {
  .day-heading {
    flex-wrap: wrap;
  }

  .day-filter-controls {
    width: 100%;
    justify-content: flex-start;
    margin-left: 0;
  }
}

html.theme-dark .day-filter-button {
  color: #94A3B8 !important;
}

html.theme-dark .day-filter-button:hover:not(:disabled) {
  background: #243044 !important;
  color: #E5E7EB !important;
}

html.theme-dark .day-filter-button.active {
  background: #172554 !important;
  color: #93C5FD !important;
}

/* Back-to-Top is intentionally icon-only. */
.back-to-top {
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  justify-content: center !important;
  gap: 0 !important;
  font-size: 21px !important;
  line-height: 1 !important;
}

.back-to-top-icon {
  display: block;
  transform: translateY(-1px);
}

@media (max-width: 900px) {
  .back-to-top {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
  }
}


/* ============================================================
   v11.3 — date-group filters sit directly next to the date label
   ============================================================ */

.day-heading {
  justify-content: flex-start !important;
  gap: 10px !important;
}

.day-heading-label {
  flex: 0 0 auto !important;
}

.day-filter-controls {
  margin-left: 0 !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  width: auto !important;
}

.day-filter-button {
  min-height: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #64748B !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
}

.day-filter-button:hover:not(:disabled) {
  background: transparent !important;
  color: #475569 !important;
}

.day-filter-button.active {
  background: transparent !important;
  color: #1D4ED8 !important;
}

.day-filter-button:disabled {
  background: transparent !important;
  color: #CBD5E1 !important;
  opacity: 1 !important;
}

html.theme-dark .day-filter-button {
  background: transparent !important;
  color: #94A3B8 !important;
}

html.theme-dark .day-filter-button:hover:not(:disabled) {
  background: transparent !important;
  color: #CBD5E1 !important;
}

html.theme-dark .day-filter-button.active {
  background: transparent !important;
  color: #60A5FA !important;
}

html.theme-dark .day-filter-button:disabled {
  background: transparent !important;
  color: #475569 !important;
}

@media (max-width: 900px) {
  .day-heading {
    justify-content: flex-start !important;
    align-items: baseline !important;
    gap: 9px !important;
    flex-wrap: nowrap !important;
  }

  .day-filter-controls {
    width: auto !important;
    margin-left: 0 !important;
    justify-content: flex-start !important;
    gap: 10px !important;
  }

  .day-filter-button {
    min-height: 0 !important;
    padding: 0 !important;
    font-size: 11px !important;
  }
}

@media (max-width: 390px) {
  .day-heading {
    flex-wrap: nowrap !important;
  }

  .day-filter-controls {
    width: auto !important;
  }
}


/* ============================================================
   v11.4 — AI response language moved from article toolbar to Settings
   ============================================================ */

.ai-language-settings-row {
  margin-top: 16px;
}

.ai-language-settings-row .settings-label-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
}

.ai-language-settings-control {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 5px;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  background: #F8FAFC;
}

.ai-language-settings-choice {
  min-height: 46px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #475569;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-weight: 800;
  cursor: pointer;
}

.ai-language-settings-choice.active {
  background: #1D4ED8;
  color: #FFFFFF;
}

html.theme-dark .ai-language-settings-control {
  background: var(--dark-soft) !important;
  border-color: var(--dark-border) !important;
}

html.theme-dark .ai-language-settings-choice {
  background: var(--dark-soft) !important;
  color: var(--dark-body) !important;
  border-color: var(--dark-border) !important;
}

html.theme-dark .ai-language-settings-choice.active {
  background: #1D4ED8 !important;
  color: #FFFFFF !important;
}


/* v11.5 — compact AI language selector: EN / HU only */
.ai-language-settings-control {
  grid-template-columns: repeat(2, minmax(64px, 88px)) !important;
  justify-content: start !important;
  width: fit-content !important;
}

.ai-language-settings-choice {
  min-width: 64px !important;
  min-height: 40px !important;
  padding: 0 16px !important;
  letter-spacing: .04em;
}


/* v11.6 — interface language switcher shows EN / HU only */
#uiLanguageLabel,
.ui-language-label,
.ui-label {
  display: none !important;
}


/* ============================================================
   v11.7 — definitive footer lockup; isolated from older footer CSS
   ============================================================ */
.d2-footer-v2 {
  padding: 26px 12px 22px !important;
  text-align: center !important;
}

.d2-signature-v2 {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  color: #64748B !important;
  font-family: inherit !important;
  font-size: 11px !important;
  line-height: 1 !important;
  letter-spacing: .01em !important;
  white-space: nowrap !important;
}

.d2-powered-v2 {
  color: #94A3B8 !important;
  font-weight: 650 !important;
}

.d2-mark-v2 {
  width: 22px !important;
  height: 22px !important;
  border-radius: 7px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 22px !important;
  background: #0F172A !important;
  color: #FFFFFF !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: -.03em !important;
  text-transform: lowercase !important;
}

.d2-name-v2 {
  color: #334155 !important;
  font-weight: 850 !important;
}

html.theme-dark .d2-signature-v2,
html.theme-dark .d2-powered-v2 {
  color: #94A3B8 !important;
}

html.theme-dark .d2-mark-v2 {
  background: #E2E8F0 !important;
  color: #0F172A !important;
}

html.theme-dark .d2-name-v2 {
  color: #E2E8F0 !important;
}

@media (max-width: 900px) {
  .d2-footer-v2 {
    padding: 22px 10px calc(64px + env(safe-area-inset-bottom)) !important;
  }

  .d2-signature-v2 {
    gap: 6px !important;
    font-size: 10px !important;
  }

  .d2-mark-v2 {
    width: 20px !important;
    height: 20px !important;
    flex-basis: 20px !important;
    border-radius: 6px !important;
  }
}

/* v11.7 — mobile description interaction remains visually explicit */
@media (max-width: 900px) {
  .story-desc-text.expanded {
    display: block !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
    overflow: visible !important;
  }

  .news-row:not(.checked) .story-title,
  .news-row:not(.checked) .story-title-mobile-text {
    font-weight: 800 !important;
  }
}


/* ============================================================
   v11.9 — mobile selected-story / AI-panel layout hardening
   ============================================================ */
@media (max-width: 900px) {
  /* A story card owns its floated thumbnail and all of its content.
     flow-root avoids Safari table/block/float height edge cases. */
  .news-row {
    display: flow-root !important;
    width: 100% !important;
    position: relative !important;
    overflow: visible !important;
  }

  /* Opening a story by tapping its title must NOT automatically turn the RSS
     description into a full-length block. Keep the same compact 3-line list
     treatment until the description itself is explicitly tapped. */
  .news-row.selected .story-desc-text:not(.expanded) {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
    line-clamp: 3 !important;
    max-height: 4.35em !important;
    overflow: hidden !important;
  }

  /* The selected card ends before the AI controls begin. */
  .news-row.selected {
    margin-bottom: 0 !important;
  }

  .analysis-row {
    display: block !important;
    clear: both !important;
    width: 100% !important;
    margin: 0 !important;
    position: relative !important;
    z-index: 2 !important;
    overflow: visible !important;
  }

  .analysis-row > td {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
  }

  .analysis-panel {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 14px 14px 18px !important;
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 1 !important;
    isolation: isolate !important;
    overflow: hidden !important;
    background: #FFFFFF !important;
    border: 0 !important;
    border-bottom: 1px solid #E2E8F0 !important;
    border-radius: 0 !important;
  }

  .analysis-panel *,
  .analysis-topline,
  .analysis-actions,
  .ask-form {
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .analysis-topline {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    gap: 9px !important;
    margin: 0 !important;
  }

  .analysis-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    gap: 7px !important;
  }

  .analysis-button {
    width: 100% !important;
    min-height: 44px !important;
    margin: 0 !important;
  }

  .ask-form {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: none !important;
    gap: 7px !important;
    margin: 0 !important;
  }

  .ask-submit {
    width: auto !important;
    min-width: 92px !important;
    min-height: 44px !important;
    margin: 0 !important;
  }

  .ask-input {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 44px !important;
    margin: 0 !important;
  }

  html.theme-dark .analysis-panel {
    background: #111C2F !important;
    border-color: #334155 !important;
  }
}

@media (max-width: 420px) {
  .analysis-panel {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .analysis-actions {
    gap: 6px !important;
  }

  .ask-form {
    grid-template-columns: 1fr !important;
  }

  .ask-submit,
  .ask-input {
    width: 100% !important;
  }
}


/* ============================================================
   v12.0 — article titles always remain bold
   Read/unread is indicated by row/status styling, not title weight.
   ============================================================ */
.story-title,
.story-title a,
.story-title-mobile-text,
.news-row.checked .story-title,
.news-row.checked .story-title a,
.news-row.checked .story-title-mobile-text,
.news-row.selected .story-title,
.news-row.selected .story-title a,
.news-row.selected .story-title-mobile-text {
  font-weight: 800 !important;
}

@media (max-width: 900px) {
  .story-title,
  .story-title a,
  .story-title-mobile-text,
  .news-row.checked .story-title,
  .news-row.checked .story-title a,
  .news-row.checked .story-title-mobile-text,
  .news-row.selected .story-title,
  .news-row.selected .story-title a,
  .news-row.selected .story-title-mobile-text {
    font-weight: 800 !important;
  }
}

/* ============================================================
   v12.1 — 2Day brand, collapsible older groups, original footer mark
   ============================================================ */
.brand-home-button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: transparent;
  cursor: pointer;
  overflow: hidden;
}

.brand-home-button:focus-visible {
  outline: 3px solid rgba(29,78,216,.24);
  outline-offset: 2px;
}

.brand-home-logo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.day-collapse-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: inherit;
  cursor: pointer;
}

.day-collapse-chevron {
  display: inline-block;
  font-size: 15px;
  line-height: 1;
  transform: rotate(0deg);
  transition: transform .15s ease;
  transform-origin: center;
}

.day-row.collapsed .day-collapse-chevron {
  transform: rotate(-90deg);
}

.d2-footer-v3 {
  padding: 26px 12px 22px !important;
  text-align: center !important;
}

.d2-signature-v3 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #94A3B8;
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
}

.d2-powered-v3 {
  color: inherit;
  font-weight: 650;
}

.d2-original-logo-v3 {
  display: inline-block;
  width: 22px;
  height: 23px;
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask: url("2day-icon-light.svg") center / contain no-repeat;
  mask: url("2day-icon-light.svg") center / contain no-repeat;
}

html.theme-dark .d2-signature-v3 {
  color: #94A3B8;
}

@media (max-width: 900px) {
  .brand-home-button {
    width: 44px;
    height: 44px;
    border-radius: 11px;
  }

  .d2-footer-v3 {
    padding: 22px 10px calc(64px + env(safe-area-inset-bottom)) !important;
  }

  .d2-signature-v3 {
    gap: 7px;
    font-size: 10px;
  }

  .d2-original-logo-v3 {
    width: 20px;
    height: 21px;
  }
}



/* ============================================================
   v12.4 QF02 — canonical component styles
   These rules replace the conflicting legacy read/mobile/settings
   component states rather than layering state-specific typography.
   ============================================================ */
:root {
  --qf02-ui: 13px;
  --qf02-meta: 12px;
  --qf02-title: 17px;
  --qf02-body: 15px;
  --qf02-action: 12px;
  --qf02-image-w: 84px;
  --qf02-image-h: 58px;
  --qf02-gap: 12px;
}

/* Brand must remain visible at every breakpoint. */
.brand-home-button {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  flex: 0 0 auto !important;
}
.brand-home-logo {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

/* ---- Story component: one layout model for read and unread ---- */
.news-row {
  position: relative;
  display: table-row !important;
  background: transparent !important;
}
.news-row > .story-card-cell {
  display: table-cell !important;
  width: auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
.news-row.checked > .story-card-cell,
.news-row.checked + .news-row.checked > .story-card-cell,
.news-row.selected > .story-card-cell {
  border: 0 !important;
  background: transparent !important;
}

.story-card {
  display: grid;
  grid-template-columns: 190px var(--qf02-image-w) minmax(220px, .8fr) minmax(280px, 1.2fr);
  grid-template-areas: "meta media title desc";
  column-gap: var(--qf02-gap);
  align-items: start;
  box-sizing: border-box;
  padding: 12px 14px;
  border-bottom: 1px solid #E5E7EB;
  background: #FFFFFF;
  transition: background .12s ease;
}
.news-row:hover .story-card { background: #FAFBFC; }
.news-row.checked .story-card { background: #F8F9FD; }
.news-row.selected .story-card {
  background: #F8FBFF;
  border-bottom-color: transparent;
  box-shadow: inset 3px 0 0 var(--primary);
}
.news-row.checked.selected .story-card { background: #F4F6FE; }

.story-meta {
  grid-area: meta !important;
  display: block !important;
  min-width: 0;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  text-align: left !important;
}
.story-meta-line {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 5px;
  min-height: 28px;
}
.story-time {
  flex: 0 0 auto;
  color: #344054 !important;
  font-size: var(--qf02-meta) !important;
  line-height: 1.25 !important;
  font-weight: 850 !important;
  white-space: nowrap;
  text-align: left !important;
}
.story-source-name {
  display: block;
  margin-top: 3px;
  color: #667085;
  font-size: 11px;
  line-height: 1.25;
}

.quick-ask.has-ai-response {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 26px !important;
  margin: 0 !important;
  padding: 3px 7px !important;
  border: 1px solid #D7DEE8 !important;
  border-radius: 999px !important;
  background: #F1F5F9 !important;
  color: #475569 !important;
  font-size: 10px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  white-space: nowrap;
  box-shadow: none !important;
}
.news-row.selected .quick-ask.has-ai-response {
  display: inline-flex !important;
}
.quick-ask.has-ai-response:hover {
  background: #E8EEF6 !important;
  border-color: #CBD5E1 !important;
  color: #334155 !important;
}
.quick-ask.hidden { display: none !important; }
.quick-ai-icon { font-size: 10px; }
.quick-ai-chevron { font-size: 8px; opacity: .7; }

.read-indicator {
  display: inline-flex !important;
  width: auto !important;
  justify-content: flex-start !important;
  align-items: center;
  min-height: 24px;
  padding: 0 5px;
  color: #98A2B3 !important;
  font-size: 9px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
}
.read-indicator.is-read { color: #64748B !important; }

.story-image-cell {
  grid-area: media !important;
  display: flex !important;
  float: none !important;
  margin: 0 !important;
  flex-direction: column;
  align-items: stretch;
  width: var(--qf02-image-w) !important;
  min-width: var(--qf02-image-w);
  padding: 0 !important;
}
.story-image,
.story-image-placeholder {
  display: block !important;
  width: var(--qf02-image-w) !important;
  height: var(--qf02-image-h) !important;
  border-radius: 7px !important;
  object-fit: cover;
  background: #EEF2F7;
}
.story-media-action {
  align-self: flex-end;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  margin-top: 4px;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: transparent !important;
  color: #98A2B3 !important;
}
.story-media-action:hover,
.story-media-action:focus-visible {
  background: #EEF2FF !important;
  color: #1D4ED8 !important;
  outline: none;
}
.save-article-button.is-saved {
  background: #EEF2FF !important;
  color: #1D4ED8 !important;
  opacity: 1 !important;
  cursor: pointer !important;
}
.save-article-button.is-saving {
  opacity: .58 !important;
  cursor: wait !important;
}
.remove-link-button.story-media-action {
  color: #98A2B3 !important;
}
.remove-link-button.story-media-action:hover { color: #B42318 !important; }

.story-title-cell {
  grid-area: title !important;
  min-width: 0;
  padding: 0 !important;
}
.story-title-trigger {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  color: #111827 !important;
  font-family: inherit;
  font-size: var(--qf02-title) !important;
  line-height: 1.35 !important;
  font-weight: 800 !important;
  cursor: pointer;
  text-decoration: none !important;
  -webkit-tap-highlight-color: transparent !important;
  touch-action: manipulation;
  outline: none;
}
.news-row.checked .story-title,
.news-row.checked.selected .story-title,
.news-row.checked:not(.selected) .story-title,
.news-row.checked .story-title-trigger {
  color: #111827 !important;
  font-size: var(--qf02-title) !important;
  line-height: 1.35 !important;
  font-weight: 800 !important;
}
.story-title-trigger:hover,
.story-title-trigger:active {
  color: #111827 !important;
  background: transparent !important;
  text-decoration: none !important;
}
.story-title-trigger:focus-visible {
  outline: 2px solid rgba(29,78,216,.35);
  outline-offset: 2px;
  border-radius: 3px;
}

.story-desc {
  grid-area: desc !important;
  position: relative;
  min-width: 0;
  padding: 0 !important;
  color: #475467 !important;
  font-size: var(--qf02-body) !important;
  line-height: 1.48 !important;
  font-weight: 400 !important;
  cursor: pointer;
}
.news-row.checked .story-desc,
.news-row.checked.selected .story-desc,
.news-row.checked:not(.selected) .story-desc {
  color: #475467 !important;
  font-size: var(--qf02-body) !important;
  line-height: 1.48 !important;
  font-weight: 400 !important;
}
.story-desc-text:not(.expanded) {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 3 !important;
  overflow: hidden !important;
}
.story-desc-text.expanded {
  display: block !important;
  -webkit-line-clamp: unset !important;
  overflow: visible !important;
}
.story-desc-toggle { display: none !important; }
.article-date {
  position: static !important;
  margin-top: 5px;
  text-align: right;
  color: #98A2B3;
  font-size: 10px;
}
.saved-mobile-meta { margin-top: 5px; }

/* Analysis row never creates a duplicate divider around selected/read stories. */
.analysis-row > td {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
.analysis-panel {
  margin: 0;
  padding: 9px 14px 12px !important;
  border: 0 !important;
  border-bottom: 1px solid #E5E7EB !important;
  background: #F8FBFF !important;
  box-shadow: none !important;
}
.analysis-topline {
  display: block !important;
  width: 100% !important;
}
.analysis-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center;
  gap: 4px !important;
  min-width: 0;
}
.analysis-button,
.analysis-original-link {
  box-sizing: border-box;
  width: auto !important;
  flex: 0 0 auto !important;
  min-height: 34px !important;
  padding: 5px 9px !important;
  border: 1px solid #D7DEE8 !important;
  border-radius: 8px !important;
  background: #F1F5F9 !important;
  color: #334155 !important;
  font-family: inherit;
  font-size: var(--qf02-action) !important;
  line-height: 1.05 !important;
  font-weight: 750 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 4px;
  white-space: nowrap;
}
.analysis-button:hover,
.analysis-original-link:hover {
  background: #E8EEF6 !important;
  color: var(--primary) !important;
}
.analysis-button.completed { opacity: .58; }
.analysis-external-icon { font-size: 10px; }
.ask-form {
  display: flex !important;
  align-items: center;
  width: min(680px, 100%) !important;
  max-width: 680px !important;
  min-width: 0 !important;
  margin: 7px 0 0 !important;
  gap: 0 !important;
}
.ask-input-shell {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
}
.ask-form.hidden { display: none !important; }
.ask-input {
  flex: 1 1 auto;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 36px !important;
  height: 36px !important;
  padding: 6px 46px 6px 9px !important;
  border-radius: 9px !important;
}
.ask-submit {
  position: absolute !important;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: #E8EEF6 !important;
  color: #1D4ED8 !important;
  font-size: 19px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
}
.ask-submit:hover,
.ask-submit:focus-visible {
  background: #DBE7FF !important;
  outline: 2px solid rgba(29,78,216,.3);
  outline-offset: 1px;
}

/* ---- Date sections ---- */
.day-row > td {
  padding: 4px 8px !important;
}
.day-heading {
  display: flex;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  min-height: 32px;
  font-size: var(--qf02-ui) !important;
  line-height: 1.1 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.day-collapse-button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 32px;
  padding: 0 !important;
  border: 0;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: inherit !important;
  line-height: inherit !important;
  font-weight: 850 !important;
}
.day-heading-label {
  font-size: inherit !important;
  line-height: inherit !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.day-collapse-chevron {
  width: 12px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-size: 9px !important;
  line-height: 1 !important;
  transform: none !important;
}
.day-filter-controls {
  display: inline-flex !important;
  align-items: center;
  gap: 0 !important;
  margin: 0 !important;
}
.day-filter-button {
  appearance: none;
  border: 0 !important;
  background: transparent !important;
  min-height: 32px !important;
  padding: 0 4px !important;
  color: #64748B !important;
  font-family: inherit;
  font-size: inherit !important;
  line-height: inherit !important;
  font-weight: 700 !important;
}
.day-filter-button + .day-filter-button::before {
  content: "·";
  margin-right: 8px;
  color: #94A3B8;
}
.day-filter-button.active {
  color: #1D4ED8 !important;
  background: #EEF4FF !important;
  border-radius: 7px !important;
  font-weight: 850 !important;
}
.day-filter-button:disabled { opacity: .45 !important; }

/* ---- Three consistent reading sizes ---- */
body[data-text-size="small"] {
  --qf02-title: 15px;
  --qf02-body: 13px;
  --qf02-ui: 12px;
  --qf02-meta: 11px;
  --qf02-action: 11px;
}
body[data-text-size="standard"] {
  --qf02-title: 17px;
  --qf02-body: 15px;
  --qf02-ui: 13px;
  --qf02-meta: 12px;
  --qf02-action: 12px;
}
body[data-text-size="large"] {
  --qf02-title: 20px;
  --qf02-body: 18px;
  --qf02-ui: 15px;
  --qf02-meta: 13px;
  --qf02-action: 13px;
}

/* ---- AI response typography: match article reading scale ----
   Generated answer body text follows the short-description size at every
   user text-size setting. AI subheadings never exceed the article title. */
.analysis-history,
.analysis-result,
.analysis-section-body,
.analysis-section-preview,
.history-answer,
.history-question,
.ask-answer-body,
.ask-answer-preview,
.analysis-result .answer,
.analysis-preview-text,
.ask-preview-text {
  font-size: var(--qf02-body) !important;
  line-height: 1.48 !important;
}

.ai-subheading {
  font-size: var(--qf02-body) !important;
  line-height: 1.4 !important;
}

.analysis-section-header .result-label,
.answer-section-heading {
  font-size: var(--qf02-ui) !important;
  line-height: 1.15 !important;
}

.analysis-preview-more,
.ask-preview-more,
.sources-title,
.sources a {
  font-size: var(--qf02-ui) !important;
}

/* ---- Settings Round 2 ---- */
#settingsBtn, #accountMenu, #logoutBtn { display: none !important; }
.account-menu-button:not(.hidden) { display: inline-flex !important; }
.settings-panel {
  position: fixed !important;
  inset: 50% auto auto 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 500 !important;
  width: min(580px, calc(100vw - 32px)) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: min(760px, calc(100dvh - 32px)) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain;
  box-sizing: border-box;
  border: 1px solid #D8E0EA !important;
  border-radius: 16px !important;
  background: #FFFFFF !important;
  box-shadow: 0 24px 70px rgba(15,23,42,.22) !important;
  padding: 18px !important;
}
.settings-panel.hidden { display: none !important; }
body.settings-open::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 490;
  background: rgba(15,23,42,.22);
  backdrop-filter: blur(2px);
}
.settings-panel-head {
  position: sticky !important;
  top: -18px !important;
  z-index: 2 !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: -18px -18px 8px !important;
  padding: 16px 18px 12px !important;
  background: inherit !important;
  border-bottom: 1px solid #E2E8F0 !important;
}
.settings-title { font-size: 18px !important; font-weight: 850 !important; }
.settings-close {
  width: 38px !important;
  height: 38px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  font-size: 25px !important;
  line-height: 1 !important;
}
.settings-row {
  margin: 0 !important;
  padding: 13px 0 !important;
}
.settings-row + .settings-row { border-top: 1px solid #EEF2F6; }
.settings-inline-heading,
.settings-inline-control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.settings-inline-heading label,
.settings-inline-control label,
.settings-row > label {
  margin: 0 !important;
  color: #334155;
  font-size: 14px !important;
  line-height: 1.25;
  font-weight: 800;
}
.account-plan-inline {
  margin-right: auto;
  color: #64748B;
  font-size: 14px;
  line-height: 1.25;
  font-weight: 800;
}
.account-info-line {
  margin-top: 7px;
  display: flex !important;
  align-items: center;
  gap: 8px !important;
  color: #475569;
  font-size: 13px;
  font-weight: 600;
}
/* Sign out lives at the bottom and requires explicit confirmation. */
.settings-signout-row {
  padding-bottom: 2px !important;
}
.settings-signout-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 7px 10px;
  border: 1px solid #FECACA;
  border-radius: 9px;
  background: #FFF7F7;
  color: #B42318;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
}
.settings-signout-button:hover,
.settings-signout-button:focus-visible {
  background: #FEF2F2;
  border-color: #FCA5A5;
  outline: none;
}
.settings-signout-button svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
}
.signout-confirm {
  margin-top: 9px;
  padding: 10px;
  border: 1px solid #FECACA;
  border-radius: 10px;
  background: #FFF7F7;
}
.signout-confirm.hidden { display: none !important; }
.signout-confirm-text {
  color: #7F1D1D;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 700;
}
.signout-confirm-actions {
  display: flex;
  gap: 7px;
  margin-top: 9px;
}
.signout-confirm-actions button {
  min-height: 38px;
  padding: 6px 10px;
  border-radius: 8px;
  font-family: inherit;
  font-weight: 800;
}
.signout-cancel {
  border: 1px solid #D7DEE8;
  background: #FFFFFF;
  color: #475569;
}
.signout-confirm-button {
  border: 1px solid #DC2626;
  background: #DC2626;
  color: #FFFFFF;
}

.settings-favorite-row {
  justify-content: flex-start;
}
.settings-favorite-row label { flex: 0 0 auto; }
.settings-favorite-row select {
  width: min(260px, 65%) !important;
  min-width: 150px;
  min-height: 36px !important;
  margin: 0 !important;
  padding: 5px 30px 5px 9px !important;
  font-size: 13px !important;
}
.current-default-source,
.settings-subtitle,
.profile-saved-note,
.settings-help { display: none !important; }
.settings-message {
  margin-top: 7px !important;
  font-size: 11px !important;
}
.text-size-control-three {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 7px !important;
  margin-top: 8px;
}
.text-size-choice {
  min-height: 58px !important;
}
.text-size-choice strong {
  font-family: inherit !important;
  font-weight: 800 !important;
}
.text-size-choice-smaller strong { font-size: 15px !important; line-height: 1.35 !important; }
.text-size-choice[data-text-size="standard"] strong { font-size: 17px !important; line-height: 1.35 !important; }
.text-size-choice-larger strong { font-size: 20px !important; line-height: 1.35 !important; }
.text-size-choice-smaller span { font-size: 11px !important; }
.text-size-choice[data-text-size="standard"] span { font-size: 12px !important; }
.text-size-choice-larger span { font-size: 13px !important; }

.settings-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
}
.settings-switch-track {
  position: relative;
  display: block;
  width: 46px;
  height: 26px;
  border-radius: 999px;
  background: #CBD5E1;
  box-shadow: inset 0 0 0 1px rgba(15,23,42,.08);
  transition: background .16s ease;
}
.settings-switch-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 1px 3px rgba(15,23,42,.24);
  transition: transform .16s ease;
}
.settings-switch.is-on .settings-switch-track { background: var(--primary); }
.settings-switch.is-on .settings-switch-knob { transform: translateX(20px); }
.settings-switch:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.settings-switch-slot {
  flex: 0 0 96px;
  width: 96px;
  min-width: 96px;
  display: grid;
  align-items: center;
  justify-content: center;
}
.theme-switch-wrap {
  grid-template-columns: 18px 48px 18px;
  column-gap: 6px;
}
.theme-switch-wrap .settings-switch { grid-column: 2; }
.language-switch-wrap {
  grid-template-columns: 18px 48px 18px;
  column-gap: 6px;
}
.language-switch-wrap .language-switch-label:first-child { grid-column: 1; justify-self: end; }
.language-switch-wrap .settings-switch { grid-column: 2; }
.language-switch-wrap .language-switch-label:last-child { grid-column: 3; justify-self: start; }
.language-switch-label {
  color: #64748B;
  font-size: 11px;
  line-height: 1;
  font-weight: 850;
}

/* ---- Dark mode ---- */
html.theme-dark .story-card {
  background: #111827 !important;
  border-bottom-color: #253247 !important;
}
html.theme-dark .news-row:hover .story-card { background: #151D2C !important; }
html.theme-dark .news-row.checked .story-card { background: #151B2B !important; }
html.theme-dark .news-row.selected .story-card { background: #111C33 !important; }
html.theme-dark .story-title,
html.theme-dark .story-title-trigger,
html.theme-dark .news-row.checked .story-title,
html.theme-dark .news-row.checked .story-title-trigger { color: #E5E7EB !important; }
html.theme-dark .story-desc,
html.theme-dark .news-row.checked .story-desc { color: #CBD5E1 !important; }
html.theme-dark .story-time { color: #CBD5E1 !important; }
html.theme-dark .analysis-panel {
  background: #111827 !important;
  border-bottom-color: #253247 !important;
}
html.theme-dark .analysis-button,
html.theme-dark .analysis-original-link,
html.theme-dark .quick-ask.has-ai-response {
  background: #172033 !important;
  border-color: #334155 !important;
  color: #CBD5E1 !important;
}
html.theme-dark .settings-panel {
  background: #0F172A !important;
  border-color: #334155 !important;
  color: #E5E7EB !important;
}
html.theme-dark .settings-panel-head,
html.theme-dark .settings-row + .settings-row { border-color: #334155 !important; }
html.theme-dark .settings-inline-heading label,
html.theme-dark .settings-inline-control label,
html.theme-dark .settings-row > label { color: #E5E7EB !important; }
html.theme-dark .account-plan-inline,
html.theme-dark .account-info-line,
html.theme-dark .language-switch-label { color: #94A3B8 !important; }
html.theme-dark .settings-switch-track { background: #475569; }
html.theme-dark .settings-switch.is-on .settings-switch-track { background: #60A5FA; }
html.theme-dark .settings-signout-button,
html.theme-dark .signout-confirm {
  background: rgba(127,29,29,.16) !important;
  border-color: rgba(248,113,113,.35) !important;
}
html.theme-dark .settings-signout-button { color: #FCA5A5 !important; }
html.theme-dark .signout-confirm-text { color: #FCA5A5 !important; }
html.theme-dark .signout-cancel {
  background: #111827 !important;
  border-color: #475569 !important;
  color: #CBD5E1 !important;
}
html.theme-dark .ask-submit {
  background: #24324A !important;
  color: #93C5FD !important;
}
html.theme-dark .day-filter-button { color: #94A3B8 !important; }
html.theme-dark .day-filter-button.active { color: #93C5FD !important; background: rgba(59,130,246,.16) !important; }
html.theme-dark .day-filter-button + .day-filter-button::before { color: #475569; }

/* ---- Mobile ---- */
@media (max-width: 900px) {
  :root {
    --qf02-image-w: 82px;
    --qf02-image-h: 60px;
    --qf02-gap: 10px;
  }

  .brand-home-button {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    border-radius: 11px !important;
  }
  .brand-home-logo {
    display: block !important;
    width: 46px !important;
    height: 46px !important;
  }

  .news-table {
    table-layout: fixed !important;
  }
  .news-table thead { display: none !important; }

  .story-card {
    grid-template-columns: var(--qf02-image-w) minmax(0, 1fr);
    grid-template-areas:
      "meta meta"
      "media title"
      "media desc";
    column-gap: var(--qf02-gap);
    row-gap: 4px;
    margin: 0 0 8px;
    padding: 10px;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
  }
  .news-row.selected .story-card {
    margin-bottom: 0;
    border-color: #D7E4FF;
    border-bottom-color: transparent;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  .story-meta {
    margin-bottom: 2px;
  }
  .story-meta-line {
    min-height: 26px;
    flex-wrap: nowrap;
    overflow: hidden;
  }
  .read-indicator {
    margin-left: auto;
    flex: 0 0 auto;
  }
  .story-image-cell {
    align-self: start;
  }
  .story-media-action {
    width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
  }
  .story-title-trigger {
    overflow-wrap: anywhere;
  }
  .story-desc {
    align-self: start;
  }

  .analysis-row {
    display: table-row !important;
  }
  .analysis-row > td {
    display: table-cell !important;
  }
  .analysis-panel {
    margin: 0 0 8px;
    padding: 9px 10px 11px !important;
    border: 1px solid #D7E4FF !important;
    border-top: 0 !important;
    border-radius: 0 0 12px 12px !important;
  }
  .analysis-button,
  .analysis-original-link {
    min-height: 44px !important;
    padding: 6px 9px !important;
  }
  .ask-form,
  .ask-input-shell {
    width: 100% !important;
    max-width: none !important;
  }
  .ask-input { min-height: 44px !important; height: 44px !important; }
  .ask-submit { width: 36px !important; height: 36px !important; min-height: 36px !important; }

  .day-row > td {
    padding: 3px 5px !important;
  }
  .day-heading {
    min-height: 32px;
    gap: 6px !important;
    flex-wrap: nowrap !important;
  }
  .day-collapse-button,
  .day-filter-button {
    min-height: 32px !important;
  }

  .settings-panel {
    inset: 50% 8px auto 8px !important;
    transform: translateY(-50%) !important;
    width: auto !important;
    height: auto !important;
    max-height: calc(100dvh - max(24px, env(safe-area-inset-top)) - max(24px, env(safe-area-inset-bottom))) !important;
    overflow-y: auto !important;
    border-radius: 14px !important;
    padding: 16px 14px !important;
  }
  .settings-panel-head {
    top: -16px !important;
    margin: -16px -14px 8px !important;
    padding: 14px !important;
  }
  .settings-favorite-row {
    justify-content: space-between;
  }
  .settings-favorite-row select {
    width: min(220px, 68%) !important;
    min-width: 130px;
    font-size: 16px !important;
  }
  .text-size-control-three { gap: 6px !important; }
  .text-size-choice {
    min-height: 62px !important;
    padding: 7px 4px !important;
    font-size: 11px !important;
  }
}

/* Narrow mobile keeps the title next to the thumbnail and lets the summary
   flow below it without ever reordering title/media based on read state. */
@media (max-width: 390px) {
  :root {
    --qf02-image-w: 72px;
    --qf02-image-h: 54px;
    --qf02-gap: 8px;
  }
  .story-card { padding: 9px 8px; }
  .story-meta-line { gap: 3px; }
  .quick-ask.has-ai-response { padding-inline: 5px !important; }
  .read-indicator { font-size: 8px !important; padding-inline: 2px; }
  .analysis-button,
  .analysis-original-link {
    font-size: 11px !important;
    padding-inline: 7px !important;
  }
  .settings-inline-control { gap: 8px; }
  .settings-favorite-row select { width: min(190px, 68%) !important; }
  .settings-switch-slot {
    flex-basis: 92px;
    width: 92px;
    min-width: 92px;
  }
  .theme-switch-wrap,
  .language-switch-wrap {
    grid-template-columns: 16px 48px 16px;
    column-gap: 6px;
  }
}

/* ============================================================
   v12.4.1 — restore clear mobile read/unread visual state
   Keep typography/layout identical; communicate read state only
   through a subtle but visible card tint and status label color.
   ============================================================ */
@media (max-width: 900px) {
  .news-row:not(.checked) .story-card {
    background: #FFFFFF !important;
    border-color: #E5E7EB !important;
  }

  .news-row.checked:not(.selected) .story-card {
    background: #EEF2FF !important;
    border-color: #D8E1FF !important;
  }

  .news-row.checked:not(.selected) .read-indicator {
    color: #4F46E5 !important;
  }

  .news-row:not(.checked) .read-indicator {
    color: #98A2B3 !important;
  }

  .news-row.selected .story-card {
    background: #F8FBFF !important;
  }

  .news-row.checked.selected .story-card {
    background: #EEF2FF !important;
  }
}

html.theme-dark {
  --qf02-mobile-read-bg: #18233A;
  --qf02-mobile-read-border: #2D426B;
}

@media (max-width: 900px) {
  html.theme-dark .news-row:not(.checked) .story-card {
    background: #111827 !important;
    border-color: #253247 !important;
  }

  html.theme-dark .news-row.checked:not(.selected) .story-card,
  html.theme-dark .news-row.checked.selected .story-card {
    background: var(--qf02-mobile-read-bg) !important;
    border-color: var(--qf02-mobile-read-border) !important;
  }

  html.theme-dark .news-row.checked:not(.selected) .read-indicator {
    color: #A5B4FC !important;
  }
}


/* ============================================================
   v13.0 — QF Release 1
   Article Experience, Device Typography & Responsive Desktop
   ============================================================ */

/* Centralized typography tokens.
   Reading text changes most; UI/meta controls change more moderately. */
body[data-text-size="small"] {
  --qf02-title: 15px;
  --qf02-body: 13px;
  --qf02-ui: 12px;
  --qf02-meta: 11px;
  --qf02-action: 11px;
  --qf1-source: 12px;
  --qf1-section: 12px;
}
body[data-text-size="standard"] {
  --qf02-title: 17px;
  --qf02-body: 15px;
  --qf02-ui: 13px;
  --qf02-meta: 12px;
  --qf02-action: 12px;
  --qf1-source: 13px;
  --qf1-section: 13px;
}
body[data-text-size="large"] {
  --qf02-title: 20px;
  --qf02-body: 18px;
  --qf02-ui: 14px;
  --qf02-meta: 13px;
  --qf02-action: 13px;
  --qf1-source: 14px;
  --qf1-section: 14px;
}

/* Settings only shows the relevant device-category selector. */
.text-size-settings-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.text-size-device-label {
  color: #667085;
  font-size: 11px;
  font-weight: 750;
  white-space: nowrap;
}
.text-size-choice-smaller strong { font-size: 15px !important; }
.text-size-choice[data-text-size="standard"] strong { font-size: 17px !important; }
.text-size-choice-larger strong { font-size: 20px !important; }

/* Responsive source strip on every screen size. */
.sourcebar {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 40px !important;
  gap: 6px !important;
  align-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
}
.source-list {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  min-width: 0 !important;
  width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-x: contain !important;
  white-space: nowrap !important;
}
.source-list::-webkit-scrollbar { display: none !important; }
#customSourceButtons,
.custom-source-buttons {
  display: inline-flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  flex: 0 0 auto !important;
  width: max-content !important;
}
.source-list > *,
#customSourceButtons > *,
.custom-source-buttons > * {
  flex: 0 0 auto !important;
}
.source-pill,
.custom-source-pill {
  min-height: 34px !important;
  height: 34px !important;
  padding: 4px 10px !important;
  border-radius: 9px !important;
  font-size: var(--qf1-source) !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
.source-pill .source-name,
.custom-source-pill .source-name,
.source-pill span:not(.source-favicon-wrap),
.custom-source-pill span:not(.source-favicon-wrap) {
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  max-width: none !important;
}
.all-sources-trigger {
  width: 40px !important;
  min-width: 40px !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
}

/* Compact section rows, matched typography for label + filters. */
.day-heading,
.day-collapse-button,
.day-filter-button {
  font-size: var(--qf1-section) !important;
}
.day-heading { min-height: 32px !important; }
.day-row > td { padding-block: 3px !important; }
.day-collapse-button,
.day-filter-button {
  min-height: 30px !important;
}

/* Desktop article redesign. */
@media (min-width: 901px) {
  .news-table-wrap,
  .news-table {
    width: 100% !important;
    min-width: 0 !important;
  }

  .story-card {
    grid-template-columns: 112px minmax(240px, .95fr) minmax(300px, 1.35fr) !important;
    grid-template-areas:
      "meta title desc"
      "media title desc" !important;
    column-gap: 12px !important;
    row-gap: 4px !important;
    padding: 10px 12px !important;
    align-items: start !important;
  }

  .story-meta,
  .story-image-cell {
    justify-self: start !important;
    align-self: start !important;
  }

  .story-meta-line {
    min-height: 24px !important;
    gap: 5px !important;
  }

  /* Desktop uses the same tint treatment as mobile instead of separate
     Olvasott/Olvasatlan words. The status remains in the accessibility tree. */
  .read-indicator {
    width: 8px !important;
    min-width: 8px !important;
    height: 8px !important;
    min-height: 8px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: #CBD5E1 !important;
    overflow: hidden !important;
  }
  .read-indicator.is-read {
    background: #818CF8 !important;
  }
  .read-indicator .read-label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  .news-row:not(.checked) .story-card {
    background: #FFFFFF !important;
  }
  .news-row.checked:not(.selected) .story-card {
    background: #F2F5FF !important;
  }

  .story-image-cell {
    width: 76px !important;
    min-width: 76px !important;
    margin-left: 0 !important;
  }
  .story-image,
  .story-image-placeholder {
    width: 76px !important;
    height: 54px !important;
    border-radius: 7px !important;
  }
  .story-media-action {
    width: 24px !important;
    height: 24px !important;
    min-height: 24px !important;
    margin-top: 3px !important;
  }
  .save-article-icon,
  .remove-link-icon {
    width: 17px !important;
    height: 17px !important;
  }

  .story-title-trigger {
    font-size: var(--qf02-title) !important;
    line-height: 1.28 !important;
  }
  .story-desc {
    font-size: var(--qf02-body) !important;
    line-height: 1.42 !important;
  }

  .analysis-panel {
    padding: 8px 12px 10px !important;
  }
  .analysis-actions {
    justify-content: flex-start !important;
  }
  .analysis-button,
  .analysis-original-link {
    min-height: 34px !important;
    padding: 5px 9px !important;
  }
}

/* Narrow desktop: stack title/description without squeezing or overlap. */
@media (min-width: 901px) and (max-width: 1180px) {
  .story-card {
    grid-template-columns: 108px minmax(0, 1fr) !important;
    grid-template-areas:
      "meta title"
      "media desc" !important;
    column-gap: 12px !important;
    row-gap: 5px !important;
  }
  .story-image-cell {
    width: 72px !important;
    min-width: 72px !important;
  }
  .story-image,
  .story-image-placeholder {
    width: 72px !important;
    height: 52px !important;
  }
}

/* Mobile keeps the proven thumbnail/title structure and uses the current
   comfortable reading size. */
@media (max-width: 900px) {
  .sourcebar {
    grid-template-columns: minmax(0, 1fr) 38px !important;
    gap: 5px !important;
    padding: 4px 6px !important;
  }
  .source-pill,
  .custom-source-pill {
    min-height: 34px !important;
    height: 34px !important;
    padding-inline: 9px !important;
  }
}

/* Larger text must wrap, never create page-level horizontal overflow. */
html,
body,
.app-shell,
.dashboard,
.news-table-wrap,
.sourcebar {
  max-width: 100%;
}
body { overflow-x: hidden; }
.story-title-trigger,
.story-desc,
.analysis-history,
.analysis-result,
.ask-input {
  overflow-wrap: anywhere;
}

/* AI response and custom Ask text follow the reading scale. */
.analysis-history,
.analysis-result,
.analysis-section-body,
.analysis-section-preview,
.history-answer,
.history-question,
.ask-answer-body,
.ask-answer-preview,
.analysis-result .answer,
.analysis-preview-text,
.ask-preview-text,
.ask-input {
  font-size: var(--qf02-body) !important;
}


/* ============================================================
   v13.0.2 — AI response button placement
   Desktop: below thumbnail in the media rail.
   Mobile: retain timestamp-line placement.
   ============================================================ */

.quick-ask-media {
  display: none !important;
}

@media (min-width: 901px) {
  .quick-ask-meta {
    display: none !important;
  }

  .quick-ask-media.has-ai-response:not(.hidden) {
    display: inline-flex !important;
    align-self: flex-start !important;
    width: max-content !important;
    max-width: 108px !important;
    margin: 5px 0 1px !important;
    padding: 3px 6px !important;
    min-height: 24px !important;
    white-space: nowrap !important;
    position: static !important;
    transform: none !important;
  }

  .story-image-cell {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    overflow: visible !important;
  }

  .story-media-action {
    align-self: flex-end !important;
    margin-top: 3px !important;
  }
}

@media (max-width: 900px) {
  .quick-ask-meta.has-ai-response:not(.hidden) {
    display: inline-flex !important;
  }

  .quick-ask-media {
    display: none !important;
  }
}


/* ============================================================
   v13.0.3 — canonical desktop read-state visibility
   Read status changes immediately and the full article line retains its tint
   after source switches/refreshes. Selected read rows keep the same read tint.
   ============================================================ */
@media (min-width: 901px) {
  .news-row:not(.checked) > .story-card-cell,
  .news-row:not(.checked) .story-card {
    background: #FFFFFF !important;
  }

  .news-row.checked > .story-card-cell,
  .news-row.checked .story-card,
  .news-row.checked:not(.selected) > .story-card-cell,
  .news-row.checked:not(.selected) .story-card,
  .news-row.checked.selected > .story-card-cell,
  .news-row.checked.selected .story-card {
    background: #EEF2FF !important;
  }

  .news-row.checked .read-indicator {
    background: #6366F1 !important;
  }

  .news-row:not(.checked) .read-indicator {
    background: #CBD5E1 !important;
  }

  .news-row.selected .story-card {
    box-shadow: inset 3px 0 0 var(--primary) !important;
  }

  html.theme-dark .news-row:not(.checked) > .story-card-cell,
  html.theme-dark .news-row:not(.checked) .story-card {
    background: #111827 !important;
  }

  html.theme-dark .news-row.checked > .story-card-cell,
  html.theme-dark .news-row.checked .story-card,
  html.theme-dark .news-row.checked:not(.selected) > .story-card-cell,
  html.theme-dark .news-row.checked:not(.selected) .story-card,
  html.theme-dark .news-row.checked.selected > .story-card-cell,
  html.theme-dark .news-row.checked.selected .story-card {
    background: #18233A !important;
  }

  html.theme-dark .news-row.checked .read-indicator {
    background: #A5B4FC !important;
  }
}


/* ============================================================
   v13.0.5 — canonical read/unread state
   Use explicit data-read state so legacy checked/selected rules cannot
   accidentally remove the visual distinction.
   ============================================================ */

@media (min-width: 901px) {
  tr.news-row[data-read="unread"] > td.story-card-cell,
  tr.news-row[data-read="unread"] .story-card {
    background: #FFFFFF !important;
  }

  tr.news-row[data-read="read"] > td.story-card-cell,
  tr.news-row[data-read="read"] .story-card,
  tr.news-row[data-read="read"].selected > td.story-card-cell,
  tr.news-row[data-read="read"].selected .story-card {
    background: #EEF2FF !important;
  }

  tr.news-row[data-read="read"] .read-indicator {
    background: #6366F1 !important;
  }

  tr.news-row[data-read="unread"] .read-indicator {
    background: #CBD5E1 !important;
  }

  tr.news-row[data-read="read"].selected .story-card,
  tr.news-row[data-read="unread"].selected .story-card {
    box-shadow: inset 3px 0 0 var(--primary) !important;
  }

  html.theme-dark tr.news-row[data-read="unread"] > td.story-card-cell,
  html.theme-dark tr.news-row[data-read="unread"] .story-card {
    background: #111827 !important;
  }

  html.theme-dark tr.news-row[data-read="read"] > td.story-card-cell,
  html.theme-dark tr.news-row[data-read="read"] .story-card,
  html.theme-dark tr.news-row[data-read="read"].selected > td.story-card-cell,
  html.theme-dark tr.news-row[data-read="read"].selected .story-card {
    background: #18233A !important;
  }
}

@media (max-width: 900px) {
  tr.news-row[data-read="unread"] .story-card {
    background: #FFFFFF !important;
    border-color: #E5E7EB !important;
  }

  tr.news-row[data-read="read"] .story-card,
  tr.news-row[data-read="read"].selected .story-card {
    background: #EEF2FF !important;
    border-color: #D8E1FF !important;
  }

  html.theme-dark tr.news-row[data-read="unread"] .story-card {
    background: #111827 !important;
    border-color: #253247 !important;
  }

  html.theme-dark tr.news-row[data-read="read"] .story-card,
  html.theme-dark tr.news-row[data-read="read"].selected .story-card {
    background: #18233A !important;
    border-color: #2D426B !important;
  }
}


/* ============================================================
   v13.0.6 — AI indicator visibility + read-dot semantics
   ============================================================ */

/* An AI-response indicator may only be visible when stored AI history exists. */
.news-row.selected .quick-ask.hidden,
.news-row .quick-ask.hidden {
  display: none !important;
}

/* Dot semantics:
   unread = active/normal brand color
   read   = subdued grey */
.news-row[data-read="unread"] .read-indicator,
.news-row:not(.checked) .read-indicator {
  background: #6366F1 !important;
}

.news-row[data-read="read"] .read-indicator,
.news-row.checked .read-indicator,
.news-row.checked .read-indicator.is-read {
  background: #CBD5E1 !important;
}

html.theme-dark .news-row[data-read="unread"] .read-indicator,
html.theme-dark .news-row:not(.checked) .read-indicator {
  background: #818CF8 !important;
}

html.theme-dark .news-row[data-read="read"] .read-indicator,
html.theme-dark .news-row.checked .read-indicator,
html.theme-dark .news-row.checked .read-indicator.is-read {
  background: #64748B !important;
}

/* ============================================================
   v14.0 — QF20 + QF23 desktop redesign
   Desktop-only layout containers. Mobile keeps the existing UI.
   ============================================================ */

.desktop-source-sidebar,
.desktop-header-source,
.desktop-news-container {
  display: none;
}

html[data-device-category="desktop"] .shell {
  width: min(2100px, calc(100% - 24px)) !important;
  max-width: none !important;
}

html[data-device-category="desktop"] .topbar {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 18px !important;
}

html[data-device-category="desktop"] .desktop-header-source {
  display: inline-flex !important;
  align-items: center;
  justify-self: start;
  gap: 8px;
  min-width: 0;
  max-width: min(620px, 55vw);
  padding: 5px 9px;
  border: 1px solid #E1E6EE;
  border-radius: 9px;
  background: rgba(255,255,255,.72);
  color: #334155;
}

html[data-device-category="desktop"] .desktop-header-source-favicon,
html[data-device-category="desktop"] .desktop-header-source-favicon .desktop-sidebar-favicon-wrap {
  width: 22px;
  height: 22px;
  min-width: 22px;
}

html[data-device-category="desktop"] .desktop-header-source-favicon .desktop-sidebar-favicon,
html[data-device-category="desktop"] .desktop-header-source-favicon .desktop-sidebar-favicon-fallback {
  width: 22px !important;
  height: 22px !important;
  border-radius: 5px;
}

html[data-device-category="desktop"] .desktop-header-source-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 800;
}

html[data-device-category="desktop"] .desktop-header-saved-icon {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  color: #64748B;
  font-size: 17px;
}

html[data-device-category="desktop"] .dashboard {
  --desktop-sidebar-width: 248px;
  display: grid !important;
  grid-template-columns: var(--desktop-sidebar-width) minmax(0, 1fr) !important;
  column-gap: 12px !important;
  align-items: start;
  min-width: 0;
}

html[data-device-category="desktop"] .dashboard.desktop-sidebar-collapsed {
  --desktop-sidebar-width: 58px;
}

html[data-device-category="desktop"] .desktop-source-sidebar {
  display: flex !important;
  grid-column: 1;
  grid-row: 1 / span 30;
  position: sticky;
  top: 10px;
  z-index: 25;
  flex-direction: column;
  min-width: 0;
  height: min(760px, calc(100vh - 20px));
  max-height: calc(100vh - 20px);
  border: 1px solid #DDE3EB;
  border-radius: 12px;
  background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
  overflow: visible;
  transition: width .16s ease;
}

html[data-device-category="desktop"] .desktop-sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 46px;
  padding: 8px 8px 8px 12px;
  border-bottom: 1px solid #E8ECF2;
}

html[data-device-category="desktop"] .desktop-sidebar-title {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #475569;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .04em;
  text-transform: uppercase;
}

html[data-device-category="desktop"] .desktop-sidebar-toggle {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  min-width: 30px;
  padding: 0;
  border: 1px solid #D7DEE8;
  border-radius: 8px;
  background: #F8FAFC;
  color: #475569;
  font-size: 20px;
  line-height: 1;
}

html[data-device-category="desktop"] .desktop-sidebar-toggle:hover,
html[data-device-category="desktop"] .desktop-sidebar-toggle:focus-visible {
  border-color: #B8C5DA;
  background: #EEF2FF;
  color: #1D4ED8;
  outline: none;
}

html[data-device-category="desktop"] .desktop-sidebar-nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: visible;
  padding: 8px;
  scrollbar-width: thin;
}

html[data-device-category="desktop"] .desktop-sidebar-special,
html[data-device-category="desktop"] .desktop-sidebar-source,
html[data-device-category="desktop"] .desktop-publisher-heading,
html[data-device-category="desktop"] .desktop-collapsed-publisher,
html[data-device-category="desktop"] .desktop-sidebar-popover-source {
  font-family: inherit;
}

html[data-device-category="desktop"] .desktop-sidebar-special {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 36px;
  padding: 6px 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #334155;
  font-size: 12px;
  font-weight: 750;
  text-align: left;
}

html[data-device-category="desktop"] .desktop-sidebar-special:hover,
html[data-device-category="desktop"] .desktop-sidebar-special.active {
  background: #EEF2FF;
  color: #1D4ED8;
}

html[data-device-category="desktop"] .desktop-sidebar-special-icon {
  display: grid;
  place-items: center;
  width: 24px;
  min-width: 24px;
  font-size: 17px;
}

html[data-device-category="desktop"] .desktop-source-group {
  position: relative;
  margin-top: 7px;
}

html[data-device-category="desktop"] .desktop-publisher-heading {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  width: 100%;
  min-height: 34px;
  padding: 5px 6px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #334155;
  text-align: left;
}

html[data-device-category="desktop"] .desktop-publisher-heading:hover,
html[data-device-category="desktop"] .desktop-source-group.active > .desktop-publisher-heading {
  background: #F5F7FA;
}

html[data-device-category="desktop"] .desktop-publisher-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 850;
}

html[data-device-category="desktop"] .desktop-publisher-chevron {
  color: #94A3B8;
  font-size: 9px;
}

html[data-device-category="desktop"] .desktop-publisher-sources {
  display: grid;
  gap: 2px;
  margin-top: 2px;
  padding-left: 14px;
}

html[data-device-category="desktop"] .desktop-publisher-sources.hidden {
  display: none !important;
}

html[data-device-category="desktop"] .desktop-sidebar-source {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 10px;
  align-items: center;
  gap: 7px;
  width: 100%;
  min-height: 34px;
  padding: 5px 7px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #475569;
  font-size: 12px;
  font-weight: 700;
  text-align: left;
}

html[data-device-category="desktop"] .desktop-sidebar-source:hover {
  background: #F8FAFC;
}

html[data-device-category="desktop"] .desktop-sidebar-source.active {
  background: #E8EEFF;
  color: #1D4ED8;
}

html[data-device-category="desktop"] .desktop-sidebar-source-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-device-category="desktop"] .desktop-sidebar-default-dot {
  color: #F59E0B;
  font-size: 15px;
  line-height: 1;
}

html[data-device-category="desktop"] .desktop-sidebar-favicon-wrap {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  min-width: 22px;
  overflow: hidden;
  border-radius: 5px;
  background: #F1F5F9;
}

html[data-device-category="desktop"] .desktop-sidebar-favicon,
html[data-device-category="desktop"] .desktop-sidebar-favicon-fallback {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  object-fit: cover;
  border-radius: 5px;
  color: #64748B;
  font-size: 11px;
  font-weight: 850;
}

html[data-device-category="desktop"] .desktop-sidebar-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  padding: 8px;
  border-top: 1px solid #E8ECF2;
}

html[data-device-category="desktop"] .desktop-sidebar-actions button {
  min-height: 32px;
  padding: 5px 7px;
  border: 1px solid #D7DEE8;
  border-radius: 8px;
  background: #FFFFFF;
  color: #475569;
  font-size: 11px;
  font-weight: 750;
}

html[data-device-category="desktop"] .desktop-sidebar-actions button:last-child {
  grid-column: 1 / -1;
}

html[data-device-category="desktop"] .desktop-sidebar-actions button:hover {
  background: #F1F5F9;
  color: #1D4ED8;
}

html[data-device-category="desktop"] .desktop-source-sidebar.collapsed .desktop-sidebar-head {
  justify-content: center;
  padding: 8px 5px;
}

html[data-device-category="desktop"] .desktop-source-sidebar.collapsed .desktop-sidebar-title,
html[data-device-category="desktop"] .desktop-source-sidebar.collapsed .desktop-sidebar-special span:last-child,
html[data-device-category="desktop"] .desktop-source-sidebar.collapsed .desktop-sidebar-actions {
  display: none !important;
}

html[data-device-category="desktop"] .desktop-source-sidebar.collapsed .desktop-sidebar-nav {
  padding: 6px;
  overflow: visible;
}

html[data-device-category="desktop"] .desktop-source-sidebar.collapsed .desktop-sidebar-special {
  justify-content: center;
  padding: 5px;
}

html[data-device-category="desktop"] .desktop-source-sidebar.collapsed .desktop-source-group {
  margin-top: 5px;
}

html[data-device-category="desktop"] .desktop-collapsed-publisher {
  display: grid;
  place-items: center;
  width: 44px;
  height: 40px;
  margin: 0 auto;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
}

html[data-device-category="desktop"] .desktop-collapsed-publisher:hover,
html[data-device-category="desktop"] .desktop-collapsed-publisher.active {
  background: #E8EEFF;
}

html[data-device-category="desktop"] .desktop-sidebar-popover {
  display: none;
  position: absolute;
  left: calc(100% + 8px);
  top: 0;
  z-index: 80;
  width: 230px;
  max-height: 340px;
  overflow-y: auto;
  padding: 7px;
  border: 1px solid #D7DEE8;
  border-radius: 10px;
  background: #FFFFFF;
  box-shadow: 0 12px 34px rgba(15,23,42,.16);
}

html[data-device-category="desktop"] .desktop-sidebar-popover.open {
  display: block;
}

html[data-device-category="desktop"] .desktop-sidebar-popover-title {
  padding: 4px 6px 7px;
  color: #64748B;
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

html[data-device-category="desktop"] .desktop-sidebar-popover-source {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  width: 100%;
  min-height: 34px;
  padding: 5px 6px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #475569;
  font-size: 12px;
  font-weight: 700;
  text-align: left;
}

html[data-device-category="desktop"] .desktop-sidebar-popover-source:hover,
html[data-device-category="desktop"] .desktop-sidebar-popover-source.active {
  background: #EEF2FF;
  color: #1D4ED8;
}

/* Desktop navigation moves into the sidebar. The mobile source bar is untouched. */
html[data-device-category="desktop"] .sourcebar,
html[data-device-category="desktop"] .mobile-bottom-nav,
html[data-device-category="desktop"] .mobile-saved-toolbar,
html[data-device-category="desktop"] .mobile-sources-panel {
  display: none !important;
}

html[data-device-category="desktop"] #linkAddPanel,
html[data-device-category="desktop"] #sourceAddPanel,
html[data-device-category="desktop"] #status,
html[data-device-category="desktop"] #desktopNewsContainer,
html[data-device-category="desktop"] .app-footer {
  grid-column: 2;
  min-width: 0;
}

html[data-device-category="desktop"] #newsTableWrap {
  display: none !important;
}

html[data-device-category="desktop"] .desktop-news-container:not(.hidden) {
  display: block !important;
  min-width: 0;
  width: 100%;
}

html[data-device-category="desktop"] .desktop-empty-feed {
  padding: 28px 18px;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  background: #FFFFFF;
  color: #64748B;
  text-align: center;
}

html[data-device-category="desktop"] .desktop-day-section {
  display: block !important;
  min-width: 0;
  margin: 0 0 10px;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  background: #F8FAFC;
  overflow: hidden;
}

html[data-device-category="desktop"] .desktop-day-section > .day-heading {
  min-height: 34px !important;
  padding: 3px 9px !important;
  border-bottom: 1px solid #E2E8F0;
  background: #F1F5F9;
}

html[data-device-category="desktop"] .desktop-day-section.collapsed > .day-heading {
  border-bottom: 0;
}

html[data-device-category="desktop"] .desktop-article-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  align-items: start;
  min-width: 0;
  background: #E5E7EB;
}

html[data-device-category="desktop"] .desktop-news-container[data-columns="2"] .desktop-article-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

html[data-device-category="desktop"] .desktop-news-container[data-columns="3"] .desktop-article-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

html[data-device-category="desktop"] .desktop-news-card-wrapper {
  display: block !important;
  position: relative;
  min-width: 0;
  background: #FFFFFF !important;
}

html[data-device-category="desktop"] .desktop-news-card-wrapper > .story-card-cell {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

/* One-column desktop retains the established desktop card arrangement. */
html[data-device-category="desktop"] .desktop-news-container[data-columns="1"] .story-card {
  display: grid !important;
  grid-template-columns: 112px minmax(240px, .95fr) minmax(300px, 1.35fr) !important;
  grid-template-areas:
    "meta title desc"
    "media title desc" !important;
  column-gap: 12px !important;
  row-gap: 4px !important;
  align-items: start !important;
}

/* Multi-column cards use the same fields and controls, with the smallest
   necessary responsive adjustment: title and description share the text rail. */
html[data-device-category="desktop"] .desktop-news-container:not([data-columns="1"]) .story-card {
  display: grid !important;
  grid-template-columns: 88px minmax(0, 1fr) !important;
  grid-template-areas:
    "meta title"
    "media desc" !important;
  column-gap: 10px !important;
  row-gap: 5px !important;
  align-items: start !important;
}

html[data-device-category="desktop"] .desktop-news-container .story-card {
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  padding: 10px 11px !important;
  border: 0 !important;
  background: #FFFFFF;
}

html[data-device-category="desktop"] .desktop-news-container .story-meta,
html[data-device-category="desktop"] .desktop-news-container .story-image-cell,
html[data-device-category="desktop"] .desktop-news-container .story-title-cell,
html[data-device-category="desktop"] .desktop-news-container .story-desc {
  position: static !important;
  float: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  transform: none !important;
}

html[data-device-category="desktop"] .desktop-news-container .story-meta {
  grid-area: meta !important;
  display: block !important;
  width: auto !important;
  padding: 0 !important;
}

html[data-device-category="desktop"] .desktop-news-container .story-image-cell {
  grid-area: media !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  width: 76px !important;
  min-width: 76px !important;
  padding: 0 !important;
  overflow: visible !important;
}

html[data-device-category="desktop"] .desktop-news-container .story-image,
html[data-device-category="desktop"] .desktop-news-container .story-image-placeholder {
  width: 76px !important;
  height: 54px !important;
  border-radius: 7px !important;
}

html[data-device-category="desktop"] .desktop-news-container .story-title-cell {
  grid-area: title !important;
  padding: 0 !important;
}

html[data-device-category="desktop"] .desktop-news-container .story-desc {
  grid-area: desc !important;
  padding: 0 !important;
}

html[data-device-category="desktop"] .desktop-news-container .quick-ask-meta {
  display: none !important;
}

html[data-device-category="desktop"] .desktop-news-container .quick-ask-media.has-ai-response:not(.hidden) {
  display: inline-flex !important;
}

html[data-device-category="desktop"] .desktop-news-container .story-media-action {
  align-self: flex-end !important;
  width: 24px !important;
  height: 24px !important;
  min-height: 24px !important;
}

html[data-device-category="desktop"] .desktop-news-card-wrapper[data-read="unread"] .story-card {
  background: #FFFFFF !important;
}

html[data-device-category="desktop"] .desktop-news-card-wrapper[data-read="read"] .story-card,
html[data-device-category="desktop"] .desktop-news-card-wrapper[data-read="read"].selected .story-card {
  background: #EEF2FF !important;
}

html[data-device-category="desktop"] .desktop-news-card-wrapper[data-read="unread"] .read-indicator {
  background: #6366F1 !important;
}

html[data-device-category="desktop"] .desktop-news-card-wrapper[data-read="read"] .read-indicator,
html[data-device-category="desktop"] .desktop-news-card-wrapper[data-read="read"] .read-indicator.is-read {
  background: #CBD5E1 !important;
}

html[data-device-category="desktop"] .desktop-news-card-wrapper.selected .story-card {
  box-shadow: inset 3px 0 0 var(--primary) !important;
}

html[data-device-category="desktop"] .desktop-analysis-host {
  display: block;
  width: 100%;
  min-width: 0;
}

html[data-device-category="desktop"] .desktop-analysis-host .analysis-panel {
  width: 100% !important;
  box-sizing: border-box;
  padding: 8px 11px 11px !important;
  border-top: 1px solid #E2E8F0 !important;
  border-bottom: 0 !important;
}

html[data-device-category="desktop"] .desktop-news-card-wrapper.selected {
  z-index: 2;
}

html[data-device-category="desktop"] .desktop-news-container .story-title-trigger,
html[data-device-category="desktop"] .desktop-news-container .story-desc,
html[data-device-category="desktop"] .desktop-news-container .analysis-history,
html[data-device-category="desktop"] .desktop-news-container .analysis-result {
  overflow-wrap: anywhere;
}

/* Dark-mode counterparts for the new desktop containers. */
html.theme-dark[data-device-category="desktop"] .desktop-header-source,
html.theme-dark[data-device-category="desktop"] .desktop-source-sidebar,
html.theme-dark[data-device-category="desktop"] .desktop-sidebar-popover,
html.theme-dark[data-device-category="desktop"] .desktop-sidebar-actions button,
html.theme-dark[data-device-category="desktop"] .desktop-empty-feed {
  background: #111827 !important;
  border-color: #2B3648 !important;
  color: #CBD5E1 !important;
}

html.theme-dark[data-device-category="desktop"] .desktop-sidebar-head,
html.theme-dark[data-device-category="desktop"] .desktop-sidebar-actions,
html.theme-dark[data-device-category="desktop"] .desktop-day-section > .day-heading {
  border-color: #2B3648 !important;
}

html.theme-dark[data-device-category="desktop"] .desktop-sidebar-source,
html.theme-dark[data-device-category="desktop"] .desktop-publisher-heading,
html.theme-dark[data-device-category="desktop"] .desktop-sidebar-special,
html.theme-dark[data-device-category="desktop"] .desktop-sidebar-popover-source {
  color: #CBD5E1 !important;
}

html.theme-dark[data-device-category="desktop"] .desktop-sidebar-source:hover,
html.theme-dark[data-device-category="desktop"] .desktop-publisher-heading:hover {
  background: #172033 !important;
}

html.theme-dark[data-device-category="desktop"] .desktop-sidebar-source.active,
html.theme-dark[data-device-category="desktop"] .desktop-collapsed-publisher.active,
html.theme-dark[data-device-category="desktop"] .desktop-sidebar-special.active,
html.theme-dark[data-device-category="desktop"] .desktop-sidebar-popover-source.active {
  background: #1E2A45 !important;
  color: #AFC6FF !important;
}

html.theme-dark[data-device-category="desktop"] .desktop-day-section {
  border-color: #2B3648 !important;
  background: #0F172A !important;
}

html.theme-dark[data-device-category="desktop"] .desktop-day-section > .day-heading {
  background: #151E2E !important;
}

html.theme-dark[data-device-category="desktop"] .desktop-article-grid {
  background: #2B3648 !important;
}

html.theme-dark[data-device-category="desktop"] .desktop-news-card-wrapper,
html.theme-dark[data-device-category="desktop"] .desktop-news-card-wrapper[data-read="unread"] .story-card {
  background: #111827 !important;
}

html.theme-dark[data-device-category="desktop"] .desktop-news-card-wrapper[data-read="read"] .story-card,
html.theme-dark[data-device-category="desktop"] .desktop-news-card-wrapper[data-read="read"].selected .story-card {
  background: #18233A !important;
}

html.theme-dark[data-device-category="desktop"] .desktop-analysis-host .analysis-panel {
  border-color: #2B3648 !important;
  background: #111C33 !important;
}

/* Phone/mobile: explicitly keep the deployed interface and single-column list. */
html[data-device-category="mobile"] .desktop-source-sidebar,
html[data-device-category="mobile"] .desktop-header-source,
html[data-device-category="mobile"] .desktop-news-container {
  display: none !important;
}


/* ============================================================
   v14.1 — QF20 finalized single-column desktop + QF23 refinements
   Desktop only. Mobile article/navigation styling is intentionally unchanged.
   ============================================================ */

html[data-device-category="desktop"] .desktop-news-container:not(.hidden) {
  width: min(100%, 1320px) !important;
  max-width: 1320px !important;
  margin-inline: auto !important;
}

/* QF20 is now always exactly one chronological desktop column. */
html[data-device-category="desktop"] .desktop-news-container .desktop-article-grid,
html[data-device-category="desktop"] .desktop-news-container[data-columns="1"] .desktop-article-grid,
html[data-device-category="desktop"] .desktop-news-container[data-columns="2"] .desktop-article-grid,
html[data-device-category="desktop"] .desktop-news-container[data-columns="3"] .desktop-article-grid {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 8px !important;
  padding: 8px !important;
  background: transparent !important;
}

/* Preserve the established one-column article internals. */
html[data-device-category="desktop"] .desktop-news-container .story-card {
  display: grid !important;
  grid-template-columns: 112px minmax(240px, .95fr) minmax(300px, 1.35fr) !important;
  grid-template-areas:
    "meta title desc"
    "media title desc" !important;
  column-gap: 12px !important;
  row-gap: 4px !important;
  align-items: start !important;
  border-radius: 11px 11px 0 0 !important;
}

/* Each desktop news item is one stable rounded card. The analysis content,
   when open, remains attached below the article inside the same card shell. */
html[data-device-category="desktop"] .desktop-news-card-wrapper {
  border: 1px solid #E2E8F0 !important;
  border-radius: 11px !important;
  overflow: hidden !important;
  background: #FFFFFF !important;
}

html[data-device-category="desktop"] .desktop-news-card-wrapper > .story-card-cell {
  border-radius: 11px !important;
  overflow: hidden !important;
}

html[data-device-category="desktop"] .desktop-news-card-wrapper:not(.selected) .story-card {
  border-radius: 11px !important;
}

html[data-device-category="desktop"] .desktop-news-card-wrapper.selected .story-card {
  border-radius: 11px 11px 0 0 !important;
}

html[data-device-category="desktop"] .desktop-analysis-host .analysis-panel {
  border-top: 1px solid #E2E8F0 !important;
  border-radius: 0 0 11px 11px !important;
}

/* Keep the read/unread tint on the full rounded card shell. */
html[data-device-category="desktop"] .desktop-news-card-wrapper[data-read="unread"] {
  background: #FFFFFF !important;
}

html[data-device-category="desktop"] .desktop-news-card-wrapper[data-read="read"],
html[data-device-category="desktop"] .desktop-news-card-wrapper[data-read="read"] > .story-card-cell {
  background: #EEF2FF !important;
}

html[data-device-category="desktop"] .desktop-news-card-wrapper[data-read="read"] .story-card {
  background: #EEF2FF !important;
}

/* Narrow desktop remains desktop navigation/preferences while the article
   content stacks just enough to avoid clipping or horizontal overflow. */
@media (max-width: 1080px) {
  html[data-device-category="desktop"] .desktop-news-container .story-card {
    grid-template-columns: 96px minmax(0, 1fr) !important;
    grid-template-areas:
      "meta title"
      "media desc" !important;
    column-gap: 10px !important;
    row-gap: 5px !important;
  }
}

/* QF23: compact controls for all multi-feed publisher groups. */
html[data-device-category="desktop"] .desktop-sidebar-group-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin: 7px 0 4px;
}

html[data-device-category="desktop"] .desktop-sidebar-group-controls.hidden,
html[data-device-category="desktop"] .desktop-source-sidebar.collapsed .desktop-sidebar-group-controls {
  display: none !important;
}

html[data-device-category="desktop"] .desktop-sidebar-group-controls button {
  min-width: 0;
  min-height: 28px;
  padding: 4px 5px;
  border: 1px solid #DDE3EB;
  border-radius: 7px;
  background: #F8FAFC;
  color: #64748B;
  font: inherit;
  font-size: 10px;
  font-weight: 750;
  white-space: nowrap;
}

html[data-device-category="desktop"] .desktop-sidebar-group-controls button:hover,
html[data-device-category="desktop"] .desktop-sidebar-group-controls button:focus-visible {
  background: #EEF2FF;
  color: #1D4ED8;
  outline: none;
}

/* Single-source publishers are direct navigation items with their own favicon. */
html[data-device-category="desktop"] .desktop-source-group.standalone {
  margin-top: 3px;
}

html[data-device-category="desktop"] .desktop-sidebar-standalone {
  grid-template-columns: 22px minmax(0, 1fr) 10px !important;
}

/* Multi-source children are intentionally text-only: the favicon belongs to
   the publisher group header, preventing repeated redundant icons. */
html[data-device-category="desktop"] .desktop-sidebar-child {
  grid-template-columns: minmax(0, 1fr) 10px !important;
  padding-left: 8px !important;
}

html[data-device-category="desktop"] .desktop-sidebar-popover-source {
  grid-template-columns: minmax(0, 1fr) !important;
}

/* Dark counterparts for the new shell/controls. */
html.theme-dark[data-device-category="desktop"] .desktop-news-card-wrapper {
  border-color: #2B3648 !important;
  background: #111827 !important;
}

html.theme-dark[data-device-category="desktop"] .desktop-news-card-wrapper[data-read="read"],
html.theme-dark[data-device-category="desktop"] .desktop-news-card-wrapper[data-read="read"] > .story-card-cell,
html.theme-dark[data-device-category="desktop"] .desktop-news-card-wrapper[data-read="read"] .story-card {
  background: #18233A !important;
}

html.theme-dark[data-device-category="desktop"] .desktop-sidebar-group-controls button {
  border-color: #334155;
  background: #172033;
  color: #CBD5E1;
}

/* Explicit safety: no v14.1 sidebar/grid changes apply to mobile devices. */
html[data-device-category="mobile"] .desktop-sidebar-group-controls {
  display: none !important;
}


/* ============================================================
   v14.2 — Release A: centered desktop reading layout,
   article-card refinements, compact header, sidebar polish.
   Mobile remains on the existing deployed renderer/styles.
   ============================================================ */

html[data-device-category="desktop"] {
  --desktop-reading-max: 1120px;
}

/* Compact global header: branding left, controls right. */
html[data-device-category="desktop"] .topbar {
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  min-height: 58px !important;
  gap: 12px !important;
}

html[data-device-category="desktop"] .brand-home-button {
  width: 46px !important;
  height: 46px !important;
  border-radius: 11px !important;
}

html[data-device-category="desktop"] .top-actions {
  grid-column: 3;
  gap: 7px !important;
}

html[data-device-category="desktop"] .updated {
  font-size: 10px !important;
}

/* Source context belongs to the content column and shares its exact width. */
.desktop-content-header {
  display: none;
}

html[data-device-category="desktop"] .desktop-content-header {
  display: flex !important;
  grid-column: 2;
  align-items: center;
  width: min(100%, var(--desktop-reading-max));
  margin: 2px auto 6px;
  min-width: 0;
}

html[data-device-category="desktop"] .desktop-header-source {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  padding: 3px 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

html[data-device-category="desktop"] .desktop-header-source-favicon,
html[data-device-category="desktop"] .desktop-header-source-favicon .desktop-sidebar-favicon-wrap {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
}

html[data-device-category="desktop"] .desktop-header-source-favicon .desktop-sidebar-favicon,
html[data-device-category="desktop"] .desktop-header-source-favicon .desktop-sidebar-favicon-fallback {
  width: 20px !important;
  height: 20px !important;
  border-radius: 5px !important;
}

html[data-device-category="desktop"] .desktop-header-source-name {
  font-size: 14px !important;
  font-weight: 850 !important;
  color: #334155 !important;
}

/* Center the complete news list inside the content region. No simulated left margin. */
html[data-device-category="desktop"] .desktop-news-container:not(.hidden) {
  width: min(100%, var(--desktop-reading-max)) !important;
  max-width: var(--desktop-reading-max) !important;
  margin-inline: auto !important;
}

/* Section shell stays clean and aligned with the same reading width. */
html[data-device-category="desktop"] .desktop-day-section {
  margin-bottom: 10px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  overflow: visible !important;
}

html[data-device-category="desktop"] .desktop-day-section > .day-heading {
  min-height: 32px !important;
  padding: 2px 6px !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: #F1F5F9 !important;
  margin-bottom: 6px !important;
}

html[data-device-category="desktop"] .desktop-article-grid {
  gap: 8px !important;
  padding: 0 !important;
  background: transparent !important;
}

/* Refined one-column desktop card. */
html[data-device-category="desktop"] .desktop-news-card-wrapper {
  border: 1px solid #E4E9F0 !important;
  border-radius: 9px !important;
  overflow: hidden !important;
  box-shadow: none !important;
}

html[data-device-category="desktop"] .desktop-news-card-wrapper > .story-card-cell {
  border-radius: 9px !important;
  overflow: hidden !important;
}

html[data-device-category="desktop"] .desktop-news-container .story-card {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 130px minmax(0, 1fr) !important;
  grid-template-areas:
    "media title"
    "media meta"
    "media desc" !important;
  column-gap: 14px !important;
  row-gap: 2px !important;
  align-items: start !important;
  min-width: 0 !important;
  padding: 10px 12px 11px !important;
  border-radius: 9px !important;
}

html[data-device-category="desktop"] .desktop-news-container .story-card.no-image {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-areas:
    "title"
    "meta"
    "desc" !important;
}

/* Larger left thumbnail, consistent crop without distortion. */
html[data-device-category="desktop"] .desktop-news-container .story-image-cell {
  grid-area: media !important;
  width: 130px !important;
  min-width: 130px !important;
  display: block !important;
  align-self: start !important;
}

html[data-device-category="desktop"] .desktop-news-container .story-image {
  display: block !important;
  width: 130px !important;
  height: 84px !important;
  max-width: 130px !important;
  object-fit: cover !important;
  border-radius: 8px !important;
}

html[data-device-category="desktop"] .desktop-news-container .story-title-cell {
  grid-area: title !important;
  padding: 0 34px 0 0 !important;
  min-width: 0 !important;
}

html[data-device-category="desktop"] .desktop-news-container .story-title-trigger {
  display: block !important;
  width: 100% !important;
  text-align: left !important;
}

/* Timestamp/read state now sits immediately below the headline. */
html[data-device-category="desktop"] .desktop-news-container .story-meta {
  grid-area: meta !important;
  display: block !important;
  padding: 1px 0 0 !important;
  min-width: 0 !important;
}

html[data-device-category="desktop"] .desktop-news-container .story-meta-line {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
  min-height: 22px !important;
}

html[data-device-category="desktop"] .desktop-news-container .story-time {
  font-size: var(--qf02-meta) !important;
  color: #64748B !important;
}

html[data-device-category="desktop"] .desktop-news-container .read-indicator {
  flex: 0 0 auto !important;
}

html[data-device-category="desktop"] .desktop-news-container .quick-ask-meta.has-ai-response:not(.hidden) {
  display: inline-flex !important;
  margin: 0 0 0 2px !important;
  min-height: 22px !important;
  padding: 2px 6px !important;
  position: static !important;
  transform: none !important;
}

html[data-device-category="desktop"] .desktop-news-container .quick-ask-media {
  display: none !important;
}

html[data-device-category="desktop"] .desktop-news-container .story-desc {
  grid-area: desc !important;
  padding: 1px 0 0 !important;
  min-width: 0 !important;
}

/* Save/remove control is fixed to the upper-right corner without affecting flow. */
html[data-device-category="desktop"] .desktop-news-container .story-card-corner-action {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  z-index: 3 !important;
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  min-height: 26px !important;
  margin: 0 !important;
  padding: 3px !important;
  align-self: auto !important;
}

html[data-device-category="desktop"] .desktop-news-container .story-card-corner-action .save-article-icon,
html[data-device-category="desktop"] .desktop-news-container .story-card-corner-action .remove-link-icon {
  width: 18px !important;
  height: 18px !important;
}

/* Expanded content stays attached to the same rounded card. */
html[data-device-category="desktop"] .desktop-news-card-wrapper.selected .story-card {
  border-radius: 9px 9px 0 0 !important;
}

html[data-device-category="desktop"] .desktop-analysis-host .analysis-panel {
  border-radius: 0 0 9px 9px !important;
  padding: 8px 12px 10px !important;
}

/* Narrow desktop: retain desktop behavior/preferences and avoid clipping. */
@media (max-width: 980px) {
  html[data-device-category="desktop"] {
    --desktop-reading-max: 100%;
  }

  html[data-device-category="desktop"] .desktop-news-container .story-card {
    grid-template-columns: 112px minmax(0, 1fr) !important;
    column-gap: 11px !important;
  }

  html[data-device-category="desktop"] .desktop-news-container .story-image-cell,
  html[data-device-category="desktop"] .desktop-news-container .story-image {
    width: 112px !important;
    min-width: 112px !important;
    max-width: 112px !important;
  }

  html[data-device-category="desktop"] .desktop-news-container .story-image {
    height: 74px !important;
  }
}

/* Sidebar: single context-sensitive group control. */
html[data-device-category="desktop"] .desktop-sidebar-group-controls {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  min-height: 30px !important;
  margin: 5px 0 2px !important;
}

html[data-device-category="desktop"] .desktop-sidebar-group-controls.hidden,
html[data-device-category="desktop"] .desktop-source-sidebar.collapsed .desktop-sidebar-group-controls {
  display: none !important;
}

html[data-device-category="desktop"] #desktopSidebarToggleGroups {
  display: inline-grid !important;
  place-items: center !important;
  width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 !important;
  border: 1px solid #DDE3EB !important;
  border-radius: 7px !important;
  background: #F8FAFC !important;
  color: #64748B !important;
  font: inherit !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
}

html[data-device-category="desktop"] #desktopSidebarToggleGroups:hover,
html[data-device-category="desktop"] #desktopSidebarToggleGroups:focus-visible {
  background: #EEF2FF !important;
  color: #1D4ED8 !important;
  outline: none !important;
}

/* Saved navigation uses the same bookmark glyph as article save controls. */
html[data-device-category="desktop"] .desktop-sidebar-special-icon .save-article-icon {
  width: 18px !important;
  height: 18px !important;
}

html[data-device-category="desktop"] .desktop-sidebar-special.active .bookmark-outline {
  display: none !important;
}

html[data-device-category="desktop"] .desktop-sidebar-special.active .bookmark-solid {
  display: block !important;
}

/* Compact sidebar rows remain aligned. */
html[data-device-category="desktop"] .desktop-sidebar-special,
html[data-device-category="desktop"] .desktop-sidebar-source,
html[data-device-category="desktop"] .desktop-publisher-heading {
  min-height: 34px !important;
}

/* Dark mode counterparts for new elements. */
html.theme-dark[data-device-category="desktop"] .desktop-header-source-name {
  color: #CBD5E1 !important;
}

html.theme-dark[data-device-category="desktop"] .desktop-day-section > .day-heading {
  background: #151E2E !important;
}

html.theme-dark[data-device-category="desktop"] .desktop-news-card-wrapper {
  border-color: #2B3648 !important;
}

html.theme-dark[data-device-category="desktop"] #desktopSidebarToggleGroups {
  border-color: #334155 !important;
  background: #172033 !important;
  color: #CBD5E1 !important;
}

/* Mobile safety: Release A desktop refinements do not render on phones. */
html[data-device-category="mobile"] .desktop-content-header {
  display: none !important;
}


/* ============================================================
   v14.2.1 — browser-verification corrections
   ============================================================ */
html[data-device-category="desktop"] .desktop-news-container[data-columns="1"] .story-card {
  grid-template-columns: 130px minmax(0, 1fr) !important;
  grid-template-areas:
    "media title"
    "media meta"
    "media desc" !important;
  column-gap: 14px !important;
  row-gap: 2px !important;
}

html[data-device-category="desktop"] .desktop-news-container[data-columns="1"] .story-card.no-image {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-areas:
    "title"
    "meta"
    "desc" !important;
}

@media (max-width: 980px) {
  html[data-device-category="desktop"] .desktop-news-container[data-columns="1"] .story-card {
    grid-template-columns: 112px minmax(0, 1fr) !important;
  }
}


/* ============================================================
   v15.0 — QF20/QF23 workspace, QF02 indicator removal,
   QF05 desktop minimal AI toolbar, QF27 Saved list,
   QF28 + Cikk autosave workflow.
   ============================================================ */

/* Keep the extra toolbar wrappers transparent to the existing mobile design. */
.analysis-ai-actions,
.analysis-original-group {
  display: contents;
}

/* QF20 + QF23: sidebar and news are one centered desktop workspace. */
html[data-device-category="desktop"] {
  --desktop-news-width: 1120px;
  --desktop-sidebar-expanded: 214px;
  --desktop-sidebar-collapsed: 58px;
  --desktop-workspace-gap: 20px;
}

html[data-device-category="desktop"] .shell {
  width: min(
    calc(100% - 24px),
    calc(var(--desktop-sidebar-expanded) + var(--desktop-workspace-gap) + var(--desktop-news-width))
  ) !important;
  max-width: calc(var(--desktop-sidebar-expanded) + var(--desktop-workspace-gap) + var(--desktop-news-width)) !important;
  margin-inline: auto !important;
  transition: max-width .16s ease, width .16s ease;
}

html[data-device-category="desktop"] .shell.desktop-sidebar-collapsed {
  width: min(
    calc(100% - 24px),
    calc(var(--desktop-sidebar-collapsed) + var(--desktop-workspace-gap) + var(--desktop-news-width))
  ) !important;
  max-width: calc(var(--desktop-sidebar-collapsed) + var(--desktop-workspace-gap) + var(--desktop-news-width)) !important;
}

html[data-device-category="desktop"] .dashboard {
  --desktop-sidebar-width: var(--desktop-sidebar-expanded) !important;
  grid-template-columns: var(--desktop-sidebar-width) minmax(0, 1fr) !important;
  column-gap: var(--desktop-workspace-gap) !important;
  width: 100% !important;
}

html[data-device-category="desktop"] .dashboard.desktop-sidebar-collapsed {
  --desktop-sidebar-width: var(--desktop-sidebar-collapsed) !important;
}

html[data-device-category="desktop"] .desktop-news-container:not(.hidden),
html[data-device-category="desktop"] .desktop-content-header,
html[data-device-category="desktop"] #linkAddPanel,
html[data-device-category="desktop"] #sourceAddPanel,
html[data-device-category="desktop"] #status {
  width: 100% !important;
  max-width: var(--desktop-news-width) !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

html[data-device-category="desktop"] .topbar {
  min-height: 54px !important;
  padding-block: 4px !important;
}

html[data-device-category="desktop"] .brand-home-button {
  justify-self: start !important;
}

html[data-device-category="desktop"] .top-actions {
  justify-self: end !important;
}

/* QF05: minimal icon + text toolbar, desktop only. */
html[data-device-category="desktop"] .desktop-analysis-host .analysis-topline {
  display: block !important;
  width: 100% !important;
}

html[data-device-category="desktop"] .desktop-analysis-host .analysis-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  width: 100% !important;
  min-width: 0 !important;
  border-bottom: 1px solid #E7ECF3;
  padding-bottom: 5px;
}

html[data-device-category="desktop"] .desktop-analysis-host .analysis-ai-actions {
  display: flex !important;
  align-items: center;
  gap: 3px;
  min-width: 0;
}

html[data-device-category="desktop"] .desktop-analysis-host .analysis-original-group {
  display: flex !important;
  align-items: center;
  margin-left: auto;
  padding-left: 11px;
  border-left: 1px solid #E1E7EF;
}

html[data-device-category="desktop"] .desktop-analysis-host .analysis-button,
html[data-device-category="desktop"] .desktop-analysis-host .analysis-original-link,
html[data-device-category="desktop"] .desktop-analysis-host .analysis-actions button.completed,
html[data-device-category="desktop"] .desktop-analysis-host .analysis-actions button:disabled {
  position: relative;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  min-height: 30px !important;
  width: auto !important;
  padding: 5px 7px !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: #475569 !important;
  font-size: var(--qf02-action) !important;
  line-height: 1.1 !important;
  font-weight: 760 !important;
  text-decoration: none !important;
  box-shadow: none !important;
  opacity: 1 !important;
  cursor: pointer !important;
}

html[data-device-category="desktop"] .desktop-analysis-host .analysis-action-icon {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

html[data-device-category="desktop"] .desktop-analysis-host .analysis-ai-button:hover,
html[data-device-category="desktop"] .desktop-analysis-host .analysis-original-link:hover {
  background: #EEF5FF !important;
  color: #1D4ED8 !important;
}

html[data-device-category="desktop"] .desktop-analysis-host .analysis-ai-button.selected {
  color: #1D4ED8 !important;
  background: transparent !important;
}

html[data-device-category="desktop"] .desktop-analysis-host .analysis-ai-button.selected::after {
  content: "";
  position: absolute;
  left: 7px;
  right: 7px;
  bottom: -6px;
  height: 2px;
  border-radius: 2px;
  background: #2563EB;
}

html[data-device-category="desktop"] .desktop-analysis-host .analysis-ai-button:active,
html[data-device-category="desktop"] .desktop-analysis-host .analysis-original-link:active {
  transform: translateY(1px);
  background: #E6F0FF !important;
}

html[data-device-category="desktop"] .desktop-analysis-host .analysis-ai-button:focus-visible,
html[data-device-category="desktop"] .desktop-analysis-host .analysis-original-link:focus-visible {
  outline: 2px solid rgba(37,99,235,.45) !important;
  outline-offset: 2px !important;
}

html[data-device-category="desktop"] .desktop-analysis-host .analysis-ai-button.completed {
  color: #334155 !important;
}

html[data-device-category="desktop"] .desktop-analysis-host .analysis-ai-button.completed.selected {
  color: #1D4ED8 !important;
}

html[data-device-category="desktop"] .desktop-analysis-host .analysis-external-icon {
  font-size: 11px !important;
}

.analysis-loading {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.analysis-loading-spinner {
  width: 13px;
  height: 13px;
  border: 2px solid rgba(37,99,235,.2);
  border-top-color: #2563EB;
  border-radius: 50%;
  animation: analysis-spin .7s linear infinite;
}

@keyframes analysis-spin {
  to { transform: rotate(360deg); }
}

/* QF27: Saved Articles is one continuous list; no date-section chrome. */
html[data-device-category="desktop"] .desktop-saved-article-list {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 8px !important;
  padding: 0 !important;
}

/* QF28: compact open-and-save URL workflow. */
.link-add-help {
  margin: 0 0 7px;
  color: #667085;
  font-size: 11px;
  line-height: 1.35;
}

.link-add-open-original {
  display: inline-flex;
  align-items: center;
  margin-top: 7px;
  color: #1D4ED8;
  font-size: 12px;
  font-weight: 750;
  text-decoration: none;
}

.link-add-open-original:hover {
  text-decoration: underline;
}

.link-add-open-original.hidden {
  display: none !important;
}

/* Dark mode for the new desktop toolbar/workflow. */
html.theme-dark[data-device-category="desktop"] .desktop-analysis-host .analysis-actions {
  border-bottom-color: #2B3648;
}

html.theme-dark[data-device-category="desktop"] .desktop-analysis-host .analysis-original-group {
  border-left-color: #334155;
}

html.theme-dark[data-device-category="desktop"] .desktop-analysis-host .analysis-button,
html.theme-dark[data-device-category="desktop"] .desktop-analysis-host .analysis-original-link,
html.theme-dark[data-device-category="desktop"] .desktop-analysis-host .analysis-actions button.completed {
  color: #CBD5E1 !important;
}

html.theme-dark[data-device-category="desktop"] .desktop-analysis-host .analysis-ai-button:hover,
html.theme-dark[data-device-category="desktop"] .desktop-analysis-host .analysis-original-link:hover {
  background: #172554 !important;
  color: #93C5FD !important;
}

html.theme-dark[data-device-category="desktop"] .desktop-analysis-host .analysis-ai-button.selected {
  color: #93C5FD !important;
}

html.theme-dark .link-add-help {
  color: #94A3B8;
}

/* Mobile remains on the existing layout/navigation/toolbar styling. */
html[data-device-category="mobile"] .analysis-ai-actions,
html[data-device-category="mobile"] .analysis-original-group {
  display: contents !important;
}


/* QF05 hover specificity guard: completed/saved-response buttons still hover visibly. */
html[data-device-category="desktop"] .desktop-analysis-host .analysis-actions .analysis-ai-button:hover,
html[data-device-category="desktop"] .desktop-analysis-host .analysis-actions .analysis-ai-button.selected:hover {
  background: #EEF5FF !important;
  color: #1D4ED8 !important;
}

html.theme-dark[data-device-category="desktop"] .desktop-analysis-host .analysis-actions .analysis-ai-button:hover,
html.theme-dark[data-device-category="desktop"] .desktop-analysis-host .analysis-actions .analysis-ai-button.selected:hover {
  background: #172554 !important;
  color: #93C5FD !important;
}


/* ============================================================
   v15.1 — post-v15 production-test fixes
   ============================================================ */

/* Auth regression fix: desktop grid rules must never override dashboard.hidden. */
.dashboard.hidden,
html[data-device-category="desktop"] .dashboard.hidden,
html[data-device-category="mobile"] .dashboard.hidden {
  display: none !important;
}

/* Selected and generated are separate states in the desktop AI toolbar. */
.analysis-generated-marker,
.analysis-generated-count {
  display: none;
}

html[data-device-category="desktop"] .desktop-analysis-host .analysis-ai-button.completed .analysis-generated-marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #2563EB;
  font-size: 11px;
  line-height: 1;
  font-weight: 950;
  margin-left: 1px;
}

html[data-device-category="desktop"] .desktop-analysis-host .analysis-generated-count:not(.hidden) {
  display: inline;
  color: #2563EB;
  font-size: 10px;
  line-height: 1;
  font-weight: 900;
  white-space: nowrap;
}

html[data-device-category="desktop"] .desktop-analysis-host .analysis-ai-button.completed:not(.selected) {
  color: #334155 !important;
}

html[data-device-category="desktop"] .desktop-analysis-host .analysis-ai-button.completed:not(.selected) .analysis-generated-marker,
html[data-device-category="desktop"] .desktop-analysis-host .analysis-ai-button.completed:not(.selected) .analysis-generated-count {
  color: #2563EB !important;
}

/* Saved metadata: source/category appears once, in the same compact line as time/read. */
.news-row .story-meta-line .story-source-name {
  display: inline-flex !important;
  align-items: center;
  min-width: 0;
  max-width: 45%;
  margin: 0 !important;
  color: #64748B !important;
  font-size: inherit !important;
  font-weight: 750 !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.news-row .story-meta-line .story-source-name::before {
  content: "·";
  margin-right: 5px;
  color: #94A3B8;
}

html.theme-dark .news-row .story-meta-line .story-source-name {
  color: #AAB6C8 !important;
}

/* Saved sticky source uses the same bookmark semantics as saved navigation. */
.sticky-source-favicon-wrap.is-saved-source {
  border-radius: 5px;
  color: #1D4ED8;
  overflow: visible;
}

.sticky-source-bookmark {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* Powered-by branding is intentionally subtle and close to text line-height. */
.d2-original-logo-v3 {
  width: 12px !important;
  height: 13px !important;
}

@media (max-width: 900px) {
  .d2-original-logo-v3 {
    width: 11px !important;
    height: 12px !important;
  }
}


/* ============================================================
   v15.2 — mobile refinement
   ============================================================ */
@media (max-width: 900px) {
  .story-card {
    position: relative !important;
    grid-template-columns: 76px minmax(0, 1fr) !important;
    grid-template-areas:
      "meta meta"
      "media title"
      "media desc" !important;
    column-gap: 10px !important;
    row-gap: 2px !important;
    padding: 9px 8px 10px !important;
  }

  .story-meta {
    margin: 0 !important;
    padding: 0 34px 3px 0 !important;
  }

  .story-meta-line {
    min-height: 20px !important;
    gap: 5px !important;
    overflow: visible !important;
  }

  /* Match desktop: compact dot only, no visible read/unread text. */
  .read-indicator {
    display: inline-flex !important;
    flex: 0 0 8px !important;
    width: 8px !important;
    min-width: 8px !important;
    height: 8px !important;
    min-height: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #6366F1 !important;
    overflow: hidden !important;
    color: transparent !important;
    line-height: 0 !important;
    box-shadow: none !important;
  }

  .news-row[data-read="read"] .read-indicator,
  .news-row.checked .read-indicator,
  .news-row.checked .read-indicator.is-read {
    background: #CBD5E1 !important;
  }

  .read-indicator .read-label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  html.theme-dark .news-row[data-read="unread"] .read-indicator,
  html.theme-dark .news-row:not(.checked) .read-indicator {
    background: #818CF8 !important;
  }

  html.theme-dark .news-row[data-read="read"] .read-indicator,
  html.theme-dark .news-row.checked .read-indicator,
  html.theme-dark .news-row.checked .read-indicator.is-read {
    background: #64748B !important;
  }

  /* Remove legacy mobile offsets: image and title share the same top edge. */
  .story-image-cell,
  .story-title-cell {
    align-self: start !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  .story-image-cell {
    width: 76px !important;
    min-width: 76px !important;
    overflow: visible !important;
  }

  .story-image,
  .story-image-placeholder {
    width: 76px !important;
    height: 54px !important;
    margin: 0 !important;
  }

  .story-title-cell {
    padding-right: 0 !important;
  }

  .story-title-wrap,
  .story-title-trigger {
    margin-top: 0 !important;
  }

  .story-desc {
    align-self: start !important;
    padding-top: 2px !important;
    margin-top: 0 !important;
  }

  /* Bookmark at the top-right of the card with a generous touch target. */
  .story-media-action,
  .save-article-button.story-media-action {
    position: absolute !important;
    top: 5px !important;
    right: 5px !important;
    z-index: 2 !important;
    width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    margin: 0 !important;
    align-self: auto !important;
    border-radius: 8px !important;
  }

  .save-article-icon,
  .remove-link-icon {
    width: 18px !important;
    height: 18px !important;
  }

  /* Compact mobile AI toolbar: three AI actions + icon-only original link. */
  .analysis-actions {
    display: flex !important;
    align-items: stretch !important;
    justify-content: space-between !important;
    gap: 4px !important;
    width: 100% !important;
  }

  .analysis-ai-actions {
    display: flex !important;
    align-items: stretch !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    gap: 2px !important;
  }

  .analysis-ai-button {
    position: relative !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    min-height: 36px !important;
    padding: 5px 4px 7px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #475569 !important;
    box-shadow: none !important;
    font-size: 11px !important;
    line-height: 1.05 !important;
    font-weight: 800 !important;
    gap: 3px !important;
    white-space: nowrap !important;
  }

  .analysis-ai-button::after {
    content: "";
    position: absolute;
    left: 7px;
    right: 7px;
    bottom: 1px;
    height: 2px;
    border-radius: 999px;
    background: transparent;
  }

  .analysis-ai-button.selected {
    color: #1D4ED8 !important;
    background: transparent !important;
  }

  .analysis-ai-button.selected::after {
    background: #2563EB !important;
  }

  .analysis-ai-button:hover,
  .analysis-ai-button:active,
  .analysis-ai-button:focus-visible {
    background: #EEF5FF !important;
    color: #1D4ED8 !important;
  }

  .analysis-action-icon {
    width: 14px !important;
    height: 14px !important;
    flex: 0 0 14px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.8 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }

  .analysis-ai-button.completed .analysis-generated-marker {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #2563EB !important;
    font-size: 10px !important;
    line-height: 1 !important;
    font-weight: 950 !important;
    margin-left: 0 !important;
  }

  .analysis-generated-count:not(.hidden) {
    display: inline !important;
    color: #2563EB !important;
    font-size: 9px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    margin-left: 0 !important;
  }

  .analysis-original-group {
    display: flex !important;
    flex: 0 0 36px !important;
    width: 36px !important;
    min-width: 36px !important;
  }

  .analysis-original-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: #475569 !important;
  }

  .analysis-original-link:hover,
  .analysis-original-link:active,
  .analysis-original-link:focus-visible {
    background: #EEF5FF !important;
    color: #1D4ED8 !important;
  }

  .analysis-original-link [data-role="original-label"] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  .analysis-external-icon {
    font-size: 18px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
  }

  .analysis-panel {
    padding-top: 6px !important;
  }

  html.theme-dark .analysis-ai-button {
    color: #AAB6C8 !important;
  }

  html.theme-dark .analysis-ai-button.selected,
  html.theme-dark .analysis-ai-button.completed .analysis-generated-marker,
  html.theme-dark .analysis-generated-count:not(.hidden),
  html.theme-dark .analysis-original-link:hover,
  html.theme-dark .analysis-original-link:active,
  html.theme-dark .analysis-original-link:focus-visible {
    color: #93C5FD !important;
  }
}

@media (max-width: 390px) {
  .story-card {
    grid-template-columns: 72px minmax(0, 1fr) !important;
    column-gap: 8px !important;
    padding: 8px 7px 9px !important;
  }

  .story-image-cell {
    width: 72px !important;
    min-width: 72px !important;
  }

  .story-image,
  .story-image-placeholder {
    width: 72px !important;
    height: 52px !important;
  }

  .analysis-ai-button {
    font-size: 10px !important;
    padding-inline: 2px !important;
    gap: 2px !important;
  }

  .analysis-action-icon {
    width: 13px !important;
    height: 13px !important;
    flex-basis: 13px !important;
  }
}


/* ============================================================
   v15.3 — 2Day.news branding
   User-provided horizontal wordmark is used in the global header.
   ============================================================ */

.brand-home-button {
  width: 184px !important;
  height: 46px !important;
  padding: 0 !important;
  border-radius: 9px !important;
  overflow: visible !important;
  justify-content: flex-start !important;
}

.brand-home-logo {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  object-fit: contain !important;
  object-position: left center !important;
}

/* Desktop keeps the fuller brand lockup. */
html[data-device-category="desktop"] .brand-home-button {
  width: 184px !important;
  height: 46px !important;
  border-radius: 9px !important;
}

/* Mobile uses the same logo, compacted enough to leave room for
   language, refresh, and account controls at 390px. */
@media (max-width: 900px) {
  .brand-home-button,
  html[data-device-category="mobile"] .brand-home-button {
    width: 126px !important;
    height: 40px !important;
    min-width: 126px !important;
    border-radius: 8px !important;
  }

  .topbar {
    gap: 6px !important;
  }

  .top-actions {
    gap: 5px !important;
  }
}

/* Very narrow phones get a slightly smaller lockup rather than wrapping. */
@media (max-width: 360px) {
  .brand-home-button,
  html[data-device-category="mobile"] .brand-home-button {
    width: 112px !important;
    min-width: 112px !important;
    height: 36px !important;
  }
}


/* ============================================================
   v15.4 — mobile card positioning + AI readability
   ============================================================ */
@media (max-width: 900px) {
  /*
   * Put thumbnail and title in the FIRST row of the card so both truly start
   * at the top. Metadata moves beneath the thumbnail; description beneath title.
   * This removes the previous full-width metadata row that kept pushing the
   * content downward.
   */
  .story-card {
    grid-template-columns: 76px minmax(0, 1fr) !important;
    grid-template-areas:
      "media title"
      "meta desc" !important;
    align-items: start !important;
    column-gap: 10px !important;
    row-gap: 4px !important;
    padding: 8px 8px 10px !important;
  }

  .story-image-cell {
    grid-area: media !important;
    align-self: start !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .story-title-cell {
    grid-area: title !important;
    align-self: start !important;
    margin: 0 !important;
    padding: 0 34px 0 0 !important;
  }

  .story-title-wrap,
  .story-title-trigger {
    margin: 0 !important;
    padding-top: 0 !important;
  }

  .story-meta {
    grid-area: meta !important;
    align-self: start !important;
    margin: 0 !important;
    padding: 2px 0 0 !important;
  }

  .story-meta-line {
    min-height: 18px !important;
    justify-content: flex-start !important;
    gap: 4px !important;
  }

  .story-desc {
    grid-area: desc !important;
    align-self: start !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* AI toolbar text was too small on real mobile hardware. */
  .analysis-ai-button {
    min-height: 40px !important;
    padding: 6px 4px 8px !important;
    font-size: 13px !important;
    line-height: 1.1 !important;
    font-weight: 800 !important;
    gap: 3px !important;
  }

  .analysis-action-icon {
    width: 14px !important;
    height: 14px !important;
    flex: 0 0 14px !important;
  }

  .analysis-ai-button.completed .analysis-generated-marker {
    font-size: 11px !important;
  }

  .analysis-generated-count:not(.hidden) {
    font-size: 11px !important;
  }

  .analysis-original-group {
    flex-basis: 40px !important;
    width: 40px !important;
    min-width: 40px !important;
  }

  .analysis-original-link {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
  }
}

@media (max-width: 390px) {
  .story-card {
    grid-template-columns: 72px minmax(0, 1fr) !important;
    column-gap: 8px !important;
    row-gap: 4px !important;
    padding: 7px 7px 9px !important;
  }

  .analysis-ai-button {
    min-height: 40px !important;
    padding: 6px 2px 8px !important;
    font-size: 12px !important;
    gap: 2px !important;
  }

  .analysis-action-icon {
    width: 12px !important;
    height: 12px !important;
    flex-basis: 12px !important;
  }

  .analysis-ai-button.completed .analysis-generated-marker,
  .analysis-generated-count:not(.hidden) {
    font-size: 10px !important;
  }

  .analysis-original-group,
  .analysis-original-link {
    width: 38px !important;
    min-width: 38px !important;
    flex-basis: 38px !important;
  }
}


/* v15.4 readability follow-up: give the long Summary label more width so
   all AI labels can use a genuinely readable mobile font size. */
@media (max-width: 900px) {
  .analysis-ai-button {
    font-size: 14px !important;
    min-height: 42px !important;
  }

  .analysis-ai-button[data-action="summary"] {
    flex: 1.35 1 0 !important;
  }

  .analysis-ai-button[data-action="background"] {
    flex: 0.95 1 0 !important;
  }

  .analysis-ai-button[data-ui-action="ask-toggle"] {
    flex: 0.95 1 0 !important;
  }

  .analysis-original-group,
  .analysis-original-link {
    width: 42px !important;
    min-width: 42px !important;
    flex-basis: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
  }
}

@media (max-width: 390px) {
  .analysis-ai-button {
    font-size: 13px !important;
    min-height: 42px !important;
    padding-inline: 2px !important;
  }

  .analysis-action-icon {
    width: 12px !important;
    height: 12px !important;
    flex-basis: 12px !important;
  }

  .analysis-original-group,
  .analysis-original-link {
    width: 40px !important;
    min-width: 40px !important;
    flex-basis: 40px !important;
  }
}


/* ============================================================
   v15.5 — final logo / icon update
   ============================================================ */
.brand-home-button,
html[data-device-category="desktop"] .brand-home-button {
  display: inline-flex !important;
  align-items: flex-end !important;
  justify-content: flex-start !important;
  gap: 9px !important;
  width: auto !important;
  min-width: 0 !important;
  height: 62px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  overflow: visible !important;
}
.brand-home-logo {
  flex: 0 0 60px !important;
  width: 60px !important;
  height: 60px !important;
  max-width: none !important;
  object-fit: contain !important;
  object-position: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}
.brand-home-text {
  display: inline-block !important;
  margin: 0 0 4px 0 !important;
  color: #173B87;
  font-size: 23px !important;
  line-height: 1 !important;
  font-weight: 500 !important;
  letter-spacing: -0.35px !important;
  white-space: nowrap !important;
}
html.theme-dark .brand-home-text { color: #D7E4FF !important; }
@media (max-width: 900px) {
  .brand-home-button,
  html[data-device-category="mobile"] .brand-home-button,
  html[data-device-category="desktop"] .brand-home-button {
    gap: 6px !important;
    width: auto !important;
    min-width: 0 !important;
    height: 52px !important;
  }
  .brand-home-logo {
    flex-basis: 50px !important;
    width: 50px !important;
    height: 50px !important;
  }
  .brand-home-text {
    margin-bottom: 4px !important;
    font-size: 17px !important;
    font-weight: 500 !important;
    letter-spacing: -0.2px !important;
  }
  .topbar { gap: 6px !important; }
  .top-actions { gap: 4px !important; }
}
@media (max-width: 360px) {
  .brand-home-logo {
    flex-basis: 46px !important;
    width: 46px !important;
    height: 46px !important;
  }
  .brand-home-button,
  html[data-device-category="mobile"] .brand-home-button,
  html[data-device-category="desktop"] .brand-home-button {
    height: 48px !important;
    gap: 5px !important;
  }
  .brand-home-text { font-size: 15px !important; margin-bottom: 4px !important; }
}


/* ============================================================
   v15.6 — QF29 Summary availability states
   ============================================================ */
.analysis-availability {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid #D8E1ED;
  border-radius: 8px;
  background: #F8FAFC;
  color: #475569;
  font-size: 13px;
  line-height: 1.45;
}

.analysis-availability-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #E7EEF8;
  color: #315B94;
  font-size: 11px;
  line-height: 1;
  font-weight: 800;
  margin-top: 1px;
}

html.theme-dark .analysis-availability {
  border-color: #334155;
  background: #172033;
  color: #CBD5E1;
}

html.theme-dark .analysis-availability-icon {
  background: #24344F;
  color: #BFDBFE;
}

@media (max-width: 900px) {
  .analysis-availability {
    margin-top: 6px;
    padding: 9px 10px;
    font-size: 13px;
  }
}


/* ============================================================
   v15.7 — Quiet Signature production UI (QF29 behavior retained)
   Identical D2 shape in both themes, original Nunito Sans, live favicons,
   same article click/read semantics. Only mobile moves Save/Original.
   ============================================================ */
:root { --d2-ink: #0D2A45; --d2-accent: #315EDB; --d2-stroke: #D6E1EC; }
html.theme-dark { --d2-ink: #E0EEFF; --d2-accent: #82AAFF; --d2-stroke: #314761; }

/* Dark logo reuses the exact current PNG alpha/silhouette; only RGB changes. */
.brand-home-logo-dark,
html.theme-light .brand-home-logo-dark { display: none !important; }
html.theme-dark .brand-home-logo-light { display: none !important; }
html.theme-dark .brand-home-logo-dark { display: block !important; }
.brand-home-text { color: var(--d2-ink) !important; font-weight: 700 !important; letter-spacing: -.4px !important; }

/* Brand signature in the existing navigation; no change to source icons. */
.desktop-sidebar-source.active { position: relative; }
html:not(.theme-dark) .desktop-sidebar-source.active { background: #F0F5FB !important; color: #0D2A45 !important; }
.desktop-sidebar-source.active::before { content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 3px; background: var(--d2-accent); border-radius: 0 3px 3px 0; pointer-events: none; }
.source-pill.custom-source-pill.active { border-radius: 6px 14px 14px 6px !important; }
html:not(.theme-dark) .source-pill.custom-source-pill.active { background: #0D2A45 !important; border-color: #0D2A45 !important; color: #FFFFFF !important; }
html.theme-dark .source-pill.custom-source-pill.active { background: #274B72 !important; border-color: #6799D6 !important; color: #F4F8FF !important; }
html:not(.theme-dark) .topbar { border-bottom: 1px solid #DCE5EE !important; }

/* Publisher favicons are separate marks and must NEVER be treated as monochrome brand assets. */
.source-pill img, .desktop-source-sidebar img, .desktop-header-source img,
.sticky-source-indicator img { filter: none !important; opacity: 1 !important; mix-blend-mode: normal !important; }

/* The same read/unread semantics across themes: unread=filled, read=hollow.
   All older v15.6 container backgrounds are explicitly neutralized. */
.news-row .read-indicator,
.news-row[data-read="read"] .read-indicator,
.news-row[data-read="unread"] .read-indicator,
.news-row.checked .read-indicator,
html.theme-dark .news-row .read-indicator,
html.theme-dark .news-row[data-read="read"] .read-indicator,
html.theme-dark .news-row[data-read="unread"] .read-indicator,
html.theme-dark .news-row.checked .read-indicator {
  position: relative !important; display: inline-flex !important;
  align-items: center !important; justify-content: center !important;
  flex: 0 0 12px !important; width: 12px !important; height: 12px !important;
  min-width: 12px !important; max-width: 12px !important;
  min-height: 12px !important; max-height: 12px !important;
  padding: 0 !important; margin: 0 !important; border: 0 !important;
  border-radius: 0 !important; background: transparent !important;
  box-shadow: none !important; outline: 0 !important; color: transparent !important;
  overflow: visible !important; line-height: 0 !important;
}
.news-row .read-indicator::before,
html.theme-dark .news-row .read-indicator::before {
  content: "" !important; box-sizing: border-box !important;
  flex: 0 0 9px !important; width: 9px !important; height: 9px !important;
  border-radius: 50% !important; border: 0 !important;
  background: #315EDB !important; box-shadow: none !important;
}
html.theme-dark .news-row .read-indicator::before { background: #82AAFF !important; }
.news-row[data-read="read"] .read-indicator::before,
.news-row.checked .read-indicator::before,
html.theme-dark .news-row[data-read="read"] .read-indicator::before,
html.theme-dark .news-row.checked .read-indicator::before {
  background: transparent !important; border: 1.8px solid #8797AE !important;
}
html.theme-dark .news-row[data-read="read"] .read-indicator::before,
html.theme-dark .news-row.checked .read-indicator::before { border-color: #A9B8D0 !important; }
.read-indicator .read-label { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; }

/* QF30 — D2 signature: short open-ended corner accents, NOT side rails.
   A single reusable SVG mask guarantees identical geometry and round caps.
   Color is inherited from --d2-accent; no new theme or text tokens needed. */
html[data-device-category="desktop"] .desktop-news-card-wrapper.selected {
  position: relative !important;
  overflow: hidden !important;
}
html[data-device-category="desktop"] .desktop-news-card-wrapper.selected .story-card {
  box-shadow: none !important;
}
html[data-device-category="desktop"] .desktop-news-card-wrapper.selected::before,
html[data-d2-border="mirrored"][data-device-category="desktop"] .desktop-news-card-wrapper.selected::after {
  content: "";
  position: absolute;
  width: clamp(47px, 18%, 76px);
  aspect-ratio: 1 / 1;
  background: var(--d2-accent);
  -webkit-mask: url("d2-corner-mask.svg") center / 100% 100% no-repeat;
  mask: url("d2-corner-mask.svg") center / 100% 100% no-repeat;
  z-index: 8;
  pointer-events: none;
}
html[data-device-category="desktop"] .desktop-news-card-wrapper.selected::before {
  top: 0; left: 0;
}
html[data-d2-border="mirrored"][data-device-category="desktop"] .desktop-news-card-wrapper.selected::after {
  bottom: 0; right: 0;
  transform: rotate(180deg);
}
/* v15.7's separate horizontal top strip is replaced by the unified corner. */
html[data-device-category="desktop"] .desktop-news-card-wrapper.selected > .story-card-cell::before {
  content: none !important;
}
/* AI styling is quiet, not an extra navigation scheme. */
.analysis-ai-button { border-radius: 8px !important; }
html:not(.theme-dark) .analysis-ai-button[data-action="summary"] { color: #0D2A45 !important; background: #EFF4FA !important; border: 1px solid #BACDDD !important; }
html.theme-dark .analysis-ai-button[data-action="summary"] { color: #DBEEFF !important; background: #1C3654 !important; border: 1px solid #4F749A !important; }
.analysis-save-group { display: none !important; }

@media (max-width: 900px) {
  /* Brand lockup is larger in text, not larger in header height. */
  .brand-home-button, html[data-device-category="mobile"] .brand-home-button {
    gap: 7px !important; height: 44px !important; width: auto !important;
    min-width: 0 !important; align-items: center !important;
  }
  .brand-home-logo { flex: 0 0 40px !important; width: 40px !important; height: 40px !important; }
  .brand-home-text { font-size: 19px !important; line-height: 1.1 !important; margin: 0 !important; letter-spacing: -.5px !important; }
  .topbar { gap: 4px !important; }
  .top-actions { gap: 4px !important; min-width: 0 !important; flex-wrap: nowrap !important; }

  /* Save is in the expanded mobile tray, not an overlaid card corner. */
  #newsBody .save-article-button.story-media-action { display: none !important; }
  #newsBody .story-meta { padding-right: 0 !important; }

  #newsBody .news-row.selected .story-card { box-shadow: none !important; position: relative !important; }
  /* QF30: mobile uses the same two short, rounded paths as desktop.
     The action panel is a separate table row, so the lower-right accent
     attaches to its bottom edge, not the bottom of the headline card. */
  #newsBody .news-row.selected .story-card::before,
  html[data-d2-border="mirrored"] #newsBody .news-row.selected + .analysis-row .analysis-panel::after {
    content: "";
    position: absolute;
    width: clamp(47px, 18%, 76px);
    aspect-ratio: 1 / 1;
    background: var(--d2-accent);
    -webkit-mask: url("d2-corner-mask.svg") center / 100% 100% no-repeat;
    mask: url("d2-corner-mask.svg") center / 100% 100% no-repeat;
    z-index: 5;
    pointer-events: none;
  }
  #newsBody .news-row.selected .story-card::before { top: 0; left: 0; }
  html[data-d2-border="mirrored"] #newsBody .news-row.selected + .analysis-row .analysis-panel {
    position: relative !important;
  }
  html[data-d2-border="mirrored"] #newsBody .news-row.selected + .analysis-row .analysis-panel::after {
    right: 0; bottom: 0;
    transform: rotate(180deg);
  }
  /* Remove older full-height accents; the new SVG supplies both turns. */
  #newsBody .news-row.selected .story-card::after,
  html[data-d2-border="mirrored"] #newsBody .news-row.selected > .story-card-cell::after {
    content: none !important;
  }
  /* Use the app's existing analysis template and real AI handlers. */
  #newsBody .analysis-row .analysis-panel { padding: 9px 10px 12px !important; }
  #newsBody .analysis-row .analysis-topline { gap: 8px !important; }
  #newsBody .analysis-row .analysis-actions {
    display: flex !important; flex-wrap: wrap !important; gap: 7px !important;
    align-items: stretch !important; justify-content: flex-start !important;
    width: 100% !important;
  }
  #newsBody .analysis-row .analysis-ai-actions {
    flex: 1 0 100% !important; width: 100% !important; display: flex !important;
    flex-wrap: wrap !important; align-items: stretch !important; gap: 6px !important;
  }
  #newsBody .analysis-row .analysis-ai-button {
    position: relative !important; display: inline-flex !important; align-items: center !important;
    justify-content: center !important; flex: 1 1 27% !important; width: auto !important;
    min-width: 0 !important; min-height: 38px !important;
    padding: 7px 7px !important; border: 1px solid var(--d2-stroke) !important;
    border-radius: 8px !important; font-family: inherit !important;
    font-size: var(--qf02-action, 12px) !important; line-height: 1.15 !important;
    font-weight: 800 !important; white-space: normal !important;
    background: #FFFFFF !important; color: #0D2A45 !important;
  }
  #newsBody .analysis-row .analysis-ai-button[data-action="summary"] { background: #EFF4FA !important; border-color: #BACDDD !important; }
  #newsBody .analysis-row .analysis-ai-button.selected { border-color: #7297DC !important; color: #1D4ED8 !important; }
  #newsBody .analysis-row .analysis-original-group,
  #newsBody .analysis-row .analysis-save-group {
    display: flex !important; flex: 1 1 42% !important; width: auto !important;
    min-width: 0 !important; max-width: none !important;
  }
  #newsBody .analysis-row .analysis-original-link,
  #newsBody .analysis-row .analysis-save-button {
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    gap: 6px !important; width: 100% !important; min-width: 0 !important;
    height: auto !important; min-height: 40px !important;
    padding: 7px 9px !important; border: 1px solid var(--d2-stroke) !important;
    border-radius: 8px !important; background: #F6F9FD !important; color: #0D2A45 !important;
    font-family: inherit !important; font-size: var(--qf02-action, 12px) !important;
    font-weight: 800 !important; line-height: 1.15 !important; white-space: normal !important;
    text-decoration: none !important; box-shadow: none !important;
  }
  #newsBody .analysis-row .analysis-original-link [data-role="original-label"] {
    position: static !important; display: inline !important; visibility: visible !important;
    width: auto !important; height: auto !important; margin: 0 !important;
    padding: 0 !important; overflow: visible !important; clip: auto !important;
    clip-path: none !important; white-space: normal !important;
  }
  #newsBody .analysis-row .analysis-save-button.is-saved {
    border-color: #7AB79E !important; color: #19573A !important; background: #E4F1EA !important;
  }
  html.theme-dark #newsBody .analysis-row .analysis-ai-button,
  html.theme-dark #newsBody .analysis-row .analysis-original-link,
  html.theme-dark #newsBody .analysis-row .analysis-save-button {
    color: #DAEAFF !important; background: #152640 !important; border-color: #3F5573 !important;
  }
  html.theme-dark #newsBody .analysis-row .analysis-ai-button[data-action="summary"] { background: #1C3654 !important; border-color: #4F749A !important; }
  html.theme-dark #newsBody .analysis-row .analysis-ai-button.selected { border-color: #82AAFF !important; color: #B6D4FF !important; }
  html.theme-dark #newsBody .analysis-row .analysis-original-link,
  html.theme-dark #newsBody .analysis-row .analysis-save-button { background: #192A40 !important; }
  html.theme-dark #newsBody .analysis-row .analysis-save-button.is-saved { border-color: #5AA785 !important; color: #CCF8DD !important; background: #1D3D37 !important; }
  @media (prefers-reduced-motion: no-preference) {
    #newsBody .analysis-row .analysis-panel { animation: d2QuietReveal .17s ease-out; transform-origin: top; }
  }
}
@keyframes d2QuietReveal { from { opacity:.4; transform:translateY(-5px); } to { opacity:1; transform:translateY(0); } }
@media (max-width: 360px) {
  .brand-home-logo { flex-basis: 36px !important; width: 36px !important; height: 36px !important; }
  .brand-home-text { font-size: 17px !important; }
  .brand-home-button { gap: 5px !important; }
  .top-actions { gap: 3px !important; }
}


/* v15.7.1 — robust two-row action bar on compact mobile screens.
   First row: existing three AI actions. Second row: Original + Save.
   Grid prevents the publisher link from collapsing to its old icon-only width. */
@media (max-width: 900px) {
  html[data-device-category="mobile"] #newsBody .analysis-row .analysis-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    align-items: stretch !important;
    justify-items: stretch !important;
  }
  html[data-device-category="mobile"] #newsBody .analysis-row .analysis-ai-actions {
    display: grid !important;
    grid-column: 1 / -1 !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
    align-items: stretch !important;
  }
  html[data-device-category="mobile"] #newsBody .analysis-row .analysis-original-group,
  html[data-device-category="mobile"] #newsBody .analysis-row .analysis-save-group {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    flex: none !important;
    align-self: stretch !important;
  }
  html[data-device-category="mobile"] #newsBody .analysis-row .analysis-original-link,
  html[data-device-category="mobile"] #newsBody .analysis-row .analysis-save-button {
    box-sizing: border-box !important;
    display: flex !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 42px !important;
    padding: 7px 8px !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    text-align: center !important;
  }
  html[data-device-category="mobile"] #newsBody .analysis-row .analysis-ai-button {
    display: flex !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: 100% !important;
    min-height: 42px !important;
    gap: 4px !important;
    padding-inline: 5px !important;
    white-space: normal !important;
  }
}


/* =============================================================
   QF31 · UI consistency and approved D2 logo
   No markup/layout restructuring; QF30 selected-corner masks unchanged.
   ============================================================= */

/* Selected feed: the active blue rule is FLUSH with its own rounded row,
   unlike the former detached top/bottom-inset bar. */
html[data-device-category="desktop"] .desktop-sidebar-source.active {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 8px !important;
}
html[data-device-category="desktop"] .desktop-sidebar-source.active::before {
  left: 0 !important; top: 0 !important; bottom: 0 !important;
  width: 3px !important; border-radius: 0 !important;
  background: var(--d2-accent) !important;
  pointer-events: none !important;
}
/* Source counts represent known, loaded stories rather than all historic RSS.
   No fabricated or stale backend totals. */
html[data-device-category="desktop"] .desktop-sidebar-source {
  display: flex !important; align-items: center !important; gap: 7px !important;
}
html[data-device-category="desktop"] .desktop-sidebar-source-name {
  flex: 1 1 auto !important; min-width: 0 !important;
}
.desktop-sidebar-unread-count {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto; min-width: 16px; min-height: 17px;
  padding: 0 4px; border-radius: 5px;
  background: #E8EFFB; color: #355C9C;
  font-size: 10px; line-height: 1.3; font-weight: 750;
  font-variant-numeric: tabular-nums;
}
.desktop-publisher-name { min-width: 0; flex: 1 1 auto; }
html.theme-dark .desktop-sidebar-unread-count {
  background: #263D5A; color: #B8D2F6;
}

/* A dot ONLY. No square/container background, and no inherited pseudo afters.
   unread is filled, read is hollow in both themes. */
.news-row .story-meta-line .read-indicator,
html.theme-dark .news-row .story-meta-line .read-indicator {
  display: inline-flex !important; box-sizing: border-box !important;
  width: 10px !important; min-width: 10px !important; max-width: 10px !important;
  height: 10px !important; min-height: 10px !important; max-height: 10px !important;
  flex: 0 0 10px !important; overflow: visible !important;
  margin: 0 !important; padding: 0 !important;
  border: 0 !important; border-radius: 50% !important;
  background: transparent !important; box-shadow: none !important;
  outline: none !important;
}
.news-row .story-meta-line .read-indicator::after { content: none !important; }
.news-row .story-meta-line .read-indicator::before,
html.theme-dark .news-row .story-meta-line .read-indicator::before {
  content: "" !important; display: block !important;
  box-sizing: border-box !important; flex: 0 0 10px !important;
  width: 10px !important; height: 10px !important;
  margin: 0 !important; padding: 0 !important;
  border-radius: 50% !important; box-shadow: none !important;
  border: 2px solid var(--d2-accent) !important;
  background: var(--d2-accent) !important;
}
.news-row[data-read="read"] .story-meta-line .read-indicator::before,
html.theme-dark .news-row[data-read="read"] .story-meta-line .read-indicator::before {
  background: transparent !important;
}
/* Restore regular inline semantics; the contents are screenreader-only. */
.news-row .read-indicator .read-label { background: none !important; }

/* Desktop Save now lives in the same existing analysis tray as AI/Original.
   Original/Save have same neutral base as the other actions. */
html[data-device-category="desktop"] .desktop-analysis-host .analysis-save-group {
  display: flex !important; flex: 0 0 auto !important;
  width: auto !important; min-width: 0 !important;
  align-items: center !important;
}
html[data-device-category="desktop"] .desktop-analysis-host .analysis-actions {
  display: flex !important; align-items: center !important;
  flex-wrap: wrap !important; gap: 4px 8px !important;
}
html[data-device-category="desktop"] .desktop-analysis-host .analysis-original-group {
  margin-left: 0 !important; border-left: 0 !important;
  padding-left: 0 !important;
}
html[data-device-category="desktop"] .desktop-analysis-host .analysis-button,
html[data-device-category="desktop"] .desktop-analysis-host .analysis-original-link {
  font-family: inherit !important;
  border: 1px solid var(--d2-stroke) !important;
  border-radius: 7px !important;
  background: transparent !important; color: var(--d2-ink) !important;
  box-shadow: none !important; opacity: 1 !important;
}
html[data-device-category="desktop"] .desktop-analysis-host .analysis-ai-button.selected {
  color: var(--d2-accent) !important; border-color: var(--d2-accent) !important;
}
html[data-device-category="desktop"] .desktop-analysis-host .analysis-save-button.is-saved,
html[data-device-category="mobile"] .analysis-save-button.is-saved {
  color: var(--d2-accent) !important; border-color: var(--d2-accent) !important;
  background: transparent !important;
}
html[data-device-category="mobile"] #newsBody .analysis-row .analysis-ai-button,
html[data-device-category="mobile"] #newsBody .analysis-row .analysis-ai-button[data-action="summary"],
html[data-device-category="mobile"] #newsBody .analysis-row .analysis-original-link,
html[data-device-category="mobile"] #newsBody .analysis-row .analysis-save-button {
  background: transparent !important; border: 1px solid var(--d2-stroke) !important;
  border-radius: 8px !important; color: var(--d2-ink) !important;
  font-family: inherit !important; font-weight: 800 !important;
  box-shadow: none !important;
}
html[data-device-category="mobile"] #newsBody .analysis-row .analysis-ai-button.selected {
  border-color: var(--d2-accent) !important; color: var(--d2-accent) !important;
}

/* Consistent, less-rounded settings and Add Article/RSS forms.
   Do not change intentional source tabs, language toggles and circular icons. */
.settings-panel,
.link-add-panel,
.source-add-panel,
.source-discovery-results,
.source-discovery-item,
.settings-row,
.account-info-line {
  border-radius: 9px !important;
}
.settings-panel input:not([type="radio"]):not([type="checkbox"]),
.settings-panel select,
.settings-panel button:not(.ui-language-choice),
.link-add-panel input,
.link-add-panel button,
.source-add-panel input,
.source-add-panel button,
.source-discovery-name-input,
.all-sources-search {
  border-radius: 7px !important;
}

/* Simple two-segment 90-degree chevron, no arrow stem. */
.back-to-top .qf31-up-chevron {
  display: block !important; width: 20px !important; height: 20px !important;
  margin: auto !important; color: currentColor !important;
  font-size: 0 !important;
}

/* QF31 final read-dot normalization: render the status as ONE circle on the
   native indicator element. Legacy read background and pseudo-dot rules can no
   longer stack to create a square or a colored fill behind a hollow dot. */
#dashboard .news-row .story-meta-line .read-indicator,
#dashboard .news-row[data-read="unread"] .story-meta-line .read-indicator,
html.theme-dark #dashboard .news-row .story-meta-line .read-indicator {
  display: inline-block !important;
  box-sizing: border-box !important;
  flex: 0 0 10px !important;
  width: 10px !important; height: 10px !important;
  min-width: 10px !important; max-width: 10px !important;
  min-height: 10px !important; max-height: 10px !important;
  margin: 0 !important; padding: 0 !important;
  border-radius: 50% !important;
  border: 2px solid var(--d2-accent) !important;
  background: var(--d2-accent) !important;
  box-shadow: none !important; overflow: visible !important;
}
#dashboard .news-row[data-read="read"] .story-meta-line .read-indicator,
html.theme-dark #dashboard .news-row[data-read="read"] .story-meta-line .read-indicator {
  border-color: var(--d2-accent) !important;
  background: transparent !important;
}
#dashboard .news-row .story-meta-line .read-indicator::before,
#dashboard .news-row .story-meta-line .read-indicator::after {
  content: none !important; display: none !important;
}

/* Publisher headings may contain an unread badge; flex prevents the chevron
   moving to a second grid row when all four elements are present. */
html[data-device-category="desktop"] .desktop-publisher-heading {
  display: flex !important; align-items: center !important; gap: 7px !important;
}
html[data-device-category="desktop"] .desktop-publisher-heading .desktop-publisher-name {
  flex: 1 1 auto !important;
}
html[data-device-category="desktop"] .desktop-publisher-heading .desktop-publisher-chevron {
  flex: 0 0 auto !important;
}
html.theme-dark[data-device-category="desktop"] .desktop-source-group.active > .desktop-publisher-heading {
  background: #17243A !important;
  color: #D3E3F7 !important;
}