.canvas-stage canvas {
    display: block;
    background: var(--design-canvas-bg);
    box-shadow: var(--shadow-lg);
    border-radius: 2px;
    touch-action: none;
    cursor: default;
    user-select: none;
    -webkit-user-select: none;
}

/* Ad banner placement varies with layout */

.ad-banner span {
    padding: 6px 14px;
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-sm);
}

/* When empty, empty-state overlay sits ON TOP of the (still rendered) canvas
   so canvas sizing/render works even before a main image is chosen. */
.empty-state {
    pointer-events: auto;
}

/* On-canvas inline text editing overlay */
.inline-text-editor {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 12;
    pointer-events: none;
}

.inline-text-editor .inline-text-input {
    display: block;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 1.5px dashed var(--color-primary);
    border-radius: 4px;
    background: #ffffff;
    color: var(--color-text);
    text-align: center;
    vertical-align: middle;
    resize: none;
    overflow: hidden;
    outline: none;
    box-shadow: var(--shadow-md);
    font-family: inherit;
    line-height: 1.2;
    caret-color: var(--color-primary);
    -webkit-appearance: none;
    appearance: none;
    pointer-events: auto;
}

/* ===== Interactive crop mode (js/interaction/CropController.js) ===== */

/* While cropping, the work area owns every pointer: the element quick bar and
   the selection gizmos are gone, and only the crop rectangle is draggable. */
.app.crop-mode .el-quickbar {
    display: none;
}

.app.crop-mode .bottom-sheet,
.app.crop-mode .sheet-backdrop {
    /* The crop is confirmed / cancelled from the floating toolbar, so the
       sheet must never be part of the cropping flow. */
    visibility: hidden;
}

/* The small contextual crop toolbar. It floats over the work area itself, so
   the user keeps looking at the design and never has to go back to a sheet. */
.crop-toolbar {
    position: absolute;
    top: var(--space-3);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-2);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    box-shadow: var(--shadow-lg);
    /* Above the sheet backdrop (45) and the quick bar (46), below the sheet
       itself (50) - which crop mode hides anyway. */
    z-index: 47;
    max-width: calc(100% - var(--space-6));
}

.crop-size {
    font-size: var(--font-size-xs);
    font-weight: 700;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    padding: 0 var(--space-1);
    min-width: 72px;
    text-align: center;
}

.crop-btn {
    width: var(--touch-min);
    height: var(--touch-min);
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--color-border-strong);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast),
        border-color var(--transition-fast), transform var(--transition-fast);
}

.crop-btn:active {
    transform: translateY(1px);
}

.crop-confirm {
    background: #16a34a;
    border-color: #16a34a;
    color: #fff;
}

.crop-confirm:hover {
    background: #15803d;
    border-color: #15803d;
}

.crop-cancel:hover {
    background: var(--color-surface-muted);
    border-color: var(--color-border-strong);
}

/* Aspect-ratio chips inside the per-image crop toolbar. */
.crop-aspects {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 var(--space-1);
    border-inline-start: 1px solid var(--color-border);
    border-inline-end: 1px solid var(--color-border);
}

.crop-aspect {
    border: 1px solid transparent;
    background: transparent;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: 700;
    border-radius: 999px;
    padding: 6px 10px;
    cursor: pointer;
    white-space: nowrap;
}

.crop-aspect.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

/* The «قص» button in المقاس carries a small crop glyph. */
.crop-btn-icon {
    font-size: 18px;
    line-height: 1;
}