:root{
  --bg0:#0c120e; --bg1:#101a13; --panel:#16241b; --panel2:#1b2d21;
  --line:#24402f; --ink:#eee9db; --ink-dim:#9db3a2;
  --green:#3ecf8e; --green2:#2aa873; --clay:#c8825a; --gold:#d9b36c;
  --red:#d96a5a; --shadow:0 10px 30px rgba(0,0,0,.45);
  font-size:15px;
}
*{box-sizing:border-box; margin:0; padding:0}
html,body{height:100%}
body{
  font-family:"Instrument Sans",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:
    radial-gradient(1200px 700px at 80% -10%, #14261a 0%, transparent 60%),
    radial-gradient(900px 600px at -10% 110%, #122017 0%, transparent 55%),
    linear-gradient(180deg,var(--bg0),var(--bg1));
  color:var(--ink); overflow:hidden;
}
.screen{position:fixed; inset:0; display:flex; flex-direction:column}
.hidden{display:none !important}
.spacer{flex:1}
button{font:inherit; cursor:pointer; border:none; border-radius:10px; color:var(--ink)}

/* ---------- login ---------- */
#login{align-items:center; justify-content:center}
.login-card{
  width:min(380px,92vw); background:var(--panel); border:1px solid var(--line);
  border-radius:18px; padding:34px 30px; box-shadow:var(--shadow); text-align:center;
}
.brand{
  font-family:"Fraunces",Georgia,serif; font-size:2rem; letter-spacing:.5px; color:var(--ink);
}
.brand::first-letter{color:var(--green)}
.sub{color:var(--ink-dim); margin:6px 0 24px; font-size:.86rem}
.login-card input{
  width:100%; padding:12px 14px; margin-bottom:12px; border-radius:10px;
  border:1px solid var(--line); background:#0e1712; color:var(--ink); outline:none;
}
.login-card input:focus{border-color:var(--green2)}
.login-card button{
  width:100%; padding:12px; background:linear-gradient(180deg,var(--green),var(--green2));
  color:#06130c; font-weight:700; letter-spacing:.3px;
}
.err{color:var(--red); font-size:.85rem; margin-top:10px; min-height:1.1em}

/* ---------- floor ---------- */
header{
  display:flex; align-items:center; gap:12px; padding:14px 20px;
  border-bottom:1px solid var(--line); background:rgba(10,16,12,.7); backdrop-filter:blur(8px);
}
.brand.small{font-size:1.25rem}
.chip{
  display:flex; align-items:center; gap:8px; font-size:.85rem; color:var(--ink-dim);
  background:var(--panel); border:1px solid var(--line); border-radius:999px; padding:5px 12px;
}
.dot{width:9px; height:9px; border-radius:50%; background:var(--ink-dim); flex:none}
.dot.online{background:var(--green); box-shadow:0 0 8px var(--green)}
.dot.unavailable{background:var(--gold)}
.dot.call{background:var(--clay); box-shadow:0 0 8px var(--clay)}
.ghost{background:transparent; border:1px solid var(--line); color:var(--ink-dim); padding:7px 12px}
.ghost:hover{color:var(--ink); border-color:var(--green2)}

main{flex:1; overflow:auto; padding:22px 22px 120px}
.zones{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:18px; align-items:start;
}
.zone{
  background:linear-gradient(180deg,var(--panel),var(--panel2));
  border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:var(--shadow);
}
.zone-head{
  display:flex; align-items:center; gap:9px; padding:13px 16px;
  border-bottom:1px solid var(--line);
}
.zone-head .zname{font-weight:650; letter-spacing:.2px}
.zone-head .zcount{
  margin-left:auto; font-size:.75rem; color:var(--ink-dim);
  background:#0e1712; border:1px solid var(--line); border-radius:999px; padding:2px 9px;
}
.zone .people{display:flex; flex-wrap:wrap; gap:12px; padding:16px; min-height:96px}
.empty{color:var(--ink-dim); font-size:.82rem; padding:18px; font-style:italic}

/* person tile */
.person{
  width:84px; text-align:center; user-select:none; cursor:pointer; position:relative;
  transition:transform .12s ease;
}
.person:hover{transform:translateY(-3px)}
.avatar{
  width:56px; height:56px; margin:0 auto 7px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:1.15rem; color:#08120c; position:relative;
  background:hsl(var(--h,120) 45% 62%);
}
.avatar::after{ /* presence ring */
  content:""; position:absolute; inset:-5px; border-radius:50%;
  border:2.5px solid transparent;
}
.person.online .avatar::after{border-color:rgba(62,207,142,.55)}
.person.incall .avatar::after{
  border-color:var(--clay); animation:pulse 1.6s ease-in-out infinite;
}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(200,130,90,.5)}50%{box-shadow:0 0 0 8px rgba(200,130,90,0)}}
.pname{font-size:.78rem; line-height:1.15; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pstat{font-size:.68rem; color:var(--ink-dim)}
.pstat.call{color:var(--clay)}

/* zone footer / action */
.zone-foot{display:flex; gap:8px; padding:0 16px 14px}
.zone-foot button{
  flex:1; padding:9px; font-size:.82rem; background:#0e1712; border:1px solid var(--line); color:var(--ink);
}
.zone-foot button:hover{border-color:var(--green2); color:var(--green)}
.zone-foot button.in{background:rgba(200,130,90,.15); border-color:var(--clay); color:var(--clay)}

/* ---------- voice dock ---------- */
.dock{
  position:fixed; left:50%; bottom:18px; transform:translateX(-50%);
  width:min(760px,94vw); background:rgba(16,26,19,.92); border:1px solid var(--line);
  border-radius:16px; box-shadow:var(--shadow); backdrop-filter:blur(10px); z-index:50;
}
.dock-head{display:flex; align-items:center; gap:10px; padding:12px 14px}
.dock-name{font-weight:650}
.dock-state{font-size:.75rem; color:var(--ink-dim)}
.ctl{
  width:42px; height:42px; border-radius:50%; background:#0e1712; border:1px solid var(--line);
  font-size:1.05rem; display:flex; align-items:center; justify-content:center;
}
.ctl:hover{border-color:var(--green2)}
.ctl.off{border-color:var(--red); color:var(--red)}
.ctl.on{border-color:var(--green); color:var(--green)}
.ctl.leave{background:var(--red); border-color:var(--red); color:#fff}
.participants{display:flex; gap:10px; padding:4px 14px 14px; flex-wrap:wrap}
.ptile{
  position:relative; width:118px; height:74px; border-radius:10px; overflow:hidden;
  background:#0b1410; border:1px solid var(--line); display:flex; align-items:center; justify-content:center;
}
.ptile video{width:100%; height:100%; object-fit:cover; position:absolute; inset:0}
.ptile .pname2{
  position:absolute; left:6px; bottom:4px; font-size:.66rem; color:var(--ink); text-shadow:0 1px 3px #000; z-index:2;
}
.ptile .micoff{position:absolute; top:4px; right:5px; font-size:.7rem; z-index:2}
.ptile.talking{border-color:var(--green); box-shadow:0 0 10px rgba(62,207,142,.4)}
.share-hint{
  padding:0 14px 12px; color:var(--green); font-size:.8rem;
}

/* ---------- person popup ---------- */
.pop{
  position:fixed; z-index:60; background:var(--panel); border:1px solid var(--line);
  border-radius:12px; padding:12px; box-shadow:var(--shadow); width:200px;
}
.pop-name{font-weight:650; margin-bottom:2px}
.pop-status{font-size:.75rem; color:var(--ink-dim); margin-bottom:9px}
.pop button{
  width:100%; padding:8px; background:linear-gradient(180deg,var(--green),var(--green2));
  color:#06130c; font-weight:650; font-size:.85rem;
}