.modal-overlay { position: fixed; inset: 0; z-index: 2000; padding: 20px; display: none; align-items: center; justify-content: center; overflow-y: auto; background: rgba(0, 0, 0, .62); backdrop-filter: blur(4px); }
.modal-overlay.show { display: flex; }
body.modal-open { overflow: hidden; }
.modal { width: 100%; max-width: 570px; max-height: calc(100vh - 40px); padding: 24px; overflow-y: auto; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-md); animation: modalIn .2s ease; }
.modal-small { max-width: 450px; }
.modal-tiny { max-width: 390px; text-align: center; }
.modal-header { margin-bottom: 22px; display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.modal-header h2 { font-size: 17px; }
.modal-header p { margin-top: 5px; color: var(--muted); font-size: 9.5px; }
.close-modal { width: 31px; height: 31px; flex: 0 0 31px; display: grid; place-items: center; border: 0; border-radius: 7px; color: var(--muted); background: var(--surface-3); }
.close-modal:hover { color: var(--text); }
.confirm-icon { width: 48px; height: 48px; margin: 0 auto 14px; display: grid; place-items: center; border-radius: 50%; color: var(--red); background: var(--red-soft); font-size: 18px; }
.modal-tiny > h2 { font-size: 16px; }
.modal-tiny > p { margin: 9px auto 0; max-width: 300px; color: var(--muted); font-size: 10px; line-height: 1.55; }
.photo-modal-overlay { background: rgba(0, 0, 0, .86); }
.photo-modal { position: relative; width: min(900px, 100%); animation: modalIn .2s ease; }
.photo-modal-close { position: absolute; top: -12px; right: -12px; z-index: 1; color: #fff; background: #1f1f1f; }
.photo-modal-image { width: 100%; max-height: 75vh; display: block; object-fit: contain; border-radius: 13px; background: #111; }
.photo-modal-caption { margin-top: 12px; color: #fff; font-size: 12px; font-weight: 600; text-align: center; }

.toast-container { position: fixed; right: 22px; bottom: 22px; z-index: 3000; display: flex; flex-direction: column; gap: 9px; pointer-events: none; }
.toast { width: min(360px, calc(100vw - 40px)); padding: 13px 14px; display: flex; align-items: flex-start; gap: 10px; border-radius: 10px; color: #fff; background: #171717; box-shadow: var(--shadow-md); font-size: 10px; line-height: 1.4; animation: toastIn .2s ease; pointer-events: auto; }
.toast.success i { color: #4ade80; }
.toast.error i { color: #f87171; }
.toast.warning i { color: #facc15; }
.toast button { margin-left: auto; border: 0; color: #aaa; background: transparent; }
.toast.hiding { opacity: 0; transform: translateY(8px); transition: .2s ease; }

.overlay { display: none; }

@keyframes pageIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes popoverIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes modalIn { from { opacity: 0; transform: translateY(-10px) scale(.99); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.lock-screen {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(5, 6, 7, .94);
    backdrop-filter: blur(16px);
}
.lock-card {
    width: min(380px, 100%);
    padding: 36px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid #2a2d31;
    border-radius: 18px;
    color: #fff;
    background: #141619;
    box-shadow: 0 24px 70px rgba(0,0,0,.45);
    text-align: center;
}
.lock-card .logo-icon { margin-bottom: 18px; }
.lock-card h1 { font-size: 20px; }
.lock-card p { margin: 8px 0 22px; color: #9ca3af; font-size: 11px; }
.product-photo, .product-thumb { padding: 0; border-style: solid; }
.product-photo img, .product-thumb img { width: 100%; height: 100%; display: block; object-fit: cover; }