body{background:#fff}
.wrap{max-width:860px;margin:0 auto;padding:0 20px}
nav{display:flex;align-items:center;gap:12px;padding:16px 0}
nav .logo{font-size:20px;font-weight:bold;color:var(--m2)}
nav .logo b{color:var(--m4)}
nav .sp{flex:1}
nav a{color:var(--m1);text-decoration:none;border:1px solid var(--line);padding:5px 12px}
nav a:hover{background:#eef0f4}
nav a.cta{background:var(--sel);color:#fff;border-color:var(--sel);font-weight:bold}

.intro{padding:10px 0 14px}
.intro h1{font-size:24px;line-height:1.2;margin:0 0 6px;color:var(--m1)}
.intro h1 .g{color:var(--m4)}
.intro p{color:var(--m14);font-size:14px;margin:0}

/* the list — this IS the homepage, mIRC /list style */
.listwrap{border:1px solid var(--line);background:#fff;margin-bottom:22px}
.listwrap .bar{display:flex;align-items:center;gap:8px;padding:6px 10px;border-bottom:1px solid var(--line);
  color:var(--m14);font-size:12px;text-transform:uppercase;letter-spacing:.5px}
.listwrap .bar b{color:var(--m2)}
.listwrap .bar .sp{flex:1}
.listwrap .bar .live{color:var(--m3)}

.net{border-bottom:1px solid var(--line-soft);cursor:pointer}
.net:last-child{border-bottom:0}
.net:hover{background:#eef0f4}
.net-h{display:flex;align-items:center;gap:8px;padding:7px 10px}
.net-h .nm{font-weight:bold;color:var(--m2)}
.net-h .sp{flex:1}
.net-h .meta{color:var(--m14);font-size:13px;white-space:nowrap}
.net-h .enter{color:var(--m14);border:1px solid var(--line);padding:0 7px;font-size:13px}
.net:hover .enter{color:var(--sel);border-color:var(--sel)}
.net-h .flag{width:20px;text-align:center;flex-shrink:0;font-size:15px;line-height:1}
.dot{width:8px;height:8px;border-radius:50%;background:var(--m14);flex-shrink:0}
.dot.on{background:var(--m3)}

.chans{padding:0 10px 7px 26px}
.chan{display:flex;align-items:baseline;gap:8px;padding:1px 0;font-size:13px}
.chan .h{color:var(--m14);font-weight:bold}
.chan .cn{color:var(--m1)}
.chan .tp{color:var(--m14);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
.chan .co{color:var(--m3);white-space:nowrap}
.chan .co.z{color:var(--m14)}
.more{color:var(--m14);font-size:12px;padding:1px 0}

.empty,.loading{padding:26px 12px;text-align:center;color:var(--m14);font-size:14px}
.empty a{color:var(--sel)}

.why{display:grid;grid-template-columns:1fr 1fr;gap:6px 24px;padding:4px 0 8px;font-size:13px;color:var(--m1)}
.why b{color:var(--m2)}
footer{color:var(--m14);font-size:13px;text-align:center;padding:20px 0;border-top:1px solid var(--line-soft)}
footer a{color:var(--m14)}

@media (max-width:560px){
  .wrap{padding:0 12px} .intro h1{font-size:20px}
  .net-h .meta{font-size:12px} .why{grid-template-columns:1fr}
}