* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; color: #eee; font: 13px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; }
canvas#view { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
#cross { position: fixed; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; pointer-events: none;
  background: linear-gradient(#fff, #fff) center/1px 100% no-repeat, linear-gradient(#fff, #fff) center/100% 1px no-repeat; mix-blend-mode: difference; opacity: .8; }

#loading { position: fixed; inset: 0; display: grid; place-items: center; background: #111; z-index: 10; }
#loading .box { width: min(420px, 86vw); }
#loading p { color: #aaa; margin: 6px 0 12px; }
.bar { height: 4px; background: #333; border-radius: 2px; overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; background: #f2b84b; transition: width .2s; }

#hud { position: fixed; left: 12px; top: 10px; pointer-events: none; text-shadow: 0 1px 2px #000; }
#status { color: #ccc; font-size: 12px; }
#probe { margin-top: 4px; font-size: 15px; font-weight: 600; }
#probe small { font-weight: 400; color: #bbb; }

#legend { position: fixed; left: 12px; bottom: 14px; width: 300px; background: #000a; padding: 8px 10px; border-radius: 6px; }
#legend .scale { height: 12px; border-radius: 2px; }
#legend .ticks { display: flex; justify-content: space-between; font-size: 11px; color: #ccc; margin: 2px 0; }
#legend small { color: #999; }

#panel { position: fixed; right: 0; top: 0; bottom: 0; width: 320px; overflow-y: auto; background: #151515ee; border-left: 1px solid #333; padding: 8px 14px 30px; transition: transform .2s; }
body.nopanel #panel { transform: translateX(100%); }
#paneltoggle { position: fixed; right: 330px; top: 10px; transition: right .2s; }
body.nopanel #paneltoggle { right: 10px; }
section { border-bottom: 1px solid #2c2c2c; padding: 8px 0 10px; }
h2 { font-size: 13px; margin: 4px 0 8px; color: #f2b84b; text-transform: uppercase; letter-spacing: .04em; }
h2 small { color: #888; text-transform: none; letter-spacing: 0; font-weight: 400; }
.row { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 4px 0; }
input[type=range] { width: 100%; accent-color: #f2b84b; }
select, button { background: #262626; color: #eee; border: 1px solid #444; border-radius: 4px; padding: 4px 8px; font: inherit; }
select#room { width: 100%; }
button { cursor: pointer; }
button:hover { background: #333; }
button.on { background: #f2b84b; color: #111; border-color: #f2b84b; }
.btns { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }

.circ { border: 1px solid #2c2c2c; border-radius: 6px; padding: 6px 8px; margin: 6px 0; }
.circ.off { opacity: .55; }
.circ .top { display: flex; align-items: center; gap: 6px; }
.circ .top b { flex: 1; font-weight: 600; cursor: pointer; }
.circ .top b small { color: #999; font-weight: 400; }
.circ .ctl { display: grid; grid-template-columns: 1fr auto; gap: 6px; align-items: center; margin-top: 4px; }
.circ .ctl select { padding: 2px 4px; }
.circ .list { display: none; margin-top: 6px; font-size: 12px; }
.circ.open .list { display: block; }
.circ .list label { display: flex; gap: 6px; padding: 1px 0; color: #ccc; }
.circ .list label span { color: #888; margin-left: auto; }

#help { position: fixed; left: 50%; bottom: 12px; transform: translateX(-50%); background: #000a; padding: 6px 12px; border-radius: 6px; color: #ccc; font-size: 12px; text-align: center; max-width: 90vw; }
body.nohelp #help { display: none; }
#joy { display: none; position: fixed; left: 24px; bottom: 24px; width: 110px; height: 110px; border-radius: 50%; background: #fff2; touch-action: none; }
#joy i { position: absolute; left: 35px; top: 35px; width: 40px; height: 40px; border-radius: 50%; background: #fff6; }
@media (pointer: coarse) { #joy { display: block; } #help { display: none; } }
#err { position: fixed; inset: 0; display: grid; place-items: center; background: #111; color: #f88; padding: 30px; z-index: 20; white-space: pre-wrap; }
[hidden] { display: none !important; }

#panel{background:#101c2aef;color:#e1eaf0;padding:12px 14px 0;width:min(340px,92vw);scrollbar-color:#40546a #142333}
#paneltoggle{right:min(350px,93vw)}
#panel section{padding:12px 0;border-color:#314052}
.brand{color:#a4c3df;font-size:11px;text-transform:uppercase;letter-spacing:.12em;margin:0}
h1{margin:2px 0 12px;font:600 26px/1.2 "Segoe UI",sans-serif}
h2{color:#a7d7f4}section p{margin:6px 0;color:#bed0dc}
#fixture,#room{width:100%;margin:4px 0 8px}
input[type=number], select,button{background:#203345;color:#eef6ff;border:1px solid #43576a;border-radius:4px;padding:5px 7px}
input[type=number]{width:82px}input[type=file]{display:block;max-width:100%;font:inherit}
.xyz{display:flex;gap:6px;margin:9px 0}.xyz label,.xyz input{width:100%;min-width:0}
#panel footer{position:sticky;bottom:0;background:#142435;padding:10px 0;border-top:1px solid #526477}
#saveDesign{background:#b9dff2;color:#15293a;font-weight:600}#notice{display:block;font-size:12px;color:#c5dbe9;margin-top:3px}
#status,#probe{background:#152337c9;padding:2px 6px;max-width:calc(100vw - 110px)}#help{width:max-content;max-width:calc(100vw - 360px);left:calc((100% - 340px)/2)}
body.nopanel #help{left:50%;max-width:95vw} input[type=range]{accent-color:#a7d7f4}.bar i{background:#a7d7f4}
@media(max-width:680px){#panel{top:30%;width:min(340px,100vw);border-top:1px solid #43576a}#paneltoggle{top:8px;right:8px}#help{display:none}#hud{max-width:70vw}}


#renderMode{width:100%;margin:4px 0 10px}#probe:empty{display:none}