body { font-family: system-ui, sans-serif; margin: 0; background: #111; color: #eee; }
header { padding: 1rem 1.5rem; border-bottom: 1px solid #333; }
h1 { margin: 0 0 .5rem; font-size: 1.4rem; }
nav a { color: #9ab; margin-right: 1rem; text-decoration: none; }
nav a.active { color: #fff; font-weight: bold; }
main { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; padding: 1.5rem; }
section { background: #1b1b1b; border: 1px solid #333; border-radius: 6px; padding: 1rem; }
h2 { font-size: 1.05rem; margin: 0 0 .5rem; }
h2 small { color: #888; font-weight: normal; margin-left: .5rem; }
.source-bias { margin: .65rem 0; padding: .55rem 0; border-top: 1px solid #333; border-bottom: 1px solid #333; }
.bias-label, .bias-note { margin: 0; font-size: .82rem; color: #bbb; }
.bias-label strong { color: #fff; }
.bias-note { margin-top: .25rem; color: #888; }
.source-bias details { margin-top: .35rem; font-size: .78rem; color: #aaa; }
.source-bias summary { cursor: pointer; color: #9ab; }
.source-bias details p { margin: .4rem 0; }
.source-bias details small { display: block; margin-bottom: .25rem; color: #888; }
.source-bias details a { color: #8cf; }
ul { list-style: none; margin: 0; padding: 0; }
li { padding: .35rem 0; border-top: 1px solid #2a2a2a; }
li a { color: #8cf; text-decoration: none; }
li a:hover { text-decoration: underline; }
time { display: block; font-size: .75rem; color: #777; }
.error { color: #e88; }
.account-bar { display: flex; align-items: center; gap: .75rem; margin-top: .75rem; color: #aaa; font-size: .85rem; }
.account-bar form { margin: 0; }
.install-help { position: relative; color: #ddd; }
.install-help summary { color: #9dd1db; cursor: pointer; }
.install-help p { max-width: 19rem; color: #bbb; line-height: 1.45; }
.install-help button { border: 1px solid #54717a; border-radius: 4px; padding: .45rem .7rem; background: #26383d; color: #f2f5f5; cursor: pointer; }
.account-bar button, .feed-settings button, .auth-panel button { border: 1px solid #54717a; border-radius: 4px; padding: .45rem .7rem; background: #26383d; color: #f2f5f5; cursor: pointer; }
.account-bar button:hover, .feed-settings button:hover, .auth-panel button:hover { background: #345058; }
.feed-settings { margin: 0 1.5rem 1rem; padding: .75rem 1rem; border: 1px solid #333; border-radius: 6px; background: #1b1b1b; }
.feed-settings > summary { color: #b9d7dc; cursor: pointer; font-weight: 600; }
.feed-settings > summary small { margin-left: .4rem; color: #888; font-size: .8rem; font-weight: normal; }
.feed-settings form { margin-top: .75rem; }
.catalogue-search { display: grid; gap: .35rem; max-width: 28rem; margin-bottom: .75rem; color: #aaa; font-size: .85rem; }
.catalogue-search input { padding: .55rem .65rem; border: 1px solid #444; border-radius: 4px; background: #111; color: #eee; font: inherit; }
.catalogue-regions { display: grid; gap: .5rem; margin-bottom: .75rem; }
.catalogue-region { border: 1px solid #333; border-radius: 4px; }
.catalogue-region > summary { padding: .6rem .75rem; color: #ddd; cursor: pointer; }
.catalogue-region > summary small { margin-left: .3rem; color: #888; font-size: .8rem; }
.catalogue-region fieldset { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .4rem 1rem; margin: 0 .5rem .5rem; padding: .6rem; border: 1px solid #333; }
.catalogue-region legend { padding: 0 .3rem; color: #aaa; font-size: .85rem; }
.catalogue-feed { display: flex; align-items: center; gap: .5rem; color: #ddd; }
.catalogue-feed small { margin-left: .3rem; color: #888; }
.catalogue-feed input { accent-color: #77aeb5; }
.catalogue-empty { margin: .5rem; color: #aaa; font-size: .9rem; }
.feed-settings input { accent-color: #77aeb5; }
.custom-feed-url { display: grid; gap: .35rem; max-width: 32rem; margin-bottom: .75rem; color: #aaa; font-size: .85rem; }
.custom-feed-url input { padding: .55rem .65rem; border: 1px solid #444; border-radius: 4px; background: #111; color: #eee; font: inherit; }
.feed-help { margin-top: .75rem; color: #aaa; font-size: .85rem; }
.feed-help summary { color: #9ab; cursor: pointer; }
.feed-help ol { padding-left: 1.4rem; }
.feed-help li { border: 0; }
.feed-help p { max-width: 48rem; }
.saved-message { margin-left: .6rem; color: #9dcaac; font-size: .85rem; }
.empty-feed { grid-column: 1 / -1; padding: 1.5rem; color: #aaa; }
.auth-page { min-height: 100vh; display: grid; place-items: center; padding: 1rem; box-sizing: border-box; }
.auth-main { width: min(100%, 440px); }
.auth-panel { padding: 1.5rem; border: 1px solid #333; border-radius: 6px; background: #1b1b1b; }
.auth-panel h1 { margin-bottom: 1rem; }
.auth-panel form { display: grid; gap: .75rem; }
.auth-panel label { display: grid; gap: .35rem; color: #bbb; font-size: .9rem; }
.auth-panel input { width: 100%; box-sizing: border-box; padding: .65rem; border: 1px solid #444; border-radius: 4px; background: #111; color: #eee; font: inherit; }
.auth-panel input:focus { outline: 2px solid #77aeb5; outline-offset: 1px; }
.auth-error { padding: .65rem; border-left: 3px solid #e88; background: #281d1d; color: #f0baba; }
.auth-switch { margin: 1rem 0 0; color: #aaa; font-size: .9rem; }
.auth-panel a { color: #9dd1db; }
.auth-panel .install-help { margin-top: 1.25rem; padding-top: .75rem; border-top: 1px solid #333; font-size: .85rem; }
.auth-panel .install-help p { max-width: none; }
@media (max-width: 480px) {
	main { grid-template-columns: 1fr; padding: 1rem; }
	.feed-settings { margin: 0 1rem 1rem; }
	header { padding: 1rem; }
	.account-bar { flex-wrap: wrap; }
	nav { display: flex; flex-wrap: wrap; gap: .5rem; }
	nav a { margin-right: .5rem; }
}

body {
  --page: #0d1413;
  --surface: #141e1c;
  --surface-raised: #1a2724;
  --line: #293a35;
  --muted: #91a49d;
  --text: #edf4ef;
  --accent: #a9d68a;
  background: var(--page);
  color: var(--text);
}

[hidden] { display: none !important; }

.site-header {
  position: sticky;
  z-index: 5;
  top: 0;
  padding: .8rem max(1rem, calc((100vw - 1120px) / 2));
  border-bottom: 1px solid var(--line);
  background: rgb(13 20 19 / 94%);
  backdrop-filter: blur(16px);
}

.brand-row, .header-actions, .topic-nav, .story-heading, .story-meta, .story-byline {
  display: flex;
  align-items: center;
}

.brand-row, .story-heading {
  justify-content: space-between;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  color: var(--text);
  font-size: 1.2rem;
  font-weight: 750;
  letter-spacing: -.045em;
  text-decoration: none;
}

.brand-accent { color: var(--accent); }
.brand-mark { width: 1.1rem; height: 1.1rem; border: 2px solid var(--accent); border-radius: 50%; position: relative; }
.brand-mark::before, .brand-mark::after { position: absolute; inset: 2px -5px; border: 1px solid var(--accent); border-radius: 50%; content: ""; }
.brand-mark::after { inset: 5px -8px; opacity: .55; }
.header-actions { gap: 1.1rem; }
.header-actions form { margin: 0; }
.text-button { border: 0; background: none; color: var(--muted); cursor: pointer; font: inherit; }
.text-button:hover { color: var(--text); }
.install-help summary { color: var(--muted); font-size: .85rem; }
.install-help p { position: absolute; right: 0; z-index: 8; width: min(19rem, calc(100vw - 2rem)); padding: .85rem; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-raised); box-shadow: 0 12px 32px #0008; font-size: .85rem; }
.install-help button { margin-top: 3rem; }

.topic-nav {
  gap: .55rem;
  overflow-x: auto;
  margin: .8rem 0 0;
  padding: 0 0 .2rem;
  scrollbar-width: none;
}
.topic-nav::-webkit-scrollbar { display: none; }
.topic-nav a { flex: 0 0 auto; margin: 0; padding: .42rem .8rem; border: 1px solid transparent; border-radius: 999px; color: var(--muted); font-size: .87rem; text-decoration: none; }
.topic-nav a.active { border-color: #476349; background: #203126; color: #d8f0c8; }

.home-shell {
  display: block;
  width: min(100% - 2rem, 1060px);
  margin: 0 auto;
  padding: 2rem 0 5rem;
}

.welcome-panel, .story-section, .empty-discovery {
  margin: 0 0 1.2rem;
  padding: clamp(1.2rem, 4vw, 2rem);
  border: 1px solid var(--line);
  border-radius: 18px;
  background: radial-gradient(ellipse at 85% 10%, #40573d55, transparent 42%), var(--surface);
}

.welcome-panel {
  display: flex;
  min-height: 12rem;
  align-items: end;
  justify-content: space-between;
  gap: 1.5rem;
}

.eyebrow { margin: 0 0 .65rem; color: var(--accent); font-size: .7rem; font-weight: 750; letter-spacing: .15em; }
.welcome-panel h1, .story-heading h2, .empty-discovery h2, .story-section > h2 { margin: 0; color: var(--text); letter-spacing: -.045em; }
.welcome-panel h1 { max-width: 18ch; font-size: clamp(2rem, 6vw, 3.6rem); line-height: 1.02; }
.welcome-copy { max-width: 38rem; margin: .8rem 0 0; color: var(--muted); line-height: 1.65; }
.welcome-meta { display: grid; flex: 0 0 auto; gap: .35rem; color: var(--muted); font-size: .78rem; text-align: right; }
.welcome-user { color: var(--text); }

.discovery-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin: 0 0 2rem; }
.feed-settings { min-width: 0; margin: 0; padding: .9rem 1rem; border-color: var(--line); border-radius: 14px; background: var(--surface); }
.feed-settings > summary { display: flex; min-height: 2.6rem; align-items: center; gap: .8rem; list-style: none; }
.feed-settings > summary::-webkit-details-marker { display: none; }
.feed-settings > summary > span:last-child { display: grid; gap: .2rem; }
.feed-settings > summary strong { color: var(--text); font-size: .88rem; }
.feed-settings > summary small { margin: 0; color: var(--muted); font-size: .76rem; font-weight: normal; }
.tool-icon { display: grid; width: 2.15rem; height: 2.15rem; flex: 0 0 auto; place-items: center; border: 1px solid #476349; border-radius: 10px; background: #203126; color: var(--accent); font-size: 1.25rem; }
.feed-settings form { padding-top: .9rem; }
.feed-settings fieldset { border-color: var(--line); }
.feed-settings legend, .feed-settings label { color: #d5e0d9; }
.catalogue-region { background: #101917; }
.catalogue-region > summary { color: var(--text); }
.catalogue-region fieldset { border-color: var(--line); }
.catalogue-search input, .custom-feed-url input { border-color: var(--line); background: #0d1413; color: var(--text); }
.feed-settings button, .install-help button, .auth-panel button { border-color: #567450; background: #2b402c; color: #eff8e8; }
.feed-settings button:hover, .install-help button:hover { background: #38543a; }
.feed-help { color: var(--muted); }
.feed-help summary { color: #c1dfa9; }
.auth-error { border-color: #e88; }

.story-section { padding: 0; border: 0; background: none; }
.story-heading { align-items: end; gap: 1rem; margin: 0 0 1rem; }
.story-heading h2 { font-size: clamp(1.45rem, 4vw, 2rem); }
.story-search { display: flex; width: min(100%, 18rem); align-items: center; gap: .5rem; padding: .55rem .75rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); }
.story-search > span[aria-hidden] { font-size: 1.25rem; line-height: 1; }
.story-search input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; font-size: .85rem; }
.story-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; }
.story-card { display: flex; min-height: 12rem; flex-direction: column; padding: 1.15rem; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.story-card[hidden] { display: none; }
.story-featured { grid-column: 1 / -1; min-height: 15rem; justify-content: center; padding: clamp(1.4rem, 5vw, 2.5rem); background: radial-gradient(ellipse at 90% 10%, #54734655, transparent 40%), var(--surface-raised); }
.story-meta { gap: .55rem; color: var(--muted); font-size: .72rem; }
.story-topic { padding: .23rem .55rem; border-radius: 999px; background: #263b2b; color: #c7e4ae; font-weight: 700; }
.story-card h3 { max-width: 50rem; margin: .8rem 0 1rem; font-size: clamp(1.15rem, 2.5vw, 1.45rem); letter-spacing: -.025em; line-height: 1.3; }
.story-featured h3 { max-width: 48rem; font-size: clamp(1.65rem, 5vw, 2.65rem); line-height: 1.14; }
.story-card h3 a { color: var(--text); text-decoration: none; }
.story-card h3 a:hover { color: #c6e5aa; }
.story-byline { justify-content: space-between; gap: .6rem; margin-top: auto; color: var(--muted); font-size: .78rem; }
.story-byline time { color: var(--muted); font-size: inherit; }
.story-perspective { margin-top: .75rem; padding-top: .65rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .78rem; }
.story-perspective summary { color: #c9d4cc; cursor: pointer; }
.story-perspective p { line-height: 1.55; }
.story-perspective a { color: #bbdba4; }
.feed-notice, .search-empty { padding: .8rem 1rem; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--muted); }
.search-empty { text-align: center; }
.source-status-list p { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-top: 1px solid var(--line); color: var(--text); }
.source-status-list span { color: var(--muted); }
.empty-discovery { max-width: 42rem; margin: 2.5rem auto; text-align: center; }
.empty-mark { color: var(--accent); font-size: 2rem; }
.empty-discovery h2 { font-size: clamp(1.7rem, 5vw, 2.4rem); }
.empty-discovery > p:not(.eyebrow) { color: var(--muted); line-height: 1.65; }
.primary-link { display: inline-block; margin-top: .5rem; padding: .7rem 1rem; border-radius: 999px; background: #2b402c; color: #eff8e8; font-weight: 700; text-decoration: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; clip-path: inset(50%); }

@media (max-width: 640px) {
  .site-header { padding: .7rem 1rem; }
  .home-shell { width: min(100% - 1.25rem, 1060px); padding-top: 1rem; }
  .brand { font-size: 1.05rem; }
  .header-actions { gap: .75rem; }
  .install-help summary, .text-button { font-size: .78rem; }
  .welcome-panel { min-height: 0; flex-direction: column; align-items: start; gap: 1.2rem; padding: 1.35rem; }
  .welcome-meta { display: flex; flex-wrap: wrap; gap: .4rem .8rem; text-align: left; }
  .welcome-user { max-width: 65vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .discovery-tools { grid-template-columns: 1fr; gap: .55rem; margin-bottom: 1.6rem; }
  .feed-settings { padding: .75rem .85rem; }
  .story-heading { align-items: stretch; flex-direction: column; }
  .story-search { width: auto; }
  .story-grid { grid-template-columns: 1fr; gap: .65rem; }
  .story-card { min-height: 10rem; padding: 1rem; }
  .story-featured { min-height: 14rem; }
  .story-card h3 { font-size: 1.2rem; }
  .story-featured h3 { font-size: 1.8rem; }
  .source-status-list p { flex-direction: column; gap: .2rem; }
  .empty-discovery { margin: 1.5rem auto; }
}

@media (prefers-reduced-motion: no-preference) {
  .story-card, .feed-settings, .welcome-panel { animation: arrive .35s ease both; }
  .story-card:nth-child(n + 2) { animation-delay: 40ms; }
  @keyframes arrive { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
}