/* ops-user-query.css —— 运营中心「用户查询 / 阅读历史」（O-17 / O-18）页面样式
   为什么单开一个文件：frontend/styles.css 已超行数上限，新页面样式一律独立文件（先例 ops-bookshelf.css）。 */

.user-query-vue { padding-bottom: 24px; }

.uq-head-actions { display: flex; align-items: center; gap: 8px; }

/* 查询条件行：选择键类型 + 输入键值 + 查询按钮，窄屏换行不挤在一起 */
.uq-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; padding: 4px 0 8px; }
.uq-form .fld-wide { flex: 1 1 320px; min-width: 240px; }

.uq-state-line { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: 6px; }
.uq-badge { border-radius: 10px; padding: 2px 10px; font-size: 12px; background: #eef3fb; color: #2b5ea8; }
.uq-badge[data-source="not_granted"] { background: #fdf3e6; color: #a4621a; }
.uq-badge[data-source="unbound"] { background: #f2f2f4; color: #5d6169; }
.uq-badge[data-source="not_found"] { background: #f6f6f8; color: #6b6f76; }

/* 结果区：键值网格（一格一字段；字段多时自动多列，不写死列数） */
.uq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px 18px; padding: 6px 0; }
.uq-kv { display: flex; align-items: baseline; gap: 8px; min-width: 0; border-bottom: 1px dashed #eceef2; padding-bottom: 6px; }
.uq-k { flex: 0 0 96px; color: #6b6f76; font-size: 12px; }
.uq-v { flex: 1 1 auto; min-width: 0; word-break: break-all; }
.uq-kv-pii .btn { flex: 0 0 auto; }

.uq-note { color: #6b6f76; font-size: 12px; line-height: 1.7; padding-top: 4px; }

/* 阅读历史表：书名列可折行，其余列贴右对齐便于横着比 */
.uq-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.uq-table th, .uq-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid #eceef2; vertical-align: top; }
.uq-table th { color: #6b6f76; font-weight: 500; background: #fafbfd; }
.uq-table td:first-child { max-width: 320px; word-break: break-all; }

/* 页脚留白：右下角固定开关（标注工具）会盖住最后一行按钮，故整页预留（同 ops-bookshelf.css） */
.user-query-vue .uq-table + .uq-note { padding-bottom: 112px; }