ui: mobile polish — compact hero row, cropped history posters, wider search, tab ellipsis, header z-index

static/style.css

@@ -3,7 +3,7 @@
 body { margin: 0; background: var(--bg); color: var(--fg); font: 15px/1.5 system-ui, sans-serif; }
 a { color: inherit; text-decoration: none; }
 header { display: flex; gap: 1rem; align-items: center; padding: 0.8rem 1.2rem;
-  border-bottom: 1px solid var(--bd); position: sticky; top: 0; background: var(--bg); z-index: 1; }
+  border-bottom: 1px solid var(--bd); position: sticky; top: 0; background: var(--bg); z-index: 5; }
 .logo { font-weight: 700; font-size: 1.2rem; color: var(--acc); }
 header form { flex: 1; max-width: 420px; }
 button.tiny { padding: .2rem .55rem; font-size: .8rem; border-radius: 6px;
@@ -51,7 +51,11 @@ h2 { margin: 0.4rem 0; }
 .mini-info { display: flex; flex-direction: column; padding: .5rem; }
 .mini-meta { font-size: .75rem; color: var(--muted); margin-top: .1rem; }
 @media (max-width: 640px) {
-  .hero-sec { grid-template-columns: 1fr; grid-template-areas: "img" "right"; }
+  .hero-sec { grid-template-columns: 100px 1fr; grid-template-areas: "img right"; gap: .8rem; padding: .8rem; }
+  .hero img { width: 100px; }
+  .hero-body h2 { white-space: normal; font-size: 1.05rem; }
+  .card.hist img { max-height: 150px; }
+  header #me { display: none; }
 }
 
 .detail-head { margin-bottom: 1rem; }
@@ -67,6 +71,7 @@ button { background: var(--card); color: var(--fg); border: 1px solid var(--bd);
 button:hover { border-color: var(--acc); }
 
 .tabs { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 0.6rem 0; }
+.tab { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .tab.active { border-color: var(--acc); color: var(--acc); }
 
 /* loading + feedback */