.ft-app {
  --ft-p: var(--primary, #2563eb);
  --ft-ph: var(--primary-hover, #1d4ed8);
  --ft-pl: var(--primary-light, color-mix(in srgb, var(--primary,#2563eb) 12%, transparent));
  --ft-bg: var(--bg-card, #fff);
  --ft-tx: var(--text, #1f2937);
  --ft-txs: var(--text-soft, #6b7280);
  --ft-bd: var(--border, #e5e7eb);
  --ft-r: var(--radius, 14px);
  --ft-rs: var(--radius-sm, 9px);
}
.ft-app { display:flex; flex-direction:column; gap:16px; width:100%; color:var(--ft-tx); font-size:14px; line-height:1.6; }
.ft-app *, .ft-app *::before, .ft-app *::after { box-sizing:border-box; }
.ft-card { background:var(--ft-bg); border:1px solid var(--ft-bd); border-radius:var(--ft-r); padding:18px; }
.ft-label { display:block; font-size:13px; font-weight:600; color:var(--ft-tx); margin-bottom:6px; }
.ft-hint { font-size:12px; color:var(--ft-txs); margin-top:6px; }
.ft-ta, .ft-in, .ft-sel {
  width:100%; padding:10px 12px; font-size:14px; color:var(--ft-tx);
  background:var(--bg-input,#fff); border:1px solid var(--ft-bd);
  border-radius:var(--ft-rs); outline:none; font-family:inherit;
}
.ft-ta { min-height:110px; resize:vertical; }
.ft-ta:focus, .ft-in:focus, .ft-sel:focus { border-color:var(--ft-p); box-shadow:0 0 0 3px var(--ft-pl); }
.ft-row { display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; }
.ft-col { flex:1 1 160px; min-width:0; }
.ft-btn {
  padding:10px 16px; font-size:14px; font-weight:600; cursor:pointer;
  border:1px solid var(--ft-bd); border-radius:var(--ft-rs);
  background:var(--bg-input,#fff); color:var(--ft-tx); transition:.15s;
}
.ft-btn:hover { border-color:var(--ft-p); color:var(--ft-p); }
.ft-btn-p { background:var(--ft-p); border-color:var(--ft-p); color:#fff; }
.ft-btn-p:hover { background:var(--ft-ph); border-color:var(--ft-ph); color:#fff; }
.ft-btn-s { padding:6px 12px; font-size:13px; }
.ft-out {
  margin-top:12px; padding:14px 16px; border-radius:var(--ft-rs);
  background:var(--ft-pl); border:1px solid var(--ft-bd);
  font-size:15px; word-break:break-all; white-space:pre-wrap; min-height:52px;
}
.ft-out-big { font-size:17px; font-weight:600; letter-spacing:.5px; }
.ft-list { display:flex; flex-direction:column; gap:12px; }
.ft-item {
  display:flex; align-items:center; gap:12px; padding:14px 18px;
  border:1px solid var(--ft-bd); border-radius:var(--ft-rs); background:var(--bg-input,#fff);
}
.ft-item-name { flex:0 0 84px; font-size:12px; color:var(--ft-txs); }
.ft-item-val { flex:1 1 auto; font-size:16px; word-break:break-all; }
.ft-err { color:#b91c1c; }
.ft-ok { color:var(--ft-p); }
.ft-warn { color:#b45309; }
@media (max-width:560px) {
  .ft-item-name { flex:0 0 60px; font-size:11px; }
  .ft-row { flex-direction:column; align-items:stretch; }
}

.ft-item-val, .ft-out {
  font-family: "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols 2",
    "Cambria Math", "STIX Two Math", "DejaVu Sans", system-ui, sans-serif;
}

/* --- batch & extra widgets --- */
.ft-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.ft-stat { font-size:12px; color:var(--ft-txs); }
.ft-empty { padding:14px; text-align:center; color:var(--ft-txs); font-size:13px; border:1px dashed var(--ft-bd); border-radius:var(--ft-rs); }
.ft-copy, .ft-copy-s {
  padding:6px 12px; font-size:12px; font-weight:600; cursor:pointer; white-space:nowrap;
  border:1px solid var(--ft-bd); border-radius:var(--ft-rs);
  background:var(--bg-input,#fff); color:var(--ft-tx); transition:.15s;
}
.ft-copy:hover, .ft-copy-s:hover { border-color:var(--ft-p); color:var(--ft-p); }
.ft-ta { width:100%; padding:10px 12px; font-size:14px; color:var(--ft-tx); background:var(--bg-input,#fff);
  border:1px solid var(--ft-bd); border-radius:var(--ft-rs); outline:none; font-family:inherit; resize:vertical; }
.ft-ta:focus { border-color:var(--ft-p); box-shadow:0 0 0 3px var(--ft-pl); }
.ft-batch-out, .ft-list { display:flex; flex-direction:column; gap:8px; margin-top:12px; }
.ft-item { display:flex; align-items:center; gap:10px; padding:14px 18px; font-size:14px;
  border:1px solid var(--ft-bd); border-radius:var(--ft-rs); background:var(--bg-input,#fff); flex-wrap:wrap; }
.ft-item-k { font-size:12px; color:var(--ft-txs); white-space:nowrap; }
.ft-item-s { font-size:12px; color:var(--ft-txs); margin-left:auto; }
.ft-item-v { flex:1 1 auto; word-break:break-all; }
.ft-num { font-family:inherit; color:var(--ft-txs); }
.ft-bar-wrap { display:flex; align-items:center; gap:10px; margin-top:10px; }
.ft-bar-track { flex:1 1 auto; height:10px; border-radius:999px; background:var(--ft-pl); overflow:hidden; }
.ft-bar-fill { display:block; height:100%; border-radius:999px; background:var(--ft-p); transition:width .3s; }
.ft-bar-warn { background:#f59e0b; }
.ft-bar-over { background:#dc2626; }
.ft-bar-txt { font-size:12px; color:var(--ft-txs); min-width:38px; text-align:right; }
.ft-bars { display:flex; flex-direction:column; gap:8px; margin-top:12px; }
.ft-bar-row { display:flex; align-items:center; gap:10px; }
.ft-bar-k { flex:0 0 52px; font-size:12px; color:var(--ft-txs); }
.ft-bar-v { flex:0 0 58px; text-align:right; font-size:12px; color:var(--ft-txs); }

.ft-app input.ft-ta { min-height:auto; height:42px; resize:none; }

/* --- v1.2.0 additions --- */
.ft-col { flex:1 1 160px; min-width:0; }
.ft-sel { width:100%; height:40px; padding:0 10px; font-size:14px; color:var(--ft-tx);
  background:var(--bg-input,#fff); border:1px solid var(--ft-bd); border-radius:var(--ft-rs); outline:none; font-family:inherit; }
.ft-sel:focus { border-color:var(--ft-p); box-shadow:0 0 0 3px var(--ft-pl); }
.ft-star { flex:0 0 auto; padding:4px 8px; font-size:15px; line-height:1; cursor:pointer; border:1px solid transparent;
  border-radius:var(--ft-rs); background:transparent; color:#d1d5db; transition:.15s; }
.ft-star:hover { color:#f59e0b; }
.ft-star-on { color:#f59e0b; }

/* --- v1.3.0：还原输出 --- */
.ft-decode-out { display:block; padding:14px 18px; font-size:15px; border:1px solid var(--ft-bd); border-radius:var(--ft-rs);
  background:var(--bg-input,#fff); word-break:break-all; min-height:20px; }

/* v1.4.1 留白与空态 */
.ft-item { line-height:1.7; min-height:50px; }
.ft-item-k { line-height:1.6; }
.ft-item-v { line-height:1.6; }
.ft-out:empty, .ft-decode-out:empty, .ft-list:empty { display:none; }

/* v1.4.1 按钮列不参与拉伸 */
.ft-col-auto { flex:0 0 auto; }

/* v1.4.1 结果行留白：高特异性锁定 */
#ft-app .ft-item { padding:14px 18px; min-height:50px; line-height:1.7; box-sizing:border-box; }
#ft-app .ft-item-k { line-height:1.7; }
#ft-app .ft-item-v { line-height:1.7; }
#ft-app .ft-item-name { line-height:1.7; }
#ft-app .ft-item-val { line-height:1.7; }

/* v1.4.3 结果行之间统一间距，避免相邻行边框粘连 */
#ft-app .ft-card > .ft-item + .ft-item { margin-top:12px; }
#ft-app .ft-item { margin-bottom:0; }