/* alert-config — styles page (migration DA, ne pas dupliquer la coque) */

@font-face { font-family: 'American Captain'; src: url('/cache/fonts/american%20captain.ttf') format('truetype'); font-weight: 400; font-style: normal; }

        .preview-alert { height: 280px; min-height: 280px; border-radius: 8px; overflow: hidden; display: block; width: 100%; border: none; background: #0f0f0f; }

        .alert-basic-layout-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 0.65rem;
        }
        .alert-basic-layout-option {
            position: relative;
            display: flex;
            align-items: center;
            gap: 0.55rem;
            padding: 0.75rem;
            min-height: 74px;
            border-radius: 10px;
            border: 1px solid rgba(255, 255, 255, 0.14);
            background: rgba(255, 255, 255, 0.055);
            color: rgba(255, 255, 255, 0.78);
            cursor: pointer;
            transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
        }
        .alert-basic-layout-option:hover {
            transform: translateY(-1px);
            border-color: rgba(255, 107, 53, 0.45);
        }
        .alert-basic-layout-option input {
            position: absolute;
            opacity: 0;
            pointer-events: none;
        }
        .alert-basic-layout-option:has(input:checked) {
            border-color: #ff6b35;
            background: rgba(255, 107, 53, 0.16);
            color: #fff;
        }
        .alert-basic-layout-option__icon {
            width: 42px;
            height: 42px;
            border-radius: 8px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: rgba(255, 255, 255, 0.1);
            color: #fdba74;
            flex: 0 0 auto;
        }
        .alert-basic-layout-option__label {
            font-size: 0.82rem;
            font-weight: 700;
            line-height: 1.25;
        }
        #alert-advanced-code.fs-feature-locked-interactive .tab-btn {
            opacity: 0.45;
            cursor: not-allowed;
            pointer-events: none;
        }
        #alert-advanced-code.fs-feature-locked-interactive textarea {
            opacity: 0.5;
            cursor: not-allowed;
            background: rgba(255, 255, 255, 0.04);
        }
        #alert-advanced-code.fs-feature-locked-interactive {
            border: 1px dashed rgba(249, 115, 22, 0.35);
            border-radius: 12px;
            padding: 1rem;
            background: rgba(0, 0, 0, 0.15);
        }
        .alert-placeholders-block {
            background: rgba(0, 0, 0, 0.22);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 12px;
            padding: 1rem 1.1rem;
        }
        .alert-placeholders-intro {
            font-size: 0.8rem;
            color: rgba(255, 255, 255, 0.55);
            margin-bottom: 0.85rem;
            line-height: 1.45;
        }
        .alert-placeholder-group + .alert-placeholder-group {
            margin-top: 0.85rem;
            padding-top: 0.85rem;
            border-top: 1px solid rgba(255, 255, 255, 0.06);
        }
        .alert-placeholder-group-label {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            font-size: 0.72rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: rgba(255, 255, 255, 0.45);
            margin-bottom: 0.5rem;
        }
        .alert-placeholder-group-label i {
            font-size: 0.68rem;
            opacity: 0.85;
        }
        .alert-placeholder-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 0.45rem;
        }
        .alert-ph-tag {
            display: inline-flex;
            align-items: center;
            gap: 0.3rem;
            padding: 0.32rem 0.68rem;
            border-radius: 9999px;
            font-size: 0.78rem;
            font-weight: 600;
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
            line-height: 1.2;
            white-space: nowrap;
            cursor: pointer;
            border: 1px solid transparent;
            transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
        }
        .alert-ph-tag:hover {
            transform: translateY(-1px);
        }
        .alert-ph-tag:active {
            transform: translateY(0);
        }
        .alert-ph-tag--copied {
            box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.18);
        }
        .alert-ph-tag--msg {
            background: rgba(255, 107, 53, 0.15);
            border-color: rgba(255, 107, 53, 0.32);
            color: #fdba74;
        }
        .alert-ph-tag--msg:hover {
            background: rgba(255, 107, 53, 0.24);
            box-shadow: 0 4px 12px rgba(255, 107, 53, 0.15);
        }
        .alert-ph-tag--font {
            background: rgba(59, 130, 246, 0.14);
            border-color: rgba(59, 130, 246, 0.32);
            color: #93c5fd;
        }
        .alert-ph-tag--font:hover {
            background: rgba(59, 130, 246, 0.22);
            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.12);
        }
        .alert-ph-tag--text {
            background: rgba(236, 72, 153, 0.14);
            border-color: rgba(236, 72, 153, 0.32);
            color: #f9a8d4;
        }
        .alert-ph-tag--text:hover {
            background: rgba(236, 72, 153, 0.22);
            box-shadow: 0 4px 12px rgba(236, 72, 153, 0.12);
        }
        .alert-ph-tag--bg {
            background: rgba(16, 185, 129, 0.14);
            border-color: rgba(16, 185, 129, 0.32);
            color: #6ee7b7;
        }
        .alert-ph-tag--bg:hover {
            background: rgba(16, 185, 129, 0.22);
            box-shadow: 0 4px 12px rgba(16, 185, 129, 0.12);
        }
        .alert-placeholders-hint {
            margin-top: 0.75rem;
            font-size: 0.72rem;
            color: rgba(255, 255, 255, 0.38);
        }
        .alert-mode-switch {
            display: flex;
            flex-wrap: wrap;
            gap: 0.65rem;
            align-items: center;
            margin-bottom: 0.35rem;
        }
        .alert-mode-switch .tab-btn {
            min-width: 9.5rem;
            justify-content: center;
        }
        .alert-mode-hint {
            flex: 1 1 220px;
            font-size: 0.82rem;
            color: rgba(255, 255, 255, 0.5);
            line-height: 1.45;
        }