/* Rotate Image */
.roi-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.roi-count { font-size: 14px; font-weight: 700; color: #1e293b; }
.roi-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.roi-btn { padding: 8px 12px; border-radius: 10px; background: #f1f5f9; color: #334155; font-size: 13px; font-weight: 600; border: 1px solid #e2e8f0; cursor: pointer; min-height: 40px; display: inline-flex; align-items: center; gap: 6px; }
.roi-btn:hover { background: #e2e8f0; }
.roi-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 480px) { .roi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 800px) { .roi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.roi-card { border: 1px solid #e2e8f0; border-radius: 14px; background: #f8fafc; padding: 10px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.roi-name { margin: 0; font-size: 12px; font-weight: 700; color: #334155; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.roi-view { display: flex; align-items: center; justify-content: center; height: 230px; border-radius: 8px; overflow: hidden; background-color: #fff; background-image: linear-gradient(45deg, #e2e8f0 25%, transparent 25%, transparent 75%, #e2e8f0 75%), linear-gradient(45deg, #e2e8f0 25%, transparent 25%, transparent 75%, #e2e8f0 75%); background-size: 16px 16px; background-position: 0 0, 8px 8px; }
.roi-view canvas { max-width: 100%; max-height: 100%; }
.roi-size { margin: 0; font-size: 11px; color: #64748b; text-align: center; }
.roi-tools { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.roi-icon { width: 38px; height: 38px; border-radius: 10px; border: 1px solid #e2e8f0; background: #fff; color: #334155; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; }
.roi-icon:hover { background: #e0e7ff; }
.roi-angle-row { display: flex; justify-content: space-between; font-size: 12px; font-weight: 600; color: #334155; }
.roi-angle { width: 100%; min-height: 28px; }
.roi-one { padding: 8px 10px; border-radius: 10px; border: 1px solid #c7d2fe; background: #eef2ff; color: #3730a3; font-size: 12px; font-weight: 700; cursor: pointer; min-height: 40px; }
.roi-one:hover { background: #e0e7ff; }
.roi-options { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 18px 0; }
@media (min-width: 640px) { .roi-options { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.roi-label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 4px; color: #1e293b; }
.roi-field { width: 100%; padding: 9px 10px; border: 1px solid #cbd5e1; border-radius: 10px; background: #fff; color: #0f172a; font-size: 14px; min-height: 40px; }
.roi-note { font-size: 12px; color: #64748b; margin: 4px 0 0; min-height: 16px; }
.roi-progress { font-size: 13px; color: #475569; text-align: center; min-height: 18px; margin: 8px 0 0; }
.roi-main { width: 100%; padding: 14px 16px; border-radius: 12px; background: #4f46e5; color: #fff; font-weight: 700; border: 0; cursor: pointer; min-height: 46px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.roi-main:hover:not(:disabled) { background: #4338ca; }
.roi-main:disabled { opacity: 0.5; cursor: not-allowed; }
.dark .roi-count, .dark .roi-label, .dark .roi-name, .dark .roi-angle-row { color: #e2e8f0; }
.dark .roi-btn { background: #334155; border-color: #475569; color: #e2e8f0; }
.dark .roi-btn:hover { background: #475569; }
.dark .roi-card { background: #0f172a; border-color: #334155; }
.dark .roi-view { background-color: #1e293b; background-image: linear-gradient(45deg, #334155 25%, transparent 25%, transparent 75%, #334155 75%), linear-gradient(45deg, #334155 25%, transparent 25%, transparent 75%, #334155 75%); }
.dark .roi-icon { background: #334155; border-color: #475569; color: #e2e8f0; }
.dark .roi-icon:hover { background: #475569; }
.dark .roi-one { background: #1e1b4b; border-color: #3730a3; color: #c7d2fe; }
.dark .roi-field { background: #334155; border-color: #475569; color: #f1f5f9; }
.dark .roi-size, .dark .roi-note, .dark .roi-progress { color: #94a3b8; }
.roi-flush { margin: 0; }