.mm-toasts { position: fixed; inset-block-end: 24px; inset-inline-start: 24px; z-index: 9999; display: grid; gap: 10px; max-width: min(360px, calc(100vw - 48px)); pointer-events: none; } .mm-toast { padding: 12px 16px; border-radius: var(--mm-radius-md); background: var(--mm-gray-900); color: var(--mm-white); font-size: var(--mm-fs-sm); line-height: 22px; box-shadow: var(--mm-shadow-lg); animation: mm-toast-in .22s ease both; } .mm-toast--ok { background: #15803d; } .mm-toast--warn { background: #a16207; } .mm-toast--error { background: #b91c1c; } .mm-toast.is-out { animation: mm-toast-out .3s ease both; } @keyframes mm-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes mm-toast-out { to { opacity: 0; transform: translateY(8px); } } body.mm-modal-open { overflow: hidden; } .mm-modal { position: fixed; inset: 0; z-index: 9998; display: flex; align-items: center; justify-content: center; padding: 24px; } .mm-modal__backdrop { position: absolute; inset: 0; background: rgba(4, 4, 4, .55); animation: mm-fade .2s ease both; } .mm-modal__box { position: relative; display: flex; flex-direction: column; width: min(560px, 100%); max-height: calc(100vh - 48px); background: var(--mm-surface); border-radius: var(--mm-radius-xl); box-shadow: var(--mm-shadow-lg); overflow: hidden; animation: mm-pop .22s ease both; } .mm-modal__box--wide { width: min(1100px, 100%); } @keyframes mm-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes mm-pop { from { opacity: 0; transform: scale(.97) translateY(8px); } to { opacity: 1; transform: none; } } .mm-modal__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--mm-border); } .mm-modal__title { margin: 0; font-size: var(--mm-fs-lg); font-weight: var(--mm-fw-bold); } .mm-modal__close { width: 36px; height: 36px; flex: none; border: 0; border-radius: var(--mm-radius-md); background: var(--mm-surface-soft); font-size: 22px; line-height: 1; color: var(--mm-text-muted); cursor: pointer; transition: background-color var(--mm-transition), color var(--mm-transition); } .mm-modal__close:hover { background: var(--mm-border); color: var(--mm-text); } .mm-modal__body { padding: 20px; overflow: auto; } .mm-modal__loading { margin: 0; padding: 32px 0; text-align: center; color: var(--mm-text-muted); } .mm-compare__wrap { overflow-x: auto; } .mm-compare__table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: var(--mm-fs-sm); } .mm-compare__table th, .mm-compare__table td { padding: 12px 14px; border: 1px solid var(--mm-border); text-align: start; vertical-align: middle; } .mm-compare__table thead th { background: var(--mm-surface-soft); vertical-align: top; width: 240px; min-width: 200px; } .mm-compare__corner { width: 150px; min-width: 130px; } .mm-compare__table tbody th { background: var(--mm-surface-soft); font-weight: var(--mm-fw-semibold); white-space: nowrap; } .mm-compare__table tbody tr:nth-child(even) td { background: rgba(249, 250, 252, .6); } .mm-compare__head { display: grid; gap: 8px; color: var(--mm-text); } .mm-compare__head img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--mm-radius-sm); } .mm-compare__head span { font-weight: var(--mm-fw-semibold); line-height: 20px; } .mm-compare__head:hover span { color: var(--mm-primary); } .mm-compare__drop { margin-top: 8px; padding: 4px 10px; border: 1px solid var(--mm-border-strong); border-radius: var(--mm-radius-sm); background: transparent; font: inherit; font-size: var(--mm-fs-xs); color: var(--mm-danger); cursor: pointer; } .mm-compare__drop:hover { border-color: var(--mm-danger); } .mm-comparebar { position: fixed; inset-block-end: 24px; inset-inline-end: 24px; z-index: 9997; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--mm-radius-xl); background: var(--mm-surface); box-shadow: var(--mm-shadow-lg); border: 1px solid var(--mm-border); animation: mm-toast-in .22s ease both; } .mm-comparebar__count { font-size: var(--mm-fs-sm); font-weight: var(--mm-fw-medium); white-space: nowrap; } .mm-comparebar__clear { border: 0; background: transparent; font: inherit; font-size: var(--mm-fs-xs); color: var(--mm-text-muted); cursor: pointer; text-decoration: underline; } .mm-comparebar__clear:hover { color: var(--mm-danger); } .mm-single__tool.is-on { border-color: var(--mm-accent); color: var(--mm-accent); } .mm-single__tool.is-on svg { color: var(--mm-accent); } .mm-reportform { display: grid; gap: 16px; } .mm-reportform__note { margin: 0; padding: 10px 14px; border-radius: var(--mm-radius-md); font-size: var(--mm-fs-sm); } .mm-reportform__note.is-error { background: rgba(239, 68, 68, .08); color: #b91c1c; } .mm-reportform .mm-btn { justify-self: start; } @media (max-width: 560px) { .mm-modal { padding: 12px; } .mm-comparebar, .mm-toasts { inset-inline: 12px; } .mm-comparebar { justify-content: space-between; } } @media (prefers-reduced-motion: reduce) { .mm-toast, .mm-modal__backdrop, .mm-modal__box, .mm-comparebar { animation: none; } }