/* Student Portal 1.7 — compact and expanded image editors */
.sp-universal-cropper {
    align-items: flex-start !important;
    padding: 18px !important;
    overflow-y: auto !important;
}

.sp-universal-cropper > div,
.sp-universal-cropper .sp-carousel-crop {
    width: min(1180px, calc(100vw - 36px)) !important;
    max-height: none !important;
    margin: 0 auto 40px !important;
}

.sp-universal-cropper h2 {
    position: relative;
    margin-top: 0 !important;
}

.sp-universal-crop-close {
    position: sticky !important;
    z-index: 20 !important;
    top: 0 !important;
    float: right;
}

.sp-inline-image-tools {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 7px;
    margin: 9px 0 4px;
    padding: 8px;
    overflow-x: auto;
    border: 1px solid #e2e8f0;
    border-radius: 13px;
    background: #fff;
}

.sp-inline-image-tools > button {
    display: grid !important;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    padding: 0 !important;
    place-items: center;
    border: 1px solid #dbe3ed !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: #334155 !important;
    line-height: 1 !important;
}

.sp-inline-image-tools > button.is-active {
    border-color: #60a5fa !important;
    background: #eff6ff !important;
    color: #1d4ed8 !important;
}

.sp-inline-image-tools > span {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 3px 7px;
    border-radius: 10px;
    background: #f8fafc;
}

.sp-inline-image-tools input[type="color"] { width: 30px; height: 30px; padding: 1px; }
.sp-inline-image-tools input[type="range"] { width: 96px; }
.sp-image-thumb-canvas.is-editing { pointer-events: auto; cursor: crosshair; }

.sp-image-viewer-v4 {
    display: grid !important;
    place-items: center;
    overflow: auto !important;
}

.sp-image-viewer-v4[hidden] { display: none !important; }

.sp-image-viewer-v4 .sp-image-viewer-shell {
    grid-template-columns: 54px minmax(0, 1fr) 54px !important;
    width: min(1280px, calc(100vw - 42px)) !important;
    min-height: 0 !important;
    max-height: calc(100vh - 36px);
    overflow-y: auto;
}

.sp-image-viewer-v4 .sp-image-viewer-stage {
    height: min(66vh, 680px) !important;
    overflow: auto !important;
}

.sp-image-viewer-v4 .sp-image-scroll > img {
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain;
}

.sp-image-viewer-v4 .sp-viewer-arrow {
    align-self: center;
    margin: 0 auto !important;
}

.sp-image-viewer-v4 .sp-viewer-caption,
.sp-image-viewer-v4 .sp-viewer-count {
    position: static !important;
    width: auto !important;
}

@media (max-width: 700px) {
    .sp-universal-cropper { padding: 7px !important; }
    .sp-universal-cropper > div,.sp-universal-cropper .sp-carousel-crop { width: 100% !important; }
    .sp-inline-image-tools input[type="range"] { width: 72px; }
    .sp-image-viewer-v4 .sp-image-viewer-shell { width: 100% !important; max-height: 97vh; }
}