.container { position: relative; width: 100%; height: 100%; min-height: 280px; border-radius: 8px; overflow: hidden; } .controls { position: absolute; top: 10px; right: 10px; display: flex; flex-direction: column; gap: 6px; z-index: 10; } .controlBtn { width: 36px; height: 36px; border: none; border-radius: 8px; background: rgba(255, 255, 255, 0.9); color: #333; font-size: 1.25rem; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); transition: all 0.2s; } .controlBtn:hover { background: #fff; transform: scale(1.05); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); } .controlBtn:active { transform: scale(0.95); } .loading { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--text-muted); font-size: 0.875rem; } .hint { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); padding: 4px 12px; background: rgba(0, 0, 0, 0.5); color: #fff; font-size: 0.75rem; border-radius: 12px; white-space: nowrap; pointer-events: none; opacity: 0.7; } .selectedElement { position: absolute; top: 10px; left: 10px; padding: 8px 14px; background: rgba(255, 255, 255, 0.95); color: #333; font-size: 0.85rem; border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); z-index: 10; } .selectedElement strong { color: var(--action); } .controlDivider { width: 24px; height: 1px; background: rgba(0, 0, 0, 0.15); margin: 4px 6px; } .controlBtnActive { background: var(--action); color: #fff; } .controlBtnActive:hover { background: var(--action-hover); } .elementSelect { font-size: 0.75rem; padding: 4px 6px; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 6px; background: rgba(255, 255, 255, 0.95); color: #333; cursor: pointer; max-width: 110px; outline: none; } .elementSelect:hover { border-color: var(--action); } .elementSelect:focus { border-color: var(--action); box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.2); }