.tool-app .cc-app{display:flex;flex-direction:column;gap:16px;color:var(--zl-ink)}
.tool-app .cc-app *{box-sizing:border-box}
.tool-app .cc-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:16px;align-items:start}
.tool-app .cc-panel{background:var(--zl-surface-2);border:1px solid var(--zl-line);border-radius:var(--zl-r);padding:18px}
.tool-app .field{display:flex;flex-direction:column;gap:6px;min-width:0}
.tool-app .field label{font:600 14px var(--zl-font-head);color:var(--zl-ink)}
.tool-app .field input,.tool-app .field select{width:100%;min-height:48px;padding:0 12px;font-size:16px}
.tool-app #amountInput{font:600 22px var(--zl-font-head);min-height:56px}
.tool-app .quick-row{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 16px}
.tool-app .quick-chip,.tool-app .pair-chip{min-height:44px;padding:0 16px;border-radius:999px;border:1.5px solid var(--zl-line-2);background:var(--zl-surface);color:var(--zl-ink);font:500 14.5px var(--zl-font-head);cursor:pointer}
.tool-app .quick-chip:hover,.tool-app .pair-chip:hover{border-color:var(--zl-accent)}
.tool-app .fields-grid{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:12px;align-items:end}
.tool-app .cur-col{display:flex;flex-direction:column;gap:10px;min-width:0}
.tool-app .swap-wrap{display:flex;align-items:flex-end;padding-bottom:2px}
.tool-app .swap-btn{width:44px;height:44px;border-radius:999px;border:1.5px solid var(--zl-line-2);background:var(--zl-surface);color:var(--zl-accent);display:grid;place-items:center;cursor:pointer}
.tool-app .swap-btn:hover{border-color:var(--zl-accent);background:var(--zl-tint)}
.tool-app .fee-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.tool-app .cc-result{background:var(--zl-surface);display:flex;flex-direction:column;gap:6px}
.tool-app .result-label{margin:0;color:var(--zl-muted);font:500 14px var(--zl-font-head)}
.tool-app .converted-amount{margin:0;font:600 clamp(28px,3.4vw,40px)/1.15 var(--zl-font-head);color:var(--zl-accent-strong);overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.tool-app .converted-meta{margin:0 0 6px;color:var(--zl-ink-2);font-size:15px}
.tool-app .rate-list{margin:6px 0 0;display:grid;gap:0}
.tool-app .rate-list div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--zl-line)}
.tool-app .rate-list dt{color:var(--zl-muted);font-size:14.5px}
.tool-app .rate-list dd{margin:0;font:600 14.5px var(--zl-font-head);text-align:right;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.tool-app .status-line{margin-top:8px;padding:10px 12px;border-radius:12px;font-size:14.5px;line-height:1.5}
.tool-app .status-line.good{background:var(--zl-success-soft);color:var(--zl-success)}
.tool-app .status-line.warn{background:var(--zl-surface-2);color:var(--zl-muted)}
.tool-app .status-line.danger{background:var(--zl-danger-soft);color:var(--zl-danger)}
.tool-app .result-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.tool-app .result-actions button{flex:1 1 auto}
.tool-app .cc-pairs .zl-ui-title{margin-bottom:8px}
.tool-app .pair-row{display:flex;flex-wrap:wrap;gap:8px}
.tool-app .recent-wrap{margin-top:14px}
.tool-app .market-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px;margin-top:8px}
.tool-app .market-item{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:baseline;padding:9px 0;border-top:1px solid var(--zl-line)}
.tool-app .market-pair{font:600 14.5px var(--zl-font-head)}
.tool-app .market-name{color:var(--zl-muted);font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tool-app .market-rate{font:600 14.5px var(--zl-font-head);font-variant-numeric:tabular-nums}
.tool-app .empty{margin:0;color:var(--zl-muted)}
.tool-app .hidden{display:none!important}
@media (max-width:900px){.tool-app .cc-grid{grid-template-columns:1fr}}
@media (max-width:640px){
.tool-app .cc-panel{padding:14px}
.tool-app .fields-grid{grid-template-columns:1fr}
.tool-app .swap-wrap{justify-content:center;padding:0}
.tool-app .swap-btn{transform:rotate(90deg)}
.tool-app .market-list{grid-template-columns:1fr}
.tool-app .market-name{display:none}
.tool-app .market-item{grid-template-columns:1fr auto}
}
@media (max-width:420px){.tool-app .fee-grid{grid-template-columns:1fr}}
.tool-app .converted-amount.is-error{font-size:24px;color:var(--zl-danger)}