/* ===== Overlay ===== */
.dlg-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 16px;
}

/* ===== Box ===== */
.dlg-box {
    background: #F4F3EF;
    border-radius: 20px;
    width: 100%;
    max-width: min(540px, 95vw);
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 16px 48px rgba(0,0,0,0.22);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    display: flex;
    flex-direction: column;
}

.dlg-box--narrow { max-width: min(380px, 95vw); }
.dlg-box--medium { max-width: min(480px, 95vw); }

/* ===== Header ===== */
.dlg-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 16px 8px;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 5;
    background: #F4F3EF;
}

.dlg-header-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    flex: 1;
}

.dlg-kicker {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #9CA3AF;
}

.dlg-title {
    font-size: 18px;
    font-weight: 700;
    color: #111;
    margin: 0;
    text-align: center;
}

.dlg-close-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,0.06);
    cursor: pointer;
    color: #6B7280;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .12s;
}

.dlg-close-btn:hover { background: rgba(0,0,0,0.12); color: #111; }

/* ===== Body ===== */
.dlg-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 8px 16px 16px;
    flex: 1;
}

/* ===== Card ===== */
.dlg-card {
    background: #fff;
    border-radius: 14px;
    padding: 16px;
    border: 1px solid rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
}
.dlg-card > .cfg-label { margin-bottom: -4px; }
/* Le stepper de taille reste compact (largeur naturelle) au lieu de prendre toute la largeur */
.dlg-card > .sz-stepper { align-self: flex-start; }

.msg-card { text-align: center; }
.msg-text { font-size: 15px; color: #374151; line-height: 1.5; }

/* ===== Buttons ===== */
.valid-btn {
    width: 100%;
    min-height: 52px;
    border-radius: 14px;
    border: none;
    background: #111;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    touch-action: manipulation;
    transition: background .12s;
    flex-shrink: 0;
}

.valid-btn:hover { background: #333; }
.valid-btn:active { background: #000; }

.cancel-btn {
    flex: 1;
    min-height: 52px;
    border-radius: 14px;
    border: 1px solid rgba(0,0,0,0.10);
    background: #fff;
    color: #6B7280;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    touch-action: manipulation;
    transition: all .12s;
}

.cancel-btn:hover { background: #F3F4F6; color: #111; }

.action-row {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

/* ===== Back button (sub-dialogs) ===== */
.dlg-back-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,0.06);
    cursor: pointer;
    color: #6B7280;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .12s;
}
.dlg-back-btn:hover { background: rgba(0,0,0,0.12); color: #111; }

/* ===== Shared config-dialog utilities ===== */
.cfg-preview-card { background: #F9F8F5; overflow: hidden; }
.cfg-preview-card > * { max-width: 100%; }
.text-preview { width: 100%; max-width: 100%; max-height: 220px; overflow: hidden; }
.cfg-label {
    font-size: 12px; font-weight: 700; letter-spacing: .09em;
    text-transform: uppercase; color: #9CA3AF; margin-bottom: 6px;
}
.cfg-props-grid { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; margin-top: 4px; }
.cfg-prop-card {
    display: flex; align-items: center; gap: 12px; padding: 16px 14px;
    border-radius: 14px; border: 1px solid rgba(0,0,0,0.08);
    background: #FAFAF8; cursor: pointer; text-align: left; transition: all .15s;
    min-height: 56px; touch-action: manipulation;
}
.cfg-prop-card:hover { border-color: rgba(0,0,0,0.18); background: #F4F3EF; }
.cfg-prop-card--no-click { cursor: default; }
.cfg-prop-card--no-click:hover { border-color: rgba(0,0,0,0.08); background: #FAFAF8; }
.cfg-prop-icon  { font-size: 18px; color: #9CA3AF; flex-shrink: 0; width: 24px; text-align: center; }
.cfg-prop-title { font-size: 15px; font-weight: 600; color: #111; flex: 1; }
.cfg-prop-value { font-size: 13px; color: #9CA3AF; font-family: monospace; }
.cfg-color-dot  { width: 28px; height: 28px; border-radius: 7px; flex-shrink: 0; }
.cfg-reset-btn {
    width: 48px; height: 48px; border-radius: 12px; border: 1px solid rgba(0,0,0,0.08);
    background: #F9F8F5; cursor: pointer; color: #9CA3AF; font-size: 14px;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    touch-action: manipulation; transition: all .15s;
}
.cfg-reset-btn:hover { background: #FEE2E2; color: #EF4444; border-color: rgba(239,68,68,0.25); }