.doc-enhance-editor[hidden] { display: none; }
.doc-enhance-editor { display: grid; gap: 1rem; margin-top: 1rem; }
.doc-enhance-toolbar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.doc-enhance-toolbar label { display: grid; gap: .45rem; font-weight: 700; }
.doc-enhance-stage { position: relative; max-width: 760px; margin: 0 auto; background: #111827; border-radius: 12px; overflow: hidden; touch-action: none; }
.doc-enhance-stage canvas { display: block; width: 100%; height: auto; }
.doc-corner { position: absolute; width: 24px; height: 24px; margin: -12px; border: 3px solid #fff; border-radius: 50%; background: #2563eb; box-shadow: 0 2px 10px #0008; cursor: grab; }
.doc-corner:focus-visible { outline: 3px solid #fbbf24; outline-offset: 2px; }
.doc-corner-line { position: absolute; height: 3px; background: #60a5fa; transform-origin: 0 50%; pointer-events: none; }
.doc-enhance-compare { position: relative; max-width: 760px; margin: 1rem auto; overflow: hidden; background: #e5e7eb; border-radius: 12px; }
.doc-enhance-compare canvas { display: block; width: 100%; height: auto; }
#original-layer { position: absolute; inset: 0; width: 50%; overflow: hidden; }
#original-layer canvas { width: auto; max-width: none; height: 100%; }
#compare-range { position: absolute; left: 5%; right: 5%; bottom: 1rem; width: 90%; }
.doc-enhance-actions { display: flex; justify-content: center; gap: .75rem; flex-wrap: wrap; }
.doc-enhance-guide { margin-top: 1.5rem; }
@media (max-width: 700px) { .doc-enhance-toolbar { grid-template-columns: 1fr; } .doc-corner { width: 28px; height: 28px; margin: -14px; } }