/* 公共组件：按钮/表单/卡片/弹窗/Toast — 语义色、扁卡、紧凑 */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: calc(var(--spacing) * 1.5);
  font-size: 13px; font-weight: 500; line-height: 1;
  padding: calc(var(--spacing) * 2.5) calc(var(--spacing) * 3.5);
  border-radius: calc(var(--radius) - 2px);
  border: 1px solid transparent; cursor: pointer;
  transition: transform .15s ease-out, background-color .15s ease-out,
              color .15s ease-out, border-color .15s ease-out;
  text-decoration: none; white-space: nowrap;
}
.btn:not(:disabled):hover { transform: translateY(-1px); }
.btn:not(:disabled):active { transform: translateY(0) scale(.97); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn svg { width: 14px; height: 14px; transition: transform .16s ease-out; }
.btn:not(:disabled):hover svg { transform: scale(1.1); }
.btn-primary { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.btn-outline { background: transparent; border-color: hsl(var(--border)); color: hsl(var(--foreground)); }
.btn-ghost { background: transparent; color: hsl(var(--foreground)); }
.btn-ghost:hover { background: color-mix(in srgb, hsl(var(--foreground)) 6%, transparent); }
.btn-danger { background: hsl(var(--destructive)); color: #fff; }
.btn-sm { padding: calc(var(--spacing) * 1.75) calc(var(--spacing) * 2.5); font-size: 12px; }
.btn-lg { padding: calc(var(--spacing) * 3) calc(var(--spacing) * 5); font-size: 14px; }

.card {
  border: 1px solid hsl(var(--border)); border-radius: var(--radius);
  background: hsl(var(--background)); box-shadow: none;
}
.card-pad { padding: calc(var(--spacing) * 3.5); }
.tint { background: color-mix(in srgb, hsl(var(--foreground)) 3%, transparent); border-radius: var(--radius); }

label.field { display: block; margin-bottom: calc(var(--spacing) * 3); }
label.field > span { display: block; font-size: 13px; font-weight: 500; margin-bottom: calc(var(--spacing) * 1.5); }
label.field .hint { display: block; font-size: 12px; font-weight: 400; color: hsl(var(--muted-foreground)); margin-top: calc(var(--spacing) * 1); }
.input, .textarea, .select {
  width: 100%; font-size: 13px; color: hsl(var(--foreground));
  background: hsl(var(--background));
  border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) - 2px);
  padding: calc(var(--spacing) * 2.5) calc(var(--spacing) * 3);
  outline: none; transition: border-color .15s ease-out, box-shadow .15s ease-out;
}
.input:focus, .textarea:focus, .select:focus {
  border-color: hsl(var(--primary));
  box-shadow: 0 0 0 2px color-mix(in srgb, hsl(var(--primary)) 20%, transparent);
}
.textarea { resize: vertical; min-height: calc(var(--spacing) * 20); font-family: inherit; line-height: 1.6; }
.textarea.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }

.empty {
  background: hsl(var(--muted)); border-radius: var(--radius);
  padding: calc(var(--spacing) * 6); text-align: center;
  color: hsl(var(--muted-foreground)); font-size: 13px;
}
.badge {
  display: inline-flex; align-items: center; font-size: 11px; font-weight: 500;
  padding: calc(var(--spacing) * .75) calc(var(--spacing) * 2);
  border-radius: 999px; background: hsl(var(--muted)); color: hsl(var(--muted-foreground));
}
.badge.ok { background: color-mix(in srgb, hsl(var(--success)) 15%, transparent); color: hsl(var(--success)); }
.badge.warn { background: color-mix(in srgb, hsl(var(--warning)) 15%, transparent); color: hsl(var(--warning)); }
.badge.err { background: color-mix(in srgb, hsl(var(--destructive)) 12%, transparent); color: hsl(var(--destructive)); }

/* 平台多选 */
.pf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: calc(var(--spacing) * 2); }
.pf-item {
  display: flex; align-items: center; gap: calc(var(--spacing) * 2);
  padding: calc(var(--spacing) * 2.25) calc(var(--spacing) * 2.5);
  border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) - 2px);
  cursor: pointer; font-size: 13px; user-select: none;
  transition: transform .15s ease-out, background-color .15s ease-out, border-color .15s ease-out;
}
.pf-item:hover { background: color-mix(in srgb, hsl(var(--foreground)) 3%, transparent); }
.pf-item.on { border-color: color-mix(in srgb, hsl(var(--primary)) 40%, transparent);
  background: color-mix(in srgb, hsl(var(--primary)) 10%, transparent); }
.pf-item img { width: 16px; height: 16px; border-radius: 3px; }
.pf-item .acct { font-size: 11px; color: hsl(var(--muted-foreground)); margin-left: auto; }

/* 底栏操作条 */
.action-bar {
  position: sticky; bottom: 0; display: flex; align-items: center; gap: calc(var(--spacing) * 2);
  padding: calc(var(--spacing) * 2.5) 0; margin-top: calc(var(--spacing) * 4);
  background: hsl(var(--background)); border-top: 1px solid hsl(var(--border));
}
.action-bar .right { margin-left: auto; display: flex; gap: calc(var(--spacing) * 2); }

/* 弹窗 */
.overlay {
  position: fixed; inset: 0; background: color-mix(in srgb, hsl(var(--foreground)) 45%, transparent);
  display: flex; align-items: center; justify-content: center; z-index: 100;
  padding: calc(var(--spacing) * 4);
}
.modal {
  background: hsl(var(--background)); border: 1px solid hsl(var(--border));
  border-radius: var(--radius); width: 100%; max-width: 560px;
  max-height: 85vh; display: flex; flex-direction: column; overflow: hidden;
}
.modal-head { padding: calc(var(--spacing) * 3.5); border-bottom: 1px solid hsl(var(--border));
  font-size: 15px; font-weight: 600; display: flex; align-items: center; justify-content: space-between; }
.modal-body { padding: calc(var(--spacing) * 3.5); overflow-y: auto; }
.modal-foot { padding: calc(var(--spacing) * 3) calc(var(--spacing) * 3.5);
  border-top: 1px solid hsl(var(--border)); display: flex; justify-content: flex-end; gap: calc(var(--spacing) * 2); }

/* Toast */
.toast-wrap { position: fixed; top: calc(var(--spacing) * 4); right: calc(var(--spacing) * 4); z-index: 200;
  display: flex; flex-direction: column; gap: calc(var(--spacing) * 2); }
.toast {
  background: hsl(var(--foreground)); color: hsl(var(--background));
  font-size: 13px; padding: calc(var(--spacing) * 2.5) calc(var(--spacing) * 3.5);
  border-radius: calc(var(--radius) - 2px); box-shadow: 0 4px 16px rgba(0,0,0,.18);
  animation: toast-in .18s ease-out; max-width: 360px;
}
@keyframes toast-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* 表格行 */
.rows { display: flex; flex-direction: column; }
.row {
  display: flex; align-items: center; gap: calc(var(--spacing) * 3);
  padding: calc(var(--spacing) * 2.5) calc(var(--spacing) * 2);
  border-radius: calc(var(--radius) - 2px);
  transition: background-color .15s ease-out;
}
.row:hover { background: color-mix(in srgb, hsl(var(--foreground)) 3%, transparent); }
.row .grow { flex: 1; min-width: 0; }
.row .t { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .s { font-size: 12px; color: hsl(var(--muted-foreground)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .meta { font-size: 12px; color: hsl(var(--muted-foreground)); font-family: ui-monospace, monospace; flex-shrink: 0; }

/* 上传区 */
.upl {
  border: 1.5px dashed hsl(var(--border)); border-radius: var(--radius);
  padding: calc(var(--spacing) * 5); text-align: center; cursor: pointer;
  color: hsl(var(--muted-foreground)); font-size: 13px;
  transition: border-color .15s ease-out, background-color .15s ease-out;
}
.upl:hover, .upl.drag { border-color: hsl(var(--primary));
  background: color-mix(in srgb, hsl(var(--primary)) 4%, transparent); }
.upl .sub { font-size: 12px; margin-top: calc(var(--spacing) * 1); }

.banner {
  display: flex; align-items: center; gap: calc(var(--spacing) * 2);
  padding: calc(var(--spacing) * 2.5) calc(var(--spacing) * 3);
  border-radius: calc(var(--radius) - 2px); font-size: 13px;
  border: 1px solid color-mix(in srgb, hsl(var(--warning)) 40%, transparent);
  background: color-mix(in srgb, hsl(var(--warning)) 8%, transparent);
  color: hsl(var(--foreground)); margin-bottom: calc(var(--spacing) * 3);
}
.banner svg { width: 16px; height: 16px; flex-shrink: 0; color: hsl(var(--warning)); }
.banner .btn { margin-left: auto; }

.page-title { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 calc(var(--spacing) * 4); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.muted { color: hsl(var(--muted-foreground)); }
.small { font-size: 12px; }
.mt2 { margin-top: calc(var(--spacing) * 2); } .mt3 { margin-top: calc(var(--spacing) * 3); } .mt4 { margin-top: calc(var(--spacing) * 4); }