.dd-wrap{
	--dd-bg:#ffffff;--dd-surface:#f6f7fb;--dd-text:#1b1f2a;--dd-muted:#6a7285;--dd-border:#e1e4ee;
	--dd-accent:#4f46e5;--dd-accent-2:#7c3aed;--dd-accent-text:#ffffff;
	--dd-add:#16794a;--dd-add-bg:#e6f6ee;--dd-del:#b42318;--dd-del-bg:#fdeceb;--dd-mod:#9a5b00;--dd-mod-bg:#fff3dc;
	max-width:860px;margin:24px auto;background:var(--dd-bg);color:var(--dd-text);border:1px solid var(--dd-border);
	border-radius:16px;overflow:hidden;font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
	box-shadow:0 8px 30px rgba(20,24,40,.06);box-sizing:border-box;
}
.dd-wrap *,.dd-wrap *::before,.dd-wrap *::after{box-sizing:border-box}
.dd-wrap[data-theme="dark"],.dd-wrap.dd-is-dark{
	--dd-bg:#14161f;--dd-surface:#1c1f2b;--dd-text:#e8eaf3;--dd-muted:#9aa2b8;--dd-border:#2c3042;
	--dd-accent:#8b85ff;--dd-accent-2:#b18cff;--dd-accent-text:#10121a;
	--dd-add:#5fd49a;--dd-add-bg:#12301f;--dd-del:#ff8a80;--dd-del-bg:#35171a;--dd-mod:#ffc766;--dd-mod-bg:#352a12;
	box-shadow:0 8px 30px rgba(0,0,0,.35);
}
@media (prefers-color-scheme:dark){
	.dd-wrap[data-theme="auto"]:not(.dd-is-light){
		--dd-bg:#14161f;--dd-surface:#1c1f2b;--dd-text:#e8eaf3;--dd-muted:#9aa2b8;--dd-border:#2c3042;
		--dd-accent:#8b85ff;--dd-accent-2:#b18cff;--dd-accent-text:#10121a;
		--dd-add:#5fd49a;--dd-add-bg:#12301f;--dd-del:#ff8a80;--dd-del-bg:#35171a;--dd-mod:#ffc766;--dd-mod-bg:#352a12;
	}
}

/* Header */
.dd-header{display:flex;align-items:center;gap:14px;padding:18px 22px;border-bottom:1px solid var(--dd-border);background:var(--dd-surface)}
.dd-icon{flex:none;width:46px;height:46px;border-radius:12px;display:grid;place-items:center;color:var(--dd-accent-text);background:linear-gradient(135deg,var(--dd-accent),var(--dd-accent-2))}
.dd-titles{flex:1;min-width:0}
.dd-title{margin:0;font-size:20px;line-height:1.25;font-weight:700;color:var(--dd-text);letter-spacing:-.01em}
.dd-subtitle{margin:2px 0 0;font-size:13.5px;color:var(--dd-muted)}
.dd-theme-btn{flex:none;width:38px;height:38px;border-radius:10px;border:1px solid var(--dd-border);background:var(--dd-bg);color:var(--dd-text);cursor:pointer;display:grid;place-items:center;padding:0}
.dd-theme-btn:hover{border-color:var(--dd-accent)}
.dd-theme-btn .dd-moon{display:none}
.dd-wrap.dd-is-dark .dd-theme-btn .dd-sun,.dd-wrap[data-theme="dark"] .dd-theme-btn .dd-sun{display:none}
.dd-wrap.dd-is-dark .dd-theme-btn .dd-moon,.dd-wrap[data-theme="dark"] .dd-theme-btn .dd-moon{display:block}
.dd-wrap.dd-is-light .dd-theme-btn .dd-sun{display:block}
.dd-wrap.dd-is-light .dd-theme-btn .dd-moon{display:none}

/* Body */
.dd-body{padding:22px}
.dd-desc{margin:0 0 18px;color:var(--dd-muted)}
.dd-drops{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.dd-drop{position:relative;display:flex;flex-direction:column;gap:2px;padding:16px;border:1.5px dashed var(--dd-border);border-radius:12px;background:var(--dd-surface);cursor:pointer;transition:border-color .15s,background .15s;min-height:104px}
.dd-drop:hover,.dd-drop.dd-over{border-color:var(--dd-accent)}
.dd-drop.dd-has{border-style:solid;border-color:var(--dd-accent)}
.dd-drop input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.dd-drop-tag{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;font-size:12px;font-weight:700;color:var(--dd-accent-text);background:var(--dd-accent);margin-bottom:6px}
.dd-drop-label{font-weight:600;font-size:14px}
.dd-drop-name{font-size:13px;color:var(--dd-muted);word-break:break-all}
.dd-hint{margin:10px 0 14px;font-size:12.5px;color:var(--dd-muted)}
.dd-btn{display:inline-flex;align-items:center;justify-content:center;padding:11px 20px;border-radius:10px;border:1px solid var(--dd-border);background:var(--dd-surface);color:var(--dd-text);font:600 14px/1 inherit;font-family:inherit;cursor:pointer;transition:opacity .15s,border-color .15s}
.dd-btn:hover{border-color:var(--dd-accent)}
.dd-btn[disabled]{opacity:.6;cursor:wait}
.dd-primary{background:linear-gradient(135deg,var(--dd-accent),var(--dd-accent-2));color:var(--dd-accent-text);border-color:transparent}
.dd-ghost{background:transparent}
.dd-msg{margin-top:12px;padding:10px 14px;border-radius:10px;background:var(--dd-del-bg);color:var(--dd-del);font-size:13.5px}
.dd-msg[hidden],.dd-result[hidden]{display:none}

/* Results */
.dd-result{margin-top:26px;padding-top:22px;border-top:1px solid var(--dd-border)}
.dd-verdict{font-size:17px;font-weight:700;margin-bottom:12px}
.dd-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:6px}
.dd-stat{padding:12px;border-radius:12px;background:var(--dd-surface);border:1px solid var(--dd-border);text-align:center}
.dd-stat b{display:block;font-size:22px;line-height:1.2}
.dd-stat span{font-size:12px;color:var(--dd-muted)}
.dd-stat.add b{color:var(--dd-add)}.dd-stat.del b{color:var(--dd-del)}.dd-stat.mod b{color:var(--dd-mod)}
.dd-h3{margin:22px 0 10px;font-size:15px;font-weight:700;color:var(--dd-text)}
.dd-bullets{margin:0;padding-left:20px}
.dd-bullets li{margin:4px 0}
.dd-change{border:1px solid var(--dd-border);border-radius:12px;padding:12px 14px;margin-bottom:10px;background:var(--dd-bg)}
.dd-change-h{display:flex;gap:8px;align-items:center;margin-bottom:8px;font-size:12.5px;color:var(--dd-muted)}
.dd-badge{padding:2px 9px;border-radius:99px;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em}
.dd-badge.added{background:var(--dd-add-bg);color:var(--dd-add)}
.dd-badge.removed{background:var(--dd-del-bg);color:var(--dd-del)}
.dd-badge.modified{background:var(--dd-mod-bg);color:var(--dd-mod)}
.dd-line{padding:6px 10px;border-radius:8px;margin:4px 0;font-size:13.5px;word-break:break-word;white-space:pre-wrap}
.dd-line.b{background:var(--dd-del-bg)}.dd-line.a{background:var(--dd-add-bg)}
.dd-note{margin-top:6px;font-size:12.5px;color:var(--dd-muted)}
.dd-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.dd-remaining{margin:12px 0 0;font-size:12.5px;color:var(--dd-muted)}

/* Footer */
.dd-footer{padding:14px 22px;text-align:center;font-size:12.5px;color:var(--dd-muted);border-top:1px solid var(--dd-border);background:var(--dd-surface)}
.dd-footer a{color:var(--dd-accent)}

@media (max-width:560px){
	.dd-drops{grid-template-columns:1fr}
	.dd-stats{grid-template-columns:repeat(2,1fr)}
	.dd-header{padding:14px 16px}.dd-body{padding:16px}
}