/* 龙崽工具箱 v1 · components.css —— 通用组件 */
/* 按钮 */
.btn { display: inline-flex; align-items: center; gap: 7px; justify-content: center; cursor: pointer;
  border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text);
  padding: 9px 15px; border-radius: var(--radius-sm); font-weight: 550; line-height: 1;
  transition: transform .12s var(--ease), box-shadow .2s, background .2s, border-color .2s; white-space: nowrap; }
.btn:hover { border-color: var(--gold); background: var(--hover); }
.btn:active { transform: translateY(1px) scale(.99); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { background: linear-gradient(135deg, var(--gold-2), var(--gold)); color: #231C0E; border-color: transparent;
  box-shadow: var(--shadow-gold); font-weight: 650; }
.btn-primary:hover { filter: brightness(1.06); background: linear-gradient(135deg, var(--gold-2), var(--gold)); }
.btn-ghost { background: transparent; }
.btn-danger { background: linear-gradient(135deg, #E08B86, #C65B56); color: #fff; border-color: transparent; }
.btn-sm { padding: 6px 10px; font-size: 12.5px; border-radius: 7px; }
.btn-lg { padding: 12px 20px; font-size: 15.5px; }
.btn-block { width: 100%; }
.icon-btn { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; cursor: pointer;
  border: 1px solid transparent; background: transparent; color: var(--text-dim); transition: .15s; }
.icon-btn:hover { background: var(--hover); color: var(--gold-2); }

/* 表单 */
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label { font-size: 12.5px; color: var(--text-dim); font-weight: 550; }
.input, select, textarea { width: 100%; background: var(--input-bg); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 9px 12px; outline: none; transition: border-color .15s, box-shadow .15s; }
.input:focus, select:focus, textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-glow); }
textarea { resize: vertical; min-height: 72px; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text-dim) 50%), linear-gradient(135deg, var(--text-dim) 50%, transparent 50%);
  background-position: calc(100% - 16px) center, calc(100% - 11px) center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 32px; }
.input-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.switch { position: relative; width: 44px; height: 25px; flex: none; }
.switch input { display: none; }
.switch i { position: absolute; top:0;right:0;bottom:0;left:0;
 inset:0; background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: 999px; transition: .2s; cursor: pointer; }
.switch i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 19px; height: 19px; border-radius: 50%;
  background: var(--text-dim); transition: .2s var(--ease); }
.switch input:checked + i { background: linear-gradient(135deg, var(--gold-2), var(--gold)); border-color: transparent; }
.switch input:checked + i::after { transform: translateX(19px); background: #231C0E; }
.setting-row { display: flex; align-items: center; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--border); }
.setting-row:last-child { border-bottom: 0; }
.setting-row .txt b { display: block; } .setting-row .txt small { color: var(--text-dim); }

/* 卡片/统计 */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px;
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
 backdrop-filter: var(--glass-blur); }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.stat-card { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.stat-ico { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; color: var(--gold-2);
  background: var(--active-grad); border: 1px solid var(--border); }
.stat-num { font-size: 22px; font-weight: 700; line-height: 1.1; }
.stat-label { color: var(--text-dim); font-size: 12.5px; }

/* 徽标 */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600;
  border: 1px solid var(--border); white-space: nowrap; }
.st-exact { color: var(--exact); border-color:var(--border-strong);
 border-color: color-mix(in srgb, var(--exact) 45%, transparent); background:var(--surface-2);
 background: color-mix(in srgb, var(--exact) 13%, transparent); }
.st-corrected { color: var(--corrected); border-color:var(--border-strong);
 border-color: color-mix(in srgb, var(--corrected) 45%, transparent); background:var(--surface-2);
 background: color-mix(in srgb, var(--corrected) 14%, transparent); }
.st-review { color: var(--review); border-color:var(--border-strong);
 border-color: color-mix(in srgb, var(--review) 45%, transparent); background:var(--surface-2);
 background: color-mix(in srgb, var(--review) 14%, transparent); }
.st-extra { color: var(--extra); border-color:var(--border-strong);
 border-color: color-mix(in srgb, var(--extra) 45%, transparent); background:var(--surface-2);
 background: color-mix(in srgb, var(--extra) 13%, transparent); }
.st-unknown, .st-missing { color: var(--unknown); border-color:var(--border-strong);
 border-color: color-mix(in srgb, var(--unknown) 40%, transparent); background:var(--surface-2);
 background: color-mix(in srgb, var(--unknown) 12%, transparent); }
.st-duplicate { color: #C79BEA; border-color: rgba(199,155,234,.4); background: rgba(199,155,234,.12); }
.badge-kind { color: var(--gold-2); background: var(--active-grad); }

/* 表格 */
.table-wrap { overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tbl th { position: sticky; top: 0; z-index: 2; text-align: left; padding: 10px 12px; background: var(--head-bg);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px); color: var(--text-dim); font-weight: 600; border-bottom: 1px solid var(--border); white-space: nowrap; }
.tbl td { padding: 9px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.tbl tr:nth-child(even) td { background: var(--table-stripe); }
.tbl tr:hover td { background: var(--hover); }
.tbl .sn-cell { font-family: var(--mono); letter-spacing: .3px; }

/* 置信度 */
.conf { display: inline-flex; align-items: center; gap: 7px; min-width: 96px; }
.conf-track { width: 56px; height: 6px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.conf-fill { height: 100%; border-radius: 99px; }
.conf-hi { background: var(--exact); } .conf-mid { background: var(--corrected); } .conf-lo { background: var(--extra); }
.conf-num { font-size: 11.5px; color: var(--text-dim); }
.corrected b.fixed { color: var(--corrected); font-weight: 800; border-bottom: 1.5px wavy var(--corrected); cursor: help; }

/* toast */
.toast-wrap { position: fixed; top: 74px; left: 50%; transform: translateX(-50%); z-index: 4000; display: flex; flex-direction: column; gap: 9px; align-items: center; }
.toast { display: flex; align-items: center; gap: 9px; padding: 11px 18px; border-radius: 12px; max-width: min(90vw, 460px);
  background: var(--surface-solid); border: 1px solid var(--border-strong); box-shadow: var(--shadow-soft);
  animation: toast-in .28s var(--ease); }
.toast.leave { opacity: 0; transform: translateY(-8px); transition: .26s; }
.toast-success { border-color:var(--border-strong);
 border-color: color-mix(in srgb, var(--exact) 50%, transparent); }
.toast-error { border-color:var(--border-strong);
 border-color: color-mix(in srgb, var(--extra) 55%, transparent); }

/* modal */
.modal-mask { position: fixed; top:0;right:0;bottom:0;left:0;
 inset:0; z-index: 3000; background: var(--scrim); -webkit-backdrop-filter: blur(4px);
 backdrop-filter: blur(4px);
  display: grid; place-items: center; padding: 18px; animation: fade-in .2s; }
.modal-card { width: 100%; max-width: 560px; max-height: 88vh; display: flex; flex-direction: column;
  background: var(--surface-solid); border: 1px solid var(--border-strong); border-radius: 16px; box-shadow: var(--shadow-soft); animation: pop-in .24s var(--ease); }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--border); }
.modal-body { padding: 18px; overflow: auto; } .modal-scroll { overflow-y: auto; }
.modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 18px; border-top: 1px solid var(--border); }

/* loading */
.loading-mask { position: fixed; top:0;right:0;bottom:0;left:0;
 inset:0; z-index: 3500; display: grid; place-items: center; background: var(--scrim); }
.loading-box { display: flex; align-items: center; gap: 14px; padding: 18px 24px; border-radius: 14px; background: var(--surface-solid); border: 1px solid var(--border-strong); }
.spinner { width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid var(--border-strong); border-top-color: var(--gold); animation: spin .8s linear infinite; }

/* 空态 */
.empty-state { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 46px 20px; color: var(--text-faint); text-align: center; }
.empty-state .ic { opacity: .6; }
.section-title { display: flex; align-items: baseline; gap: 10px; font-weight: 650; margin: 4px 0 10px; }
.section-title small { color: var(--text-faint); font-weight: 400; }

/* 拖拽区 */
.dropzone { border: 1.6px dashed var(--border-strong); border-radius: var(--radius); padding: 30px; text-align: center;
  color: var(--text-dim); transition: .2s; cursor: pointer; background: var(--surface); }
.dropzone:hover, .dropzone.drag { border-color: var(--gold); background: var(--hover); color: var(--gold-2); }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); font-size: 12.5px; }
.progress { height: 7px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.progress > i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-deep), var(--gold-2)); border-radius: 99px; transition: width .25s; }

/* 命中位置 */
.hit-locs { display: flex; flex-wrap: wrap; gap: 5px; }
.hit-loc { font-size: 11.5px; padding: 2px 8px; border-radius: 6px; background:var(--surface-2);
 background: color-mix(in srgb, var(--exact) 12%, transparent);
  color: var(--exact); border: 1px solid color-mix(in srgb, var(--exact) 30%, transparent); }
.hit-none { font-size: 12px; color: var(--extra); }
.route-error { padding: 30px; } .route-error pre { white-space: pre-wrap; color: var(--extra); }