.modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--overlay); backdrop-filter: blur(4px); display: none; align-items: center; justify-content: center; z-index: 1000; padding: var(--sp-4); }
.modal-content { background: var(--surface); border-radius: var(--radius-control); box-shadow: var(--sh-3); border: 1px solid var(--border); width: 100%; max-width: 500px; padding: var(--sp-3); position: relative; }
.modal-content-400 { max-width: 400px; }
.modal-content-600 { max-width: 600px; }
.modal-content-700 { max-width: 700px; }
.modal-scroll-area { max-height: 400px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius-control); }
.modal-icon-badge {
    background: var(--surface-raised);
    color: var(--danger);
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--sp-4);
}
.modal-large {
    max-width: 800px;
    width: 90%;
    max-height: 90vh;
    display: flex !important;
    flex-direction: column;
    padding: 0;
    overflow: hidden !important;
    border-radius: var(--radius-control);
    box-shadow: var(--sh-3);
    background: var(--surface);
    border: none;
}