:root{
  --bg:#0b0f19; --ink:#e5e7eb; --muted:#9ca3af; --line:#1f2937; --accent:#60a5fa; --accent2:#34d399;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:'Work Sans',ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;background:linear-gradient(180deg,#0a0f1a,#0b0f19);color:var(--ink)}
.top{max-width:980px;margin:22px auto 6px;padding:0 16px;display:flex;align-items:center;gap:10px}
.top .logo{width:48px;height:48px;display:grid;place-items:center;border:1px solid #1f2a3a;border-radius:12px;background:linear-gradient(135deg,rgba(96,165,250,.18),rgba(52,211,153,.14))}
h1{font-family:'Quicksand',sans-serif;font-weight:600;font-size:clamp(22px,3.6vw,34px);margin:0}
.container{max-width:980px;margin:16px auto 40px;padding:0 16px}
form{background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.015));border:1px solid var(--line);border-radius:14px;padding:16px}
.form-row{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.form-row input{padding:12px;border:1px solid #2a3446;border-radius:12px;background:#0f1526;color:var(--ink)}
.selector-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.selector-row select, .selector-row button{padding:10px 12px;border-radius:10px;border:1px solid #2a3446;background:#0f1526;color:var(--ink);font-weight:600}
.selector-row button{border:none;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#0b1220;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 6px 22px rgba(14,165,233,.25)}
.news-list{margin-top:16px;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}
.news{border:1px solid var(--line);border-radius:12px;padding:12px;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.015))}
.news .title{color:var(--ink);text-decoration:none;font-weight:600;line-height:1.28}
.news .meta{display:flex;align-items:center;gap:6px;margin-top:8px;color:#cbd5e1;font-size:12px}
.news .meta .right{margin-left:auto;display:flex;gap:4px;flex-wrap:wrap}
.badge{font-size:11px;padding:4px 8px;border:1px solid #2a3446;border-radius:999px;background:#0f1526}
footer{max-width:980px;margin:20px auto 40px;padding:0 16px;color:var(--muted);font-size:13px}
.footer-centered{display:flex;gap:12px;justify-content:space-between;align-items:center;flex-wrap:wrap}
.whop-link{color:#9fd1ff;text-decoration:none;border-bottom:1px dashed #2a3446}
.whop-link:hover{border-bottom-color:#60a5fa}

/* --- Horizontal row layout for news list --- */
.news-list{ display:flex; flex-direction:column; gap:10px; }
.news{
  display:flex; align-items:center; justify-content:space-between;
  border:1px solid var(--line); border-radius:14px; padding:12px 14px;
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.015));
}
.news .left{ display:flex; flex-direction:column; gap:6px; min-width:0 }
.news .title{ color:var(--ink); text-decoration:none; font-weight:600; line-height:1.28; }
.news .title:hover{ text-decoration:underline }
.news .meta{ color:#cbd5e1; font-size:12px; display:flex; align-items:center; gap:6px; }
.news .right{ display:flex; gap:6px; flex-wrap:wrap; margin-left:16px }
.badge{ font-size:11px; padding:4px 8px; border:1px solid #2a3446; border-radius:999px; background:#0f1526 }

/* sentiment borders */
.news.bullish{ border-color:#22c55e; box-shadow:0 0 0 1px rgba(34,197,94,.32) inset; }
.news.bearish{ border-color:#ef4444; box-shadow:0 0 0 1px rgba(239,68,68,.32) inset; }
.news.mixed  { border-color:#f59e0b; box-shadow:0 0 0 1px rgba(245,158,11,.28) inset; }