.dfx{--bg:#0b1324;--card:#101a33;--muted:#9fb0d5;--text:#eaf1ff;--border:#27365a;--accent:#5b8cff;--accent2:#6be0b5;--del:#ff5b6b33;--ins:#6be0b533;--del-border:#ff5b6b;--ins-border:#34c596;--chip:#1a2748}
.dfx *{box-sizing:border-box;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
.dfx{padding:16px;background:var(--bg);color:var(--text)}
.dfx-card{max-width:1100px;margin:0 auto;background:var(--card);border:1px solid var(--border);border-radius:16px;padding:18px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.dfx-title{margin:0 0 6px;font-size:1.6rem}
.dfx-sub{margin:.2rem 0 1rem;color:var(--muted)}
.dfx-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.dfx-col{display:flex;flex-direction:column;gap:6px}
.dfx-label{font-weight:600;color:var(--muted)}
.dfx-text{min-height:200px;width:100%;padding:10px 12px;border-radius:12px;border:1px solid var(--border);background:#0f1a30;color:var(--text);resize:vertical}
.dfx-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.dfx-btn{padding:10px 14px;border-radius:10px;border:0;background:linear-gradient(135deg,var(--accent),#8aa8ff);color:white;font-weight:700;cursor:pointer}
.dfx-btn:hover{filter:brightness(1.05)}
.dfx-btn-secondary{background:#1a284a;border:1px solid var(--border)}
.dfx-btn-lite{background:#142347;border:1px solid var(--border);color:#cfe1ff}
.dfx-controls{border-top:1px solid var(--border);margin-top:12px;padding-top:12px}
.dfx-switch{display:flex;gap:6px;align-items:center;color:var(--muted)}
.dfx-meta{font-size:.85rem;color:var(--muted)}
.dfx-results{margin-top:16px}
.dfx-section{margin-top:16px}
.dfx-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.dfx-meter{border:1px solid var(--border);border-radius:10px;padding:10px;background:#0e1831}
.dfx-meter h4{margin:0 0 6px;font-size:1rem}
.dfx-bar{height:8px;border-radius:6px;background:#0d1a33;overflow:hidden;margin-top:6px}
.dfx-bar>span{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));width:0%}
.dfx-list{margin:.2rem 0 0 1.1rem}
.dfx-note{color:var(--muted);margin:0 0 .5rem}
.dfx-diff-wrap{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.dfx-diff-col{display:flex;flex-direction:column;gap:6px}
.dfx-chip{display:inline-block;background:var(--chip);padding:6px 10px;border-radius:999px;color:#cfe1ff;font-weight:700;font-size:.85rem}
.dfx-diff{min-height:120px;white-space:pre-wrap;border:1px solid var(--border);border-radius:12px;background:#0e1831;padding:10px;line-height:1.6}
.dfx-del{background:var(--del);border-bottom:2px solid var(--del-border)}
.dfx-ins{background:var(--ins);border-bottom:2px solid var(--ins-border)}
.dfx-del-swatch,.dfx-ins-swatch{display:inline-block;width:40px;height:10px;border-radius:3px;vertical-align:middle}
.dfx-del-swatch{background:var(--del);border:1px solid var(--del-border)}
.dfx-ins-swatch{background:var(--ins);border:1px solid var(--ins-border)}
.dfx-compact .dfx-del,.dfx-compact .dfx-ins{padding:0 2px;border-bottom-width:1px}
@media (max-width:900px){.dfx-grid,.dfx-diff-wrap{grid-template-columns:1fr}}