/* === Inspector Panel === */ .inspector { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 12px; } .empty { color: var(--text-dim); font-size: 13px; text-align: center; padding: 28px 16px; line-height: 1.6; border: 1px dashed var(--border); border-radius: 12px; margin: 12px; font-weight: 600; background: var(--bg-mid); } .emptyHint { margin-top: 10px; font-size: 11px; color: var(--text-dim); font-weight: 600; } .headerCard { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--bg-mid); border: 1px solid var(--border); border-radius: 6px; } .iconBig { font-size: 32px; line-height: 1; display: flex; align-items: center; justify-content: center; color: var(--accent, #3357ff); } .headerText { flex: 1; min-width: 0; } .typeLabel { font-size: 10px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1px; } .typeName { font-size: 14px; color: var(--text); font-weight: 600; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .section { display: flex; flex-direction: column; gap: 6px; } .sectionTitle { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1px; font-weight: 600; display: flex; align-items: center; gap: 6px; } /* Три инпута X/Y/Z в строке */ .row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; } .rowFull { display: flex; gap: 6px; } .field { display: flex; align-items: center; background: var(--bg-darkest); border: 1px solid var(--border); border-radius: 4px; overflow: hidden; min-width: 0; } .field:focus-within { border-color: var(--accent2); } .axisLabel { padding: 6px 6px 6px 8px; font-size: 12px; font-weight: 800; background: var(--bg-light); color: var(--accent); flex-shrink: 0; } .input { flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: var(--text); font-size: 12px; padding: 6px 6px; width: 100%; } /* Когда input не внутри field-обёртки (для rowFull) — тоже стилизуем */ .rowFull .input { background: var(--bg-darkest); border: 1px solid var(--border); border-radius: 4px; padding: 6px 8px; } .rowFull .input:focus { border-color: var(--accent2); } .smallBtn { background: var(--bg-mid); border: 1px solid var(--border); border-radius: 4px; color: var(--text); font-size: 11px; padding: 4px 10px; cursor: pointer; flex-shrink: 0; transition: all 0.12s; } .smallBtn:hover { background: var(--bg-light); border-color: var(--accent2); } .numInput { background: var(--bg-darkest); border: 1px solid var(--border); border-radius: 4px; color: var(--text); font-size: 12px; padding: 4px 6px; box-sizing: border-box; } .numInput:focus { outline: none; border-color: var(--accent2); } .nameInput { background: var(--bg-darkest); border: 1px solid var(--border); border-radius: 4px; color: var(--text); font-size: 13px; padding: 4px 8px; width: 100%; box-sizing: border-box; margin-top: 2px; } .nameInput:focus { outline: none; border-color: var(--accent2); } .actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; } .actionBtn { background: var(--bg-mid); border: 1px solid var(--border); border-radius: 4px; color: var(--text); font-size: 12px; padding: 8px 10px; cursor: pointer; transition: all 0.12s; } .actionBtn:hover { background: var(--bg-light); border-color: var(--accent2); } .deleteBtn { color: #ef4444; border-color: rgba(239, 68, 68, 0.4); } .deleteBtn:hover { background: rgba(239, 68, 68, 0.18); border-color: #ef4444; color: #ff6b6b; } .hint { font-size: 11px; color: var(--text-dim); text-align: center; padding: 8px; border-top: 1px solid var(--border); margin-top: 8px; }