/* Clurno — app layout only (grids, sizes, positions, show/hide). Generated once from the previous stylesheets; the look lives in app.css. */
/* from style.css */
.glass {
  position: relative;
}
.field { display: flex; flex-direction: column; gap: 8px; }
.input,
.textarea,
.select {
  width: 100%;
  height: 48px;
}
.textarea {
  height: auto;
  min-height: 140px;
  resize: vertical;
}
.select { cursor: pointer; }
.row { display: flex; align-items: center; gap: 12px; }
.col { display: flex; flex-direction: column; gap: 12px; }
.between { justify-content: space-between; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; }
.divider { height: 1px; }
@media (max-width: 960px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  white-space: nowrap;
}
.dot { width: 7px; height: 7px; flex-shrink: 0; }
.table { width: 100%; }
.table td { vertical-align: top; }
.table-wrap { overflow-x: auto; }
.meter { height: 4px; width: 100%; overflow: hidden; }
.meter > span { display: block; height: 100%; }
.overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
}
.modal {
  width: 100%;
  max-width: 460px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
}
.toasts {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 120;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: calc(100vw - 32px);
}
.toast { min-width: 260px; }
.typing { display: inline-flex; gap: 3px; align-items: center; }
.typing i { width: 4px; height: 4px; }
.scrollbar-none { scrollbar-width: none; }
.scrollbar-none::-webkit-scrollbar { display: none; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; white-space: nowrap;
}
[hidden] { display: none !important; }
.container { max-width: 1280px; }
.w-full { width: 100%; }
.nowrap { white-space: nowrap; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 560px) {
  .hide-sm { display: none !important; }
}
.shell { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }
.shell-side { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; z-index: 20; }
.shell-logo { position: relative; }
.shell-nav { display: flex; flex-direction: column; gap: 2px; position: relative; overflow-y: auto; }
.shell-key { width: 14px; }
.shell-foot { position: relative; }
.shell-main { min-width: 0; display: flex; flex-direction: column; }
.shell-top { position: sticky; top: 0; z-index: 15; display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 64px; }
.shell-top > * { position: relative; }
.shell-content { width: 100%; max-width: 1360px; }
@media (max-width: 900px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .shell-side { height: auto; flex-direction: row; align-items: center; gap: 16px; }
  .shell-logo { flex-shrink: 0; }
  .shell-nav { flex-direction: row; overflow-x: auto; scrollbar-width: none; }
  .shell-group, .shell-key, .shell-foot { display: none; }
  .shell-top { top: 57px; justify-content: flex-end; }
  .top-meta { display: none !important; }
}
.page-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; }
.page-head .lead { max-width: 640px; }
.panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; position: relative; }
.panel-body { position: relative; }
.panel-foot { position: relative; }
.empty { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.empty::before { width: 12px; height: 12px; }
.stat { display: flex; flex-direction: column; gap: 6px; }
.avatar { display: inline-grid; place-items: center; flex-shrink: 0; }
.status { display: inline-flex; align-items: center; gap: 8px; }
.office-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; }
.floor { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.room-head { display: flex; align-items: center; justify-content: space-between; position: relative; }
.desks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; position: relative; }
.desk { min-height: 136px; display: grid; place-items: center; }
.desk-bot { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; cursor: grab; }
.desk-bot.dragging { opacity: .35; }
.pixel-desk { position: relative; width: 64px; height: 46px; }
.pixel-desk .monitor { position: absolute; left: 10px; top: 0; width: 44px; height: 26px; }
.pixel-desk .stand { position: absolute; left: 30px; top: 26px; width: 4px; height: 6px; }
.pixel-desk .table { position: absolute; left: 0; right: 0; bottom: 0; height: 10px; }
.pixel-desk .scan { position: absolute; inset: 6px 6px auto; height: 2px; }
.pixel-desk .lines { position: absolute; left: 6px; right: 14px; top: 7px; height: 1px; }
.pixel-desk .cup { position: absolute; right: -6px; bottom: 10px; width: 8px; height: 9px; }
.feed { position: sticky; top: 88px; max-height: calc(100vh - 120px); display: flex; flex-direction: column; }
.feed-list { overflow-y: auto; position: relative; scrollbar-width: none; }
@media (max-width: 1100px) { .office-grid { grid-template-columns: minmax(0, 1fr); } .feed { position: relative; top: 0; max-height: 520px; } }
.card-link { display: flex; flex-direction: column; gap: 20px; cursor: pointer; }
.choice { display: flex; flex-direction: column; gap: 8px; cursor: pointer; min-height: 120px; }
.choice .sub { opacity: .6; }
.tabs { display: flex; overflow-x: auto; position: relative; scrollbar-width: none; }
.steps { display: flex; }
.steps li { flex: 1; }
.avatar-pick { width: 48px; height: 48px; cursor: pointer; }
.list-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.dropzone { cursor: pointer; }
.detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; align-items: start; }
@media (max-width: 1100px) { .detail-grid { grid-template-columns: minmax(0, 1fr); } }
.phone { display: flex; flex-direction: column; height: 620px; max-height: 78vh; }
.phone-head { display: flex; align-items: center; gap: 12px; position: relative; }
.phone-body { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; position: relative; scrollbar-width: none; }
.phone-form { display: flex; position: relative; }
.phone-form .input { flex: 1; }
.bubble { align-self: flex-start; max-width: 86%; position: relative; min-width: 72px; white-space: pre-wrap; word-break: break-word; }
.bubble.me { align-self: flex-end; }
.bubble .speaker { display: block; opacity: .7; }
.bubble .time { position: absolute; right: 8px; bottom: 3px; opacity: .45; }
.qr { position: relative; width: 168px; height: 168px; flex-shrink: 0; }
.qr canvas, .qr img { display: block; width: 144px !important; height: 144px !important; }
.qr .btn { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.meeting-stage { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px; align-items: start; }
.seat { display: flex; align-items: center; gap: 12px; position: relative; }
.turn { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; position: relative; }
.minutes { white-space: pre-wrap; }
@media (max-width: 900px) { .meeting-stage { grid-template-columns: minmax(0, 1fr); } }
.grid-2 > *, .grid-3 > *, .grid-4 > *, .detail-grid > *, .office-grid > *, .meeting-stage > *, .floor > * { min-width: 0; }
.mono { display: inline-grid; place-items: center; flex-shrink: 0; }
.bubble.system { align-self: center; }
.plan-list { display: flex; flex-direction: column; gap: 10px; }
.plan-list li { display: flex; gap: 10px; align-items: baseline; }
.plan-list li::before { width: 6px; height: 6px; flex-shrink: 0; transform: translateY(-2px); }
.ws-switch { position: relative; }
.ws-switch .select { min-width: 0; }
@media (max-width: 900px) { .ws-switch { width: 170px; flex-shrink: 0; } }
.goal-bar { display: flex; flex-direction: column; gap: 10px; }
.goal-form { width: 100%; }
.goal-form .input { min-width: 0; }
.goal-form .btn { flex-shrink: 0; }
@media (max-width: 640px) {
  .goal-form { flex-wrap: wrap; }
  .goal-form select { max-width: none !important; width: 100% !important; }
}
.o3d-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 0; }
.o3d-layout > * { min-width: 0; }
.o3d-slot { position: relative; height: 580px; }
.o3d-side { max-height: 580px; overflow-y: auto; }
@media (max-width: 1100px) {
  .o3d-layout { grid-template-columns: minmax(0, 1fr); }
  .o3d-side { max-height: none; }
  .o3d-slot { height: 460px; }
}
@media (max-width: 640px) { .o3d-slot { height: 380px; } }
.o3d { position: absolute; inset: 0; overflow: hidden; user-select: none; }
.o3d canvas { display: block; width: 100% !important; height: 100% !important; cursor: grab; }
.o3d canvas:active { cursor: grabbing; }
.o3d-overlay { position: absolute; inset: 0; pointer-events: none; }
.o3d-tag { position: absolute; left: 0; top: 0; width: 0; height: 0; will-change: transform; }
.o3d-bubble {
  position: absolute; bottom: 30px; left: 0; transform: translateX(-50%);
  width: max-content; max-width: 220px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.o3d-tag::before { position: absolute; left: -5px; bottom: 25px; width: 10px; height: 10px; transform: rotate(45deg); }
.o3d-tag.nobub::before, .o3d-tag.dim::before { display: none; }
.o3d-name { position: absolute; bottom: 0; left: 0; transform: translateX(-50%); white-space: nowrap; }
.o3d-tag.dim { opacity: .38; }
.o3d-tag.dim .o3d-bubble { display: none !important; }
.meetbar { display: flex; align-items: center; gap: 16px; }
.meetbar > * { min-width: 0; }
.sel-row { width: 100%; cursor: pointer; }
.thought { position: relative; }
.bar { height: 4px; position: relative; overflow: hidden; }
.bar > span { position: absolute; left: 0; top: 0; bottom: 0; }
.task-list { display: flex; flex-direction: column; }
.task { display: flex; gap: 12px; align-items: flex-start; }
.task-list.compact .task { align-items: center; }
.task-box { width: 12px; height: 12px; flex-shrink: 0; }
.task.skipped { opacity: .45; }
.worklog { display: flex; flex-direction: column; max-height: 320px; overflow-y: auto; }
.worklog li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 10px; }
.cv-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.2fr) 80px 40px; gap: 8px; align-items: center; }
@media (max-width: 640px) { .cv-row { grid-template-columns: minmax(0, 1fr) 70px 40px; } .cv-row > :nth-child(2) { grid-column: 1 / 2; grid-row: 2; } }
.skill-row { display: flex; align-items: center; gap: 12px; }
.skill-lvl { min-width: 64px; white-space: nowrap; }
.o3d-alert { display: none; position: absolute; left: -14px; bottom: 82px; width: 28px; height: 28px; }
.o3d-tag.cheer .o3d-alert { display: block; }
.o3d-tag.cheer .o3d-bubble { bottom: 118px; }
.o3d-tag.cheer::before { bottom: 113px; }
.ms { display: flex; flex-direction: column; gap: 6px; }
.ms-head { display: flex; align-items: center; gap: 10px; }
.ms-t { flex: 1; }
.trace { display: flex; flex-direction: column; }
.trace li { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px; }
.tr-t { word-break: break-word; }
.tr-src { display: block; }
.trace-btn { align-self: flex-start; height: 24px; }
.stm { display: flex; flex-direction: column; gap: 4px; }
.evstream { max-height: 360px; overflow-y: auto; }
.evstream li { display: grid; grid-template-columns: 64px 150px 64px minmax(0, 1fr); gap: 10px; }
.ev-text { word-break: break-word; }
@media (max-width: 640px) {
  .evstream li { grid-template-columns: 56px minmax(0, 1fr); }
  .evstream .ev-bot { display: none; }
  .evstream .ev-text { grid-column: 1 / -1; }
  .trace li { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
.tam th { white-space: nowrap; }
.o3d-board-hud {
  position: absolute;
  top: 14px;
  left: 14px;
  right: 14px;
  z-index: 100;
  pointer-events: auto;
}
.o3d-hud-row {
  align-items: center;
  gap: 12px;
}
.o3d-chips {
  display: flex;
  align-items: center;
}
.o3d-chip {
  cursor: pointer;
}
.o3d-note-detail {
  position: absolute;
  bottom: 18px;
  left: 18px;
  width: 360px;
  max-width: calc(100% - 36px);
  z-index: 110;
  pointer-events: auto;
}
.o3d-note-metric {
  display: inline-block;
}
.empty::before { width: 14px; height: 12px; }
.plan-list li::before { width: 7px; height: 7px; }
.plan-current { position: relative; }
/* from app-x.css */
.x-ico { display: inline-block; width: 9px; height: 9px; flex-shrink: 0; vertical-align: 0; }
.x-ico-dia { transform: rotate(45deg) scale(.85); }
.x-ok { display: inline-block; width: 9px; height: 9px; }
.x-war-hud { position: relative; overflow: hidden; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; }
.x-war-kpis { display: grid; grid-template-columns: repeat(4, minmax(110px, 1fr)); gap: 1px; }
.x-war-kpis > div { display: flex; flex-direction: column; gap: 6px; }
.x-ticker { max-height: 420px; overflow-y: auto; }
@media (max-width: 760px) { .x-war-kpis { grid-template-columns: 1fr 1fr; } }
.x-screens { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.x-screen, .x-replay { display: flex; flex-direction: column; }
.x-screen.idle { opacity: .6; }
.x-scr-bar { display: flex; align-items: center; gap: 10px; height: 30px; }
.x-scr-dots { display: inline-flex; gap: 5px; }
.x-scr-dots i { width: 8px; height: 8px; display: block; } .x-scr-dots i:nth-child(3) { transform: rotate(45deg) scale(.8); }
.x-scr-body { position: relative; height: 150px; overflow: hidden; }
.x-scr-url { height: 26px; display: flex; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.x-scr-lines { display: flex; flex-direction: column; gap: 8px; }
.x-scr-lines i { display: block; height: 6px; transform-origin: left; }
.x-scr-mail { display: flex; flex-direction: column; gap: 8px; }
.x-scr-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; }
.x-scr-grid i { height: 22px; }
.x-scr-grid i.on { opacity: .6; }
.x-scr-term { height: 100%; white-space: pre-wrap; }
.x-scr-idle { height: 100%; display: grid; place-items: center; }
.x-cursor { position: absolute; left: 30%; top: 40%; width: 12px; height: 16px; pointer-events: none; }
.x-inbox { display: grid; grid-template-columns: 340px minmax(0, 1fr); min-height: 520px; }
.x-inbox-list { overflow-y: auto; max-height: 640px; }
.x-mail { display: flex; flex-direction: column; gap: 6px; width: 100%; cursor: pointer; position: relative; }
.x-mail.unread .small:first-child::before { display: inline-block; width: 6px; height: 6px; vertical-align: 2px; }
.x-mail-body { white-space: pre-wrap; }
.x-cat { display: inline-flex; align-items: center; height: 20px; }
@media (max-width: 900px) { .x-inbox { grid-template-columns: minmax(0, 1fr); } .x-inbox-list { max-height: 320px; } }
.x-board { display: grid; grid-template-columns: repeat(5, minmax(220px, 1fr)); gap: 12px; overflow-x: auto; }
.x-col { display: flex; flex-direction: column; gap: 10px; min-height: 360px; }
.x-col-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.x-deal { position: relative; display: flex; flex-direction: column; gap: 6px; cursor: grab; }
.x-deal.dragging { opacity: .4; }
.x-score { min-width: 30px; height: 22px; display: inline-grid; place-items: center; }
.x-sev { display: inline-flex; align-items: center; height: 20px; }
.x-replay-body { position: relative; height: 300px; overflow: hidden; }
.x-replay-body .x-scr-lines i { height: 9px; }
.x-replay-cap { display: flex; align-items: center; gap: 16px; }
.x-rp-card { display: inline-flex; align-items: center; gap: 12px; }
.x-rp-plan { display: flex; flex-direction: column; gap: 14px; max-width: 420px; }
.x-rp-plan > div { display: flex; align-items: center; gap: 10px; }
.x-rp-plan i { display: block; height: 8px; }
.x-rp-done { height: 100%; display: grid; place-items: center; }
.x-tl { max-height: 360px; overflow-y: auto; }
.x-lvl { display: flex; flex-direction: column; gap: 14px; }
.x-call-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; }
.x-tile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 190px; }
.x-call-grid { position: relative; z-index: 0; }
.x-code { position: relative; }
.x-code pre { white-space: pre-wrap; word-break: break-word; }
.x-code .btn { position: absolute; top: 10px; right: 10px; }
.vw-select { position: relative; display: inline-block; min-width: 0; }
.vw-select > select { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.vw-select-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; height: 48px; cursor: pointer;
}
.vw-select-trigger > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vw-select-caret { width: 8px; height: 6px; flex-shrink: 0; }
.vw-select.is-open .vw-select-caret { transform: rotate(180deg); }
.vw-select-menu {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 100%; max-width: min(420px, 92vw); max-height: 320px; overflow: auto; z-index: 200;
  opacity: 0; transform: translateY(-6px); pointer-events: none;
}
.vw-select.align-right .vw-select-menu { left: auto; right: 0; }
.vw-select.is-open .vw-select-menu { opacity: 1; transform: none; pointer-events: auto; }
.list-row { position: relative; }
.task.done .task-box { transform: rotate(45deg) scale(.85); }
.panel ul:not([class]) { display: flex; flex-direction: column; gap: 8px; }
.panel ul:not([class]) > li { position: relative; }
.panel ul:not([class]) > li::before { position: absolute; left: 2px; top: .55em; width: 7px; height: 7px; }
.x-gbtn { min-height: 44px; display: flex; justify-content: center; }
.x-otp { display: flex; align-items: center; gap: 6px; }
.x-otp-gap { width: 10px; height: 2px; flex-shrink: 0; }
.x-otp-box {
  flex: 1 1 0; min-width: 0; height: 58px;
}
@media (max-width: 420px) { .x-otp-box { height: 48px; } .x-otp { gap: 4px; } }
.modal.glass { overflow: visible; }
.modal.glass > div { max-height: calc(100vh - 32px); overflow-y: auto; }
.vw-select-menu.is-floating {
  position: fixed; z-index: 3000; right: auto; bottom: auto;
  opacity: 0; transform: translateY(-6px); pointer-events: none;
}
.vw-select-menu.is-floating.is-open { opacity: 1; transform: none; pointer-events: auto; }
.x-mp-list { max-height: min(56vh, 520px); overflow-y: auto; }
.x-mp-group { display: flex; flex-direction: column; }
.x-mp-group .vw-select-group { position: sticky; top: 0; z-index: 1; }
.x-mp-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; }
.x-mp-item span { word-break: break-all; }
.x-mp-item small { flex-shrink: 0; }
.x-model { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 0; }
.x-room-tpls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; }
.x-room-tpls .choice { min-height: 74px; }
.x-room-canvas { cursor: crosshair; }
.x-room-canvas svg { display: block; }
.x-ri { cursor: pointer; }
.x-room-sw { display: inline-block; width: 10px; height: 10px; }
@media (max-width: 640px) { .x-room-tpls { grid-template-columns: 1fr 1fr; } }
.x-vhead { display: flex; align-items: center; gap: 12px; }
.x-vext { min-width: 44px; height: 26px; display: inline-grid; place-items: center; }
.x-cu-card { min-height: 230px; }
.x-cu-cmd { justify-content: flex-start; white-space: normal; word-break: break-all; height: auto; }
.x-cu-live { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.x-cu-screen { position: relative; aspect-ratio: 1280 / 800; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.x-cu-screen img { width: 100%; height: 100%; object-fit: contain; display: block; }
.x-cu-url { position: absolute; left: 0; right: 0; bottom: 0; }
.x-cu-result { max-height: 260px; overflow: auto; }
.x-cu-steps { max-height: 340px; overflow: auto; }
@media (max-width: 900px) { .x-cu-live { grid-template-columns: 1fr; } }
.x-int-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0; }
.x-int-card { gap: 10px; cursor: pointer; min-height: 132px; }
.x-int-conns { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.x-int-steps { display: flex; flex-direction: column; gap: 10px; }
.x-int-steps li { position: relative; }
.x-int-steps li::before { position: absolute; left: 0; top: 1px; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; }
#view.view-in > * { will-change: opacity, transform; }
.vw-select-search { position: sticky; top: -6px; z-index: 1; }
.vw-select-search input { width: 100%; height: 36px; }
body.o3d-max-on { overflow: hidden; }
.o3d-max-wrap { position: fixed; inset: 0; z-index: 95; display: flex; flex-direction: column; }
.o3d-max-wrap > .o3d-layout { flex: 1 1 auto; min-height: 0; }
.o3d-max { height: 100%; grid-template-rows: minmax(0, 1fr); }
.o3d-max .o3d-slot { height: 100%; min-height: 320px; }
.o3d-max .o3d-side { max-height: none; height: 100%; }
@media (max-width: 1100px) { .o3d-max { grid-template-rows: minmax(0, 1fr) auto; } .o3d-max .o3d-side { height: auto; max-height: 40vh; } }
.o3d-side { overflow-x: hidden; }
.space-layout { grid-template-columns: minmax(0, 1fr) 420px; height: clamp(560px, calc(100vh - 250px), 960px); }
.space-layout .o3d-slot { height: 100%; }
.space-2d { display: grid; gap: 0; }
.space-2d > .floor { overflow: auto; }
.space-side { display: flex; flex-direction: column; max-height: none; height: 100%; overflow: hidden; }
.space-side > [data-live="spaceHead"] { flex: 0 0 auto; max-height: 46%; overflow-y: auto; }
.space-side > [data-live="spaceHead"]:last-child { max-height: none; flex: 1 1 auto; }
.space-chat { flex: 1 1 auto; min-height: 0; display: flex; }
.space-chat .phone { flex: 1; height: auto; max-height: none; }
.space-team { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: thin; }
.space-dot { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 64px; max-width: 76px; cursor: pointer; }
.space-dot .xs { max-width: 100%; }
.space-unread { position: absolute; top: 4px; right: 8px; min-width: 16px; height: 16px; }
.space-goal summary { cursor: pointer; }
.space-cta { display: flex; align-items: center; gap: 24px; }
.space-cta > .col { flex: 1 1 auto; }
.space-cta-dots { display: flex; }
.o3d-tag.says .o3d-bubble { max-width: 260px; white-space: normal; }
@media (max-width: 1100px) {
  .space-layout { grid-template-columns: minmax(0, 1fr); height: auto; }
  .space-layout .o3d-slot { height: 52vh; min-height: 320px; }
  .space-side { height: auto; }
  .space-chat .phone { height: 560px; }
  .space-cta { flex-wrap: wrap; }
}
.o3d-max.space-layout { height: 100%; }
.space-chat .phone-head { display: none; }
.act-ms { display: flex; align-items: center; gap: 8px; align-self: center; max-width: 92%; }
.act-ms-i { flex: 0 0 auto; width: 16px; height: 16px; display: inline-grid; place-items: center; }
.act-ms .time, .act-run .time { opacity: .55; white-space: nowrap; }
.act-run { align-self: stretch; }
.act-run > summary { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.act-run > summary::-webkit-details-marker { display: none; }
.act-dot { width: 6px; height: 6px; flex: 0 0 auto; }
.act-steps { display: flex; flex-direction: column; gap: 6px; }
.act-step { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 8px; }
.act-t { word-break: break-word; }
.act-head { display: flex; align-items: center; gap: 10px; }
.act-pulse { position: relative; width: 8px; height: 8px; flex: 0 0 auto; }
.act-pulse::after { position: absolute; inset: -4px; }
.o3d-act { display: none; position: absolute; bottom: 22px; left: 0; transform: translateX(-50%); white-space: nowrap; align-items: center; gap: 6px; overflow: hidden; }
.o3d-tag.working .o3d-act { display: inline-flex; }
.o3d-act-i { width: 16px; height: 16px; display: inline-grid; place-items: center; }
.o3d-act-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; }
.o3d-tag.working .o3d-bubble { bottom: 52px; }
.o3d-tag.working::before { bottom: 47px; }
.o3d-tag.working .o3d-name { bottom: -2px; }
.o3d-pop { position: absolute; left: 0; bottom: 60px; transform: translateX(-50%); white-space: nowrap; max-width: 240px; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.hire-bar { position: sticky; top: 64px; z-index: 5; display: flex; flex-direction: column; gap: 12px; }
.hire-bar .input { height: 48px; }
.hire-depts { display: flex; flex-wrap: wrap; gap: 6px; }
.hire-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1px; }
.hire-card { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.hire-card .btn { flex: 0 0 auto; }
.hire-custom { flex-direction: row; align-items: center; gap: 20px; }
body.wb-on { overflow: hidden; }
.wb { position: fixed; inset: 0; z-index: 98; display: flex; flex-direction: column; }
.wb-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.wb-tools { gap: 6px; align-items: center; }
.wb-sep { width: 1px; height: 24px; }
.wb-zoomv { min-width: 44px; }
.wb-viewport { position: relative; flex: 1; overflow: hidden; cursor: grab; }
.wb-viewport:active { cursor: grabbing; }
.wb-stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.wb-item { position: absolute; display: flex; flex-direction: column; gap: 6px; cursor: grab; user-select: none; }
.wb-item.dragging { cursor: grabbing; z-index: 5; }
.wb-grip { display: flex; align-items: center; gap: 6px; min-height: 20px; }
.wb-del { width: 22px; height: 22px; cursor: pointer; opacity: 0; }
.wb-colors { display: inline-flex; gap: 3px; opacity: 0; }
.wb-colors button { width: 14px; height: 14px; cursor: pointer; }
.wb-text, .wb-cap { width: 100%; resize: vertical; cursor: text; user-select: text; }
.wb-note { min-height: 170px; }
.wb-note .wb-text { flex: 1; min-height: 120px; }
.wb-label .wb-text { min-height: 44px; }
.wb-image img { display: block; width: 100%; height: auto; pointer-events: none; }
.wb-cap { min-height: 22px; }
.wb-file-head { display: flex; gap: 10px; align-items: center; }
.wb-file-ico { width: 40px; height: 48px; flex: 0 0 auto; display: grid; place-items: center; }
.wb-file-text { max-height: 64px; overflow: hidden; }
.wb-node { width: 240px; min-height: 170px; }
.wb-node-desc { flex: 1; }
.wb-links { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.wb-links path { opacity: .75; }
.wb-empty { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 1100px; display: flex; flex-direction: column; gap: 16px; }
.wb-drop { position: absolute; inset: 16px; display: none; place-items: center; pointer-events: none; }
.wb.wb-dragover .wb-drop { display: grid; }
@media (max-width: 700px) { .wb-sep { display: none; } }
.wb-text[readonly], .wb-cap[readonly] { cursor: grab; }
.vx-ring { position: fixed; top: 14px; left: 14px; z-index: 130; width: min(340px, calc(100vw - 28px)); }
.vx-ring-top { display: flex; align-items: center; gap: 14px; }
.vx-ring-av { position: relative; flex: 0 0 auto; }
.vx-ring-av i { position: absolute; inset: -4px; pointer-events: none; }
.vx-ring-why { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.vx-ring-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vx-ring-btns button { height: 40px; cursor: pointer; }
.vx-hb { position: fixed; top: 14px; left: 14px; z-index: 125; display: flex; align-items: center; gap: 10px; max-width: min(420px, calc(100vw - 28px)); }
.vx-hb-dot { width: 8px; height: 8px; flex: 0 0 auto; }
.vx-hb-btn { flex: 0 0 auto; }
.hire-card:hover { position: relative; z-index: 1; }
.vx-rip-wrap { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.vx-rip { position: absolute; opacity: .14; transform: scale(0); }
.vw-num { display: inline-flex; align-items: stretch; height: 44px; max-width: 100%; }
.vw-num .input { height: 100%; min-width: 0; width: 100%; }
.vw-num-btn { flex: 0 0 34px; cursor: pointer; }
.vw-select-menu { transform-origin: top center; }
body.route-space .shell-content { max-width: none; }
html.route-space, body.route-space .shell-main, body.route-space { overflow: hidden; }
.space-full { display: grid; grid-template-columns: minmax(0, 1fr) 420px; height: calc(100vh - 64px); height: calc(100dvh - 64px); min-height: 480px; }
.space-stage { position: relative; min-width: 0; min-height: 0; }
.space-slot { position: absolute; inset: 0; height: auto !important; }
.space-floor { position: absolute; inset: 0; overflow: auto; }
.space-hud { position: absolute; left: 14px; right: 14px; top: 12px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; pointer-events: none; z-index: 3; }
.space-hud > * { pointer-events: auto; }
.space-hud .meetbar { max-width: min(640px, 100%); }
.space-side2 { display: flex; flex-direction: column; min-height: 0; }
.space-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.space-body-meeting, .space-body-call { overflow-y: auto; }
.space-body > [data-live="spaceHead"] { flex: 0 0 auto; max-height: 40%; overflow-y: auto; }
.space-body > [data-live="spaceHead"]:last-child { max-height: none; flex: 1 1 auto; }
.space-body .space-chat { flex: 1 1 auto; min-height: 0; display: flex; }
.space-meet .meeting-stage { grid-template-columns: 1fr; }
.space-call { display: flex; flex-direction: column; }
.space-call-tiles { display: flex; gap: 8px; overflow-x: auto; }
.space-call-tiles .x-tile { min-width: 76px; gap: 6px; }
.space-call-log { flex: 1 1 auto; min-height: 160px; max-height: none; }
.space-max { position: fixed; inset: 0; z-index: 95; height: 100vh; height: 100dvh; }
@media (max-width: 1000px) {
  html.route-space, body.route-space .shell-main, body.route-space { overflow: auto; }
  .space-full { grid-template-columns: minmax(0, 1fr); height: auto; }
  .space-stage { height: 58vh; min-height: 340px; }
  .space-side2 { min-height: 560px; }
  .space-hint { display: none; }
}
.call-card { align-self: stretch; display: flex; flex-direction: column; gap: 10px; }
.call-card-top { display: flex; gap: 10px; align-items: center; }
.call-card-ico { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; }
.call-card-who { display: flex; align-items: center; gap: 4px; }
.call-card-av { display: inline-flex; }
.call-card-av.speaking { transform: translateY(-3px); }
.call-card .time { align-self: flex-end; opacity: .55; }
.vx-hb-btn { cursor: pointer; }
.rate { display: inline-flex; gap: 2px; opacity: .45; }
.rate[data-under] { align-self: flex-start; }
.phone-body > *:hover + .rate, .rate:hover, .rate.rated, .act-ms:hover .rate { opacity: 1; }
.rate-btn { width: 26px; height: 22px; cursor: pointer; }
.lv-badge { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; }
.lv-bar { height: 4px; overflow: hidden; }
.lv-bar i { display: block; height: 100%; }
.space-body-files { overflow-y: auto; }
.space-vault .x-vhead { display: none; }
.o3d::after { position: absolute; inset: 0; pointer-events: none; }
.mb-how { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; }
.mb-how > div { display: flex; flex-direction: column; gap: 6px; }
.mb-n { width: 24px; height: 24px; display: inline-grid; place-items: center; flex: 0 0 auto; }
.mb-list { display: flex; flex-direction: column; }
.mb-row { display: grid; grid-template-columns: minmax(180px, 260px) 1fr; gap: 18px; align-items: center; }
.mb-row.open { align-items: start; }
.mb-dot { display: flex; gap: 12px; align-items: center; min-width: 0; }
.mb-right { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: flex-end; }
.mb-state { display: inline-flex; align-items: center; gap: 8px; }
.mb-state.ok .mb-check { width: 20px; height: 20px; display: grid; place-items: center; }
.mb-pulse { width: 8px; height: 8px; }
.mb-finish { display: flex; gap: 14px; align-items: center; }
.mb-finish .qr { width: 168px; height: 168px; flex: 0 0 auto; }
.mb-wizard { display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: 560px; }
.mb-step { display: flex; gap: 12px; align-items: flex-start; }
@media (max-width: 760px) { .mb-how { grid-template-columns: 1fr; } .mb-row { grid-template-columns: 1fr; } .mb-right { justify-content: flex-start; } }
.gv-list { display: flex; flex-direction: column; }
.gv-row { display: grid; grid-template-columns: minmax(170px, 230px) 1fr; gap: 18px; }
.gv-who { display: flex; gap: 12px; align-items: center; min-width: 0; align-self: start; }
.gv-sets { display: flex; flex-direction: column; gap: 10px; }
.gv-set { display: grid; grid-template-columns: 48px 1fr; gap: 10px; align-items: start; }
@media (max-width: 760px) { .gv-row { grid-template-columns: 1fr; } }
.vo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.vo-card { display: flex; flex-direction: column; gap: 14px; }
.md { display: flex; flex-direction: column; gap: 6px; overflow-wrap: anywhere; }
.md-gap { height: 4px; }
.md-ul, .md-ol { display: flex; flex-direction: column; gap: 5px; }
.md-ul > li { position: relative; }
.md-ul > li::before { position: absolute; left: -12px; top: .62em; width: 5px; height: 5px; opacity: .55; }
.minutes .md { gap: 8px; }
.bubble .md, .minutes .md, .turn .md { white-space: normal; }
.dt-list { display: flex; flex-direction: column; gap: 6px; }
.dt-item { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; cursor: pointer; }
.dt-pair { display: inline-flex; }
.dt-live { display: inline-flex; align-items: center; gap: 6px; }
.dt-live i { width: 7px; height: 7px; }
.dt-view { display: flex; flex-direction: column; gap: 12px; }
.dt-head { display: flex; gap: 12px; align-items: center; }
.dt-msgs { display: flex; flex-direction: column; gap: 10px; }
.dt-msg { display: flex; gap: 8px; align-items: flex-end; }
.dt-msg.r { flex-direction: row-reverse; }
.dt-msg .bubble { max-width: 82%; }
.dt-read { height: 24px; }
.side-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.shell-label { white-space: nowrap; }
html.side-min .shell { grid-template-columns: 76px minmax(0, 1fr); }
html.side-min .side-top { flex-direction: column; gap: 14px; }
html.side-min .logo-text, html.side-min .shell-label, html.side-min .shell-group, html.side-min .ws-switch, html.side-min .shell-foot label, html.side-min .shell-foot p, html.side-min .shell-foot .tag, html.side-min .shell-foot .col.grow { display: none !important; }
html.side-min .shell-nav { gap: 4px; }
html.side-min .shell-key { width: auto; }
html.side-min .shell-foot { display: flex; flex-direction: column; align-items: center; }
html.side-min .shell-foot .row { justify-content: center; }
@media (max-width: 900px) { html.side-min .shell { grid-template-columns: minmax(0, 1fr); } }
.tabs { flex-wrap: wrap; overflow: visible; }
html.side-min .shell-key { width: 22px; }
.mb-row2 { display: grid; grid-template-columns: minmax(170px, 220px) 1fr; gap: 18px; align-items: start; }
.mb-cell { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; min-width: 0; }
.mb-cell .mb-finish { flex-direction: column; align-items: flex-start; }
.mb-cell .mb-finish .qr { width: 150px; height: 150px; }
.mb-wa-setup summary { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; cursor: pointer; }
.mb-wa-setup summary::-webkit-details-marker { display: none; }
.mb-wa-steps { display: flex; flex-direction: column; gap: 12px; }
.mb-kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; align-items: center; }
.mb-copy { display: flex; gap: 6px; align-items: center; min-width: 0; }
.mb-copy code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 960px) { .mb-row2 { grid-template-columns: 1fr; } .mb-kv { grid-template-columns: 1fr; } }
.mb-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.mb-chip { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.mb-chip-i { width: 20px; height: 20px; display: inline-grid; place-items: center; }
.mb-cell .mb-kv { width: 100%; }
.mb-team { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.mb-team .mb-wizard { width: 100%; }
.mb-team .mb-finish .qr { width: 160px; height: 160px; }
.mb-pick2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; width: 100%; }
.mb-chan { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.mb-chan .mb-chip-i { width: 32px; height: 32px; flex: none; }
.mb-dotgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.mb-dotc { display: flex; align-items: center; gap: 10px; min-width: 0; }
.perm-slot { position: relative; }
.perm-slot:empty { display: none; }
.perm-card { display: flex; flex-direction: column; gap: 12px; position: relative; overflow: hidden; }
.perm-top { display: flex; gap: 12px; align-items: flex-start; }
.perm-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.arc-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.arc-search { display: flex; flex: 1 1 320px; min-width: 0; }
.arc-search .input { flex: 1; min-width: 0; }
.arc-bar .vw-select { min-width: 180px; }
.vw-select > select.arc-dot { min-width: 0; width: 100%; }
.arc-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 20px; align-items: start; }
.arc-list { max-height: calc(100vh - 260px); overflow: auto; }
.arc-row { display: flex; align-items: center; gap: 12px; width: 100%; cursor: pointer; }
.arc-ico { width: 30px; height: 30px; flex: none; display: grid; place-items: center; }
.arc-people { display: flex; flex: none; }
.arc-time { flex: none; width: 48px; }
.arc-hit { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arc-sum { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arc-detail { display: flex; flex-direction: column; gap: 14px; }
.arc-placeholder { min-height: 220px; align-items: center; justify-content: center; }
.arc-minutes { display: flex; flex-direction: column; gap: 6px; }
.arc-turns { display: flex; flex-direction: column; gap: 14px; max-height: calc(100vh - 420px); min-height: 160px; overflow: auto; }
.arc-turn { display: flex; gap: 10px; align-items: flex-start; }
.arc-you { width: 28px; height: 28px; flex: none; display: grid; place-items: center; }
@media (max-width: 1100px) { .arc-grid { grid-template-columns: 1fr; } .arc-grid.has-open .arc-list { display: none; } .arc-list, .arc-turns { max-height: none; } }
@media (max-width: 640px) { .arc-people { display: none; } }
.att-list { display: flex; flex-direction: column; gap: 8px; }
.att-card { display: flex; align-items: center; gap: 10px; min-width: 0; }
.att-card.gone { opacity: .6; }
.att-ext { flex: none; width: 38px; height: 38px; display: grid; place-items: center; }
.att-name { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; align-items: flex-start; cursor: pointer; }
.att-name b { max-width: 100%; }
.att-dl { flex: none; }
.att-preview { max-height: 62vh; overflow: auto; }
.att-preview pre { white-space: pre-wrap; word-break: break-word; }
.att-table { overflow: auto; }
.att-table table { min-width: 100%; }
.att-table th, .att-table td { white-space: nowrap; }
.fx-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.fx-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; cursor: pointer; min-width: 0; }
.fx-tile b { max-width: 100%; }
.fx-tile .ellipsis { max-width: 100%; }
.fx-tile-top { position: relative; display: inline-flex; }
.fx-tile-badge { position: absolute; right: -10px; bottom: -6px; width: 22px !important; height: 16px !important; }
.fx-ico-folder { position: relative; display: inline-block; width: 30px; height: 22px; flex: none; }
.fx-ico-folder::before { position: absolute; left: 0; top: -4px; width: 45%; height: 5px; }
.fx-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.fx-crumbs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0; }
.fx-crumb { cursor: pointer; }
.fx-q { width: 220px; }
.fx-table { display: flex; flex-direction: column; }
.fx-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) 72px 100px 150px 150px; gap: 12px; align-items: center; min-width: 0; }
.fx-folder { cursor: pointer; }
.fx-ico { width: 34px; height: 34px; display: grid; place-items: center; }
.fx-row .fx-ico-folder { width: 30px; height: 22px; }
.fx-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fx-acts { display: flex; gap: 4px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
@media (max-width: 900px) { .fx-row { grid-template-columns: 34px minmax(0, 1fr) auto; } .fx-col { display: none; } .fx-q { width: 100%; } }
.md-table { overflow-x: auto; max-width: 100%; }
.md-table th, .md-table td { vertical-align: top; }
.fx-ico.fx-ico-folder { width: 30px; height: 22px; }
.fx-tile-top > .fx-ico.fx-ico-folder { width: 40px; height: 30px; }
.fx-pick { display: flex; flex-direction: column; max-height: 50vh; overflow: auto; }
.fx-pick-row { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.fx-pick-row .fx-ico.fx-ico-folder { width: 22px; height: 16px; }
body.route-full .shell-content { max-width: none; }
html.route-full, body.route-full .shell-main, body.route-full { overflow: hidden; }
.ibx { display: flex; flex-direction: column; height: calc(100vh - 64px); height: calc(100dvh - 64px); min-height: 420px; }
.ibx-top { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.ibx-acct { gap: 8px; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ibx-filter { overflow-x: auto; }
.ibx-main { flex: 1; min-height: 0; display: grid; grid-template-columns: 360px minmax(0, 1fr); }
.ibx-list { min-height: 0; overflow-y: auto; }
.ibx-list .x-mail { position: relative; }
.ibx-detail { min-height: 0; overflow-y: auto; }
.ibx-mail { max-width: 900px; }
.ibx-empty { height: 100%; display: grid; place-items: center; }
.ibx-connect { display: flex; flex-direction: column; gap: 24px; max-width: 620px; }
.ibx-ul { display: flex; flex-direction: column; gap: 8px; }
@media (max-width: 900px) {
  html.route-full, body.route-full .shell-main, body.route-full { overflow: auto; }
  .ibx { height: auto; } .ibx-main { grid-template-columns: 1fr; } .ibx-list { max-height: 320px; }
}
html.side-min .ws-del { display: none; }
.ibx-filter { display: flex; gap: 4px; }
.ibx-tab { display: inline-flex; align-items: center; gap: 8px; height: 36px; white-space: nowrap; cursor: pointer; }
.ibx-tab.on .ibx-count { opacity: .7; }
.ibx-dot { width: 8px; height: 8px; flex: none; }
.ibx-chip { display: inline-flex; align-items: center; gap: 6px; }
.ibx-chip::before { width: 8px; height: 8px; }
.ibx-main { grid-template-columns: 400px minmax(0, 1fr); }
.x-mail.ibx-row { display: flex; flex-direction: row; align-items: flex-start; gap: 12px; }
.ibx-av { flex: none; width: 36px; height: 36px; display: grid; place-items: center; }
.ibx-av-lg { width: 48px; height: 48px; }
.ibx-row-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.ibx-row-top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.ibx-row-foot { display: flex; gap: 12px; align-items: center; }
.ibx-st { display: inline-flex; align-items: center; gap: 6px; }
.ibx-mail { max-width: 860px; display: flex; flex-direction: column; gap: 22px; }
.ibx-mhead { display: flex; gap: 16px; align-items: flex-start; }
.ibx-body { white-space: pre-wrap; word-break: break-word; max-height: none; }
.ibx-link { display: inline-block; }
.ibx-reply { display: flex; flex-direction: column; gap: 12px; }
.ibx-reply-head { display: flex; align-items: center; gap: 10px; }
.ibx-draft { min-height: 220px; }
.ibx-empty-ico { opacity: .35; }
.ibx-connect { max-width: 720px; gap: 20px; }
.ibx-provs { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.ibx-prov { display: flex; align-items: center; gap: 14px; min-height: 76px; cursor: pointer; }
.ibx-prov svg { flex: none; }
.ibx-prov-ico { width: 26px; height: 26px; display: grid; place-items: center; flex: none; }
.ibx-step { display: flex; gap: 14px; align-items: flex-start; }
.ibx-big { height: 56px !important; gap: 12px; justify-content: center; width: 100%; }
.ibx-in { height: 52px; }
@media (max-width: 1100px) { .ibx-main { grid-template-columns: 320px minmax(0, 1fr); } }
@media (max-width: 900px) { .ibx-main { grid-template-columns: 1fr; } }
.ibx-top > .row:first-child { flex-wrap: wrap; }
.ibx-box { display: inline-flex; align-items: stretch; height: 32px; max-width: 260px; }
.ibx-box-main { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; min-width: 0; }
.ibx-box-x { width: 28px; cursor: pointer; }
.ibx-add { height: 32px !important; }
.ibx-to { min-width: 0; }
.ibx-body { white-space: normal; }
.ibx-text { white-space: pre-wrap; word-break: break-word; }
.ibx-quote > summary { cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.ibx-quote > summary::-webkit-details-marker { display: none; }
.ibx-row-foot { flex-wrap: nowrap; min-width: 0; }
.ibx-row-foot .ibx-chip, .ibx-st { white-space: nowrap; flex: none; }
.ibx-to { flex: 1 1 0; }
.ibx-row.unread .ibx-row-top b::before { display: inline-block; width: 7px; height: 7px; vertical-align: 1px; }
.ibx-mail { max-width: 980px; }
.ibx-access { display: flex; flex-direction: column; max-height: 60vh; overflow: auto; }
.ibx-access-row { display: grid; grid-template-columns: minmax(120px, 180px) minmax(0, 1fr); gap: 14px; align-items: center; }
.role-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2px; }
.role-card { display: flex; flex-direction: column; gap: 8px; }
/* from flat.css */
@property --vx-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
/* from calm.css */
.shell { grid-template-columns: 232px minmax(0, 1fr); }
.shell-nav { gap: 4px; }
.shell-ico { display: inline-flex; width: 22px; height: 22px; flex: 0 0 auto; }
.shell-ico svg { width: 22px; height: 22px; }
.side-user { display: flex; align-items: center; gap: 12px; }
.side-user .avatar { width: 36px; height: 36px; flex: 0 0 auto; }
.side-guest { flex-direction: column; align-items: stretch; gap: 10px; }
.side-logout { cursor: pointer; }
html.side-min .shell { grid-template-columns: 80px minmax(0, 1fr); }
html.side-min .side-logout, html.side-min .side-guest .faint { display: none; }
#top-meta { overflow-x: auto; scrollbar-width: none; }
#top-meta::-webkit-scrollbar { display: none; }
.subnav { display: flex; gap: 4px; flex: 0 0 auto; }
.subnav-link { display: inline-flex; align-items: center; height: 38px; white-space: nowrap; }
body.route-space .shell-content, body.route-full .shell-content { max-width: none !important; }
@media (max-width: 900px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .ws-switch, .side-user { display: none; }
  .shell-nav { flex-direction: row; gap: 2px; }
  .shell-settings .shell-label { display: none; }
  .subnav-link { height: 34px; }
  .shell-side .logo-text { display: none; }
}
@media (max-width: 600px) {
  /* (top actions stay visible on phones; app.css trims them) */
}
/* from controls.css */

/* ---------- spacing carried over for parts app.css leaves alone ---------- */
.card { padding: 28px; }
.pad { padding: 24px; }
.container { margin: 0 auto; padding: 0 24px; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.stack-lg > * + * { margin-top: 24px; }
.section { padding: 0 0 140px; }
.shell-group { padding: 16px 12px 6px; }
.feed-list { margin: 0; padding: 0; }
.task-list { margin: 0; padding: 0; }
.skill-row { padding: 8px 0; }
.ms { margin-bottom: 14px; }
.ms:last-child { margin-bottom: 0; }
.tr-k { padding-top: 2px; }
.tr-src { margin-top: 2px; }
.stm { padding: 10px 12px; }
.o3d-board-hud {
  padding: 10px 14px;
}
.o3d-note-detail {
  padding: 18px 20px;
}
.o3d-note-metric {
  padding: 3px 8px;
}
.x-screens { padding: 24px 28px; }
.x-scr-body { padding: 12px; }
.x-scr-mail > span { padding-bottom: 6px; }
.x-scr-term { margin: 0; padding: 10px; }
.x-scr-foot { padding: 8px 10px; }
.x-inbox { margin-bottom: 24px; }
.x-mail-body { margin: 0; }
.x-col-head { padding: 2px 2px 8px; }
.x-clause { margin: 0; padding: 12px 14px; }
.x-clause mark { padding: 0 2px; }
.x-replay-body { padding: 28px; }
.x-replay-cap { padding: 14px 18px; }
.x-rp-card { padding: 16px 20px; }
.x-tl { margin: 0; padding: 0; }
.x-lvl { padding: 24px; }
.x-mp-list { margin-top: 12px; }
.x-vault { padding: 0; }
.x-vhead { padding: 14px 18px; }
.x-cu-live { padding: 24px 28px; }
.x-cu-url { padding: 6px 10px; }
.x-cu-result { padding: 8px 0 8px 14px; }
.x-int-steps { margin: 0; padding: 0; padding: 16px 18px; }
.x-int-steps li { padding-left: 30px; }
.o3d-max-wrap { margin: 0 !important; padding: 16px 20px 20px; }
.space-goal summary { padding: 4px 0; }
.space-goal[open] summary { margin-bottom: 8px; }
.act-steps { margin: 0; padding: 4px 10px 10px; }
.act-k { padding-top: 1px; }
.act-head { padding: 9px 10px 4px; }
.act-now { padding: 2px 10px 10px; }
.wb-sep { margin: 0 4px; }
.wb-label { padding: 4px 6px; }
.wb-image { margin: 0; }
.wb-file-text { margin: 0; }
.wb-cat { padding: 2px 6px; }
.wb-metric { margin-left: auto; padding: 2px 6px; }
.wb-node-desc { margin: 0; }
.vx-ring-why { margin: 12px 0 14px; }
.space-floor { padding: 72px 20px 20px; }
.rate[data-under] { margin: -4px 0 4px 2px; }
.act-ms .rate { margin-left: 6px; }
.o3d-pop-level { padding: 7px 14px; }
.mb-state { margin-right: auto; }
.mb-finish { padding: 10px; }
.md-p { margin: 0; }
.md-ol { margin: 0; padding: 0 0 0 18px; }
.md-hr { margin: 6px 0; }
.steps-run code { padding: 1px 4px; }
.dt-pair > *:nth-child(2) { margin-left: -8px; }
.dt-out { padding: 12px 14px; }
.dt-empty { padding: 4px 0 8px; }
.mb-cell { padding: 12px 14px; }
.mb-cell .mb-state { margin-right: 0; }
.mb-wa-setup { margin-bottom: 24px; padding: 18px 22px; }
.mb-wa-steps { margin: 14px 0 0; padding-left: 20px; }
.mb-kv { margin-top: 8px; }
.mb-copy code { padding: 7px 10px; }
.mb-note { padding: 8px 12px; }
.mb-switch { margin-top: 2px; }
.mb-imsg { margin: 14px 4px 0; }
.mb-team { padding: 20px 28px 24px; }
.mb-dotgrid { padding: 16px 28px 24px; }
@media (max-width: 960px) { .mb-team, .mb-dotgrid { padding-left: 16px; padding-right: 16px; } }
.arc-bar { margin-bottom: 20px; }
.arc-day { padding: 16px 28px 6px; }
.arc-people > * { margin-left: -6px; }
.arc-hit { padding: 2px 6px; }
.arc-empty { padding: 24px 28px; }
.arc-minutes { padding: 14px 16px; }
.arc-turns { padding-right: 6px; }
@media (max-width: 640px) { .arc-day, .arc-empty { padding-left: 16px; padding-right: 16px; } }
.att-list { margin-top: 10px; }
.att-preview { padding: 18px 20px; }
.att-preview pre { margin: 0; }
.att-table th, .att-table td { padding: 6px 10px; }
.fx { padding: 0; }
.fx-tiles { padding: 24px 28px; }
.fx-empty { padding: 28px; }
@media (max-width: 900px) { .fx-tiles { padding-left: 16px; padding-right: 16px; } }
.fx-pick-row { padding: 10px 14px; }
.ibx-filter { padding: 10px 24px; }
.ibx-mail { padding: 24px 28px; }
.ibx-empty { padding: 24px; }
.ibx-connect { padding: 32px; }
.ibx-ul { margin: 0; padding-left: 18px; }
.ibx-form { padding: 20px; }
@media (max-width: 900px) { .ibx-filter { padding-left: 16px; padding-right: 16px; }
}
.ibx-count { padding: 1px 6px; }
.ibx-tab.on .ibx-count { padding: 0; }
.ibx-row-foot { margin-top: 4px; }
.ibx-mail { padding: 28px 32px 40px; }
.ibx-msubj { margin: 0; }
.ibx-body { padding: 22px 24px; }
.ibx-link { padding: 0 6px; }
.ibx-connect { padding: 36px 32px; }
.ibx-h { margin: 0; }
.ibx-form { padding: 22px; }
@media (max-width: 900px) { .ibx-mail { padding: 20px 16px; } .ibx-connect { padding: 20px 16px; } }
.ibx-quote { margin-top: 18px; padding-top: 12px; }
.ibx-quote > summary { padding: 6px 10px; }
.ibx-quote > .ibx-text { margin-top: 12px; padding-left: 14px; }
.ibx-access-row { padding: 12px 0; }
.role-grid { padding: 20px 28px 24px; }