/* ============================================================
   ua-toolkit 公共基础样式:reset + 排版 + 公共组件外观
   组件行为在 shared/ui.js / shared/csv.js,这里只管长相。
   颜色/间距/字号一律引用 tokens.css 变量,禁止硬编码。
   ============================================================ */

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.55;
}

img, canvas, svg { display: block; max-width: 100%; }

button, input, select, textarea { font: inherit; color: inherit; }

/* ---------- 排版 ---------- */
h1 { font-size: var(--fs-xl);  font-weight: 700; letter-spacing: -0.01em; }
h2 { font-size: var(--fs-lg);  font-weight: 650; }
h3 { font-size: var(--fs-base); font-weight: 650; }

small, .text-muted { color: var(--text-muted); font-size: var(--fs-sm); }
.text-faint { color: var(--text-faint); }
.mono { font-family: var(--font-mono); }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }

/* ---------- 布局容器 ---------- */
.container { max-width: 1080px; margin: 0 auto; padding: 0 var(--s4); }

.section {
  margin: var(--s6) 0;
}
.section > h2 {
  margin-bottom: var(--s4);
  padding-bottom: var(--s2);
  border-bottom: 1px solid var(--border);
}

.card {
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--s4);
}

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: var(--s2) var(--s4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
  font-size: var(--fs-sm);
  font-weight: 600;
}
.btn:hover { background: var(--bg-inset); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
}
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

/* ---------- 表单控件 ---------- */
.field { display: flex; flex-direction: column; gap: var(--s1); }
.field > label { font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted); }

input[type="text"], select {
  padding: var(--s2) var(--s3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  min-width: 0;
}
input[type="text"]:focus, select:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

input[type="checkbox"] { accent-color: var(--accent); width: 15px; height: 15px; }
label.check { display: inline-flex; align-items: center; gap: var(--s2); cursor: pointer; font-size: var(--fs-sm); }

/* ---------- 徽章 badge(ui.js badge()) ---------- */
.badge {
  display: inline-flex; align-items: center;
  padding: 1px var(--s2);
  border-radius: var(--radius);
  font-size: var(--fs-xs);
  font-weight: 700;
  white-space: nowrap;
}
.badge-ok    { color: var(--ok);    background: var(--ok-bg); }
.badge-warn  { color: var(--warn);  background: var(--warn-bg); }
.badge-error { color: var(--error); background: var(--error-bg); }
.badge-info  { color: var(--info);  background: var(--info-bg); }

/* ---------- 结果表格(ui.js createTable()) ---------- */
.tbl-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); }
.tbl-toolbar { display: flex; justify-content: flex-end; margin-bottom: var(--s2); }
.tbl-toolbar input { max-width: 220px; }

table.tbl { border-collapse: collapse; width: 100%; font-size: var(--fs-sm); }
table.tbl th, table.tbl td {
  padding: var(--s2) var(--s3);
  border-bottom: 1px solid var(--border);
  text-align: left;
  white-space: nowrap;
}
table.tbl th {
  background: var(--bg-inset);
  font-weight: 650;
  cursor: pointer;
  user-select: none;
  position: sticky; top: 0;
}
table.tbl th .sort-ind { color: var(--text-faint); font-size: var(--fs-xs); }
table.tbl tr:last-child td { border-bottom: none; }
table.tbl tr:hover td { background: var(--bg-subtle); }
table.tbl .align-right { text-align: right; }
table.tbl .empty-row td { text-align: center; color: var(--text-faint); padding: var(--s5); white-space: normal; }

/* ---------- 拖拽区(ui.js createDropZone()) ---------- */
.dropzone {
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--bg-subtle);
  padding: var(--s5) var(--s4);
  text-align: center;
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color 120ms, background 120ms;
}
.dropzone:hover, .dropzone.drag-over { border-color: var(--accent); background: var(--bg-inset); }
.dropzone .dz-hint { font-size: var(--fs-sm); color: var(--text-faint); margin-top: var(--s1); }
.dropzone .dz-file { color: var(--ok); font-weight: 650; font-family: var(--font-mono); font-size: var(--fs-sm); }

/* ---------- 顶部工具栏(ui.js mountHeader()) ---------- */
.tool-header {
  border-bottom: 1px solid var(--border);
  background: var(--bg-subtle);
}
.tool-header .container {
  display: flex; align-items: center; gap: var(--s4);
  padding-top: var(--s3); padding-bottom: var(--s3);
  flex-wrap: wrap;
}
.tool-header .th-name { font-weight: 700; font-size: var(--fs-lg); }
.tool-header .th-privacy {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: var(--s2);
  color: var(--ok);
  background: var(--ok-bg);
  padding: var(--s1) var(--s3);
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  font-weight: 600;
}

/* ---------- 页脚(ui.js mountFooter()) ---------- */
.tool-footer .tf-cross { margin-bottom: var(--s2); }
.tool-footer .tf-brand a { font-weight: 650; }
.tool-footer {
  margin-top: var(--s8);
  border-top: 1px solid var(--border);
  padding: var(--s5) 0 var(--s7);
  color: var(--text-faint);
  font-size: var(--fs-sm);
}

/* ---------- toast(ui.js toast()) ---------- */
.toast-host {
  position: fixed; bottom: var(--s5); left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; gap: var(--s2);
  z-index: 1000;
  pointer-events: none;
}
.toast {
  padding: var(--s2) var(--s4);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  font-size: var(--fs-sm);
  font-weight: 600;
  animation: toast-in 160ms ease-out;
}
.toast-ok    { color: var(--ok);    background: var(--ok-bg); }
.toast-warn  { color: var(--warn);  background: var(--warn-bg); }
.toast-error { color: var(--error); background: var(--error-bg); }
.toast-info  { color: var(--info);  background: var(--info-bg); }
@keyframes toast-in { from { opacity: 0; transform: translateY(6px); } }

/* ---------- 列映射器(csv.js createColumnMapper()) ---------- */
.mapper { display: flex; flex-direction: column; gap: var(--s3); }
.mapper-row {
  display: grid;
  grid-template-columns: minmax(120px, 180px) minmax(160px, 1fr);
  gap: var(--s3);
  align-items: start;
}
.mapper-row .m-label { font-size: var(--fs-sm); font-weight: 600; padding-top: var(--s2); }
.mapper-row .m-label .m-hint { display: block; font-weight: 400; color: var(--text-faint); font-size: var(--fs-xs); }
.mapper-row .m-sample {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-faint);
  margin-top: var(--s1);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mapper-row select { width: 100%; }
.mapper-row select.m-guessed { border-color: var(--ok); }

/* ---- 语言切换器(D11 中英双语)。挂在 header 右上角,首页手写同款挂点 ---- */
.lang-switch { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.lang-btn {
  background: var(--bg); color: var(--text-muted); border: 0;
  padding: 2px var(--s3); font-size: var(--fs-xs); font-weight: 700; cursor: pointer;
}
.lang-btn + .lang-btn { border-left: 1px solid var(--border); }
.lang-btn.active { background: var(--accent); color: var(--accent-contrast); cursor: default; }
.lang-btn:not(.active):hover { background: var(--bg-inset); }