:root{
  --bg:#15202b; --card:#1e2732; --line:#38444d; --txt:#e7e9ea; --mut:#8b98a5;
  --accent:#1d9bf0; --warn:#f4b400; --err:#f4212e; --maxw:700px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--txt);
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  overflow-wrap:anywhere}
a{color:var(--accent)}
img,video{max-width:100%}
header{position:sticky;top:0;z-index:10;background:rgba(21,32,43,.97);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);padding:10px 16px}
.bar{max-width:var(--maxw);margin:0 auto}
h1{font-size:17px;margin:0 0 6px;font-weight:800}
h1 a{color:inherit;text-decoration:none}
.sub{color:var(--mut);font-weight:400}
.stats{display:flex;flex-wrap:wrap;gap:6px;font-size:12px;color:var(--mut)}
.stat{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:3px 10px;white-space:nowrap}
.stat b{color:var(--txt)}
.cap{color:var(--warn);font-size:12px;margin-top:6px}
.tabs{display:flex;gap:4px;margin-top:8px;flex-wrap:wrap}
.tab{padding:7px 16px;border-radius:999px;border:1px solid var(--line);background:var(--card);
  color:var(--mut);cursor:pointer;font:600 14px/1 inherit;font-family:inherit}
.tab[aria-selected="true"]{background:var(--accent);color:#fff;border-color:var(--accent)}
.tab:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.controls{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.controls input,.controls select{background:var(--card);color:var(--txt);border:1px solid var(--line);
  border-radius:8px;padding:6px 10px;font-size:13px;font-family:inherit}
.controls input[type=text]{flex:1;min-width:150px}
.controls label{font-size:12px;color:var(--mut);display:flex;align-items:center;gap:4px;cursor:pointer}
main{max-width:var(--maxw);margin:0 auto;padding:12px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px;margin:12px 0}
.thread{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:6px 14px;margin:14px 0}
.tw{padding:10px 0;border-bottom:1px solid var(--line)}
.tw:last-child{border-bottom:none}
.tw.ctx{opacity:.72}
.meta{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--mut);flex-wrap:wrap}
.name{color:var(--txt);font-weight:700}
.me .name{color:var(--accent)}
.badge{font-size:11px;padding:2px 8px;border-radius:999px;border:1px solid var(--line);color:var(--mut)}
.badge.reply{color:#7fd1ff;border-color:#27506b}
.badge.quote{color:#c39bff;border-color:#4b3a6b}
.badge.retweet{color:#7be0a3;border-color:#2c5d41}
.text{white-space:pre-wrap;margin:6px 0;font-size:15px}
.text a{text-decoration:none}
.text a:hover{text-decoration:underline}
.quoted{border:1px solid var(--line);background:#18222d;border-radius:12px;padding:8px 12px;margin:8px 0;font-size:14px}
.quoted .name{font-size:13px}
.media{display:flex;flex-direction:column;gap:8px;margin:8px 0}
.media img,.media video{width:100%;height:auto;border-radius:12px;border:1px solid var(--line);background:#000}
.counts{display:flex;gap:16px;color:var(--mut);font-size:13px;margin-top:8px;flex-wrap:wrap}
.counts b{color:var(--txt)}
.issues{margin-top:8px;display:flex;flex-wrap:wrap;gap:6px}
.issue{font-size:11px;padding:2px 8px;border-radius:6px;background:rgba(244,33,46,.12);
  color:#ff7b85;border:1px solid rgba(244,33,46,.4)}
.issue.warn{background:rgba(244,180,0,.12);color:#ffd24d;border-color:rgba(244,180,0,.4)}
.links{margin-top:8px;font-size:12px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.links a{text-decoration:none}
details summary{cursor:pointer;color:var(--mut);font-size:12px}
.empty{text-align:center;color:var(--mut);padding:40px}
.tagcloud{display:flex;flex-wrap:wrap;gap:8px;padding:8px 0}
.tagchip{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:5px 12px;
  cursor:pointer;font-size:13px;font-family:inherit;color:var(--txt)}
.tagchip:hover,.tagchip:focus-visible{border-color:var(--accent);outline:none}
.tagchip b{color:var(--accent)}
.threadhead{font-size:12px;color:var(--mut);padding:8px 0 2px}
#sentinel{height:1px}
.loading{text-align:center;color:var(--mut);padding:60px 20px}
.spinner{width:26px;height:26px;border:3px solid var(--line);border-top-color:var(--accent);
  border-radius:50%;animation:spin .8s linear infinite;margin:0 auto 12px}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spinner{animation:none}}
.toX{display:inline-block;margin-top:4px;color:var(--mut);font-size:13px;text-decoration:none}
/* landing */
.accounts{max-width:var(--maxw);margin:0 auto;padding:12px;display:grid;gap:12px}
.acct{display:flex;gap:12px;align-items:center;background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:14px;text-decoration:none;color:var(--txt)}
.acct:hover{border-color:var(--accent)}
.acct .h{font-weight:800}
.acct .d{color:var(--mut);font-size:13px}
.hero{max-width:var(--maxw);margin:0 auto;padding:24px 12px 4px}
.hero h2{margin:0 0 6px;font-size:22px}
.hero p{color:var(--mut);margin:0}

/* ---- audit fixes: mobile overflow, tap targets, contrast, focus ---- */
html,body{overflow-x:hidden}
.text a{word-break:break-word;overflow-wrap:anywhere}
.tab{min-height:40px;padding:9px 16px;color:#aeb6bf}            /* bigger target + AA contrast */
.tagchip{min-height:34px;padding:7px 13px}
.controls label{min-height:34px}
a:focus-visible,.text a:focus-visible,.tagchip:focus-visible,.acct:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.controls label:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.controls .field{display:flex;align-items:center;gap:4px;color:var(--mut);font-size:12px}
.controls .field select{margin-left:2px}
#count{max-width:var(--maxw);margin:2px auto 0;color:var(--mut);font-size:12px;padding:0 4px}
.media img,.media video{aspect-ratio:auto}      /* avoid forced ratio; lazy+async already set */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
noscript .nslist{max-width:var(--maxw);margin:0 auto;padding:12px}
noscript .nslist li{margin:10px 0;border-bottom:1px solid var(--line);padding-bottom:10px;list-style:none}