:root{font-family:Inter,Segoe UI,Arial,sans-serif;color:#e9f1f3;background:#0e151c;--mint:#a5f3ce;--cyan:#7ad5e9;--orange:#efb886}
*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 67% 2%,#1f3541 0,transparent 34%),#0e151c}button,input{font:inherit}button{cursor:pointer}button:disabled{opacity:.55;cursor:not-allowed}
.shell{max-width:1580px;margin:auto;min-height:100vh}.topbar{height:85px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #344652;padding:0 40px}
.brand{color:inherit;display:flex;align-items:center;gap:16px;text-decoration:none;font-size:25px;font-weight:850;letter-spacing:.13em}.brand .dot{color:var(--mint)}.brand small{display:block;font-size:8px;color:#9eb3bc;letter-spacing:.22em;margin-top:5px}
.emblem{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border:2px solid #a5f3ce;color:#d8f9e9;clip-path:polygon(25% 0,75% 0,100% 25%,100% 75%,75% 100%,25% 100%,0 75%,0 25%);font-size:17px}.emblem span{font-size:12px;color:#eeb98f}
.topmeta{display:flex;gap:11px;align-items:center;font:11px Consolas,monospace;letter-spacing:.12em;color:#a7b9c1}.live-dot{height:7px;width:7px;border-radius:50%;background:#a4efc4;box-shadow:0 0 14px #87f5bb}.top-sep{color:#607984}
.layout{display:grid;grid-template-columns:235px minmax(0,1fr)}.sidebar{padding:38px 22px 25px;border-right:1px solid #2e414c;min-height:calc(100vh - 85px);display:flex;flex-direction:column}
.sidetag,.eyebrow{font:10px Consolas,monospace;letter-spacing:.2em;color:var(--mint)}.sidetag{display:flex;justify-content:space-between;color:#839fa9}.sidetag span{color:var(--orange)}
.sidebar-title{font-size:12px;letter-spacing:.16em;font-weight:800;margin:43px 0 14px;color:#d4e2e7}.channels{display:flex;flex-direction:column;gap:6px}.channels button{background:transparent;border:1px solid transparent;color:#9db1ba;display:flex;align-items:center;gap:12px;padding:14px 16px;text-align:left;border-radius:4px;font:15px Consolas,monospace}.channels button span{color:inherit}.channels button:hover,.channels button.selected{background:#20343b;border-color:#375854;color:#baf8d9}
.side-note{margin-top:auto;border-top:1px solid #344650;padding-top:24px;color:#9cb2bc;font-size:13px;line-height:1.7}.tag{display:inline-block;color:var(--mint);border:1px solid #476a62;padding:5px 8px;font:9px Consolas,monospace;letter-spacing:.15em}.side-note small{font:9px Consolas,monospace;letter-spacing:.04em;color:#78929e}
.main{padding:26px 38px 24px;min-width:0}.hero{min-height:270px;background:linear-gradient(100deg,#1b3039,#192731 70%,#1a3340);border:1px solid #39515b;display:flex;justify-content:space-between;align-items:center;position:relative;overflow:hidden;padding:27px 50px}
.hero:before{content:"";position:absolute;inset:0;opacity:.22;pointer-events:none;background-image:linear-gradient(#5ea5b01c 1px,transparent 1px),linear-gradient(90deg,#5ea5b01c 1px,transparent 1px);background-size:21px 21px}.hero-copy{position:relative;z-index:1;max-width:540px}
.hero h1{font-size:clamp(35px,4vw,62px);line-height:1.04;letter-spacing:-.045em;margin:17px 0 13px;font-weight:900}.hero h1 em{font-style:normal;color:var(--mint)}
.hero p{color:#b7cbd1;font-size:13px;line-height:1.65;max-width:445px}.hero-chips{display:flex;gap:15px;margin-top:24px}.hero-chips span{font:10px Consolas,monospace;letter-spacing:.07em;color:#c5d9db;border-top:1px solid #627f83;padding-top:7px}

/* CTX.net console -- desktop layout and mobile-first interaction */
html{width:100%;max-width:100%;overflow-x:hidden}
body{width:100%;max-width:100%;overflow-x:hidden}
.shell,.layout,.main,.console,.console-head,.connectbar,.sendbar{min-width:0}
.hero-graphic{position:relative;flex:0 0 200px;height:185px}
.orbit{position:absolute;border:1px solid #7db6b16b;border-radius:50%;inset:12%;transform:rotate(-20deg)}
.orbit2{inset:2%;border-style:dashed;transform:rotate(33deg)}
.core{position:absolute;inset:39px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#15313a;border:1px solid #71caaa;box-shadow:0 0 35px #63e5cc22;clip-path:polygon(25% 0,75% 0,100% 25%,100% 75%,75% 100%,25% 100%,0 75%,0 25%)}
.core span{font-size:36px;font-weight:900;letter-spacing:-.06em}.core small{font:10px Consolas,monospace;letter-spacing:.16em;color:var(--mint)}
.glyph{position:absolute;color:#91ebcf}.glyph1{left:4%;top:14%}.glyph2{right:5%;bottom:13%}.glyph3{right:7%;top:8%}
.console{margin-top:18px;background:#121f28;border:1px solid #38515c;display:flex;flex-direction:column;min-height:490px;overflow:hidden}
.console-head{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:16px 22px;border-bottom:1px solid #304752;background:#192b35}
.room-meta{display:flex;align-items:center;gap:12px;min-width:0}.terminal-icon{color:var(--mint);font-size:22px}.room-meta small{font:10px Consolas,monospace;letter-spacing:.15em;color:#92b8b8}
.room-meta h2{font-size:21px;margin:2px 0 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.connection-state{display:flex;align-items:center;gap:7px;font:11px Consolas,monospace;letter-spacing:.08em;color:#b5c9cc;white-space:nowrap}
#stateLight{width:8px;height:8px;border-radius:50%;background:#a5f3ce;flex-shrink:0}
.connectbar{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:13px 21px;border-bottom:1px solid #304752}
.connectbar label{font:10px Consolas,monospace;letter-spacing:.13em;color:#a5c7c6}
.connectbar input,.sendbar input{flex:1 1 130px;min-width:0;max-width:100%;background:#0d1921;border:1px solid #49636a;color:#e9f1f3;border-radius:5px;padding:11px 12px;font-size:16px}
.connectbar input:focus,.sendbar input:focus{outline:2px solid #a5f3ce;outline-offset:1px}
.connectbar button,.sendbar button{background:#a5f3ce;border:0;color:#122521;font-weight:800;border-radius:5px;padding:12px 16px;font-size:12px;letter-spacing:.08em}
.messages{flex:1 1 260px;min-height:170px;overflow-y:auto;overflow-x:hidden;padding:18px 22px;font:13px/1.65 Consolas,monospace;overflow-wrap:anywhere;word-break:normal}
.message{padding:3px 0;border-bottom:1px solid #ffffff08}.message.system,.intro-message{color:#88bdaf}.message.own{color:#e6c19e}
.sendbar{display:flex;align-items:center;gap:10px;padding:12px 18px;border-top:1px solid #304752;background:#172731}.sendbar .prompt{color:var(--mint);font-size:23px}
.sendbar input{flex:1 1 auto}.sendbar button{white-space:nowrap}
.console-footer{padding:10px 20px;display:flex;gap:12px;justify-content:space-between;flex-wrap:wrap;border-top:1px solid #304752;font:9px Consolas,monospace;letter-spacing:.06em;color:#8fa9b2}
.fineprint{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;padding:16px 0;color:#66838d;font:9px Consolas,monospace;letter-spacing:.08em}

@media(max-width:900px){
 .topbar{height:72px;padding:0 20px}.layout{grid-template-columns:185px minmax(0,1fr)}
 .sidebar{min-height:calc(100vh - 72px);padding:25px 12px}.main{padding:18px 18px 22px}
 .hero{padding:20px;min-height:185px}.hero-graphic{flex-basis:130px;height:125px}.hero h1{font-size:32px}
 .topmeta .top-sep,.topmeta span:last-child{display:none}.brand{font-size:20px}
}
@media(max-width:640px){
 :root{font-size:16px}
 html,body{min-height:100%;overscroll-behavior-x:none}
 .shell{width:100%;max-width:100%;min-height:100dvh}
 .topbar{height:66px;padding:0 14px;gap:8px}
 .brand{gap:9px;font-size:20px;letter-spacing:.07em;white-space:nowrap}
 .brand small{font-size:7px;letter-spacing:.07em;margin-top:2px}
 .emblem{width:36px;height:36px;flex:0 0 36px;font-size:13px}
 .emblem span{font-size:10px}
 .topmeta{font-size:9px;gap:5px;letter-spacing:0;min-width:0;text-align:right}
 .topmeta .top-sep,.topmeta span:last-child{display:none}
 .layout{display:flex;flex-direction:column;width:100%;min-width:0}
 .sidebar{display:block;width:100%;min-height:0;padding:0;border-right:0;border-bottom:1px solid #344650}
 .sidetag,.sidebar-title,.side-note{display:none}
 .channels{display:flex;flex-direction:row;gap:5px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding:9px 10px;-webkit-overflow-scrolling:touch}
 .channels::-webkit-scrollbar{display:none}
 .channels button{flex:0 0 auto;padding:10px 12px;font-size:13px;border-radius:6px;white-space:nowrap}
 .main{padding:0;width:100%;min-width:0}
 .hero,.fineprint{display:none}
 .console{margin:0;border:0;border-radius:0;width:100%;height:calc(100dvh - 117px);min-height:360px;max-height:100dvh}
 .console-head{padding:10px 13px;gap:8px;flex:0 0 auto}
 .room-meta{gap:8px}.terminal-icon{font-size:17px}.room-meta small{font-size:8px}
 .room-meta h2{font-size:18px}.connection-state{font-size:9px}
 .connectbar{padding:9px 12px;gap:8px;flex:0 0 auto}
 .connectbar label{flex:1 0 100%;font-size:9px}
 .connectbar input{flex:1 1 auto;width:0;padding:10px 11px}
 .connectbar button{flex:0 0 auto;padding:11px 13px}
 .messages{padding:13px 14px;min-height:90px;flex:1 1 auto;font-size:13px}
 .sendbar{padding:8px 10px;gap:7px;flex:0 0 auto}
 .sendbar input{padding:10px 9px}.sendbar button{padding:12px 11px}
 .console-footer{padding:7px 11px;gap:8px;font-size:8px;flex:0 0 auto}
}

@media(max-width:350px){
 .brand{font-size:17px}.brand small{font-size:6px}.topmeta{font-size:8px}
 .channels button{padding:9px 10px;font-size:12px}
 .connection-state{font-size:8px}
 .console-footer span:nth-child(2){display:none}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* Channel membership — real IRC NAMES, per-room on mobile */
.userlist{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:9px 20px;border-bottom:1px solid #304752;background:#14242d;min-width:0;max-height:108px;overflow-y:auto}
.userlist-label{color:#9bc3b8;font:10px Consolas,monospace;letter-spacing:.12em;margin-right:5px;white-space:nowrap}
.user-chip{max-width:170px;overflow:hidden;text-overflow:ellipsis;border:1px solid #46685f;color:#d7f4e9;background:#1c363b;padding:4px 8px;border-radius:12px;font:11px Consolas,monospace;white-space:nowrap}
.userlist-empty{color:#7e9ca6;font:11px Consolas,monospace}
@media(max-width:640px){
 .userlist{gap:5px;padding:7px 11px;max-height:76px;flex:0 0 auto}
 .userlist-label{font-size:9px}.user-chip{font-size:10px;padding:4px 7px}
}

/* K9 LIVE CIRCUIT FIELD */
.messages{
  position:relative;
  background-color:#02070d!important;
  background-image:
    linear-gradient(rgba(0,0,0,.28),rgba(0,0,0,.28)),
    radial-gradient(circle at 84% 34%,rgba(27,125,184,.10),transparent 24%),
    repeating-linear-gradient(90deg,transparent 0 46px,rgba(32,132,181,.045) 47px,transparent 48px 96px),
    repeating-linear-gradient(0deg,transparent 0 31px,rgba(45,155,201,.035) 32px,transparent 33px 64px);
}
.messages:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.22;
  background:
    linear-gradient(90deg,transparent 0 9%,rgba(47,179,221,.28) 9% 9.3%,transparent 9.3% 36%,rgba(47,179,221,.2) 36% 36.2%,transparent 36.2%),
    linear-gradient(0deg,transparent 0 18%,rgba(47,179,221,.20) 18% 18.25%,transparent 18.25% 68%,rgba(47,179,221,.16) 68% 68.2%,transparent 68.2%);
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.35),#000 18%,#000 84%,rgba(0,0,0,.4));
}
.message,.intro-message{position:relative;z-index:2}
.console{
  border:1px solid rgba(74,193,228,.28)!important;
  box-shadow:inset 0 0 45px rgba(0,91,136,.09),0 0 28px rgba(0,0,0,.45)!important;
}
.k9irc-top,.console-head,.sendbar,.console-footer{
  background-image:linear-gradient(90deg,rgba(8,36,53,.96),rgba(3,11,18,.98),rgba(12,31,39,.95))!important;
}
.k9irc-channels button.selected{
  box-shadow:inset 0 -2px 0 #59d8ff,0 6px 22px rgba(45,170,220,.12)!important;
}