/* 头部用统一 topbar（shell 在 common.css；默认 max-width:1100px 正好与本页 container 对齐，无需覆盖）*/
.container { max-width:1100px; margin:0 auto; padding:24px 20px; }

.create-card { background:var(--bg-card); border-radius:12px; padding:20px; margin-bottom:24px; }
.create-card h2 { font-size:15px; font-weight:600; margin-bottom:16px; }
.form-row { display:flex; gap:12px; margin-bottom:12px; flex-wrap:wrap; align-items:center; }
.form-row label { font-size:13px; color:var(--text-muted); min-width:60px; }
.form-row input[type="text"], .form-row input[type="number"] { flex:1; min-width:120px; padding:8px 12px; background:var(--bg-input); border:1px solid var(--border); border-radius:8px; color:var(--text-primary); font-size:14px; outline:none; }
.form-row input:focus { border-color:var(--accent); }
.form-row input[type="range"] { flex:1; min-width:120px; }
.form-row .val { font-size:14px; color:var(--accent); font-weight:600; min-width:32px; }
.form-row select { padding:8px 12px; background:var(--bg-input); border:1px solid var(--border); border-radius:8px; color:var(--text-primary); font-size:14px; outline:none; }
.btn-primary { padding:10px 24px; font-size:14px; white-space:nowrap; }

.group-checks { display:flex; flex-wrap:wrap; gap:8px; }
.group-checks-pager { display:flex; gap:6px; align-items:flex-start; flex-wrap:wrap; width:100%; }
.group-checks-pager .group-checks { flex:1; }
.group-check { display:flex; align-items:center; gap:4px; padding:4px 10px; border-radius:6px; border:1px solid var(--border); font-size:13px; color:var(--text-muted); cursor:pointer; transition:all 0.2s; }
.group-check:hover { border-color:var(--accent); color:var(--accent); }
.group-check.selected { border-color:var(--accent); background:rgba(102,126,234,0.15); color:var(--accent); }
.group-check input { display:none; }

.tag-filter-bar { display:flex; gap:6px; margin-bottom:8px; flex-wrap:wrap; align-items:center; width:100%; }
.tag-filter-bar::before { content:'标签筛选'; font-size:12px; color:var(--text-dim); margin-right:4px; flex-shrink:0; }
.tag-filter-btn { padding:2px 10px; border-radius:10px; background:transparent; color:var(--text-muted); font-size:12px; cursor:pointer; border:1px solid var(--border); transition:all 0.2s; }
.tag-filter-btn:hover { border-color:var(--accent); color:var(--accent); }
.tag-breadcrumb { display:flex; align-items:center; gap:2px; margin-right:8px; }
.tag-crumb { font-size:12px; color:var(--accent); cursor:pointer; padding:2px 6px; border-radius:4px; transition:background 0.2s; }
.tag-crumb:hover { background:rgba(102,126,234,0.15); }
.tag-sep { font-size:11px; color:var(--text-faint); }
.tab-page-btn { width:28px; height:28px; border-radius:6px; border:1px solid var(--border); background:transparent; color:var(--text-muted); font-size:12px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:all 0.2s; flex-shrink:0; }
.tab-page-btn:hover:not(:disabled) { border-color:var(--accent); color:var(--accent); }
.tab-page-btn:disabled { opacity:0.3; cursor:not-allowed; }
.tab-page-info { font-size:11px; color:var(--text-faint); margin-left:4px; }

.tab-bar { display:flex; gap:0; margin-bottom:24px; border-bottom:2px solid var(--divider); }
.tab-item { padding:10px 24px; font-size:14px; color:var(--text-muted); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-2px; transition:all 0.2s; }
.tab-item:hover { color:var(--accent); }
.tab-item.active { color:var(--accent); border-bottom-color:var(--accent); font-weight:600; }

.link-card { background:var(--bg-card); border-radius:12px; margin-bottom:12px; overflow:hidden; }
.link-header { display:flex; align-items:center; padding:10px 16px; gap:8px; flex-wrap:wrap; }
.link-name { font-size:15px; font-weight:600; flex:1; cursor:pointer; }
.link-status { font-size:12px; padding:2px 10px; border-radius:10px; }
.link-actions { display:flex; gap:6px; flex-wrap:wrap; }
.link-toggle { font-size:12px; color:var(--text-faint); transition:transform 0.2s; cursor:pointer; padding:0 4px; }
.link-card.open > .link-header > .link-toggle { transform:rotate(180deg); }
.link-detail { display:none; border-top:1px solid var(--divider); }
.link-card.open > .link-detail { display:block; }
.status-active { background:rgba(52,152,219,0.15); color:#3498db; }
.status-shared { background:rgba(39,174,96,0.15); color:#27ae60; }
.status-partial { background:rgba(241,196,15,0.15); color:#f1c40f; }
.status-exhausted { background:rgba(231,76,60,0.15); color:#e74c3c; }
.status-expired { background:rgba(149,165,166,0.15); color:#95a5a6; }
.status-disabled { background:rgba(149,165,166,0.15); color:#95a5a6; }
.link-body { padding:12px 16px; display:grid; grid-template-columns:1fr 1fr; gap:8px; font-size:13px; }
.link-body .field { display:flex; flex-direction:column; gap:2px; }
.link-body .field label { font-size:11px; color:var(--text-muted); }
.link-body .field span { color:var(--text-secondary); word-break:break-all; }
.btn-sm { padding:4px 12px; border-radius:6px; font-size:12px; cursor:pointer; border:1px solid var(--border); background:transparent; color:var(--text-muted); transition:all 0.2s; }
.btn-sm:hover { border-color:var(--accent); color:var(--accent); }
.btn-sm.danger { color:#e74c3c; border-color:#e74c3c; }
.btn-sm.danger:hover { background:rgba(231,76,60,0.1); }
.btn-sm.copy { color:#667eea; border-color:#667eea; }
.btn-sm.share { color:#27ae60; border-color:#27ae60; }
.btn-sm.warn { color:#f39c12; border-color:#f39c12; }
.btn-sm.warn:hover { background:rgba(243,156,18,0.1); }
.btn-sm.edit { background:#667eea; color:#fff; border-color:#667eea; }
.btn-sm.edit:hover { background:#5a6fd6; border-color:#5a6fd6; }

.child-section { padding:12px 16px; border-top:1px solid var(--divider); }
.child-section-title { font-size:13px; font-weight:600; color:var(--text-secondary); margin-bottom:8px; cursor:pointer; }
.child-card { background:var(--bg-input); border-radius:8px; padding:10px 12px; margin-bottom:6px; font-size:12px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.child-card .child-token { color:var(--text-muted); font-family:monospace; }
.child-card .child-status { font-size:11px; padding:1px 6px; border-radius:8px; }
.child-card .child-qpoints { color:var(--text-secondary); }
.child-card .child-date { color:var(--text-faint); font-size:11px; }

.empty-hint { text-align:center; padding:40px 20px; color:var(--text-faint); font-size:14px; }

.pager { display:flex; align-items:center; justify-content:center; gap:8px; padding:16px 0; }
.pager button { padding:6px 14px; border:1px solid var(--border); border-radius:6px; background:transparent; color:var(--text-muted); font-size:13px; cursor:pointer; transition:all 0.2s; }
.pager button:hover:not(:disabled) { border-color:var(--accent); color:var(--accent); }
.pager button:disabled { opacity:0.4; cursor:not-allowed; }
.pager .page-info { font-size:13px; color:var(--text-muted); }

/* === 链接配置：分组重构（基本信息 / 可选造型 / 额度与有效期 / 高级）=== */
.cfg-group { margin-bottom: 22px; }
.cfg-group:last-of-type { margin-bottom: 0; }
.cfg-title {
  font-size: 12px; font-weight: 600; color: var(--text-muted); letter-spacing: 0.5px;
  margin-bottom: 14px; display: flex; align-items: center; gap: 8px;
}
.cfg-title::before { content: ''; width: 3px; height: 13px; background: var(--accent); border-radius: 2px; }
.cfg-selected { font-size: 12px; color: var(--accent); margin-top: 10px; font-weight: 500; }
.cfg-hint { font-size: 11px; color: var(--text-faint); }

/* 额度组：短字段 2 列，label 压顶；开关行跨整行 */
.cfg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cfg-grid .form-row { flex-direction: column; align-items: stretch; gap: 6px; margin-bottom: 0; flex-wrap: nowrap; }
.cfg-grid .form-row label { min-width: 0; }
.cfg-grid .form-row.toggle-row { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 10px; }
.cfg-grid .form-row.toggle-row > label:first-child { min-width: 0; }

/* 花费预览（签名：把抽象数字变成「这要花多少」）*/
.cfg-cost {
  margin-top: 16px; padding: 10px 14px; border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  font-size: 13px; color: var(--text-secondary);
}
.cfg-cost strong { color: var(--accent); font-family: var(--mono); font-size: 15px; font-weight: 700; }

/* 高级折叠（原生 <details>，默认收起，降级低频 AI 参数）*/
.cfg-advanced { margin-top: 18px; border-top: 1px dashed var(--border); padding-top: 14px; }
.cfg-advanced > summary {
  list-style: none; cursor: pointer; font-size: 13px; color: var(--text-muted);
  display: inline-flex; align-items: center; gap: 6px; user-select: none; transition: color 0.2s;
}
.cfg-advanced > summary::-webkit-details-marker { display: none; }
.cfg-advanced > summary::before { content: '▸'; color: var(--text-faint); transition: transform 0.2s; }
.cfg-advanced[open] > summary::before { transform: rotate(90deg); }
.cfg-advanced > summary:hover { color: var(--accent); }
.cfg-advanced-body { padding-top: 14px; }
.cfg-advanced-body .form-row { flex-wrap: nowrap; }
.cfg-advanced-body .btn-sm { min-width: 28px; padding: 2px 6px; }

/* 提交按钮靠右 */
.cfg-submit { display: flex; justify-content: flex-end; margin-top: 22px; }

@media (max-width: 640px) {
  .cfg-grid { grid-template-columns: 1fr; }
  .link-body { grid-template-columns: 1fr; }
}