body.app-modal-open { overflow: hidden; }
.app-modal[hidden] { display: none; }
.app-modal { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; padding: 20px; }
.app-modal-backdrop { position: absolute; inset: 0; background: rgba(19, 31, 49, .62); backdrop-filter: blur(3px); }
.app-modal-panel { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px 16px; width: min(520px, calc(100vw - 32px)); box-sizing: border-box; padding: 24px; border: 1px solid #dce4ec; border-radius: 14px; background: #fff; box-shadow: 0 24px 70px rgba(17, 29, 47, .28); }
.app-modal-icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 50%; background: #e8f3fb; color: #0878ba; font-size: 20px; font-weight: 900; }
.app-modal[data-tone="danger"] .app-modal-icon { background: #fdebea; color: #b42318; }
.app-modal-content h2 { margin: 1px 0 7px; color: #202c43; font-size: 20px; }
.app-modal-content > p { margin: 0; color: #657186; font-size: 13px; line-height: 1.55; white-space: pre-line; }
.app-modal-input-wrap { display: grid; gap: 7px; margin-top: 16px; color: #344158; font-size: 12px; font-weight: 800; }
.app-modal-input-wrap[hidden] { display: none; }
.app-modal-input-wrap textarea { width: 100%; box-sizing: border-box; padding: 11px 12px; border: 1px solid #cbd5e1; border-radius: 8px; color: #263249; background: #fff; font: inherit; font-weight: 500; resize: vertical; }
.app-modal-input-wrap textarea:focus { border-color: #1685cb; outline: 3px solid rgba(22, 133, 203, .12); }
.app-modal-input-error { color: #b42318; font-weight: 700; }
.app-modal-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }
.app-modal-actions button { min-width: 96px; padding: 10px 15px; border-radius: 8px; cursor: pointer; font-weight: 800; }
.app-modal-cancel { border: 1px solid #ccd6e1; background: #fff; color: #455269; }
.app-modal-confirm { border: 1px solid #1685cb; background: #1685cb; color: #fff; }
.app-modal[data-tone="danger"] .app-modal-confirm { border-color: #c9362a; background: #c9362a; }
.app-modal-actions button:focus-visible { outline: 3px solid rgba(22, 133, 203, .2); outline-offset: 2px; }
@media (max-width: 520px) {
    .app-modal-panel { grid-template-columns: 1fr; padding: 20px; }
    .app-modal-actions { grid-column: auto; }
    .app-modal-actions button { flex: 1; }
}