@font-face {
  font-family: 'libre';
  src: url('./fonts/libre.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: block; /* 很重要：避免字体闪变 */
}


/* 覆盖在主图上的层 */
.nbc-heart-overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
}

/* 宝石图片 */
.nbc-heart-gem {
    position: absolute;
    transform: translate(-50%, -50%);
    height: auto;
}

/* Preview 按钮区域 */
.nbc-heart-preview-controls {
    margin-bottom: 10px;
}

/* 按钮激活状态 */
.nbc-heart-preview-controls .nbc-heart-preview-trigger.nbc-heart-preview-ready {
    opacity: 1;
}

/* 按钮未激活（无输入/无选择） */
.nbc-heart-preview-controls .nbc-heart-preview-trigger[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* 页面上的调试信息 */
.nbc-heart-debug {
    margin-top: 4px;
    font-size: 11px;
    color: #555;
    word-break: break-all;
}
/* --- 调试模式相关样式 --- */

/* 覆盖宝石的 pointer-events: none; 属性，允许点击 */
.nbc-heart-overlay .nbc-heart-gem {
    pointer-events: auto; 
    cursor: move; /* 提示用户可以移动 */
    transition: all 0.2s ease; /* 让选中/取消选中更柔和 */
}

/* 当宝石被选中时，提供视觉反馈 */
.nbc-heart-overlay .nbc-heart-gem[style*="outline: 3px solid red"] {
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.7);
    cursor: grab;
}

/* 调试面板样式 (由 JS 动态创建，这里提供基础美化) */
#nbc-live-debug-panel {
    /* 样式与 JS 中设置的基本一致，确保显示 */
    /* background: rgba(0,0,0,0.85); color: #00ff00; */
    /* ... 更多样式 ... */
}

#nbc-preview-modal .nbc-close:hover{ background:#222 !important; }
#nbc-preview-modal .nbc-close:active{ transform:scale(0.98); }