/* Cabeçalho da etapa */
.fi-rs-head {
    display: flex;
    align-items: center;
    gap: .5rem 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.fi-rs-head .fi-step-title { font-size: 1.35rem; }
.fi-rs-info {
    flex: 1 1 12rem;
    min-width: 0;
    margin: 0;
    color: var(--fi-ink);
    font-size: .92rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fi-rs-head .fi-restart { margin: 0; white-space: nowrap; }
 
/* ---------- Barra de opções (horizontal) ---------- */
.fi-toolbar {
    margin-bottom: 1rem;
    padding: .9rem 1.1rem;
    background: #fff;
    border: 1px solid var(--up-border);
    border-radius: 20px;
}
.fi-tb-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .9rem 1.5rem;
}
 
/* largura x altura */
.fi-tb-size { display: flex; align-items: flex-end; gap: .5rem; }
.fi-tb-x { padding-bottom: .6rem; color: var(--fi-ink); font-weight: 700; }
.fi-tb-limit { padding-bottom: .65rem; font-size: .85rem; color: var(--fi-ink); white-space: nowrap; }
.fi-toolbar .fi-field { width: 120px; }
 
.fi-field label,
.fi-field-label {
    display: block;
    margin-bottom: .35rem;
    font-size: .85rem;
    font-weight: 700;
}
.fi-field input[type="number"] {
    width: 100%;
    padding: .6rem .75rem;
    border: 2px solid var(--up-border);
    border-radius: 12px;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--up-ink);
    background: #fff;
}
.fi-field input[type="number"]:focus {
    outline: none;
    border-color: var(--up-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--up-accent) 20%, transparent);
}
 
/* caixinhas (manter proporção, exibir grade) */
.fi-check { display: flex; align-items: center; gap: .6rem; font-weight: 600; white-space: nowrap; }
.fi-check input { width: 1.1rem; height: 1.1rem; accent-color: var(--up-accent); }
.fi-tb-row > .fi-check { margin: 0 0 .6rem; }
 
/* botão principal, no canto direito */
.fi-tb-submit {
    width: auto;
    margin-left: auto;
    padding: .8rem 1.5rem;
    font-size: 1.05rem;
    white-space: nowrap;
}
 
/* segunda linha: só aparece com "Exibir grade" */
.fi-tb-grid {
    align-items: center;
    margin-top: .9rem;
    padding-top: .9rem;
    border-top: 1px solid var(--up-border);
}
.fi-tb-ratios { display: flex; align-items: center; gap: .75rem; }
.fi-tb-ratios .fi-field-label { margin: 0; }
 
.fi-toolbar .fi-ratios { display: flex; gap: .4rem; margin: 0; }
.fi-ratio {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .4rem .7rem;
    border: 2px solid var(--up-border);
    border-radius: 12px;
    font-size: .85rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color .15s, background-color .15s;
}
.fi-ratio input { position: absolute; opacity: 0; pointer-events: none; }
.fi-ratio:hover { border-color: color-mix(in srgb, var(--up-accent) 50%, white); }
.fi-ratio:has(input:checked) {
    border-color: var(--up-accent);
    background: color-mix(in srgb, var(--up-accent) 8%, white);
    color: var(--up-accent);
}
.fi-ratio:has(input:focus-visible) { outline: 3px solid var(--up-accent); outline-offset: 2px; }
.fi-ratio-shape {
    display: block;
    height: 16px;
    aspect-ratio: var(--r);
    border: 2px solid currentColor;
    border-radius: 3px;
}
 
.fi-toolbar .fi-zoom-row { display: flex; align-items: center; gap: .6rem; margin: 0; }
.fi-toolbar .fi-zoom-row .fi-field-label { margin: 0; }
.fi-toolbar .fi-zoom-row input[type="range"] { width: 150px; accent-color: var(--up-accent); }
 
.fi-tb-notes { display: flex; flex-direction: column; gap: .1rem; }
.fi-tb-note { font-size: .85rem; color: var(--fi-ink); }
 
/* ---------- Palco: miniatura no meio ---------- */
/* A altura desconta cabeçalho + barra, para tudo caber na tela.
   Se a barra ficar maior/menor, ajuste os números do calc(). */
.fi-stage {
    display: grid;
    place-items: center;
    height: clamp(240px, calc(100vh - 400px), 560px);
    padding: 1rem;
    border: 1px solid var(--up-border);
    border-radius: 20px;
    overflow: hidden;
    /* xadrez, para mostrar transparência de PNG/WEBP */
    background-color: #fff;
    background-image: conic-gradient(#eef0f7 25%, transparent 0 50%, #eef0f7 0 75%, transparent 0);
    background-size: 20px 20px;
}
/* com a grade ligada a barra ganha uma segunda linha */
.fi-uploader:has([data-rs="grid"]:checked) .fi-stage {
    height: clamp(220px, calc(100vh - 480px), 560px);
}
@media (max-width: 767.98px) {
    .fi-stage,
    .fi-uploader:has([data-rs="grid"]:checked) .fi-stage { height: clamp(260px, 50vh, 420px); }
    .fi-tb-submit { width: 100%; margin-left: 0; }
}
 
.fi-frame {
    position: relative;
    overflow: hidden;
    box-shadow: 0 6px 24px rgba(30, 35, 70, .18);
    background: #fff;
    touch-action: auto;
}
.fi-frame img {
    position: absolute;
    left: 0; top: 0;
    max-width: none;
    width: 100%;
    height: 100%;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}
 
/* modo grade: dá para arrastar */
.fi-frame.is-crop {
    outline: 2px solid var(--up-accent);
    cursor: grab;
    touch-action: none;
}
.fi-frame.is-crop.is-dragging { cursor: grabbing; }
.fi-frame:focus-visible { outline: 3px solid var(--up-accent); outline-offset: 3px; }
 
/* grade 3x3 por cima da imagem */
.fi-grid-overlay { position: absolute; inset: 0; pointer-events: none; }
.fi-grid-overlay i {
    position: absolute;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .28);
}
.fi-grid-overlay .v { top: 0; bottom: 0; width: 1px; }
.fi-grid-overlay .h { left: 0; right: 0; height: 1px; }
 
.fi-stage-hint {
    margin: .6rem 0 0;
    font-size: .88rem;
    color: var(--fi-ink);
    text-align: center;
}