/* opentuina-pc-gadget-forum-fields - 前端（发帖字段 / 详情 / 评论 / 卡片标签） */

/* 发布/编辑设置区锚点 */
.opentuina-ff-anchor { margin-top: 6px; }
.opentuina-ff-box { border-top: 1px dashed var(--ls-border-color, #e5e7eb); padding: 10px 0 4px; }
.opentuina-ff-tip { color: var(--ls-muted-color, #9aa0aa); font-size: 13px; padding: 4px 2px; }
.opentuina-ff-loading { color: var(--ls-muted-color, #9aa0aa); font-size: 13px; padding: 6px 2px; }

.opentuina-ff-fields { display: flex; flex-direction: column; gap: 10px; }
.opentuina-ff-row { display: flex; flex-direction: column; gap: 4px; }
.opentuina-ff-row-label { font-size: 13px; color: var(--ls-text-color, #333); display: flex; align-items: center; gap: 4px; }
.opentuina-ff-req { color: #e54d42; font-style: normal; }
.opentuina-ff-input {
  width: 100%; box-sizing: border-box; padding: 6px 10px; font-size: 13px;
  border: 1px solid var(--ls-border-color, #dcdfe6); border-radius: 4px; background: #fff; color: #333;
}
.opentuina-ff-textarea { min-height: 64px; resize: vertical; }
.opentuina-ff-code { font-family: Consolas, Menlo, monospace; font-size: 12px; color: #333; min-height: 90px; }
.opentuina-ff-optgroup { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 4px 0; }
.opentuina-ff-opt { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; cursor: pointer; }
.opentuina-ff-opt input { margin: 0; }
.opentuina-ff-invalid .opentuina-ff-input,
.opentuina-ff-invalid .opentuina-ff-rich-editor,
.opentuina-ff-invalid .opentuina-ff-upload { border-color: #e54d42; box-shadow: 0 0 0 1px #e54d42; }

/* 数组多项 */
.opentuina-ff-multi { display: flex; flex-direction: column; gap: 6px; }
.opentuina-ff-multi-row { display: flex; gap: 6px; align-items: center; }
.opentuina-ff-multi-input { flex: 1; }
.opentuina-ff-multi-del { border: 0; background: none; color: #c0392b; cursor: pointer; font-size: 16px; line-height: 1; padding: 2px 4px; }
.opentuina-ff-multi-add { align-self: flex-start; border: 1px dashed #c0c8d4; background: #fff; color: #5b6472; border-radius: 4px; padding: 4px 12px; cursor: pointer; font-size: 12px; }

/* 上传字段 */
.opentuina-ff-upload { display: flex; gap: 10px; align-items: flex-start; border: 1px solid transparent; }
.opentuina-ff-upload-preview img { max-width: 120px; max-height: 120px; border-radius: 4px; display: block; }
.opentuina-ff-file-name { font-size: 13px; color: #1f6feb; word-break: break-all; }
.opentuina-ff-upload-btns { display: flex; gap: 8px; }
.opentuina-ff-upload-btn { border: 1px solid #1f6feb; color: #1f6feb; background: #fff; border-radius: 4px; padding: 4px 12px; cursor: pointer; font-size: 13px; }
.opentuina-ff-upload-btn:disabled { opacity: .6; cursor: not-allowed; }
.opentuina-ff-upload-clear { border: 0; background: none; color: #c0392b; cursor: pointer; font-size: 13px; padding: 4px 2px; }

/* 富文本 */
.opentuina-ff-rich { border: 1px solid var(--ls-border-color, #dcdfe6); border-radius: 4px; }
.opentuina-ff-rich-toolbar { display: flex; flex-wrap: wrap; gap: 2px; padding: 4px 6px; border-bottom: 1px solid #eee; background: #fafbfc; }
.opentuina-ff-rich-toolbar button { border: 0; background: none; padding: 3px 8px; cursor: pointer; font-size: 13px; color: #444; border-radius: 3px; }
.opentuina-ff-rich-toolbar button:hover { background: #eef1f4; }
.opentuina-ff-rich-editor { min-height: 90px; padding: 8px 10px; font-size: 13px; line-height: 1.6; outline: none; }
.opentuina-ff-rich-editor:empty::before { content: attr(data-placeholder); color: #9aa0aa; }

/* 内容引用（post_ref） */
.opentuina-ff-postref-row { display: flex; gap: 6px; align-items: center; }
.opentuina-ff-postref-q { flex: 1; }
.opentuina-ff-postref-btn { border: 1px solid #1f6feb; color: #1f6feb; background: #fff; border-radius: 4px; padding: 5px 12px; cursor: pointer; font-size: 13px; flex: 0 0 auto; }
.opentuina-ff-postref-clear { border: 0; background: none; color: #c0392b; cursor: pointer; font-size: 13px; padding: 4px 2px; }
.opentuina-ff-postref-cur a { color: #1f6feb; font-size: 13px; word-break: break-all; }
.opentuina-ff-postref-list { display: none; margin-top: 6px; border: 1px solid var(--ls-border-color, #e3e6ea); border-radius: 6px; max-height: 220px; overflow: auto; background: #fff; }
.opentuina-ff-postref-item { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-bottom: 1px solid #f0f2f4; cursor: pointer; font-size: 13px; }
.opentuina-ff-postref-item:hover { background: #f5f8ff; }
.opentuina-ff-postref-item b { flex: 1; color: #333; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opentuina-ff-postref-item em { color: #9aa0aa; font-style: normal; font-size: 12px; }
.opentuina-ff-postref-pick { font-style: normal; font-size: 14px; color: #1f6feb; font-weight: 700; flex: 0 0 auto; }
.opentuina-ff-postref-item.ff-picked { background: #eef5ff; }
.opentuina-ff-postref-item.ff-picked .opentuina-ff-postref-pick { color: #e54d42; }
.opentuina-ff-postref .opentuina-ff-loading { padding: 8px 10px; }
.opentuina-ff-postref-cur { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.opentuina-ff-postref-chip { display: inline-flex; align-items: center; gap: 2px; border: 1px solid #cfe0ff; background: #eef5ff; border-radius: 14px; padding: 2px 4px 2px 10px; font-size: 12px; }
.opentuina-ff-postref-chip a { color: #1f5fd0; text-decoration: none; word-break: break-all; }
.opentuina-ff-postref-del { border: 0; background: none; color: #e54d42; cursor: pointer; font-size: 14px; line-height: 1; padding: 2px 6px; }
.opentuina-ff-postref-sep { margin: 0 2px; color: #9aa0aa; }
.opentuina-ff-value .opentuina-ff-postref { display: inline; }
.opentuina-ff-value a.opentuina-ff-postref { color: #1f6feb; }

/* 详情页字段区（服务端 slot 渲染） */
.opentuina-ff-panel { margin-top: 10px; padding: 10px 14px; background: #f8fafc; border: 1px solid var(--ls-border-color, #eef0f2); border-radius: 8px; }
.opentuina-ff-title { margin: 0 0 8px; font-size: 13px; color: var(--ls-text-color, #333); }
.opentuina-ff-row-d { display: flex; gap: 8px; font-size: 13px; padding: 3px 0; }
.opentuina-ff-label { color: var(--ls-muted-color, #9aa0aa); flex: 0 0 auto; }
.opentuina-ff-value { color: var(--ls-text-color, #333); word-break: break-word; }
.opentuina-ff-img { max-width: 200px; max-height: 200px; border-radius: 4px; display: block; }
.opentuina-ff-file { color: #1f6feb; }

/* 评论字段（api.comment.list 出口 after_content_html） */
.opentuina-ff-cfields { display: flex; flex-direction: column; gap: 2px; margin: 4px 0; padding-left: 4px; font-size: 12px; color: var(--ls-muted-color, #888); }
.opentuina-ff-crow { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-right: 12px; }
.opentuina-ff-clabel { color: var(--ls-muted-color, #9aa0aa); }
.opentuina-ff-cvalue { color: var(--ls-text-color, #444); }
.opentuina-ff-cfields img.opentuina-ff-img { max-width: 100px; max-height: 100px; }

/* 评论框下字段收集区 */
.opentuina-ff-cform { padding: 8px 10px; margin: 2px 0 8px 0; background: #fafbfc; border: 1px dashed #d6dce4; border-radius: 6px; }
.opentuina-ff-cform .opentuina-ff-fields { gap: 8px; }

/* 列表卡片角标（corner_badge_html） */
.opentuina-ff-corner { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: #6b7280; }
.opentuina-ff-corner b { font-weight: 500; color: #9aa0aa; margin-right: 2px; }