/* ── Advanced Calibration ─────────────────────────────────── */ .advcal-layout { display: flex; gap: 16px; margin-bottom: 12px; align-items: stretch; } .advcal-canvas-panel { flex: 1 1 60%; min-width: 0; } #advcal-canvas { width: 100%; height: auto; border: 1px solid var(--border-color); border-radius: 6px; background: rgba(10, 15, 25, 0.9); } .advcal-canvas-hint { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--text-secondary); margin-top: 4px; } .advcal-lines-panel { flex: 0 0 220px; display: flex; flex-direction: column; align-self: stretch; } .advcal-line-list { flex: 1; overflow-y: auto; border: 1px solid var(--border-color); border-radius: 6px; background: var(--card-bg); } .advcal-leds-counter { text-align: center; font-size: 0.8em; color: var(--text-secondary); margin-top: 4px; } .advcal-line-add { display: flex; align-items: center; justify-content: center; padding: 8px; cursor: pointer; color: var(--primary-color, #0078ff); font-size: 1.2em; font-weight: 600; border-top: 1px dashed var(--border-color); transition: background 0.15s, color 0.15s; opacity: 0.7; } .advcal-line-add:hover { background: rgba(0, 120, 255, 0.12); opacity: 1; } .advcal-line-item { display: flex; align-items: center; gap: 6px; padding: 6px 8px; padding-left: 11px; cursor: pointer; border-bottom: 1px solid var(--border-color); border-left: 3px solid transparent; font-size: 0.82em; transition: background 0.15s, border-color 0.15s; } .advcal-line-item:last-child { border-bottom: none; } .advcal-line-item:hover { background: rgba(255, 255, 255, 0.04); } .advcal-line-item.selected { background: rgba(0, 120, 255, 0.15); border-left-color: rgba(0, 180, 255, 0.8); } .advcal-line-color { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .advcal-line-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .advcal-line-leds { font-size: 0.85em; color: var(--text-secondary); min-width: 24px; text-align: right; } .advcal-line-actions { display: flex; gap: 2px; flex-shrink: 0; } .btn-micro { background: none; border: 1px solid transparent; color: var(--text-secondary); cursor: pointer; padding: 1px 4px; font-size: 0.75em; border-radius: 3px; line-height: 1; } .btn-micro:hover { background: rgba(255, 255, 255, 0.08); border-color: var(--border-color); } .btn-micro.btn-danger:hover { background: rgba(255, 50, 50, 0.15); color: #ff5555; } .btn-micro:disabled { opacity: 0.3; cursor: default; } .advcal-line-props { padding: 12px; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 6px; margin-top: 8px; } .checkbox-label { display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: 0.85em; }