/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-nivxpgml2s] {
    min-height: 100vh;
}

main[b-nivxpgml2s] {
    padding: 1.5rem;
}
/* /Components/Pages/DialMockPage.razor.rz.scp.css */
/* The outer layout styles stay there, because those elements 
  are real Razor-rendered DOM and do get the scope attribute:
*/
.dialmock-page[b-i0qir8567h] {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.editor-card[b-i0qir8567h],
.preview-card[b-i0qir8567h] {
    padding: 1rem;
    border: 1px solid #d0d7de;
    border-radius: 12px;
    background: #fff;
}

.form-grid[b-i0qir8567h] {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.field[b-i0qir8567h] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.field input[b-i0qir8567h] {
    padding: 0.5rem 0.65rem;
}

.actions[b-i0qir8567h] {
    margin-top: 1rem;
}

.actions button[b-i0qir8567h] {
    padding: 0.65rem 1rem;
    cursor: pointer;
}

.validation-errors[b-i0qir8567h] {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    background: #fff4f4;
    border: 1px solid #e5b4b4;
}