:root {
  --navy:#12314e; --teal:#0e7c86; --bg:#f4f6f8; --card:#fff;
  --ink:#1c2733; --muted:#5b6b7b; --chipbg:rgba(14,124,134,.12);
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#0f1720; --card:#182230; --ink:#e6edf3; --muted:#93a4b5;
          --navy:#0d2238; --chipbg:rgba(45,187,199,.18); --teal:#2dbbc7; }
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { margin:0; height:100%; }
body {
  font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  background:var(--bg); color:var(--ink);
  display:flex; flex-direction:column;
}

#topbar {
  background:var(--navy); color:#fff;
  padding:calc(env(safe-area-inset-top) + 10px) 14px 10px;
  display:flex; align-items:center; gap:10px; flex-shrink:0;
}
#topbar h1 { margin:0; font-size:1.15rem; flex:1; }
#topbar button {
  background:none; border:0; color:#fff; font-size:1.3rem; padding:4px 8px;
  cursor:pointer;
}
#backBtn { font-size:1.7rem !important; line-height:1; }

#searchBar { background:var(--navy); padding:0 14px 12px; flex-shrink:0; }
#searchBar input {
  width:100%; padding:10px 14px; border:0; border-radius:10px;
  font-size:1rem; background:#fff; color:#1c2733;
}

#view { flex:1; overflow-y:auto; padding:14px 14px 20px; }

#moodbar {
  display:flex; flex-shrink:0; background:var(--card);
  border-top:1px solid rgba(128,128,128,.25);
  padding:6px 4px calc(env(safe-area-inset-bottom) + 6px);
}
#moodbar button {
  flex:1; background:none; border:0; color:var(--muted);
  font:inherit; font-size:.62rem; font-weight:600; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:4px 0; border-radius:10px;
}
#moodbar button .e { font-size:1.35rem; }
#moodbar button.on { color:var(--teal); }

h2.feed { margin:2px 0 12px; font-size:1.2rem; display:flex; align-items:center; }
h2.feed .shuffle {
  margin-left:auto; background:var(--chipbg); color:var(--teal); border:0;
  border-radius:999px; padding:6px 14px; font:inherit; font-size:.8rem;
  font-weight:700; cursor:pointer;
}

.card {
  background:var(--card); border-radius:14px; padding:14px 16px;
  margin-bottom:12px; box-shadow:0 1px 3px rgba(0,0,0,.12);
  display:block; color:var(--ink); text-decoration:none;
}
.card.haspic { padding:0; overflow:hidden; }
.card.haspic .cbody { padding:12px 16px 14px; }
.card .ph {
  width:100%; height:160px; object-fit:cover; display:block;
  background:var(--chipbg);
}
.card .cat {
  font-size:.68rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted);
}
.card h3 { margin:4px 0 6px; color:var(--teal); font-size:1.05rem; }
.card p { margin:0 0 8px; font-size:.88rem; line-height:1.45;
  display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
.card .addr { font-size:.8rem; color:var(--muted); margin-bottom:8px; }
.chips { display:flex; flex-wrap:wrap; gap:5px; }
.chip {
  background:var(--chipbg); color:var(--teal); font-size:.7rem;
  font-weight:600; padding:3px 9px; border-radius:999px;
}

article { background:var(--card); border-radius:14px; padding:18px;
          box-shadow:0 1px 3px rgba(0,0,0,.12); overflow-wrap:break-word; }
article h1 { font-size:1.35rem; margin-top:0; }
article img { max-width:100%; height:auto; border-radius:8px; }
article a { color:var(--teal); }
article table { border-collapse:collapse; max-width:100%; display:block; overflow-x:auto; }
article td, article th { border:1px solid var(--muted); padding:6px 10px; font-size:.85rem; }
article div, article section, article nav, article ol, article ul {
  width:auto !important; min-height:0 !important; height:auto !important; float:none !important; }
.srclink { display:block; margin:14px 2px 0; font-size:.8rem; color:var(--muted); }

.empty { text-align:center; color:var(--muted); margin-top:40px; }
.hidden { display:none !important; }