:root{--bg:#ffffff;--fg:#0b0d10;--muted:#5f6c76;--line:#e7eef5;--accent:#2b6dde}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font:14px/1.5 system-ui,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--fg)}
.container{max-width:1100px;margin:0 auto;padding:0 16px}
header{position:sticky;top:0;background:linear-gradient(to bottom, rgba(255,255,255,.9), rgba(255,255,255,.6));backdrop-filter:saturate(120%) blur(6px);padding:12px 0;border-bottom:1px solid var(--line)}
h1{margin:0 0 6px 0;font-size:18px}
.hint{margin:0;color:var(--muted)}
#controls{display:flex;align-items:center;gap:8px;padding:12px 0}
#controls{justify-content:space-between}
#status{color:var(--muted)}
#filterBox{min-width:200px;max-width:320px;padding:6px 8px;border:1px solid #d8e2f0;border-radius:6px;font:inherit;color:inherit}
#filterBox:focus{outline:2px solid #b9cdf7;outline-offset:1px}
button{background:var(--accent);color:white;border:0;border-radius:6px;padding:6px 10px;cursor:pointer}
button:disabled{opacity:.6;cursor:default}
.table-wrap{padding:0 0 24px;}

/* Tabs */
.tabs{display:flex;gap:6px;padding:10px 0}
.tabs .tab{background:#ffffff;color:#0b1f3a;border:1px solid #d8e2f0;border-bottom-color:transparent;border-radius:8px 8px 0 0;padding:6px 10px;cursor:pointer}
.tabs .tab[aria-selected="true"], .tabs .tab.active{background:#0a2540;color:#ffffff;border-color:#0a2540}

/* Table layout */
table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
col.num{width:48px}
col.left{width:34%}
col.right{width:66%}
thead th{background:#f7f9fc;color:#3b4751;text-align:left;padding:10px;border-bottom:1px solid var(--line)}
tbody td{vertical-align:top;padding:12px 12px;border-bottom:1px solid var(--line)}
tbody tr:last-child td{border-bottom:0}
/* Number column */
#tbl td.num, #tbl th.num{width:48px;color:#7a8694;text-align:right;padding-right:8px}

/* Hash target flash */
tbody tr.hash-target td{animation: flash-bg 1.2s ease-in-out 1}
@keyframes flash-bg{0%{background:#fffde7} 50%{background:#fff9c4} 100%{background:transparent}}

/* Left column: name + domain */
#tbl td.left .name{font-weight:650;color:#0a2540}
#tbl td.left .domain{color:#586474;white-space:pre-wrap}
#tbl td.left .domain a{color:#334c9c;text-decoration:none;word-break:break-all}
#tbl td.left .domain a:hover{text-decoration:underline}

/* Right column: url + markdown */
#tbl td.right .url{display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#0a5bd3}
#tbl td.right .md{margin-top:6px;color:#1e2935}
#tbl td.right .md p{margin:0 0 8px 0}
#tbl td.right .md blockquote{margin:8px 0;padding:6px 10px;border-left:3px solid #dfe7f1;color:#3a4652;background:#f8fbff;border-radius:4px}
#tbl td.right .md h1,#tbl td.right .md h2,#tbl td.right .md h3{margin:12px 0 6px;font-size:1em}
#tbl td.right .md ul,#tbl td.right .md ol{margin:6px 0 6px 20px}
#tbl td.right .md code{background:#f2f6fb;padding:2px 4px;border-radius:4px}

/* Responsive */
@media (max-width: 800px){
  thead{display:none}
  table, tbody, tr, td{display:block;width:100%}
  tbody td{border-bottom:none}
  tbody tr{border-bottom:1px solid var(--line);padding:10px 0}
}