:root{
  --bg:#6e7680;
  --bg2:#9aa3ad;
  --panel:#e4e6e9;
  --panel2:#c7ccd1;
  --line:#8a9099;
  --line-light:#ffffff;
  --fg:#23272b;
  --dim:#5b6168;
  --accent:#3f7fb8;
  --accent-light:#7fb3dd;
  --accent-dark:#2a5a85;
  --me:#2f8f52;
  --glass-hi:rgba(255,255,255,.55);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;overflow:hidden;color:var(--fg);font:14px/1.4 "Lucida Grande","Segoe UI",system-ui,sans-serif}
body{
  height:100vh;height:100dvh;
  background:
    radial-gradient(900px 600px at 15% -10%, #9aa6b0 0%, transparent 60%),
    linear-gradient(180deg,#52585f 0%,#73797f 45%,#8d929a 100%);
}
[hidden]{display:none!important}

/* ---------- shared pinstripe/aqua primitives ---------- */
.pinstripe{
  background-image:
    linear-gradient(180deg, var(--panel) 0%, var(--panel2) 100%),
    repeating-linear-gradient(180deg, rgba(255,255,255,.35) 0px, rgba(255,255,255,.35) 1px, transparent 1px, transparent 3px);
}

input{
  background:linear-gradient(180deg,#e9ebed 0%,#ffffff 35%,#ffffff 100%);
  color:var(--fg);
  border:1px solid var(--line);
  border-radius:3px;
  padding:9px 10px;
  font:inherit;
  box-shadow:
    inset 0 2px 3px rgba(20,25,30,.3),
    inset 0 -1px 0 rgba(255,255,255,.5);
  transition:box-shadow .08s ease-out, border-color .08s ease-out;
}
input:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:
    inset 0 2px 3px rgba(20,25,30,.3),
    0 0 0 3px rgba(63,127,184,.35);
}

button{
  position:relative;
  background:linear-gradient(180deg,#eef5fb 0%,#a9cbe8 46%,#5a9bd0 50%,#2d6fa3 100%);
  color:#0d2d48;
  border:1px solid #2a5a85;
  border-radius:14px;
  padding:8px 20px;
  font:inherit;
  font-weight:700;
  text-shadow:0 1px 0 rgba(255,255,255,.45);
  cursor:pointer;
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 1px 2px rgba(10,15,20,.35),
    0 2px 4px rgba(10,15,20,.2);
  transition:filter .06s linear, transform .04s linear, box-shadow .06s linear;
}
button:hover{filter:brightness(1.04)}
button:active{
  transform:translateY(1px);
  box-shadow:
    inset 0 2px 4px rgba(10,25,40,.4),
    0 1px 1px rgba(10,15,20,.2);
}
button:disabled{opacity:.5;cursor:default;filter:none;transform:none}

::-webkit-scrollbar{width:13px;height:13px}
::-webkit-scrollbar-track{background:linear-gradient(90deg,#c7ccd1,#e4e6e9)}
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#f2f3f5,#c3c9ce 45%,#9aa1a8 50%,#b9bfc5);
  border:2px solid #c7ccd1;
  border-radius:3px;
}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#ffffff,#d3d9de 45%,#a7aeb5 50%,#c3cbd2)}

/* ---------- login ---------- */
#login{display:flex;height:100%;overflow-y:auto;align-items:center;justify-content:center;padding:16px}
#loginForm{
  background:linear-gradient(180deg, var(--panel) 0%, var(--panel2) 100%);
  border:1px solid var(--line);
  padding:0 0 22px;
  border-radius:8px;
  display:flex;flex-direction:column;gap:14px;
  width:340px;max-width:100%;
  box-shadow:
    0 1px 0 var(--glass-hi) inset,
    0 20px 40px rgba(5,8,12,.5),
    0 2px 6px rgba(5,8,12,.35);
  overflow:hidden;
}
#loginForm > *{padding-left:24px;padding-right:24px}
#loginForm h1{
  margin:0;
  padding:12px 24px;
  font-size:18px;
  font-weight:700;
  color:#eef5fb;
  letter-spacing:.2px;
  background-image:
    linear-gradient(180deg,#5a7284 0%,#3c5468 18%,#2c4255 45%,#263a4a 55%,#1c2d3a 100%),
    repeating-linear-gradient(180deg, rgba(255,255,255,.07) 0px, rgba(255,255,255,.07) 1px, transparent 1px, transparent 3px);
  border-bottom:1px solid #16232d;
  text-shadow:0 1px 2px rgba(0,0,0,.5);
  box-shadow:0 1px 0 rgba(255,255,255,.15) inset;
}
label{display:flex;flex-direction:column;gap:5px;color:var(--dim);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.4px}
#loginErr{color:#a8362a;margin:0;min-height:1em;font-weight:600}
.bar{
  height:11px;
  background:linear-gradient(180deg,#b5bbc1,#e4e6e9);
  border:1px solid var(--line);
  border-radius:3px;
  overflow:hidden;
  box-shadow:inset 0 2px 3px rgba(20,25,30,.35);
}
.fill{
  height:100%;width:0;
  background:linear-gradient(180deg,#a9cbe8,#5a9bd0 55%,#2d6fa3);
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset;
  transition:width .15s ease-out;
}
.fill.fail{background:linear-gradient(180deg,#e8a79e,#c0493a 55%,#9c3327)}
#progressText{margin-top:6px;color:var(--dim);font-size:13px;font-weight:600}

/* ---------- app shell ---------- */
#app{display:grid;grid-template-columns:160px minmax(0,1fr) 160px;grid-template-rows:minmax(0,1fr);height:100%;overflow:hidden;gap:7px;padding:7px}
aside{
  background-image:
    linear-gradient(180deg, var(--panel) 0%, var(--panel2) 100%),
    repeating-linear-gradient(180deg, rgba(255,255,255,.3) 0px, rgba(255,255,255,.3) 1px, transparent 1px, transparent 3px);
  border:1px solid var(--line);
  border-radius:4px;
  overflow-y:auto;padding:8px;
  box-shadow:0 1px 0 var(--glass-hi) inset, 0 5px 12px rgba(5,8,12,.3);
}
.tab,.user{
  padding:5px 9px;margin-bottom:2px;border-radius:9px;cursor:pointer;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  border:1px solid transparent;
  transition:background-color .06s linear, border-color .06s linear;
}
.tab:hover,.user:hover{background:rgba(63,127,184,.14);border-color:rgba(63,127,184,.3)}
.tab.active{
  background:linear-gradient(180deg,#a9cbe8,#5a9bd0 55%,#2d6fa3);
  color:#fff;font-weight:700;
  border-color:#2a5a85;
  box-shadow:0 1px 0 rgba(255,255,255,.45) inset, 0 1px 3px rgba(5,8,12,.3);
}
.tab.unread{font-weight:700;color:var(--accent-dark)}
.tab.active.unread{color:#fff}

main{
  display:flex;flex-direction:column;min-width:0;min-height:0;height:100%;overflow:hidden;
  background:linear-gradient(180deg,#eef0f2,#d8dbdf);
  border:1px solid var(--line);
  border-radius:4px;
  box-shadow:0 1px 0 var(--glass-hi) inset, 0 6px 16px rgba(5,8,12,.3);
}
#topic{
  padding:7px 12px;border-bottom:1px solid var(--line);color:var(--dim);min-height:30px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  background-image:
    linear-gradient(180deg,#5a7284,#3c5468),
    repeating-linear-gradient(180deg, rgba(255,255,255,.08) 0px, rgba(255,255,255,.08) 1px, transparent 1px, transparent 3px);
  color:#dce6ee;
  border-radius:4px 4px 0 0;
  font-weight:600;
  text-shadow:0 1px 1px rgba(0,0,0,.4);
}
#log{flex:1;min-height:0;overflow-y:auto;padding:10px 12px;overflow-wrap:anywhere}
.line{white-space:pre-wrap}
.line.motd{font-family:ui-monospace,Consolas,monospace;font-size:13px;color:var(--fg)}
.line .t{color:var(--dim);margin-right:6px;font-size:12px}
.line .n{font-weight:700;margin-right:6px}
.line.me .n{color:var(--me)}
.line.sys{color:var(--dim)}
.line.action{font-style:italic}

#inputForm{
  display:flex;gap:8px;padding:9px;border-top:1px solid var(--line);flex-shrink:0;
  background:linear-gradient(180deg,#d8dbdf,#e4e6e9);
  border-radius:0 0 4px 4px;
}
#input{flex:1}

@media(max-width:700px){#app{grid-template-columns:96px 1fr}#users{display:none}}