:root {
  --navy: #101b3d;
  --navy2: #18264f;
  --blue: #2563eb;
  --blue-d: #1d4ed8;
  --ink: #0f172a;
  --muted: #64748b;
  --line: #e2e8f0;
  --green: #10b981;
  --amber: #f59e0b;
  --red: #dc2626;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { font: 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--ink); background: var(--navy); overflow: hidden; }
[hidden] { display: none !important; }
button { font: inherit; cursor: pointer; border: 0; border-radius: 10px; padding: 8px 12px; }
button:disabled { opacity: .5; cursor: default; }
button:focus-visible, input:focus-visible, select:focus-visible, canvas:focus-visible, a:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid #93c5fd; outline-offset: 2px; }
canvas#world:focus-visible { outline: none; }
.primary { background: var(--blue); color: #fff; font-weight: 600; }
.primary:hover:not(:disabled) { background: var(--blue-d); }
.ghost { background: rgba(255,255,255,.1); color: #fff; }
.ghost:hover:not(:disabled) { background: rgba(255,255,255,.18); }
.ghost.light { background: #eef2f7; color: var(--ink); }
.ghost.light:hover:not(:disabled) { background: #e2e8f0; }
.ghost.danger { color: var(--red); }
.wide { width: 100%; }
kbd { background: rgba(255,255,255,.14); border-radius: 4px; padding: 0 5px; font: inherit; }

#app { display: grid; grid-template-columns: 284px 1fr; height: 100%; }
#side, #editor, #studio { background: var(--navy); color: #fff; padding: 16px 14px; display: flex; flex-direction: column; gap: 12px; min-height: 0; overflow-y: auto; }
.brand { display: flex; gap: 10px; align-items: center; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.1); }
.brand b { display: block; font-size: 19px; letter-spacing: .2px; }
.brand span { font-size: 12px; color: #a8b6d8; }
h3 { margin: 6px 2px 0; font-size: 12px; text-transform: uppercase; letter-spacing: .8px; color: #a8b6d8; display: flex; align-items: center; gap: 8px; }
.pill { background: rgba(255,255,255,.14); color: #fff; border-radius: 999px; padding: 1px 8px; font-size: 11px; }
.card { background: #fff; color: var(--ink); border-radius: 14px; padding: 12px; box-shadow: 0 6px 20px rgba(8,15,40,.18); }
.bcard { display: flex; gap: 12px; align-items: center; }
.bicon { font-size: 26px; width: 44px; height: 44px; display: grid; place-items: center; background: #dbeafe; border-radius: 12px; }
.bname { font-weight: 700; font-size: 16px; }
.bsub { color: var(--muted); font-size: 12.5px; }
.spacer { flex: 1; }
.help { color: #a8b6d8; font-size: 12px; margin: 0; }
.empty { margin: 0; padding: 12px; border-radius: 12px; background: rgba(255,255,255,.07); color: #c9d4ee; font-size: 13px; }
.empty.dark { background: #f1f5f9; color: var(--muted); }

.plist { display: flex; flex-direction: column; gap: 2px; }
.prow { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; cursor: pointer; transition: opacity .3s; }
#side .prow:hover { background: rgba(255,255,255,.08); }
.prow.lost { opacity: .55; }
.prow .thumb { position: relative; flex: none; width: 36px; height: 36px; }
.prow .thumb canvas { display: block; border-radius: 50%; }
.prow .thumb::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; background: var(--green); border: 2px solid var(--navy); }
.voice .prow .thumb::after { border-color: #fff; }
.prow.lost .thumb::after { background: var(--amber); }
.prow.speaking .thumb canvas { box-shadow: 0 0 0 3px var(--green); }
.prow .txt { flex: 1; min-width: 0; }
.prow .nm { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prow .sub { font-size: 12px; color: #a8b6d8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.voice .prow { cursor: default; padding: 6px 2px; }
.voice .prow .sub { color: var(--muted); }
.prow .act { flex: none; width: 30px; height: 30px; padding: 0; border-radius: 8px; background: transparent; color: inherit; font-size: 15px; opacity: .75; }
.prow .act:hover { background: rgba(120,140,180,.22); opacity: 1; }
.prow .micoff { font-size: 12px; opacity: .7; }

.mecard { display: flex; flex-direction: column; gap: 8px; background: var(--navy2); color: #fff; box-shadow: none; padding: 10px; }
.mehead { display: flex; align-items: center; gap: 10px; }
.iconbtn { flex: none; width: 32px; height: 32px; padding: 0; background: rgba(255,255,255,.08); color: #fff; }
.iconbtn:hover { background: rgba(255,255,255,.18); }
.mecard canvas { display: block; border-radius: 50%; }
.meinfo { flex: 1; min-width: 0; }
.mename { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.merole { font-size: 12px; color: #a8b6d8; }

#stage { position: relative; min-width: 0; min-height: 0; background: #5faa48; }
#world { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: pointer; }
#right { position: absolute; top: 14px; right: 14px; width: 276px; display: flex; flex-direction: column; gap: 12px; max-height: calc(100% - 28px); pointer-events: none; }
#right > * { pointer-events: auto; }
.mini { padding: 0; overflow: hidden; background: var(--navy); color: #fff; border: 3px solid var(--navy); }
.mini header { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px 6px 10px; font-weight: 600; }
.mini canvas { display: block; width: 100%; border-radius: 0 0 10px 10px; cursor: pointer; }
.mini canvas:focus-visible { outline: 3px solid #60a5fa; outline-offset: -3px; }
.mini.big { align-self: flex-end; width: min(560px, calc(100vw - 340px)); }
.mini.folded header { padding-bottom: 6px; }
.crumbs { display: flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; white-space: nowrap; font-size: 13px; }
.crumbs > * { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.crumbs .sep { flex: none; opacity: .55; }
.crumbs button { padding: 0 4px; background: transparent; color: #fde68a; font: inherit; font-weight: 600; text-decoration: underline dotted; }
.crumbs [aria-current] { color: #fde68a; }
.mini-info { display: flex; align-items: center; gap: 6px; padding: 6px 8px; background: var(--navy2); }
.mini-info .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mini-info b, .mini-info small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-info small { color: #a8b6d8; font-size: 11.5px; }
.mini-info button { flex: none; padding: 5px 9px; font-size: 12.5px; }
.zoom button { width: 28px; height: 26px; padding: 0; margin-left: 4px; background: rgba(255,255,255,.14); color: #fff; font-weight: 700; font-size: 16px; }
.zoom button:hover { background: rgba(255,255,255,.26); }

.voice { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.voice header { display: flex; gap: 12px; align-items: center; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.vicon { width: 44px; height: 44px; border-radius: 50%; background: #dbeafe; display: grid; place-items: center; font-size: 22px; flex: none; }
.vtitle { font-weight: 700; font-size: 15px; }
.vsub { font-size: 12.5px; color: var(--muted); }
#v-list { overflow-y: auto; min-height: 0; }
.microw { display: flex; justify-content: center; align-items: center; gap: 14px; padding-top: 4px; }
.mic { width: 68px; height: 68px; border-radius: 50%; padding: 0; background: #e2e8f0; color: #475569; display: grid; place-items: center; transition: background .15s, box-shadow .15s; }
.mic:hover { background: #cbd5e1; }
.mic.on { background: var(--blue); color: #fff; }
.mic.on:hover { background: var(--blue-d); }
.mic.on #mic-slash { display: none; }
.mic.talk { box-shadow: 0 0 0 6px rgba(16,185,129,.35); }
.mic.err { background: #fee2e2; color: var(--red); }
.bars { display: flex; align-items: center; gap: 3px; height: 34px; width: 40px; justify-content: center; }
.bars i { width: 4px; height: 4px; border-radius: 2px; background: #cbd5e1; }
.bars.on i { background: var(--blue); }
.miclabel { text-align: center; font-weight: 700; color: var(--blue-d); }
.miclabel.off { color: #475569; }
.miclabel.err { color: var(--red); }
.michint { text-align: center; font-size: 12.5px; color: var(--muted); min-height: 18px; }
.pttrow { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pttrow .check { margin: 0; }
.talkbtn { width: 100%; background: #e2e8f0; color: #1e293b; font-weight: 700; touch-action: none; user-select: none; -webkit-user-select: none; }
.talkbtn.on { background: var(--green, #10b981); color: #fff; }
.vtools { margin-left: auto; display: flex; gap: 4px; align-self: flex-start; }
.vtools button { width: 28px; height: 26px; padding: 0; background: #eef2f7; color: #475569; font-size: 15px; }
.vtools button:hover { background: #e2e8f0; }
.brand #side-fold { margin-left: auto; align-self: flex-start; font-size: 16px; }
@media (min-width: 900px) {
  .voice.folded { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px; }
  .voice.folded header { flex: 1; min-width: 0; border: 0; padding: 0; gap: 8px; }
  .voice.folded header > div:not(.vicon) { min-width: 0; }
  .voice.folded .vsub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .voice.folded .vicon, .voice.folded #v-list, .voice.folded #v-empty, .voice.folded .bars, .voice.folded .miclabel, .voice.folded .michint, .voice.folded .pttrow .check { display: none; }
  .voice.folded .microw { order: -1; padding: 0; }
  .voice.folded .mic { width: 44px; height: 44px; }
  .voice.folded .mic svg { width: 22px; height: 22px; }
  .voice.folded .pttrow { flex-basis: 100%; }
  .voice.folded .pttrow:has(.talkbtn[hidden]) { display: none; }
  body.sidefold:not(.editing) #app { grid-template-columns: 1fr; }
  body.sidefold:not(.editing) #side { display: none; }
  body.sidefold:not(.editing) #btn-menu { display: block; }
}
body.pipdoc { display: flex; flex-direction: column; height: 100vh; color: #fff; }
.pipview { flex: 1; min-height: 0; width: 100%; display: block; background: #5faa48; cursor: pointer; }
.pipbar { display: flex; align-items: center; gap: 8px; padding: 6px 8px; }
.pipbar .mic { flex: none; width: 40px; height: 40px; }
.piptxt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.piptxt b, .piptxt small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.piptxt small { color: #a8b6d8; font-size: 11.5px; }
.pipbar .badge { position: static; flex: none; background: var(--red); }
.pipbar .badge[hidden] { display: none; }
.pipbar .primary { flex: none; padding: 7px 10px; font-size: 13px; }
.pipvideo { position: fixed; left: 0; bottom: 0; width: 2px; height: 2px; opacity: 0; pointer-events: none; }

#banner { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); background: #7c2d12; color: #fff; padding: 10px 16px; border-radius: 12px; box-shadow: 0 6px 20px rgba(0,0,0,.25); display: flex; gap: 12px; align-items: center; z-index: 5; max-width: calc(100% - 340px); }
#banner button { background: #fff; color: #7c2d12; font-weight: 600; padding: 5px 10px; }
#toasts { position: absolute; left: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast { background: rgba(15,23,42,.92); color: #fff; padding: 10px 14px; border-radius: 12px; box-shadow: 0 6px 20px rgba(0,0,0,.25); animation: pop .2s ease-out; max-width: 380px; }
.toast.err { background: #991b1b; }
@keyframes pop { from { transform: translateY(8px); opacity: 0; } }

.modal { position: fixed; inset: 0; background: rgba(10,16,38,.62); display: grid; place-items: center; z-index: 20; padding: 20px; }
.dialog { background: #fff; border-radius: 18px; padding: 22px 24px; width: min(860px, 100%); max-height: 100%; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,.4); }
.dialog.small { width: min(440px, 100%); }
.dialog h2 { margin: 0 0 4px; font-size: 21px; }
.muted { color: var(--muted); margin: 0 0 14px; }
.pfgrid { display: grid; grid-template-columns: 200px 1fr; gap: 22px; }
.pfpreview { display: flex; flex-direction: column; align-items: center; gap: 10px; }
#pf-canvas { width: 160px; height: 180px; background: linear-gradient(#dbeafe, #eff6ff); border-radius: 14px; }
.pfsmall { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
#pf-small { width: 48px; height: 56px; background: #80cc5d; border-radius: 8px; }
.field { display: block; font-size: 12.5px; font-weight: 600; color: #475569; margin-bottom: 10px; }
.field input:not([type=range]), .field select, .field textarea { display: block; width: 100%; margin-top: 4px; padding: 8px 10px; border: 1px solid #cbd5e1; border-radius: 9px; font: inherit; color: var(--ink); background: #fff; }
.field input[type=range] { display: block; width: 100%; margin-top: 6px; }
.optrow { margin-bottom: 10px; }
.optrow > span { display: block; font-size: 12.5px; font-weight: 600; color: #475569; margin-bottom: 4px; }
.opts { display: flex; flex-wrap: wrap; gap: 6px; }
.opt { padding: 2px; background: #f1f5f9; border: 2px solid transparent; border-radius: 10px; line-height: 0; }
.opt canvas { width: 44px; height: 44px; display: block; border-radius: 8px; }
.opt.sw { width: 30px; height: 30px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px #cbd5e1; }
.opt.sel { border-color: var(--blue); }
.opt.sw.sel { box-shadow: 0 0 0 3px var(--blue); }
.opt.sw.orig { background: repeating-linear-gradient(45deg, #f1f5f9 0 5px, #e2e8f0 5px 10px); line-height: 26px; font-size: 15px; color: #475569; }
.pfanim { display: flex; gap: 6px; }
.pfanim button { padding: 4px 9px; font-size: 12.5px; }
.dialogactions { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 16px; }
.error { color: var(--red); margin-right: auto; font-size: 13px; }

#editor { padding-bottom: 12px; }
#editor .field { color: #c9d4ee; }
.edscroll { flex: 1; overflow-y: auto; min-height: 0; display: flex; flex-direction: column; gap: 10px; padding-right: 4px; }
.tools { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
#st-tools { grid-template-columns: repeat(4, 1fr); }
.tools.floors { grid-template-columns: repeat(3, 1fr); }
.tools button, .pal button { background: rgba(255,255,255,.1); color: #fff; padding: 7px 4px; font-size: 12px; border: 2px solid transparent; }
.tools button.sel, .pal button.sel { border-color: #60a5fa; background: rgba(96,165,250,.25); }
.pal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 6px; }
.pal button { display: flex; flex-direction: column; align-items: center; gap: 3px; line-height: 1.15; }
.pal canvas { width: 40px; height: 40px; border-radius: 6px; background: #e4b983; }
.palcat { font-size: 11px; color: #a8b6d8; margin: 4px 2px; }
.field textarea { resize: vertical; }
.check { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #c9d4ee; margin-bottom: 6px; }
.forgefilter { width: 100%; margin: 8px 0 4px; padding: 6px 8px; border-radius: 8px; border: 0; font: inherit; }
.forgelist { max-height: 260px; overflow-y: auto; }
.forgeitem { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: #c9d4ee; padding: 3px 0; }
.forgeitem span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.forgeitem small { color: #8fa0c8; }
.forgeitem button { padding: 2px 8px; background: rgba(255,255,255,.1); color: #fff; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: end; }
.row2 button { grid-column: 1 / -1; }
.roomitem { display: grid; grid-template-columns: 1fr 62px 30px; gap: 6px; margin-bottom: 6px; }
.roomitem input, .roomitem select { padding: 6px 8px; border-radius: 8px; border: 0; font: inherit; min-width: 0; }
.roomitem button { padding: 0; background: rgba(255,255,255,.1); color: #fff; }
.members { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.members label { display: flex; align-items: center; gap: 8px; padding: 4px 2px; }
.members small { color: #a8b6d8; margin-left: auto; }
.edactions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.1); }
.edactions .primary { grid-column: 1 / -1; padding: 10px; }
#editor .edactions { grid-template-columns: 40px 1fr 1.4fr; }
#editor .edactions .primary { grid-column: auto; }
#editor { gap: 10px; }
.edhead { display: flex; align-items: center; gap: 10px; }
.edhead > div { flex: 1; min-width: 0; }
.edhead b { display: block; font-size: 16px; }
.edhead span { display: block; font-size: 12px; color: #a8b6d8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.edtabs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; background: rgba(255,255,255,.06); border-radius: 11px; padding: 3px; }
.edtabs button { background: transparent; color: #a8b6d8; padding: 6px 2px; font-size: 12px; border-radius: 8px; white-space: nowrap; }
.edtabs button:hover { color: #fff; }
.edtabs button.sel { background: var(--blue); color: #fff; font-weight: 600; }
#editor .edscroll { gap: 8px; }
#editor .edscroll h3 { margin-top: 4px; }
.hint summary { cursor: pointer; font-size: 12px; color: #a8b6d8; list-style: none; }
.hint summary::-webkit-details-marker { display: none; }
.hint summary::before { content: "ⓘ "; }
.hint p { margin-top: 4px; }
.objsearch { display: grid; grid-template-columns: 1fr auto; gap: 6px; align-items: center; }
.objsearch .forgefilter { margin: 0; }
.objsearch .rotbar { margin: 0; }
.objsearch .rotbar span { display: none; }
.objsearch .rotbar button { padding: 3px 9px; font-size: 15px; }
.cats { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.cats button { background: rgba(255,255,255,.08); color: #c9d4ee; font-size: 11.5px; padding: 3px 9px; border-radius: 999px; }
.cats button.sel { background: #60a5fa; color: var(--navy); font-weight: 600; }
#editor .pal { grid-template-columns: repeat(4, 1fr); gap: 4px; }
#editor .pal button { font-size: 10.5px; padding: 5px 2px; }
#editor .pal button span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#editor .pal canvas { width: 34px; height: 34px; }
#editor .forgelist { max-height: none; }
body.editing .voice, body.editing #emotes { display: none; }
#studio { padding-bottom: 12px; }
#studio .empty { flex: none; }
.tpls { display: flex; flex-direction: column; gap: 4px; }
.tpl { display: flex; align-items: center; gap: 6px; font-size: 13px; padding: 4px 6px; border-radius: 9px; background: rgba(255,255,255,.06); }
.tpl span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tpl small { color: #8fa0c8; }
.tpl button { padding: 3px 8px; background: rgba(255,255,255,.12); color: #fff; font-size: 12px; }
.tpl button.primary { background: var(--blue); }
.tplsave { display: flex; flex-direction: column; gap: 6px; }
.tplsave input:not([type=checkbox]) { padding: 6px 8px; border-radius: 8px; border: 0; font: inherit; }
.spacectl { display: flex; gap: 4px; align-items: center; padding: 0 2px 6px 26px; font-size: 12px; color: #a8b6d8; }
.spacectl span { flex: 1; }
.spacectl select, .spacectl button { padding: 2px 6px; font-size: 12px; border-radius: 7px; border: 0; }
.spacectl button { background: rgba(255,255,255,.12); color: #fff; }
.doorbox { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: #c9d4ee; }
.doorbox select { padding: 6px 8px; border-radius: 8px; border: 0; font: inherit; }
.doorbox .members { max-height: 180px; overflow-y: auto; }
.statusrow { display: grid; grid-template-columns: 118px 1fr; gap: 6px; }
.statusrow select, .statusrow input { min-width: 0; padding: 7px 8px; border-radius: 9px; border: 0; font: inherit; font-size: 13px; }
.prow.st-meeting .thumb::after { background: #8b5cf6; }
.prow.st-dnd .thumb::after { background: var(--red); }
.prow.st-away .thumb::after { background: var(--amber); }
.prow.away { opacity: .7; }
.emotes { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); display: flex; gap: 6px; background: rgba(15,23,42,.8); padding: 6px; border-radius: 14px; z-index: 4; }
.emotes button { background: rgba(255,255,255,.1); font-size: 20px; padding: 4px 10px; color: #fff; }
.emotes button:hover { background: rgba(255,255,255,.22); }
.emotes button.on { background: var(--blue); }
.emotes kbd { font-size: 10px; margin-left: 4px; vertical-align: middle; }
#notices { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 7; width: min(440px, calc(100% - 40px)); }
.notice { background: #fff; color: var(--ink); border-radius: 14px; padding: 12px 14px; box-shadow: 0 10px 30px rgba(0,0,0,.3); animation: pop .2s ease-out; }
.notice p { margin: 0 0 8px; font-weight: 600; }
.notice div { display: flex; flex-wrap: wrap; gap: 6px; }
.notice button { padding: 6px 10px; font-size: 13px; }
.pfextra { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.pfextra h3 { color: var(--muted); margin: 0 0 6px; }
.pfextra .guest { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; border-bottom: 1px solid #f1f5f9; }
.pfextra .guest button { padding: 4px 10px; font-size: 12.5px; }
body.editing #world { cursor: crosshair; }

.login { text-align: center; }
.login .field { text-align: left; }
.login .error { min-height: 18px; margin: 0 0 10px; }
#btn-menu { display: none; position: absolute; top: 10px; left: 10px; z-index: 6; width: 44px; height: 44px; padding: 0; font-size: 20px; box-shadow: 0 4px 14px rgba(0,0,0,.3); }
#world { touch-action: none; }
@media (max-width: 899px) {
  html, body { height: 100dvh; }
  #app { grid-template-columns: 1fr; }
  #btn-menu { display: block; }
  #side, #editor, #studio { position: fixed; inset: 0 auto 0 0; width: min(86vw, 320px); z-index: 15; transform: translateX(-105%); transition: transform .2s; box-shadow: 8px 0 30px rgba(0,0,0,.4); }
  body.menu #side, body.menu #editor, body.menu #studio { transform: none; }
  .emotes { bottom: auto; top: 64px; left: 10px; transform: none; }
  body.menu #btn-menu { left: calc(min(86vw, 320px) + 10px); }
  #right { top: 10px; right: 10px; left: 64px; width: auto; align-items: flex-end; max-height: none; bottom: 10px; justify-content: space-between; }
  .mini { width: 132px; }
  .mini.big { width: min(92vw, 420px); }
  .mini header { flex-wrap: wrap; gap: 2px; }
  .mini:not(.big) .crumbs { order: 1; width: 100%; }
  .mini:not(.big) .crumbs > :not(:last-child) { display: none; }
  .mini:not(.big) .zoom button { width: 24px; margin-left: 2px; }
  .mini:not(.big) .mini-info { flex-wrap: wrap; }
  .voice { width: 100%; padding: 8px 12px; gap: 4px; display: grid; grid-template-columns: 1fr auto; align-items: center; }
  .voice header { border: 0; padding: 0; grid-column: 1; }
  .voice .vicon, #v-list, #v-empty, .voice .bars { display: none; }
  #v-fold, #side-fold { display: none; }
  .microw { grid-column: 2; grid-row: 1 / span 4; padding: 0; }
  .pttrow { grid-column: 1; align-items: flex-start; }
  .mic { width: 56px; height: 56px; }
  .miclabel, .michint { text-align: left; grid-column: 1; }
  #banner { max-width: calc(100% - 20px); top: 64px; }
  #toasts { left: 10px; right: 10px; bottom: 120px; }
  .dialog { padding: 16px; }
  .pfgrid { grid-template-columns: 1fr; gap: 12px; }
  #pf-canvas { width: 110px; height: 124px; }
}

.tools.labeled { grid-template-columns: repeat(4, 1fr); }
.tools.labeled button { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 18px; padding: 6px 2px; }
.tools.labeled button span { font-size: 10.5px; color: #c9d4ee; }
.modes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px; }
.modes button, .rotbar button, .selbox button { background: rgba(255,255,255,.1); color: #fff; font-size: 12.5px; padding: 6px; border: 2px solid transparent; }
.modes button.sel { border-color: #60a5fa; background: rgba(96,165,250,.25); }
.rotbar { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; color: #c9d4ee; font-size: 12.5px; }
.rotbar span { flex: 1; text-align: center; }
.rotbar button { font-size: 18px; padding: 2px 12px; }
.selbox { background: rgba(255,255,255,.06); border-radius: 10px; padding: 8px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: #c9d4ee; }
.selbox div { display: flex; gap: 5px; }
.selbox .danger { color: #fca5a5; margin-left: auto; }
.members .member { border-bottom: 1px solid rgba(255,255,255,.06); padding-bottom: 2px; }
.members .member label { padding: 4px 2px 0; }
.members .dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #64748b; }
.members .member.online .dot { background: var(--green); box-shadow: 0 0 0 3px rgba(16,185,129,.25); }
.members .member.online small { color: #6ee7b7; }
.members span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spacectl { padding: 2px 2px 4px 43px; }
.psearch { width: 100%; padding: 7px 10px; border-radius: 9px; border: 0; font: inherit; font-size: 13px; }
.quickbtn { text-align: left; display: flex; justify-content: space-between; align-items: center; }
.marks { display: flex; flex-wrap: wrap; gap: 5px; }
.marks button { background: rgba(255,255,255,.1); color: #fff; font-size: 12px; padding: 4px 8px; border-radius: 999px; }
.marks button:hover { background: rgba(255,255,255,.2); }
.prow { flex-wrap: wrap; }
.prow .acts { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 4px; padding: 4px 0 2px 46px; }
.prow .acts button { background: rgba(255,255,255,.12); color: #fff; font-size: 12px; padding: 4px 8px; }
.prow .acts button:hover { background: rgba(255,255,255,.22); }
.prow.following .nm::after { content: " · suivi"; color: #93c5fd; font-weight: 500; }
.modal.top { place-items: start center; padding-top: 12vh; }
.quick input { width: 100%; padding: 10px 12px; font: inherit; font-size: 16px; border: 1px solid #cbd5e1; border-radius: 10px; }
.quicklist { display: flex; flex-direction: column; margin: 8px 0; max-height: 50vh; overflow-y: auto; }
.quicklist button { display: flex; justify-content: space-between; gap: 8px; text-align: left; background: transparent; color: var(--ink); padding: 8px 10px; }
.quicklist button:hover, .quicklist button:first-child { background: #eef2ff; }
.quicklist small { color: var(--muted); }
.help.dark { color: var(--muted); }
.followpill { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 6; background: var(--blue); color: #fff; padding: 6px 8px 6px 14px; border-radius: 999px; display: flex; gap: 10px; align-items: center; font-weight: 600; box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.followpill button { background: rgba(255,255,255,.2); color: #fff; padding: 4px 10px; border-radius: 999px; }
#notices { top: 60px; }
.chat { position: absolute; left: 16px; bottom: 16px; z-index: 5; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.chattoggle { position: relative; width: 48px; height: 48px; border-radius: 50%; padding: 0; font-size: 22px; background: var(--navy); color: #fff; box-shadow: 0 6px 20px rgba(0,0,0,.3); }
.badge { position: absolute; top: -4px; right: -4px; background: var(--red); color: #fff; border-radius: 999px; font-size: 11px; padding: 1px 6px; }
.chatpanel { width: min(360px, calc(100vw - 40px)); background: #fff; border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.3); display: flex; flex-direction: column; overflow: hidden; }
.chatpanel header { display: flex; gap: 8px; align-items: center; padding: 8px 10px; background: var(--navy); color: #fff; }
.chatpanel header b { flex: 1; }
.chatchans { flex: 1; display: flex; gap: 2px; min-width: 0; }
.chatpanel header .chatchans button { padding: 3px 8px; border-radius: 7px; opacity: .7; font-weight: 600; white-space: nowrap; }
.chatpanel header .chatchans button.sel { background: rgba(255,255,255,.16); opacity: 1; }
.chatchans .badge { position: static; display: inline-block; margin-left: 2px; background: var(--red); }
.albar { display: flex; gap: 6px; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.albar select { flex: 1; min-width: 0; border: 1px solid #cbd5e1; border-radius: 7px; padding: 3px 6px; font: inherit; font-size: 12.5px; }
.chatlog.alerts { height: 275px; }
.alitem { border-left: 3px solid #94a3b8; padding: 3px 8px; border-radius: 4px; background: #f8fafc; }
.alitem.lv-ok { border-color: #16a34a; }
.alitem.lv-warn { border-color: #f59e0b; background: #fffbeb; }
.alitem.lv-crit { border-color: #dc2626; background: #fef2f2; }
.alhead { display: flex; gap: 6px; align-items: baseline; font-size: 11.5px; color: var(--muted); }
.alhead .alsrc { font-weight: 700; color: var(--ink); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.altitle { display: block; overflow-wrap: anywhere; color: var(--ink); }
a.altitle { color: var(--blue-d); }
.altext { margin: 2px 0 0; white-space: pre-line; overflow-wrap: anywhere; color: #334155; font-size: 12.5px; }
.hkform { display: flex; gap: 6px; margin: 8px 0; }
.hkform input { flex: 1; min-width: 0; }
.hklist { display: flex; flex-direction: column; gap: 8px; }
.hkitem { border: 1px solid var(--line); border-radius: 10px; padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.hkitem.off { opacity: .6; }
.hktop { display: flex; gap: 6px; align-items: center; }
.hktop input { flex: 1; min-width: 0; }
.hkurl { font-size: 11.5px; overflow-wrap: anywhere; background: rgba(148,163,184,.15); border-radius: 5px; padding: 2px 5px; user-select: all; }
.hkctl { display: flex; flex-wrap: wrap; gap: 4px; }
.hkctl button { font-size: 12px; padding: 3px 7px; }
.chatpanel header select { border-radius: 7px; border: 0; padding: 3px 6px; font: inherit; font-size: 12.5px; max-width: 150px; }
.chatpanel header button { background: transparent; color: #fff; padding: 2px 6px; }
.chatlog { height: 240px; overflow-y: auto; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }
.chatlog .msg b { color: var(--blue-d); margin-right: 4px; }
.chatlog .msg.dm b { color: #7c3aed; }
.chatlog .msg small { color: var(--muted); margin-left: 4px; font-size: 11px; }
.chatlog .msg.me b { color: var(--ink); }
.chatpanel form { display: flex; gap: 6px; padding: 8px; border-top: 1px solid var(--line); }
.chatpanel form input { flex: 1; min-width: 0; border: 1px solid #cbd5e1; border-radius: 9px; padding: 7px 10px; font: inherit; }
#toasts { bottom: 76px; }
body.editing .chat, body.editing .followpill { display: none; }

.fold summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 9px; font-size: 13px; color: #c9d4ee; }
.fold summary::-webkit-details-marker { display: none; }
.fold summary::after { content: "▸"; margin-left: auto; transition: transform .15s; }
.fold[open] summary::after { transform: rotate(90deg); }
.fold summary:hover { background: rgba(255,255,255,.06); }
.fold .marks { padding: 6px 2px 2px; }
.ctxbtns { display: flex; gap: 6px; }
.ctxbtns:not(:has(button:not([hidden]))) { display: none; }
.ctxbtns button { flex: 1; font-size: 13px; padding: 8px 6px; white-space: nowrap; }
.sidetools { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.1); }
.sidetools > * { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0; border-radius: 9px; background: transparent; color: #a8b6d8; font-size: 10.5px; text-decoration: none; min-width: 0; }
.sidetools > *:hover { background: rgba(255,255,255,.08); color: #fff; }
.sidetools i { font-style: normal; font-size: 17px; line-height: 1.2; }
.sidetools span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidetools .on { color: #fff; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.duo button { font-size: 12.5px; padding: 7px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.badge { background: #475569; }
.badge.hot { background: var(--red); }
.chatlog .msg.mention { background: #fef3c7; border-radius: 8px; padding: 2px 6px; margin: 0 -6px; }
.notice p { white-space: pre-line; }
.dhead { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.dhead h2 { margin: 0; }
.dhead button { padding: 4px 10px; }
.journal select { width: 100%; padding: 7px 10px; border: 1px solid #cbd5e1; border-radius: 9px; font: inherit; margin-bottom: 8px; }
.jrlist { display: flex; flex-direction: column; max-height: 60vh; overflow-y: auto; }
.jritem { display: grid; grid-template-columns: 24px 1fr auto; gap: 8px; align-items: baseline; padding: 6px 2px; border-bottom: 1px solid #f1f5f9; font-size: 13.5px; }
.jritem span:nth-child(2) { overflow-wrap: anywhere; }
.jritem small { color: var(--muted); font-size: 11.5px; white-space: nowrap; }
.jritem.k-chat span:nth-child(2) { color: #334155; }
.mediadock { position: absolute; top: 14px; left: 16px; z-index: 6; width: min(460px, calc(100% - 330px)); max-height: calc(100% - 28px); overflow-y: auto; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.mediadock > * { pointer-events: auto; }
.screenpanel { position: relative; flex: none; background: var(--navy); color: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.screenpanel header { display: flex; gap: 6px; align-items: center; padding: 6px 8px 6px 12px; }
.screenpanel header b { flex: 1; font-size: 13px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.screenpanel header button { background: rgba(255,255,255,.14); color: #fff; padding: 3px 9px; font-size: 13px; }
.screenpanel header button.danger { background: #b91c1c; }
.screenpanel video { display: block; width: 100%; max-height: 50vh; background: #000; }
.screenpanel.folded video, .screenpanel.folded p { display: none; }
.screenpanel p { margin: 0; padding: 8px 12px; font-size: 12.5px; color: #c9d4ee; }
.notedlg { width: min(880px, 100%); }
.notebar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.ntools { display: flex; gap: 4px; }
.ntools button { background: #eef2f7; color: var(--ink); padding: 6px 10px; font-size: 13px; border: 2px solid transparent; }
.ntools button.sel { border-color: var(--blue); background: #dbeafe; }
.ncolors { display: flex; gap: 5px; }
.ncolors .sw { width: 24px; height: 24px; padding: 0; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px #cbd5e1; }
.ncolors .sw.sel { box-shadow: 0 0 0 3px var(--blue); }
#nt-text { flex: 1; min-width: 160px; padding: 7px 10px; border: 1px solid #cbd5e1; border-radius: 9px; font: inherit; }
#nt-clear { margin-left: auto; }
#nt-canvas { display: block; width: 100%; aspect-ratio: 2 / 1; border-radius: 10px; border: 1px solid #cbd5e1; touch-action: none; cursor: crosshair; background: #fdfdfd; }
#nt-canvas.square { width: min(100%, 440px); aspect-ratio: 1; margin: 0 auto; }
#nt-info { margin-top: 6px; }
body.editing .mediadock { display: none; }
.gamedlg { width: min(700px, 100%); }
.gmtabs { display: flex; gap: 4px; margin-bottom: 10px; }
.gmtabs button { background: #eef2f7; color: var(--ink); padding: 6px 12px; font-size: 13px; border: 2px solid transparent; }
.gmtabs button.sel { border-color: var(--blue); background: #dbeafe; }
.gmplayers { display: flex; flex-wrap: wrap; gap: 6px; }
.gmp { display: flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; background: #f1f5f9; border-radius: 20px; border: 2px solid transparent; font-size: 13px; }
.gmp canvas { border-radius: 50%; }
.gmp.me { background: #dbeafe; }
.gmp.turn { border-color: #f59e0b; }
.gmp small { color: var(--muted); font-weight: 600; }
#gm-canvas { display: block; width: 100%; aspect-ratio: 8 / 5; border-radius: 12px; border: 1px solid #cbd5e1; touch-action: none; background: #f8fafc; }
#gm-canvas.pong { cursor: ns-resize; }
.gmquiz #gm-q { font-size: 17px; font-weight: 600; margin: 4px 0 10px; }
#gm-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#gm-choices button { text-align: left; padding: 12px; border: 2px solid transparent; }
#gm-choices button.picked { border-color: var(--blue); }
#gm-choices button.ok { background: #dcfce7; border-color: #16a34a; opacity: 1; }
#gm-choices button.ko { background: #fee2e2; border-color: var(--red); opacity: 1; }
.gmactions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 12px; }
.gmrank { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.gmrow { display: grid; grid-template-columns: 34px 28px 1fr auto; gap: 8px; align-items: center; padding: 5px 8px; border-radius: 10px; background: #f8fafc; }
.gmrow.me { background: #dbeafe; }
.gmrow canvas { border-radius: 50%; }
.gmrow small { color: var(--muted); }
@media (max-width: 599px) { #gm-choices { grid-template-columns: 1fr; } }
@media (max-width: 899px) {
  .mediadock { top: auto; bottom: 130px; left: 10px; width: calc(100% - 20px); max-height: 55%; }
}

.agbtn { text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agbtn.soon { background: rgba(139,92,246,.4); }
.agbar { display: flex; gap: 8px; margin-bottom: 8px; }
.agbar select { flex: 1; padding: 7px 10px; border: 1px solid #cbd5e1; border-radius: 9px; font: inherit; }
.agform { border: 1px solid #e2e8f0; border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; background: #f8fafc; }
.agform .row2 { grid-template-columns: 1fr 1fr; }
.agpeople { display: flex; flex-wrap: wrap; gap: 5px; max-height: 120px; overflow-y: auto; margin-bottom: 6px; }
.agpeople .chip { padding: 4px 10px; font-size: 12.5px; border-radius: 999px; background: #e2e8f0; color: var(--ink); }
.agpeople .chip.on { background: #2563eb; color: #fff; }
.aglist { display: flex; flex-direction: column; max-height: 50vh; overflow-y: auto; }
.agday { margin: 10px 0 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.agday::first-letter { text-transform: uppercase; }
.agitem { display: grid; grid-template-columns: 46px 1fr auto; gap: 10px; align-items: center; padding: 7px 4px; border-bottom: 1px solid #f1f5f9; font-size: 13.5px; }
.agitem.mine { background: #f5f3ff; }
.agitem.live { box-shadow: inset 3px 0 0 #dc2626; }
.agtime { white-space: pre-line; font-variant-numeric: tabular-nums; font-size: 12px; color: #475569; line-height: 1.3; }
.agitem b { display: block; overflow-wrap: anywhere; }
.agitem small { color: var(--muted); overflow-wrap: anywhere; }
.agacts { display: flex; gap: 4px; }
.agacts button { padding: 4px 8px; font-size: 12.5px; }
.agics { margin-top: 10px; font-size: 13px; }
.agics summary { cursor: pointer; font-weight: 600; }
.agics input[readonly] { width: 100%; padding: 7px 10px; border: 1px solid #cbd5e1; border-radius: 9px; font: inherit; font-size: 12px; margin-bottom: 6px; }
.check.dark { color: #475569; }
.fbform { border-bottom: 1px solid #e2e8f0; padding-bottom: 12px; margin-bottom: 10px; }
.fbform .dialogactions { margin-top: 0; }
.fbform .field small { font-weight: 400; color: var(--muted); float: right; }
.fbcats { display: flex; gap: 6px; margin-bottom: 10px; }
.fbcats button { flex: 1; background: #eef2f7; color: var(--ink); padding: 7px 6px; border-radius: 9px; }
.fbcats button.sel { background: var(--blue); color: #fff; font-weight: 600; }
.feedback .agbar { align-items: center; }
.feedback .agbar h3 { flex: 1; margin: 0; }
.feedback .pill { background: #e2e8f0; color: var(--ink); }
.fblist { display: flex; flex-direction: column; max-height: 42vh; overflow-y: auto; }
.fbitem { display: grid; grid-template-columns: 44px 1fr; gap: 10px; align-items: start; padding: 8px 2px; border-bottom: 1px solid #f1f5f9; font-size: 13.5px; }
.fbitem.mine { background: #f5f3ff; }
.fbitem p { margin: 0; overflow-wrap: anywhere; }
.fbitem small { display: block; color: var(--muted); font-size: 11.5px; margin-top: 2px; }
.fbreply { margin-top: 4px !important; color: #334155; font-style: italic; }
.fbvote { display: flex; flex-direction: column; align-items: center; gap: 0; padding: 4px 0; border-radius: 9px; background: #eef2f7; color: #475569; font-size: 12px; }
.fbvote i { font-style: normal; font-size: 11px; }
.fbvote.on { background: var(--blue); color: #fff; }
.fbvote:disabled { opacity: .55; }
.fbstatus { display: inline-block; border-radius: 999px; padding: 0 7px; font-size: 10.5px; font-weight: 600; background: #e2e8f0; color: #334155; }
.fbstatus.st-new { background: #dbeafe; color: #1e40af; }
.fbstatus.st-planned { background: #ede9fe; color: #5b21b6; }
.fbstatus.st-progress { background: #fef3c7; color: #92400e; }
.fbstatus.st-done { background: #d1fae5; color: #065f46; }
.fbbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.fbbar select { flex: 1; min-width: 110px; padding: 6px 8px; border-radius: 8px; border: 0; font: inherit; }
.fbexport { display: flex; gap: 4px; width: 100%; }
.fbexport a { flex: 1; text-align: center; padding: 6px 4px; border-radius: 8px; font-size: 12px; text-decoration: none; }
#editor .fblist { max-height: none; }
#editor .fbitem { grid-template-columns: 38px 1fr; border-color: rgba(255,255,255,.08); }
#editor .fbitem small { color: #a8b6d8; }
#editor .fbvote { background: rgba(255,255,255,.08); color: #c9d4ee; }
.fbctl { grid-column: 1 / -1; display: grid; grid-template-columns: 110px 1fr 32px; gap: 4px; }
.fbctl select, .fbctl input { min-width: 0; padding: 5px 7px; border-radius: 7px; border: 0; font: inherit; font-size: 12.5px; }
.fbctl button { padding: 4px 0; }
.fbstatus.st-asked { background: #dbeafe; color: #1e40af; }
.wishbtn { margin-top: 8px; }
.wiuses { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 10px; }
.feedback .field small { font-weight: 400; color: var(--muted); }

.skip { position: absolute; left: -9999px; top: 10px; z-index: 50; background: #fff; color: var(--ink); padding: 8px 14px; border-radius: 10px; font-weight: 600; }
.skip:focus { left: 10px; }
.prow:focus-visible { outline-offset: -2px; }
.chatlog .msg.near b { color: #047857; }
.chatlog .msg.action span { font-style: italic; }
.chatlog .msg.sys { color: var(--muted); font-size: 12.5px; }
.chatlog .msg.sys b { color: var(--ink); font-family: ui-monospace, monospace; font-size: 12px; }
.chatlog .msg .reacts { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: 4px; vertical-align: middle; }
.chatlog .msg .react, .chatlog .msg .radd, .chatlog .msg .rpick button { background: #f1f5f9; color: var(--ink); border: 1px solid transparent; border-radius: 999px; padding: 0 7px; font-size: 12px; line-height: 20px; }
.chatlog .msg .react.mine { background: #dbeafe; border-color: var(--blue-d); }
.chatlog .msg .radd { opacity: 0; margin-left: 4px; background: transparent; color: var(--muted); }
.chatlog .msg:hover .radd, .chatlog .msg .radd:focus-visible, body.touch .chatlog .msg .radd { opacity: 1; }
.chatlog .msg .rpick { display: flex; gap: 4px; margin-top: 3px; }
.chatlog .msg .rpick[hidden] { display: none; }
h3.dark { color: var(--muted); margin: 12px 0 4px; }
.access .keys { margin: 0; padding-left: 18px; font-size: 13px; color: #334155; display: flex; flex-direction: column; gap: 4px; }
.access kbd { background: #e2e8f0; color: var(--ink); }
.access .help.dark { margin: 4px 0 6px; }

.pad, .tacts { display: none; }
#stage { --tb: 20px; }
body.touch .pad { display: block; position: absolute; left: 20px; bottom: var(--tb); width: 128px; height: 128px; border-radius: 50%; background: rgba(15,23,42,.35); border: 2px solid rgba(255,255,255,.55); touch-action: none; z-index: 4; }
.knob { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: rgba(255,255,255,.88); box-shadow: 0 4px 12px rgba(0,0,0,.3); pointer-events: none; }
body.touch .tacts { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; position: absolute; right: 20px; bottom: var(--tb); z-index: 4; }
.tacts button { width: 58px; height: 58px; padding: 0; border-radius: 50%; font-size: 24px; background: rgba(15,23,42,.82); color: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.3); touch-action: manipulation; }
.tacts .tuse { width: auto; min-width: 128px; max-width: 220px; padding: 0 16px; border-radius: 29px; font-size: 15px; font-weight: 700; background: var(--blue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tacts .tuse:disabled { background: rgba(15,23,42,.6); opacity: .7; }
body.touch .chattoggle { display: none; }
body.touch .chat { bottom: var(--tb); }
body.touch.chatopen .pad { display: none; }
body.touch #toasts { bottom: calc(var(--tb) + 150px); }
body.touch .zoom button { width: 40px; height: 36px; }
body.touch .emotes button { padding: 8px 12px; }
body.touch .prow .act { width: 40px; height: 40px; }
body.editing .pad, body.editing .tacts { display: none !important; }
@media (max-width: 899px) {
  #stage { --tb: 104px; }
  body.touch .emotes { top: 64px; }
}

body.reduce-motion *, body.reduce-motion *::before, body.reduce-motion *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }

body.contrast { --muted: #334155; --line: #64748b; }
body.contrast .help, body.contrast h3, body.contrast .brand span, body.contrast .prow .sub, body.contrast .merole, body.contrast .palcat, body.contrast .forgeitem small, body.contrast .members small, body.contrast .tools.labeled button span, body.contrast #editor .field, body.contrast .check { color: #f1f5f9; }
body.contrast .feedback .fbitem small, body.contrast .help.dark, body.contrast .voice .prow .sub, body.contrast .check.dark, body.contrast h3.dark { color: #1e293b; }
body.contrast .ghost { background: rgba(255,255,255,.18); box-shadow: inset 0 0 0 1px rgba(255,255,255,.75); }
body.contrast .ghost.light { background: #fff; color: #000; box-shadow: inset 0 0 0 1.5px #0f172a; }
body.contrast .ghost.light.danger { color: #991b1b; }
body.contrast .tools button, body.contrast .pal button, body.contrast .modes button, body.contrast .marks button, body.contrast .prow .acts button, body.contrast .emotes button { box-shadow: inset 0 0 0 1px rgba(255,255,255,.6); }
body.contrast .empty { background: rgba(255,255,255,.14); color: #fff; }
body.contrast .empty.dark { background: #e2e8f0; color: #0f172a; }
body.contrast .card { box-shadow: 0 0 0 2px #0f172a; }
body.contrast .toast { background: #000; box-shadow: 0 0 0 2px #fff; }
body.contrast .toast.err { background: #7f1d1d; }
body.contrast .chatlog .msg small, body.contrast .quicklist small, body.contrast .jritem small, body.contrast .agitem small { color: #334155; }
body.contrast .chatlog .msg b { color: #1e3a8a; }
body.contrast .chatlog .msg .radd { opacity: 1; color: #334155; }
body.contrast .chatlog .msg.near b { color: #065f46; }
body.contrast input:not([type=checkbox]):not([type=range]), body.contrast select { box-shadow: inset 0 0 0 2px #0f172a; }
body.contrast .prow.lost, body.contrast .prow.away { opacity: .85; }
body.contrast .tacts button { background: #000; box-shadow: 0 0 0 2px #fff; }
body.contrast .tacts .tuse:not(:disabled) { background: #1e3a8a; }
body.contrast .pad { background: rgba(0,0,0,.6); border-color: #fff; }
body.contrast :focus-visible { outline: 3px solid #facc15 !important; outline-offset: 2px; }
body.contrast canvas#world:focus-visible { outline: 3px solid #facc15 !important; outline-offset: -3px; }
canvas#world:focus-visible { outline: none; }
body.editing canvas#world:focus-visible { outline: 3px solid #93c5fd; outline-offset: -3px; }
#editor .ghost.danger { color: #fca5a5; }

/* Éditeur et mode création : barre d'outils en bas du plan */
body.editing #app { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
body.editing #stage { grid-row: 1; grid-column: 1; }
body.editing #btn-menu { display: none !important; }
:is(#editor, #studio).dock:not([hidden]) { grid-row: 2; grid-column: 1; display: grid; grid-template-columns: 236px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 16px; height: clamp(230px, 36vh, 360px); padding: 10px 14px; overflow: hidden; border-top: 1px solid rgba(255,255,255,.12); box-shadow: 0 -10px 30px rgba(8,15,40,.35); z-index: 3; }
.dock .edside { display: flex; flex-direction: column; gap: 8px; min-height: 0; overflow-y: auto; }
.dock .edside .brand { padding-bottom: 8px; }
.dock .edside .edactions { margin-top: auto; }
.dock .edtabs { grid-template-columns: repeat(2, 1fr); }
.edtabs .edgroup { grid-column: 1 / -1; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: #7f8fb5; padding: 5px 6px 1px; }
.dock .edtabs button { text-align: left; padding: 6px 8px; }
.dock .edscroll { min-height: 0; overflow-y: auto; }
.dock .edplan { display: grid; grid-template-columns: minmax(250px, 330px) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 16px; overflow: hidden; }
.dock .edcol { display: flex; flex-direction: column; gap: 8px; min-height: 0; overflow-y: auto; padding-right: 4px; }
.dock .edmain { border-left: 1px solid rgba(255,255,255,.08); padding-left: 14px; }
:is(#editor, #studio).dock .pal { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }
.dock .edcols:not([hidden]) { display: block; columns: 260px; column-gap: 22px; }
.dock .edcols > * { break-inside: avoid; }
.dock .edcols section { margin-bottom: 10px; }
.dock .forgelist { max-height: none; }
.dock .tools.labeled { grid-template-columns: repeat(4, 1fr); }
.dock .tplsave { flex-direction: row; flex-wrap: wrap; align-items: center; }
.dock .tplsave input:not([type=checkbox]) { flex: 1; min-width: 140px; }
.roomitem.amb { grid-template-columns: 1fr 54px 104px 30px; }
#editor select { min-width: 0; }
#ed-pane-settings select { display: block; width: 100%; margin-top: 4px; padding: 7px 8px; border-radius: 8px; border: 0; font: inherit; }
body.editing #toasts { bottom: 16px; }
@media (max-width: 899px) {
  body.editing #side { display: none; }
  :is(#editor, #studio).dock:not([hidden]) { position: static; transform: none; width: auto; box-shadow: 0 -10px 30px rgba(8,15,40,.35); display: flex; flex-direction: column; height: 46dvh; overflow-y: auto; gap: 10px; }
  .dock .edside { overflow: visible; flex: none; }
  .dock .edside .edactions { margin-top: 0; }
  .dock .edplan { display: flex; flex-direction: column; overflow: visible; }
  .dock .edcol { overflow: visible; }
  .dock .edmain { border: 0; padding: 0; }
  .dock .edtabs { grid-template-columns: repeat(5, 1fr); }
  .dock .edtabs .edgroup { display: none; }
  .dock .edtabs button { text-align: center; padding: 6px 2px; }
}

/* Panneau audio : musique et ambiance */
.audiorow { display: flex; flex-direction: column; gap: 2px; padding-top: 8px; border-top: 1px solid var(--line); }
.audiorow .check { margin: 0; }
.musicnow { margin: 0 0 4px; font-size: 12.5px; color: #7c3aed; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 900px) { .voice.folded .audiorow { display: none; } }
@media (max-width: 899px) { .audiorow { grid-column: 1; border: 0; padding: 0; } .audiorow .check { display: none; } }

/* Jukebox */
.jukebox { width: min(560px, 100%); }
.jbnow { display: grid; grid-template-columns: 64px 1fr; gap: 6px 12px; align-items: center; padding: 10px; border-radius: 12px; background: linear-gradient(135deg, #f5f3ff, #eef2ff); margin-bottom: 8px; }
.jbnow > p { grid-column: 1 / -1; margin: 0; }
.jbtxt { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.jbtxt b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jbtxt small { color: var(--muted); }
.jbbar { height: 5px; border-radius: 3px; background: #ddd6fe; overflow: hidden; }
.jbbar i { display: block; height: 100%; width: 0; background: #7c3aed; transition: width .5s linear; }
.jbacts { grid-column: 1 / -1; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.jbacts button { padding: 5px 11px; }
.jbspot { margin-left: auto; font-size: 12.5px; color: #15803d; font-weight: 600; }
.jbcover { width: 36px; height: 36px; border-radius: 6px; object-fit: cover; display: grid; place-items: center; background: #ede9fe; flex: none; }
.jbnow .jbcover { width: 64px; height: 64px; font-size: 26px; }
.jbqueue { display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; }
.jbq { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.jbq span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jbq button { padding: 2px 8px; }
.jbsearch { display: flex; gap: 6px; margin: 6px 0; }
.jbsearch input, .jbfilter { flex: 1; min-width: 0; padding: 7px 10px; border: 1px solid #cbd5e1; border-radius: 9px; font: inherit; }
.jbfilter { width: 100%; margin-bottom: 6px; }
.jblist { display: flex; flex-direction: column; max-height: 28vh; overflow-y: auto; }
.jbrow { display: grid; grid-template-columns: 36px 1fr auto auto; gap: 8px; align-items: center; padding: 5px 2px; border-bottom: 1px solid #f1f5f9; }
.jbrow:has(> :nth-child(5)) { grid-template-columns: 36px 1fr auto auto auto; }
.jbrow > div { min-width: 0; display: flex; flex-direction: column; }
.jbrow b, .jbrow small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jbrow small { color: var(--muted); font-size: 12px; }
.jbrow button { padding: 4px 10px; }
.emotes .sep { width: 1px; background: rgba(255,255,255,.25); margin: 4px 2px; }
.selact { display: flex; flex-direction: column; gap: 5px; }
.selact select, .selact input, .actrow select, .actrow input { min-width: 0; padding: 5px 7px; border-radius: 8px; border: 0; font: inherit; font-size: 12.5px; }
.actrow { display: grid; grid-template-columns: minmax(0, 1fr) 120px 150px; gap: 4px 8px; align-items: center; padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,.06); font-size: 12.5px; color: #c9d4ee; }
.actrow span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.actrow small { color: #8fa0c8; }
.actrow input { grid-column: 1 / -1; }
.actrow.custom span::after { content: " ●"; color: #fbbf24; }
.volrow { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; color: #475569; margin: 2px 0 4px; }
.volrow input { width: 100%; }
.roomitem.amb .rmusic { grid-column: 1 / -1; }
@media (max-width: 899px) { .audiorow .volrow { display: none; } }
.ytbox { margin-top: 6px; border-radius: 8px; overflow: hidden; width: 200px; height: 112px; background: #000; }
.ytbox iframe { display: block; border: 0; }
.gmyt { position: relative; width: 200px; height: 112px; margin: 0 auto 8px; border-radius: 10px; overflow: hidden; }
.gmyt span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 40px; background: linear-gradient(135deg, #7c3aed, #2563eb); }

/* Annonces générales et mégaphone */
.sidetools > button { position: relative; }
.sidetools .badge { top: 0; right: 4px; font-style: normal; font-size: 10px; padding: 0 5px; background: var(--red); }
.sidetools .badge[hidden] { display: none; }
.announces { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 8; display: flex; flex-direction: column; gap: 8px; width: min(480px, calc(100% - 40px)); pointer-events: none; }
.announces > * { pointer-events: auto; }
.anbanner { background: #fff; color: var(--ink); border-left: 5px solid var(--blue); border-radius: 14px; padding: 10px 14px; box-shadow: 0 10px 30px rgba(0,0,0,.3); animation: pop .2s ease-out; }
.anbanner.k-pause { border-color: var(--amber); }
.anbanner.k-meeting { border-color: #8b5cf6; }
.anbanner.k-incident { border-color: var(--red); background: #fef2f2; }
.anhead { font-size: 12.5px; color: var(--muted); }
.anhead b { color: var(--ink); }
.antext { margin: 4px 0 8px; font-weight: 600; font-size: 15px; white-space: pre-line; overflow-wrap: anywhere; }
.anacts { display: flex; gap: 6px; }
.anacts button { padding: 5px 10px; font-size: 13px; }
.anlive { align-self: center; display: flex; gap: 10px; align-items: center; background: var(--red); color: #fff; font-weight: 600; padding: 6px 8px 6px 14px; border-radius: 999px; box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.anlive[hidden] { display: none; }
.anlive button { background: rgba(255,255,255,.22); color: #fff; padding: 4px 10px; border-radius: 999px; }
.anitem { grid-template-columns: 1fr; border-left: 4px solid var(--blue); padding-left: 8px; }
.anitem.k-pause { border-left-color: var(--amber); }
.anitem.k-meeting { border-left-color: #8b5cf6; }
.anitem.k-incident { border-left-color: var(--red); }
.anreads { cursor: help; }
body.reduce-motion .anbanner { animation: none; }
.voice .prow .pvol { flex: none; width: 70px; accent-color: var(--blue); }
@media (max-width: 899px) { .announces { top: 64px; } }
.spacectl .herald { display: flex; align-items: center; gap: 2px; margin-right: 4px; cursor: pointer; }

/* Téléphone : panneaux compacts, emotes repliées derrière le bouton 😀 */
#t-emo { display: none; }
@media (max-width: 899px) {
  #stage { --tb: 84px; }
  #btn-menu { width: 40px; height: 40px; font-size: 18px; }
  .mini { width: 112px; border-width: 2px; }
  .mini:not(.big) .zoom #zoom-in, .mini:not(.big) .zoom #zoom-out { display: none; }
  .mini header { padding: 3px 6px; font-size: 12px; }
  .voice { width: auto; max-width: 100%; padding: 6px 8px 6px 12px; border-radius: 16px; }
  .voice .vtitle, .voice .vtools, .voice .miclabel, .voice .michint, .voice .pttrow .check, .voice .audiorow { display: none; }
  .voice .pttrow:has(.talkbtn[hidden]) { display: none; }
  .voice .vsub { font-size: 12.5px; }
  .microw { grid-row: 1 / span 2; }
  .mic { width: 44px; height: 44px; }
  .mic svg { width: 22px; height: 22px; }
  body.touch .pad { left: 12px; width: 108px; height: 108px; }
  body.touch .tacts { right: 12px; gap: 8px; }
  .tacts button { width: 48px; height: 48px; font-size: 20px; }
  .tacts .tuse { min-width: 0; height: 48px; padding: 0 14px; font-size: 14px; border-radius: 24px; }
  .tacts .tuse:disabled { display: none; }
  body.touch #t-emo { display: block; }
  .emotes kbd { display: none; }
  body.touch .emotes { top: auto; bottom: calc(var(--tb) + 120px); left: 12px; right: 72px; flex-wrap: wrap; justify-content: center; }
  body.touch .emotes:not(.open) { display: none; }
  body.touch .emotes button { padding: 6px 8px; font-size: 22px; }
  body.touch .emotes .sep { display: none; }
  body.touch #toasts { bottom: calc(var(--tb) + 130px); }
}

.pipcover { display: none; }
body.pipopen .pipcover { display: flex; position: fixed; inset: 0; z-index: 30; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: var(--navy); color: #fff; font-size: 16px; }
body.pipopen #right, body.pipopen #emotes, body.pipopen .tacts, body.pipopen .pad { visibility: hidden; }

/* Catalogue de l'éditeur : catégories à gauche, objets rangés par catégorie à droite */
.catbar { display: flex; gap: 8px; align-items: center; }
.catbar input { flex: 1; min-width: 0; }
.catgrid { display: grid; grid-template-columns: minmax(200px, 250px) minmax(0, 1fr); gap: 18px; align-items: start; }
.catman { position: sticky; top: 0; display: flex; flex-direction: column; gap: 4px; }
.catman h3 { margin: 0 0 2px; }
.catrow { display: grid; grid-template-columns: minmax(0, 1fr) 26px 26px 26px 26px; gap: 3px; align-items: center; }
.catrow input, .catadd input { min-width: 0; padding: 5px 8px; border-radius: 8px; border: 1px solid transparent; background: rgba(255,255,255,.07); color: #fff; font: inherit; font-size: 12.5px; }
.catrow input:focus, .catadd input:focus { border-color: var(--blue); outline: none; background: rgba(255,255,255,.12); }
.catrow small { text-align: center; font-size: 11px; color: #8fa0c8; background: rgba(255,255,255,.06); border-radius: 999px; padding: 1px 0; }
.catrow .iconbtn { width: 26px; height: 26px; padding: 0; font-size: 12px; }
.catrow .iconbtn:disabled { opacity: .3; }
.catadd { display: grid; grid-template-columns: minmax(0, 1fr) 32px; gap: 4px; margin-top: 4px; }
.catobjs .help { margin: 0 0 4px; }
.catobjs .palcat { margin-top: 10px; padding-bottom: 3px; border-bottom: 1px solid rgba(255,255,255,.12); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; font-size: 10.5px; }
.catobjs .palcat:first-of-type { margin-top: 0; }
@media (max-width: 899px) { .catgrid { grid-template-columns: 1fr; } .catman { position: static; } .actrow { grid-template-columns: minmax(0, 1fr) 110px; } .actrow > select:last-of-type { grid-column: 1 / -1; } }

/* Mode création : outils avec raccourci, liste des raccourcis */
#st-tools { grid-template-columns: repeat(4, 1fr); }
#st-tools button { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 18px; padding: 6px 2px 5px; }
#st-tools button span { font-size: 11px; color: #c9d4ee; }
#st-tools button kbd { position: absolute; top: 3px; right: 4px; font-size: 9.5px; line-height: 14px; padding: 0 4px; color: #e2e8f0; }
.keylist { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; font-size: 11.5px; color: #c9d4ee; }
.keylist kbd { font-size: 10.5px; }

/* Étages, zones de pièces, minuteur, sondages, panneaux de liens, favoris de la palette */
.prow.st-focus .thumb::after { background: #0ea5e9; }
.floorbar { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.floorbar select, .floorbar input { min-width: 0; flex: 1 1 110px; padding: 5px 8px; border-radius: 8px; border: 1px solid transparent; background: rgba(255,255,255,.08); color: #fff; font: inherit; font-size: 12.5px; }
.floorbar select option { color: var(--ink); }
.floorbar .iconbtn { width: auto; min-width: 30px; height: 30px; padding: 0 6px; font-size: 12px; }
.floorbar .iconbtn:disabled { opacity: .35; }
.minifloors { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 8px 6px; }
.fchip { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,.1); color: #c9d4ee; }
.fchip.here { background: #60a5fa; color: var(--navy); font-weight: 600; }
.zonebar { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 5; max-width: calc(100% - 340px); background: rgba(16,27,61,.94); color: #fff; padding: 6px 8px 6px 14px; border-radius: 999px; display: flex; gap: 8px; align-items: center; font-size: 13px; font-weight: 600; box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.zonebar > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zonebar button, .zonebar select { background: rgba(255,255,255,.16); color: #fff; padding: 4px 10px; border-radius: 999px; border: 0; font: inherit; font-size: 12px; }
.zonebar select option { color: var(--ink); }
.zonetimer { background: #0ea5e9; color: #fff; padding: 2px 10px; border-radius: 999px; font-variant-numeric: tabular-nums; white-space: nowrap; }
#follow:not([hidden]) ~ .zonebar { top: 56px; }
body.editing .zonebar { display: none; }
.pal button { position: relative; }
.pal button .pstar { position: absolute; top: 1px; right: 3px; font-size: 13px; color: rgba(255,255,255,.45); cursor: pointer; line-height: 1; max-width: none !important; overflow: visible !important; }
.pal button .pstar.on { color: #fbbf24; }
.pal button .pnew { position: absolute; top: 2px; left: 2px; font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; background: #22c55e; color: #052e16; padding: 1px 4px; border-radius: 6px; max-width: none !important; }
.cats button.special { background: rgba(251,191,36,.14); color: #fde68a; }
.cats button.special.sel { background: #fbbf24; color: var(--navy); }
.sellinks { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.sellinks .help { margin: 0; }
.linkrow { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 3px 6px; border-radius: 8px; background: rgba(255,255,255,.07); font-size: 12px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.linkrow .iconbtn { width: 22px; height: 22px; padding: 0; font-size: 11px; flex: none; }
.linkform { display: grid; grid-template-columns: 52px 1fr; gap: 4px; }
.linkform select, .linkform input { min-width: 0; padding: 5px 7px; border-radius: 8px; border: 0; font: inherit; font-size: 12px; }
.linkform input[placeholder^="https"] { grid-column: 2; }
.linkform input:not([placeholder^="https"]), .linkform button { grid-column: 1 / -1; }
.pollbox { margin: 6px 0 2px; padding: 8px; border-radius: 10px; background: rgba(37,99,235,.08); border: 1px solid rgba(37,99,235,.25); display: flex; flex-direction: column; gap: 5px; width: 100%; }
.pollq { font-weight: 700; }
.pollbars { display: flex; flex-direction: column; gap: 4px; }
.pollbar { position: relative; display: flex; justify-content: space-between; gap: 8px; padding: 5px 8px; border-radius: 8px; background: #eef2f7; color: var(--ink); text-align: left; overflow: hidden; font-size: 12.5px; }
.pollbar i { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(37,99,235,.22); transition: width .3s; }
.pollbar span, .pollbar b { position: relative; }
.pollbar.mine { outline: 2px solid var(--blue); }
.pollbar.win i { background: rgba(34,197,94,.35); }
.pollbar:disabled { cursor: default; opacity: 1; }
.pollbox small { color: #64748b; }
.pollstop { align-self: flex-end; padding: 2px 10px; font-size: 12px; }
.plchoices { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.plchoice { display: flex; gap: 6px; }
.plchoice input { flex: 1; min-width: 0; padding: 8px 10px; border-radius: 9px; border: 1px solid #cbd5e1; font: inherit; }
.tmnow { font-size: 18px; font-weight: 700; text-align: center; padding: 8px; border-radius: 10px; background: #e0f2fe; color: #0c4a6e; font-variant-numeric: tabular-nums; margin-bottom: 6px; }
.lklist { display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow-y: auto; }
.lkitem { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; background: #f1f5f9; }
.lkicon { font-size: 22px; flex: none; }
.lkitem .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lkitem .txt a { font-weight: 700; color: var(--blue-d); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lkitem .txt small { color: #64748b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lkacts { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.lkacts button { padding: 4px 9px; font-size: 12px; }
@media (max-width: 899px) { .zonebar { max-width: calc(100% - 24px); top: 64px; flex-wrap: wrap; border-radius: 14px; } }
.roomitem.amb select[title^="Zone calme"] { grid-column: 1 / 3; }
.roomitem.amb input[type="number"] { grid-column: 3 / -1; }
.roomitem.amb select[title^="Zone calme"]:has(+ input[hidden]) { grid-column: 1 / -1; }
#chat-form #chat-poll { padding: 0 10px; }

/* Profils pro / perso, groupes et droits, comptes */
.ctxswitch { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.ctxswitch[hidden] { display: none; }
.ctxswitch button { padding: 4px 6px; border-radius: 8px; background: rgba(255,255,255,.08); color: #a8b6d8; font-size: 12px; }
.ctxswitch button.sel { background: var(--blue); color: #fff; }
.groups .gricon { font-size: 22px; text-align: center; }
.gritem.sel { background: #eff6ff; border-radius: 8px; }
.gritem .fbctl { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.gritem .fbctl button { padding: 3px 8px; font-size: 12px; }
.grform { display: grid; grid-template-columns: 1fr auto auto auto; gap: 6px; margin: 8px 0; }
.grhead { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.grhead input { flex: 1; min-width: 120px; }
.grinvite { display: flex; align-items: center; gap: 6px; padding: 6px 0; font-size: 13px; }
.grinvite span { flex: 1; }
.grinvite button { padding: 3px 8px; font-size: 12px; }
.grtable { display: flex; flex-direction: column; gap: 2px; overflow-x: auto; font-size: 12.5px; }
.grrow { display: grid; grid-template-columns: minmax(90px, 1fr) 112px repeat(6, 26px) 28px; align-items: center; gap: 4px; padding: 3px 0; border-bottom: 1px solid #f1f5f9; }
.grrow select { font-size: 12px; padding: 2px; }
.grrow input[type=checkbox] { justify-self: center; }
.grrow input.own { outline: 2px solid var(--amber, #f59e0b); outline-offset: 1px; }
.grrow button { padding: 1px 6px; }
.grhdr { font-weight: 600; color: var(--muted); }
.grperm { text-align: center; }
.grname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grmatrix { background: #f8fafc; font-style: italic; }
.accbox { display: flex; flex-direction: column; gap: 6px; padding: 8px 0 12px; border-bottom: 1px solid rgba(255,255,255,.1); margin-bottom: 8px; }
.accbox h3 { margin: 0; }
.accform { display: grid; grid-template-columns: 1fr 1fr auto; gap: 6px; }
.accsecret { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px; border-radius: 8px; background: rgba(245,158,11,.15); }
.accsecret[hidden] { display: none; }
.accsecret p { flex-basis: 100%; }
.accsecret code { flex: 1; word-break: break-all; user-select: all; }
.accline { display: flex; align-items: center; gap: 6px; }
.accline small { flex: 1; }
.acctag { font-size: 11px; color: #a8b6d8; }

/* Liens présentés comme des boutons, modules coupés par l'admin, appareils connectés du profil */
.btnlink { display: block; text-align: center; text-decoration: none; padding: 8px 12px; border-radius: 10px; }
.modoff { display: none !important; }
body.off-reactions .reacts, body.off-reactions .radd, body.off-reactions .rpick { display: none !important; }
.fbitem.session { grid-template-columns: 1fr auto; align-items: center; }
.fbitem.session .fbctx { display: block; color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
.setotp { display: flex; flex-direction: column; gap: 6px; }
.setotp .fbform { display: flex; gap: 6px; }
.setotp .fbform input { flex: 1; min-width: 0; }
.setotp .hkurl { font-size: 14px; letter-spacing: 1px; text-align: center; padding: 6px; }
#btn-admin { position: relative; }

/* Modèles de bâtiments et d'étages */
#ed-floor-tpl { max-width: 120px; }
.btpls { display: grid; gap: 6px; }
.btpl { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; background: rgba(255,255,255,.07); color: #fff; padding: 8px 10px; border-radius: 10px; }
.btpl:hover { background: rgba(255,255,255,.14); }
.btpl small { color: #a8b6d8; font-size: 11.5px; line-height: 1.35; }

/* Fréquentation */
.stbar { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; color: #c9d4ee; font-size: 12.5px; }
.stbar a { color: #93c5fd; }
.stbar a[hidden] { display: none; }
.stkpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 6px; }
.stkpi { background: rgba(255,255,255,.07); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.stkpi b { color: #fff; font-size: 17px; }
.stkpi span { color: #a8b6d8; font-size: 11.5px; }
.stgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px 18px; }
.stchart { display: flex; align-items: flex-end; gap: 2px; height: 130px; padding-bottom: 16px; }
.stcol { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; min-width: 0; }
.stcol i { display: block; width: 100%; min-height: 1px; background: #60a5fa; border-radius: 3px 3px 0 0; }
.stcol i.hot { background: #f59e0b; }
.stcol span { position: absolute; bottom: -16px; font-size: 9.5px; color: #a8b6d8; white-space: nowrap; }
.stcol:hover i { background: #93c5fd; }
.sthbars { display: flex; flex-direction: column; gap: 4px; }
.sthrow { display: grid; grid-template-columns: minmax(90px, 40%) 1fr auto; gap: 6px; align-items: center; font-size: 12px; color: #dbe4f7; }
.sthrow span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sthrow .track { height: 9px; background: rgba(255,255,255,.08); border-radius: 5px; overflow: hidden; }
.sthrow .track i { display: block; height: 100%; background: #34d399; border-radius: 5px; }
#ed-st-cold .track i { background: #f87171; }
.sthrow b { font-weight: 600; color: #fff; font-size: 11.5px; }

/* Historique des publications */
.hgrid { display: grid; grid-template-columns: minmax(220px, 1fr) 2fr; gap: 12px; min-height: 0; }
@media (max-width: 899px) { .hgrid { grid-template-columns: 1fr; } }
.histlist { display: flex; flex-direction: column; gap: 4px; }
.histrow { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; background: rgba(255,255,255,.06); color: #fff; padding: 7px 9px; border-radius: 9px; border: 2px solid transparent; }
.histrow small { color: #a8b6d8; font-size: 11.5px; }
.histrow.sel { border-color: #f59e0b; background: rgba(245,158,11,.12); }
.histdiff { display: flex; flex-direction: column; gap: 6px; color: #dbe4f7; font-size: 12.5px; }
.histdiff .hline { margin: 0; padding: 5px 8px; border-radius: 7px; background: rgba(255,255,255,.06); cursor: pointer; line-height: 1.4; }
.histdiff .hline.add { border-left: 3px solid #10b981; }
.histdiff .hline.del { border-left: 3px solid #dc2626; }
.histacts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }

/* Visite guidée */
.tourcard { position: absolute; left: 14px; top: 14px; z-index: 6; width: min(320px, calc(100% - 28px)); background: rgba(15,23,42,.94); color: #e2e8f0; border-radius: 14px; padding: 10px 12px; box-shadow: 0 10px 30px rgba(0,0,0,.35); border: 1px solid rgba(250,204,21,.5); display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.tourcard[hidden] { display: none; }
.tourcard header { display: flex; align-items: center; gap: 8px; }
.tourcard header b { flex: 1; }
.tourcard p { margin: 0; line-height: 1.4; }
.tourlist { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.tourlist li { color: #94a3b8; }
.tourlist li.cur { color: #fef08a; font-weight: 600; }
.tourlist li.done { color: #86efac; }
.tourguides { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.tourguides p { width: 100%; color: #cbd5e1; }
.tourbtns { display: flex; gap: 6px; justify-content: flex-end; }
.tourcard.folded > :not(header) { display: none; }
body.editing .tourcard { display: none; }
.tourglow { box-shadow: 0 0 0 3px #facc15, 0 0 18px 4px rgba(250,204,21,.65) !important; animation: tourglow 1.2s ease-in-out infinite; }
@keyframes tourglow { 50% { box-shadow: 0 0 0 3px #facc15, 0 0 6px 1px rgba(250,204,21,.3); } }
.reduce-motion .tourglow { animation: none; }
.axtour { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; padding-bottom: 8px; border-bottom: 1px solid rgba(15,23,42,.1); margin-bottom: 6px; }
@media (max-width: 899px) { .tourcard { top: 62px; } }
body.sidefold:not(.editing) .tourcard { top: 62px; }

/* Validation des assets */
.rvbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 6px; color: #dbe4f7; }
.rvlist { display: flex; flex-direction: column; gap: 12px; }
.rvcard { background: rgba(255,255,255,.06); border-radius: 12px; padding: 10px 12px; color: #dbe4f7; display: flex; flex-direction: column; gap: 8px; border-left: 4px solid #f59e0b; }
.rvcard.ok { border-left-color: #10b981; }
.rvcard.no { border-left-color: #dc2626; }
.rvcard header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rvcard header b { color: #fff; font-size: 14px; }
.rvcard header small { flex-basis: 100%; color: #a8b6d8; }
.rvchip { font-size: 11.5px; padding: 2px 8px; border-radius: 999px; background: rgba(245,158,11,.2); color: #fde68a; }
.rvchip.ok { background: rgba(16,185,129,.2); color: #a7f3d0; }
.rvchip.no { background: rgba(220,38,38,.25); color: #fecaca; }
.rvviews { display: flex; flex-direction: column; gap: 6px; overflow-x: auto; }
.rvcanvas { display: block; max-width: 100%; border-radius: 8px; }
.rvchecks { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; }
.rvchecks li.err { color: #fca5a5; }
.rvchecks li.warn { color: #fde68a; }
.rvchecks li.ok { color: #a7f3d0; }
.rvfiles { color: #94a3b8; font-size: 11.5px; }
.rvcard footer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rvcard footer small { flex: 1; color: #a8b6d8; min-width: 180px; }

/* Regarder ensemble et écran web */
.screenpanel header .tvlink { background: rgba(255,255,255,.14); color: #fff; padding: 3px 9px; font-size: 13px; border-radius: 10px; text-decoration: none; }
.screenpanel header button.sel { background: #f59e0b; color: #111827; }
.tvstage { position: relative; background: #000; aspect-ratio: 16 / 9; max-height: 50vh; width: 100%; }
.tvstage:fullscreen { max-height: none; }
.tvyt, .tvyt iframe, .tvstage video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tvaudio { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; margin: 0; padding: 12px; font-size: 16px; color: #e2e8f0; background: radial-gradient(circle at 50% 40%, #2b3a67, #0b1226); }
.tvunblock { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; }
.tvbar { display: flex; align-items: center; gap: 8px; padding: 5px 10px; font-size: 12px; color: #c9d4ee; }
.tvbar #tv-seek { flex: 1; min-width: 60px; }
.tvbar label { display: flex; align-items: center; gap: 4px; }
.tvbar #tv-vol { width: 70px; }
.screenpanel.folded .tvstage, .screenpanel.folded .webview, .screenpanel.folded .tvbar { display: none; }
.webview { position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: 50vh; overflow: hidden; background: #fff; }
.webview:fullscreen { max-height: none; }
.webview iframe { position: absolute; left: 0; top: 0; border: 0; transform-origin: 0 0; background: #fff; }
.webblock { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: #0b1226; color: #e2e8f0; padding: 12px; text-align: center; }
.webblock p { margin: 0; }
.webpanel p a { color: #93c5fd; }
.wtqueue { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.wtitem { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 8px; background: #f1f5f9; font-size: 13px; }
.wtitem span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wtitem button { padding: 2px 8px; }
.filebtn { display: inline-flex; align-items: center; cursor: pointer; padding: 8px 12px; border-radius: 10px; }
#wt-prog { width: 120px; }
.wdnow { word-break: break-all; }
#ed-web-domains { width: 100%; font: 12.5px ui-monospace, monospace; resize: vertical; }
.webpins { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #dbe4f7; }
.webpins div { display: flex; align-items: center; gap: 6px; }
.webpins span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Serveurs (bâtiments distincts) */
.worldbar { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 0 4px; }
.worldbar .wbtn { width: 38px; height: 38px; padding: 0; border-radius: 12px; font-size: 19px; background: rgba(255,255,255,.08); color: #fff; border: 2px solid transparent; transition: border-radius .15s; }
.worldbar .wbtn:hover { border-radius: 9px; background: rgba(255,255,255,.16); }
.worldbar .wbtn.sel { border-color: var(--blue); background: rgba(37,99,235,.28); border-radius: 9px; }
.worldbar .wbtn.add { font-size: 16px; color: #a8b6d8; background: transparent; border: 2px dashed rgba(255,255,255,.18); }
body.sidefold .worldbar { flex-direction: column; align-items: center; }
.worldsdlg section { display: flex; flex-direction: column; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid rgba(15,23,42,.1); margin-bottom: 8px; }
.worldsdlg section:last-child { border-bottom: 0; }
.wdlink { display: flex; gap: 6px; }
.wdlink input { flex: 1; min-width: 0; font-size: 12.5px; }
.wdqr { align-self: center; width: 200px; height: 200px; image-rendering: pixelated; border-radius: 10px; box-shadow: 0 2px 10px rgba(15,23,42,.15); }
.wdacts { display: flex; flex-wrap: wrap; gap: 6px; }
.wdacts [hidden] { display: none; }
.wdform { display: flex; flex-wrap: wrap; gap: 6px; }
.wdform input { flex: 1; min-width: 140px; }