/* Import-block modal — drag-drop SVG, preview, dimensions form. */

.import-block-card {
    max-width: 720px;
    width: calc(100vw - 2rem);
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    padding: 1.25rem;
}

/* ── Dropzone (no file yet) ─────────────────────────────────────── */

.ib-dropzone {
    border: 2px dashed var(--border);
    border-radius: 12px;
    padding: 2.4rem 1.5rem;
    text-align: center;
    background: var(--surface-2, #fafafa);
    transition: background .15s, border-color .15s;
    cursor: pointer;
}
.ib-dropzone:hover,
.ib-dropzone.is-active {
    background: rgba(17, 112, 207, 0.06);
    border-color: #1170cf;
}
.ib-dropzone:focus {
    outline: 2px solid #1170cf;
    outline-offset: 2px;
}
.ib-drop-hint {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
}

/* ── Preview (after file picked) ────────────────────────────────── */

.ib-preview-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 1rem;
    margin-top: .8rem;
}

.ib-preview-svg {
    border: 1px solid var(--border);
    border-radius: 10px;
    background:
        repeating-conic-gradient(#fff 0 25%, #f0f0f0 0 50%) 0 0/16px 16px;
    padding: .6rem;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.ib-preview-svg svg {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}

.ib-preview-form {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}
.ib-preview-form label {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    font-size: .82rem;
    color: var(--text-soft);
}
.ib-preview-form input {
    padding: .45rem .55rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    font-size: .92rem;
}

.ib-dim-row {
    display: flex;
    align-items: end;
    gap: .4rem;
}
.ib-dim-row label {
    flex: 1;
}
.ib-dim-row input {
    width: 100%;
}

.ib-stats {
    margin: 0 0 .6rem 0;
    font-size: .85rem;
    color: var(--text);
    padding: .5rem .6rem;
    background: rgba(58, 139, 110, 0.1);
    border-left: 3px solid #3a8b6e;
    border-radius: 6px;
}

.ib-error {
    margin: 0 0 .6rem 0;
    font-size: .85rem;
    color: var(--danger, #c33);
    padding: .5rem .6rem;
    background: rgba(204, 51, 51, 0.06);
    border-left: 3px solid var(--danger, #c33);
    border-radius: 6px;
}

/* Mobile: stack the preview + form vertically. */
@media (max-width: 600px) {
    .ib-preview-row {
        grid-template-columns: 1fr;
    }
    .ib-preview-svg {
        aspect-ratio: 4 / 3;
    }
}