* {
    box-sizing: border-box;
}

/* Атрибут hidden должен скрывать BEM-блоки даже при заданном им display в компонентных стилях. */
[hidden] {
    display: none !important;
}

html,
body {
    min-height: 100%;
}

body {
    margin: 0;
    color: var(--color-text);
    background: var(--color-bg);
    font-family: Arial, Helvetica, sans-serif;
    font-size: var(--font-size-md);
    line-height: var(--line-height-md);
}

button,
input,
textarea {
    font: inherit;
}

button {
    cursor: pointer;
}

.page {
    min-height: 100vh;
}

.page--centered {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.button {
    min-height: 40px;
    padding: 9px 16px;
    border: 1px solid transparent;
    border-radius: var(--border-radius);
    font-weight: 700;
}

.button:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.button--primary {
    color: var(--color-surface);
    background: var(--color-primary);
}

.button--primary:hover:not(:disabled) {
    background: var(--color-primary-hover);
}

.button--secondary {
    color: var(--color-text);
    background: var(--color-surface);
    border-color: var(--color-border);
}

.button--ghost {
    color: var(--color-primary);
    background: transparent;
}

.icon-button {
    width: 36px;
    height: 36px;
    padding: 0;
    color: var(--color-text-muted);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
}

.field {
    display: grid;
    gap: 6px;
}

.field__label {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm);
    font-weight: 700;
}

.field__input {
    min-height: 44px;
    padding: 10px 12px;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
}

.field__input:focus,
.composer__input:focus {
    border-color: var(--color-primary);
    outline: 3px solid var(--color-primary-soft);
}

.toast {
    position: fixed;
    right: 24px;
    bottom: 24px;
    max-width: 420px;
    padding: 12px 16px;
    color: var(--color-surface);
    background: var(--color-text);
    border-radius: var(--border-radius);
    box-shadow: 0 10px 30px rgba(24, 32, 42, 0.2);
}