/* ── Animations ─────────────────────────────────────────────────────────── */
.toast { animation: slideIn 0.3s ease, fadeOut 0.4s ease 2.6s forwards; }
@keyframes slideIn { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeOut { from { opacity:1; } to { opacity:0; pointer-events:none; } }

/* ── Range inputs ───────────────────────────────────────────────────────── */
input[type=range] { -webkit-appearance:none; height:6px; border-radius:9999px; outline:none; background:rgb(226 232 240); }
.dark input[type=range] { background:rgb(30 41 59); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:16px; height:16px; border-radius:50%; background:#4f46e5; cursor:pointer; border:2px solid white; box-shadow:0 1px 3px rgba(0,0,0,.3); }

/* ── Tabs ───────────────────────────────────────────────────────────────── */
.tab-btn { transition:all .2s; }
.tab-btn.active { background:#4f46e5; color:white; }

/* ── Workspace / modal visibility helpers ───────────────────────────────── */
#workspace    { display:none; }
#workspace.flex { display:flex; }
#cropModal    { display:none; }
#cropModal.flex { display:flex; }

/* ── Crop aspect buttons ────────────────────────────────────────────────── */
.crop-aspect-btn {
    padding: 0.375rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    transition: all 0.15s;
    background: rgb(241 245 249);
    color: rgb(71 85 105);
}
.dark .crop-aspect-btn {
    background: rgb(30 41 59);
    color: rgb(148 163 184);
}
.crop-aspect-btn:hover {
    background: rgb(226 232 240);
}
.dark .crop-aspect-btn:hover {
    background: rgb(51 65 85);
}
.crop-aspect-btn.active {
    background: #4f46e5;
    color: white;
}

/* ── Eraser modal layout ────────────────────────────────────────────────── */
#eraserModal { display:none; }
#eraserModal.open { display:flex; flex-direction:column; }

.eraser-viewport {
    background-color: #1a1a2e;
    background-image: repeating-conic-gradient(#252538 0% 25%, #1a1a2e 0% 50%);
    background-size: 16px 16px;
}

/* ── Eraser cursor ring ─────────────────────────────────────────────────── */
.eraser-cursor {
    border: 2px solid rgba(255,255,255,0.9);
    box-shadow: 0 0 0 1px rgba(0,0,0,0.5);
    pointer-events: none;
}
.eraser-cursor.restore-mode {
    border-color: #86efac;
}

/* ── Eraser mode buttons ────────────────────────────────────────────────── */
.eraser-mode-btn {
    background: rgb(241 245 249);
    color: rgb(71 85 105);
}
.dark .eraser-mode-btn {
    background: rgb(30 41 59);
    color: rgb(148 163 184);
}
.eraser-mode-btn.active {
    background: #4f46e5;
    color: white;
}
.eraser-mode-btn.active.restore-active {
    background: #059669;
    color: white;
}

/* ── Preview toggle button ──────────────────────────────────────────────── */
.eraser-preview-btn.previewing {
    background: rgb(234 179 8);
    color: white;
    border-color: rgb(234 179 8);
}

/* ── Magnifier ──────────────────────────────────────────────────────────── */
.eraser-magnifier {
    border: 2px solid rgba(255,255,255,0.75);
    box-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 0 0 1px rgba(0,0,0,0.3);
    transition: opacity 0.1s;
}

/* ── Style grid ─────────────────────────────────────────────────────────── */
#styleGrid button { transition:transform 0.15s, box-shadow 0.15s; }