/* Базовые стили: сброс, раскладка страницы, кнопки, тосты. */
*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: var(--fs-base);
    line-height: 1.35;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    /* Шапка сверху, доска занимает остаток экрана и прокручивается сама.
       100dvh — корректная высота в iOS Safari (100vh там больше видимой области) */
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

body.is-loading .board-wrap,
body.is-loading .topbar > :not(.brand) { visibility: hidden; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }
:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 2px; }

svg { display: block; width: 16px; height: 16px; flex: none; }

[hidden] { display: none !important; }

/* В режиме просмотра скрываются элементы, доступные только редактору */
body.is-viewer .editor-only { display: none !important; }
/* Элементы только для администратора (управление пользователями) */
body:not(.is-admin) .admin-only { display: none !important; }

/* ===== Кнопки ===== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-1);
    height: var(--control-h);
    padding: 0 14px;
    border: 0;
    border-radius: var(--r-sm);
    font-size: var(--fs-base);
    font-weight: 500;
    white-space: nowrap;
    transition: background var(--transition), opacity var(--transition);
}
.btn:disabled { opacity: 0.45; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover:not(:disabled) { background: #0a6fe6; }
.btn-tinted { background: var(--accent-soft); color: var(--accent); }
.btn-tinted:hover:not(:disabled) { background: rgba(0, 122, 255, 0.16); }
.btn-gray { background: var(--fill); color: var(--text); }
.btn-gray:hover:not(:disabled) { background: var(--fill-strong); }
.btn-plain { background: transparent; color: var(--accent); }
.btn-plain:hover:not(:disabled) { background: var(--accent-soft); }
.btn-danger { background: var(--red); color: #fff; }
.btn-danger-plain { background: transparent; color: var(--red-text); }
.btn-danger-plain:hover { background: var(--red-soft); }
.btn-block { width: 100%; }

.icon-btn {
    display: grid;
    place-items: center;
    width: var(--icon-btn);
    height: var(--icon-btn);
    padding: 0;
    border: 0;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--text-2);
    transition: background var(--transition), color var(--transition);
}
.icon-btn:hover { background: var(--fill); color: var(--accent); }

/* ===== Уведомления ===== */
.toasts {
    position: fixed;
    left: 50%;
    bottom: calc(var(--sp-5) + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    z-index: 300;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-2);
    pointer-events: none;
    width: max-content;
    max-width: calc(100vw - 32px);
}
.toast {
    padding: 10px 16px;
    border-radius: var(--r-md);
    background: rgba(28, 28, 30, 0.86);
    -webkit-backdrop-filter: var(--blur);
    backdrop-filter: var(--blur);
    color: #fff;
    font-size: var(--fs-md);
    box-shadow: var(--shadow-pop);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 200ms ease, transform 200ms ease;
    pointer-events: auto;
}
.toast.is-visible { opacity: 1; transform: none; }
.toast-error { background: rgba(215, 0, 21, 0.92); }
.toast-success { background: rgba(28, 28, 30, 0.86); }

/* Когда видна панель выделения — тосты поднимаются над ней */
body:has(.selection-bar:not([hidden])) .toasts { bottom: calc(88px + env(safe-area-inset-bottom)); }

/* Знак-логотип (общий для шапки и входа) */
.brand-mark {
    width: 22px;
    height: 22px;
    border-radius: 7px;
    background: linear-gradient(135deg, #5e9bff, #a78bfa);
    flex: none;
}