.surfaces { position: fixed; top: 12px; right: 12px; bottom: 12px; width: min(380px, calc(100vw - 24px)); z-index: 60; display: flex; flex-direction: column; background: rgba(14,16,22,.92); backdrop-filter: blur(14px); color: #e8ecf4; border: 1px solid rgba(255,255,255,.09); border-radius: 16px; font: 14px/1.45 Inter, system-ui, sans-serif; }
.surfaces[hidden] { display: none; }
.surfaces header { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; font-weight: 600; }
.surfaces header button { all: unset; cursor: pointer; font-size: 20px; padding: 0 6px; }
.s-list { overflow: auto; padding: 0 12px 12px; display: grid; gap: 10px; }
.s-list section { background: rgba(255,255,255,.05); border-radius: 12px; padding: 12px; }
.s-list h6 { margin: 0 0 8px; font: 600 12px Inter, system-ui, sans-serif; color: #9fb0cc; }
.s-list footer { margin-top: 8px; font-size: 11px; color: #7d8aa3; }
.metrics { display: flex; flex-wrap: wrap; gap: 14px; }
.metrics div { display: grid; }
.metrics b { font-size: 22px; font-variant-numeric: tabular-nums; }
.metrics span { font-size: 12px; color: #9fb0cc; }
.bar { display: grid; grid-template-columns: 110px 1fr 56px; gap: 8px; align-items: center; margin: 5px 0; font-size: 12px; }
.bl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt { height: 8px; background: rgba(255,255,255,.07); border-radius: 4px; overflow: hidden; }
.bt i { display: block; height: 100%; background: linear-gradient(90deg,#4a8cff,#8fd0ff); border-radius: 4px; }
.bv { text-align: right; font-variant-numeric: tabular-nums; }
.tasks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tasks small { display: block; color: #8d9ab3; font-size: 12px; }
.md, .empty { margin: 0; }
.video { aspect-ratio: 16/9; }
.video iframe { width: 100%; height: 100%; border: 0; border-radius: 8px; }
.s-list img { max-width: 100%; border-radius: 8px; }
@media (max-width: 700px) { .surfaces { top: auto; left: 8px; right: 8px; bottom: 8px; width: auto; max-height: 62vh; } }
.brain-mini { position: fixed; left: 12px; bottom: 84px; width: 230px; height: 160px; z-index: 55; border-radius: 14px; overflow: hidden; background: #05070c; border: 1px solid rgba(255,255,255,.1); display: block; }
.brain-mini[hidden] { display: none; }
.vol { position: fixed; right: 14px; bottom: 90px; z-index: 50; display: flex; align-items: center; gap: 6px; padding: 4px 10px; background: rgba(14,16,22,.7); border-radius: 20px; }
.vol input { width: 92px; accent-color: #6aa6ff; }
.brain-page { margin: 0; height: 100dvh; background: radial-gradient(circle at 50% 45%, #0c1322, #05070c 70%); color: #e8ecf4; font: 14px Inter, system-ui, sans-serif; overflow: hidden; }
.brain-host { position: fixed; inset: 0; }
.brain-canvas { display: block; touch-action: none; }
.brain-head { position: fixed; top: 12px; left: 16px; right: 16px; display: flex; justify-content: space-between; }
.brain-head a { color: #bcd3ff; text-decoration: none; }
.brain-head span { color: #8d9ab3; }
.brain-log { position: fixed; right: 16px; bottom: 16px; width: min(280px, 60vw); pointer-events: none; }
.brain-log h6 { margin: 0 0 6px; color: #8d9ab3; font-size: 12px; font-weight: 600; }
.brain-log ol { list-style: none; margin: 0; padding: 0; }
.brain-log li { padding: 2px 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; animation: lit 2.4s ease-out; }
@keyframes lit { from { color: #fff; text-shadow: 0 0 10px #8fd0ff; } to { color: #c7d2e6; } }