:root {
  --bg: #060a14;
  --card: rgba(16, 29, 60, 0.72);
  --line: #283c6b;
  --text: #e8eefc;
  --muted: #8fa3cc;
  --accent: #5274ff;
  --ok: #31d17e;
  --warn: #ffb020;
  --radius: 16px;
  --ease: cubic-bezier(.22,.61,.36,1);
}
* { box-sizing: border-box; min-width: 0; -webkit-touch-callout: none; }
html { background: #060a14; min-height: 100%; }
body { margin: 0; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); color: var(--text); font: 15px/1.45 system-ui, sans-serif; min-height: 100vh; background: transparent; overflow-x: hidden; -webkit-font-smoothing: antialiased; -webkit-user-select: none; user-select: none; }
textarea, input, .chat-container { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
img { -webkit-user-drag: none; user-drag: none; pointer-events: none; }

body::before {
  content: ""; position: fixed; inset: -20%; z-index: -2; pointer-events: none;
  background: radial-gradient(circle at 15% 20%, rgba(0,255,170,.22), transparent 40%), radial-gradient(circle at 85% 15%, rgba(0,200,255,.22), transparent 45%), radial-gradient(circle at 50% 80%, rgba(120,0,255,.25), transparent 50%), linear-gradient(180deg, #060a14 0%, #0a1226 60%, #060a14 100%);
  background-size: 200% 200%; animation: auroraShift 28s ease-in-out infinite alternate;
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background: radial-gradient(ellipse at 70% 30%, rgba(82,116,255,.18), transparent 50%), radial-gradient(ellipse at 30% 70%, rgba(0,255,200,.12), transparent 55%);
  mix-blend-mode: screen;
}
@keyframes auroraShift { 0% { background-position: 0% 0%, 100% 0%, 50% 100%, 0% 0%; } 100% { background-position: 100% 100%, 0% 100%, 50% 0%, 100% 100%; } }

.fireflies { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.firefly { position: absolute; background: #fff; border-radius: 50%; box-shadow: 0 0 10px 2px rgba(82,116,255,.8); opacity: 0; animation: fly linear infinite; }
@keyframes fly { 0% { transform: translate3d(0,0,0) scale(0); opacity: 0; } 20% { opacity: .85; transform: translate3d(20px,-30px,0) scale(1); } 100% { transform: translate3d(0,-110px,0) scale(0); opacity: 0; } }

.wrap { max-width: 1080px; margin: 0 auto; padding: 30px 16px 80px; position: relative; z-index: 1; }
.top { display: flex; align-items: center; gap: 14px; margin-bottom: 30px; }
.logo { font-weight: 800; font-size: 24px; text-shadow: 0 0 15px rgba(82,116,255,.6); }
.logo:hover { text-shadow: 0 0 20px rgba(82,116,255,.9); }
.top-actions { margin-left: auto; display: flex; gap: 10px; }

.card { background: var(--card); backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,.06); border-radius: var(--radius); padding: 20px; margin-bottom: 20px; box-shadow: 0 10px 30px rgba(0,0,0,.4); animation: cardIn .5s var(--ease) both; }
.card.auth { max-width: 520px; margin: 100px auto; }
@keyframes cardIn { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
#auth-form { animation: none !important; }

.chat-card.dim { opacity: 1; filter: none; }
.chat-card.dim textarea, .chat-card.dim .btn, .chat-card.dim .emoji-btn { opacity: .45; cursor: not-allowed; }
.typing-indicator { min-height: 22px; padding: 3px 8px; color: var(--muted); font-size: 12px; opacity: 0; transition: opacity .2s ease; }
.typing-indicator.visible { opacity: 1; }
.chat-image { display:block; max-width:180px; max-height:180px; width:auto; height:auto; object-fit:cover; border-radius:10px; cursor:zoom-in; border:1px solid var(--line); transition: filter .15s; pointer-events: auto; }
.chat-image:hover { filter: brightness(1.1); }
.download-card { border:1px solid var(--line); border-radius:14px; padding:14px; background:rgba(10,18,38,.65); }
.bottom-actions { display:flex; justify-content:center; align-items:center; gap:10px; flex-wrap:wrap; margin:20px 0 calc(14px + env(safe-area-inset-bottom)); }
.manual-strip { max-width:980px; margin:0 auto; padding-bottom:calc(24px + env(safe-area-inset-bottom)); }
.manual-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.manual-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:10px; }
.manual-block { position:relative; min-height:150px; padding:18px 14px 14px; border:1px solid var(--line); border-radius:12px; background:linear-gradient(145deg,rgba(16,29,60,.86),rgba(7,13,28,.9)); overflow:hidden; }
.manual-block::after { content:""; position:absolute; inset:auto -20px -35px auto; width:90px; height:90px; border:1px solid rgba(82,116,255,.22); transform:rotate(45deg); }
.manual-index { display:inline-flex; width:30px; height:30px; align-items:center; justify-content:center; border:1px solid var(--accent); border-radius:5px; color:#aebdff; font-weight:800; font-size:12px; margin-bottom:8px; }
.manual-block h3 { margin:0 0 7px; font-size:15px; }
.manual-block p { margin:0; color:var(--muted); font-size:13px; }

.btn { background: linear-gradient(135deg, #6f8cff, #5274ff); color: #fff; border: 0; border-radius: 12px; padding: 12px 20px; font-weight: 700; cursor: pointer; transition: transform .15s; }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.small { padding: 8px 14px; font-size: 13px; }
.btn.ghost { background: transparent; border: 1px solid var(--line); color: var(--text); }
.btn.danger { background: linear-gradient(135deg, #ff5a6a, #cc2a3a); }
.btn.update { background: linear-gradient(135deg, #ffb020, #ff7a00); color: #101020; }

input, textarea { font: inherit; color: var(--text); background: rgba(0,0,0,.3); border: 1px solid var(--line); border-radius: 10px; padding: 12px; outline: none; width: 100%; margin-bottom: 10px; }
input:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(82,116,255,.15); }

.tabs { display: flex; gap: 8px; margin-bottom: 20px; background: rgba(0,0,0,.2); padding: 6px; border-radius: 12px; overflow-x: auto; }
.tab { flex: 1 0 auto; padding: 10px; border-radius: 8px; border: 0; background: transparent; color: var(--muted); font-weight: 600; cursor: pointer; white-space: nowrap; }
.tab.on { background: linear-gradient(135deg, #6f8cff, #5274ff); color: #fff; }

.main-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.main-grid > * { min-width: 0; }
.pair-lamps { display:flex; gap:20px; flex-wrap:wrap; justify-content:center; align-items:flex-start; min-width:0; }
.pair-stack { display:flex; flex-direction:column; gap:12px; min-width:0; }
.pair-visuals { display:flex; gap:20px; justify-content:center; align-items:center; margin:10px 0 15px; min-width:0; }

.lamp-card { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 280px; }
.lamp-card.disabled .ctrl { opacity: .3; pointer-events: none; filter: grayscale(1); }

.lamp-visual { position: relative; width: 100px; height: 130px; margin: 10px 0; }
.lamp-visual img { width: 100%; height: 100%; object-fit: contain; position: absolute; z-index: 2; }
.glass-mask { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; -webkit-mask-image: url('/lamp-glass.png'); mask-image: url('/lamp-glass.png'); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }

.glass-mask.lit { filter: drop-shadow(0 0 10px var(--hue-color)) brightness(calc(1 + var(--bri) * .4)); }
.glass-mask.lit.mode-solid { background: var(--hue-color); animation: lampBreatheSolid 3.6s ease-in-out infinite alternate; }
@keyframes lampBreatheSolid { from { filter: drop-shadow(0 0 6px var(--hue-color)) brightness(calc(.85 + var(--bri) * .3)); } to { filter: drop-shadow(0 0 20px var(--hue-color)) brightness(calc(1.05 + var(--bri) * .4)); } }
.glass-mask.lit.mode-rainbow { background: linear-gradient(0deg, red, orange, yellow, lime, cyan, blue, magenta, red); background-size: 100% 200%; animation: rainbowShift 4s linear infinite; }
@keyframes rainbowShift { 0% { background-position: 0% 0%; filter: drop-shadow(0 0 12px #ff0066); } 100% { background-position: 0% 200%; filter: drop-shadow(0 0 12px #ff0066); } }
.glass-mask.lit.mode-fire { background: linear-gradient(0deg, #ff2a00, #ff8c00, #ffd000); background-size: 100% 200%; animation: fireShift 1.6s ease-in-out infinite alternate; }
@keyframes fireShift { 0% { background-position: 0% 0%; } 100% { background-position: 0% 100%; } }
.glass-mask.lit.mode-police { background: linear-gradient(0deg, #ff0033 0%, #ff0033 50%, #0044ff 50%, #0044ff 100%); background-size: 100% 200%; animation: policeFlash 1.2s steps(1, end) infinite; }
@keyframes policeFlash { 0%,49% { filter: drop-shadow(0 0 22px #ff0033); background-position: 0% 0%; } 50%,100% { filter: drop-shadow(0 0 22px #0044ff); background-position: 0% 100%; } }
.glass-mask.lit.mode-aurora { background: linear-gradient(0deg, #00ffaa, #00ccff, #aa00ff, #00ffaa); background-size: 100% 300%; animation: auroraSlide 5s linear infinite; }
@keyframes auroraSlide { 0% { background-position: 0% 0%; } 100% { background-position: 0% 300%; } }
.glass-mask.lit.mode-comet { background: radial-gradient(circle at 50% 100%, var(--hue-color) 0%, transparent 35%); background-size: 100% 200%; animation: cometSweep 1.5s linear infinite; }
@keyframes cometSweep { 0% { background-position: 50% 120%; } 100% { background-position: 50% -120%; } }
.glass-mask.lit.mode-pulse { background: linear-gradient(0deg, var(--hue-color) 0%, transparent 40%, var(--hue-color) 100%); background-size: 100% 200%; animation: pulseGlow 1.1s ease-in-out infinite alternate; }
@keyframes pulseGlow { from { background-position: 0% 0%; filter: drop-shadow(0 0 0 transparent) brightness(.6); } to { background-position: 0% 100%; filter: drop-shadow(0 0 26px var(--hue-color)) brightness(1.3); } }
.glass-mask.lit.mode-wave { background: linear-gradient(0deg, var(--hue-color) 0%, transparent 40%, var(--hue-color) 60%, transparent 100%); background-size: 100% 200%; animation: waveSlide 2s linear infinite; }
@keyframes waveSlide { 0% { background-position: 0% 0%; } 100% { background-position: 0% 200%; } }
.glass-mask.lit.mode-strobe { background: linear-gradient(0deg, var(--hue-color), var(--hue-color)); background-size: 100% 100%; animation: strobeFlash .7s steps(2, end) infinite; }
@keyframes strobeFlash { 0%,49% { opacity: 1; filter: drop-shadow(0 0 18px var(--hue-color)); background-position: 0% 0%; } 50%,100% { opacity: .05; filter: none; } }
.glass-mask.lit.mode-breath { background: linear-gradient(0deg, var(--hue-color) 0%, transparent 50%, var(--hue-color) 100%); background-size: 100% 200%; animation: breathSoft 2.8s ease-in-out infinite alternate; }
@keyframes breathSoft { from { background-position: 0% 0%; filter: drop-shadow(0 0 0 transparent) brightness(.3); } to { background-position: 0% 100%; filter: drop-shadow(0 0 22px var(--hue-color)) brightness(1.2); } }

.glass-mask.lit.mode-silence { background: radial-gradient(ellipse at 50% 100%, #4a2a00 0%, #1a0e00 70%, #000 100%); animation: silenceGlow 8s ease-in-out infinite alternate; }
@keyframes silenceGlow { from { filter: brightness(.55) drop-shadow(0 0 4px #6b3a00); } to { filter: brightness(.75) drop-shadow(0 0 8px #8a4a00); } }
.glass-mask.lit.mode-rain { background: linear-gradient(180deg, transparent 0%, transparent 20%, #4ab8ff 20.1%, #4ab8ff 22%, transparent 22.1%, transparent 40%, #4ab8ff 40.1%, #4ab8ff 42%, transparent 42.1%, transparent 60%, #4ab8ff 60.1%, #4ab8ff 62%, transparent 62.1%, transparent 80%, #4ab8ff 80.1%, #4ab8ff 82%, transparent 82.1%); background-size: 100% 100%; animation: rainShift 1.2s linear infinite; }
@keyframes rainShift { 0% { background-position: 0 0; } 100% { background-position: 0 80%; } }
.glass-mask.lit.mode-stardust { background: radial-gradient(circle at 20% 15%, #ffffff 0.6px, transparent 1.2px), radial-gradient(circle at 75% 40%, #cceeff 0.5px, transparent 1.2px), radial-gradient(circle at 40% 70%, #ffffff 0.7px, transparent 1.3px), radial-gradient(circle at 85% 85%, #cceeff 0.6px, transparent 1.2px), radial-gradient(circle at 10% 50%, #ffffff 0.5px, transparent 1.2px), #030612; animation: stardustTwinkle 3.5s steps(6, end) infinite; }
@keyframes stardustTwinkle { 0% { filter: brightness(.4); } 25% { filter: brightness(1.2) drop-shadow(0 0 6px #aad4ff); } 50% { filter: brightness(.6); } 75% { filter: brightness(1.4) drop-shadow(0 0 8px #ffffff); } 100% { filter: brightness(.4); } }
.glass-mask.lit.mode-watercolumn { background: linear-gradient(0deg, #0a4a8a 0%, #1f7fd4 30%, #6ccfff 70%, #d6f4ff 100%); animation: waterFill 4s ease-in-out infinite alternate; }
@keyframes waterFill { from { background: linear-gradient(0deg, #0a4a8a 0%, #1f7fd4 15%, #082040 25%, #000 100%); } to { background: linear-gradient(0deg, #0a4a8a 0%, #1f7fd4 60%, #6ccfff 75%, #d6f4ff 100%); } }
.glass-mask.lit.mode-bottomflash { background: linear-gradient(0deg, #ffb000 0%, #ff6a00 30%, #1a0a00 100%); background-size: 100% 200%; animation: bottomFlash 2.5s cubic-bezier(.2,.8,.2,1) infinite; }
@keyframes bottomFlash { 0% { background-position: 0 100%; filter: brightness(.2); } 15% { filter: brightness(1.6) drop-shadow(0 0 14px #ffb000); } 30% { filter: brightness(.7); } 100% { background-position: 0 0%; filter: brightness(.2); } }
.glass-mask.lit.mode-moodthermo { background: linear-gradient(0deg, #0044ff 0%, #00ccff 30%, #aa00ff 55%, #ff5500 80%, #ff0000 100%); background-size: 100% 200%; animation: moodThermo 6s ease-in-out infinite alternate; }
@keyframes moodThermo { 0% { background-position: 0 100%; } 100% { background-position: 0 0%; } }
.glass-mask.lit.mode-topshadow { background: linear-gradient(180deg, #000 0%, #000 20%, #ffcc66 20%, #ff9933 100%); background-size: 100% 200%; animation: topShadowMove 5s ease-in-out infinite alternate; }
@keyframes topShadowMove { 0% { background-position: 0 0%; } 100% { background-position: 0 100%; } }
.glass-mask.lit.mode-pixelEQ { background: linear-gradient(0deg, #ff2a00 0%, #ff2a00 12%, #ff8c00 12.1%, #ff8c00 24%, #ffd000 24.1%, #ffd000 36%, #00ff88 36.1%, #00ff88 48%, #00ccff 48.1%, #00ccff 60%, #5274ff 60.1%, #5274ff 72%, #aa00ff 72.1%, #aa00ff 84%, #ff0066 84.1%, #ff0066 100%); animation: pixelEQBreath .9s steps(8, end) infinite alternate; }
@keyframes pixelEQBreath { 0% { opacity: .6; filter: drop-shadow(0 0 4px #fff); } 100% { opacity: 1; filter: drop-shadow(0 0 12px #fff); } }

.dot { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--muted); padding: 4px 10px; border-radius: 20px; background: rgba(0,0,0,.3); }
.dot i { width: 8px; height: 8px; border-radius: 50%; background: #41517a; }
.dot.on i { background: var(--ok); box-shadow: 0 0 10px var(--ok); }
.dot.idle i { background: var(--warn); box-shadow: 0 0 10px var(--warn); }

.chip { padding: 6px 10px; border-radius: 20px; border: 1px solid var(--line); background: rgba(0,0,0,.3); color: var(--muted); font-size: 11px; cursor: pointer; margin: 2px; }
.chip.on { background: linear-gradient(135deg, #6f8cff, #5274ff); color: #fff; }

input[type=range] { -webkit-appearance: none; width: 100%; background: transparent; margin: 8px 0; }
input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 6px; border-radius: 3px; background: var(--line); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; height: 16px; width: 16px; border-radius: 50%; background: var(--accent); margin-top: -5px; border: 2px solid #fff; cursor: pointer; }

.avatar { width: 36px; height: 36px; border-radius: 50%; background: #283c6b center/cover; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 16px; color: #fff; flex-shrink: 0; }
.avatar-lg { width: 100px; height: 100px; font-size: 40px; }

.search-btn { background: linear-gradient(135deg, #6f8cff, #5274ff); border: 0; border-radius: 10px; color: #fff; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
.search-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; }

.chat-container { scroll-behavior: smooth; }
.notif-window { position: fixed; bottom: 80px; right: 20px; width: 280px; max-height: 400px; overflow-y: auto; background: #101d3c; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.6); z-index: 9998; padding: 15px; }
#bell { transition: transform .2s; }
#bell:hover { transform: translateY(-2px); }
#bell .sticky-update { border-color: #ff5a6a; }

.emoji-panel { animation: none; }

* { scrollbar-width: thin; scrollbar-color: rgba(82,116,255,.5) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: rgba(82,116,255,.5); border-radius: 8px; }

.debug-fab { width: 46px; height: 46px; border-radius: 50%; background: #101d3c; border: 1px solid var(--line); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 20px; cursor: pointer; }
.debug-window { position: fixed; left: 20px; bottom: 80px; width: min(92vw, 460px); max-height: 70vh; overflow-y: auto; background: #0b142c; border: 1px solid var(--line); border-radius: 14px; padding: 14px; z-index: 10000; }
.broadcast-panel { position: fixed; left: 20px; bottom: 80px; width: min(92vw, 340px); background: #101d3c; border: 1px solid #ff5a6a; border-radius: 12px; padding: 12px; z-index: 10000; }

.toggle { position: relative; width: 44px; height: 24px; border-radius: 999px; background: rgba(0,0,0,.4); border: 1px solid var(--line); cursor: pointer; flex-shrink: 0; }
.toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #8fa3cc; transition: transform .25s, background .25s; }
.toggle.on { background: linear-gradient(135deg, #6f8cff, #5274ff); border-color: var(--accent); }
.toggle.on::after { transform: translateX(20px); background: #fff; }

.sticky-update { background: rgba(255,90,106,.12); }
.hue-palette { box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); }
.hue-palette-thumb { box-shadow: 0 0 6px rgba(0,0,0,.6); transition: left .1s linear; }

/* НОВЫЙ ЛАЙТБОКС С РАЗМЫТИЕМ */
#lightbox { 
  animation: lightboxFade 0.2s ease; 
}
#lightbox img { 
  border-radius: 8px; 
}
@keyframes lightboxFade { 
  from { opacity: 0; backdrop-filter: blur(0px); } 
  to { opacity: 1; backdrop-filter: blur(8px); } 
}

#bell .sys-badge { position: absolute; bottom: -2px; left: -2px; width: 16px; height: 16px; background: #ffb020; color: #101020; font-size: 12px; font-weight: 900; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid #060a14; }

.browser-modal { position: fixed; inset: 0; z-index: 100000; background: rgba(0,0,0,.7); display: flex; align-items: center; justify-content: center; padding: 20px; }
.browser-dialog { background: #101d3c; border: 1px solid var(--line); border-radius: 14px; padding: 20px; max-width: 420px; width: 100%; box-shadow: 0 10px 40px rgba(0,0,0,.7); }
.browser-dialog b { display: block; font-size: 16px; margin-bottom: 8px; }
.browser-dialog p { margin: 0 0 14px; color: var(--muted); font-size: 14px; line-height: 1.4; }
.browser-dialog-actions { display: flex; gap: 10px; margin-top: 16px; }
.browser-dialog-actions .btn { flex: 1; }

.toast-stack { position: fixed; top: 20px; right: 20px; z-index: 100001; display: flex; flex-direction: column; gap: 8px; max-width: 320px; }
.toast-item { background: #101d3c; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; box-shadow: 0 8px 24px rgba(0,0,0,.5); animation: toastIn .25s var(--ease); }
.toast-item b { display: block; font-size: 13px; margin-bottom: 2px; color: #fff; }
.toast-item span { font-size: 12px; color: var(--muted); }
.toast-item.leaving { opacity: 0; transform: translateX(20px); transition: opacity .3s, transform .3s; }
@keyframes toastIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }

.typing-indicator { min-height: 18px; padding: 3px 8px; color: var(--muted); font-size: 12px; opacity: 0; transition: opacity .2s; }
.typing-indicator.visible { opacity: 1; }

.profile-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }

@media (max-width: 768px) {
  .wrap { padding: 16px 12px calc(80px + env(safe-area-inset-bottom)); }
  .top { flex-wrap: wrap; }
  .main-grid { grid-template-columns: minmax(0, 1fr); }
  .pair-lamps { gap: 12px; }
  .pair-visuals { gap: 0; justify-content: space-around; width: 100%; }
  .pair-visuals .lamp-visual { transform: scale(.9); }
  .card { padding: 16px; }
  .manual-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .manual-block { min-height: 170px; padding: 12px 10px; }
  .manual-block p { font-size: 12px; }
  .notif-window { right: 10px; width: calc(100vw - 20px); max-width: 320px; }
  .toast-stack { left: 10px; right: 10px; max-width: none; top: 10px; }
  .debug-window { left: 10px; right: 10px; width: auto; max-height: 60vh; bottom: 80px; }
}
@media (max-width: 360px) {
  .pair-lamps { justify-content: stretch; }
  .pair-lamps > * { width: 100% !important; max-width: 100%; }
  .pair-visuals { gap: 4px; }
  .pair-visuals .lamp-visual { transform: scale(.8); margin: 4px -10px; }
}