:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #101416;
  color: #e8eeea;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
button, textarea { font: inherit; }
input { font: inherit; }

.layout {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(360px, .75fr);
  background: radial-gradient(circle at 100% 0, #29403b 0, transparent 31rem), #101416;
}
.sources { min-height: 100vh; display: grid; grid-template-rows: 1fr 1fr; }
.panel, .controls { padding: clamp(22px, 4vw, 52px); }
.panel { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 14px; border-bottom: 1px solid #28302e; }
.panel:last-child { border-bottom: 0; }
.eyebrow { display: block; margin: 0; color: #9aac9f; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; }
textarea { width: 100%; resize: none; border: 1px solid #33413d; border-radius: 12px; padding: 16px; color: #e8eeea; background: #151c1a; line-height: 1.5; outline: none; }
textarea:focus { border-color: #a8df72; box-shadow: 0 0 0 3px #a8df7222; }
.login-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 100% 0, #29403b 0, transparent 31rem), #101416; }
.login-card { width: min(100%, 390px); display: grid; gap: 18px; padding: 32px; border: 1px solid #33413d; border-radius: 16px; background: #151c1a; }
.login-card h1 { margin: 0; }
.login-card form { display: grid; gap: 10px; color: #c9d4ce; font-weight: 650; }
.login-card input { width: 100%; border: 1px solid #33413d; border-radius: 10px; padding: 13px; color: #e8eeea; background: #101416; outline: none; }
.login-card input:focus { border-color: #a8df72; box-shadow: 0 0 0 3px #a8df7222; }
.login-error { margin: 0; color: #ffb9ad; }
.panel textarea { min-height: 170px; height: 100%; }
.controls { border-left: 1px solid #28302e; display: flex; flex-direction: column; gap: 26px; background: #151a19cc; }
h1 { margin: 5px 0 0; font-size: clamp(2rem, 4vw, 3.5rem); line-height: .96; letter-spacing: -.06em; }
.fact-label, fieldset { display: grid; gap: 10px; color: #c9d4ce; font-weight: 650; }
fieldset { margin: 0; padding: 0; border: 0; }
legend { padding: 0; }
#count-picker { display: block; }
#count-picker legend { margin-bottom: 10px; }
.fact-label textarea { min-height: 108px; }
.counts { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; }
.counts button, .stop, .download { border: 1px solid #3a4944; border-radius: 9px; background: transparent; color: #d7e2da; padding: 10px 4px; cursor: pointer; }
.counts button.selected { color: #11200f; border-color: #a8df72; background: #a8df72; font-weight: 800; }
.primary { border: 0; border-radius: 11px; padding: 15px; color: #11200f; background: #a8df72; font-weight: 800; cursor: pointer; }
button:disabled { opacity: .45; cursor: not-allowed; }
.notice { min-height: 0; margin: -15px 0 -10px; color: #ffb9ad; font-size: .88rem; line-height: 1.35; }
.notice:empty { display: none; }
.progress-area { display: grid; gap: 11px; }
.progress-area[hidden] { display: none; }
.progress-label { display: flex; justify-content: space-between; gap: 12px; color: #bcc9c0; font-size: .9rem; }
.track { overflow: hidden; height: 7px; border-radius: 8px; background: #29332f; }
.track.is-active { background: repeating-linear-gradient(120deg, #29332f 0 11px, #3b4943 11px 17px, #29332f 17px 28px); background-size: 40px 100%; animation: waiting-progress .8s linear infinite; }
#progress-bar { width: 0; height: 100%; background: #a8df72; transition: width .25s ease; }
.stop { justify-self: start; padding: 9px 15px; color: #ffb9ad; border-color: #754b46; }
.download { justify-self: start; padding: 11px 16px; color: #fff; border-color: #9e70ff; background: #7951d5; font-weight: 800; box-shadow: 0 5px 18px rgb(121 81 213 / .28); }
.download:hover { background: #8b61e5; }
.preview { display: none; position: relative; min-height: 0; margin-top: auto; overflow: hidden; }
.preview.has-content { display: block; }
.preview article { max-height: 30vh; overflow: auto; white-space: pre-wrap; color: #dce7df; opacity: .94; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .82rem; line-height: 1.55; mask-image: linear-gradient(to bottom, #000 0, #000 84%, transparent 100%); }
.preview article.arriving { animation: news-arriving .55s ease-out both; }
@keyframes waiting-progress { to { background-position: 40px 0; } }
@keyframes news-arriving { from { opacity: 0; transform: translateY(7px); } to { opacity: .94; transform: translateY(0); } }

@media (max-width: 760px) {
  .layout { grid-template-columns: 1fr; }
  .sources { min-height: auto; grid-template-rows: minmax(290px, 48vh) minmax(290px, 48vh); }
  .controls { border-left: 0; border-top: 1px solid #28302e; }
}